bandhuBuy-uniapp/src/pages/vipMembership/vipMembership.vue

<route lang="json5" type="page">
{
  layout: 'default',
  needLogin: true,
  style: {
    navigationBarTitleText: '%vipMembership.title%',
    navigationBarBackgroundColor: '#FFFFFF',
  },
}
</route>

<script lang="ts" setup>
import { memberConfigs } from '@/api/mine'
import { t } from '@/locale'
import { useUserStore } from '@/store'
import { formatNumber } from '@/utils'

defineOptions({
  name: 'VipMembership', // 会员中心
})
const userStore = useUserStore()
const userInfo = computed(() => getUserInfoHook())

interface TableData {
  vipLevel: string
  invitedNo: string
  directReferralReward: string
  indirectReferralReward: string
  joinedGroupsNo: string
}

// 表格列类型定义
type AlignType = 'left' | 'center' | 'right'

interface TableColumn {
  prop: string
  label: string
  fixed?: boolean
  slot?: boolean
  align: AlignType
  width: string
}

// 表格列配置
const tableColumns = ref<TableColumn[]>([
  { prop: 'level', label: t('vipMembership.table.vipLevel'), fixed: true, align: 'center', width: '100rpx' },
  { prop: 'invitedNo', label: t('vipMembership.table.invitedNo'), align: 'center', width: '120rpx' },
  { prop: 'directReferralReward', slot: true, label: t('vipMembership.table.directReferralReward'), align: 'center', width: '210rpx' },
  { prop: 'indirectReferralReward', slot: true, label: t('vipMembership.table.indirectReferralReward'), align: 'center', width: '220rpx' },
  { prop: 'joinedGroupsNo', label: t('vipMembership.table.joinedGroupsNo'), align: 'center', width: '220rpx' },
])

const dataList = ref<TableData[]>([])

async function getConfigTable() {
  const res = await memberConfigs()
  console.log(res)
  dataList.value = res.data
}
onLoad(() => {
  userStore.getUserInfo()
  getConfigTable()
})
</script>

<template>
  <view class="px-24rpx py-20rpx">
    <view
      class="relative mb-20rpx box-border min-h-302rpx bg-cover bg-center bg-no-repeat p-36rpx shadow-[0_48rpx_79rpx_13rpx_rgba(0,0,0,0.1)]"
      style="background-image: url('/static/images/vip-info-bg.png');"
    >
      <view>
        <wd-img width="100rpx" height="100rpx" custom-class="mb-18rpx" round :src="userInfo.headPic" />
        <view class="text-32rpx text-white font-bold">
          {{ userInfo.name }}
        </view>
        <wd-progress :duration="0" custom-class="w-85%!" color="#E7BEA6" :percentage="(userInfo.invitedNo / userInfo.nextInvitedNo) * 100" hide-text />
        <view class="text-22rpx text-#714428 font-bold">
          {{ t('vipMembership.inviteProgress', [formatNumber((userInfo.nextInvitedNo - userInfo.invitedNo), 0), userInfo.level + 1 >= dataList.length ? dataList.length : userInfo.level + 1]) }}
        </view>
      </view>
      <image :src="`/static/icons/vip${userInfo.level}.png`" class="absolute right-48rpx top-0 h-162rpx w-126.5rpx" />
    </view>
    <view class="mb-28rpx rounded-16rpx bg-white py-24rpx text-center">
      <view class="flex items-center justify-between">
        <view class="flex-[33.33%]">
          <view class="mb-3px text-22rpx text-#5B5B5B">
            {{ $t('vipMembership.invitedFriends') }}
          </view>
          <view class="text-26rpx font-bold">
            {{ formatNumber(userInfo.invitedNo, 0) }}
          </view>
        </view>
        <wd-divider custom-class="h-40rpx!" color="#A4A4A4" vertical dashed />
        <view class="flex-[33.33%]">
          <view class="mb-3px text-22rpx text-#5B5B5B">
            {{ $t('vipMembership.teamMembers') }}
          </view>
          <view class="text-26rpx font-bold">
            {{ formatNumber(userInfo.teamNo, 0) }}
          </view>
        </view>
        <wd-divider dashed custom-class="h-40rpx!" color="#A4A4A4" vertical />
        <view class="flex-[33.33%]">
          <view class="mb-3px text-22rpx text-#5B5B5B">
            {{ $t('vipMembership.l7dEarnings') }}
          </view>
          <view class="text-26rpx font-bold">
            {{ formatNumber(userInfo.l7DEarnings) }}
          </view>
        </view>
      </view>
    </view>
    <view>
      <view class="mb-28rpx text-32rpx">
        {{ $t('vipMembership.benefitsTiers') }}
      </view>
      <view class="rounded-16rpx bg-white p-24rpx">
        <wd-table :data="dataList" :border="false" :stripe="false" :fixed-header="false">
          <template
            v-for="(column, index) in tableColumns"
            :key="index"
          >
            <wd-table-col
              v-if="!column.slot"
              :prop="column.prop"
              :label="column.label"
              :fixed="column.fixed"
              :align="column.align"
              :width="column.width"
            />
            <wd-table-col
              v-else
              :prop="column.prop"
              :label="column.label"
              :fixed="column.fixed"
              :align="column.align"
              :width="column.width"
            >
              <template #value="{ row }">
                <view class="custom-class">
                  <text>{{ column.prop === 'directReferralReward' ? row.directReferralReward : row.indirectReferralReward }}%</text>
                </view>
              </template>
            </wd-table-col>
          </template>
        </wd-table>
      </view>
    </view>
  </view>
</template>

<style lang="scss" scoped>
:deep() {
  .wd-table {
    .wd-table__inner {
      .wd-table__header-row {
        text-align: center;

        .wd-table__cell {
          color: #636363 !important;
        }
      }
    }
  }

  .wd-progress {
    .wd-progress__outer {
      background-color: #e7bea6 !important;
    }

    .wd-progress__inner {
      background-image: linear-gradient(64deg, rgba(82, 40, 14, 0.5), rgba(127, 68, 32, 1)) !important;
    }
  }
}
</style>