kuailelunwen_new_houtai/src/views/super/clientSet/coverInfoPage.vue

<template>
    <div class="main-content12 coverInfoPage">
        <h3 class="pageTitle">封面信息</h3>
        <div class="client_flex-common flex-common" id="">
            <div class="before_h_title mb24">基本信息</div>
            <el-form :model="coverInfo">
                <GuipInput v-model="coverInfo.name" :client-form-flex="true" label="所属学校" width="356px" />
                <GuipRadio :options="collegeList" v-model="coverInfo.name" :client-form-flex="true" label="学院" />
                <GuipInput v-model="coverInfo.name" label="学院名称" :client-form-flex="true" width="356px" />
                <GuipRadio :options="qualificationList" v-model="coverInfo.name" label="学历" :client-form-flex="true" />
                <GroupFormBtns cancelText="重置" @cancel="cancelClick('siteForm')" flex="start"
                    @confirm="submitDoctorBaseInfo" />
            </el-form>
        </div>
        <div class="client_flex-common flex-common mt12" id="">
            <div class="before_h_title mb24">封面样式</div>
            <div class="flex mt12">
                <img v-if="coverStyle" :src="coverStyle.qrcode_path" class="kefuImg mr-12">
                <div class="qqCode-wrap">
                    <el-upload class="avatar-uploader mt12" accept=".jpg" :on-change="handleQQkfChange" action="#"
                        :multiple="false" :limit="Number(1)" ref="avatorUpload" :auto-upload="false">
                        <GuipButton class="upload-button" type="ignore" :btnstyle="{ width: '118px' }">
                            <div class="bgImg"></div>
                            <span>上传图片</span>
                        </GuipButton>
                    </el-upload>
                    <p class="avatar-desc">支持 jpg、png 格式，大小不超过 2MB </p>
                </div>
            </div>
            
            <GroupFormBtns cancelText="重置" @cancel="cancelClick('siteForm')" flex="start"
                @confirm="submitDoctorBaseInfo" />
        </div>
        <div class="save-button flex">
            <GuipButton type="primary" :btnstyle="{width:'144px',height:'46px'}" @click="submitFun">收录完成</GuipButton>
        </div>
    </div>
</template>
<script>
import GuipInput from '@/components/GuipInput.vue';
import GroupFormBtns from '@/components/GroupFormBtns.vue';
import GuipRadio from '@/components/GuipRadio.vue';
import GuipButton from '@/components/GuipButton.vue';
// import GuipSelect from '@/components/GuipSelect.vue';

export default {
    name: 'CoverInfoPage',
    components: {
        GroupFormBtns,
        GuipInput,
        GuipRadio,
        GuipButton,
        // GuipSelect
    },
    data() {
        return {
            coverStyle: {
                url: '',
                qrcode_path: ''
            },
            coverInfo: {
                name: ''
            },
            rules: {
                name: [
                    { required: true, message: '请输入姓名', trigger: 'blur' }
                ]
            },
            collegeList: [// 学院列表
                {
                    label: '通用',
                    value: 1
                },
                {
                    label: '专用',
                    value: 2
                }
            ],
            qualificationList: [// 学历列表
                {
                    label: '专科',
                    value: 1
                },
                {
                    label: '本科',
                    value: 2
                },
                {
                    label: '硕士',
                    value: 3
                },
                {
                    label: '博士',
                    value: 4
                },
                {
                    label: '继续教育',
                    value: 5
                },
            ]

        };
    },
    methods: {
        cancelClick(formName) {
            this.$emit('cancel', formName);
        },
        submitDoctorBaseInfo() {
            this.$emit('confirm');
        },
        handleQQkfChange(file, fileList) {
            console.log(file, fileList)
            // let fileObj = file.raw
            // this.formData.set('qq_qrcode', fileObj)
        },
        submitFun() {
        }
    },
    mounted() {
    },

}
</script>

<style scoped lang="scss">
.flex-common {
    align-items: flex-start;
    padding: 24px 32px;
}
</style>