menduner-uniapp/pagesA/vip/index.vue

<!-- vip权益 -->
<template>
  <view class="box">
    <!-- vip信息 -->
    <view class="vipBox">
      <view class="avatar">
        <img :src="getUserAvatar(baseInfo?.avatar, baseInfo?.sex)" alt="" class="img-box">
        <image src="/static/svg/vip.svg" class="vipIcon"></image>
      </view>
      <view class="nameBox">
				<view class="name font-weight-bold font-size-16">{{ baseInfo?.name || userInfo?.phone }}</view>
				<view class="vipInfo font-size-14">
          {{ pName }}将于{{ remaining }}后过期
        </view>
      </view>
    </view>
    <view style="height: 20rpx; background-color: #f8f8fa;"></view>
    <view class="card">
      <uni-list>
        <uni-list-item
          v-for="item in menuList"
          :clickable="true"
          :key="item.title"
          :title="item.title"
          showArrow
          :rightText="item.rightTex || ''"
          @click="handleToLink(item)"
        >
        </uni-list-item>
      </uni-list>
    </view>
  </view>
</template>

<script setup>
import { userStore } from '@/store/user'
import { ref, computed, watch } from 'vue'
import { getUserAvatar } from '@/utils/avatar'
import { getMembershipPackageList } from '@/api/vip'

const useUserStore = userStore()
const baseInfo = computed(() => useUserStore?.baseInfo)
const userInfo = computed(() => useUserStore?.userInfo)

let list = [
	{	title: '简历刷新次数', key: 'resumeRefreshCount', show: true,	path: '/pagesA/vip/template/index'	},					
	{	title: '简历模板', key: 'resumeTemplate', show: false,	path: '/pagesA/vip/template/index'	},					
	{	title: '屏蔽企业', key: 'viewersList', show: true,	path: '/pagesA/vip/blockEnt/index'	},			
]
const listKeys = list.map(e => e.key)

// 权益列表
const menuList = ref([])
watch(() => userInfo.value?.entitlement, 
  (newVal) => {
    // if (newVal) getPName()
    if (newVal && listKeys?.length) {
      listKeys.forEach(key => {
        const item = list.find(e => e.key === key)
        if (!item || item.show) return
        //
        if (key === 'resumeRefreshCount') { // 简历刷新次数
          item.rightTex = '剩余 ' + (newVal[key] ? newVal[key] : 0) + ' 次'
        }
        else if (newVal[key]) item.show = true
      })
      menuList.value = list.filter(e => e.show)
    }
  },
  {
    // deep: true,
    immediate: true
  }
)

const remaining = computed(() => {
  if (!userInfo.value?.vipExpireDate) return '0'
  const diffInMs =  (userInfo.value?.vipExpireDate-0) - new Date().getTime()
  const day = diffInMs / (1000 * 60 * 60 * 24)
  return day < 1 ? '今天' : Math.floor(day) + '天'
})

// 列表跳转
const handleToLink = (item) => {
	uni.navigateTo({
		url: item.path
	})
}
const pName = ref('')
let getPNameNum = 0 
const getPName = () => {
  if (!useUserStore.userInfo?.vipFlag) {
    getPNameNum++
    if (getPNameNum > 6)
    setTimeout(() => { getPName() }, 1000);
    return
  }
  memberList.value.forEach(e => {
    if (e.id && e.id.toString() === useUserStore.userInfo?.vipFlag?.toString()) pName.value = e.name
  })
}

const memberList = ref([])
const getMemberList = async () => {
  try {
    const res = await getMembershipPackageList()
    if (!res?.data?.length) return uni.showToast({ title: '查询数据失败，请重试', icon: 'none' })
    memberList.value = res.data
    getPName()
  } catch (error) {
    uni.showToast({ title: '查询数据失败，请重试', icon: 'none' })
  }
}
getMemberList()

</script>
<style lang="scss" scoped>
.vipBox {
	// color: #a18a0f;
  padding: 80rpx 50rpx;
  display: flex;
  background: linear-gradient(121deg,#fde2c2 29.02%,#c19164 104.03%);
  .avatar{
    position: relative;
    width: 100rpx;
    height: 100rpx;
    margin: 0;
    .img-box {
      width: 100%;
      height: 100%;
      border: 2rpx solid #ccc;
      border-radius: 50%;
      border: 1px solid gold;
    }
    .vipIcon {
      position: absolute;
      width: 50%;
      height: 50%;
      bottom: 0;
      right: 0;
      transform: translate(0, 30%);
    }
  }
  .nameBox {
    display: flex;
    flex-direction: column;
    justify-content: space-around;
    margin-left: 30rpx;
    .name {
      color: #724d2b;
    }
    .vipInfo {
      color: #572a00;
    }
  }
}

:deep(.uni-list-item) {
	height: 120rpx !important;
	line-height: 120rpx !important;
}
:deep(.uni-list-item__content-title) {
	font-size: 32rpx !important;
	font-weight: 500;
}
</style>