Ui

yfx

2026-03-09 01b96cfc1cecb00022d08a2b8e5c49ad856d02e7

Ui

 pages/quanshou/components/heijing.vue

New file
@@ -0,0 +1,84 @@
<script>
export default {
  name: "heijing"
}
</script>

<template>

  <view>
    <view class="li-bg" style="padding-bottom: 6rpx;">
      <view class="linear-gradient" style="padding: 15rpx 28rpx;font-weight: 600;font-size: 32rpx;font-size: 32rpx;color: #C79372;display: flex">
        <view style="display: flex;flex-direction: column;justify-content: center">5折购视频会员</view>
        <view style="color: #2E2729;background: #F1CFB4;border-radius: 8rpx 8rpx 8rpx 8rpx;padding: 8rpx 20rpx;margin-left: 20rpx;font-size: 24rpx;">4选1 | x12次</view></view>
      <view style="background: #FFFFFF;border-radius: 24rpx ;padding: 30rpx 20rpx;margin: 6rpx;display: flex;justify-content: space-between">
        <view style="text-align: center;flex: 1" ><image src="/static/imgs/quanshou/Y1.png" style="width: 108rpx;height: 108rpx;"></image>
          <view style="color: #121212;font-size: 20rpx;">优酷视频</view>
          <view style="font-size: 20rpx;color: #666666;">30元/月</view>
        </view>
        <view style="text-align: center;flex: 1" ><image src="/static/imgs/quanshou/Y2.png" style="width: 108rpx;height: 108rpx;"></image><view style="color: #121212;font-size: 20rpx;">腾讯视频</view>
          <view style="font-size: 20rpx;color: #666666;">30元/月</view></view>
        <view style="text-align: center;flex: 1" ><image src="/static/imgs/quanshou/Y3.png" style="width: 108rpx;height: 108rpx;"></image><view style="color: #121212;font-size: 20rpx;">搜狐视频</view>
          <view style="font-size: 20rpx;color: #666666;">30元/月</view></view>
        <view style="text-align: center;flex: 1" ><image src="/static/imgs/quanshou/Y4.png" style="width: 108rpx;height: 108rpx;"></image><view style="color: #121212;font-size: 20rpx;">芒果TV</view>
          <view style="font-size: 20rpx;color: #666666;">30元/月</view></view>
      </view>
    </view>


    <view class="li-bg" style="padding-bottom: 6rpx;">
      <view class="linear-gradient" style="padding: 15rpx 28rpx;font-weight: 600;font-size: 32rpx;font-size: 32rpx;color: #C79372;display: flex">
        <view style="display: flex;flex-direction: column;justify-content: center">音频会员 5折各1次</view>
        <view style="color: #2E2729;background: #F1CFB4;border-radius: 8rpx 8rpx 8rpx 8rpx;padding: 8rpx 20rpx;margin-left: 20rpx;font-size: 24rpx;">6选1 | x12次</view></view>
      <view style="background: #FFFFFF;border-radius: 24rpx ;padding: 30rpx 20rpx;margin: 6rpx;;flex-wrap: wrap">


        <view style="text-align: center;display:inline-block;flex: 1;width: 25%;margin-bottom: 20rpx;" ><image src="/static/imgs/quanshou/TY1.png" style="width: 108rpx;height: 108rpx;"></image><view style="color: #121212;font-size: 20rpx;">喜马拉雅</view><view style="font-size: 20rpx;color: #666666;">25元/月</view></view>
        <view style="text-align: center;display:inline-block;flex: 1;width: 25%;margin-bottom: 20rpx;" ><image src="/static/imgs/quanshou/TY2.png" style="width: 108rpx;height: 108rpx;"></image><view style="color: #121212;font-size: 20rpx;">网易云</view><view style="font-size: 20rpx;color: #666666;">18元/月</view></view>
        <view style="text-align: center;display:inline-block;flex: 1;width: 25%;margin-bottom: 20rpx;" ><image src="/static/imgs/quanshou/TY3.png" style="width: 108rpx;height: 108rpx;"></image><view style="color: #121212;font-size: 20rpx;">QQ音乐</view><view style="font-size: 20rpx;color: #666666;">18元/月</view></view>
        <view style="text-align: center;display:inline-block;flex: 1;width: 25%;margin-bottom: 20rpx;" ><image src="/static/imgs/quanshou/TY5.png" style="width: 108rpx;height: 108rpx;"></image><view style="color: #121212;font-size: 20rpx;">酷狗音乐</view><view style="font-size: 20rpx;color: #666666;">18元/月</view></view>

        <view style="text-align: center;display:inline-block;flex: 1;width: 25%;margin-bottom: 0rpx;" ><image src="/static/imgs/quanshou/TY4.png" style="width: 108rpx;height: 108rpx;"></image><view style="color: #121212;font-size: 20rpx;">蜻蜓FM</view><view style="font-size: 20rpx;color: #666666;">25元/月</view></view>
        <view style="text-align: center;display:inline-block;flex: 1;width: 25%;margin-bottom: 0rpx;" ><image src="/static/imgs/quanshou/TY99.png" style="width: 108rpx;height: 108rpx;"></image><view style="color: #121212;font-size: 20rpx;">懒人听书</view><view style="font-size: 20rpx;color: #666666;">15/月</view></view>

      </view>
    </view>



    <view class="li-bg" style="padding-bottom: 6rpx;">
      <view class="linear-gradient" style="padding: 15rpx 28rpx;font-weight: 600;font-size: 32rpx;font-size: 32rpx;color: #C79372;display: flex">
        <view style="display: flex;flex-direction: column;justify-content: center">5折购生活出行</view>
        <view style="color: #2E2729;background: #F1CFB4;border-radius: 8rpx 8rpx 8rpx 8rpx;padding: 8rpx 20rpx;margin-left: 20rpx;font-size: 24rpx;">3选1 | x12次</view></view>
      <view style="background: #FFFFFF;border-radius: 24rpx ;padding: 30rpx 20rpx;margin: 6rpx;display: flex;justify-content: space-between">

        <image src="/static/imgs/quanshou/ZQ1.png" style="height: 148rpx;width: 200rpx; margin-bottom: 20rpx;"></image>
        <image src="/static/imgs/quanshou/ZQ2.png" style="height: 148rpx;width: 200rpx; margin-bottom: 20rpx;"></image>
        <image src="/static/imgs/quanshou/ZQ3.png" style="height: 148rpx;width: 200rpx; margin-bottom: 20rpx;"></image>
      </view>
    </view>


    <view class="li-bg" style="padding-bottom: 6rpx;">
      <view class="linear-gradient" style="padding: 15rpx 28rpx;font-weight: 600;font-size: 32rpx;font-size: 32rpx;color: #C79372;display: flex">
        <view style="display: flex;flex-direction: column;justify-content: center">零食大礼包</view>
        <view style="color: #2E2729;background: #F1CFB4;border-radius: 8rpx 8rpx 8rpx 8rpx;padding: 8rpx 20rpx;margin-left: 20rpx;font-size: 24rpx;">可领3次</view></view>
      <view style="background: #FFFFFF;border-radius: 24rpx ;padding: 30rpx 20rpx;margin: 6rpx;display: flex;justify-content: space-between">

        <image src="/static/imgs/quanshou/LS1.png" style="height: 140rpx;width:100%; margin-bottom: 20rpx;"></image>
      </view>
    </view>

  </view>
</template>

<style scoped lang="scss">
.li-bg{
  background: linear-gradient( 138deg, #4D4342 0%, #231D21 68%, #4A4242 100%);
  border-radius: 24rpx 24rpx 24rpx 24rpx;
  margin-top: 20rpx;
}
.gradient-text {
  color: #C79372;
}
</style>

 pages/quanshou/components/lanyaerji.vue

New file
@@ -0,0 +1,51 @@
<script>
export default {
  name: "lanyaerji",
  data() {
    return {
      ls:[
        {title:"康倍星助行器", synopsis:"老人助力行走器 可推可坐", img:"/static/imgs/quanshou/SW1.png"},
        {title:"EMBERTON III", synopsis:"无线蓝牙家用户外防尘防水长续航小音响", img:"/static/imgs/quanshou/SW2.png"},
        {title:"哈曼卡顿音响", synopsis:"蓝牙音箱 环绕立体声下沉式低音炮", img:"/static/imgs/quanshou/SW3.png"},
        {title:"吉普自行车", synopsis:"山地车成人越野学生代步", img:"/static/imgs/quanshou/SW4.png"},
        {title:"富迪堡葡萄酒", synopsis:"虎爵大师干红葡萄酒", img:"/static/imgs/quanshou/SW5.png"},
        {title:"浴百家浴室柜", synopsis:"陶瓷一体盆柜洗手盆柜组合洗漱台", img:"/static/imgs/quanshou/SW6.png"},
        {title:"小牧卫浴智能马桶", synopsis:"马桶座圈加热离座冲停零压劲冲", img:"/static/imgs/quanshou/SW7.png"},
        {title:"蓝牙耳机", synopsis:"无线降噪IPX4防水", img:"/static/imgs/quanshou/SW8.png"},
      ]
    }
  },
}
</script>

<template>
  <view>

    <view style="display: flex;flex-wrap: wrap;justify-content: space-between;">

      <view v-for="i in ls" :key="i.title" style="width: calc(50% - 14rpx);background: #F9F9F9;margin-bottom: 28rpx;position: relative;border-radius: 24rpx">
        <image style="height: 359.23rpx;width: 100%;border-radius: 24rpx 24rpx 0 0 " :src="i.img"></image>
        <image style="width: 68rpx;height: 72rpx;position: absolute;right: 22rpx;" src="/static/imgs/quanshou/SWLL.png"></image>
        <view style="padding: 10rpx 20rpx 20rpx 20rpx;">
          <view style="font-weight: 600;color: #333333;font-size: 32rpx;">{{ i.title }}</view>
          <view class="ellipsis">{{ i.synopsis }}</view>
        </view>

      </view>


    </view>


  </view>
</template>

<style scoped lang="scss">
.ellipsis {
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  font-size: 24rpx;color: #666666;margin-top: 10rpx;
}

</style>

 pages/quanshou/components/list.vue

New file
@@ -0,0 +1,73 @@
<script>
export default {
  name: "heijing"
}
</script>

<template>

  <view>
    <view class="li-bg" style="padding-bottom: 6rpx;">
      <view class="ttis" style="padding: 15rpx 28rpx;font-weight: 600;font-size: 32rpx;font-size: 32rpx;">影音会员 免费4选1</view>
      <view style="background: #FFFFFF;border-radius: 24rpx ;padding: 20rpx 20rpx;margin: 6rpx;display: flex;justify-content: space-between">
        <view style="text-align: center;flex: 1" ><image src="/static/imgs/quanshou/Y1.png" style="width: 108rpx;height: 108rpx;"></image><view style="color: #121212;font-size: 20rpx;">优酷视频</view></view>
        <view style="text-align: center;flex: 1" ><image src="/static/imgs/quanshou/Y2.png" style="width: 108rpx;height: 108rpx;"></image><view style="color: #121212;font-size: 20rpx;">腾讯视频</view></view>
        <view style="text-align: center;flex: 1" ><image src="/static/imgs/quanshou/Y3.png" style="width: 108rpx;height: 108rpx;"></image><view style="color: #121212;font-size: 20rpx;">搜狐视频</view></view>
        <view style="text-align: center;flex: 1" ><image src="/static/imgs/quanshou/Y4.png" style="width: 108rpx;height: 108rpx;"></image><view style="color: #121212;font-size: 20rpx;">芒果TV</view></view>
      </view>
    </view>
    <view class="li-bg" style="padding-bottom: 6rpx;">
      <view class="ttis" style="padding: 15rpx 28rpx;font-weight: 600;font-size: 32rpx;font-size: 32rpx;">音频会员 5折各1次</view>
      <view style="background: #FFFFFF;border-radius: 24rpx ;padding: 30rpx 20rpx;margin: 6rpx;display: flex;justify-content: space-between">
        <view style="text-align: center;flex: 1" ><image src="/static/imgs/quanshou/TY1.png" style="width: 108rpx;height: 108rpx;"></image><view style="color: #121212;font-size: 20rpx;">喜马拉雅</view></view>
        <view style="text-align: center;flex: 1" ><image src="/static/imgs/quanshou/TY2.png" style="width: 108rpx;height: 108rpx;"></image><view style="color: #121212;font-size: 20rpx;">网易云</view></view>
        <view style="text-align: center;flex: 1" ><image src="/static/imgs/quanshou/TY3.png" style="width: 108rpx;height: 108rpx;"></image><view style="color: #121212;font-size: 20rpx;">QQ音乐</view></view>
        <view style="text-align: center;flex: 1" ><image src="/static/imgs/quanshou/TY4.png" style="width: 108rpx;height: 108rpx;"></image><view style="color: #121212;font-size: 20rpx;">蜻蜓FM</view></view>
        <view style="text-align: center;flex: 1" ><image src="/static/imgs/quanshou/TY5.png" style="width: 108rpx;height: 108rpx;"></image><view style="color: #121212;font-size: 20rpx;">酷狗音乐</view></view>
      </view>
    </view>

    <view class="li-bg" style="padding-bottom: 6rpx;">
      <view class="ttis" style="padding: 15rpx 28rpx;font-weight: 600;font-size: 32rpx;font-size: 32rpx;">茶饮/外卖券 5折起各1次</view>
      <view style="background: #FFFFFF;border-radius: 24rpx ;padding: 20rpx 20rpx;margin: 6rpx;display: flex;justify-content: space-between">

        <image src="/static/imgs/quanshou/CY1.png" style="height: 146rpx;width: 120rpx;"></image>
        <image src="/static/imgs/quanshou/CY2.png" style="height: 146rpx;width: 120rpx;"></image>
        <image src="/static/imgs/quanshou/CY3.png" style="height: 146rpx;width: 120rpx;"></image>
        <image src="/static/imgs/quanshou/CY4.png" style="height: 146rpx;width: 120rpx;"></image>
        <image src="/static/imgs/quanshou/CY5.png" style="height: 146rpx;width: 120rpx;"></image>
      </view>
    </view>


    <view class="li-bg" style="padding-bottom: 6rpx;">
      <view class="ttis" style="padding: 15rpx 28rpx;font-weight: 600;font-size: 32rpx;font-size: 32rpx;">打车出行 6折起各1次</view>
      <view style="background: #FFFFFF;border-radius: 24rpx ;padding: 30rpx 20rpx;margin: 6rpx;display: flex;justify-content: space-between">

        <image src="/static/imgs/quanshou/DC1.png" style="height: 146rpx;width: 200rpx;"></image>
        <image src="/static/imgs/quanshou/DC2.png" style="height: 146rpx;width: 200rpx;"></image>
        <image src="/static/imgs/quanshou/DC3.png" style="height: 146rpx;width: 200rpx;"></image>
      </view>
    </view>
    <view class="li-bg" style="padding-bottom: 6rpx;">
      <view class="ttis" style="padding: 15rpx 28rpx;font-weight: 600;font-size: 32rpx;font-size: 32rpx;">乐享生活 部分免费各1次</view>
      <view style="background: #FFFFFF;border-radius: 24rpx ;padding: 20rpx 20rpx 0 20rpx;margin: 6rpx;display: flex;justify-content: space-between;flex-wrap: wrap">

        <image src="/static/imgs/quanshou/LX1.png" style="height: 96rpx;width: 200rpx; margin-bottom: 20rpx;"></image>
        <image src="/static/imgs/quanshou/LX2.png" style="height: 96rpx;width: 200rpx; margin-bottom: 20rpx;"></image>
        <image src="/static/imgs/quanshou/LX3.png" style="height: 96rpx;width: 200rpx; margin-bottom: 20rpx;"></image>
        <image src="/static/imgs/quanshou/LX4.png" style="height: 96rpx;width: 200rpx; margin-bottom: 20rpx;"></image>
        <image src="/static/imgs/quanshou/LX5.png" style="height: 96rpx;width: 200rpx; margin-bottom: 20rpx;"></image>
        <image src="/static/imgs/quanshou/LX6.png" style="height: 96rpx;width: 200rpx; margin-bottom: 20rpx;"></image>
      </view>
    </view>
  </view>
</template>

<style scoped lang="scss">
.li-bg{
  background: linear-gradient( 138deg, #CED5E8 0%, #C9D5DF 68%, #B8D2F4 100%);
  border-radius: 24rpx 24rpx 24rpx 24rpx;
  margin-top: 20rpx;
}
</style>

 pages/quanshou/components/tehuichongzhi.vue

New file
@@ -0,0 +1,255 @@
<script>
export default  {
  name: "tehuichongzhi",
  props: {
    VIP: {
      type: Number,
      default: 1
    }
  },
}
</script>

<template>
  <view>


    <view v-if="VIP==1">
      <view style="padding: 0 40rpx 0rpx 40rpx;">
        <view style="text-align: center;color: #333333;font-size: 32rpx;font-weight: 600;margin-bottom: 34rpx;">
          <image style="width: 22rpx;height: 22rpx;margin-right: 58rpx;" src="/static/imgs/quanshou/Star.png"></image>
          音频会员五选一
          <image style="width: 22rpx;height: 22rpx;margin-left: 58rpx;" src="/static/imgs/quanshou/Star.png"></image>
        </view>
        <view style="display: flex;">
          <view class="w25">
            <image style="width: 108rpx;height: 108rpx;" src="/static/imgs/quanshou/Y51.png"></image>
            <view style="text-align: center ;color: #121212;font-size: 20rpx;">喜马拉雅</view>
          </view>
          <view class="w25">
            <image style="width: 108rpx;height: 108rpx;" src="/static/imgs/quanshou/Y52.png"></image>
            <view style="text-align: center ;color: #121212;font-size: 20rpx;">网易云</view>
          </view>
          <view class="w25">
            <image style="width: 108rpx;height: 108rpx;" src="/static/imgs/quanshou/Y53.png"></image>
            <view style="text-align: center ;color: #121212;font-size: 20rpx;">QQ音乐</view>
          </view>
          <view class="w25">
            <image style="width: 108rpx;height: 108rpx;" src="/static/imgs/quanshou/Y54.png"></image>
            <view style="text-align: center ;color: #121212;font-size: 20rpx;">蜻蜓FM</view>
          </view>
          <view class="w25">
            <image style="width: 108rpx;height: 108rpx;" src="/static/imgs/quanshou/Y55.png"></image>
            <view style="text-align: center ;color: #121212;font-size: 20rpx;">酷狗音乐</view>
          </view>
        </view>
      </view>

      <view style="height: 10rpx;background: #F7F7F7;"></view>


      <view style="padding: 40rpx;padding-bottom: 20rpx;">
        <view style="text-align: center;color: #333333;font-size: 32rpx;font-weight: 600;margin-bottom: 34rpx;">
          <image style="width: 22rpx;height: 22rpx;margin-right: 58rpx;" src="/static/imgs/quanshou/Star.png"></image>
          视频会员八选一
          <image style="width: 22rpx;height: 22rpx;margin-left: 58rpx;" src="/static/imgs/quanshou/Star.png"></image>
        </view>
        <view style="display: flex;flex-wrap: wrap">
          <view class="w25">
            <image style="width: 108rpx;height: 108rpx;" src="/static/imgs/quanshou/S81.png"></image>
            <view style="text-align: center ;color: #121212;font-size: 20rpx;">优酷</view>
          </view>
          <view class="w25">
            <image style="width: 108rpx;height: 108rpx;" src="/static/imgs/quanshou/S82.png"></image>
            <view style="text-align: center ;color: #121212;font-size: 20rpx;">腾讯视频</view>
          </view>
          <view class="w25">
            <image style="width: 108rpx;height: 108rpx;" src="/static/imgs/quanshou/S83.png"></image>
            <view style="text-align: center ;color: #121212;font-size: 20rpx;">搜狐视频</view>
          </view>
          <view class="w25">
            <image style="width: 108rpx;height: 108rpx;" src="/static/imgs/quanshou/S84.png"></image>
            <view style="text-align: center ;color: #121212;font-size: 20rpx;">芒果TV</view>
          </view>
          <view class="w25">
            <image style="width: 108rpx;height: 108rpx;" src="/static/imgs/quanshou/S85.png"></image>
            <view style="text-align: center ;color: #121212;font-size: 20rpx;">爱奇艺</view>
          </view>
          <view class="w25">
            <image style="width: 108rpx;height: 108rpx;" src="/static/imgs/quanshou/S86.png"></image>
            <view style="text-align: center ;color: #121212;font-size: 20rpx;">Bilibili</view>
          </view>
          <view class="w25">
            <image style="width: 108rpx;height: 108rpx;" src="/static/imgs/quanshou/S87.png"></image>
            <view style="text-align: center ;color: #121212;font-size: 20rpx;">斗鱼直播</view>
          </view>
          <view class="w25">
            <image style="width: 108rpx;height: 108rpx;" src="/static/imgs/quanshou/S89.png"></image>
            <view style="text-align: center ;color: #121212;font-size: 20rpx;">虎牙直播</view>
          </view>
        </view>
      </view>
      <view style="height: 10rpx;background: #F7F7F7;"></view>
      <view style="padding: 40rpx;padding-bottom: 20rpx;">
        <view style="text-align: center;color: #333333;font-size: 32rpx;font-weight: 600;margin-bottom: 34rpx;">
          <image style="width: 22rpx;height: 22rpx;margin-right: 58rpx;" src="/static/imgs/quanshou/Star.png"></image>
          外卖会员四选一
          <image style="width: 22rpx;height: 22rpx;margin-left: 58rpx;" src="/static/imgs/quanshou/Star.png"></image>
        </view>
        <view style="display: flex;flex-wrap: wrap">
          <view class="w25">
            <image style="width: 108rpx;height: 108rpx;" src="/static/imgs/quanshou/W41.png"></image>
            <view style="text-align: center ;color: #121212;font-size: 20rpx;">美团</view>
          </view>
          <view class="w25">
            <image style="width: 108rpx;height: 108rpx;" src="/static/imgs/quanshou/W42.png"></image>
            <view style="text-align: center ;color: #121212;font-size: 20rpx;">饿了么</view>
          </view>
          <view class="w25">
            <image style="width: 108rpx;height: 108rpx;" src="/static/imgs/quanshou/W43.png"></image>
            <view style="text-align: center ;color: #121212;font-size: 20rpx;">京东外卖</view>
          </view>
          <view class="w25">
            <image style="width: 108rpx;height: 108rpx;" src="/static/imgs/quanshou/W44.png"></image>
            <view style="text-align: center ;color: #121212;font-size: 20rpx;">盒马</view>
          </view>

        </view>
      </view>
      <view style="height: 10rpx;background: #F7F7F7;"></view>

      <view style="padding: 40rpx;padding-bottom:20rpx;">
        <view style="text-align: center;color: #333333;font-size: 32rpx;font-weight: 600;margin-bottom: 34rpx;">
          <image style="width: 22rpx;height: 22rpx;margin-right: 58rpx;" src="/static/imgs/quanshou/Star.png"></image>
          生活交通代金券
          <image style="width: 22rpx;height: 22rpx;margin-left: 58rpx;" src="/static/imgs/quanshou/Star.png"></image>
        </view>
        <view style="display: flex;flex-wrap: wrap">
          <view class="w33"><image style="width: 200rpx;height: 148rpx;" src="/static/imgs/quanshou/SH1.png"></image></view>
          <view class="w33"><image style="width: 200rpx;height: 148rpx;" src="/static/imgs/quanshou/SH2.png"></image></view>
          <view class="w33"><image style="width: 200rpx;height: 148rpx;" src="/static/imgs/quanshou/SH3.png"></image></view>
          <view class="w33"><image style="width: 200rpx;height: 148rpx;" src="/static/imgs/quanshou/SH4.png"></image></view>
          <view class="w33"><image style="width: 200rpx;height: 148rpx;" src="/static/imgs/quanshou/SH5.png"></image></view>
          <view class="w33"><image style="width: 200rpx;height: 148rpx;" src="/static/imgs/quanshou/SH6.png"></image></view>
          <view class="w33" style="margin-bottom: 0;"><image style="width: 200rpx;height: 148rpx;" src="/static/imgs/quanshou/SH7.png"></image></view>
          <view class="w33" style="margin-bottom: 0;"><image style="width: 200rpx;height: 148rpx;" src="/static/imgs/quanshou/SH8.png"></image></view>
          <view class="w33" style="margin-bottom: 0;"><image style="width: 200rpx;height: 148rpx;" src="/static/imgs/quanshou/SH9.png"></image></view>
        </view>
      </view>
    </view>


    <view v-if="VIP==2">
      <view style="padding: 0 40rpx 0rpx 40rpx;">
        <view style="text-align: center;color: #333333;font-size: 32rpx;font-weight: 600;margin-bottom: 34rpx;">
          <image style="width: 22rpx;height: 22rpx;margin-right: 58rpx;" src="/static/imgs/quanshou/Star.png"></image>
          粉钻VIP特权
          <image style="width: 22rpx;height: 22rpx;margin-left: 58rpx;" src="/static/imgs/quanshou/Star.png"></image>
        </view>
        <view style="display: flex;justify-content: space-between;flex-wrap: wrap">
          <view class="w50">
            <view><image style="width: 100rpx;height: 100rpx;" src="/static/imgs/quanshou/FZV1.png"></image></view>
            <view style="margin-left: 10rpx;display: flex;flex-direction: column;justify-content: center ;">
              <view style="font-size: 28rpx;color: #5B320D;font-weight: 600;min-height: 40rpx">优酷季卡</view>
              <view style="font-size: 24rpx;color: #5B320D;">价值¥198</view>
            </view>
          </view>
          <view class="w50">
            <view><image style="width: 100rpx;height: 100rpx;" src="/static/imgs/quanshou/FZV2.png"></image></view>
            <view style="margin-left: 10rpx;display: flex;flex-direction: column;justify-content: center ;">
              <view style="font-size: 28rpx;color: #5B320D;font-weight: 600;min-height: 40rpx">爱奇艺季卡</view>
              <view style="font-size: 24rpx;color: #5B320D;">价值¥88</view>
            </view>
          </view>
          <view class="w50">
            <view><image style="width: 100rpx;height: 100rpx;" src="/static/imgs/quanshou/FZV3.png"></image></view>
            <view style="margin-left: 10rpx;display: flex;flex-direction: column;justify-content: center ;">
              <view style="font-size: 28rpx;color: #5B320D;font-weight: 600;min-height: 40rpx">QQ音乐季卡</view>
              <view style="font-size: 24rpx;color: #5B320D;">价值¥198</view>
            </view>
          </view>
          <view class="w50">
            <view><image style="width: 100rpx;height: 100rpx;" src="/static/imgs/quanshou/FZV4.png"></image></view>
            <view style="margin-left: 10rpx;display: flex;flex-direction: column;justify-content: center ;">
              <view style="font-size: 28rpx;color: #5B320D;font-weight: 600;min-height: 40rpx">黑胶季卡</view>
              <view style="font-size: 24rpx;color: #5B320D;">价值¥145</view>
            </view>
          </view>
          <view class="w50">
            <view><image style="width: 100rpx;height: 100rpx;" src="/static/imgs/quanshou/FZV5.png"></image></view>
            <view style="margin-left: 10rpx;display: flex;flex-direction: column;justify-content: center ;">
              <view style="font-size: 28rpx;color: #5B320D;font-weight: 600;min-height: 40rpx">芒果TV季卡</view>
              <view style="font-size: 24rpx;color: #5B320D;">价值¥99</view>
            </view>
          </view>
          <view class="w50">
            <view><image style="width: 100rpx;height: 100rpx;" src="/static/imgs/quanshou/FZV6.png"></image></view>
            <view style="margin-left: 10rpx;display: flex;flex-direction: column;justify-content: center ;">
              <view style="font-size: 28rpx;color: #5B320D;font-weight: 600;min-height: 40rpx">得到季卡</view>
              <view style="font-size: 24rpx;color: #5B320D;">价值¥1168</view>
            </view>
          </view>
        </view>
      </view>
      <view style="height: 10rpx;background: #F7F7F7;"></view>
      <view style="padding: 40rpx;padding-bottom: 20rpx;">
        <view style="text-align: center;color: #333333;font-size: 32rpx;font-weight: 600;margin-bottom: 34rpx;">
          <image style="width: 22rpx;height: 22rpx;margin-right: 58rpx;" src="/static/imgs/quanshou/Star.png"></image>
          红包免费领
          <image style="width: 22rpx;height: 22rpx;margin-left: 58rpx;" src="/static/imgs/quanshou/Star.png"></image>
        </view>
        <view style="display: flex;flex-wrap: wrap">
          <view class="w33" style="margin-bottom: 20rpx;"><image style="width: 208rpx;height: 178rpx;" src="/static/imgs/quanshou/KB1.png"></image></view>
          <view class="w33" style="margin-bottom: 20rpx;"><image style="width: 208rpx;height: 178rpx;" src="/static/imgs/quanshou/KB2.png"></image></view>
          <view class="w33" style="margin-bottom: 20rpx;"><image style="width: 208rpx;height: 178rpx;" src="/static/imgs/quanshou/KB3.png"></image></view>
          <view class="w33" style="margin-bottom: 20rpx;"><image style="width: 208rpx;height: 178rpx;" src="/static/imgs/quanshou/KB4.png"></image></view>
          <view class="w33" style="margin-bottom: 20rpx;"><image style="width: 208rpx;height: 178rpx;" src="/static/imgs/quanshou/KB5.png"></image></view>
          <view class="w33" style="margin-bottom: 20rpx;"><image style="width: 208rpx;height: 178rpx;" src="/static/imgs/quanshou/KB6.png"></image></view>
        </view>
      </view>
      <view style="height: 10rpx;background: #F7F7F7;"></view>

      <view style="padding: 40rpx;padding-bottom: 0rpx;">
        <view style="text-align: center;color: #333333;font-size: 32rpx;font-weight: 600;margin-bottom: 34rpx;">
          <image style="width: 22rpx;height: 22rpx;margin-right: 58rpx;" src="/static/imgs/quanshou/Star.png"></image>
          专属特惠
          <image style="width: 22rpx;height: 22rpx;margin-left: 58rpx;" src="/static/imgs/quanshou/Star.png"></image>
        </view>
        <view style="display: flex;flex-wrap: wrap">
          <view class="w100" style="margin-bottom: 20rpx;"><image style="width: 100%;height: 170rpx;" src="/static/imgs/quanshou/ZC1.png"></image></view>
          <view class="w100" style="margin-bottom: 20rpx;"><image style="width: 100%;height: 170rpx;" src="/static/imgs/quanshou/ZC2.png"></image></view>
          <view class="w100" style="margin-bottom: 0rpx;"><image style="width: 100%;height: 170rpx;" src="/static/imgs/quanshou/ZC3.png"></image></view>

        </view>
      </view>

    </view>




  </view>
</template>

<style scoped lang="scss">
.w25 {
  width: 20%;
  text-align: center;
  margin-bottom: 24rpx;
}
.w33{
  width: 33%;
  text-align: center;
  margin-bottom: 15rpx;
}
.w50{
  width: calc(50% - 20rpx);
  background: #FFEAF9;border-radius: 24rpx;
  padding: 20rpx;
  display: flex;
  margin-bottom: 20rpx;
}
.w100{
  width: 100%;
}
</style>

 pages/quanshou/components/xianlianghaojjuab.vue

New file
@@ -0,0 +1,30 @@
<script>
export default {
  name: "xianlianghaojjuab"
}
</script>

<template>
  <view>
    <view style="margin-bottom: 20rpx;">
      <image style="width: 22rpx;height: 22rpx;"  src="/static/imgs/quanshou/Star.png"></image>
      <text style="font-weight: 600;font-size: 32rpx;color: #333333;margin-left: 10rpx;">限量好券</text>
      <text style="font-size: 28rpx;color: #666666;margin-left: 20rpx;">大额立减，省钱利器</text>
    </view>

    <view style="display: flex;flex-wrap: wrap;justify-content: space-between">
      <view style="width: calc( 50% - 9rpx)"><image src="/static/imgs/quanshou/H1.png" style="width: 100%;height: 270rpx;margin-bottom: 10rpx;"></image></view>
      <view style="width: calc( 50% - 9rpx)"><image src="/static/imgs/quanshou/H2.png" style="width: 100%;height: 270rpx;margin-bottom: 10rpx;"></image></view>
      <view style="width: calc( 50% - 9rpx)"><image src="/static/imgs/quanshou/H3.png" style="width: 100%;height: 270rpx;margin-bottom: 10rpx;"></image></view>
      <view style="width: calc( 50% - 9rpx)"><image src="/static/imgs/quanshou/H4.png" style="width: 100%;height: 270rpx;margin-bottom: 10rpx;"></image></view>
      <view style="width: calc( 50% - 9rpx)"><image src="/static/imgs/quanshou/H5.png" style="width: 100%;height: 270rpx;margin-bottom: 10rpx;"></image></view>
      <view style="width: calc( 50% - 9rpx)"><image src="/static/imgs/quanshou/H6.png" style="width: 100%;height: 270rpx;margin-bottom: 10rpx;"></image></view>

    </view>

  </view>
</template>

<style scoped lang="scss">

</style>

 pages/quanshou/index.vue

New file
@@ -0,0 +1,375 @@
<script>

import tehuichongzhi from "@/pages/quanshou/components/tehuichongzhi.vue";  //虚拟
import lanyaerji from "@/pages/quanshou/components/lanyaerji.vue"; // 实物

export default {
  name: "index",
  components: {
    tehuichongzhi,
    lanyaerji,
  },
  data() {
    return {
      tips:'',
      active: 0,
      VIP: 1, // 1黄金 2铂金 3黑金
      lst:[],
      vipConfig: {
        1: {
          bg: "/static/imgs/quanshou/TBBG1.png",
          box: "/static/imgs/quanshou/NEWBOX1.png",
          title: "/static/imgs/quanshou/VIPTXT1.png",
          level: "/static/imgs/quanshou/VIP1.png",
          textClass: "vip1-text",
          progressBg: "#BBA767",
          growText: " 88800/100000",
          benefitText: "297.00"
        },
        2: {
          bg: "/static/imgs/quanshou/TBBG2.png",
          box: "/static/imgs/quanshou/NEWBOX2.png",
          title: "/static/imgs/quanshou/VIPTXT2.png",
          level: "/static/imgs/quanshou/VIP2.png",
          textClass: "vip2-text",
          progressBg: "#8094A6",
          growText: " 88800/100000",
          benefitText: "594.00"
        },
        3: {
          bg: "/static/imgs/quanshou/TBBG3.png",
          box: "/static/imgs/quanshou/VIPBOX3.png",
          title: "/static/imgs/quanshou/VIPTXT3.png",
          level: "/static/imgs/quanshou/VIPLVL3.png",
          textClass: "vip3-text",
          progressBg: "#7B776E",
          growText: " 88800/100000",
          benefitText: "891.00"
        }
      },
      total: 0,
    };
  },
  computed: {
    currentVip() {
      return this.vipConfig[this.VIP] || this.vipConfig[1];
    }
  },
  onLoad(pro) {

    const _this = this;
    uni.request({
      url: _this.$webHost+'/api/v2/customer/getRyxBenefitsRecordList?phone='+_this.$util.getUserInfo().phone,
      success: function (res) {
        if(res.data.code==200){
          _this.lst = res.data.data;
          _this.lst.forEach(item=>{
            if(item && item.isBuy === 1 && [1,2,3].includes(item.period)) {_this.VIP = item.period;}
          })
          _this.lst.forEach(item=>{
            if(item.isBuy === 1 ) {
              // 保留两位小数
              _this.total += parseFloat(item.amount);
            }
          })
          _this.total = Intl.NumberFormat('zh-CN', {
            minimumFractionDigits: 2,
            maximumFractionDigits: 2,
          }).format(_this.total);
        } else {


        }
      }
    })
  },
  methods: {
    numbs(period) {
      const obj ={
        1:'一',
        2:'二',
        3:'三'
      }
      return obj[period]
    },
    toHuiyuan(){
      const _this = this;
      uni.request({
        url: _this.$webHost+'/api/v2/memberEquity/getUrlByShop/'+uni.getStorageSync('phone'),
        success: function (res) {
          if(res.data.code==200){
            uni.request( {
              url: _this.$webHost+'/api/v2/memberEquity/clickUrlByShop/'+uni.getStorageSync('phone'),
            })
            uni.navigateTo( {
              url: '/pages/users/web_page/index?webUel=' + encodeURIComponent(res.data.data.url)
            })
          } else {
            uni.showToast( {
              title: res.data.data || res.data.msg,
              icon: 'none'
            })
          }
        }
      })


    },
    getTips(){
      const _this = this;
      uni.request({
        url: _this.$webHost+'/api/v2/shop/findExpressNo?phone='+uni.getStorageSync('phone'),
        success: function (res) {
          if(res.data.code==200){
            _this.tips = res.data.data;
            _this.$refs.comment.open()

          } else {
            uni.showToast( {
              title: res.data.data || res.data.msg,
              icon: 'none'
            })
          }
        }
      })
    },
  }
};
</script>

<template>
  <view style="background: white;">
    <!-- 顶部 VIP 卡片 -->
    <view class="vip-box"   :style="{ backgroundImage: `url(${currentVip.box})` }" >
       <view style="position: relative">
         <image :src="currentVip.level" style="height: 200rpx;width: 100%;"></image>
         <view style="position: absolute;top: 120rpx;left: 48rpx;color: #754200;font-size: 28rpx;"  :class="VIP==1?'vip1-num':'vip2-num'">已购会员{{ total }}</view>
       </view>
      <view class="card-wrap" style="margin-top: 38rpx;">
        <view class="card-item" v-for="i in lst" :class="i.isBuy?'card-item-buy':''">
<!--          <view class="card-title">{{numbs(i.period)}}期会员</view>-->
          <view class="card-title">{{i.buyDate}}</view>
          <view class="card-price">
            <text>¥</text>
            <text class="card-num" >{{ i.amount }}</text>
          </view>
          <view class="card-date" style="height: 40rpx"> </view>
          <!--          <view class="card-date">{{ i.buyDate }}</view>-->
          <view class="has-buy">{{ i.isBuy?'已扣款' : '待扣款' }}</view>
        </view>
      </view>
    </view>

    <!-- 会员购买 + 权益部分 -->
    <view class="content-wrap">


      <view class="tab-wrap">
        <text @click="active=0" :class="active==0?'active':''">实物权益</text>
        <text @click="active=1" :class="active==1?'active':''">虚拟权益</text>
      </view>

      <view class="note" style="margin-bottom: 20rpx;text-align: center" v-if="active==0">页面展示为实物样例，实际以用户收到的商品为准</view>

      <lanyaerji v-if="active==0" style="margin:0 30rpx;"/>

      <tehuichongzhi v-else :VIP="VIP"  style="margin-top: 50rpx;" />

      <view style="text-align: center;margin: 30rpx;">
        <button class="exchange-btn" v-if="active==0" @click="getTips">我要查物流</button>
        <button class="exchange-btn"  v-else  @click="toHuiyuan">我要兑换</button>
        <view class="note" v-if="active==0">* 页面为实物样例，实际用户收到的商品为准</view>
        <view class="note" v-else>* 页面为虚拟权益预览，实际用户以当日兑换内容为准</view>
      </view>
    </view>


    <uni-popup type="center" ref="comment" >
      <view style="background-image: url('/static/imgs/BOXSDF.png');border-radius: 48rpx;padding: 28rpx ;width: 650rpx;background-repeat: no-repeat;background-size: 100% 100%">
        <view style="text-align: center;padding-top: 30rpx;" >
          <image src="/static/imgs/yifa.png" style="width:372rpx;height: 240rpx;"></image>
        </view>
        <view style="font-size: 32rpx;font-weight: 600;color: #333333;text-align: center;margin-top: 34rpx;margin-bottom: 80rpx;padding: 0 28rpx;">
          <view>{{ tips }}</view>
        </view>
        <view @click="$refs.comment.close()" style="font-weight: 500;font-size: 32rpx;color: #fff;text-align: center;padding: 24rpx 28rpx;border-top: 2rpx solid #EEEEEE;background: #FF1472;border-radius: 40rpx ;">好的</view>
      </view>
    </uni-popup>
  </view>
</template>

<style scoped lang="scss">

/* 顶部 VIP 样式 */
.vip-bg {
  background-size: 100%;
  background-repeat: no-repeat;
  padding-top: 60rpx;
  padding-bottom: 150rpx;
}
.vip-box {
  background-repeat: no-repeat;padding:20rpx 30rpx 60rpx 30rpx;
}
.gradient-text {
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  font-weight: 600;
}
.big-text {
  margin-top: 20rpx;
  font-size: 28rpx;
}
.small-text {
  margin-top: 20rpx;
  font-size: 24rpx;
}
.vip1-text {
  background: linear-gradient(90deg, #754200, #ff9900);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
}
.vip2-text {
  background: linear-gradient(90deg, #425268, #8094A6);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
}
.vip3-text {
  background: linear-gradient(90deg, #ECD4C6, #C79372);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
}
.progress-bar {
  height: 16rpx;
  border-radius: 20rpx;
  width: 100%;
  margin-top: 24rpx;
  position: relative;
}
.progress-inner {
  position: absolute;
  background: #fff;
  border-radius: 6rpx;
  left: 0;
  top: 0;
  width: 50%;
  height: 16rpx;
}

/* 内容区 */
.content-wrap {
  padding: 30rpx 0;
  background: #fff;
  border-radius: 50rpx 50rpx 0 0;
  position: relative;
  top: -60rpx;
}
.card-wrap {
  display: flex;
  justify-content: space-between;
  margin-bottom: 40rpx;
}
.card-item {
  background: #f5f5f5;
  border-radius: 24rpx;
  padding-top: 60rpx;
  text-align: center;
  //width: calc(50% - 14rpx);
  width: 100%;
  position: relative;
}
.card-title {
  font-size: 32rpx;
  font-weight: 600;
  margin-bottom: 34rpx;
}
.card-price {
  color: #333;
  font-size: 28rpx;
  font-weight: 600;
}
.card-num {
  font-size: 48rpx;
  font-weight: bold;
  margin: 0 8rpx;
}
.card-date {
  font-size: 24rpx;
  margin-top: 28rpx;
  border-radius: 0rpx 0rpx 24rpx 24rpx;
  background: #fff;
  //background: #EAEAEA;
  color: #666666;
  padding: 16rpx 0;
}
.has-buy {
  background: #FF922C;
  border-radius: 8rpx;
  height: 42rpx;
  width: 92rpx;
  font-size: 24rpx;
  color: #fff;
  position: absolute;
  top: -21rpx;
  left: 28rpx;
  line-height: 42rpx;
  display: none;
}
.card-item-buy {
  background: #fff;
}
.card-item-buy{
  .card-date{
    //background: #FF922C;
    background: #fff;
    color: white;
  }
  .has-buy{
    display: block;
  }

}
/* 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( 91deg, #FDFAFF 0%, #F9C969 100%);
    border-radius: 32rpx;
    position: absolute;
    bottom: -20rpx;
    left: calc(50% - 25rpx);
  }
}

/* 按钮 */
.exchange-btn {
  font-weight: 600;
  font-size: 36rpx;
  color: #FFD39A;
  padding: 10rpx;
  background: linear-gradient( 91deg, #A97132 0%, #542C09 100%);
  border-radius: 200rpx;
}
.note {
  font-size: 24rpx;
  color: #999;
  margin-top: 20rpx;
}
.vip2-num{
  color: #8E1768 !important;
}
</style>

 pages/quanyi/index.vue

@@ -6,7 +6,7 @@
  async  created() {
    const _this = this;
    await uni.request({
      url: _this.$webHost+'/api/v2/auth/ygxLogin?phone='+_this.$util.getUserInfo().phone,
      url: _this.$webHost+'/api/v2/auth/qxgIosUnionLogin?phone='+_this.$util.getUserInfo().phone,
      success: function (res) {
        _this.ygxLogin = res.data.data;
        uni.setStorageSync('ygxLogin',_this.ygxLogin)

 static/imgs/BOXSDF.png

 static/imgs/quanshou.png

 static/imgs/quanshou/Star.png

 static/imgs/quanshou/TBBG1.png

 static/imgs/quanshou/TBBG2.png

 static/imgs/quanshou/TBBG3.png

 static/imgs/quanshou/TY1.png

 static/imgs/quanshou/TY2.png

 static/imgs/quanshou/TY3.png

 static/imgs/quanshou/TY4.png

 static/imgs/quanshou/TY5.png

 static/imgs/quanshou/TY99.png

 static/imgs/quanshou/VIPBOX1.png

 static/imgs/quanshou/VIPBOX2.png

 static/imgs/quanshou/VIPBOX3.png

 static/imgs/quanshou/VIPLVL1.png

 static/imgs/quanshou/VIPLVL2.png

 static/imgs/quanshou/VIPLVL3.png

 static/imgs/quanshou/VIPTXT1.png

 static/imgs/quanshou/VIPTXT2.png

 static/imgs/quanshou/VIPTXT3.png

 static/imgs/wuImg.png

 static/imgs/yifa.png