dvcp_v2_wxcp_app/library/apps/AppHealthReport/Content.vue

<template>
  <div class="album">
    <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">
            <AiCheckbox
                style="width: 100%"
                v-model="form.health"
                dict="epidemicRecentHealth"
            ></AiCheckbox>
          </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="form-item__group">
      <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: 180px"
                v-model="form.description"
                :maxlength="500"
                placeholder="请输入备注说明"
                placeholder-style="font-size: 16px"
            ></textarea>
          </div>
        </div>
      </div>
    </div>
    <div class="footer">确认</div>
  </div>
</template>

<script>
import {mapState} from "vuex";

export default {
  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: "",
        arriveGirdId: '',
        arriveGirdName: '',
        corpId: '',
      },
      dictList: [],
      arr: [],
      gridList: [[], [], []],
      flag: false,
      areaId: "",
    };
  },


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

  onLoad(option) {
    this.areaId = this.user.areaId;
    document.title = '返乡登记'
    if (option.corpId) {
      this.form.corpId = option.corpId
    }
    this.form.arriveGirdId = option.arriveGirdId
    this.form.arriveGirdName = decodeURIComponent(option.arriveGirdName)
  },

  methods: {
    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.$u.toast("请输入返乡人员姓名");
      }

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

      if (
          !/^[1-9]\d{5}(19\d{2}|20[0-2]\d)(0[1-9]|1[0-2])(0[1-9]|[1-2][0-9]|3[0-1])\d{3}([0-9xX])$/.test(this.form.idNumber)
      ) {
        return this.$u.toast("请输入正确的身份证账号");
      }

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

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

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

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

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

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

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

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

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

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

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

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

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

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

      this.$loading();
      this.$http
      .post(`/app/appepidemicbackhomerecord/addOrUpdate`, {
        ...this.form,
        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("updateBackList");
          setTimeout(() => {
            uni.navigateTo({url: `./Success?status=1&corpId=${this.form.corpId}`})
          }, 400);
        }
      }).catch((err) => {
        console.log(err)
        uni.$emit("updateBackList");
        uni.navigateTo({url: `./Success?status=1&corpId=${this.form.corpId}`})
      })
    },
  },
};
</script>

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

  .tips {
    line-height: 1.3;
    padding: 32px 32px;
    color: #ff883c;
    font-size: 30px;
    text-align: justify;
    background: #fff8f3;
  }

  .form-item__group {
    margin-bottom: 24px;
    background: #fff;
  }

  .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;

      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: 600;
        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;
      }
    }
  }

  .footer{
    width: 100%;
    height: 112px;
    line-height: 112px;
    box-shadow: inset 0px 1px 0px 0px #EEEEEE;
    font-size: 32px;
    font-family: PingFangSC-Medium, PingFang SC;
    font-weight: 500;
    text-align: center;
    position: fixed;
    bottom: 0;
    left: 0;
    background: #1365DD;
    color: #FFF;
  }
}
</style>