123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177 |
- <template>
- <div style="width: 100%;background: #fff;min-height: 700px;" class="userCenterAuthenticationPersonal">
- <div style="height: 80px;line-height: 80px;margin-top: 20px;margin: 0 20px; color: #666;font-size: 15px; border-bottom: 1px solid #bcbcbc;">
- 添加期刊信息
- <!-- <span style="float: right;margin-top: 27px;"> <i class="el-icon-edit"></i> 修改</span> -->
- </div>
- <div style="width: 600px;" >
- <el-form ref="form" :model="form" label-width="160px" class="demo-ruleForm" style="margin-left: 100px;margin-top: 20px;width: 700px;">
- <el-form-item label="期刊名称:" prop='name'>
- <el-input v-model="form.name" style="width: 70%;"></el-input>
- </el-form-item>
- <el-form-item label="期刊类型:" prop='name'>
- <el-input v-model="form.name" style="width: 70%;"></el-input>
- </el-form-item>
- <el-form-item label="作者:" prop='name'>
- <el-input v-model="form.name" style="width: 70%;"></el-input>
- </el-form-item>
- <el-form-item label="语言:">
- <el-radio-group v-model="form.resource">
- <el-radio label="中文"></el-radio>
- <el-radio label="英文"></el-radio>
- </el-radio-group>
- </el-form-item>
- <el-form-item label="年份:">
- <el-date-picker
- v-model="form.startData"
- type="date"
- placeholder="选择日期" style="width: 70%;">
- </el-date-picker>
- </el-form-item>
- <el-form-item label="期次:">
- <el-input v-model="form.name" style="width: 70%;"></el-input>
- </el-form-item>
- <el-form-item label="主题:">
- <el-input v-model="form.name" style="width: 70%;"></el-input>
- </el-form-item>
- <el-form-item label="摘要:">
- <el-input v-model="form.name" style="width: 70%;"></el-input>
- </el-form-item>
- <el-form-item label="上传封面:" style="position: relative;">
- <el-upload
- class="avatar-uploader"
- action="https://jsonplaceholder.typicode.com/posts/"
- :show-file-list="false"
- :on-success="handleAvatarSuccess"
- >
- <!-- :before-upload="beforeAvatarUpload" -->
- <img v-if="imageUrl" :src="imageUrl" class="avatar">
- <i v-else class="el-icon-plus avatar-uploader-icon"></i>
- </el-upload>
-
- </el-form-item>
- <el-form-item label="阅读链接:">
- <el-input v-model="form.name" style="width: 70%;"></el-input>
- </el-form-item>
- <el-form-item label="介绍:">
- <ue></ue>
- </el-form-item>
- </el-form>
- </div>
-
- <div style="height: 200px;">
- <div style="margin-top: 100px;">
- <el-button type="warning" style="margin-left: 300px;" @click="goAithentication">上一步</el-button>
- <el-button type="primary" style="margin-left: 30px;">提交审核</el-button>
- </div>
- </div>
- </div>
- </template>
- <script>
- import { regionDataPlus } from 'element-china-area-data'
- import ue from '@/components/ue'
- export default {
- name: 'userCenteraddMaintenanceJournalInformations',
- components: {
- ue
- },
- data () {
- return {
- informationsClass:'1',
- dialogVisible: false,
- ifDiaslog:'',
- title:'',
- options: regionDataPlus,
- selectedOptions: [],
- form: {
- name: '',
- region: '',
- date1: '',
- date3: '',
- date2: '',
- delivery: false,
- type: [],
- resource: '',
- desc: '',
- startData:''
- },
- imageUrl: ''
- }
- },
- methods:{
- goAithentication(num){
- this.$router.go(-1);//返回上一层
- },
- handleChange (value) {
- console.log(value)
- },
- handleAvatarSuccess(res, file) {
- this.imageUrl = URL.createObjectURL(file.raw);
- },
- beforeAvatarUpload(file) {
- const isJPG = file.type === 'image/jpeg';
- const isLt2M = file.size / 1024 / 1024 < 2;
- if (!isJPG) {
- this.$message.error('上传头像图片只能是 JPG 格式!');
- }
- if (!isLt2M) {
- this.$message.error('上传头像图片大小不能超过 2MB!');
- }
- return isJPG && isLt2M;
- }
- }
- }
- </script>
- <style scoped>
- .el-button {
- width: 200px;
- height: 45px;
- }
- .authenticationBox1 {
- margin-left: 35px;
- margin-right: 150px;
- height: 100px;
- border: 1px solid rgba(153, 153, 153, 1);
- border-radius: 10px;
- margin-top: 50px;
- position: relative;
- }
- .authenticationBox2 {
- margin: 50px 150px 0 35px;
- height: 100px;
- border: 1px solid rgba(153, 153, 153, 1);
- border-radius: 10px;
- position: relative;
- }
- .authenticationBox1:hover,
- .authenticationBox2:hover {
- border: 1px solid #ff8400;
- }
- .avatar-uploader .el-upload {
- border: 1px dashed #d9d9d9;
- border-radius: 6px;
- cursor: pointer;
- position: relative;
- overflow: hidden;
- }
- .avatar-uploader .el-upload:hover {
- border-color: #409EFF;
- }
- .userCenterAuthenticationPersonal>>>.el-upload {
- border: 1px solid rgba(204, 204, 204, 1);
- }
- .avatar-uploader-icon {
- font-size: 28px;
- color: #8c939d;
- width: 178px;
- height: 178px;
- line-height: 178px;
- text-align: center;
- }
- .avatar {
- width: 178px;
- height: 178px;
- display: block;
- }
- </style>
|