UI：星享购 绑卡+权收

lin

2026-05-26 5ee4ff56beb980b460327e4c6ef4283d299d4a21

 pages/quanyi/add.vue

@@ -6,10 +6,12 @@
import agreement from "@/pages/quanyi/components/agreement";

import textBox from "@/components/textBox/index.vue";

import provincesCity from '@/components/picker/provincesCity'
export default {
  name: "add",
  components: {
    addAddress,agreement,textBox
    addAddress,agreement,textBox,provincesCity
  },
  data() {
    return {
@@ -69,6 +71,13 @@
  },

  computed: {
   provincesCityStr() {
      if(this.addressDetail.provinceName || this.addressDetail.cityName || this.addressDetail.areaName) {
         return `${this.addressDetail.provinceName}${this.addressDetail.cityName}${this.addressDetail.areaName}`
      } else {
         return ''
      }
   },
    addressStr() {
      if(this.addressDetail.provinceName || this.addressDetail.cityName || this.addressDetail.areaName) {
        return `${this.addressDetail.provinceName}${this.addressDetail.cityName}${this.addressDetail.areaName}${this.addressDetail.detailAddr}`
@@ -194,24 +203,52 @@
        });
        return
      }
	  
     uni.request({
       url: _this.$webHost + "/api/v2/customer/appAddCstAddress",
       method: "POST",
       data: {
         ..._this.addressDetail,
          customerId: uni.getStorageSync('ygxLogin').customerId,
         sourceId: uni.getStorageSync('ygxLogin').appId
       },
       success(){
         uni.request({
           url: _this.$webHost+'/api/v2/sign/signed/'+uni.getStorageSync('ygxLogin').customerId,
           method:'POST',
         })
	      
         uni.request({
           url: _this.$webHost+'/api/v2/pay/memberPurchaseBenefitsPays',
           method:'POST',
           data:{
             customerId: uni.getStorageSync('ygxLogin').customerId,
             memberPeriodConfigId: uni.getStorageSync('memberPeriodConfigInfo').id
           },
           success(){
             _this.getUserInfo()
           }
         })
       }
     })

      // 移到上面了，先保存地址再走下面的接口
      // uni.request({
      //   url: _this.$webHost+'/api/v2/sign/signed/'+uni.getStorageSync('ygxLogin').customerId,
      //   method:'POST',
      // })

      uni.request({
        url: _this.$webHost+'/api/v2/sign/signed/'+uni.getStorageSync('ygxLogin').customerId,
        method:'POST',
      })

      uni.request({
        url: _this.$webHost+'/api/v2/pay/memberPurchaseBenefitsPays',
        method:'POST',
        data:{
          customerId: uni.getStorageSync('ygxLogin').customerId,
          memberPeriodConfigId: uni.getStorageSync('memberPeriodConfigInfo').id
        },
        success(){
          _this.getUserInfo()
        }
      })
      // uni.request({
      //   url: _this.$webHost+'/api/v2/pay/memberPurchaseBenefitsPays',
      //   method:'POST',
      //   data:{
      //     customerId: uni.getStorageSync('ygxLogin').customerId,
      //     memberPeriodConfigId: uni.getStorageSync('memberPeriodConfigInfo').id
      //   },
      //   success(){
      //     _this.getUserInfo()
      //   }
      // })

    },

@@ -326,13 +363,50 @@
        });
        return
      }
      if(!_this.addressStr){
        uni.showToast({
          title: "请填写详细地址",
          icon: "none",
        });
        return;
      }
     // 旧的地址判断
      // if(!_this.addressStr){
      //   uni.showToast({
      //     title: "请填写详细地址",
      //     icon: "none",
      //   });
      //   return;
      // }
     // 新增地址移到外面判断
     if (!_this.addressDetail.consignee) {
       uni.showToast({
         title: "请输入收件人姓名 ",
         icon: "none",
       });
       return;
     }
     if (!_this.addressDetail.contactPhone) {
       uni.showToast({
         title: "请输入收件人联系电话",
         icon: "none",
       });
       return;
     }
     if (!_this.addressDetail.provinceCode) {
       uni.showToast({
         title: "请输入收件人所在地",
         icon: "none",
       });
       return;
     }
     if (!_this.addressDetail.detailAddr) {
       uni.showToast({
         title: "请输入收件人详细地址",
         icon: "none",
       });
       return;
     }
      if (_this.addressDetail.detailAddr.length < 8) {
        uni.showToast({
         title: "详细地址需大于等于8个字符",
         icon: "none",
        });
        return;
      }


      if(_this.getPayBindCardInfo[0].bindStatus) {
@@ -862,6 +936,32 @@
          url: '/pages/index/index'
        });
      },
	  
      openProvincesCity() {
         let defaultData = []
         if(this.addressDetail.provinceCode && this.addressDetail.cityCode) {
            defaultData = [this.addressDetail.provinceCode, this.addressDetail.cityCode]
         }

         this.$refs.provincesCity.open(defaultData)
      },
      provincesCityChange(e) {
         if(e.value.length > 0) {
            this.addressDetail.provinceCode = e.value[0].code
            this.addressDetail.provinceName = e.value[0].title

            this.addressDetail.cityCode = e.value[1].code
            this.addressDetail.cityName = e.value[1].title

            if(e.value[2]) {
               this.addressDetail.areaCode = e.value[2].code
               this.addressDetail.areaName = e.value[2].title
            } else {
               this.addressDetail.areaCode = ""
               this.addressDetail.areaName = ""
            }
         }
      },
    },
    onUnload() {
      clearInterval(this.interval);
@@ -874,86 +974,154 @@
    <view >
      <view class="top">为向您提供更好的安全保障，您需要提供银行卡号以完成信息核验</view>
    </view>
    <view style="background: white;height: 20rpx;"></view>
    <view style="height: 20rpx;"></view>

    <view class="form">
      <view class="clo">
        <view class="label">
          <text>真实姓名</text>
        </view>
        <view class="inp_box">
          <input  maxlength="8"   v-model="cardName" class="inp" placeholder="请填写真实姓名" />
        </view>
      <view class="form-item-title" style="margin:  40rpx;font-size: 32rpx;color: #333333;font-weight: 600;">请输入您的真实身份</view>
      <view class="form-item-ct">
        <view class="clo">
         <view class="label">
           <text>持卡人姓名</text>
         </view>
         <view class="inp_box">
           <input  maxlength="8"   v-model="cardName" class="inp" placeholder="请输入持卡人姓名" />
         </view>

      </view>
      <view class="clo">
        <view class="label">
          <text>身份证号</text>
        </view>
        <view class="inp_box">
          <input  maxlength="18"   v-model="idCardNo" class="inp" placeholder="请填写身份证号" />
        </view>
        </view>
        <view class="clo">
         <view class="label">
           <text>身份证号</text>
         </view>
         <view class="inp_box">
           <input  maxlength="18"   v-model="idCardNo" class="inp" placeholder="请输入身份证号" />
         </view>

      </view>

        </view>
      </view>
<!--      <view style="background: #F7F7F7;height: 20rpx;"></view>-->
      <view class="form-item-title" style="margin:  40rpx;font-size: 32rpx;color: #333333;font-weight: 600;">请输入您的银行卡信息</view>
      <view class="form-item-ct">
           <view class="clo">
            <view class="label">
              <text>银行卡名称</text>
            </view>
            <view class="inp_box" style="z-index: 1" >
              <view style="width: 606rpx;height: 100rpx;border-radius: 30rpx;padding-left: 20rpx;line-height: 100rpx;background-color: #F7F7F7;" :class="bankName?'':'a3'">{{bankName?bankName:'请输入银行卡名称'}}</view>

      <view class="clo">
        <view class="label">
          <text>银行卡号</text>
        </view>
        <view class="inp_box">
          <input  maxlength="30"  @blur="validateAndCacheCardInfo" v-model="cardNumber" class="inp" placeholder="请输入银行卡号" />
          <image @click="cardNumber=''" v-show="!bindStatus && cardNumber" :src="offIcon" style="width: 40rpx;height: 40rpx;position: absolute;right: 0rpx;top: 30rpx;"></image>
        </view>
            </view>

      </view>
      <view class="clo">
        <view class="label">
          <text>所属银行</text>
        </view>
        <view class="inp_box" style="z-index: 1" >
          <view style="width: 670rpx;height: 100rpx;border: 1px solid #EEEEEE;border-radius: 20rpx;padding-left: 20rpx;line-height: 100rpx;" :class="bankName?'':'a3'">{{bankName?bankName:'请输入所属银行'}}</view>
           </view>
           <view class="clo">
            <view class="label">
              <text>银行卡号</text>
            </view>
            <view class="inp_box">
              <input  maxlength="30"  @blur="validateAndCacheCardInfo" v-model="cardNumber" class="inp" placeholder="请输入银行卡号" />
              <image @click="cardNumber=''" v-show="!bindStatus && cardNumber" :src="offIcon" style="width: 40rpx;height: 40rpx;position: absolute;right: 0rpx;top: 30rpx;"></image>
            </view>

        </view>
           </view>
           <view class="clo">
            <view class="label">
              <view>预留手机号</view>
            </view>
            <view class="inp_box" style="position: relative;">
              <input  maxlength="11" v-model="cardPhone"  class="inp" placeholder="请输入预留手机号" />
      <!--          <view class="code" style="position: absolute;top: 30rpx;right: 0;" @click="getSmsCode">-->
      <!--            <text :class="isCounting?'code_k':'code_a'">{{ isCounting ? countText : '获取验证码' }}</text>-->
      <!--          </view>-->
            </view>

      </view>
      <view class="clo">
        <view class="label">
          <view>银行预留手机号</view>
        </view>
        <view class="inp_box" style="position: relative;">
          <input  maxlength="11" v-model="cardPhone"  class="inp" placeholder="请填写手机号" />
<!--          <view class="code" style="position: absolute;top: 30rpx;right: 0;" @click="getSmsCode">-->
<!--            <text :class="isCounting?'code_k':'code_a'">{{ isCounting ? countText : '获取验证码' }}</text>-->
<!--          </view>-->
        </view>
           </view>
           <view class="clo" v-if="getPayBindCardInfo.length && !getPayBindCardInfo[0].bindStatus">
            <view class="label">
              <text>短信验证码</text>
            </view>
            <view class="inp_box" style="position: relative;">
              <input  maxlength="6" v-model="verificationCode" class="inp" type="number" placeholder="请输入短信验证码" />

      </view>
      <view class="clo" v-if="getPayBindCardInfo.length && !getPayBindCardInfo[0].bindStatus">
        <view class="label">
          <text>验证码</text>
        </view>
        <view class="inp_box" style="position: relative;">
          <input  maxlength="6" v-model="verificationCode" class="inp" type="number" placeholder="请填写验证码" />
              <view class="code" style="position: absolute;top: 30rpx;right: 0;" @click="getSmsCode">
               <text :class="isCounting?'code_k':'code_a'">{{ isCounting ? countText : '获取验证码' }}</text>
              </view>
            </view>

          <view class="code" style="position: absolute;top: 30rpx;right: 0;" @click="getSmsCode">
            <text :class="isCounting?'code_k':'code_a'">{{ isCounting ? countText : '获取验证码' }}</text>
          </view>
        </view>
           </view>
     </view>

      </view>

      <view class="clo" @click="$refs.address.open()">
        <view class="label" >
          <text>收货地址</text>
        </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>

      </view>
      <view class="form-item-title" style="margin:  40rpx;font-size: 32rpx;color: #333333;font-weight: 600;">请输入您的收货地址</view>
      <view class="form-item-ct">
         <!-- 旧的地址弹窗 -->
        <!-- <view class="clo" @click="$refs.address.open()">
         <view class="label" >
           <text>收货地址</text>
         </view>
         <view class="inp_box">
           <view style="font-size: 28rpx;width: 606rpx;height: 100rpx;border-radius: 20rpx;padding-left: 20rpx;line-height: 100rpx;background-color: #F7F7F7;" v-if="addressStr">{{addressStr}}</view>
           <view style="font-size: 28rpx;color: #BDBDBE;width: 606rpx;height: 100rpx;border-radius: 20rpx;padding-left: 20rpx;line-height: 100rpx;background-color: #F7F7F7;" v-else>请输入收货地址</view>
         </view>
        </view> -->
        <!-- 新增的地址放外面了 -->
        <uv-form>
           <view class="clo">
            <view class="label">
              <text>收件人姓名</text>
            </view>
            <view class="inp_box">
              <input maxlength="8" v-model="addressDetail.consignee" class="inp" placeholder="请输入收件人姓名" />
            </view>
           </view>
           <view class="clo">
            <view class="label">
              <text>收件人联系电话</text>
            </view>
            <view class="inp_box">
              <input maxlength="11" v-model="addressDetail.contactPhone" class="inp" placeholder="请输入收件人联系电话" />
            </view>
           </view>
           <!-- <view class="clo" @click="openProvincesCity()">
            <view class="label">
              <text>收件人所在地</text>
            </view>
            <view class="inp_box">
              <input disabled="true" v-model="provincesCityStr" class="inp" placeholder="请输入收件人所在地" />
            </view>
           </view> -->
			  
           <uv-form-item
              @click="openProvincesCity()"
           >
           <view class="clo">
              <view class="label">
                <text>收件人所在地</text>
              </view>
              <view class="inp_box" style="position: relative;">
               <uv-input
                 class="inp"
                 style="width: 610rpx;"
                 :adjustPosition="true"
                 :disabled="true"
                 disabledColor="none"
                 inputAlign="left"
                 v-model="provincesCityStr"
                 border="none"
                 placeholder="请输入收件人所在地"
               ></uv-input>
               <uv-icon name="arrow-down" style="position: absolute;top: 40rpx;right: 20rpx;"></uv-icon>
               </view>
            </view>
           </uv-form-item>
			  
			  
           <view class="clo">
            <view class="label">
              <text>收件人详细地址</text>
            </view>
            <view class="inp_box">
              <input maxlength="30" v-model="addressDetail.detailAddr" class="inp" placeholder="请输入收件人详细地址" />
            </view>
           </view>
        </uv-form>
     </view>

    </view>

@@ -968,27 +1136,28 @@
          </view>
        </view>-->

    <view style=" padding: 0 30rpx;margin-top: 30rpx;">
      <view style="display: flex;font-size: 28rpx;align-items: center;">
        <uv-checkbox-group
         style="align-items: center;"
            activeColor="#4766FE"
            shape="circle"
            v-model="protocolChecked">
          <uv-checkbox size="22" :name="1" >
         我已阅读并同意
          </uv-checkbox>
          <text class="protocol-text" >
            <text style="font-size: 28rpx;" class="link-text"  @click="$refs.agreement.open()">《相关协议》</text>
          </text>
        </uv-checkbox-group>

      </view>

    </view>
    
    <view class="sub" v-if="show">
      <button  :class="protocolChecked[0]?'':'nots'" class="sub_btn" @click="submit">提交</button>
    </view>
   <view style=" padding: 0 30rpx;margin-top: 30rpx;">
     <view style="display: flex;font-size: 28rpx;align-items: center;">
       <uv-checkbox-group
         style="align-items: center;"
           activeColor="#4766FE"
           shape="circle"
           v-model="protocolChecked">
         <uv-checkbox size="22" :name="1" iconSize="20">
         我已阅读并同意
         </uv-checkbox>
         <text class="protocol-text" >
           <text style="font-size: 28rpx;" class="link-text"  @click="$refs.agreement.open()">《相关协议》</text>
         </text>
       </uv-checkbox-group>
	
     </view>
	
   </view>

    <agreement ref="agreement"></agreement>
    <uni-popup ref="popup" type="bottom" >
@@ -1224,6 +1393,8 @@
    <uv-popup mode="bottom" round="20" ref="address" >
      <addAddress :addressDetail="addressDetail" @off="$refs.address.close()" @submit="e => addressDetail = e"></addAddress>
    </uv-popup>
	
   <provincesCity ref="provincesCity" @confirm="provincesCityChange" />

    <!-- <text-box v-if="showTextBox" ref="textBox" :getPlatformProtocolNewList="getPlatformProtocolNewList"></text-box> -->
  </view>
@@ -1246,12 +1417,21 @@

}
.form{
  background: #FFFFFF;
   .form-item-ct{
       margin: 0 40rpx;
       background-color: #ffffff;
       padding: 30rpx;
       border-radius: 50rpx;
   }
   .form-item-title{
        border-left: 8rpx solid #4766FE; /* 定义左边框 */
        padding-left: 20rpx;
   }
  .clo{
    //display: flex;
    //padding: 30rpx 0rpx;
    padding-bottom: 30rpx;
    margin: 0 40rpx;
    // margin: 0 40rpx;
    //border-bottom: 1rpx solid #E7E9ED;
    background: #FFFFFF;
    .label{
@@ -1272,11 +1452,12 @@
          color: #999999;
          font-size: 30rpx;
        }
        width: 670rpx;
        width: 596rpx;
        height: 100rpx;
        border: 1px solid #EEEEEE;
        border-radius: 20rpx;
        padding-left: 20rpx;
        // border: 1px solid #EEEEEE;
      background-color: #F7F7F7;
        border-radius: 30rpx;
        padding-left: 20rpx !important;
        font-weight: 400;
        font-size: 30rpx;
        color: #333333;