feat: 星享购提交

lin

2026-04-17 7ad48ddf4ca20d0f1f894cbfe4946b2a8d7041ab

 pages/quanshou/components/tehuichongzhi.vue

@@ -1,255 +1,38 @@
<script>
export default  {
  name: "tehuichongzhi",
  props: {
    VIP: {
      type: Number,
      default: 1
    }
  },
export default {
  name: "tehuichongzhi"
}
</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 style="margin-bottom: 20rpx;">
      <image style="width: 22rpx;height: 22rpx;"  src="/static/img/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;">低至5折起，越充越省钱！</text>
    </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 style="display: flex;flex-wrap: wrap;justify-content: space-between">
      <view style="text-align: center; flex: 0 0 calc(20%);margin-top: 22rpx;"><image src="/static/img/quanshou/C1.png" style="width: 88rpx;height: 88rpx;"></image><view style="font-size: 24rpx;color: #333333; margin: 10rpx 0 5rpx 0;">爱奇艺</view><view style="font-size: 20rpx;color: #666666;">7折起</view></view>
      <view style="text-align: center; flex: 0 0 calc(20%);margin-top: 22rpx;"><image src="/static/img/quanshou/C2.png" style="width: 88rpx;height: 88rpx;"></image><view style="font-size: 24rpx;color: #333333; margin: 10rpx 0 5rpx 0;">芒果TV</view><view style="font-size: 20rpx;color: #666666;">4.9折起</view></view>
      <view style="text-align: center; flex: 0 0 calc(20%);margin-top: 22rpx;"><image src="/static/img/quanshou/C3.png" style="width: 88rpx;height: 88rpx;"></image><view style="font-size: 24rpx;color: #333333; margin: 10rpx 0 5rpx 0;">腾讯视频</view><view style="font-size: 20rpx;color: #666666;">3.8折起</view></view>
      <view style="text-align: center; flex: 0 0 calc(20%);margin-top: 22rpx;"><image src="/static/img/quanshou/C4.png" style="width: 88rpx;height: 88rpx;"></image><view style="font-size: 24rpx;color: #333333; margin: 10rpx 0 5rpx 0;">优酷</view><view style="font-size: 20rpx;color: #666666;">3折起</view></view>
      <view style="text-align: center; flex: 0 0 calc(20%);margin-top: 22rpx;"><image src="/static/img/quanshou/C5.png" style="width: 88rpx;height: 88rpx;"></image><view style="font-size: 24rpx;color: #333333; margin: 10rpx 0 5rpx 0;">网易云</view><view style="font-size: 20rpx;color: #666666;">5.9折起</view></view>
      <view style="text-align: center; flex: 0 0 calc(20%);margin-top: 22rpx;"><image src="/static/img/quanshou/C6.png" style="width: 88rpx;height: 88rpx;"></image><view style="font-size: 24rpx;color: #333333; margin: 10rpx 0 5rpx 0;">QQ音乐</view><view style="font-size: 20rpx;color: #666666;">92折起</view></view>
      <view style="text-align: center; flex: 0 0 calc(20%);margin-top: 22rpx;"><image src="/static/img/quanshou/C7.png" style="width: 88rpx;height: 88rpx;"></image><view style="font-size: 24rpx;color: #333333; margin: 10rpx 0 5rpx 0;">酷狗</view><view style="font-size: 20rpx;color: #666666;">4.9折起</view></view>
      <view style="text-align: center; flex: 0 0 calc(20%);margin-top: 22rpx;"><image src="/static/img/quanshou/C8.png" style="width: 88rpx;height: 88rpx;"></image><view style="font-size: 24rpx;color: #333333; margin: 10rpx 0 5rpx 0;">哔哩哔哩</view><view style="font-size: 20rpx;color: #666666;">6.6折起</view></view>
      <view style="text-align: center; flex: 0 0 calc(20%);margin-top: 22rpx;"><image src="/static/img/quanshou/C9.png" style="width: 88rpx;height: 88rpx;"></image><view style="font-size: 24rpx;color: #333333; margin: 10rpx 0 5rpx 0;">美团外卖</view><view style="font-size: 20rpx;color: #666666;">8折起</view></view>
      <view style="text-align: center; flex: 0 0 calc(20%);margin-top: 22rpx;"><image src="/static/img/quanshou/C10.png" style="width: 88rpx;height: 88rpx;"></image><view style="font-size: 24rpx;color: #333333;margin: 10rpx 0 5rpx 0;">饿了么</view><view style="font-size: 20rpx;color: #666666;">5.9折起</view></view>
      <view style="text-align: center; flex: 0 0 calc(20%);margin-top: 22rpx;"><image src="/static/img/quanshou/C11.png" style="width: 88rpx;height: 88rpx;"></image><view style="font-size: 24rpx;color: #333333;margin: 10rpx 0 5rpx 0;">瑞幸咖啡</view><view style="font-size: 20rpx;color: #666666;">6.5折起</view></view>
      <view style="text-align: center; flex: 0 0 calc(20%);margin-top: 22rpx;"><image src="/static/img/quanshou/C12.png" style="width: 88rpx;height: 88rpx;"></image><view style="font-size: 24rpx;color: #333333;margin: 10rpx 0 5rpx 0;">蜜雪冰城</view><view style="font-size: 20rpx;color: #666666;">9折起</view></view>
      <view style="text-align: center; flex: 0 0 calc(20%);margin-top: 22rpx;"><image src="/static/img/quanshou/C13.png" style="width: 88rpx;height: 88rpx;"></image><view style="font-size: 24rpx;color: #333333;margin: 10rpx 0 5rpx 0;">酷我</view><view style="font-size: 20rpx;color: #666666;">9.3折起</view></view>
      <view style="text-align: center; flex: 0 0 calc(20%);margin-top: 22rpx;"><image src="/static/img/quanshou/C14.png" style="width: 88rpx;height: 88rpx;"></image><view style="font-size: 24rpx;color: #333333;margin: 10rpx 0 5rpx 0;">QQ阅读</view><view style="font-size: 20rpx;color: #666666;">7起</view></view>
      <view style="text-align: center; flex: 0 0 calc(20%);margin-top: 22rpx;"><image src="/static/img/quanshou/C15.png" style="width: 88rpx;height: 88rpx;"></image><view style="font-size: 24rpx;color: #333333;margin: 10rpx 0 5rpx 0;">文心一言</view><view style="font-size: 20rpx;color: #666666;">6折起</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>