UI：星享购 绑卡+权收

lin

2026-05-25 9e8dc1c9e3ac624bd3b71d991f7b3a7d7ccb2ec9

UI：星享购 绑卡+权收

 pages/quanshou/index.vue

@@ -148,7 +148,7 @@
</script>

<template>
  <view style="background: url('/static/img/qsBg.png') no-repeat top center; background-size: 100%;background-color: #210E0E;height: 100%;">
  <view style="background: url('/static/img/qsBg.png') no-repeat top center; background-size: 100%;background-color: #ffffff;height: 100%;padding-top: 80rpx;">
    <!-- 顶部 VIP 卡片 -->
<!--    <view-->
<!--        class="vip-bg"-->
@@ -186,39 +186,65 @@
<!--      </view>-->
<!--    </view>-->
    <!--  新版  -->
    <view style="padding: 0 30rpx;">
    <view>
      <!--   返回   -->
      <view class="head" style="position: relative;height: 90rpx;">
        <view style="display: flex;justify-content: flex-start;position: absolute;left: 0;top: 30rpx;z-index: 9;color: #FFFFFF;">
        <view style="display: flex;justify-content: flex-start;position: absolute;left: 30rpx;top: 30rpx;z-index: 9;color: #FFFFFF;">
          <view  @tap="goHome" id="home" class="home acea-row row-center-wrapper iconfont icon-fanhui2 h5_back" style="background: url('/static/img/back.png') no-repeat top center; background-size: 100%;width: 40rpx;height: 40rpx;">
  <!--          <view  @tap="goHome" id="home" class="home acea-row row-center-wrapper iconfont icon-fanhui2 h5_back icon-shouye4" :style="{ height:  '80rpx',lineHeight:  '80rpx'}" >-->
          </view>
        </view>
        <view style="text-align: center;color: #ffffff;height: 90rpx;line-height: 90rpx;">会员中心</view>
      </view>
      <!--   尊享会员年卡   -->
      <view style="background: url('/static/img/qyBg2.png') no-repeat top center; background-size: 100%;width: 100%;height: 300rpx;padding: 40rpx;margin-top: 230rpx;">
        <view style="font-size: 44rpx;font-weight: bold;background: -webkit-linear-gradient(#FFEEE7, #F4936F);-webkit-background-clip: text;-webkit-text-fill-color: transparent;">尊享会员年卡</view>
        <view style="font-size: 28rpx;font-weight: 400;background: -webkit-linear-gradient(#FFEEE7, #F4936F);-webkit-background-clip: text;-webkit-text-fill-color: transparent;">会员预计最高节省1359.27元</view>
        <view style="display: flex;margin-top: 30rpx;align-items: self-end;">
          <view v-if="lst.length" style="font-size: 24rpx;width: 70%;">
            <p style="background: -webkit-linear-gradient(#FFEEE7, #F4936F);-webkit-background-clip: text;-webkit-text-fill-color: transparent;font-size: 36rpx;">¥{{lst[0].amount.toFixed(2)}} <span style="font-size: 24rpx;">{{lst[0].isBuy?'已扣款' : '待扣款'}}</span></p>
            <p style="background: -webkit-linear-gradient(#FFEEE7, #F4936F);-webkit-background-clip: text;-webkit-text-fill-color: transparent;">{{lst[0].buyDate}}</p>
      <view style="background: url('/static/img/qyBg2.png') no-repeat top center; background-size: 100%;width: 100%;height: 390rpx;padding: 80rpx;margin-top: 30rpx;">
        <view style="font-size: 48rpx;font-weight: bold;background: -webkit-linear-gradient(#2A261A, #141316);-webkit-background-clip: text;-webkit-text-fill-color: transparent;">黑卡VIP卡</view>
        <view style="font-size: 28rpx;font-weight: 400;color: #2A261A;">扣款日期：2026-05-01</view>
        <view style="display: flex;margin-top: 50rpx;align-items: self-end;">
          <view v-if="lst.length" style="font-size: 28rpx;width: 70%;">
            <p style="background: -webkit-linear-gradient(#2A261A, #141316);-webkit-background-clip: text;-webkit-text-fill-color: transparent;font-size: 48rpx;font-weight: 500;">¥{{lst[0].amount.toFixed(2)}} <span style="font-size: 24rpx;">{{lst[0].isBuy?'已扣款' : ''}}</span></p>
          </view>
          <view style="width: 164rpx;height: 58rpx;text-align: center;line-height: 58rpx;background-color: #FFEEE7;border-radius: 18rpx;margin-top: 40rpx;display: flex;justify-content: center;align-items: center;">
<!--            <checkbox-group activeColor="#fff"   @change='isAgree=!isAgree'  style="">-->
<!--              <checkbox disabled :checked="isAgree ? true : false" iconColor="#794007" iconSize="30" size="38" :name="1" shape="circle">{{isAgree?'已开通':'未开通'}}-->
<!--              </checkbox>-->
<!--            </checkbox-group>-->
          <!-- <view v-if="lst.length" style="font-size: 24rpx;width: 70%;">
            <p style="background: -webkit-linear-gradient(#FFEEE7, #F4936F);-webkit-background-clip: text;-webkit-text-fill-color: transparent;font-size: 36rpx;">¥{{lst[0].amount.toFixed(2)}} <span style="font-size: 24rpx;">{{lst[0].isBuy?'已扣款' : ''}}</span></p>
            <p style="background: -webkit-linear-gradient(#FFEEE7, #F4936F);-webkit-background-clip: text;-webkit-text-fill-color: transparent;">{{lst[0].buyDate}}</p>
          </view> -->
          <!-- <view style="width: 164rpx;height: 58rpx;text-align: center;line-height: 58rpx;background-color: #FFEEE7;border-radius: 18rpx;margin-top: 40rpx;display: flex;justify-content: center;align-items: center;">

            <checkbox-group activeColor="#fff"   @change='isAgree=!isAgree'  style="">
              <checkbox disabled checked="true" iconColor="#794007" iconSize="30" size="38" :name="1" shape="circle">{{isAgree?'已开通':'已开通'}}
              </checkbox>
            </checkbox-group>
          <!--   <view style="color: #210E0E;font-size: 24rpx;"></view>    -->
          </view>
          </view> -->
        </view>
      </view>
      <view style="background-color: #F4F4F4;padding: 0 30rpx;border-radius: 50rpx 50rpx 0 0;margin-top: 40rpx;">
          <view class="tab-wrap" style="padding-top: 60rpx;">
            <text @click="active=0" :class="active==0?'active':''">实物权益</text>
            <text @click="active=1" :class="active==1?'active':''">虚拟权益</text>
          </view>
          <view v-if="active === 0" class="sw-container">
              <image style="width: 100%;height: 220rpx;" mode="aspectFit" src="/static/img/quanshou/sw1.png"></image>
              <image style="width: 100%;height: 220rpx;" mode="aspectFit" src="/static/img/quanshou/sw2.png"></image>
              <image style="width: 100%;height: 220rpx;" mode="aspectFit" src="/static/img/quanshou/sw3.png"></image>
              <image style="width: 100%;height: 220rpx;" mode="aspectFit" src="/static/img/quanshou/sw4.png"></image>
              <image style="width: 100%;height: 220rpx;" mode="aspectFit" src="/static/img/quanshou/sw5.png"></image>
              <image style="width: 100%;height: 220rpx;" mode="aspectFit" src="/static/img/quanshou/sw6.png"></image>
              <image style="width: 100%;height: 220rpx;" mode="aspectFit" src="/static/img/quanshou/sw7.png"></image>
              <image style="width: 100%;height: 220rpx;" mode="aspectFit" src="/static/img/quanshou/sw8.png"></image>
              <button class="exchange-btn" v-if="active==0" @click="getTips">我要查询</button>
              <view class="note" style="padding-bottom: 50rpx;text-align: center;">页面展示为实物样例，实际以用户收到的商品为准</view>
          </view>
          <view v-if="active === 1">
              <image style="width: 100%;height: 538rpx;" mode="aspectFit" src="/static/img/quanshou/xn1.png"></image>
              <image style="width: 100%;height: 538rpx;" mode="aspectFit" src="/static/img/quanshou/xn2.png"></image>
              <image style="width: 100%;height: 342rpx;" mode="aspectFit" src="/static/img/quanshou/xn3.png"></image>
              <button class="exchange-btn" @click="toHuiyuan">我要领取</button>
              <view class="note" style="padding-bottom: 50rpx;text-align: center;">* 虚拟权益以实际兑换为准</view>
          </view>
      </view>
	  
      <!--   专享会员生活权益   -->
      <view>
      <!-- <view style="padding: 0 30rpx;">
        <view class="content-title" style="text-align: center;display: flex;align-items: center;justify-content: center;margin-top: 50rpx;margin-bottom: 40rpx;">
          <image style="width: 111rpx;height: 8rpx;" src="/static/img/qsLeft.png"></image>
          <view style="font-size: 36rpx;color: #FFEEE7;margin: 0 20rpx;">专享会员生活权益</view>
@@ -243,7 +269,7 @@
          <button @click="getTips" style="height: 100rpx;padding: 10rpx 0;color: #370606;border-radius: 50rpx;font-size: 34rpx;background-image: linear-gradient(to right, #FFEAE2, #FF6F55);">查询实物权益</button>
          <view style="color: #FFFFFF;font-size: 24rpx;padding-top: 20rpx;padding-bottom: 40rpx;">以上权益仅为预览展示，实际以商城发出为准</view>
        </view>
      </view>
      </view> -->
    </view>

    <!-- 会员购买 + 权益部分 -->
@@ -467,10 +493,17 @@
  padding: 26rpx;
  background: linear-gradient(271deg, #2A1601 0%, #3B2106 51%);
  border-radius: 200rpx;
  margin-top: 60rpx;
}
.note {
  font-size: 24rpx;
  color: #999;
  margin-top: 20rpx;
}

.sw-container {
    image {
        margin-top: 20rpx;
    }
}
</style>

 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;

 static/img/qsBg.png

 static/img/quanshou/sw1.png

 static/img/quanshou/sw2.png

 static/img/quanshou/sw3.png

 static/img/quanshou/sw4.png

 static/img/quanshou/sw5.png

 static/img/quanshou/sw6.png

 static/img/quanshou/sw7.png

 static/img/quanshou/sw8.png

 static/img/quanshou/xn1.png

 static/img/quanshou/xn2.png

 static/img/quanshou/xn3.png

 static/img/qyBg2.png