wx-qhb/pageD/settleIn/settleIn.vue

<template>
  <view class="page">
    <view class="content">
      <u--form
        labelPosition="left"
        :model="model1"
        ref="uForm"
        labelWidth="100"
      >
        <u-form-item
          :label="i18n.name"
          prop="userInfo.name"
          borderBottom
          ref="item1"
        >
          <u--input
            inputAlign="right"
            v-model="model1.name"
            :placeholder="i18n.pleaseName"
            border="none"
          ></u--input>
        </u-form-item>
        <u-form-item
          :label="i18n.IDCard"
          prop="userInfo.name"
          borderBottom
          ref="item1"
        >
          <u--input
            inputAlign="right"
            v-model="model1.idcard"
            type="idcard"
            :placeholder="i18n.enterCard"
            border="none"
          ></u--input>
        </u-form-item>
        <u-form-item
          :label="i18n.backCard"
          prop="userInfo.name"
          borderBottom
          ref="item1"
        >
          <u--input
            inputAlign="right"
            v-model="model1.card_number"
            type="number"
            :placeholder="i18n.pleaseBackCard"
            border="none"
          ></u--input>
        </u-form-item>
        <u-form-item
          :label="i18n.areaCode"
          prop="userInfo.name"
          borderBottom
          ref="item1"
        >
          <u--input
            inputAlign="right"
            v-model="model1.global_roaming"
            type="number"
            :placeholder="i18n.pleaseCode"
            border="none"
          ></u--input>
        </u-form-item>
        <u-form-item
          :label="i18n.phone"
          prop="userInfo.name"
          borderBottom
          ref="item1"
        >
          <u--input
            inputAlign="right"
            v-model="model1.phone"
            type="number"
            :placeholder="i18n.pleasePhone"
            border="none"
          ></u--input>
        </u-form-item>
        <u-form-item :label="i18n.QRCode" borderBottom ref="item1">
          <view style="display: flex; align-items: center">
            <u--input
              inputAlign="right"
              v-model="model1.code"
              :placeholder="i18n.pleaseQrCode"
              border="none"
            ></u--input>
            <view @click="getCode" style=" font-weight: 600; margin-left: 50rpx" :style="{'color':!sendCode?'#f83224':'#ccc'}">
              {{ i18n.getQrCode }}
            </view>
          </view>
        </u-form-item>
      </u--form>
    </view>

    <view class="bottom-1">
      <u-checkbox-group>
        <u-checkbox
          v-model="radiovalue1"
          shape="circle"
          activeColor="#f83224"
          @change="radioChange"
        ></u-checkbox>
      </u-checkbox-group>
      {{ i18n.readandAgree
      }}<text style="color: #f83224" @click="toUserAgreement"
        >《{{ i18n.userServiceAgreement }}》</text
      >{{ i18n.and }}
      <text style="color: #f83224" @click="toPrivacy"
        >《{{ i18n.privacy }}》</text
      >
    </view>
    <button class="btn" @click="submit">{{ i18n.startVerification }}</button>
  </view>
</template>

<script>
import { startEid } from "../../mp_ecard_sdk/main";
export default {
  data() {
    return {
      model1: {
        name: "",
        idcard: "",
        phone: "",
        card_number: "",
        code: "",
		global_roaming:""
      },
		sendCode:false,
      radiovalue1: false,
    };
  },
  computed: {
    i18n() {
      return this.$t("index");
    },
  },
  methods: {
    radioChange() {
      this.radiovalue1 = !this.radiovalue1;
    },
	getCode(){
		if(this.sendCode){
			return
		}
		if(!this.model1.phone&&!this.model1.global_roaming){
			uni.showToast({
				title:this.i18n.pleaseCode+'、'+this.i18n.phone,
				icon:'none'
			})
			return
		}
		uni.$u.http.get(`/api/sms/code?mobile=${this.model1.phone}&prefix=${this.model1.global_roaming}`).then(res=>{
			this.sendCode = true
		})
	},

    submit() {
      if (!this.radiovalue1) {
        uni.showToast({
          title: `${this.i18n.checkFirst}《${this.i18n.userServiceAgreement}》${this.i18n.and}《${this.i18n.privacy}》`,
          icon: "none",
        });
        return;
      }
      if (!this.model1.name) {
        uni.showToast({
          title: this.i18n.pleaseName,
          icon: "none",
        });
        return;
      } else if (!this.model1.idcard) {
        uni.showToast({
          title: this.i18n.enterCard,
          icon: "none",
        });
        return;
      } else if (!this.model1.phone) {
        uni.showToast({
          title: this.i18n.pleasePhone,
          icon: "none",
        });
        return;
      } else if (!this.model1.card_number) {
        uni.showToast({
          title: this.i18n.pleaseBackCard,
          icon: "none",
        });
        return;
      }

      uni.$u.http.get(`/api/identify/identify`).then((res) => {
        startEid({
          data: {
            token: res.EidToken,
            needJumpPage: false,
          },
          verifyDoneCallback(res) {
            const { token, verifyDone } = res;
            if (verifyDone) {
              uni.$u.http
                .post("/api/merchant/apply", this.model1)
                .then((res) => {
                  uni.showToast({
                    title: this.i18n.applicationResult,
                  });
                  uni.navigateTo({
                    url: "/pages/mine/mine",
                  });
                });
            } else {
              uni.showToast({
                title: this.i18n.pleaseIdentity,
              });
            }
          },
        });
      });
    },
    getTeamStatus() {},
    toPrivacy() {
      uni.navigateTo({
        url: "/pageC/privacyPolicy/privacyPolicy",
      });
    },
    toUserAgreement() {
      uni.navigateTo({
        url: "/pageD/userAgreement/userAgreement",
      });
    },
  },
  mounted() {
    this.getTeamStatus();
    uni.setNavigationBarTitle({
      title: this.i18n.teamSettle,
    });
  },
};
</script>

<style lang="scss" scoped>
.page {
  padding: 20rpx 24rpx;

  .content {
    padding: 0 20rpx;
    background-color: #fff;
    border-radius: 16rpx;
  }
  .bottom-1 {
    font-size: 20rpx;
    margin-top: 68rpx;
    color: #555;
    display: flex;
    justify-content: flex-start;
    align-items: center;
    width: 70%;
    .radio {
      width: 24rpx;
      height: 24rpx;
    }
  }
  .btn {
    color: #fff;
    background-color: #f83224;
    border-radius: 44rpx;
    margin-top: 28rpx;
    height: 88rpx;
    font-size: 32rpx;
  }
}
</style>