userCenteraddMaintenanceJournalInformations.vue 6.5 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177
  1. <template>
  2. <div style="width: 100%;background: #fff;min-height: 700px;" class="userCenterAuthenticationPersonal">
  3. <div style="height: 80px;line-height: 80px;margin-top: 20px;margin: 0 20px; color: #666;font-size: 15px; border-bottom: 1px solid #bcbcbc;">
  4. 添加期刊信息
  5. <!-- <span style="float: right;margin-top: 27px;"> <i class="el-icon-edit"></i> 修改</span> -->
  6. </div>
  7. <div style="width: 600px;" >
  8. <el-form ref="form" :model="form" label-width="160px" class="demo-ruleForm" style="margin-left: 100px;margin-top: 20px;width: 700px;">
  9. <el-form-item label="期刊名称:" prop='name'>
  10. <el-input v-model="form.name" style="width: 70%;"></el-input>
  11. </el-form-item>
  12. <el-form-item label="期刊类型:" prop='name'>
  13. <el-input v-model="form.name" style="width: 70%;"></el-input>
  14. </el-form-item>
  15. <el-form-item label="作者:" prop='name'>
  16. <el-input v-model="form.name" style="width: 70%;"></el-input>
  17. </el-form-item>
  18. <el-form-item label="语言:">
  19. <el-radio-group v-model="form.resource">
  20. <el-radio label="中文"></el-radio>
  21. <el-radio label="英文"></el-radio>
  22. </el-radio-group>
  23. </el-form-item>
  24. <el-form-item label="年份:">
  25. <el-date-picker
  26. v-model="form.startData"
  27. type="date"
  28. placeholder="选择日期" style="width: 70%;">
  29. </el-date-picker>
  30. </el-form-item>
  31. <el-form-item label="期次:">
  32. <el-input v-model="form.name" style="width: 70%;"></el-input>
  33. </el-form-item>
  34. <el-form-item label="主题:">
  35. <el-input v-model="form.name" style="width: 70%;"></el-input>
  36. </el-form-item>
  37. <el-form-item label="摘要:">
  38. <el-input v-model="form.name" style="width: 70%;"></el-input>
  39. </el-form-item>
  40. <el-form-item label="上传封面:" style="position: relative;">
  41. <el-upload
  42. class="avatar-uploader"
  43. action="https://jsonplaceholder.typicode.com/posts/"
  44. :show-file-list="false"
  45. :on-success="handleAvatarSuccess"
  46. >
  47. <!-- :before-upload="beforeAvatarUpload" -->
  48. <img v-if="imageUrl" :src="imageUrl" class="avatar">
  49. <i v-else class="el-icon-plus avatar-uploader-icon"></i>
  50. </el-upload>
  51. </el-form-item>
  52. <el-form-item label="阅读链接:">
  53. <el-input v-model="form.name" style="width: 70%;"></el-input>
  54. </el-form-item>
  55. <el-form-item label="介绍:">
  56. <ue></ue>
  57. </el-form-item>
  58. </el-form>
  59. </div>
  60. <div style="height: 200px;">
  61. <div style="margin-top: 100px;">
  62. <el-button type="warning" style="margin-left: 300px;" @click="goAithentication">上一步</el-button>
  63. <el-button type="primary" style="margin-left: 30px;">提交审核</el-button>
  64. </div>
  65. </div>
  66. </div>
  67. </template>
  68. <script>
  69. import { regionDataPlus } from 'element-china-area-data'
  70. import ue from '@/components/ue'
  71. export default {
  72. name: 'userCenteraddMaintenanceJournalInformations',
  73. components: {
  74. ue
  75. },
  76. data () {
  77. return {
  78. informationsClass:'1',
  79. dialogVisible: false,
  80. ifDiaslog:'',
  81. title:'',
  82. options: regionDataPlus,
  83. selectedOptions: [],
  84. form: {
  85. name: '',
  86. region: '',
  87. date1: '',
  88. date3: '',
  89. date2: '',
  90. delivery: false,
  91. type: [],
  92. resource: '',
  93. desc: '',
  94. startData:''
  95. },
  96. imageUrl: ''
  97. }
  98. },
  99. methods:{
  100. goAithentication(num){
  101. this.$router.go(-1);//返回上一层
  102. },
  103. handleChange (value) {
  104. console.log(value)
  105. },
  106. handleAvatarSuccess(res, file) {
  107. this.imageUrl = URL.createObjectURL(file.raw);
  108. },
  109. beforeAvatarUpload(file) {
  110. const isJPG = file.type === 'image/jpeg';
  111. const isLt2M = file.size / 1024 / 1024 < 2;
  112. if (!isJPG) {
  113. this.$message.error('上传头像图片只能是 JPG 格式!');
  114. }
  115. if (!isLt2M) {
  116. this.$message.error('上传头像图片大小不能超过 2MB!');
  117. }
  118. return isJPG && isLt2M;
  119. }
  120. }
  121. }
  122. </script>
  123. <style scoped>
  124. .el-button {
  125. width: 200px;
  126. height: 45px;
  127. }
  128. .authenticationBox1 {
  129. margin-left: 35px;
  130. margin-right: 150px;
  131. height: 100px;
  132. border: 1px solid rgba(153, 153, 153, 1);
  133. border-radius: 10px;
  134. margin-top: 50px;
  135. position: relative;
  136. }
  137. .authenticationBox2 {
  138. margin: 50px 150px 0 35px;
  139. height: 100px;
  140. border: 1px solid rgba(153, 153, 153, 1);
  141. border-radius: 10px;
  142. position: relative;
  143. }
  144. .authenticationBox1:hover,
  145. .authenticationBox2:hover {
  146. border: 1px solid #ff8400;
  147. }
  148. .avatar-uploader .el-upload {
  149. border: 1px dashed #d9d9d9;
  150. border-radius: 6px;
  151. cursor: pointer;
  152. position: relative;
  153. overflow: hidden;
  154. }
  155. .avatar-uploader .el-upload:hover {
  156. border-color: #409EFF;
  157. }
  158. .userCenterAuthenticationPersonal>>>.el-upload {
  159. border: 1px solid rgba(204, 204, 204, 1);
  160. }
  161. .avatar-uploader-icon {
  162. font-size: 28px;
  163. color: #8c939d;
  164. width: 178px;
  165. height: 178px;
  166. line-height: 178px;
  167. text-align: center;
  168. }
  169. .avatar {
  170. width: 178px;
  171. height: 178px;
  172. display: block;
  173. }
  174. </style>