storevisit-ui-mobile/src/views/storeManagement/JPattributeEditor.vue

<template>
  <div class="JPattributeEditor">
    <van-nav-bar class="navBar" title="金牌店档案编辑" left-arrow @click-left="onClickLeft" />
    <div class="content" v-if="detail">
      <van-form ref="tabstoreVal">
        <van-field
          class="sendCode"
          v-model="detail.ownerMobile"
          label="主经营者电话"
          placeholder="请输入主经营者电话"
          type="tel">
          <template #button>
            <van-button
              size="small"
              style="color: white; background: rgb(0, 87, 186); border-radius: 6px"
              @click="sendCode(detail.ownerMobile)"
              :disabled="time != null"
              >发送验证码<span v-if="time">({{ timeNum }})</span>
            </van-button>
          </template>
        </van-field>
        <van-field
          v-model="verificationVal"
          label="主经营者收到的验证码"
          placeholder="请输入验证码"
          type="number"
          @blur="verification(verificationVal)" />
        <van-field v-model="detail.ownerName" label="主经营者姓名" />
        <van-field
          v-model="detail.ownerBirthday"
          label="主经营者出生日期"
          placeholder="请输入主经营者出生日期"
          @click="getNyr('ownerBirthday')" />
        <van-field autosize type="textarea" label="主营/擅长经营品类">
          <template #input>
            <van-checkbox-group v-model="detail.mainProductCategorys" direction="horizontal">
              <van-checkbox
                v-for="(item, index) in mainProductCategorys"
                :name="item.dictValue"
                shape="square"
                :key="index">
                {{ item.dictValue }}
              </van-checkbox>
            </van-checkbox-group>
          </template>
        </van-field>
        <van-field
          v-model="detail.totalSalesAmount"
          autosize
          type="textarea"
          label="门店24年总销量(以进货额计)" />
        <van-field v-model="detail.performanceRatio" type="number" label="立邦业绩占比(%)" />
        <van-field v-model="detail.mainBrand" autosize type="textarea" label="主营T0P3品牌" />

        <van-field v-model="detail.emergencyContact" label="紧急联系人姓名" />
        <van-field
          v-model="detail.emergencyContactBirthday"
          label="紧急联系人出生日期"
          @click="getNyr('emergencyContactBirthday')" />
        <van-field
          v-model="detail.emergencyContactMobile"
          type="number"
          @blur="emergencyContactBlur(detail.emergencyContactMobile)"
          label="紧急联系人电话" />
        <van-field label="紧急联系人身份">
          <template #input>
            <van-radio-group v-model="detail.emergencyContactRelation" direction="horizontal">
              <van-radio
                v-for="(item, index) in emergencyContactRelation"
                :name="item.dictValue"
                :key="index">
                {{ item.dictValue }}
              </van-radio>
            </van-radio-group>
          </template>
        </van-field>
      </van-form>
    </div>
    <div class="footer-btn">
      <van-button
        style="color: white; background: rgb(0, 87, 186); border-radius: 6px; width: 90%"
        @click="confirmShare">
        保 存
      </van-button>
    </div>
    <!-- 时间选择 -->
    <van-popup v-model="datetimeShowPicker" position="bottom">
      <van-datetime-picker
        type="date"
        title="选择年月日"
        :min-date="new Date(1945, 0, 1)"
        :max-date="new Date()"
        @confirm="datetimeOnConfirm"
        @cancel="datetimeShowPicker = false" />
    </van-popup>
  </div>
</template>

<script>
import { sendAndCheckVerCode, getDictOption } from '@/api/index';
import { getStoreArchives, updateArchives } from '@/api/storeManagement';
export default {
  name: 'JPattributeEditor',
  data() {
    return {
      detail: null,
      time: null, //计时
      timeNum: 30,
      verificationVal: '',
      datetimeShowPicker: false,
      activatNyrItem: '',
      checkboxGroup: [],
      mainProductCategorys: [],
      emergencyContactRelation: [],
      verificationPassedPhoneNum: '', //验证通过手机号
    };
  },
  activated() {
    if (this.time) clearInterval(this.time);
    this.time = null; //计时
    this.timeNum = 30;
    this.toastLoading(0, '加载中...', true);
    getDictOption({}, 'archives_main_product_categorys').then((res) => {
      let mainProductCategorys = [];
      let emergencyContactRelation = [];
      res.data.forEach((val) => {
        if (val.remark == 'mainProductCategorys') {
          mainProductCategorys.push(val);
        } else {
          emergencyContactRelation.push(val);
        }
      });
      this.mainProductCategorys = mainProductCategorys;
      this.emergencyContactRelation = emergencyContactRelation;
      this.getDetaild();
    });
  },
  methods: {
    getDetaild() {
      getStoreArchives({ storeCode: this.$route.query.storeCode }).then((res) => {
        this.toastLoading().clear();
        if (res.code == 200) {
          //   let copyData = JSON.parse(JSON.stringify(res.data));
          res.data.mainProductCategorys = res.data.mainProductCategorys.split(',');
          this.detail = res.data;
          this.verificationPassedPhoneNum = this.detail.ownerMobile;
        }
      });
    },
    // 发送验证码
    sendCode(val) {
      if (!/^1[3456789]\d{9}$/.test(val) || val == '') {
        this.$toast('格式错误');
        return;
      }
      if (this.time) return;
      clearInterval(this.time);
      this.timeNum = 30;
      this.sendCodeFun(
        {
          type: '1', //String	调用类型：1：发送验证码 2：校验验证码
          phone: val, //String	手机号
          verification: '', //String	手机号验证码
        },
        () => {
          this.time = setInterval(() => {
            this.timeNum--;
            if (this.timeNum <= 0) {
              clearInterval(this.time);
              this.time = null;
            }
          }, 1000);
          this.$toast('发送成功');
        }
      );
    },
    sendCodeFun(params, callback) {
      sendAndCheckVerCode(params).then((res) => {
        if (res.code == 200) {
          callback && callback(res);
        }
      });
    },
    verification(val) {
      // 验证码
      if (val == '') {
        return;
      }
      // 手机号
      if (this.detail.ownerMobile == '') {
        return;
      }
      this.sendCodeFun(
        {
          type: '2', //String	调用类型：1：发送验证码 2：校验验证码
          phone: this.detail.ownerMobile, //String	手机号
          verification: val, //String	手机号验证码
        },
        (res) => {
          this.verificationPassedPhoneNum = this.detail.ownerMobile;
          this.$toast(res.data ? '验证成功' : '验证码错误');
        }
      );
    },
    getNyr(val) {
      this.activatNyrItem = val;
      this.datetimeShowPicker = true;
    },
    datetimeOnConfirm(time) {
      this.$set(this.detail, this.activatNyrItem, this.parseTime(time, '{y}-{m}-{d}'));
      //   this.detail.ownerBirthday = this.parseTime(time, '{y}-{m}-{d}');
      this.datetimeShowPicker = false;
    },
    // 保存
    confirmShare() {
      if (this.detail.ownerMobile != this.verificationPassedPhoneNum) {
        this.$toast('请验证手机号');
        return;
      }
      if (
        !/^1[3456789]\d{9}$/.test(this.detail.emergencyContactMobile) ||
        this.detail.emergencyContactMobile == ''
      ) {
        this.$toast('紧急联系人电话格式错误');
        return;
      }
      this.toastLoading(0, '加载中...', true);
      let params = JSON.parse(JSON.stringify(this.detail));
      params.mainProductCategorys = params.mainProductCategorys.join(',');
      updateArchives(params).then((res) => {
        this.toastLoading().clear();
        if (res.code == 200) {
          this.$toast(res.msg);
          this.$router.go(-1);
        } else {
          this.$toast(res.msg);
        }
      });
    },
    emergencyContactBlur(val) {
      if (!/^1[3456789]\d{9}$/.test(val) || val == '') {
        this.$toast('格式错误');
      }
    },
    onClickLeft() {
      this.$router.go(-1);
    },
  },
};
</script>

<style lang="scss">
.JPattributeEditor {
  width: 100%;
  height: 100%;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  overflow: hidden;
  .content {
    flex: 1;
    overflow-y: auto;
    background: #fff;
    padding: 10px 15px;
    margin-top: 10px;
    background: #fff;
    .van-cell {
      padding: 10px 0;
      border-bottom: 1px solid #ccc;
    }
    .van-field__label {
      width: 9em;
    }
    .sendCode {
      border: none !important;
      input {
        border: 1px solid #f1f1f1;
        height: 35px;
      }
    }
    .van-checkbox--horizontal {
      margin-bottom: 10px;
      width: 100%;
    }
    .van-radio--horizontal {
      margin-bottom: 10px;
    }
  }
  .footer-btn {
    display: flex;
    justify-content: space-around;
    padding: 10px 0;
  }
}
</style>