city-gather/src/subPack-smqjh/userVip/userVip.vue

<script setup lang="ts">
import router from '@/router'
import { StaticUrl } from '@/config'

const { statusBarHeight, MenuButtonHeight, opcity } = storeToRefs(useSysStore())
definePage({
  name: 'smqjh-user-vip',
  islogin: true,
  style: {
    navigationBarTitleText: '会员中心',
    navigationStyle: 'custom',
  },

})
const { userMemberInfo } = storeToRefs(useUserStore())
const rightsInfo = ref()
onMounted(() => {
  opcity.value = 0
  rightsInfo.value = JSON.parse(userMemberInfo.value.benefitConfigJson || '')
  console.log(JSON.parse(userMemberInfo.value.benefitConfigJson || ''), '解析出的json')
})

onPageScroll((e) => {
  const calculatedOpacity = e.scrollTop / 100
  opcity.value = Math.min(1, Math.max(0.1, calculatedOpacity))
})

function toUse() {
  wx.openOfficialAccountArticle({
    url: 'https://mp.weixin.qq.com/s/lxpdZ6DUhgqg00AT9klu5Q',
  })
}
</script>

<template>
  <view class="min-h-screen" :class="userMemberInfo.active ? 'bg-[linear-gradient(225deg,#13141D_0%,#55565D_34.72%,#15161F_100%)]' : ''">
    <wd-navbar
      title="会员中心" :custom-style="`background-color: rgba(226, 255, 145, ${opcity});color: ${opcity > 0.5 ? '#000' : '#FFF'};`"
      :bordered="false" :z-index="999" safe-area-inset-top left-arrow fixed @click-left="router.back()"
    />
    <view :style="{ paddingTop: `${(Number(statusBarHeight) || 44) + MenuButtonHeight + 12}px` }" />
    <view v-if="userMemberInfo.active" class="px24rpx">
      <view class="mt-54rpx">
        <image :src="`${StaticUrl}/vip-welcome.png`" class="h-46rpx w-339rpx" />
        <view class="mt-36rpx text-28rpx text-#b5b5b5">
          甄选权益，开启您的购物之旅
        </view>
      </view>
      <view class="mt-36rpx h-370rpx pl-50rpx" :style="{ backgroundImage: `url(${StaticUrl}/vip-card.png)`, backgroundSize: 'cover', backgroundPosition: 'center' }">
        <image :src="`${StaticUrl}/vip-tags.png`" class="mt-72rpx h-54rpx w-238rpx" />
        <view class="mt-20rpx text-24rpx text-#b5b5b5">
          <text v-if="userMemberInfo.memberStatus === 'ACTIVE'">
            有效期至
          </text>
          <text v-if="userMemberInfo.memberStatus === 'PENDING_EXPIRE'">
            会员已退订
          </text>
          <text v-if="userMemberInfo.memberStatus === 'EXPIRED'">
            会员已失效
          </text>
        </view>
        <view class="mt-20rpx text-28rpx text-#b5b5b5">
          <text v-if="userMemberInfo.memberStatus === 'PENDING_EXPIRE'">
            权益将于
          </text>
          <text v-if="userMemberInfo.memberStatus === 'EXPIRED'">
            失效时间
          </text>
        </view>
        <view class="mt-20rpx text-28rpx text-#b5b5b5">
          {{ userMemberInfo.expireTime }}
          <text v-if="userMemberInfo.memberStatus != 'ACTIVE'">
            失效
          </text>
        </view>
      </view>
      <view class="mt-30rpx">
        <view class="flex items-center justify-center gap-36rpx">
          <view class="flex items-center gap-6rpx">
            <view class="h-16rpx w-8rpx bg-#FEE3AD" style="transform: skew(30deg);" />
            <view class="h-16rpx w-8rpx bg-#FEE3AD" style="transform: skew(30deg);" />
            <view class="h-16rpx w-8rpx bg-#FEE3AD" style="transform: skew(30deg);" />
            <view class="h-16rpx w-8rpx bg-#FEE3AD" style="transform: skew(30deg);" />
          </view>
          <view class="text-36rpx text-#FEE3AD font-800">
            我的权益
          </view>
          <view class="flex items-center gap-6rpx">
            <view class="h-16rpx w-8rpx bg-#FEE3AD" style="transform: skew(-30deg);" />
            <view class="h-16rpx w-8rpx bg-#FEE3AD" style="transform: skew(-30deg);" />
            <view class="h-16rpx w-8rpx bg-#FEE3AD" style="transform: skew(-30deg);" />
            <view class="h-16rpx w-8rpx bg-#FEE3AD" style="transform: skew(-30deg);" />
          </view>
        </view>
      </view>
      <view class="mt-44rpx flex flex-wrap gap-14rpx">
        <view v-if="rightsInfo?.oilPerLiterDiscount" class="w-304rpx border-[1rpx_solid_#F4E5BD] rounded-32rpx bg-[rgba(255,255,255,0.3)] p-20rpx">
          <view class="text-28rpx text-#FEE3AD font-bold">
            全省中石化优惠
          </view>
          <view class="mt-20rpx flex items-center justify-between">
            <view>
              <view class="text-28rpx text-#b5b5b5">
                每升立减{{ rightsInfo?.oilPerLiterDiscount }}元
              </view>
              <view class="mt-16rpx h-42rpx w-108rpx rounded-22rpx bg-#F4E5BD text-center text-24rpx text-#7F5935 line-height-42rpx" @click="toUse">
                去使用
              </view>
            </view>
            <image :src="rightsInfo?.oilIcon" class="h-80rpx w-80rpx" />
          </view>
        </view>
        <view v-if="rightsInfo?.mallDiscountRate" class="w-304rpx border-[1rpx_solid_#F4E5BD] rounded-32rpx bg-[rgba(255,255,255,0.3)] p-20rpx">
          <view class="text-28rpx text-#FEE3AD font-bold">
            市民请集合平台快消品
          </view>
          <view class="mt-20rpx flex items-center justify-between">
            <view>
              <view class="text-28rpx text-#b5b5b5">
                折扣率{{ rightsInfo?.mallDiscountRate }}折
              </view>
              <view class="mt-16rpx h-42rpx w-108rpx rounded-22rpx bg-#F4E5BD text-center text-24rpx text-#7F5935 line-height-42rpx" @click="router.push({ name: 'xsb-homeTabbar' })">
                去使用
              </view>
            </view>
            <image :src="rightsInfo?.mallIcon" class="h-80rpx w-80rpx" />
          </view>
        </view>
        <view v-if="rightsInfo?.chargePerKwhDiscount" class="w-304rpx border-[1rpx_solid_#F4E5BD] rounded-32rpx bg-[rgba(255,255,255,0.3)] p-20rpx">
          <view class="text-28rpx text-#FEE3AD font-bold">
            全省贵阳城投充电桩优惠
          </view>
          <view class="mt-20rpx flex items-center justify-between">
            <view>
              <view class="text-28rpx text-#b5b5b5">
                每度电立减{{ rightsInfo?.chargePerKwhDiscount }}元
              </view>
              <view class="mt-16rpx h-42rpx w-108rpx rounded-22rpx bg-#F4E5BD text-center text-24rpx text-#7F5935 line-height-42rpx" @click="router.push({ name: 'charge-index' })">
                去使用
              </view>
            </view>
            <image :src="rightsInfo?.chargeIcon" class="h-80rpx w-80rpx" />
          </view>
        </view>
        <view v-if="rightsInfo?.parkingDiscountRate" class="w-304rpx border-[1rpx_solid_#F4E5BD] rounded-32rpx bg-[rgba(255,255,255,0.3)] p-20rpx">
          <view class="text-28rpx text-#FEE3AD font-bold">
            贵阳城投停车场优惠
          </view>
          <view class="mt-20rpx flex items-center justify-between">
            <view>
              <view class="text-28rpx text-#b5b5b5">
                折扣率{{ rightsInfo?.parkingDiscountRate }}折
              </view>
              <view class="mt-16rpx h-42rpx w-108rpx rounded-22rpx bg-#F4E5BD text-center text-24rpx text-#7F5935 line-height-42rpx" @click="router.push({ name: rightsInfo?.parkingRoutePath })">
                去使用
              </view>
            </view>
            <image :src="rightsInfo?.parkingIcon" class="h-80rpx w-80rpx" />
          </view>
        </view>
        <view v-if="userMemberInfo?.couponConfig.length > 0" class="w-304rpx border-[1rpx_solid_#F4E5BD] rounded-32rpx bg-[rgba(255,255,255,0.3)] p-20rpx">
          <view class="text-28rpx text-#FEE3AD font-bold">
            优惠券
          </view>
          <view class="mt-20rpx flex items-center justify-between">
            <view>
              <view class="text-28rpx text-#b5b5b5">
                优惠券{{ userMemberInfo?.couponCount }}张
              </view>
              <view class="mt-16rpx h-42rpx w-108rpx rounded-22rpx bg-#F4E5BD text-center text-24rpx text-#7F5935 line-height-42rpx" @click="router.push({ name: 'xsb-coupon' })">
                去查看
              </view>
            </view>
            <image :src="userMemberInfo?.couponConfig[0].icon" class="h-80rpx w-80rpx" />
          </view>
        </view>
        <view v-if="userMemberInfo?.giftConfig.length > 0" class="w-304rpx border-[1rpx_solid_#F4E5BD] rounded-32rpx bg-[rgba(255,255,255,0.3)] p-20rpx">
          <view class="text-28rpx text-#FEE3AD font-bold">
            自选赠品
          </view>
          <view class="mt-20rpx flex items-center justify-between">
            <view>
              <view class="text-28rpx text-#b5b5b5">
                自选赠品{{ userMemberInfo?.giftCount }}个
              </view>
              <view class="mt-16rpx h-42rpx w-108rpx rounded-22rpx bg-#F4E5BD text-center text-24rpx text-#7F5935 line-height-42rpx" @click="router.push({ name: 'smqjh-giveaways-vip' })">
                {{ userMemberInfo?.giftCount > 0 ? '待领取' : '已领取' }}
              </view>
            </view>
            <image :src="userMemberInfo?.giftConfig[0].icon" class="h-80rpx w-80rpx" />
          </view>
        </view>
      </view>
    </view>
    <StatusTip v-else image="vip-not-data.png" tip="敬请期待" />
  </view>
</template>

<style lang="scss" scoped>

</style>