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" ref="baseInfoRef">
                <GuipInput v-model="coverInfo.school_name" :client-form-flex="true" label="所属学校" width="356px" />
                <GuipRadio :options="collegeList" v-model="coverInfo.college" :client-form-flex="true" label="学院" />
                <GuipInput v-model="coverInfo.college_name" label="学院名称" :client-form-flex="true" width="356px" />
                <GuipRadio :options="qualificationList" v-model="coverInfo.qualification" label="学历" :client-form-flex="true" />
                <GroupFormBtns cancelText="重置" @cancel="cancelClick('baseInfoRef')" flex="start"
                    @confirm="submitCoverInfo" />
            </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="uploadCoverTpl" />
        </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: {
            },
            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
                },
            ],
            formData: new FormData(),
        };
    },
    mounted() {
        this.getCoverInfo();
    },
    methods: {
        async getCoverInfo(){
            this.$http('POST', '/supernew/ajax_get_paiban_template_list', {}, {
            }).then(response => {
                console.log(response,'=======999');
                this.$nextTick(() => {
                    if (response.status) {
                        this.$Message.success(response.info);
                    } else {
                        this.$Message.error(response.info);
                    }
                })
            }).catch(error => {
                console.error(error, 'error')
            })
        },
        cancelClick(formName) {
            this.$refs[formName].resetFields();
        },
        // 提交封面基本信息
        submitCoverInfo() {
            console.log(this.coverInfo,'coverInfo信息');

            this.$refs['baseInfoRef'].validate((valid) => {
                if (valid) {
                    console.log('submit!');
                    this.handleConfirmRefuse()

                } else {
                    return false;
                }
            });

        },
        // 提交封面样式信息
        uploadCoverTpl() {
            this.formData.set('template_id', '1')
            this.$http('POST', '/supernew/upload_paiban_template_cover', this.formData).then(response => {
                this.$nextTick(() => {
                    if (response.status) {
                        this.$Message.success(response.info);
                    } else {
                        this.$Message.error(response.info);
                    }
                })
            }).catch(error => {
                console.error(error, 'error')
            })
        },
        // 提交基本信息
        handleConfirmConfirm(){
            // let props={
            //     template_id,
            //     school,
            //     college,
            //     degree
            // }
            try {
                this.$http('POST', '/supernew/ajax_update_paiban_template_info', {
                    ...this.coverInfo
                }).then(response => {
                    this.$nextTick(() => {
                        if (response.status) {
                            this.$Message.success(response.info);
                            this.getList()
                        } else {
                            this.$Message.error(response.info);
                        }
                    })
                }).catch(error => {
                    console.error(error, 'error')
                })
            } catch (error) {
                console.error('数据加载失败:', error)
            }
        },
        handleQQkfChange(file, fileList) {
            console.log(file, fileList)
            let fileObj = file.raw
            this.formData.set('file', fileObj)
          
        },
        submitFun() {
            // let props = {
            //     configdata,
            //     template_id
            // }
            this.$http('POST', '/supernew/upload_paiban_template_cover', {
                
            }).then(response => {
                this.$nextTick(() => {
                    if (response.status) {
                        this.$Message.success(response.info);
                    } else {
                        this.$Message.error(response.info);
                    }
                })
            }).catch(error => {
                console.error(error, 'error')
            })
        }
    },

}
</script>

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