dvcp_v2_wxcp_app/src/project/saas/AppResidentDocument/Add.vue

<template>
  <div class="add">
    <div class="item">
      <span class="tips">*</span>
      <div class="border">
        <span class="label">是否户主</span>
        <span class="value" @click="clickSelect('yesOrNo', 'householdName')">
          <span v-if="form.householdName === ''" class="color-999">请选择</span>
          <span v-else>{{$dict.getLabel('yesOrNo', form.householdName)}}</span>
          <img src="./components/img/right-icon.png" alt="">
        </span>
      </div>
    </div>
    <div class="item" v-if="form.householdName != 1">
      <span class="tips">*</span>
      <div class="border">
        <span class="label">户主身份证</span>
        <span class="value">
          <input type="idcard" placeholder="请输入" v-model="form.householdIdNumber" maxlength="18">
        </span>
      </div>
    </div>
    <div class="item" v-if="form.householdName != 1">
      <span class="tips">*</span>
      <div class="border">
        <span class="label">与户主关系</span>
        <span class="value" @click="clickSelect('householdRelation', 'householdRelation')">
          <span v-if="form.householdRelation === ''" class="color-999">请选择</span>
          <span v-else>{{$dict.getLabel('householdRelation', form.householdRelation)}}</span>
          <img src="./components/img/right-icon.png" alt="">
        </span>
      </div>
    </div>
    <div class="item">
      <span class="tips">*</span>
      <div class="border">
        <span class="label">姓名</span>
        <span class="value">
          <input type="text" placeholder="请输入" v-model="form.name" maxlength="10" :disabled="this.form.id ? true : false">
        </span>
      </div>
    </div>
    <div class="item">
      <span class="tips">*</span>
      <div class="border">
        <span class="label">身份证号</span>
        <span class="value">
          <input type="idcard" placeholder="请输入" v-model="form.idNumber" maxlength="18" @input="changeIdNumber" :disabled="this.form.id ? true : false">
        </span>
      </div>
    </div>
    <div class="item">
      <span class="tips">*</span>
      <div class="border">
        <span class="label">性别</span>
        <span class="value">
          <span v-if="form.sex === ''" class="color-999">请选择</span>
          <span v-else>{{$dict.getLabel('sex', form.sex)}}</span>
          <img src="./components/img/right-icon.png" alt="">
        </span>
      </div>
    </div>
    <div class="item">
      <span class="tips">*</span>
      <div class="border">
        <span class="label">出生日期</span>
        <span class="value">
          <span :class="form.birthDate == '' ? 'color-999' : ''">{{form.birthDate || '请选择'}}</span>
          <img src="./components/img/right-icon.png" alt="">
        </span>
      </div>
    </div>
    <div class="item">
      <span class="tips"></span>
      <div class="border">
        <span class="label">联系电话</span>
        <span class="value">
          <input type="text" placeholder="请输入" @input="changePhone" v-model="form.phone" maxlength="11">
        </span>
      </div>
    </div>
    <div class="item">
      <span class="tips">*</span>
      <div class="border">
        <span class="label">现住址</span>
        <span class="value">
          <AiAreaPicker ref="address" :fullName.sync="form.currentAreaName" :value="form.currentAreaId" mode="custom" all @select="onCurrentAreaChange">
            <div class="aiArea">
              <span class="label" v-if="form.currentAreaName">{{ form.currentAreaName }}</span>
              <span v-else class="color-999">请选择</span>
              <img src="./components/img/right-icon.png" alt="">
            </div>
          </AiAreaPicker>
        </span>
      </div>
    </div>
    <div class="item mar-b0">
      <span class="tips"></span>
      <div class="border not-border">
        <span class="label">详细地址</span>
      </div>
    </div>
    <div class="text-area">
      <textarea placeholder="请输入" maxlength="30" v-model="form.currentAddress"></textarea>
    </div>
    <div class="item">
      <span class="tips"></span>
      <div class="border">
        <span class="label">户籍地址</span>
        <span class="value">
          <AiAreaPicker ref="address" :fullName.sync="form.householdAreaName" :value="form.householdAreaId" mode="custom" all @select="onHouseAreaChange">
            <div class="aiArea">
              <span class="label" v-if="form.householdAreaName">{{ form.householdAreaName }}</span>
              <span v-else class="color-999">请选择</span>
              <img src="./components/img/right-icon.png" alt="">
            </div>
          </AiAreaPicker>
        </span>
      </div>
    </div>
    <div class="item mar-b0">
      <span class="tips"></span>
      <div class="border not-border">
        <span class="label">详细地址</span>
      </div>
    </div>
    <div class="text-area">
      <textarea placeholder="请输入" maxlength="30" v-model="form.householdAddress"></textarea>
    </div>
    <div class="item">
      <div class="border" :class="[form.residentLabelList.length ? 'item-right' : '']">
      <!-- <div class="border item-right"> -->
        <span class="label">居民标签</span>
        <div class="tag-list" @click="toChooseTags" v-if="form.residentLabelList.length">
          <div class="tag" v-for="(item, index) in form.residentLabelList" :key="index">{{ item.labelName }}</div>
        </div>
        <span class="value" @click="toChooseTags" v-else>
          <span class="color-999">请选择</span>
          <img src="./components/img/right-icon.png" alt="">
        </span>
      </div>
    </div>
    <div class="pad-b152"></div>
    <div class="add-btn" @click="submit">
      <div>保存</div>
    </div>

    <!-- <u-picker mode="time" v-model="dateShow" :params="deteParams" start-year="2010" @confirm="dateConfirm">请选择</u-picker> -->
    <u-select v-model="showSelect" :list="selectList" label-name="dictName" value-name="dictValue"  @confirm="confirmSelect"/>
  </div>
</template>

<script>
import { mapState } from 'vuex'
export default {
  name: 'add',
  data() {
    return {
      form: {
        id: '',
        householdName: '',
        householdIdNumber: '',
        householdRelation: '',
        name: '',
        idNumber: '',
        sex: '',
        birthDate: '',
        phone: '',
        currentAreaId: '',
        currentAreaName: '',
        currentAddress: '',
        householdAreaId: '',
        householdAreaName: '',
        householdAddress: '',
        residentType: '',
        age: '',
        residentLabelList: []
      },
      showSelect: false,
      formName: '',
      selectList: []
    }
  },
  onLoad(options) {
    if(options.id) {
      document.title = '编辑居民'
      this.form.id = options.id
      this.getDetail()
    }else {
      document.title = '新增居民'
      this.form.residentType = options.type
    }
    this.$dict.load('yesOrNo', 'sex', 'householdRelation', 'nation', 'education', 'maritalStatus', 'politicsStatus', 'militaryStatus', 'faithType')

    uni.$on('onChecked', e => {
      console.log(e)
      this.form.residentLabelList = e.map(v => {
        return {
          labelId: v.id,
          labelName: v.labelName
        }
      })
    })
  },
  computed: {
    ...mapState(['user']),
  },
  methods: {
    submit() {
      if(this.form.householdName === '') {
        return this.$u.toast('请选择是否户主')
      }
      if(this.form.householdName != 1 && !this.form.householdIdNumber) {
        return this.$u.toast('请输入户主身份证')
      }
      if(this.form.householdName != 1 && this.form.householdRelation === '') {
        return this.$u.toast('请选择与户主关系')
      }
      if(!this.form.name) {
        return this.$u.toast('请输入姓名')
      }
      if(!this.form.idNumber) {
        return this.$u.toast('请输入身份证号')
      }
      if(!this.form.sex) {
        return this.$u.toast('请选择性别')
      }
      if(!this.form.birthDate) {
        return this.$u.toast('请选择出生日期')
      }
      if(!this.form.currentAreaId) {
        return this.$u.toast('请选择现住址')
      }
      // if(!this.form.currentAddress) {
      //   return this.$u.toast('请输入现住址详细地址')
      // }
      // if(!this.form.householdAreaId) {
      //   return this.$u.toast('请选择户籍地址')
      // }
      // if(!this.form.householdAddress) {
      //   return this.$u.toast('请输入户籍地址详细地址')
      // }
      this.form.age =  this.$calcAge(this.form.idNumber)
      this.$http.post('/app/appresident/addOrUpdate', this.form).then(res => {
        if (res.code === 0) {
          this.$u.toast('新增成功')
          uni.$emit('reload')
          uni.navigateBack({
            delta: 1
          })
        }
      }).catch((err) => {
        this.$u.toast(err)
      })

    },

    toChooseTags () {
      uni.navigateTo({
        url: `./Tags?ids=${this.form.residentLabelList.map(v => v.labelId).join(',')}`
      })
    },

    confirmSelect(e) {
      this.form[this.formName] = e[0].value
    },
    clickSelect(dictName, formName) {
      this.selectList = this.$dict.getDict(dictName)
      this.formName = formName
      this.showSelect = true
    },
    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]$/;
      if (this.form.idNumber.length == 18 && !reg.test(this.form.idNumber)) {
        return this.$u.toast('请输入正确的身份证号码')
      }

      console.log(123)
      var info = this.$idCardNoUtil.getIdCardInfo(this.form.idNumber)
      this.form.birthDate = info.birthday
      this.form.sex = info.gender
      this.$forceUpdate()
      console.log(this.form)
    },

    changePhone() {
      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('请输入正确的手机号')
      }
    },

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

    onHouseAreaChange(e) {
      this.form.householdAreaId = e
    },

    getDetail() {
      this.$http.post(`/app/appresident/detail?id=${this.form.id}`).then(res => {
        if (res.code === 0) {
          this.form = {...res.data.resident}
          var info = this.$idCardNoUtil.getIdCardInfo(this.form.idNumber)
          this.form.birthDate = info.birthday
          this.form.sex = info.gender
        }
      })
    }
  },
}
</script>

<style scoped lang="scss">
.add {
  ::v-deep .aiArea {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    .label {
      width: 100%!important;
    }
  }

  .item{
    width: 100%;
    padding-left: 14px;
    background: #FFF;
    box-sizing: border-box;
    display: flex;
    margin-bottom: 16px;
    .tips{
      width: 18px;
      font-size: 32px;
      font-family: PingFangSC-Regular, PingFang SC;
      color: #FF4466;
      line-height: 44px;
      padding: 34px 0 34px 0;
    }
    .border{
      width: calc(100% - 18px);
      padding: 34px 32px 34px 0;
      line-height: 44px;
      border-bottom: 1px solid #D8DDE6;
      line-height: 44px;
      font-size: 32px;
      font-family: PingFangSC-Regular, PingFang SC;
      color: #333;
      display: flex;
      box-sizing: border-box;
      .label{
        width: 170px;
      }
      .value{
        width: calc(100% - 170px);
        text-align: right;
        img{
          width: 32px;
          height: 32px;
          margin-left: 8px;
          vertical-align: middle;
        }
      }
      .color-999{
        color: #999;
      }

      &.item-right {
        display: block;

        .tag-list {
          display: flex;
          flex-wrap: wrap;
          line-height: 1;
          margin-top: 42px;

          .tag {
            height: 64px;
            line-height: 64px;
            margin: 0 16px 16px 0;
            padding: 0 32px;
            color: #333333;
            font-size: 28px;
            background: #F3F4F7;
            border-radius: 4px;
          }
        }
      }
    }
    .not-border{
      border-bottom: 0;
    }
  }
  .mar-b0{
    margin-bottom: 0;
  }
  .text-area{
    width: 100%;
    background-color: #fff;
    padding: 0 32px;
    margin-bottom: 16px;
    box-sizing: border-box;
    textarea{
      width: 100%;
      height: 88px;
      padding-bottom: 32px;
    }
  }
  .pad-b152{
    width: 100%;
    padding-bottom: 152px;
    background-color: #f5f5f5;
  }
  .add-btn{
    position: fixed;
    bottom: 0;
    left: 0;
    z-index: 999;
    width: 100%;
    height: 112px;
    line-height: 112px;
    background: #3975C6;
    font-size: 32px;
    font-family: PingFangSC-Medium, PingFang SC;
    font-weight: 500;
    color: #FFF;
    div{
      text-align: center;
    }
  }
}
</style>