|
@@ -0,0 +1,217 @@
|
|
|
+<route lang="json5" type="page">
|
|
|
+{
|
|
|
+ layout: 'default',
|
|
|
+ style: {
|
|
|
+ navigationBarTitleText: 'VIP Membership',
|
|
|
+ navigationBarBackgroundColor: '#FFFFFF',
|
|
|
+ },
|
|
|
+}
|
|
|
+</route>
|
|
|
+
|
|
|
+<script lang="ts" setup>
|
|
|
+defineOptions({
|
|
|
+ name: 'VipMembership', // 会员中心
|
|
|
+})
|
|
|
+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
|
|
|
+ align: AlignType
|
|
|
+ width: string
|
|
|
+}
|
|
|
+
|
|
|
+// 表格列配置
|
|
|
+const tableColumns = ref<TableColumn[]>([
|
|
|
+ { prop: 'vipLevel', label: 'VIP\nLevel', fixed: true, align: 'center', width: '110rpx' },
|
|
|
+ { prop: 'invitedNo', label: 'Invited\nNo', align: 'center', width: '150rpx' },
|
|
|
+ { prop: 'directReferralReward', label: 'Direct Referral\nReward', align: 'center', width: '240rpx' },
|
|
|
+ { prop: 'indirectReferralReward', label: 'Indirect Referral\nReward', align: 'center', width: '240rpx' },
|
|
|
+ { prop: 'joinedGroupsNo', label: 'Joined Groups\nNo', align: 'center', width: '220rpx' },
|
|
|
+])
|
|
|
+
|
|
|
+const dataList = ref<TableData[]>([
|
|
|
+ {
|
|
|
+ vipLevel: 'V1',
|
|
|
+ invitedNo: '10',
|
|
|
+ directReferralReward: '100',
|
|
|
+ indirectReferralReward: '100',
|
|
|
+ joinedGroupsNo: '10',
|
|
|
+ },
|
|
|
+ {
|
|
|
+ vipLevel: 'V2',
|
|
|
+ invitedNo: '10',
|
|
|
+ directReferralReward: '100',
|
|
|
+ indirectReferralReward: '100',
|
|
|
+ joinedGroupsNo: '10',
|
|
|
+ },
|
|
|
+ {
|
|
|
+ vipLevel: 'V3',
|
|
|
+ invitedNo: '10',
|
|
|
+ directReferralReward: '100',
|
|
|
+ indirectReferralReward: '100',
|
|
|
+ joinedGroupsNo: '10',
|
|
|
+ },
|
|
|
+ {
|
|
|
+ vipLevel: 'V4',
|
|
|
+ invitedNo: '10',
|
|
|
+ directReferralReward: '100',
|
|
|
+ indirectReferralReward: '100',
|
|
|
+ joinedGroupsNo: '10',
|
|
|
+ },
|
|
|
+ {
|
|
|
+ vipLevel: 'V5',
|
|
|
+ invitedNo: '10',
|
|
|
+ directReferralReward: '100',
|
|
|
+ indirectReferralReward: '100',
|
|
|
+ joinedGroupsNo: '10',
|
|
|
+ },
|
|
|
+ {
|
|
|
+ vipLevel: 'V6',
|
|
|
+ invitedNo: '10',
|
|
|
+ directReferralReward: '100',
|
|
|
+ indirectReferralReward: '100',
|
|
|
+ joinedGroupsNo: '10',
|
|
|
+ },
|
|
|
+ {
|
|
|
+ vipLevel: 'V7',
|
|
|
+ invitedNo: '10',
|
|
|
+ directReferralReward: '100',
|
|
|
+ indirectReferralReward: '100',
|
|
|
+ joinedGroupsNo: '10',
|
|
|
+ },
|
|
|
+ {
|
|
|
+ vipLevel: 'V8',
|
|
|
+ invitedNo: '10',
|
|
|
+ directReferralReward: '100',
|
|
|
+ indirectReferralReward: '100',
|
|
|
+ joinedGroupsNo: '10',
|
|
|
+ },
|
|
|
+ {
|
|
|
+ vipLevel: 'V9',
|
|
|
+ invitedNo: '10',
|
|
|
+ directReferralReward: '100',
|
|
|
+ indirectReferralReward: '100',
|
|
|
+ joinedGroupsNo: '10',
|
|
|
+ },
|
|
|
+ {
|
|
|
+ vipLevel: 'V10',
|
|
|
+ invitedNo: '10',
|
|
|
+ directReferralReward: '100',
|
|
|
+ indirectReferralReward: '100',
|
|
|
+ joinedGroupsNo: '10',
|
|
|
+ },
|
|
|
+])
|
|
|
+</script>
|
|
|
+
|
|
|
+<template>
|
|
|
+ <view class="px-24rpx py-20rpx">
|
|
|
+ <view
|
|
|
+ class="relative mb-20rpx box-border 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="/static/images/default-avatar.png" />
|
|
|
+ <view class="text-32rpx text-white font-bold">
|
|
|
+ Aamir Khan
|
|
|
+ </view>
|
|
|
+ <wd-progress :duration="0" custom-class="w-85%!" color="#E7BEA6" :percentage="60" hide-text />
|
|
|
+ <view class="text-22rpx text-#714428 font-bold">
|
|
|
+ <text>We still need to invite</text>
|
|
|
+ <text class="text-white">
|
|
|
+ 10 friends
|
|
|
+ </text>
|
|
|
+ <text>. Can upgrade to</text>
|
|
|
+ <text class="text-white">
|
|
|
+ V3
|
|
|
+ </text>
|
|
|
+ </view>
|
|
|
+ </view>
|
|
|
+ <image src="/static/images/vip-level1.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="text-22rpx text-#5B5B5B">
|
|
|
+ Invited Friends
|
|
|
+ </view>
|
|
|
+ <view class="text-26rpx font-bold">
|
|
|
+ 12,566
|
|
|
+ </view>
|
|
|
+ </view>
|
|
|
+ <wd-divider dashed custom-class="h-40rpx!" color="#A4A4A4" vertical />
|
|
|
+ <view class="flex-[33.33%]">
|
|
|
+ <view class="text-22rpx text-#5B5B5B">
|
|
|
+ Team Members
|
|
|
+ </view>
|
|
|
+ <view class="text-26rpx font-bold">
|
|
|
+ 12,566
|
|
|
+ </view>
|
|
|
+ </view>
|
|
|
+ <wd-divider dashed custom-class="h-40rpx!" color="#A4A4A4" vertical />
|
|
|
+ <view class="flex-[33.33%]">
|
|
|
+ <view class="text-22rpx text-#5B5B5B">
|
|
|
+ L7D Earnings
|
|
|
+ </view>
|
|
|
+ <view class="text-26rpx font-bold">
|
|
|
+ 12,566
|
|
|
+ </view>
|
|
|
+ </view>
|
|
|
+ </view>
|
|
|
+ </view>
|
|
|
+ <view>
|
|
|
+ <view class="mb-28rpx text-32rpx">
|
|
|
+ VIP Benefits/Tiers
|
|
|
+ </view>
|
|
|
+ <view class="rounded-16rpx bg-white p-24rpx">
|
|
|
+ <wd-table :data="dataList" :border="false" :stripe="false" :fixed-header="false">
|
|
|
+ <wd-table-col
|
|
|
+ v-for="(column, index) in tableColumns"
|
|
|
+ :key="index"
|
|
|
+ :prop="column.prop"
|
|
|
+ :label="column.label"
|
|
|
+ :fixed="column.fixed"
|
|
|
+ :align="column.align"
|
|
|
+ :width="column.width"
|
|
|
+ />
|
|
|
+ </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>
|