H5-Merchant/openmerchant/shopentry/processidentity.vue

<template>
  <view class="process">
    <view class="process-header">
      <view class="process-header-text">
        <view class="process-header-text-neishi" @click="topgi">
          <view class="process-header-text-icon">
            <image
              src="https://cdn.bjtdba.com/vod/image/2022-08-11/20220811133828415.png"
              mode="widthFix"
            >
            </image>
          </view>
        </view>
        <view class="process-header-text-title"> 店铺入驻 </view>
      </view>
    </view>
    <view class="process-zhuti">
      <view class="process-zhuti-yi">
        <view class="process-zhuti-yi-text"> 请上传身份证人像面： </view>
        <view class="process-zhuti-yi-upload" @click="cardPositivePerson">
          <image
            v-if="merchantspersonal.card_positive_person"
            :src="merchantspersonal.card_positive_person"
            mode=""
          ></image>
          <image
            v-else
            src="https://cdn.bjtdba.com/vod/image/2022-08-22/20220822174457868.png"
            mode=""
          >
          </image>
        </view>
      </view>
      <view class="process-zhuti-yi">
        <view class="process-zhuti-yi-text"> 请上传身份证国徽面： </view>
        <view class="process-zhuti-yi-upload" @click="cardBackPerson">
          <image
            v-if="merchantspersonal.card_back_person"
            :src="merchantspersonal.card_back_person"
            mode=""
          >
          </image>
          <image
            v-else
            src="https://cdn.bjtdba.com/vod/image/2022-08-22/20220822174524262.png"
            mode=""
          >
          </image>
        </view>
      </view>
      <view class="process-zhuti-yi">
        <view class="process-zhuti-yi-text"> 身份证号 </view>
        <view class="process-zhuti-yi-input">
          <input
            placeholder="请填写身份证号"
            v-model="merchantspersonal.idcard_no"
          />
        </view>
      </view>
      <view class="process-zhuti-yi">
        <view class="process-zhuti-yi-text"> 身份证有效期限 </view>
        <view class="process-zhuti-yi-input" style="display: flex">
          <view
            class="custom_view_box"
            :class="[
              merchantspersonal.identification_valid_date_start
                ? 'ishasvale'
                : '',
            ]"
            @click="onHandleDateStart"
            >{{
              merchantspersonal.identification_valid_date_start ||
              "有效期限开始"
            }}</view
          >
          <!-- <uni-datetime-picker type="date" :clear-icon="false" v-model="merchantspersonal.identification_valid_date_start" @maskClick="maskClick">
						<input placeholder="有效期限开始" v-model="merchantspersonal.identification_valid_date_start" disabled>
						
					</uni-datetime-picker> -->
          <view
            class=""
            style="
              width: 100rpx;
              height: 100%;
              background-color: rgba(31, 124, 255, 0.1);
              display: flex;
              justify-content: center;
              align-items: center;
              color: #b6b6b6;
            "
          >
            ——
          </view>
          <!-- :disabled="merchantspersonal.identification_valid_date_end == '长期' ? true : false" -->
          <!-- <uni-datetime-picker
            type="date"
            :clear-icon="false"
            v-model="merchantspersonal.identification_valid_date_end"
            @maskClick="maskClick"
          >
            <input placeholder="有效期限结束" v-model="merchantspersonal.identification_valid_date_end" disabled>
          
          </uni-datetime-picker> -->
          <view
            class="custom_view_box"
            :class="[
              merchantspersonal.identification_valid_date_end
                ? 'ishasvale'
                : '',
            ]"
            @click="onHandleDateEnd"
            >{{
              merchantspersonal.identification_valid_date_end || "有效期限结束"
            }}</view
          >
          <checkbox-group
            style="
              line-height: 94rpx;
              background: rgba(31, 124, 255, 0.1);
              padding: 0 20rpx;
              flex-shrink: 0;
            "
            @change="checkboxChange"
          >
            <label> <checkbox value="2099-12-31" />长期 </label>
          </checkbox-group>
          <!-- <uni-datetime-picker v-model="range" type="date"  @change="changeLog" style="display: flex;">
						<input placeholder="请填写身份证有效期限" v-model="merchantspersonal.identification_valid_date_start" disabled>
					</uni-datetime-picker>
					<uni-datetime-picker v-model="range" type="date"  @change="changeLog" style="display: flex;">
						<input placeholder="请填写身份证有效期限" v-model="merchantspersonal.identification_valid_date_end" disabled>
					</uni-datetime-picker> -->
        </view>
      </view>
      <view class="process-zhuti-yi">
        <view class="process-zhuti-yi-text"> 联系人姓名 </view>
        <view class="process-zhuti-yi-input">
          <input
            placeholder="请填写联系人姓名"
            v-model="merchantspersonal.name"
          />
        </view>
      </view>
      <view class="process-zhuti-yi">
        <view class="process-zhuti-yi-text"> 联系人手机号 </view>
        <view class="process-zhuti-yi-input">
          <input
            placeholder="请填写联系人手机号"
            maxlength="11"
            v-model="merchantspersonal.phone"
            @input="inputPhone"
          />
        </view>
      </view>
      <view class="process-zhuti-yi">
        <view class="process-zhuti-yi-text"> 联系人邮箱 </view>
        <view class="process-zhuti-yi-input">
          <input
            placeholder="请填写联系人邮箱"
            v-model="merchantspersonal.email"
          />
        </view>
      </view>
    </view>
    <view class="process-zhuti-fot">
      <view class="process-zhuti-fottext">
        <view class="fottext-img" @click="agreement = !agreement">
          <image
            v-if="agreement"
            src="https://cdn.bjtdba.com/vod/image/2022-08-23/20220823132347513.png"
            mode=""
          ></image>
          <image
            v-else
            src="https://cdn.bjtdba.com/vod/image/2022-08-22/20220822155008662.png"
            mode=""
          >
          </image>
        </view>
        <view class="fottext-nav">
          点击表示同意<span style="color: #1f7cff" @click="xieyi()"
            >《商家入驻协议》</span
          >
        </view>
      </view>
      <view class="process-zhuti-btnbox">
        <view class="process-zhuti-btn backbtn" @click="backStep">
          上一步
        </view>
        <view
          :class="[btnBir ? 'btn-bir' : '', 'process-zhuti-btn']"
          @click="btnBir ? goIdentity() : ''"
        >
          立即申请
        </view>
      </view>
    </view>

    <u-datetime-picker
      title="请选择身份证有效开始期限"
      :show="identification_valid_date_startShow"
      v-model="identification_valid_date_start"
      mode="date"
      :formatter="formatter"
      @confirm="handleStartConfirm"
      :closeOnClickOverlay="true"
	  :minDate="795540417000"
	  :maxDate="4102358400000"
      @cancel="identification_valid_date_startShow = false"
    ></u-datetime-picker>
    <u-datetime-picker
      title="请选择身份证有效结束期限"
      :show="identification_valid_date_EndShow"
      v-model="identification_valid_date_end"
      mode="date"
      :closeOnClickOverlay="true"
      :formatter="formatter"
      @confirm="handleEndConfirm"
	  :minDate="795540417000"
	  :maxDate="4102358400000"
      @cancel="identification_valid_date_EndShow = false"
    ></u-datetime-picker>
  </view>
</template>

<script>
import { merchaSettlen, updateMerchaSettlen } from "@/commit/api.js";
import { mapGetters } from "vuex";
import dayJs from "dayjs";
import "dayjs/locale/zh-cn";
// 设置为中文
dayJs.locale("zh-cn");
export default {
  data() {
    return {
      identification_valid_date_startShow: false, //身份证开始时间
      identification_valid_date_EndShow: false, //身份证结束时间
      identification_valid_date_start: "", // 身份证开始时间
      identification_valid_date_end: "", // 身份证结束时间
      merchantspersonal: {
        card_positive_person: "", // 身份证正面
        card_back_person: "", // 身份证反面
        idcard_no: "", // 身份证号
        identification_valid_date_start: "", // 身份证开始时间
        identification_valid_date_end: "", // 身份证结束时间
        name: "", //姓名
        phone: "", // 手机号
        email: "", // 邮箱
        uid: "",
      },
      longtime: "",
      value: 0,
      range: [],
      agreement: false,
      merchantData: {},
      btnBir: false,
      nextMerchantsData: {},
    };
  },
  computed: {
    ...mapGetters(["merchantsDataAlls"]),
  },
  onLoad(opsition) {
    this.identification_valid_date_end;
    console.log(this.merchantspersonal.identification_valid_date_end, "989898");
    let userinfo = uni.getStorageSync("userinfo");
    this.merchantspersonal.uid = userinfo.uid;
    const merchantsDataAll = this.merchantsDataAlls.merchantsDataAll;
    if (JSON.stringify(merchantsDataAll) != "{}") {
      this.range = [
        merchantsDataAll.identification_valid_date_start,
        merchantsDataAll.identification_valid_date_end,
      ];
      this.merchantspersonal.card_positive_person =
        merchantsDataAll.card_positive_person; // 身份证正面
      this.merchantspersonal.card_back_person =
        merchantsDataAll.card_back_person; // 身份证反面
      this.merchantspersonal.idcard_no = merchantsDataAll.idcard_no; // 身份证号
      this.merchantspersonal.identification_valid_date_start =
        merchantsDataAll.identification_valid_date_start; // 身份证开始时间
      this.merchantspersonal.identification_valid_date_end =
        merchantsDataAll.identification_valid_date_end; // 身份证结束时间
      this.merchantspersonal.name = merchantsDataAll.name; // 姓名
      this.merchantspersonal.phone = merchantsDataAll.phone; // 手机号
      this.merchantspersonal.email = merchantsDataAll.email; // 邮箱
    }
  },
  watch: {
    merchantspersonal: {
      handler: function (val) {
        this.isShow(val);
      },
      deep: true,
    },
    agreement: {
      handler: function (val) {
        this.isShow();
      },
    },
  },
  methods: {
    formatter(type, value) {
      if (type === "year") {
        return `${value}`;
      }
      if (type === "month") {
        return `${value}`;
      }
      if (type === "day") {
        return `${value}`;
      }
      return value;
    },
    handleStartConfirm({ value, mode }) {
      if(this.identification_valid_date_end){
		  if(value>this.identification_valid_date_end){
			  uni.showToast({
			  	title: "开始时间不能大于结束时间",
			  	icon: "none",
			  });
			  return
		  }
	  }
      this.merchantspersonal.identification_valid_date_start =
        this.formatDate(value);
      this.identification_valid_date_startShow = false;
    },

    handleEndConfirm({ value, mode }) {
		if(this.identification_valid_date_start){
			if(value<this.identification_valid_date_start){
				uni.showToast({
					title: "结束时间不能小于开始时间",
					icon: "none",
				});
				return
			}
		}
      this.merchantspersonal.identification_valid_date_end =
        this.formatDate(value);
      this.identification_valid_date_EndShow = false;
    },
    formatDate(date) {
      if (!date) return "";
      console.log(date, "dateformatDate", dayJs(date).format("YYYY-MM-DD"));
      return dayJs(date).format("YYYY-MM-DD");
    },
    onHandleDateStart() {
      console.log("onHandleDateStar身份证开始事件:");
      this.identification_valid_date_startShow = true;
    },
    onHandleDateEnd() {
      console.log("onHandledatEnd身份证结束事件:");
      this.identification_valid_date_EndShow = true;
    },
    maskClick(e) {
      console.log("maskClick事件:", e);
    },
    checkboxChange: function (e) {
      if (e.detail.value) {
        this.longtime = e.detail.value[0];
      } else {
        this.longtime = "";
      }
    },
    topgi() {
      uni.navigateBack({
        delta: 1,
      });
    },
    //商户协议
    xieyi() {
      uni.setStorageSync("agreementType", "6");
      uni.navigateTo({
        url: "/pages/index/bottombat?type=6",
      });
    },
    isShow(list) {
      let temp = true;
      if (list) {
        for (let i in list) {
          if (list[i] == "" || list[i] == null) {
            temp = false;
          }
        }
      }

      if (!this.agreement) {
        temp = false;
      }
      this.btnBir = temp;
    },
    // 身份证正面
    cardPositivePerson() {
      let that = this;
      that.$time.uploadPictures((res) => {
        that.merchantspersonal.card_positive_person = res;
      });
    },
    // 身份证反面
    cardBackPerson() {
      let that = this;
      that.$time.uploadPictures((res) => {
        that.merchantspersonal.card_back_person = res;
      });
    },
    // 身份证有效期
    changeLog(e) {
      // this.merchantspersonal.identification_valid_date_start = e[0];
      // this.merchantspersonal.identification_valid_date_end = e[1];
    },
    // 手机号
    inputPhone(e) {
      this.$nextTick(function () {
        this.merchantspersonal.phone = e.target.value.replace(/[^\d]/g, "");
      });
    },
    backStep() {
      uni.navigateBack({
        delta: 1,
      });
    },
    goIdentity() {
		console.log(this.merchantspersonal,'this.merchantspersonal')
      let that = this;
      if (that.merchantspersonal.card_positive_person == "")
        return uni.showToast({
          title: "请上传身份证人像面",
          icon: "none",
        });
      if (that.merchantspersonal.card_back_person == "")
        return uni.showToast({
          title: "请上传身份证国徽面",
          icon: "none",
        });
      if (that.merchantspersonal.idcard_no == "")
        return uni.showToast({
          title: "请填写身份证号",
          icon: "none",
        });
      if (
        !/(^[1-9]\d{5}(18|19|([23]\d))\d{2}((0[1-9])|(10|11|12))(([0-2][1-9])|10|20|30|31)\d{3}[0-9Xx]$)|(^[1-9]\d{5}\d{2}((0[1-9])|(10|11|12))(([0-2][1-9])|10|20|30|31)\d{2}$)/.test(
          that.merchantspersonal.idcard_no
        )
      ) {
        uni.showToast({
          title: "请填写有效身份证号",
          icon: "none",
        });
        return;
      }
      if (
        that.merchantspersonal.identification_valid_date_start == "" &&
        (that.merchantspersonal.identification_valid_date_end == "" ||
          this.longtime == "")
      )
        return uni.showToast({
          title: "请选择身份证有效期限",
          icon: "none",
        });
      if (that.merchantspersonal.name == "")
        return uni.showToast({
          title: "请填写联系人姓名",
          icon: "none",
        });
      if (that.merchantspersonal.phone == "")
        return uni.showToast({
          title: "请填写联系人手机号",
          icon: "none",
        });
      if (!/^1[3456789]\d{9}$/.test(that.merchantspersonal.phone)) {
        uni.showToast({
          title: "请填写有效联系人手机号",
          icon: "none",
        });
        return;
      }
      if (that.merchantspersonal.email == "") {
        uni.showToast({
          title: "请填写联系人邮箱",
          icon: "none",
        });
        return;
      }
      if (
        !/^([a-zA-Z0-9]+[_|\_|\.]?)*[a-zA-Z0-9]+@([a-zA-Z0-9]+[_|\_|\.]?)*[a-zA-Z0-9]+\.[a-zA-Z]{2,3}$/.test(
          that.merchantspersonal.email
        )
      ) {
        uni.showToast({
          title: "请填写有效联系人邮箱",
          icon: "none",
        });
        return;
      }
      if (!that.agreement)
        return uni.showToast({
          title: "请阅读并勾选同意《商家入驻协议》",
          icon: "none",
        });
      if (that.longtime) {
        that.merchantspersonal.identification_valid_date_end = that.longtime;
      }
      uni.showLoading({
        title: "加载中",
        mask: true,
      });
      uni.getStorage({
        key: "merchants_in",
        success: function (res) {
          that.merchantData = Object.assign(that.merchantData, res.data);

          uni.getStorage({
            key: "merchants_in_store",
            success: function (res) {
              that.merchantData = Object.assign(
                that.merchantData,
                res.data,
                that.merchantspersonal
              );
              let selectmerchant = uni.getStorageSync("selectmerchant");
              let merchantsStatus = that.merchantsDataAlls.merchantsStatus;
              if (merchantsStatus == 1) {
                //修改信息
                that.merchantData = Object.assign(that.merchantData, {
                  mer_id: selectmerchant.merId,
                });
                updateMerchaSettlen(that.merchantData).then(
                  (res) => {
                    if (res.data.status == 200) {
                      console.log("成功", res);
                      uni.removeStorage({
                        key: "merchants_in",
                      });
                      uni.removeStorage({
                        key: "merchants_in_store",
                      });
                      uni.redirectTo({
                        url: "./processaudit?submitCode=1",
                      });
                      uni.hideLoading();
                    }
                  },
                  (fail) => {
                    console.log("fail", fail);
                    uni.hideLoading();
                  }
                );
              } else {
                if (selectmerchant.pay_type == 2) {
                  //修改信息
                  that.merchantData = Object.assign(that.merchantData, {
                    mer_id: selectmerchant.merId,
                  });
                  updateMerchaSettlen(that.merchantData).then(
                    (res) => {
                      if (res.data.status == 200) {
                        console.log("成功", res);
                        uni.removeStorage({
                          key: "merchants_in",
                        });
                        uni.removeStorage({
                          key: "merchants_in_store",
                        });
                        uni.redirectTo({
                          url: "./processaudit?submitCode=1",
                        });
                        uni.hideLoading();
                      }
                    },
                    (fail) => {
                      console.log("fail", fail);
                      uni.hideLoading();
                    }
                  );
                } else {
                  // 新增信息
                  merchaSettlen(that.merchantData).then(
                    (res) => {
                      console.log("res", res);
                      if (res.data.status == 200) {
                        console.log("成功", res);
                        uni.removeStorage({
                          key: "merchants_in",
                        });
                        uni.removeStorage({
                          key: "merchants_in_store",
                        });
                        uni.redirectTo({
                          url: "./processaudit?submitCode=1",
                        });
                        uni.hideLoading();
                      }
                    },
                    (fail) => {
                      console.log("fail", fail);
                      uni.hideLoading();
                    }
                  );
                }
              }
            },
          });
        },
      });
    },
  },
};
</script>

<style>
page {
  background-color: #f7f8fc;
}
</style>
<style lang="scss" scoped>
/deep/.u-toolbar {
  height: 90rpx;
  .u-toolbar__wrapper__cancel,
  .u-toolbar__title,
  .u-toolbar__wrapper__confirm {
    font-size: 30rpx;
  }
}
.process {
  width: 100%;
  height: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;

  .process-header {
    position: fixed;
    top: 0;
    left: 0;
    z-index: 111;
    width: 100%;
    height: 176rpx;
    background: #ffffff;
    display: flex;
    justify-content: center;

    .process-header-text {
      width: 686rpx;
      font-size: 36rpx;
      font-weight: 500;
      color: #333333;
      display: flex;
      margin-top: 107rpx;
      align-items: center;

      .process-header-text-neishi {
        width: 45rpx;
        height: 45rpx;
        margin-right: 17rpx;

        .process-header-text-icon {
          width: 36rpx;
          height: 36rpx;
          margin-top: 2rpx;

          image {
            width: 100%;
            height: 100%;
          }
        }
      }
    }
  }

  .process-zhuti {
    width: 100%;
    height: auto;
    margin-top: 202rpx;
    display: flex;
    flex-direction: column;
    align-items: center;
    // padding: 32rpx 0 40rpx;
    padding-bottom: 40rpx;
    background: #ffffff;

    .process-zhuti-yi {
      width: 686rpx;
      // height: 150rpx;
      display: flex;
      flex-direction: column;
      justify-content: space-between;
      align-items: flex-start;
      margin-top: 32rpx;

      .process-zhuti-yi-text {
        font-size: 30rpx;
        font-weight: 500;
        color: #333333;
        margin-bottom: 26rpx;
      }

      .process-zhuti-yi-input {
        width: 100%;
        height: 94rpx;
        // background: #1F7CFF;
        // 31 124 255 10
        border-radius: 8rpx;
        // opacity: 0.1;

        input {
          width: 100%;
          height: 94rpx;
          background: rgba(31, 124, 255, 0.1);
          border-radius: 8rpx;
          box-sizing: border-box;
          padding-left: 32rpx;
        }
        .custom_view_box {
          width: 100%;
          height: 94rpx;
          background: rgba(31, 124, 255, 0.1);
          border-radius: 8rpx;
          box-sizing: border-box;
          padding-left: 32rpx;
          line-height: 94rpx;
          color: #999;
          &.ishasvale {
            color: #333;
          }
        }
      }

      .process-zhuti-yi-upload {
        width: 100%;
        // height: 404rpx;
        // background: rgba(31, 124, 255, 0.1);
        border-radius: 8rpx;
        display: flex;
        justify-content: center;
        align-items: center;

        image {
          width: 520rpx;
          height: 279rpx;
          border: 1rpx dashed #aaa;
        }
      }
    }
  }

  .process-zhuti-fot {
    margin: 50rpx 0 94rpx;
  }

  .process-zhuti-fottext {
    font-size: 24rpx;
    margin-bottom: 20rpx;

    .fottext-img {
      display: inline-block;
      vertical-align: middle;

      image {
        width: 28rpx;
        height: 28rpx;
        margin-right: 15rpx;
      }
    }

    .fottext-nav {
      display: inline-block;
    }
  }

  .process-zhuti-btnbox {
    color: #ffffff;
    display: flex;
    justify-content: space-between;
  }

  .process-zhuti-btn {
    width: 330rpx;
    height: 98rpx;
    background: rgba(31, 124, 255, 0.4);
    text-align: center;
    line-height: 98rpx;
    border-radius: 8rpx;
  }

  .backbtn {
    margin-right: 26rpx;
    background: #1f7cff;
  }

  .btn-bir {
    background: #1f7cff;
  }
}
/deep/.uni-date {
  width: 50%;
  display: inline-block;
}
</style>