dvcp_v2_wechat_app/src/project/pingchang/AppGetwayRegister/AddGetway.vue

<template>
  <div class="AddGetway">
    <!-- 基本信息 -->
    <div class="title">基本信息</div>
    <div class="form-item__group">
      <div class="form-item">
        <div class="form-item__wrapper">
          <div class="form-item__title">
            <i>*</i>
            <h2>卡口选择</h2>
          </div>
          <div class="form-item__right">
            <AiSelect v-model="form.type" dict="epidemicRecentPersonType" class="select"></AiSelect>
          </div>
        </div>
      </div>
      <div class="form-item">
        <div class="form-item__wrapper">
          <div class="form-item__title">
            <i>*</i>
            <h2>手机号码</h2>
          </div>
          <div class="form-item__right">
            <input placeholder="请输入" type="number" v-model="form.phone" :maxlength="11"/>
          </div>
        </div>
      </div>
      <div class="form-item">
        <div class="form-item__wrapper">
          <div class="form-item__title">
            <i>*</i>
            <h2>姓名</h2>
          </div>
          <div class="form-item__right">
            <input placeholder="请输入" v-model="form.name" :maxlength="20"/>
          </div>
        </div>
      </div>
      <div class="form-item">
        <div class="form-item__wrapper">
          <div class="form-item__title">
            <i>*</i>
            <h2>身份证号</h2>
          </div>
          <div class="form-item__right">
            <input placeholder="请输入" type="idcard" v-model="form.idNumber" :maxlength="20"/>
          </div>
        </div>
      </div>
      <div class="form-item">
        <div class="form-item__wrapper">
          <div class="form-item__title">
            <i>*</i>
            <h2>人员类别</h2>
          </div>
          <div class="form-item__right">
            <AiSelect v-model="form.type" dict="epidemicRecentPersonType" class="select"></AiSelect>
          </div>
        </div>
      </div>
      <div class="form-item">
        <div class="form-item__wrapper">
          <div class="form-item__title">
            <i>*</i>
            <h2>高危行业</h2>
          </div>
          <div class="form-item__right">
            <AiSelect v-model="form.type" dict="epidemicRecentPersonType" class="select"></AiSelect>
          </div>
        </div>
      </div>
    </div>

    <!-- 行程信息 -->
    <div class="title">行程信息</div>
    <div class="form-item__group">
      <div class="form-item">
        <div class="form-item__wrapper">
          <div class="form-item__title">
            <i>*</i>
            <h2>出发时间</h2>
          </div>
          <div class="form-item__right">
            <div class="ai-area" @click="isShowStartTime = true">
              <div class="ai-area__wrapper">
                <span class="label" v-if="form.startTime">{{ form.startTime }}</span>
                <i v-else>请选择</i>
                <u-icon name="arrow-right" color="#ddd"/>
              </div>
            </div>
          </div>
        </div>
      </div>
      <div class="form-item">
        <div class="form-item__wrapper">
          <div class="form-item__title">
            <i>*</i>
            <h2>出发地区</h2>
          </div>
          <div class="form-item__right">
            <AiAreaPicker class="ai-area" v-model="form.startAreaId" :fullName.sync="form.startAreaName" all>
              <div class="ai-area__wrapper">
                <span class="label" v-if="form.startAreaName">{{ form.startAreaName }}</span>
                <i v-else>请选择</i>
                <u-icon name="arrow-right" color="#ddd"/>
              </div>
            </AiAreaPicker>
          </div>
        </div>
      </div>
      <div class="form-item form-item__textarea">
        <div class="form-item__wrapper">
          <div class="form-item__title">
            <i>*</i>
            <h2>出发地址</h2>
          </div>
          <div class="form-item__right">
            <textarea auto-height v-model="form.startAddress" :maxlength="500" placeholder="请输入详细的出发地址"
                      placeholder-style="font-size: 16px"></textarea>
          </div>
        </div>
      </div>
    
      <div class="form-item">
        <div class="form-item__wrapper">
          <div class="form-item__title">
            <i>*</i>
            <h2>出行方式</h2>
          </div>
          <div class="form-item__right">
            <AiSelect dict="epidemicRecentTravel" v-model="form.travelType" class="select"></AiSelect>
          </div>
        </div>
      </div>
      <div class="form-item">
        <div class="form-item__wrapper">
          <div class="form-item__title">
            <i>*</i>
            <h2>车次/航班</h2>
          </div>
          <div class="form-item__right">
            <input placeholder="请输入" v-model="form.name" :maxlength="20"/>
          </div>
        </div>
      </div>
      <div class="form-item form-item__textarea">
        <div class="form-item__wrapper">
          <div class="form-item__title">
            <i>*</i>
            <h2>行程描述</h2>
          </div>
          <div class="form-item__right">
            <textarea auto-height style="height: 90px" v-model="form.description" :maxlength="500" placeholder="请输入行程描述"
                      placeholder-style="font-size: 16px"></textarea>
          </div>
        </div>
      </div>
      <div class="form-item">
        <div class="form-item__wrapper">
          <div class="form-item__title">
            <i>*</i>
            <h2>抵平时间</h2>
          </div>
          <div class="form-item__right">
            <div class="ai-area" @click="isShowEndTime = true">
              <div class="ai-area__wrapper">
                <span class="label" v-if="form.arriveTime">{{ form.arriveTime }}</span>
                <i v-else>请选择</i>
                <u-icon name="arrow-right" color="#ddd"/>
              </div>
            </div>
          </div>
        </div>
      </div>
      <div class="form-item">
        <div class="form-item__wrapper">
          <div class="form-item__title">
            <i>*</i>
            <h2>返乡地区</h2>
          </div>
          <div class="form-item__right">
            <AiAreaPicker class="ai-area" v-model="form.arriveAreaId" :fullName.sync="form.arriveAreaName" :areaId="$areaId">
              <div class="ai-area__wrapper">
                <span class="label" v-if="form.arriveAreaName">{{ form.arriveAreaName }}</span>
                <i v-else>请选择</i>
                <u-icon name="arrow-right" color="#ddd"/>
              </div>
            </AiAreaPicker>
          </div>
        </div>
      </div>
      <div class="form-item form-item__textarea">
        <div class="form-item__wrapper">
          <div class="form-item__title">
            <i>*</i>
            <h2>返乡地址</h2>
          </div>
          <div class="form-item__right">
            <textarea auto-height v-model="form.arriveAddress" :maxlength="500" placeholder="请输入详细的返乡地址"
                      placeholder-style="font-size: 16px"></textarea>
          </div>
        </div>
      </div>
    </div>

    <!-- 健康状况 -->
    <div class="title">健康状况</div>
    <div class="form-item__group">
      <div class="form-item form-item__imgs">
        <div class="form-item__wrapper">
          <div class="form-item__title">
            <i>*</i>
            <h2>是否有风险旅居史？</h2>
          </div>
          <div class="form-item__right">
            <AiRadio style="width: 100%;" v-model="form.checkResult" dict="yesOrNo"/>
          </div>
        </div>
      </div>
      <div class="form-item" v-show="form.checkResult == 1">
        <div class="form-item__wrapper">
          <div class="form-item__title">
            <i>*</i>
            <h2>风险地区</h2>
          </div>
          <div class="form-item__right">
            <AiAreaPicker class="ai-area" v-model="form.startAreaId" :fullName.sync="form.startAreaName" all>
              <div class="ai-area__wrapper">
                <span class="label" v-if="form.startAreaName">{{ form.startAreaName }}</span>
                <i v-else>请选择</i>
                <u-icon name="arrow-right" color="#ddd"/>
              </div>
            </AiAreaPicker>
          </div>
        </div>
      </div>
      <div class="form-item form-item__imgs">
        <div class="form-item__wrapper">
          <div class="form-item__title">
            <i>*</i>
            <h2>近七日内是否接触新冠确诊或疑似患者？</h2>
          </div>
          <div class="form-item__right">
            <AiRadio style="width: 100%;" v-model="form.checkResult" dict="epidemicTouchInFourteen"/>
          </div>
        </div>
      </div>
      <div class="form-item form-item__imgs">
        <div class="form-item__wrapper">
          <div class="form-item__title">
            <i>*</i>
            <h2>是否有健康异常情况？</h2>
          </div>
          <div class="form-item__right">
            <AiRadio style="width: 100%;" v-model="form.checkResult" dict="yesOrNo"/>
          </div>
        </div>
      </div>
      <div class="form-item">
        <div class="form-item__wrapper">
          <div class="form-item__title">
            <i>*</i>
            <h2>异常情况</h2>
          </div>
          <div class="form-item__right">
            <AiSelect dict="epidemicRecentTravel" v-model="form.travelType" class="select"></AiSelect>
          </div>
        </div>
      </div>
    </div>

    <!-- 同行情况 -->
    <div class="title">同行情况</div>
    <div class="form-item__group">
      <div class="form-item">
        <div class="form-item__wrapper">
          <div class="form-item__title">
            <i>*</i>
            <h2>同行人数</h2>
          </div>
          <div class="form-item__right">
            <input placeholder="请输入" v-model="form.temperature" :maxlength="20"/>
            <i>人</i>
          </div>
        </div>
      </div>
      <div>
        <NamePhone v-for="(item, index) in people" :key="index" ref="NamePhoneRef" :name.sync="item.name"
         :phone.sync="item.phone" :index="index" @delCountHandle="delCountHandle"/>
      </div>
      <div class="addCount">
        <u-button type="primary" @click="addCountHandle">继续添加</u-button>
      </div>
      
    </div>

    <u-picker mode="time" :params="dataParams" v-model="isShowDate" @confirm="onDateChange"></u-picker>
    <u-picker mode="time" :params="params" v-model="isShowStartTime" @confirm="onStartChange"></u-picker>
    <u-picker mode="time" :params="params" v-model="isShowEndTime" @confirm="onEndChange"></u-picker>
    
    <div class="agree">
      <u-checkbox v-model="isAgree"></u-checkbox>
      <span class="deal">以上信息是我本人填写，本人对信息内容的真实性和完整性负责。</span>
    </div>
    <div class="btn-wrapper">
      <div class="btn" hover-class="text-hover" @click="submit">提交</div>
    </div>
  </div>
</template>

<script>
import {mapState} from 'vuex'
import NamePhone from './components/namePhone.vue'
export default {
  appName: "添加卡口记录",
  data() {
    return {
      isShowType: false,
      isShowEndTime: false,
      isShowStartTime: false,
      isShowDate: false,
      params: {
        year: true,
        month: true,
        day: true,
        hour: true,
        minute: true
      },
      dataParams: {
        year: true,
        month: true,
        day: true
      },
      form: {
        arriveAddress: '',
        arriveAreaId: '',
        arriveAreaName: '',
        arriveTime: '',
        checkPhoto: [],
        checkResult: '',
        checkTime: '',
        description: '',
        health: [],
        idNumber: '',
        name: '',
        phone: '',
        startAddress: '',
        startAreaId: '',
        startAreaName: '',
        startTime: '',
        temperature: '',
        touchInFourteen: '',
        travelType: '',
        type: '',
        unusual: '',
      },
      dictList: [],
      arr: [],
      gridList: [[], [], []],
      flag: false,
      $areaId: '',
      people: [{
        name: '',
        phone: '',
      }]
    }
  },

  components: {
    NamePhone,
  },

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

  onLoad() {
    this.$areaId = this.user.$areaId
  },

  methods: {
    addCountHandle() {
      this.people.push({
        name: "",
        phone: "",
      });
    },

    delCountHandle(index) {
      this.people.splice(index, 1);
    },

    onDateChange(e) {
      this.form.checkTime = `${e.year}-${e.month}-${e.day}`
    },

    onStartChange(e) {
      this.form.startTime = `${e.year}-${e.month}-${e.day} ${e.hour}:${e.minute}`
    },

    onEndChange(e) {
      this.form.arriveTime = `${e.year}-${e.month}-${e.day} ${e.hour}:${e.minute}`
    },

    submit() {
      if (!this.form.name) {
        return this.$toast('请输入返乡人员姓名')
      }

      if (!this.form.idNumber) {
        return this.$toast('请输入返乡人员身份证号')
      }

      if (!/(^\d{15}$)|(^\d{18}$)|(^\d{17}(\d|X|x)$)/.test(this.form.idNumber)) {
        return this.$toast('请输入正确的身份证账号')
      }

      if (!this.form.phone) {
        return this.$toast('请输入返乡人员手机号码')
      }

      if (!/^1[0-9]{10,10}$/.test(this.form.phone)) {
        return this.$toast('请输入正确的手机号码')
      }

      if (!this.form.type) {
        return this.$toast('请选择人员类别')
      }

      if (!this.form.travelType) {
        return this.$toast('请选择出行方式')
      }

      if (!this.form.startTime) {
        return this.$toast('请选择出发时间')
      }

      // if (new Date(this.form.startTime.replace(/-/g, '/')).getTime() > new Date().getTime()) {
      //   return this.$toast('出发时间不得晚于当前时间')
      // }

      if (!this.form.startAreaName) {
        return this.$toast('请选择出发地区')
      }

      if (this.form.startAreaId.substr(this.form.startAreaId.length - 3, 3) === '000') {
        return this.$toast('出发地区必须选到村或社区')
      }
      if (!this.form.startAddress) {
        return this.$toast('请输入出发详细地址')
      }

      if (!this.form.arriveTime) {
        return this.$toast('请选择到达时间')
      }

      if (new Date(this.form.startTime.replace(/-/g, '/')).getTime() >= new Date(this.form.arriveTime.replace(/-/g, '/')).getTime()) {
        return this.$toast('到达时间不得早于出发时间')
      }

      if (!this.form.arriveAreaName) {
        return this.$toast('请选择到达地区')
      }
      if (this.form.arriveAreaId.substr(this.form.arriveAreaId.length - 3, 3) === '000') {
        return this.$toast('到达地区必须选到村或社区')
      }
      if (!this.form.arriveAddress) {
        return this.$toast('请输入返乡地址')
      }

      if (!this.form.description) {
        return this.$toast('请输入行程描述')
      }
      if (!this.form.checkTime) {
        return this.$toast('请选择核酸检测日期')
      }
      if (!this.form.checkPhoto.length) {
        return this.$toast('请上传本人健康码截图或核酸检测报告')
      }

      if (!this.form.checkResult) {
        return this.$toast('请选择核酸检测结果')
      }
      if (!this.form.temperature) {
        return this.$toast('请输入当前体温')
      }
      if (!this.form.touchInFourteen) {
        return this.$toast('请选择14天内是否接触新冠确诊或疑似患者')
      }

      if (!this.form.health.length) {
        return this.$toast('请选择当前健康状况')
      }
      if (this.flag) return
      this.flag = true

      this.$loading()
      this.$instance.post(`/app/appepidemicbackhomerecord/addOrUpdate`, {
        ...this.form,
        openid: this.user.openid,
        startTime: this.form.startTime + ':00',
        arriveTime: this.form.arriveTime + ':00',
        checkTime: this.form.checkTime + ' 00:00:00',
        health: this.form.health.join(','),
        checkPhoto: JSON.stringify(this.form.checkPhoto)
      }).then(res => {
        this.$hideLoading()
        this.flag = false
        if (res.code == 0) {
          uni.$emit('update')
          this.$toast('提交成功')
          setTimeout(() => {
            uni.navigateBack()
          }, 400)
        }
      })
    }
  }
}
</script>

<style lang="scss">
.AddGetway {
  padding-bottom: 140px;

  .title {
    padding: 16px 32px 0 32px;
    box-sizing: border-box;
    background: #fff;
    font-size: 36px;
    font-weight: 600;
  }

  .form-item__group {
    margin-bottom: 24px;
    background: #fff;
    .addCount {
      padding: 0 32px;
      box-sizing: border-box;

      ::v-deep .u-btn--primary {
        border-radius: 16px;
      }
    }
  }

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

    .form-item__checkbox {
      width: 100%;

      div {
        width: 100%;
        height: 80px;
        line-height: 80px;
        margin-bottom: 24px;
        text-align: center;
        background: #FFFFFF;
        border-radius: 16px;
        color: #333333;
        font-size: 28px;
        border: 1px solid #CCCCCC;

        &.active {
          background: #4181FF;
          color: #fff;
          border-color: #4181FF;
        }
      }
    }

    .form-item__radio {
      display: flex;
      align-items: center;
      flex-wrap: wrap;

      div {
        width: 212px;
        height: 80px;
        line-height: 80px;
        margin-right: 16px;
        margin-bottom: 8px;
        text-align: center;
        background: #FFFFFF;
        border-radius: 16px;
        color: #333333;
        font-size: 28px;
        border: 1px solid #CCCCCC;

        &:nth-of-type(3n) {
          margin-right: 0;
        }

        &.active {
          background: #4181FF;
          color: #fff;
          border-color: #4181FF;
        }
      }
    }

    .ai-area__wrapper {
      display: flex;
      align-items: center;
      padding-left: 100px;

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

      i {
        color: #999;
        font-size: 30px;
      }

      image {
        width: 16px;
        height: 8px;
      }
    }

    .form-item__wrapper {
      display: flex;
      align-items: center;
      justify-content: space-between;
      height: 128px;
      padding-right: 28px;
      border-bottom: 1px solid #DDDDDD;

      input {
        flex: 1;
        height: 100%;
        text-align: right;
        color: #333;
        padding-right: 10px;
      }

      .form-item__right {
        display: flex;
        align-items: center;
        font-size: 32px;

        .select {
          ._i {
            padding-left: 100px;
          }
        }

        span {
          max-width: 400px;
          margin-right: 8px;
          color: #333333;
          overflow: hidden;
          white-space: nowrap;
          text-overflow: ellipsis;
        }

        i {
          margin-right: 8px;
          color: #999999;
        }
      }
    }

    &:last-child {
      .form-item__wrapper {
        border-bottom: none;
      }
    }

    .form-item__title {
      display: flex;
      align-items: center;

      i {
        font-size: 32px;
        color: #FF4466;
      }

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

      h2 {
        padding: 0 4px;
        font-weight: 400;
        font-size: 32px;
        color: #333333;
      }
    }


    &.form-item__imgs, &.form-item__textarea {
      .form-item__wrapper {
        display: block;
        height: auto;
        padding-bottom: 32px;
      }

      textarea {
        width: 100%;
        height: 90px;
      }

      .form-item__title {
        padding: 32px 0;
      }

      .form-item__right {
        padding-left: 18px;
      }
    }
  }

  .agree {
    padding: 0 32px;
    display: flex;
  } 
}
</style>