dev/dcp-web-gate/src_old/views/userCenter/userCenterItem/userCenterAddHomeMaintenance.vue

<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="上传封面:" 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-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="正文:">
                    <ue></ue>
                </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-upload
                        class="upload-demo"
                        drag
                        action="https://jsonplaceholder.typicode.com/posts/"
                        multiple>
                        <i class="el-icon-upload"></i>
                        <div class="el-upload__text">将文件拖到此处，或<em>点击上传</em></div>
                        <div class="el-upload__tip" slot="tip">只能上传jpg/png文件，且不超过500kb</div>
                        </el-upload>
                </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: 'userCenterAddHomeMaintenance',
        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>