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="!item.hideArrow"
          :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: false,	path: '', hideArrow: true },
	{	title: '简历模板', key: 'resumeTemplate', show: false,	path: '/pagesA/vip/template/index' },
	{	title: '简历屏蔽', key: 'resumePrivacy', show: false,	path: '/pagesA/vip/blockEnt/index' },
]
const listKeys = list.map(e => e.key)

const memberList = ref([])

// 权益列表
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) return
        //
        if (key === 'resumeRefreshCount') { // 简历刷新次数
          item.rightTex = '剩余 ' + (newVal[key] ? newVal[key] : 0) + ' 次'
        }
        item.show = Boolean(newVal[key] || newVal[key] === 0)
      })
      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) => {
  if (item?.path) {
    uni.navigateTo({
      url: item.path
    })
  }
}
const pName = ref('')
let getPNameNum = 0 
const getPName = () => {
  if (!userInfo.value?.vipFlag) {
    getPNameNum++
    if (getPNameNum > 6)
    setTimeout(() => { getPName() }, 1000);
    return
  }
  memberList.value.forEach(e => {
    if (e.id && e.id.toString() === userInfo.value?.vipFlag?.toString()) pName.value = e.name
  })
}

const getMemberList = async () => {
  try {
    const { data } = await getMembershipPackageList()
    if (!data || data.length === 0) {
      return
    }
    memberList.value = data
    // let vipFlagIndex = null
    // const list = data.map((item, index) => {
    //   item.id = item.id?.toString()
    //   if (item.id === userInfo.value?.vipFlag) vipFlagIndex = index // 低于当前套餐的(套餐)不展示
    //   if (item.recommend) recommend.value = index // 推荐套餐
    //   return {
    //     ...item,
    //     my: vipFlagIndex === index,
    //     list: JSON.parse(item.text),
    //     type: 3, // 订单类型 type:订单类型 0平台订单|1发布职位|2发布众聘职位|3会员套餐|4企业会员套餐|5招聘会门票
    //     loading: false
    //   }
    // })
    // // 低于当前套餐的(套餐)不展示
    // memberList.value = vipFlagIndex ? list.slice(vipFlagIndex) : list
    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>