acupuncture_admin/src/views/DoctorInformation.vue

<template>
    <div class="site-setting-wrap pagePadding min-flex-right">
        <div class="siteMessage flex-common" id="siteMessage1">
            <h3>基础信息</h3>
            <el-form :model="siteForm" :rules="siteFormrules" ref="siteForm">
                <div class="flex-wrap">
                    <div class="flex-left">
                        <div class="qqCode-wrap right">
                            <div class="flex">医生照片
                                <img class="labelImg" src="@/assets/form_qua_ic.svg" alt="">
                            </div>
                            <el-upload class="avatar-uploader upload-demo" accept=".jpg,.png" :multiple="false"
                                action="https://jsonplaceholder.typicode.com/posts/" :file-list="fileList"
                                :on-preview="handlePreview" :on-remove="handleRemove" :on-success="handleAvatarSuccess"
                                :before-upload="beforeAvatarUpload">
                                <hover-button button-text="重新上传" :default-icon="require('../assets/upLoad_grey.svg')"
                                    :hover-icon="require('../assets/upLoad_active.svg')" default-text-color="#23242B"
                                    hover-text-color="#006AFF" @click="btnClick" />
                                <div slot="tip" class="el-upload__tip desc">支持png、jpg格式，尺寸32PX*32PX</div>
                            </el-upload>
                        </div>
                        <GuipInput ref="GuipInput" column="column" :required="true" label="医生姓名" v-model="siteForm.name"
                            prop="name" placeholder="请输入" />
                    </div>
                    <div class="flex-line"></div>
                    <div class="flex-right">
                        <GuipInput ref="GuipInput" column="column" :required="true" label="身份证号码"
                            v-model="siteForm.idCard" prop="idCard" placeholder="请输入" />
                        <GuipInput ref="GuipInput" column="column" :required="true" label="手机号码"
                            v-model="siteForm.phone" prop="phone" placeholder="常用手机号" />
                    </div>
                </div>
            </el-form>
            <GroupFormBtns @cancel="cancelClick" @confirm="submitForm('siteForm')" />

        </div>
        <div class="siteMessage flex-common" id="siteMessage2">
            <h3>个人介绍</h3>
            <el-form :model="siteForm1" :rules="siteFormrules1" ref="siteForm1">
                <div class="flex-wrap">
                    <div class="flex-left">
                        <GuipInput column="column" v-model="form.description" prop="description" label="一句话介绍"
                            width="100%" height="56px" placeholder="请输入描述内容" maxlength="14" show-word-limit />
                        <GuipFormItem column="column" class="" label="详细介绍">
                            <GuipTextarea slot="formDom" v-model="form.detailDesc" prop="description" width="100%"
                                height="86px" autosize placeholder="请输入描述内容" maxlength="不限" show-word-limit />
                        </GuipFormItem>
                    </div>
                    <div class="flex-line"></div>
                    <div class="flex-right">
                        <GuipSelect column="column" label="个人标签" desc="展示给患者，体现您的专业性" v-model="form.tags" multiple
                            :options="options_payword" placeholder="点击选择">
                        </GuipSelect>
                    </div>
                </div>
            </el-form>
            <GroupFormBtns @cancel="cancelClick" @confirm="submitForm('siteForm1')" />
        </div>
    </div>
</template>
<script>
import { mapState } from 'vuex';
import HoverButton from '@/components/HoverButton.vue';
import GuipFormItem from '@/components/GuipFormItem.vue';
import GuipInput from '@/components/GuipInput.vue';
import GuipTextarea from '@/components/GuipTextarea.vue';
import GroupFormBtns from '@/components/GroupFormBtns.vue';
import GuipSelect from '@/components/GuipSelect.vue';
// import {setHighActive} from '@/utils/common';
export default {
    // 站点设置
    name: '',
    props: [''],
    components: {
        HoverButton,
        GuipFormItem,
        GuipInput,
        GuipSelect,
        GuipTextarea,
        GroupFormBtns

    },
    data() {
        return {
            doctorId: '',
            fileList: [
                { name: 'food.jpeg', url: 'https://fuss10.elemecdn.com/3/63/4e7f3a15429bfda99bce42a18cdd1jpeg.jpeg?imageMogr2/thumbnail/360x360/format/webp/quality/100' }
            ],
            options_payword: [{
                value: '选项1',
                label: '黄金糕'
            }, {
                value: '选项2',
                label: '双皮奶'
            }, {
                value: '选项3',
                label: '蚵仔煎'
            }, {
                value: '选项4',
                label: '龙须面'
            }, {
                value: '选项5',
                label: '北京烤鸭'
            }],
            siteForm: {
                name: 'mingzi',
                idCard: '',
                phone: '',
                img: '',
            },
            form: {
                description: '',
                detailDesc: '',
                tags: ''
            },
            siteFormrules: {
                name: [
                    { required: true, message: '请输入姓名', trigger: 'blur' }
                ],
                idCard: [
                    { required: true, message: '请输入身份证号', trigger: 'blur' }
                ],
                phone: [
                    { required: true, message: '请输入手机号', trigger: 'blur' }
                ]
            },
            siteForm1: {
                domain_set: '',
                domain_source: '平台免费域名',
            },
            siteForm2: {
                zhifubao_pay: '',
                weixin_pay: '',
            },
            siteFormrules1: {
                tags: [
                    { required: true, message: '请输入站点简称', trigger: 'change' }
                ]
            },
            domain_source: [
                { label: '平台免费域名', value: '平台免费域名', selectedLabel: "平台免费域名" },
                { label: '我自己有域名', value: '我自己有域名', selectedLabel: "我自己有域名" },
            ],
            options_weixin_null: {
                label: '暂无收款账号',
                value: '暂时没有收款账号，我想稍后配置',
                desc: '暂无收款账号，稍后配置'
            },
            select_placeholder_weixin: '暂无收款账号，稍后配置',
            selectedItemWeixin: {},//微信收款方式
            options_weixin: [],
            options_zhifubao: [],
        }
    },
    computed: {
        ...mapState(['pageTitle']) // 从Vuex映射showSidebar状态到组件的计算属性中
    },
    mounted() {
        const id = this.$route.query.id; // 获取 id 参数
        this.doctorId = id;
        if (id) {
            // 请求医生信息
            this.fetchDoctorData(id);
        }
    },
    methods: {
        fetchDoctorData(id) {
            this.$http('POST', '/supernew/ajax_get_type_batch_list', {
                id
            }).then(response => {
                this.projectTagData = response.data

            }).catch(error => {
                console.error(error, 'error')
            })
        },
        btnClick() {
        },
        handleRemove(file, fileList) {
            console.log(file, fileList);
        },
        handlePreview(file) {
            console.log(file);
        },
        // 上传图片
        handleAvatarSuccess(res, file) {
            this.imageUrl1 = URL.createObjectURL(file.raw);
        },
        beforeAvatarUpload(file) {
            const isJPG = file.type === 'image/jpeg' || file.type === 'image/png';
            const isLt2M = file.size / 1024 / 1024 < 2;

            if (!isJPG) {
                this.$message.error('上传头像图片只能是 JPG 或 PNG 格式!');
            }
            if (!isLt2M) {
                this.$message.error('上传头像图片大小不能超过 2MB!');
            }
            return isJPG && isLt2M;
        },
        changeNormalWeixin() {

        },
        changeSelectWeixin(item, flag) {
            if (flag) {
                this.select_placeholder_weixin = this.options_weixin_null.desc;
                return
            }
            this.selectedItem = { ...item };
            console.log(this.selectedItem, 'this.selectedItem====');
        },
        //  销售渠道
        domain_radioChange(type) {
            console.log(type, '--');
        },
        onSwitchChange(data) {
            console.log(data, '---');
        },
        submitForm(form) {
            console.log(this.$refs[form], '-----');
            this.$refs[form].validate((valid) => {
                if (valid) {
                    this.$http('POST', '/supernew/ajax_get_type_batch_list', {
                        name: form.name,
                        idCard: form.idCard,
                        phone: form.phone
                    }).then(response => {
                        this.projectTagData = response.data

                    }).catch(error => {
                        console.error(error, 'error')
                    })
                    alert('提交成功!');
                } else {
                    return false;
                }
            });
        },
        cancelClick() {
            console.log('quxiao');
        },
        confirmClick(type) {
            console.log(type, '确认');
        }

    }
}
</script>
<style lang="scss">
.siteMessage {
    border-radius: 4px;
    transition: all .5s;
    border: 1px solid transparent;
}

.addStore {
    margin-top: 12px;
}

.qqCode-wrap {
    margin-bottom: 14px;

    .labelImg {
        opacity: .7;
        margin-left: 8px;
    }

    .avatar-uploader {
        display: flex;
        flex-direction: column;
        align-items: flex-start;
        justify-content: flex-start;
        margin: 12px 0 8px;
    }

    .avatar-desc {
        text-align: left;
    }
}


.site-setting-wrap {
    width: 100%;
}

#siteMessage2 {
    margin: 12px 0;
}

.domain-wrap {
    .domain-item {
        margin-bottom: 10px;
    }


    .domain-item p:last-child {
        padding-left: 23px;
        color: #8A9099;
    }

    p {
        text-align: left;
        line-height: 18px;
        margin-bottom: 8px;
    }

    .domain-box {
        display: flex;
        flex-direction: column;
        justify-content: flex-start;
    }
}
</style>