11

src/pages/wechat/index.vue

@@ -1,19 +1,114 @@
 <template>
     <!-- 顶部导航 -->
-    <wd-config-provider theme="light">
+    <wd-config-provider theme="dark">
         <wd-navbar title="福利中心" safeAreaInsetTop :bordered="false">
             <template #right>
                 <navigator hover-class="navigator-hover" />
             </template>
         </wd-navbar>
+        <!-- 用户信息 -->
+        <view class="bg-gradient-to-b flex justify-between items-center">
+            <view class="flex items-center p-6">
+                <image :src="userInfo.avatar"
+                    class="mr-4 size-50px rounded-full bg-#333 border border-amber border-solid" mode="aspectFill" />
+                <view class="flex-1">
+                    <view class="mb-1 text-base">{{ userInfo.nickname }}</view>
+                    <view class="mb-2 text-xs text-#ffffff80 flex items-center">
+                        <text>ID: {{ userInfo.id }}</text>
+                        <image class="size-24rpx ml-4" :src="userGenderImageSrc" mode="scaleToFill" />
+                    </view>
+                </view>
+            </view>
+            <view>
+                退出登录
+            </view>
+        </view>
+        <!-- 提现相关 -->
+        <view>
+            <view class="flex items-center justify-center">
+                <view class="flex-1 flex-col justify-center items-center" v-for="(v, i) in data.txTab" :key="i">
+                    <text>{{ v.title }}</text>
+                    <text>{{ v.value }}</text>
+                </view>
+            </view>
+            <view class="flex justify-center items-center">
+                <text>立即提现</text>
+            </view>
+        </view>
+        <!-- tab -->
+        <view class="flex justify-center items-center">
+            <view class="flex-1 flex-col justify-center items-center" v-for="(v, i) in data.menuTab" :key="i">
+                <image class="size-40rpx" :src="v.icon" mode="aspectFill" />
+                <text>{{ v.title }}</text>
+            </view>
+        </view>
+        <!-- 规则 -->
+        <view>
+            <view>邀请奖励规则</view>
+            <view>
+                <view v-for="(v, i) in data.rule">
+                    <text>{{ i + 1 }}</text>
+                    <text>{{ v.title }}</text>
+                </view>
+            </view>
+        </view>
+        <!-- 海报 -->
+        <view>
+            <view>我的邀请海报</view>
+        </view>
     </wd-config-provider>
-
-    <!-- 用户信息 -->
-    <view class="bg-gradient-to-b">
-        sdfsadf
-    </view>
 </template>
 
 <script setup>
+import { computed, reactive, ref } from 'vue';
+
+import sheep from '@/sheep';
+import RecentApi from '@/sheep/api/member/recent';
+import { onLoad } from '@dcloudio/uni-app';
+
+const userInfo = computed(() => sheep.$store('user').userInfo);
+
+const data = {
+    txTab: [
+        {
+            title: '累计收益',
+            value: '100',
+        },
+        {
+            title: '可提现',
+            value: '200',
+        },
+        {
+            title: '成功邀请',
+            value: '300',
+        },
+    ],
+    menuTab: [
+        {
+            title: '礼物奖励',
+            value: '100',
+        },
+        {
+            title: '钻石充值',
+            value: '100',
+        },
+        {
+            title: '会员中心',
+            value: '100',
+        },
+        {
+            title: '邀请好友',
+            value: '100',
+        },
+    ],
+    rule: [
+        {
+            title: '邀请好友注册，即可获得100钻石',
+        },
+        {
+            title: '好友注册后，即可获得100钻石',
+        },
+    ],
+}
 
 </script>