dvcp_v2_wxcp_app/src/apps/AppMonitoringObject/Add.vue

<template>
  <div class="add">
    <div class="steps" v-if="!id">
      <u-steps :list="numList" :current="current" mode="number"></u-steps>
    </div>
    <div class="form" v-if="current == 0 || id">
      <div class="form-group">
        <div class="form-item" v-if="!id">
          <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="id">
          <div class="form-item__wrapper">
            <div class="left">
              <i style="width: 8px;">*</i>
              <span>与户主关系</span>
            </div>
            <div class="right">
              <span v-if="id">{{ $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="!id">
          <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" >
                <span v-if="!userList.length">请选择</span>
                <span v-if="userList.length" style="color: #333;">{{ userList[0].name }}</span>
                <u-icon name="arrow-right" color="#DDD" size="28"></u-icon>
              </AiPagePicker>
            </div>
          </div>
        </div>
        <div class="form-item" v-if="id">
          <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="!id">
          <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="!id">
          <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? true : false" />
            </div>
          </div>
        </div>
        <div class="form-item" v-if="id">
          <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>
      <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">
              <!-- :areaId="user.areaId"   v-model="form.currentAreaId"-->
              <AiAreaPicker ref="address" class="aiArea" :fullName.sync="form.currentAreaName" v-model="form.currentAreaId" :root="user.areaId" @select="onAreaChange">
                  <div class="aiArea">
                    <span class="label" v-if="form.currentAreaName">{{ form.currentAreaName }}</span>
                    <i v-else>请选择</i>
                    <u-icon name="arrow-right" color="#ddd"/>
                  </div>
              </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" :disabled="id != ''"></AiUploader>
        </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, 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="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"></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">
              <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 != '01' ? '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 != '01' ? '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 && id">保存</div>
    <div class="btn" hover-class="text" @click="submit" v-if="current == 1"> {{ girdInfo.checkType == 2 ? '保存' : '申请纳入监测' }}</div>
  </div>
</template>

<script>
import {mapState} from 'vuex'
import listVue from '../AppBuilding/list.vue';
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: '',
      },
      $areaId: '',
      isEdit: false,
      id: '',
      girdInfo: {},
      photo: [],
      userList: [],
      flag: false,
      helthList: [],
      namelist:[],
      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']),
  },
  watch:{
    userList:{
      handler: function (newValue,oldValue) {
        this.isEdit = true;
        this.form.name = newValue[0].name;
        this.form.idNumber = newValue[0].idNumber;
        this.form.sex = this.form.idNumber.substr(16, 1) % 2 == 0 ? '1' : '0'
        this.form.currentAreaId = newValue[0].currentAreaId
        this.form.currentAreaName = newValue[0].currentAreaName
      },
      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 (query.id) {
        this.flag = true
        this.id = query.id
        
        
        this.getInfo(this.id)

        
      } else if (!query.id) {
        this.form.currentAreaId = this.user.areaId
      } 
    })
  },

  onShow() {
    document.title = this.id ? '编辑监测对象' : '添加监测对象'
    console.log(this.userList);
  },

  methods: {
    rules() {
      return {
        objectType: '请选择监测对象类型',
        name: '请输入户主姓名',
        idNumber: '请输入身份证号',
        phone: '请输入联系方式',
        currentAreaId: '请选择现住址',
      }
    },

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

    userClick(row, i) {
      if (!this.helthList[i].checked) {
        this.helthList[i].checked = true // 确定
        this.namelist.push({ dictValue: row.dictValue, dictName: row.dictName }) // 赋值
      } else {
        this.helthList[i].checked = false // 取消
        this.namelist.map((item, index) => {
       if (item.dictValue == row.dictValue) {
            this.namelist.splice(index, 1)
          }
        })
        
      }
      this.form.healthyStatus = this.namelist.map(v=>v.dictValue).join(',')
    },

    // 医疗保险
    basicsCheck(row, i) {
      this.basicsCheckList[i].checked = !this.basicsCheckList[i].checked
    },
    // 保障措施
    guaranteeCheck(row, i) {
      this.guaranteeCheckList[i].checked = !this.guaranteeCheckList[i].checked
    },

    nextStep() {
      const rules = this.rules()

      for (let v of Object.keys(rules)) {
        if (!this.form[v]) {
          return this.$u.toast(rules[v])
        }
      }
      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].accessUrl
      }
      
      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.form.riskType) {
        return this.$u.toast('请选择风险因素')
      }

      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,
        id: this.id || '',
        girdId: this.user.girdId,
      }).then(res => {
        if (res.code == 0) {
          this.$u.toast(this.id? '保存成功' : '提交成功')
          uni.$emit('reload')
          uni.navigateTo({url: './serviceResult'})
        }
      }).catch((err) => {
        this.$u.toast(err)
      })
    },

    onAreaChange(e) {
      this.form.currentAreaId = e
    },

    onChange(e) {
      this.form.placeAreaId = e
    },

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

          res.data.healthyStatusList = res.data.healthyStatus.split(',')

          res.data.healthyStatusList.map((item)=>{
            this.helthList.map(items=>{
              if(item == items.dictValue) {
                items.checked = true
              }
            })
          })


          this.form = {
            ...this.form,
            ...res.data
          }
          this.photo = [{url:this.form.photo}]

          if(this.form.photo) {
            this.form.files = [{url: this.form.photo}]
          }
        }
      })
    },
    changeIdNumber() {
      // let reg = /^[1-9]\d{5}(18|19|20)\d{2}((0[1-9])|(1[0-2]))(([0-2][1-9])|10|20|30|31)\d{3}[0-9Xx]$/;
      // this.form.idNumber.length == 18 && !reg.test(this.form.idNumber)
      if (this.form.idNumber.length < 18 && this.form.idNumber.length > 20) {
        return this.$u.toast('请输入正确的身份证号码')
      }
      var info = this.$idCardNoUtil.getIdCardInfo(this.form.idNumber)
      this.form.sex = info.gender
      this.form.birthDate = info.birthday
      var myDate = new Date();
      var month = myDate.getMonth() + 1;
      var day = myDate.getDate();
      var age = myDate.getFullYear() - this.form.idNumber.substring(6, 10) - 1;
      if (this.form.idNumber.substring(10, 12) < month || this.form.idNumber.substring(10, 12) == month && this.form.idNumber.substring(12, 14) <= day) {
        age++;
      }
      this.form.age = age
    },
    isGirdUser() {
      this.$http.post('/app/appgirdmemberinfo/checkLogOnUser').then((res) => {
        if (res.code == 0) {
          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;

        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>