feat：星享购 收藏+购物车+订单样式优化

lin

2026-06-10 8ed3cfe7d04b542f131e98e37854031965441b33

 pages/quanshou/index.vue

@@ -56,7 +56,7 @@
    const _this = this;
    this.isAgree = uni.getStorageSync('boughtEquity')
    uni.request({
      url: _this.$webHost+'/api/v2/customer/getRyxBenefitsRecordList?phone='+uni.getStorageSync('phone')+'&appId='+uni.getStorageSync('ygxLogin').appId,
      url: _this.$webHost+'/api/v2/customer/getRyxBenefitsRecordList?phone='+_this.$util.getUserInfo().phone+'&appId='+uni.getStorageSync('ygxLogin').appId,
      success: function (res) {
        if(res.data.code==200){
          _this.lst = res.data.data;
@@ -99,14 +99,18 @@
    toHuiyuan(){
      const _this = this;
      uni.request({
        url: _this.$webHost+'/api/v2/memberEquity/getUrlByShop/'+uni.getStorageSync('phone'),
        url: _this.$webHost+'/api/v2/memberEquity/getUrlByShop/'+_this.$util.getUserInfo().phone,
      data:{
        customerId: uni.getStorageSync('ygxLogin').customerId,
        appId: uni.getStorageSync('ygxLogin').appId
      },
        success: function (res) {
          if(res.data.code==200){
            uni.request( {
              url: _this.$webHost+'/api/v2/memberEquity/clickUrlByShop/'+uni.getStorageSync('phone'),
              url: _this.$webHost+'/api/v2/memberEquity/clickUrlByShop/'+_this.$util.getUserInfo().phone,
            })
            uni.navigateTo( {
              url: '/pages/users/web_page/index?webUel=' + encodeURIComponent(res.data.data.url)
            uni.navigateTo({
              url: '/pages/web/toUrl?webUel=' + encodeURIComponent(res.data.data.url)
            })
          } else {
            _this.tips = res.data.data || res.data.msg;
@@ -124,7 +128,7 @@
    getTips(){
      const _this = this;
      uni.request({
        url: _this.$webHost+'/api/v2/shop/findExpressNo?phone='+uni.getStorageSync('phone'),
        url: _this.$webHost+'/api/v2/shop/findExpressNo?phone='+_this.$util.getUserInfo().phone,
        success: function (res) {
          if(res.data.code==200){
            _this.tips = res.data.data;
@@ -144,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"-->
@@ -182,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 v-if="lst.length" style="font-size: 28rpx;font-weight: 400;color: #2A261A;">扣款日期：{{lst[0].buyDate}}</view>
        <view v-if="lst.length" 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;margin-top: 20rpx;" 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>
@@ -239,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>

    <!-- 会员购买 + 权益部分 -->
@@ -284,29 +315,29 @@

    <uni-popup type="center" ref="comment" >
      <view style="border-radius: 48rpx;padding: 28rpx 0;width: 538rpx;background: #FFFFFF;padding-top: 0;">
        <view style="background-image: linear-gradient(to bottom, #FFB8B8, #FFFBFC);width: 100%;height: 200rpx;border-radius: 48rpx;">
          <view style="text-align: center;padding-top: 30rpx;" >
        <view style="border-radius: 48rpx 48rpx 0 0;background: url('/static/img/shiwuBg.png') no-repeat top center; background-size: 100%;width: 100%;height: 300rpx;">
          <!-- <view style="text-align: center;padding-top: 30rpx;" >
            <image src="/static/img/yifa.png" style="width: 370rpx;height: 274rpx;"></image>
          </view>
          </view> -->
        </view>
        <view style="font-size: 32rpx;font-weight: 600;color: #333333;text-align: center;margin-top: 134rpx;margin-bottom: 80rpx;padding: 0 28rpx;">
        <view style="font-size: 32rpx;font-weight: 600;color: #333333;text-align: center;margin-top: 60rpx;margin-bottom: 80rpx;padding: 0 28rpx;">
          <view>{{ tips }}</view>
        </view>
        <view @click="$refs.comment.close()" style="font-weight: 500;font-size: 32rpx;color: #ffffff;text-align: center;padding: 24rpx 28rpx;border-top: 2rpx solid #EEEEEE;background-color: #EE2626;margin-left: 30rpx;margin-right: 30rpx;border-radius: 56rpx">好的</view>
        <view @click="$refs.comment.close()" style="font-weight: 500;font-size: 32rpx;color: #ffffff;text-align: center;padding: 24rpx 28rpx;border-top: 2rpx solid #EEEEEE;background-color: #4766FE;margin-left: 30rpx;margin-right: 30rpx;border-radius: 56rpx">好的</view>
      </view>
    </uni-popup>

    <uni-popup type="center" ref="life" >
      <view style="border-radius: 48rpx;padding: 28rpx 0;width: 538rpx;background: #FFFFFF;padding-top: 0;">
        <view style="background-image: linear-gradient(to bottom, #FFB8B8, #FFFBFC);width: 100%;height: 200rpx;border-radius: 48rpx;">
          <view style="text-align: center;padding-top: 30rpx;">
        <view style="background: url('/static/img/xuniBg.png') no-repeat top center; background-size: 100%;width: 100%;height: 300rpx;border-radius: 48rpx 48rpx 0 0;">
          <!-- <view style="text-align: center;padding-top: 30rpx;">
            <image src="/static/img/qsLifeIcon.png" style="width: 370rpx;height: 238rpx;"></image>
          </view>
          </view> -->
        </view>
        <view style="font-size: 32rpx;font-weight: 600;color: #333333;text-align: center;margin-top: 134rpx;margin-bottom: 80rpx;padding: 0 28rpx;">
        <view style="font-size: 32rpx;font-weight: 600;color: #333333;text-align: center;margin-top: 60rpx;margin-bottom: 80rpx;padding: 0 28rpx;">
          <view>{{ tips }}</view>
        </view>
        <view @click="$refs.life.close()" style="font-weight: 500;font-size: 32rpx;color: #ffffff;text-align: center;padding: 24rpx 28rpx;border-top: 2rpx solid #EEEEEE;background-color: #EE2626;margin-left: 30rpx;margin-right: 30rpx;border-radius: 56rpx">好的</view>
        <view @click="$refs.life.close()" style="font-weight: 500;font-size: 32rpx;color: #ffffff;text-align: center;padding: 24rpx 28rpx;border-top: 2rpx solid #EEEEEE;background-color: #4766FE;margin-left: 30rpx;margin-right: 30rpx;border-radius: 56rpx">好的</view>
      </view>
    </uni-popup>
  </view>
@@ -463,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>