dvcp_v2_wxcp_app/src/apps/AppHelpDeclaration/add.vue

<template>
  <div class="add">
    <div class="tips">我承认本次申请帮扶情况属实，愿接受有关部门依法核实家庭资产信息，如存在虚报、伪造，造成社会资源浪费。本人资源承担相关惩戒措施。</div>
    <div class="user_info">
      <div class="item">
        <div class="left">
          <span>*</span><span>申请人姓名</span>
        </div>
        <input type="text" class="right__text" v-model="form.name" placeholder="请输入" maxlength="20"/>
      </div>
      <div class="item">
        <div class="left">
          <span>*</span><span>申请人身份证号</span>
        </div>
        <input type="text" class="right__text" v-model="form.idNumber" placeholder="请输入" maxlength="18"/>
      </div>
      <div class="item">
        <div class="left">
          <span>*</span><span>联系方式</span>
        </div>
        <input type="tel" class="right__text" v-model="form.phone" placeholder="请输入" maxlength="11"/>
      </div>
    </div>

    <div class="family_info">
      <div class="item">
        <div class="left">
          <span>*</span><span>家庭人口数</span>
        </div>
        <input type="tel" class="right__text" v-model="form.householdNumber" placeholder="请输入" maxlength="10"/>
      </div>
      <div class="item">
        <div class="left">
          <span>*</span><span>所在地区</span>
        </div>
        <AiAreaPicker v-model="form.areaId" class="right__text" :fullName.sync="form.areaName" selectRoot>
          <span :class="form.areaName == '' ? 'color-999' : 'color-333' ">{{ form.areaName || "请选择" }}</span>
          <u-icon name="arrow-right" color="#ddd" style="display: inline-block;"/>
        </AiAreaPicker>
      </div>
      <div class="items">
        <div class="left">
          <span>*</span><span>详细地址</span>
        </div>
        <input type="text" class="textarea" v-model="form.address" placeholder="请输入详细地址" maxlength="100"/>
      </div>
      <div class="items">
        <div class="left">
          <span>*</span><span>申请帮扶原因（最多2项）</span>
        </div>
        <div class="tags">
          <span v-for="(item,index) in list" :key="index" :class="item.checked? 'isCheck':''" @click="helpCheck(item)">{{ item.dictName }}</span>
        </div>
      </div>
      <div class="items">
        <div class="left">
          <span>*</span><span>返贫致贫风险说明</span>
        </div>
        <u-input type="textarea" class="text" v-model="form.riskDescription" placeholder="请简要说明返贫致贫风险"
         placeholder-style="font-size: 14px;color: #999;" maxlength="500" auto-height/>
      </div>
      <div class="items">
        <div class="left">
          <span style="margin-right: 8px"></span><span>上传佐证材料（最多9张）</span>
        </div>
        <div style="margin-top: 10px;">
          <AiUploader v-model="form.files" :limit="9" multiple></AiUploader>
        </div>
      </div>
    </div>

    <div style="height: 60px;"></div>

    <div class="btn" @click="comfirm">提交</div>

  </div>
</template>

<script>
import { mapState } from 'vuex'
export default {
  data() {
    return {
      form: {
        name: '',
        idNumber: '',
        phone: '',
        householdNumber: '',
        areaId: '',
        areaName: '',
        address: '',
        declareReason: [],
        reason: '',
        riskDescription: '',
        files: []
      },
      list: [],
      flag: false,
      checkList: [],
    }
  },
  onLoad() {
    this.$dict.load('helpDeclarationReason').then(()=>{
      this.list = this.$dict.getDict('helpDeclarationReason').map((item)=>{
        return {
          dictName: item.dictName,
          dictValue: item.dictValue,
          checked: false
        }
      })
    })
  },

  computed: {
    ...mapState(['user'])
  },

  onShow() {
    document.title = '添加帮扶申报'
  },
  methods: {
    helpCheck(e) {
      e.checked = !e.checked
      this.checkList = this.list.filter(e=>e.checked)
      this.form.declareReason = this.checkList.map(v=> v.dictValue).toString()
      this.form.reason = this.checkList.map(o=>o.dictName).toString()
    },
    comfirm() {
      if(this.flag) return

      if(!this.form.name) {
        return this.$u.toast('请输入姓名')
      }
      if(!this.form.idNumber) {
        return this.$u.toast('请输入身份证号')
      }
      if(this.form.idNumber) {
        if (!/(^\d{15}$)|(^\d{18}$)|(^\d{17}(\d|X|x)$)/.test(this.form.idNumber)) {
          return this.$u.toast('请输入正确的身份证号')
        }
      }
      if(!this.form.phone) {
        return this.$u.toast('请输入手机号')
      }
      if(!this.form.householdNumber) {
        return this.$u.toast('请输入家庭人口数')
      }
      if(!this.form.areaId) {
        return this.$u.toast('请选择所在地区')
      }
      if(!this.form.address) {
        return this.$u.toast('请输入详细地址')
      }
      if(!this.form.declareReason) {
        return this.$u.toast('请选择帮扶原因')
      }
      if(this.form.declareReason) {
        if(this.checkList.length > 2) {
          return this.$u.toast('帮扶原因最多选2项')
        }
      }
      if(!this.form.riskDescription) {
        return this.$u.toast('请输入返贫致贫风险说明')
      }

      this.flag = true
      this.$http.post('/app/apphelpdeclarationinfo/addByEw',{...this.form}).then((res) => {
        if(res.code ==0) {
          this.$u.toast('提交成功')
          uni.$emit('update')
          setTimeout(() => {
            uni.navigateBack()
          },600)
        }
      })
    }
  },
}
</script>

<style lang="scss" scoped>
::v-deep uni-page-body {
  height: 100%;
  font-size: 32px !important;
}
.add {
  .tips {
    padding: 32px;
    box-sizing: border-box;
    background: #FFF8F3;
    color: #FF883C;
    font-size: 30px;
  }

  .user_info,
  .family_info {
    background: #FFF;
    .item {
      display: flex;
      padding: 32px;
      box-sizing: border-box;
      border-bottom: 1px solid #DDDDDD;

      .left {
        width: 240px;
        span:first-child {
          color: #FF4466;
        }
      }
      
      .right__text {
        width: calc(100% - 240px);
        text-align: right;
      }

      .color-999 {
        color: #999;
      }
      .color-333 {
        color: #333;
      }
      
    }
    
    .item:last-child {
      border-bottom: none;
    }
    .items {
      padding: 32px;
      box-sizing: border-box;
      border-bottom: 1px solid #DDDDDD;

      .left {
        span:first-child {
          color: #FF4466;
        }
      }
      .text {
        margin-top: 20px;
      }
      .textarea {
        margin-top: 32px;
      }
      .tags {
        margin-top: 20px;
        span {
          display: inline-block; 
          width: 31%;
          height: 80px;
          line-height: 80px;
          text-align: center;
          box-sizing: border-box;
          border-radius: 16px;
          border: 1px solid #CCCCCC;
          margin-right: 20px;
          margin-bottom: 16px;
        }
        span:nth-child(3n) {
          margin-right: 0;
        }
        .isCheck {
          color: #FFF;
          background: #4181FF;
        }
      }
    }

    .items:last-child {
      border-bottom: none;
    }
  }
  
  .family_info {
    margin-top: 16px;
  }

  ::v-deep .uni-input-wrapper .uni-input-placeholder {
    font-size: 28px;
    color: #999;
  }

  .btn {
    position: fixed;
    bottom: 0;
    left: 0;
    width: 100%;
    height: 112px;
    line-height: 112px;
    text-align: center;
    background: #4181FF;
    color: #FFF;
    font-size: 34px;
    z-index: 999;
  }
}
</style>