UI: 澜品优选开启了银行卡支付+utiljs里面的认证

lin

2026-05-06 9ae9a5dec7e3cc3233c09e65e78056521ed03176

 pages/quanyi/add.vue

@@ -79,7 +79,7 @@
    customStyle() {
      return {
        height: "100rpx",
        background: "#EE2626",
        background: "#4766FE",
        color: "#fff",
        borderRadius: "50rpx",
        fontSize: "34rpx",
@@ -171,14 +171,15 @@

  },
  mounted(){
     // this.$refs.codeUi.open()
    this.windowHeight = uni.getSystemInfoSync().windowHeight;
    this.interval = setInterval(() => {
      let newHeight = window.innerHeight;
      if (this.windowHeight !== newHeight) {
        this.windowHeight = newHeight;
        this.handleResize();
      }
    }, 200);
    // this.interval = setInterval(() => {
    //   let newHeight = window.innerHeight;
    //   if (this.windowHeight !== newHeight) {
    //     this.windowHeight = newHeight;
    //     this.handleResize();
    //   }
    // }, 200);
  },
  methods: {
    kk(){
@@ -448,7 +449,7 @@
        });


        that.isCounting = true;
        // that.isCounting = true;



@@ -472,7 +473,15 @@
            "bankId": "1",

          },
          success(){
          success(response){
           if(response.data.code != 200) {
              uni.showToast({
                title: response.data.data,
                icon: 'none'
              });
              return;
           }
			  
            uni.request({
              url: that.$webHost+'/api/v2/pay/bindCardToCodes',
              method:'POST',
@@ -506,7 +515,7 @@
                  })
                  return;
                }

            that.isCounting = true;
                if(res.data.code === 200){
                  that.bindCardId = res.data.data;
                } else {
@@ -538,6 +547,7 @@

              }
            })
			

            let count = 60;
            that.countText = `${count}s秒后重新获取`;
@@ -869,10 +879,10 @@
    <view class="form">
      <view class="clo">
        <view class="label">
          <text>真实姓名</text>
          <text>持卡人姓名</text>
        </view>
        <view class="inp_box">
          <input  maxlength="8"   v-model="cardName" class="inp" placeholder="请填写真实姓名" />
          <input  maxlength="8"   v-model="cardName" class="inp" placeholder="请填写持卡人姓名" />
        </view>

      </view>
@@ -910,7 +920,7 @@
      </view>
      <view class="clo">
        <view class="label">
          <view>银行预留手机号</view>
          <view>预留手机号</view>
        </view>
        <view class="inp_box" style="position: relative;">
          <input  maxlength="11" v-model="cardPhone"  class="inp" placeholder="请填写手机号" />
@@ -922,7 +932,7 @@
      </view>
      <view class="clo" v-if="getPayBindCardInfo.length && !getPayBindCardInfo[0].bindStatus">
        <view class="label">
          <text>验证码</text>
          <text>手机验证码</text>
        </view>
        <view class="inp_box" style="position: relative;">
          <input  maxlength="6" v-model="verificationCode" class="inp" type="number" placeholder="请填写验证码" />
@@ -940,7 +950,7 @@
        </view>
        <view class="inp_box">
          <view style="font-size: 28rpx;width: 670rpx;height: 100rpx;border: 1px solid #EEEEEE;border-radius: 20rpx;padding-left: 20rpx;line-height: 100rpx;" v-if="addressStr">{{addressStr}}</view>
          <view style="font-size: 28rpx;color: #BDBDBE;width: 670rpx;height: 100rpx;border: 1px solid #EEEEEE;border-radius: 20rpx;padding-left: 20rpx;line-height: 100rpx;" v-else>请填写收货地址</view>
          <view style="font-size: 28rpx;color: #BDBDBE;width: 670rpx;height: 100rpx;border: 1px solid #EEEEEE;border-radius: 20rpx;padding-left: 20rpx;line-height: 100rpx;" v-else>请填写详细地址</view>
        </view>

      </view>
@@ -959,18 +969,18 @@
        </view>-->

    <view style=" padding: 0 30rpx;margin-top: 30rpx;">
      <view style="display: flex;">
      <view style="display: flex;align-items: center;">
        <uv-checkbox-group
            activeColor="red"
            activeColor="#4766FE"
         iconSize="20"
            shape="circle"
            v-model="protocolChecked">
          <uv-checkbox size="14" :name="1" >

          </uv-checkbox>
          <text class="protocol-text" >
            我已阅读并同意
            <text style="font-size: 24rpx;" class="link-text"  @click="$refs.agreement.open()">《相关协议》</text>
          <uv-checkbox size="22" :name="1" >
         <text class="protocol-text" >
            我已阅读并同意
          </text>
          </uv-checkbox>
          <text style="font-size: 24rpx;" class="link-text"  @click="$refs.agreement.open()">《相关协议》</text>
        </uv-checkbox-group>

      </view>
@@ -998,146 +1008,191 @@

    <uv-popup mode="center" round="20" ref="codeUi" :closeOnClickOverlay="false" >

      <view style="padding: 40rpx;width: 690rpx;background: url('/static/img/smsBg.png') no-repeat top center; background-size: 100%;height: 650rpx;">
      <view style="padding: 40rpx 0;width: 690rpx;background: url('/static/img/smsCodeBg.png') no-repeat top center; background-size: 100%;height: 650rpx;position: relative;">
        <view class="head">
          <view
              style="
          text-align: center;
          font-weight: bold;
          font-size: 36rpx;
          position: relative;
          height: 50rpx;
          position: absolute;
          height: 190rpx;
        right: 0;
        top: -30rpx;
        z-index: 1;
        "
          >

            <image
                @click="$refs.codeUi.close()"
                src="@/static/img/off.png"
                src="@/static/img/codeSetUi.png"
                style="
            width: 50rpx;
            height: 50rpx;
            position: absolute;
            right: 0;
            top: -2rpx;
            width: 190rpx;
            height: 190rpx;
          "
            ></image>
          </view>
        </view>
        <view  style="
        <!-- <view  style="
          font-weight: bold;
          font-size: 36rpx;
          position: relative;
         margin-bottom: 12rpx;
         text-align: center;

        ">短信确认</view>
        <view style="font-size: 28rpx;color: #252938;text-align: center;">为确保安全到账，需再次对您的收款账户进行短信验证</view>
        ">短信确认</view> -->
		
		
      <view class="close">
        <view
            style="
        text-align: center;
        font-weight: bold;
        font-size: 36rpx;
        height: 56rpx;
          position: absolute;
          left: 315rpx;
          bottom: -80rpx;
      "
        >
          <image
              @click="$refs.codeUi.close()"
              src="@/static/img/off.png"
              style="
          width: 56rpx;
          height: 56rpx;
        "
          ></image>
        </view>
      </view>
      <view style="margin-top: 100rpx;background: linear-gradient( -160deg, #D0FDFF 0%, #FFFBFC 50%, #FFFBFC 100%);border-radius: 40rpx 40rpx 40rpx 40rpx;border: 1px solid #fff;padding: 30rpx;position: relative;z-index: 2;">
         <view style="font-size: 28rpx;color: #252938;text-align: center;">为确保安全到账，需再次对您的收款账户进行短信验证</view>
         <view class="content">
           <uv-form
              :labelStyle="lstyle"
              labelPosition="left"

        <view class="content">
          <uv-form
              :labelStyle="lstyle"
              labelPosition="left"
              ref="form"
              labelWidth="100"
           >

              ref="form"
              labelWidth="100"
          >
            <uv-form-item
               class="item"
               label=""
               prop="repayTermStr"

            <uv-form-item
                class="item"
                label=""
                prop="repayTermStr"
            >
              <uv-input
                 :adjustPosition="true"
                 readonly
                 v-model="cardPhone"
                 maxlength="11"
                 :customStyle="inputStyle"
                 disabledColor="none"

            >
              <uv-input
                  :adjustPosition="true"
                  readonly
                  v-model="cardPhone"
                  maxlength="11"
                  :customStyle="inputStyle"
                  disabledColor="none"
                 border="none"
                 placeholder="请输入手机号"
                 style="height: 100rpx;border: 1px solid #EEEEEE;border-radius: 30rpx;padding: 0 20rpx;"
              ></uv-input>
            </uv-form-item>

                  border="none"
                  placeholder="请输入手机号"
                  style="height: 100rpx;border: 1px solid #EEEEEE;border-radius: 30rpx;padding: 0 20rpx;"
              ></uv-input>
            </uv-form-item>
            <uv-form-item
               class="item"
               label=""
               prop="needVerify"

            <uv-form-item
                class="item"
                label=""
                prop="needVerify"

            >
              <uv-input
                  :adjustPosition="true"
                  maxlength="6"
                  v-model="verificationCodeT"
                  border="none"
                  placeholder="请输入验证码"
                  style="height: 100rpx;border: 1px solid #EEEEEE;border-radius: 30rpx;padding: 0 20rpx;"
              >
                <template #suffix>
                  <text
                      class="code"
                      style="color: red;"
                      :class="isCounting_A ? 'ks' : ''"
                      @click="getCode"
                  >{{ isCounting_A ? countText_A : "获取验证码" }}</text
                  >
                </template>
              </uv-input>
            </uv-form-item>
            <uv-form-item >
              <view class="but" style="width: 100%;">
                <uv-button
                    :customStyle="customStyle"
                    shape="circle"
                    @click="submitPlan"
                >确认</uv-button
                >
              </view>
            </uv-form-item>
          </uv-form>
        </view>
            >
              <uv-input
                 :adjustPosition="true"
                 maxlength="6"
                 v-model="verificationCodeT"
                 border="none"
                 placeholder="请输入验证码"
                 style="height: 100rpx;border: 1px solid #EEEEEE;border-radius: 30rpx;padding: 0 20rpx;"
              >
               <template #suffix>
                 <text
                    class="code"
                    style="color: #4766FE;"
                    :class="isCounting_A ? 'ks' : ''"
                    @click="getCode"
                 >{{ isCounting_A ? countText_A : "获取验证码" }}</text
                 >
               </template>
              </uv-input>
            </uv-form-item>
            <uv-form-item >
              <view class="but" style="width: 100%;">
               <uv-button
                  :customStyle="customStyle"
                  shape="circle"
                  @click="submitPlan"
               >确认</uv-button
               >
              </view>
            </uv-form-item>
           </uv-form>
         </view>
      </view>
      </view>
    </uv-popup>
    <uv-popup mode="center" round="20" ref="setUi" :closeOnClickOverlay="false" >

      <view style="padding: 40rpx;width: 690rpx;background: url('/static/img/smsBg.png') no-repeat top center; background-size: 100%;height: 650rpx;">
      <view style="padding: 40rpx 0;width: 690rpx;background: url('/static/img/smsSetBg.png') no-repeat top center; background-size: 100%;height: 650rpx;">
        <view class="head">
          <view
              style="
          text-align: center;
          font-weight: bold;
          font-size: 36rpx;
          position: relative;
          height: 50rpx;
          position: absolute;
          height: 190rpx;
          right: 0;
          top: -30rpx;
          z-index: 1;
        "
          >

        
            <image
                @click="$refs.setUi.close()"
                src="@/static/img/off.png"
                src="@/static/img/codeSetUi.png"
                style="
            width: 50rpx;
            height: 50rpx;
            position: absolute;
            right: 0;
            top: -2rpx;
            width: 190rpx;
            height: 190rpx;
          "
            ></image>
          </view>
        </view>
        <view  style="
        <!-- <view  style="
          font-weight: bold;
          font-size: 36rpx;
          position: relative;
         margin-bottom: 12rpx;
         text-align: center;

        ">本人提交确认</view>
        ">本人提交确认</view> -->
      <view class="close">
        <view
            style="
        text-align: center;
        font-weight: bold;
        font-size: 36rpx;
        height: 56rpx;
          position: absolute;
          left: 315rpx;
          bottom: -80rpx;
      "
        >
          <image
              @click="$refs.setUi.close()"
              src="@/static/img/off.png"
              style="
          width: 56rpx;
          height: 56rpx;
        "
          ></image>
        </view>
      </view>
      <view style="margin-top: 100rpx;background: linear-gradient( -160deg, #D0FDFF 0%, #FFFBFC 50%, #FFFBFC 100%);border-radius: 40rpx 40rpx 40rpx 40rpx;border: 1px solid #fff;padding: 30rpx;position: relative;z-index: 2;">
        <view style="font-size: 28rpx;color: #252938;text-align: center;">根据合规要求我们将进行本人提交意愿确认的短信校验，请注意查看短信验证码</view>

        <view class="content">
          <uv-form
              :labelStyle="lstyle"
@@ -1184,7 +1239,7 @@
                <template #suffix>
                  <text
                      class="code"
                      style="color: red;"
                      style="color: #4766FE;"
                      :class="isCounting_B ? 'ks' : ''"
                      @click="getCode_san"
                  >{{ isCounting_B ? countText_B : "获取验证码" }}</text
@@ -1204,18 +1259,25 @@
            </uv-form-item>
          </uv-form>
        </view>
      </view>
      </view>
     </view>
    </uv-popup>

    <uv-popup mode="bottom" round="20" ref="address" >
      <addAddress :addressDetail="addressDetail" @off="$refs.address.close()" @submit="e => addressDetail = e"></addAddress>
    </uv-popup>

    <!-- <text-box v-if="showTextBox" ref="textBox" :getPlatformProtocolNewList="getPlatformProtocolNewList"></text-box> -->
    <text-box v-if="showTextBox" ref="textBox" :getPlatformProtocolNewList="getPlatformProtocolNewList"></text-box>
  </view>
</template>

<style scoped lang="scss">
   .uv-checkbox-group--row {
      align-items: center;
   }
   ::v-deep .uv-popup .uv-popup__content {
      overflow: visible !important;
   }
.a3{
  color: #BDBDBE;
  font-size: 30rpx;
@@ -1297,12 +1359,12 @@

.sub{

  width: 100%;
  width: 690rpx;
  bottom: 50rpx;
  padding: 0 30rpx;
  margin-top: 40rpx;
  .sub_btn{
    background: #EE2626;
    background: #4766FE;
    border-radius: 50rpx 50rpx 50rpx 50rpx;
    padding: 10rpx;

@@ -1325,7 +1387,6 @@
  color: #BDBDBE;
}
.protocol-text {
  width: calc( 100% - 44rpx);
  font-size: 24rpx;
  color: #8B8D96;
  line-height: 28rpx;