UI：星享购 绑卡+权收

lin

2026-05-26 5ee4ff56beb980b460327e4c6ef4283d299d4a21

 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,66 @@
<!--      </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>
           <image style="width: 100%;height: 712rpx;" mode="aspectFit" src="/static/img/quanshou/xn4.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 +270,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 +494,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>