feat：星享购 绑卡+权收

lin

2026-05-26 7b1e4d3539ad229b5766bd93093e5a32f4d65d8c

 pages/quanyi/index.vue

@@ -63,6 +63,7 @@

  data() {
    return  {
      active: 0,
      ygxLogin:{},
      protocolChecked: [0],
      showTextBox: false,
@@ -236,6 +237,34 @@
        <text style="display: inline;font-size: 24rpx;color: #4766FE" @click="link(`/pages/web/xieyi?code=${memberPeriodConfigInfo.protocolCode}&title=${memberPeriodConfigInfo.protocolName}`)">{{memberPeriodConfigInfo.protocolName}}</text>
      </view>


     <view style="background-color: #ffffff;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  class="tips" style="color: #666666;margin-top: 24rpx;margin-bottom: 20rpx;font-size: 26rpx">*会员服务一经开通不支持取消、退款，会员服务到期前，用户可以选择续订或取消续费。</view>-->
      

@@ -329,4 +358,52 @@
  flex-direction: row;
}

/* tab */
.tab-wrap {
  display: flex;
  justify-content: space-evenly;
  margin-bottom: 50rpx;
}
.tab-wrap text {
  font-weight: 600;
  font-size: 36rpx;
  color: #666;
}
.active {
  color: #333 !important;
  position: relative;
  &::after {
    content: "";
    display: block;
    width: 50rpx;
    height: 8rpx;
    background: linear-gradient(271deg, #FFE4A1 0%, #FFC57A 51%, #FFE1B9 100%);
    border-radius: 32rpx;
    position: absolute;
    bottom: -20rpx;
    left: calc(50% - 25rpx);
  }
}

/* 按钮 */
.exchange-btn {
  font-weight: 600;
  font-size: 36rpx;
  color: #FFD39A;
  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>