BaseInfo.vue

<template>
    <div>
        <van-form ref='form'>
            <div class='title'>居民信息</div>
<!--            <div class='label-title'>证件类型</div>
            <van-field
                v-model='form.certificateTypeName'
                is-link
                readonly
                placeholder='证件类型'
                class='input-back mt-2 form-input'
                :rules='rules.certificateTypeName'
            />-->
<!--            <div class='label-title mt-5'>证件号码</div>
            <van-field
                v-model='form.idCard'
                readonly
                placeholder='证件号码'
                class='input-back mt-2 form-input'
                :rules='rules.idCard'
            />-->
            <div class='label-title mt-5'>姓名</div>
            <van-field
                v-model='form.residentName'
                clearable
                placeholder='姓名'
                class='input-back mt-2 form-input'
                :rules='rules.residentName'
            />
<!--            <div class='label-title mt-5'>性别</div>
            <van-field
                v-model='form.genderName'
                is-link
                readonly
                placeholder='性别'
                class='input-back mt-2 form-input'
                :rules='rules.genderName'
            />-->
<!--            <div class='label-title mt-5'>出生日期</div>
            <van-field
                v-model='form.dataBirth'
                is-link
                readonly
                placeholder='出生日期'
                class='input-back mt-2 form-input'
                :rules='rules.dataBirth'
            />-->
            <div class='label-title mt-5'>本人电话</div>
            <van-field
                v-model='form.telephone'
                clearable
                placeholder='本人电话'
                class='input-back mt-2 form-input'
                :rules='rules.telephone'
            />
            <div class='label-title mt-5'>民族</div>
            <van-field
                v-model='form.nationalName'
                is-link
                readonly
                name='national'
                placeholder='请选择'
                class='input-back mt-2 form-input'
                :rules='rules.nationalName'
                @click='showNational = true' />
            <van-popup v-model:show='showNational' position='bottom'>
                <van-picker
                    :columns-field-names="{ text: 'name', value: 'value' }"
                    :columns="store.getDict('DC00006')"
                    @confirm='nationalConfirm'
                    @cancel='showNational = false'
                />
            </van-popup>
<!--            <div class='label-title mt-5'>年龄</div>
            <van-field
                v-model='form.currentAge'
                readonly
                placeholder='年龄'
                class='input-back mt-2 form-input'
                :rules='rules.currentAge'
            />-->
            <div class='label-title mt-5'>现住址</div>
            <van-field
                v-model='form.presentCodeName'
                is-link
                readonly
                style='min-height: 26px!important;'
                placeholder='请选择所在地区'
                class='input-back mt-2 form-input'
                :rules='rules.presentCodeName'
                @click='showPresent = true'
            >
                <template #input>
                    <span class='text-end'>{{ form.presentCodeName }}</span>
                </template>
            </van-field>
            <van-popup v-model:show='showPresent' :close-on-click-overlay='false' position='bottom'>
                <DocAddress v-model:value='form.presentCode' @close='showPresent = false'
                            :viewData='addressRecord.presentCode'
                            @change='presentChange' />
            </van-popup>
            <div class='no-req-label mt-5'>详细地址</div>
            <van-field
                v-model='form.nowAddress'
                clearable
                class='input-back mt-2 form-input'
                placeholder='请填写详细地址'
                maxlength='50'
            />
            <div class='flex items-center justify-between mt-5'>
                <div class='label-title '>户口地址</div>
                <van-button size='mini' plain type='primary'
                            @click='setRegisteredAddress'>同步现住址
                </van-button>
            </div>

            <van-field
                v-model='form.registeredCodeName'
                is-link
                readonly
                placeholder='请选择所在地区'
                class='input-back mt-2 form-input'
                :rules='rules.registeredCode'
                @click='showRegistered = true'
            >
                <template #input>
                    <span class='text-end'>{{ form.registeredCodeName }}</span>
                </template>
            </van-field>
            <van-popup v-model:show='showRegistered' :close-on-click-overlay='false' position='bottom'>
                <DocAddress v-model:value='form.registeredCode' @close='showRegistered = false'
                            :viewData='addressRecord.registeredCode'
                            @change='registeredChange' />
            </van-popup>
            <div class='no-req-label mt-5'>详细地址</div>
            <van-field
                v-model='form.permanentAddress'
                clearable
                class='input-back mt-2 form-input'
                placeholder='请填写详细地址'
                maxlength='50'
            />
            <div class='title mt-5'>联系人信息</div>
            <div class='no-req-label mt-5'>联系人姓名</div>
            <van-field
                v-model='form.contactName'
                clearable
                placeholder='联系人姓名'
                class='input-back mt-2 form-input'
                :rules='rules.contactName'
            />
            <div class='no-req-label mt-5'>与居民关系</div>
            <van-field
                v-model='form.relationName'
                readonly
                is-link
                placeholder='与居民关系'
                class='input-back mt-2 form-input'
                @click='showRelation= true'
            />
            <van-popup v-model:show='showRelation' position='bottom'>
                <van-picker
                    :columns-field-names="{ text: 'name', value: 'value' }"
                    :columns="store.getDict('DC00023')"
                    @confirm='relationlConfirm'
                    @cancel='showRelation = false'
                />
            </van-popup>
            <van-field
                v-if='form.relation == 99'
                v-model='form.relationOther'
                clearable
                placeholder='其他关系'
                class='input-back mt-2 form-input'
            />
            <div class='no-req-label mt-5'>联系电话</div>
            <van-field
                v-model='form.contactPhone'
                clearable
                placeholder='联系电话'
                class='input-back mt-2 form-input'
                :rules='rules.contactPhone'
            />
            <div class='title mt-5'>随访信息</div>
            <div class='label-title mt-5'>本次随访情况</div>
            <van-field name='radio' :rules='rules.visitSituation' class='p-12-0'>
                <template #input>
                    <van-radio-group v-model='form.visitSituation' class='w-full' shape='dot'>

                        <van-cell title='在访' clickable @click='form.visitSituation = 1'
                                  class='input-back form-input'>
                            <template #right-icon>
                                <van-radio :name='1' />
                            </template>
                        </van-cell>
                        <van-cell title='失访' clickable @click='form.visitSituation = 2'
                                  class='input-back mt-2 form-input'>
                            <template #right-icon>
                                <van-radio :name='2' />
                            </template>
                        </van-cell>
                    </van-radio-group>
                </template>
            </van-field>

            <div class='label-title mt-5' v-if='form.visitSituation == 2'>失访原因</div>
            <van-field name='radio' :rules='rules.lossReason' class='p-12-0'
                       v-if='form.visitSituation == 2'>
                <template #input>
                    <van-radio-group v-model='form.lossReason' class='w-full' shape='dot'>

                        <van-cell title='无法联系' clickable @click='form.lossReason = 1'
                                  class='input-back  form-input'>
                            <template #right-icon>
                                <van-radio :name='1' />
                            </template>
                        </van-cell>
                        <van-cell title='患者拒绝随访' clickable @click='form.lossReason = 2'
                                  class='input-back mt-2 form-input'>
                            <template #right-icon>
                                <van-radio :name='2' />
                            </template>
                        </van-cell>
                        <van-cell title='死亡' clickable @click='form.lossReason = 3'
                                  class='input-back mt-2 form-input'
                                  :style="{borderRadius: form.lossReason == 3 ? '8px 8px 0px 0px ': '8px'}"
                        >
                            <template #right-icon>
                                <van-radio :name='3' />
                            </template>
                        </van-cell>
                        <div class='death-r' v-if='form.lossReason == 3'>
                            <van-field
                                v-model='form.deathReason'
                                clearable
                                placeholder='死亡原因'
                                class='input-white form-input'
                            />
                        </div>

                        <van-cell title='其他' clickable @click='form.lossReason = 9'
                                  class='input-back mt-2 form-input'
                                  :style="{borderRadius: form.lossReason == 9 ? '8px 8px 0px 0px ': '8px'}"
                        >
                            <template #right-icon>
                                <van-radio :name='9' />
                            </template>
                        </van-cell>
                        <div class='death-r' v-if='form.lossReason == 9'>
                            <van-field
                                v-if='form.lossReason == 9'
                                v-model='form.lossReasonOther'
                                clearable
                                placeholder='其他原因'
                                class='input-white form-input'
                            />
                        </div>


                    </van-radio-group>
                </template>
            </van-field>

            <div class='label-title mt-5' v-if='form.visitSituation == 1'>随访方式</div>
            <van-field name='radio' :rules='rules.visitWay' class='p-12-0' v-if='form.visitSituation == 1'>
                <template #input>
                    <van-radio-group v-model='form.visitWay' class='w-full' shape='dot'>

                        <van-cell title='门诊' clickable @click='form.visitWay = 5'
                                  class='input-back  form-input'
                                  :style="{borderRadius: form.visitWay == 5 ? '8px 8px 0px 0px ': '8px'}"
                        >
                            <template #right-icon>
                                <van-radio :name='5' />
                            </template>

                        </van-cell>
                        <div class='tel-back' v-if='form.visitWay == 5'>
                            <div class='tel flex items-center justify-between'>
                                <div>
                                    <span>居民电话： </span><span>{{ form.telephone }}</span>
                                </div>
                                <div @click='toTel' class='tel-label'>点击拨打</div>
                            </div>
                        </div>
                        <van-cell title='住院' clickable @click='form.visitWay = 6'
                                  class='input-back mt-2 form-input'
                                  :style="{borderRadius: form.visitWay == 6 ? '8px 8px 0px 0px ': '8px'}"
                        >
                            <template #right-icon>
                                <van-radio :name='6' />
                            </template>
                        </van-cell>
                        <div class='tel-back' v-if='form.visitWay == 6'>
                            <div class='tel flex items-center justify-between'>
                                <div>
                                    <span>居民电话： </span><span>{{ form.telephone }}</span>
                                </div>
                                <div @click='toTel' class='tel-label'>点击拨打</div>
                            </div>
                        </div>
                        <van-cell title='入户' clickable @click='form.visitWay = 7'
                                  class='input-back mt-2 form-input'
                                  :style="{borderRadius: form.visitWay == 7 ? '8px 8px 0px 0px ': '8px'}"
                        >
                            <template #right-icon>
                                <van-radio :name='7' />
                            </template>
                        </van-cell>
                        <div class='tel-back' v-if='form.visitWay == 7'>
                            <div class='tel flex items-center justify-between'>
                                <div>
                                    <span>居民电话： </span><span>{{ form.telephone }}</span>
                                </div>
                                <div @click='toTel' class='tel-label'>点击拨打</div>
                            </div>
                        </div>
                        <van-cell title='电话' clickable @click='form.visitWay = 8'
                                  class='input-back mt-2 form-input'
                                  :style="{borderRadius: form.visitWay == 8 ? '8px 8px 0px 0px ': '8px'}"
                        >
                            <template #right-icon>
                                <van-radio :name='8' />
                            </template>
                        </van-cell>
                        <div class='tel-back' v-if='form.visitWay == 8'>
                            <div class='tel flex items-center justify-between'>
                                <div>
                                    <span>居民电话： </span><span>{{ form.telephone }}</span>
                                </div>
                                <div @click='toTel' class='tel-label'>点击拨打</div>
                            </div>
                        </div>
<!--                        @click='form.visitWay = 9'-->
                        <van-cell title='短信（指导）' clickable
                                  class='input-back mt-2 form-input'
                                  :style="{borderRadius: form.visitWay == 9 ? '8px 8px 0px 0px ': '8px'}"
                        >
                            <template #right-icon>
                                <van-radio-group  disabled>
                                <van-radio :name='9' />
                                </van-radio-group>
                            </template>
                        </van-cell>
                        <div class='tel-back' v-if='form.visitWay == 9'>
                            <div class='tel'>
                                <div>
                                    是否指导？
                                </div>
                                <van-radio-group v-model='form.isHealthGuide' direction='horizontal'
                                                 shape='dot'>
                                    <div class='flex items-center w-full'>
                                        <van-cell title='是' clickable
                                                  @click='form.isHealthGuide = 1'
                                                  style='flex: 1'
                                                  class='input-back form-input'
                                        >
                                            <template #right-icon>
                                                <van-radio :name='1' />
                                            </template>
                                        </van-cell>
                                        <van-cell title='否' clickable
                                                  @click='form.isHealthGuide = 2'
                                                  style='flex: 1'
                                                  class='input-back  form-input ml-2'
                                        >
                                            <template #right-icon>
                                                <van-radio :name='2' />
                                            </template>
                                        </van-cell>
                                    </div>
                                </van-radio-group>
                            </div>
                        </div>
<!--                        @click='form.visitWay = 11'-->
                        <van-cell title='微信（指导）' clickable
                                  class='input-back mt-2 form-input'
                                  :style="{borderRadius: form.visitWay == 11 ? '8px 8px 0px 0px ': '8px'}"
                        >
                            <template #right-icon>
                                <van-radio-group  disabled>
                                <van-radio :name='11' />
                                </van-radio-group>
                            </template>
                        </van-cell>
                        <div class='tel-back' v-if='form.visitWay == 11'>
                            <div class='tel'>
                                <div>
                                    是否指导？
                                </div>
                                <van-radio-group v-model='form.isHealthGuide' direction='horizontal'
                                                 shape='dot'>
                                    <div class='flex items-center w-full'>
                                        <van-cell title='是' clickable
                                                  @click='form.isHealthGuide = 1'
                                                  style='flex: 1'
                                                  class='input-back form-input'
                                        >
                                            <template #right-icon>
                                                <van-radio :name='1' />
                                            </template>
                                        </van-cell>
                                        <van-cell title='否' clickable
                                                  @click='form.isHealthGuide = 2'
                                                  style='flex: 1'
                                                  class='input-back  form-input ml-2'
                                        >
                                            <template #right-icon>
                                                <van-radio :name='2' />
                                            </template>
                                        </van-cell>
                                    </div>
                                </van-radio-group>
                            </div>
                        </div>
<!--                        @click='form.visitWay = 10'-->
                        <van-cell title='短信（催检）' clickable
                                  class='input-back mt-2 form-input'
                                  :style="{borderRadius: form.visitWay == 10 ? '8px 8px 0px 0px ': '8px'}"
                        >
                            <template #right-icon>
                                <van-radio-group  disabled>
                                <van-radio :name='10' />
                                </van-radio-group>
                            </template>
                        </van-cell>
                        <div class='tel-back' v-if='form.visitWay == 10'>
                            <div class='tel'>
                                <div>
                                    催检内容：
                                </div>
                                <div>
                                    请您于{{ form.screenTime }}到{{ authInfo.unitName }}进行复查，祝早日 恢复健康！
                                </div>
                                <div class='mt-2' style='text-align: center'>
                                    <span style='color: #607FF0' @click='showTime1 = true'>修改日期</span>
                                </div>
                            </div>
                        </div>
                        <van-popup v-model:show='showTime1' position='bottom'>
                            <van-date-picker @confirm='timeConfirm1' @cancel='showBirth = false' />
                        </van-popup>
<!--                        @click='form.visitWay = 12'-->
                        <van-cell title='微信（催检）' clickable
                                  class='input-back mt-2 form-input'
                                  :style="{borderRadius: form.visitWay == 12 ? '8px 8px 0px 0px ': '8px'}"
                        >
                            <template #right-icon>
                                <van-radio-group  disabled>
                                <van-radio :name='12' />
                                </van-radio-group>
                            </template>
                        </van-cell>
                        <div class='tel-back' v-if='form.visitWay == 12'>
                            <div class='tel'>
                                <div>
                                    催检内容：
                                </div>
                                <div>
                                    请您于{{ form.screenTime }}到{{ authInfo.unitName }}进行复查，祝早日 恢复健康！
                                </div>
                                <div class='mt-2' style='text-align: center'>
                                    <span style='color: #607FF0' @click='showTime2 = true'>修改日期</span>
                                </div>
                            </div>
                        </div>
                        <van-popup v-model:show='showTime2' position='bottom'>
                            <van-date-picker @confirm='timeConfirm2' @cancel='showBirth = false' />
                        </van-popup>

                    </van-radio-group>
                </template>
            </van-field>

        </van-form>
    </div>
</template>

<script>
import { addToArr, fetchDataHandle } from '@/utils/common'
import { useStore } from '@/doctor/store'
import DocAddress from '@/components/docAddress/DocAddress'
import dayjs from 'dayjs'

const defaultForm = (info = {}) => {
    const form = {
        id: undefined,
        personId: undefined,
        residentInfoId: undefined,
        // 年龄
        currentAge: undefined,
        // 出生地详细地址
        birthAddress: undefined,
        // 出生地编码
        birthCode: undefined,
        // 证件类型,[DC00004]
        certificateType: 1,
        certificateTypeName: '身份证',
        // 联系人姓名
        contactName: undefined,
        contactName2: undefined,
        // 联系人电话
        contactPhone: undefined,
        // 与居民关系,[DC00023]
        contactRelation: undefined,
        contactRelationName: undefined,
        // 创建单位id
        // createdUnitId: undefined,
        // createdUnitName: undefined,
        // 创建医生
        // createdUserName: undefined,
        // 出生日期
        dataBirth: undefined,
        // 职业,[DC00010]
        duty: undefined,
        dutyName: undefined,
        // 文化程度(学历),[DC00007]
        education: undefined,
        educationName: undefined,
        // 性别,[DC00005]
        gender: undefined,
        genderName: undefined,
        // 身份证号
        idCard: undefined,
        // innerMarital: undefined,
        // 民族,[DC00006]
        national: undefined,
        nationalName: undefined,
        // 现住址
        nowAddress: undefined,
        // 户籍地址
        permanentAddress: undefined,
        // 现住址编码
        presentCode: undefined,
        presentCodeName: undefined,
        // 户籍地编码
        registeredCode: undefined,
        registeredCodeName: undefined,
        // 居民档案id
        residentId: undefined,
        // 姓名
        residentName: undefined,
        // 本人电话
        telephone: undefined,
        // 工作单位
        workUnit: undefined,
        // diseaseId: undefined,
        // 与居民关系
        relation: undefined,
        relationName: undefined,
        relationOther: undefined,
        // 人群
        // chronicTagsArray: undefined,
        // 建档单位、科室、医生
        // createDoctorId: undefined,
        // createDoctorName: undefined,
        // createOfficeId: undefined,
        // createOfficeName: undefined,
        // createUnitId: undefined,
        // createUnitName: undefined
        //本次随访情况
        visitSituation: 1,
        lossReason: undefined,
        deathReason: undefined,
        lossReasonOther: undefined,
        visitWay: 5,
        isHealthGuide: 1,
        screenTime: new dayjs().add(1, 'day').format('YYYY-MM-DD'),

        chronicCrowd: undefined,
        chronicTagsArray: undefined,
        firstScreenDate: undefined,
        firstScreenResult: undefined,
        highTagsArray: undefined,
        highTags: undefined,
        latelyDiagnoseDate: undefined,
        latelyScreenDate:undefined,
    }
    Reflect.ownKeys(form).forEach(key => {
        if (info[key] != undefined) {
            form[key] = info[key]
        }
    })
    return form
}
export default {
    name: 'BaseInfo',
    components: { DocAddress },
    props: {
        info: {
            default: () => {
                return {}
            }
        }
    },
    data() {
        return {
            store: useStore(),
            // 民族
            showNational: false,
            showRelation: false,
            // 现住址
            showPresent: false,
            // 户籍地址
            showRegistered: false,
            // 地址回显使用
            addressRecord: {},
            showTime1: false,
            showTime2: false,
            form: {},
            rules: {
                certificateTypeName: [{ required: true, message: '请选择证件类型' }],
                idCard: [{ required: true, message: '请填写证件号码' }],
                residentName: [{ required: true, message: '请填写姓名' }],
                genderName: [{ required: true, message: '请选择性别' }],
                dataBirth: [{ required: true, message: '请选择出生日期' }],
                nationalName: [{ required: true, message: '请选择民族' }],
                currentAge: [{ required: true, message: '请填写年龄' }],
                telephone: [{ required: true, message: '请填写本人电话' }],
                contactName: [{ required: false, message: '请填写联系人姓名' }],
                contactPhone: [{ required: false, message: '请填写联系电话' }],
                presentCodeName: [{ required: true, message: '请选择所在地区' }],
                registeredCode: [{ required: true, message: '请选择所在地区' }],
                visitSituation: [{ required: true, message: '请选择' }],
                lossReason: [{ required: true, message: '请选择' }],
                visitWay: [{ required: true, message: '请选择' }]
            }
        }
    },
    computed: {
        authInfo() {
            return this.store.$state.authInfo
        }
    },
    watch: {
        'info': {
            handler() {
                this.form = defaultForm(this.info)
                if (this.form.presentCode) {
                    this.addressRecord.presentCode = addToArr(this.form.presentCode)
                }
                if (this.form.registeredCode) {
                    this.addressRecord.registeredCode = addToArr(this.form.registeredCode)
                }

            },
            immediate: true
        },
        'form.visitSituation': {
            handler() {
                this.$emit('changeVisitSituation', this.form.visitSituation)
            }
        }
    },
    methods: {
        // 民族
        nationalConfirm({ selectedValues, selectedOptions }) {
            this.form.national = selectedValues[0]
            this.form.nationalName = selectedOptions[0].name
            this.showNational = false
        },
        //与居民关系
        relationlConfirm({ selectedValues, selectedOptions }) {
            this.form.relation = selectedValues[0]
            this.form.relationName = selectedOptions[0].name
            this.showRelation = false
        },
        // 现住址
        presentChange(val) {
            const selectedOptions = val.selectedOptions
            this.form.presentCodeName = selectedOptions.map(e => e.text).join('/')
        },
        // 户口地址
        registeredChange(val) {
            const selectedOptions = val.selectedOptions
            this.form.registeredCodeName = selectedOptions.map(e => e.text).join('/')
            if (!this.form.presentCode && selectedOptions.length >= 5) {
                this.form.presentCode = val.value
                this.form.presentCodeName = this.form.registeredCodeName
            }
        },
        // 同步现住址
        setRegisteredAddress() {
            this.$refs.form.validate(['presentCode']).then(res => {
                this.form.registeredCode = this.form.presentCode
                this.form.registeredCodeName = this.form.presentCodeName
                this.form.permanentAddress = this.form.nowAddress
                this.addressRecord.registeredCode = addToArr(this.form.presentCode)
            }).catch(err => console.warn(err))
        },
        toTel() {
            // 创建一个电话号码的URL
            let phoneNumber = this.form.telephone // 替换为需要拨打的号码
            let url = 'tel:' + encodeURIComponent(phoneNumber)
            // 创建一个a标签
            let a = document.createElement('a')
            a.href = url
            // 触发a标签的点击事件
            a.click()
        },
        timeConfirm1({ selectedValues }) {
            this.form.screenTime = selectedValues.join('-')
            this.showTime1 = false
        },
        timeConfirm2({ selectedValues }) {
            this.form.screenTime = selectedValues.join('-')
            this.showTime2 = false
        },
        onSubmit() {
            return new Promise((resolve, reject) => {
                this.$refs.form.validate().then(() => {
                    const {
                        personId,
                        visitSituation,
                        lossReason,
                        deathReason,
                        lossReasonOther,
                        visitWay,
                        isHealthGuide,
                        screenTime,
                        ...others
                    } = this.form
                    let time = dayjs(screenTime).format('YYYY-MM-DD')
                    let content = `请您于${time}到${this.authInfo.unitName}进行复查，祝早日恢复健康！`
                    let par = {
                        visitSituation,
                        lossReason,
                        deathReason,
                        lossReasonOther,
                        visitWay,
                        isHealthGuide,
                        screenTime,
                        residentInfoId: this.form.residentInfoId,
                        urgentInsContent: content,
                        residentsRecord: {
                            ...others,
                            id: this.form.personId
                        }
                    }
                    resolve(par)
                }).catch((e) => {
                    console.warn('ArchiveCommon error', e)
                })
            })
        }
    }
}
</script>

<style scoped lang='less'>
.title {
    font-weight: bold;
    margin-bottom: 20px;
}

.label-title {
    font-size: 13px;
    color: #595959;
    font-weight: 500;

    &::after {
        content: "*";
        color: red;
        font-weight: bold;
        margin-left: 4px;
    }
}

.no-req-label {
    font-size: 13px;
    color: #595959;
    font-weight: 500;
}

.form-input {
    padding: 8px 12px;
    border-radius: 8px;
}

.input-back {
    background: #FAFAFA;
}

.input-white {
    background: #FFFFFF;
}

.tel-back {
    background: #F5F5F5;
    padding: 8px;
    border-radius: 0px 0px 8px 8px;
}

.death-r {
    background: #F5F5F5;
    border-radius: 0px 0px 8px 8px;
    padding: 8px 12px;
}

.tel {
    background: #FFFFFF;
    padding: 8px;
    border-radius: 8px;
}

.tel-label {
    color: #607FF0;
    font-weight: bold;
}

.p-12-0 {
    padding: 12px 0px;
}

:deep(.van-cell-group--inset) {
    overflow: visible;
}

:deep(.van-cell) {
    overflow: visible;
}

:deep(.van-field__error-message) {
    position: absolute;
}

:deep(.van-cell:after) {
    border-bottom: 0px;
}

:deep(.van-radio__icon--checked.van-radio__icon--dot .van-radio__icon--dot__icon) {
    background: #FFFFFF;
}

:deep(.van-radio__icon--checked.van-radio__icon--dot) {
    background: var(--van-button-primary-background)
}
</style>