dvcp_v2_wxcp_app/library/apps/AppMonitoringObject/Add.vue

<template>
  <div class="add">
    <div class="steps" v-show="!isEdit">
      <u-steps :list="numList" :current="current" mode="number"></u-steps>
    </div>
    <div class="form" v-show="current == 0 || isEdit">
      <div class="form-group">
        <!-- <div class="form-item">
          <div class="form-item__wrapper">
            <div class="left">
              <i>*</i>
              <span>户类型</span>
            </div>
            <div class="right">
              <AiSelect dict="fpHouseType" v-model="form.houseType"></AiSelect>
            </div>
          </div>
        </div> -->
<!--        <div class="form-item" v-if="!isEdit">-->
<!--          <div class="form-item__wrapper">-->
<!--            <div class="left">-->
<!--              <i>*</i>-->
<!--              <span>监测对象类型</span>-->
<!--            </div>-->
<!--            <div class="right">-->
<!--              <AiSelect dict="fpType" v-model="form.objectType"></AiSelect>-->
<!--            </div>-->
<!--          </div>-->
<!--        </div>-->
        <div class="form-item" v-if="isEdit">
          <div class="form-item__wrapper">
            <div class="left">
              <i style="width: 8px;">*</i>
              <span>与户主关系</span>
            </div>
            <div class="right">
              <span v-if="isEdit">{{ $dict.getLabel('fpRelationship', form.householdRelation) }}</span>
              <AiSelect dict="fpRelationship" v-model="form.householdRelation" v-else></AiSelect>
            </div>
          </div>
        </div>
        <div class="form-item" v-if="!isEdit">
          <div class="form-item__wrapper">
            <div class="left">
              <i style="width: 8px;"></i>
              <span>选择人员</span>
            </div>
            <div class="right">
              <AiPagePicker class="select" :selected.sync="userList" householdName="1" single>
                <AiMore v-model="form.name"/>
              </AiPagePicker>
            </div>
          </div>
        </div>
        <div class="form-item" v-if="isEdit">
          <div class="form-item__wrapper">
            <div class="left">
              <i>*</i>
              <span>成员姓名</span>
            </div>
            <div class="right">
              <input placeholder="请输入" type="text" v-model="form.name" :maxlength="8"
                     placeholder-style="color: #999; font-size: 30rpx;" disabled/>
            </div>
          </div>
        </div>
        <div class="form-item" v-if="!isEdit">
          <div class="form-item__wrapper">
            <div class="left">
              <i>*</i>
              <span>户主姓名</span>
            </div>
            <div class="right">
              <input placeholder="请输入" type="text" v-model="form.name" :maxlength="8"
                     placeholder-style="color: #999; font-size: 30rpx;" :disabled="isEdit"/>
            </div>
          </div>
        </div>
        <div class="form-item" v-if="!isEdit">
          <div class="form-item__wrapper">
            <div class="left">
              <i>*</i>
              <span>证件号码</span>
            </div>
            <div class="right">
              <input placeholder="请输入" type="idcard" v-model="form.idNumber" :maxlength="20"
                     placeholder-style="color: #999; font-size: 30rpx;" @input="changeIdNumber" :disabled="!!userList.length"/>
            </div>
          </div>
        </div>
        <div class="form-item" v-if="isEdit">
          <div class="form-item__wrapper">
            <div class="left">
              <i>*</i>
              <span>证件号码</span>
            </div>
            <div class="right">
              <input placeholder="请输入" type="idcard" v-model="form.idNumber" :maxlength="20"
                     placeholder-style="color: #999; font-size: 30rpx;" @input="changeIdNumber" disabled/>
            </div>
          </div>
        </div>
        <div class="form-item">
          <div class="form-item__wrapper">
            <div class="left">
              <i>*</i>
              <span>性别</span>
            </div>
            <div class="right">
              <span :style="form.sex === '' ? 'color:#999;' : 'color:#333;' ">{{ $dict.getLabel('sex', form.sex) || '自动识别' }}</span>
            </div>
          </div>
        </div>
        <div class="form-item">
          <div class="form-item__wrapper">
            <div class="left">
              <i>*</i>
              <span>共同生活家庭人口数</span>
            </div>
            <div class="right">
              <input placeholder="请输入" type="number" v-model="form.familyCount" :maxlength="20"
                     placeholder-style="color: #999; font-size: 30rpx;"/>
            </div>
          </div>
        </div>
      </div>
      <div class="form-group">
        <div class="form-item">
          <div class="form-item__wrapper">
            <div class="left">
              <i>*</i>
              <span>联系方式</span>
            </div>
            <div class="right">
              <input placeholder="请输入" type="number" v-model="form.phone" :maxlength="11"
                     placeholder-style="color: #999; font-size: 30rpx;"/>
            </div>
          </div>
        </div>
        <div class="form-item">
          <div class="form-item__wrapper">
            <div class="left">
              <i>*</i>
              <span>现住址</span>
            </div>
            <div class="right">
              <AiAreaPicker :fullName.sync="form.currentAreaName" v-model="form.currentAreaId" @select="areaSelect">
                <AiMore v-model="form.currentAreaName"/>
              </AiAreaPicker>
            </div>
          </div>
        </div>
        <div class="form-item">
          <div class="form-item__wrapper">
            <div class="left">
              <i style="opacity: 0;">*</i>
              <span>详细地址</span>
            </div>
            <div class="right">
              <input placeholder="请输入" v-model="form.currentAddress" placeholder-style="color: #999; font-size: 30rpx;"/>
            </div>
          </div>
        </div>
      </div>
      <div class="form-group">
        <div class="form-item">
          <div class="form-item__wrapper">
            <div class="left">
              <i style="opacity: 0;">*</i>
              <span>民族</span>
            </div>
            <div class="right">
              <AiSelect dict="fpNation" v-model="form.nation"></AiSelect>
            </div>
          </div>
        </div>
        <div class="form-item">
          <div class="form-item__wrapper">
            <div class="left">
              <i style="opacity: 0;">*</i>
              <span>政治面貌</span>
            </div>
            <div class="right">
              <AiSelect dict="fpPoliticalOutlook" v-model="form.politicsStatus"></AiSelect>
            </div>
          </div>
        </div>
        <div class="form-item">
          <div class="form-item__wrapper">
            <div class="left">
              <i style="width: 8px;"></i>
              <span>文化程度</span>
            </div>
            <div class="right">
              <AiSelect dict="fpEducation" v-model="form.education"></AiSelect>
            </div>
          </div>
        </div>
      </div>
      <div class="form-group">
        <div class="form-item">
          <div class="form-item__wrapper border-b0">
            <div class="left">
              <i style="opacity: 0;">*</i>
              <span>个人照片</span>
            </div>
          </div>
        </div>
        <div class="upload">
          <AiUploader :def.sync="photo" multiple placeholder="上传图片" :limit="1" action="/admin/file/add2"/>
        </div>
      </div>


      <div class="form-group">
        <div class="form-item">
          <div class="form-item__wrapper">
            <div class="left">
              <i style="width: 8px;"></i>
              <span>在校生状况</span>
            </div>
            <div class="right">
              <AiSelect dict="fpStudentsInSchool" v-model="form.schoolStatus"></AiSelect>
            </div>
          </div>
        </div>
      </div>
      <!-- 个人健康状况 -->
      <div class="form-group">
        <div class="form-item">
          <div class="form-item__wrappers">
            <div class="top">
              <i style="opacity: 0;">*</i>
              <span>个人健康状况(可多选)</span>
            </div>
            <div class="bottoms">
              <div class="cards" v-for="(e, index) in helthList" :key="index">
                <div :style="{color:e.checked == true ? '#1174FE' : '#333'}" @click="userClick(e)">{{ e.dictName }}</div>
              </div>
            </div>
          </div>
        </div>
      </div>

      <!-- 残疾类别 -->
      <div class="form-group">
        <div class="form-item">
          <div class="form-item__wrapper">
            <div class="left">
              <i style="width: 8px;"></i>
              <span>残疾类别</span>
            </div>
            <div class="right">
              <AiSelect dict="fpDisabilityType" v-model="form.disabilityType"></AiSelect>
            </div>
          </div>
        </div>
        <div class="form-item">
          <div class="form-item__wrapper">
            <div class="left">
              <i style="opacity: 0;">*</i>
              <span>残疾证办理年度</span>
            </div>
            <div class="right">
              <AiSelect dict="fpYear" v-model="form.disabilityCertificateYear"></AiSelect>
            </div>
          </div>
        </div>
      </div>

      <!-- 基础保险 -->
      <div class="form-group">
        <div class="form-item">
          <div class="form-item__wrappers">
            <div class="top">
              <i style="opacity: 0;">*</i>
              <span>基础保险(可多选)</span>
            </div>
            <div class="bottoms">
              <div class="cards" v-for="(e, index) in basicsCheckList" :key="index">
                <div :style="{color:e.checked == true ? '#1174FE' : '#333'}" @click="basicsCheck(e, index)">{{ e.dictName }}</div>
              </div>
            </div>
          </div>
        </div>
      </div>

      <!-- 保障措施 -->
      <div class="form-group">
        <div class="form-item">
          <div class="form-item__wrappers">
            <div class="top">
              <i style="opacity: 0;">*</i>
              <span>保障措施(可多选)</span>
            </div>
            <div class="bottoms">
              <div class="cards" v-for="(e, index) in guaranteeCheckList" :key="index">
                <div :style="{color:e.checked == true ? '#1174FE' : '#333'}" @click="guaranteeCheck(e, index)">{{ e.dictName }}</div>
              </div>
            </div>
          </div>
        </div>
      </div>

      <!-- 劳动技能 -->
      <div class="form-group">
        <div class="form-item">
          <div class="form-item__wrapper">
            <div class="left">
              <i style="opacity: 0;">*</i>
              <span>劳动技能</span>
            </div>
            <div class="right">
              <AiSelect dict="fpLaborSkills" v-model="form.labourStatus"/>
            </div>
          </div>
        </div>
        <div class="form-item">
          <div class="form-item__wrapper">
            <div class="left">
              <i style="opacity: 0;">*</i>
              <span>是否会讲普通话</span>
            </div>
            <div class="right">
              <div class="check-item" :class="form.mandarin == '01' ? 'check-active' : '' " @click="form.mandarin='01'">是<img
                  src="./components/img/check-icon.png" alt=""></div>
              <div class="check-item" :class="form.mandarin == '02' ? 'check-active' : '' " @click="form.mandarin='02'">否<img
                  src="./components/img/check-icon.png" alt=""></div>
            </div>
          </div>
        </div>
      </div>

      <!-- 就业渠道 -->
      <div class="form-group">
        <div class="form-item">
          <div class="form-item__wrapper">
            <div class="left">
              <i style="opacity: 0;">*</i>
              <span>就业渠道</span>
            </div>
            <div class="right">
              <AiSelect dict="fpEmploymentChannels" v-model="form.employmentChannels"></AiSelect>
            </div>
          </div>
        </div>
        <div class="form-item">
          <div class="form-item__wrapper">
            <div class="left">
              <i style="opacity: 0;">*</i>
              <span>务工企业名称</span>
            </div>
            <div class="right">
              <input placeholder="请输入" type="text" v-model="form.migrantEnterprises" placeholder-style="color: #999; font-size: 30rpx;"/>
            </div>
          </div>
        </div>
        <div class="form-item">
          <div class="form-item__wrapper">
            <div class="left">
              <i style="opacity: 0;">*</i>
              <span>务工时间/月</span>
            </div>
            <div class="right">
              <input placeholder="请输入" v-model="form.workeMonths" type="number" placeholder-style="color: #999; font-size: 30rpx;" maxlength="9"/>
            </div>
          </div>
        </div>
        <div class="form-item">
          <div class="form-item__wrapper">
            <div class="left">
              <i style="opacity: 0;">*</i>
              <span>公益性岗位</span>
            </div>
            <div class="right">
              <input placeholder="请输入" v-model="form.publicWelfarePosts" type="text" placeholder-style="color: #999; font-size: 30rpx;" maxlength="20"/>
            </div>
          </div>
        </div>
        <div class="form-item">
          <div class="form-item__wrapper">
            <div class="left">
              <i style="opacity: 0;">*</i>
              <span>公益性岗位（月数）</span>
            </div>
            <div class="right">
              <input placeholder="请输入" v-model="form.publicWelfarePostsMonths" type="number" placeholder-style="color: #999; font-size: 30rpx;" maxlength="9"/>
            </div>
          </div>
        </div>
      </div>

      <!-- 是否国外务工 -->
      <div class="form-group">
        <div class="form-item">
          <div class="form-item__wrapper">
            <div class="left">
              <i style="opacity: 0;">*</i>
              <span>是否国外务工</span>
            </div>
            <div class="right">
              <div class="check-item" :class="form.foreignWorkers == '01' ? 'check-active' : '' " @click="form.foreignWorkers='01'">是<img
                  src="./components/img/check-icon.png" alt=""></div>
              <div class="check-item" :class="form.foreignWorkers == '02' ? 'check-active' : '' " @click="form.foreignWorkers='02'">否<img
                  src="./components/img/check-icon.png" alt=""></div>
            </div>
          </div>
        </div>
        <div class="form-item">
          <div class="form-item__wrapper">
            <div class="left">
              <i style="opacity: 0;">*</i>
              <span>务工所在地</span>
            </div>
            <div class="right">
              <input placeholder="请输入" type="text" v-model="form.foreignWorkersAddress" placeholder-style="color: #999; font-size: 30rpx;"/>
            </div>
          </div>
        </div>
      </div>
    </div>

    <!-- 情况描述 -->
    <div class="condition" v-if="current == 1">
      <div class="risk">
        <div><span style="color: #FF4466;">*</span>风险因素</div>
        <div>
          <AiSelect dict="fpRiskType" v-model="form.riskType"></AiSelect>
        </div>
      </div>
      <div style="height: 8px; width: 100%;background: #f3f4f5;"></div>
      <div class="remark">
        <p><span style="display: inline-block;width: 6px;"></span>备注说明</p>
        <div>
          <u-input v-model="form.detail" type="textarea" height="150" placeholder="请输入备注说明" :maxlength='500' clearable/>
        </div>
      </div>
      <div style="height: 8px; width: 100%;background: #f3f4f5;"></div>
      <div class="remark">
        <p><span style="width: 8px;"></span>图片<span style="color: #999;font-size: 14px;">(最多9张)</span></p>
        <div style="margin-top: 30px;">
          <AiUploader :def.sync="form.files" multiple placeholder="上传图片" :limit="9" action="/admin/file/add2"></AiUploader>
        </div>
      </div>
    </div>


    <div class="btn" hover-class="text" @click="nextStep" v-if="current == 0">下一步</div>
    <div class="btn" hover-class="text" @click="submit" v-if="current == 0 && isEdit">保存</div>
    <div class="btn" hover-class="text" @click="submit" v-if="current == 1"> {{ girdInfo.checkType == 2 ? '保存' : '申请纳入监测' }}</div>
  </div>
</template>

<script>
import {mapState} from 'vuex'

export default {
  data() {
    return {
      numList: [
        {name: '基本信息'},
        {name: '情况描述'},
        {name: '等待审核'},
      ],
      current: 0,
      form: {
        name: '',
        objectType: '',
        idNumber: '',
        sex: '',
        phone: '',
        currentAreaId: '',
        currentAreaName: '',
        nation: '',
        politicsStatus: '',
        education: '',
        currentAddress: '',
        files: [],
        schoolStatus: '',
        labourStatus: '',
        workArea: '',
        workeMonths: '',
        basicMedicalTreatment: '',
        seriousIllnessInsurance: '',
        endowmentInsurance: '',
        subsistenceAllowance: '',
        specialPovertySupport: '',
        girdId: '',
        girdName: '',
        healthyStatus: '',
        age: '',
        birthday: '',
        isHousehold: '',
        photo: '',
        riskType: '',
        detail: '',
        disabilityType: '', // 残疾类型
        disabilityCertificateYear: '',
        basicsCheck: '',  // 基础保险
        guaranteeCheck: '', // 保障措施
        mandarin: '',
        employmentChannels: '',
        migrantEnterprises: '',
        publicWelfarePosts: '',
        publicWelfarePostsMonths: '',
        foreignWorkers: '',
        foreignWorkersAddress: '',
        houseIdNumber: '',
        familyCount: '',
        houseType: '1',
      },
      $areaId: '',
      girdInfo: {},
      photo: [],
      userList: [],
      flag: false,
      helthList: [],
      basicsCheckList: [
        {dictName: '城乡居民基本医疗保险', checked: false},
        {dictName: '城镇职工基本医疗保险', checked: false},
        {dictName: '大病保险', checked: false},
        {dictName: '商业补充医疗保险', checked: false},
        {dictName: '城乡居民基本养老保险', checked: false},
        {dictName: '城镇职工基本养老保险', checked: false},
        {dictName: '享受人身意外保险补贴', checked: false},
      ],
      basicsList: [],
      guaranteeCheckList: [
        {dictName: '享受农村最低生活保障', checked: false},
        {dictName: '是否特困供养人员', checked: false},
        {dictName: '分散供养五保户转集中供养（减少）', checked: false},
        {dictName: '是否接受医疗救助', checked: false},
        {dictName: '是否接受其它健康扶贫', checked: false},
      ],
      guaranteeList: [],
      isAdd: 'false',
      houseIdNumber: '',
    }
  },
  computed: {
    ...mapState(['user']),
    isEdit() {
      return !!this.$route.query.id
    },
  },

  watch: {
    userList: {
      handler: function (v) {
        let {name, idNumber, currentAreaId, currentAreaName} = v?.[0] || {}
        this.form = {...this.form, name, idNumber, currentAreaId, currentAreaName}
        this.form.sex = this.$idCardNoUtil.getIdCardInfo(idNumber)?.sex
        // this.form.birthday = this.$idCardNoUtil.getIdCardInfo(idNumber)?.birthday
        this.form.age = this.$calcAge(this.form.idNumber)
        let birth = idNumber.substr(6,8)
        this.form.birthDate = birth.replace(/(.{4})(.{2})/,"$1-$2-");
      },
      deep: true,
    },
  },

  onLoad(query) {
    this.isGirdUser()
    this.$dict.load(['fpType', 'fpRiskType', 'riskEliminationMethod', 'fpRiskType', 'fpYesOrNo', 'fpNation', 'fpEducation', 'fpStudentsInSchool', 'fpHealth',
      'fpLaborSkills', 'fpPoliticalOutlook', 'sex', 'fpHealth', 'fpDisabilityType', 'fpYear', 'fpYesOrNo', 'fpEmploymentChannels']).then(() => {

      this.$dict.getDict('fpHealth').map((item) => {
        this.helthList.push({
          dictName: item.dictName,
          dictValue: item.dictValue,
          checked: false,
        })
      })

      this.form.objectType = query.objectType
      this.houseIdNumber = query.houseIdNumber

      if (this.isEdit) {
        this.flag = true
        this.getInfo(this.$route.query.id)
      }
    })
  },

  onShow() {
    document.title = this.isEdit ? '编辑监测对象' : '添加监测对象'
  },
  methods: {
    areaSelect(e) {
      this.form.currentAreaId = e
    },

    getResidentList() {
      uni.navigateTo({
        url: './residentList'
      })
    },

    userClick(row) {
      row.checked = !row.checked
      this.form.healthyStatus = this.helthList.filter(e => e.checked)?.map(e => e.dictValue)?.toString()
    },

    // 医疗保险
    basicsCheck(row) {
      row.checked = !row.checked
    },
    // 保障措施
    guaranteeCheck(row) {
      row.checked = !row.checked
    },

    nextStep() {

      if (!this.form.id) {
        // if (!this.form.objectType) {
        //   return this.$u.toast('请选择监测对象类型')
        // }
      }

      if (!this.form.idNumber) {
        return this.$u.toast('请输入身份证号')
      }
      if (!this.form.phone) {
        return this.$u.toast('请输入联系方式')
      }
      if (!this.form.currentAreaId) {
        return this.$u.toast('请选择现住址')
      }

      let regTel = /^1(3\d|4[5-9]|5[0-35-9]|6[567]|7[0-8]|8\d|9[0-35-9])\d{8}$/
      if (this.form.phone.length == 11 && !regTel.test(this.form.phone)) {
        return this.$u.toast('请输入正确的手机号')
      }
      if (!/[^0]0{0,2}$/.test(this.form.currentAreaId)) {
        return this.$u.toast('现住址必须选到村级')
      }

      if (this.form.files.length) {
        this.form.photo = this.form.files[0].url
      }
      if (this.photo.length) {
        this.form.photo = this.photo[0].url
      }

      this.form.girdId = this.girdInfo.girdId
      this.form.girdName = this.girdInfo.girdName
      this.form.householdIdNumber = this.form.idNumber
      this.form.householdRelation = '01'
      this.form.isHousehold = 1
      this.current = 1
    },

    checkInit(formName, list, index) {
      if (list[index].checked) {
        this.form[formName] = '01'
      } else {
        this.form[formName] = '02'
      }
    },

    submit() {
      if(!this.isEdit) {
        if (!this.form.riskType) {
          return this.$u.toast('请选择风险因素')
        }
      }

      if (this.photo.length) {
        this.form.photo = this.photo[0].url
      }

      this.basicsCheckList.map((item, index) => {
        if (item.checked) {
          this.basicsList.push(index)
        }
      })

      this.form.basicsCheck = this.basicsList.join(',')

      this.guaranteeCheckList.map((item, index) => {
        if (item.checked) {
          this.guaranteeList.push(index)
        }
      })

      this.form.guaranteeCheck = this.guaranteeList.join(',')

      this.checkInit('jcbxCxyiliao', this.basicsCheckList, 0)
      this.checkInit('jcbxCzyiliao', this.basicsCheckList, 1)
      this.checkInit('jcbxDabing', this.basicsCheckList, 2)
      this.checkInit('jcbxShangye', this.basicsCheckList, 3)
      this.checkInit('jcbxCxyanglao', this.basicsCheckList, 4)
      this.checkInit('jcbxCzyanglao', this.basicsCheckList, 5)
      this.checkInit('jcbxRenshenyiwai', this.basicsCheckList, 6)

      this.checkInit('bzcsNongcundibao', this.guaranteeCheckList, 0)
      this.checkInit('bzcsTekungongyang', this.guaranteeCheckList, 1)
      this.checkInit('bzcsWubaohu', this.guaranteeCheckList, 2)
      this.checkInit('bzcsYiliaojiuzhu', this.guaranteeCheckList, 3)
      this.checkInit('bzcsQita', this.guaranteeCheckList, 4)

      this.$http.post('/app/apppreventionreturntopoverty/addByEwechat', {
        ...this.form,
        girdId: this.user.girdId,
      }).then(res => {
        if (res.code == 0) {
          this.$u.toast(this.form.id ? '保存成功' : '提交成功')
          uni.$emit('reload')
          setTimeout(() => {
            if (this.$route.query.id) {
              uni.navigateBack({
                delta: 2
              })
            } else {
              uni.navigateTo({url: './serviceResult'})
            }
          }, 600)
        }
      }).catch((err) => {
        this.$u.toast(err)
      })
    },

    getInfo(id) {
      this.$http.post(`/app/apppreventionreturntopoverty/queryDetailById?id=${id}`).then(res => {
        if (res?.data) {
          if(res.data.basicsCheckList) {
            res.data.basicsCheckList = res.data.basicsCheck.split(',')
            res.data.basicsCheckList.map((item, index) => {
              this.basicsCheckList[index].checked = true
            })
          }
          if(res.data.guaranteeCheckLis) {
            res.data.guaranteeCheckList = res.data.guaranteeCheck.split(',')
            res.data.guaranteeCheckList.map((item, index) => {
              this.guaranteeCheckList[index].checked = true
            })
          }

          if(res.data.healthyStatusList) {
            res.data.healthyStatusList = res.data.healthyStatus.split(',')
            this.helthList.map(items => {
              items.checked = res.data.healthyStatusList.includes(items.dictValue)
            })
          }

          this.form = { ...this.form, ...res.data }

          if (this.form.photo) {
            this.photo = [{url: this.form.photo}] || []
          }
        }
      })
    },
    changeIdNumber() {
      if (this.form.idNumber.length < 18 && this.form.idNumber.length > 20) {
        return this.$u.toast('请输入正确的身份证号码')
      }
      let idNumber = this.form.idNumber.substring(0, 18)
      let info = this.$idCardNoUtil.getIdCardInfo(idNumber)
      this.form.sex = info.gender
      this.form.birthDate = info.birthday
      this.form.age = this.$calcAge(idNumber)
    },
    isGirdUser() {
      this.$http.post('/app/appgirdmemberinfo/checkLogOnUser').then((res) => {
        if (res?.data) {
          this.girdInfo = res.data
        }
      })
    },
  }
}
</script>

<style lang="scss">
.add {
  padding-bottom: 120px;

  .isActive {
    background: #3975C6;
  }

  .steps {
    height: 176px;

    ::v-deep .u-steps {
      box-sizing: border-box;
      padding-top: 40px;
    }
  }

  .aiArea {
    display: flex;
    align-items: center;

    .label {
      max-width: 480px;
      height: 112px;
      overflow: hidden;
      text-overflow: ellipsis;
      white-space: nowrap;
      color: #303133 !important;
      font-size: 30px;
    }

    i {
      margin-left: 4px;
      font-style: normal;
      color: #999999;
      font-size: 30px;
    }
  }

  ::v-deep .u-radio {
    &:last-child {
      .u-radio__label {
        margin-right: 0;
      }
    }
  }

  & > div {
    margin-bottom: 16px;
    background: #fff;
  }

  .form-group {
    .form-item {
      padding-left: 32px;

      .form-item__wrapper {
        display: flex;
        align-items: center;
        justify-content: space-between;
        height: 112px;
        border-bottom: 1px solid #E4E5E6;
      }

      .form-item__wrappers {
        padding-right: 30px;
        box-sizing: border-box;

        .top {
          font-size: 32px;
          padding: 32px 0;
        }

        .bottoms {
          padding-bottom: 20px;

          .cards {
            padding: 20px;
            box-sizing: border-box;
            border: 1px solid #CCCCCC;
            border-radius: 16px;
            margin-bottom: 16px;

            .changeActive {
              color: #1174FE;
              border: 1px solid #1174FE;
            }
          }

        }
      }

      .right {
        height: 112px;
        line-height: 112px;
        padding-right: 32px;

        span {
          font-size: 30px;
          color: #999999;
        }

        .check-item {
          display: inline-block;
          width: 140px;
          height: 64px;
          line-height: 64px;
          text-align: center;
          background: #F5F5F5;
          border-radius: 4px;
          font-size: 30px;
          font-family: PingFangSC-Medium, PingFang SC;
          font-weight: 500;
          color: #333;
          position: relative;

          img {
            display: none;
          }
        }

        .check-item:nth-of-type(1) {
          margin-right: 36px;
        }

        .check-active {
          background: #E7F1FE;
          color: #1174FE;

          img {
            display: block;
            position: absolute;
            bottom: 0;
            right: 0;
            width: 48px;
            height: 48px;
          }
        }
      }

      input {
        height: 100%;
        text-align: right;
      }

      .left {
        display: flex;
        align-items: center;
        width: 260px;

        span {
          color: #333333;
          font-size: 32px;
        }

        i {
          margin-right: 4px;
          font-style: normal;
          color: #FF4466;
          font-size: 32px;
        }
      }
    }
  }

  .form-item__imgs {
    padding: 32px;

    .form-item__title {
      display: flex;
      align-items: center;
      margin-bottom: 34px;

      h2 {
        color: #333333;
        font-weight: normal;
        font-size: 32px;
      }

      i {
        color: #999999;
        font-size: 28px;
        font-style: normal;
      }
    }

    textarea {
      width: 100%;
    }
  }

  .form-type {
    display: flex;
    align-items: center;
    justify-content: space-between;
    height: 112px;
    padding: 0 32px;

    h2 {
      font-weight: normal;
      color: #333333;
      font-size: 32px;
    }

    span {
      color: #999999;
      font-size: 28px;
    }
  }

  .condition {
    margin-top: 16px;

    .risk {
      display: flex;
      justify-content: space-between;
      padding: 30px 32px;
      box-sizing: border-box;
    }

    .remark {
      padding: 30px 32px;
      box-sizing: border-box;
    }
  }

  .btn {
    position: fixed;
    left: 0;
    bottom: 0;
    z-index: 11;
    width: 100%;
    height: 112px;
    line-height: 112px;
    margin: 0;
    text-align: center;
    color: #FFFFFF;
    font-size: 32px;
    background: #3192F4;
  }

  .upload {
    width: 100%;
    padding: 10px 32px 32px 32px;
    box-sizing: border-box;
  }

  .border-b0 {
    border-bottom: 0 !important;
  }

  ::v-deep .AiSelect .display .selectedLabel {
    font-size: 28px;
  }
}
</style>