feat: 会员中心页面开发

src/pages.json

@@ -115,6 +115,15 @@
       "style": {
         "navigationStyle": "custom"
       }
+    },
+    {
+      "path": "pages/vipMembership/vipMembership",
+      "type": "page",
+      "layout": "default",
+      "style": {
+        "navigationBarTitleText": "VIP Membership",
+        "navigationBarBackgroundColor": "#FFFFFF"
+      }
     }
   ],
   "subPackages": []

src/pages/index/index.vue

@@ -53,29 +53,30 @@ function onChange(e) {
 // 导航图标
 const navIcons = ref([
   {
-    image: '/static/index/home-vip.png',
+    image: '/static/icons/home-vip.png',
     title: 'home.missionCenter',
     size: '100rpx',
     url: '/pages/missionCenter/missionCenter',
   },
   {
-    image: '/static/index/home-vip.png',
+    image: '/static/icons/home-vip.png',
     title: 'home.refer&earn',
     size: '100rpx',
     url: '/pages/referEarn/referEarn',
   },
   {
-    image: '/static/index/home-vip.png',
+    image: '/static/icons/home-vip.png',
     title: 'home.vip',
     size: '112rpx',
+    url: '/pages/vipMembership/vipMembership',
   },
   {
-    image: '/static/index/home-vip.png',
+    image: '/static/icons/home-vip.png',
     title: 'home.vip',
     size: '100rpx',
   },
   {
-    image: '/static/index/home-vip.png',
+    image: '/static/icons/home-vip.png',
     title: 'home.vip',
     size: '100rpx',
   },

src/pages/vipMembership/vipMembership.vue

@@ -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>

src/style/index.scss

@@ -12,6 +12,7 @@
 page {
   background: #f5f5f5;
   font-size: 28rpx;
+  --wot-table-font-size: 24rpx;
   // 修改按主题色
   --wot-color-theme: #e61b28;
   --wot-color-theme-rgb: 230, 27, 40; // RGB值分解，对应#e61b28