Merge branch 'master' of https://gitea.zianxin.com/zax/Friendship-and-chat-uniapp

.env

@@ -5,8 +5,9 @@ SHOPRO_VERSION=v2.4.1
 SHOPRO_API_PATH=/app-api
 
 # 后端接口 - 测试环境（通过 process.env.NODE_ENV == development）
-SHOPRO_DEV_BASE_URL=http://127.0.0.1:48083
+# SHOPRO_DEV_BASE_URL=http://127.0.0.1:48083
 # SHOPRO_DEV_BASE_URL = http://chatapi.zianxin.com
+SHOPRO_DEV_BASE_URL=https://rj4jv5rwqs.by.takin.cc
 
 # 后端接口 - 正式环境（通过 process.env.NODE_ENV != development）
 SHOPRO_BASE_URL=http://chatapi.zianxin.com

src/manifest.json

@@ -1,9 +1,9 @@
 {
     "name" : "荷塘月色",
-    "appid" : "__UNI__5B53E65",
+    "appid" : "__UNI__0A84F60",
     "description" : "聊天交友app",
     "versionName" : "0.0.0",
-    "versionCode" : 0,
+    "versionCode" : 1,
     "transformPx" : false,
     "app-plus" : {
         "usingComponents" : true,
@@ -122,9 +122,9 @@
                 "iosStyle" : "common",
                 "useOriginalMsgbox" : true,
                 "android" : {
-                    "hdpi" : "C:/Users/20513/Pictures/login-bg.png",
-                    "xhdpi" : "C:/Users/20513/Pictures/login-bg.png",
-                    "xxhdpi" : "C:/Users/20513/Pictures/login-bg.png"
+                    "hdpi" : "unpackage/res/icons/20x20.png",
+                    "xhdpi" : "unpackage/res/icons/20x20.png",
+                    "xxhdpi" : "unpackage/res/icons/20x20.png"
                 }
             },
             "icons" : {

src/pages.json

@@ -288,8 +288,19 @@
           }
         }
       ]
+    },
+    {
+      "root": "pages/wechat",
+      "pages": [
+        {
+          "path": "index",
+          "style": {
+            "navigationBarTitleText": "邀请福利",
+            "navigationStyle": "custom"
+          }
+        }
+      ]
     }
-
     // {
     //   "root": "pages/goods",
     //   "pages": [
@@ -934,4 +945,4 @@
       }
     ]
   }
-}
+}

src/pages/profile/profile.vue

@@ -4,10 +4,8 @@
     <wd-navbar title="我的" safeAreaInsetTop :bordered="false">
       <template #right>
         <navigator hover-class="navigator-hover">
-          <view
-            class="flex items-center rounded-full h-44rpx bg-color-theme py-1 px-2 text-black"
-            @click="editUserInfo"
-          >
+          <view class="flex items-center rounded-full h-44rpx bg-color-theme py-1 px-2 text-black"
+            @click="editUserInfo">
             <uni-icons type="auth" size="20" color="#333"></uni-icons>
             <text class="text-sm">编辑资料</text>
           </view>
@@ -18,21 +16,15 @@
     <scroll-view class="h-[calc(100vh-144rpx)]" scroll-y>
       <!-- 个人信息 -->
       <view class="flex items-center p-6">
-        <image
-          :src="userInfo.avatar"
-          class="mr-4 size-100px rounded-full bg-#333 border border-amber border-solid"
-          mode="aspectFill"
-        />
+        <image :src="userInfo.avatar" class="mr-4 size-100px 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>
-          <text
-            v-if="userCity?.t"
-            class="bg-#333 text-color-theme-dark text-xs px-2 py-1 rounded-1 truncate"
-          >
+          <text v-if="userCity?.t" class="bg-#333 text-color-theme-dark text-xs px-2 py-1 rounded-1 truncate">
             {{ userCity?.t || '' }}
           </text>
         </view>
@@ -60,16 +52,11 @@
 
       <!-- 开通vip -->
       <view
-        class="text-color-theme-dark mx-4 p-4 rounded-2 bg-gradient-to-b from-#111 to-#222 b-4 b-solid b-t-#D29E52/60 b-l-#D29E52/40 b-r-#D29E52/40 b-b-#D29E52/20 flex justify-between"
-      >
+        class="text-color-theme-dark mx-4 p-4 rounded-2 bg-gradient-to-b from-#111 to-#222 b-4 b-solid b-t-#D29E52/60 b-l-#D29E52/40 b-r-#D29E52/40 b-b-#D29E52/20 flex justify-between">
         <view class="font-900 font-italic text-xl">VIP</view>
         <view class="flex items-center">
           <text class="text-xs">尊享vip免费特权</text>
-          <navigator
-            url="/pages/profile/apply-vip"
-            open-type="navigate"
-            hover-class="navigator-hover"
-          >
+          <navigator url="/pages/profile/apply-vip" open-type="navigate" hover-class="navigator-hover">
             <text class="ml-4 px-4 py-1 rounded-full text-24rpx bg-color-theme text-black">
               立即开通
             </text>
@@ -82,29 +69,14 @@
       <!-- 菜单 -->
       <view class="mt-4 mx-1">
         <wd-cell-group>
-          <wd-cell
-            v-for="(item, index) in MenuCellList"
-            :key="index"
-            :title="item.title"
-            :value="item.value"
-            icon-size="24"
-            :icon="item.icon"
-            is-link
-            ellipsis
-            :to="item.to"
-            @click="item.click"
-          />
+          <wd-cell v-for="(item, index) in MenuCellList" :key="index" :title="item.title" :value="item.value"
+            icon-size="24" :icon="item.icon" is-link ellipsis :to="item.to" @click="item.click" />
         </wd-cell-group>
       </view>
       <view class="h-100rpx"></view>
     </scroll-view>
 
-    <wd-popup
-      v-model="myEvaluationShow"
-      custom-style="border-radius:32rpx;"
-      closable
-      :safe-area-inset-bottom="true"
-    >
+    <wd-popup v-model="myEvaluationShow" custom-style="border-radius:32rpx;" closable :safe-area-inset-bottom="true">
       <view class="w-90vw h-400rpx flex-col-center gap-4 flex-wrap">
         <view class="text-color-theme text-lg">我的评价{{ myEvaluation.evaluateCount }}</view>
         <view class="w-90% flex justify-around">
@@ -130,115 +102,110 @@
         <view class="text-color-theme text-lg">综合评分 {{ myEvaluation.avgScore }}</view>
       </view>
     </wd-popup>
-    <wd-curtain
-      v-model="curtainShow"
+    <wd-curtain v-model="curtainShow"
       src="https://img20.360buyimg.com/da/jfs/t1/141592/25/8861/261559/5f68d8c1E33ed78ab/698ad655bfcfbaed.png"
-      close-position="top-right"
-      :width="300"
-      close-on-click-modal
-      show-menu-by-longpress
-    />
+      close-position="top-right" :width="300" close-on-click-modal show-menu-by-longpress />
   </wd-config-provider>
 </template>
 
 <script setup lang="ts">
-  import { computed, reactive, ref } from 'vue';
-  import UserAblum from './components/user-ablum.vue';
-  import useAblum from './use-ablum';
-  // @ts-ignore
-  import sheep from '@/sheep';
-  import RecentApi from '@/sheep/api/member/recent';
-  import { onLoad } from '@dcloudio/uni-app';
-  // @ts-ignore
-  import { fen2yuan } from '@/sheep/hooks/useGoods';
+import { computed, reactive, ref } from 'vue';
+import UserAblum from './components/user-ablum.vue';
+import useAblum from './use-ablum';
+// @ts-ignore
+import sheep from '@/sheep';
+import RecentApi from '@/sheep/api/member/recent';
+import { onLoad } from '@dcloudio/uni-app';
+// @ts-ignore
+import { fen2yuan } from '@/sheep/hooks/useGoods';
 
-  const { ablumList } = useAblum();
+const { ablumList } = useAblum();
 
-  // 统计信息
-  const recentTotal = ref({
-    memberRecentId: null,
-    bizType: null,
-    likeTotal: 0,
-    likeItTotal: 0,
-    likeMeTotal: 0,
-    reportTotal: 0,
-    shieldTotal: 0,
-    collectTotal: 0,
+// 统计信息
+const recentTotal = ref({
+  memberRecentId: null,
+  bizType: null,
+  likeTotal: 0,
+  likeItTotal: 0,
+  likeMeTotal: 0,
+  reportTotal: 0,
+  shieldTotal: 0,
+  collectTotal: 0,
+});
+
+// 我的评价数据
+const myEvaluation = reactive({
+  scoreSc: 0,
+  scoreNx: 0,
+  scoreSk: 0,
+  scoreYq: 0,
+  avgScore: 0,
+  evaluateCount: 0,
+});
+const myEvaluationShow = ref(false); // 我的评价弹窗
+const curtainShow = ref(false); // 关注公众号弹窗
+const userInfo = computed(() => sheep.$store('user').userInfo);
+const userCity = computed(() => sheep.$store('user').userCity);
+const userWallet = computed(() => sheep.$store('user').userWallet);
+const userGenderImageSrc = computed(() => {
+  const sex = userInfo.value.sex;
+  if (sex === 1) return '/static/gender-man.png';
+  if (sex === 2) return '/static/gender-woman.png';
+  return '';
+});
+
+onLoad(async () => {
+  const { data: totalData } = await RecentApi.recentTotal();
+  recentTotal.value = totalData ?? {};
+});
+
+// 修改用户信息
+const editUserInfo = () => {
+  uni.navigateTo({
+    url: '/pages/profile/userinfo',
   });
+};
 
-  // 我的评价数据
-  const myEvaluation = reactive({
-    scoreSc: 0,
-    scoreNx: 0,
-    scoreSk: 0,
-    scoreYq: 0,
-    avgScore: 0,
-    evaluateCount: 0,
+// type: 0-我喜欢 1-喜欢我
+const goLike = (type: 0 | 1) => {
+  uni.navigateTo({
+    url: `/pages/profile/like?type=${type}`,
   });
-  const myEvaluationShow = ref(false); // 我的评价弹窗
-  const curtainShow = ref(false); // 关注公众号弹窗
-  const userInfo = computed(() => sheep.$store('user').userInfo);
-  const userCity = computed(() => sheep.$store('user').userCity);
-  const userWallet = computed(() => sheep.$store('user').userWallet);
-  const userGenderImageSrc = computed(() => {
-    const sex = userInfo.value.sex;
-    if (sex === 1) return '/static/gender-man.png';
-    if (sex === 2) return '/static/gender-woman.png';
-    return '';
+};
+
+// 查看我的评价
+const lookMyEvaluation = async () => {
+  const { data = null } = await RecentApi.myEvaluate();
+  if (data) {
+    Object.assign(myEvaluation, data);
+    myEvaluationShow.value = true;
+    return;
+  }
+  uni.showToast({ title: '查看失败', icon: 'none' });
+};
+
+// 关注公众号
+const subOfficial = () => {
+  curtainShow.value = true;
+};
+
+// 问题反馈
+const goFeedback = () => {
+  uni.navigateTo({
+    url: '/pages/profile/feedback',
   });
+};
 
-  onLoad(async () => {
-    const { data: totalData } = await RecentApi.recentTotal();
-    recentTotal.value = totalData ?? {};
-  });
-
-  // 修改用户信息
-  const editUserInfo = () => {
-    uni.navigateTo({
-      url: '/pages/profile/userinfo',
-    });
-  };
-
-  // type: 0-我喜欢 1-喜欢我
-  const goLike = (type: 0 | 1) => {
-    uni.navigateTo({
-      url: `/pages/profile/like?type=${type}`,
-    });
-  };
-
-  // 查看我的评价
-  const lookMyEvaluation = async () => {
-    const { data = null } = await RecentApi.myEvaluate();
-    if (data) {
-      Object.assign(myEvaluation, data);
-      myEvaluationShow.value = true;
-      return;
-    }
-    uni.showToast({ title: '查看失败', icon: 'none' });
-  };
-
-  // 关注公众号
-  const subOfficial = () => {
-    curtainShow.value = true;
-  };
-
-  // 问题反馈
-  const goFeedback = () => {
-    uni.navigateTo({
-      url: '/pages/profile/feedback',
-    });
-  };
-
-  // cell菜单
-  const MenuCellList = [
-    { title: '我的收益', value: '', icon: 'wallet', to: '' },
-    { title: '访客记录', value: '', icon: 'dong', to: '/pages/profile/view-record' },
-    { title: '认证中心', value: '', icon: 'user', to: '/pages/profile/face-verify' },
-    { title: '我的动态√', value: '', icon: 'star', to: '/pages/profile/my-moment' },
-    { title: '我的评价√', value: '', icon: 'view-module', to: '', click: lookMyEvaluation },
-    { title: '问题反馈√', value: '', icon: 'backtop-rectangle', to: '', click: goFeedback },
-    // { title: '客服助手', value: '', icon: 'service', to: '' },
-    { title: '关注公众号√', value: '获取最新消息', icon: 'qrcode', to: '', click: subOfficial },
-    { title: '设置√', value: '', icon: 'setting1', to: '/pages/profile/setting' },
-  ];
+// cell菜单
+const MenuCellList = [
+  { title: '我的收益', value: '', icon: 'wallet', to: '/pages/wechat/index' },
+  { title: '访客记录', value: '', icon: 'dong', to: '/pages/profile/view-record' },
+  { title: '认证中心', value: '', icon: 'user', to: '/pages/profile/face-verify' },
+  { title: '我的动态√', value: '', icon: 'star', to: '/pages/profile/my-moment' },
+  { title: '我的评价√', value: '', icon: 'view-module', to: '', click: lookMyEvaluation },
+  { title: '问题反馈√', value: '', icon: 'backtop-rectangle', to: '', click: goFeedback },
+  // { title: '客服助手', value: '', icon: 'service', to: '' },
+  { title: '关注公众号√', value: '获取最新消息', icon: 'qrcode', to: '', click: subOfficial },
+  { title: '设置√', value: '', icon: 'setting1', to: '/pages/profile/setting' },
+];
 </script>

src/pages/user/info.vue

@@ -1,33 +1,16 @@
 <!-- 用户信息 -->
 <template>
   <s-layout title="用户信息" class="set-userinfo-wrap">
-    <uni-forms
-      :model="state.model"
-      :rules="state.rules"
-      labelPosition="left"
-      border
-      class="form-box"
-    >
+    <uni-forms :model="state.model" :rules="state.rules" labelPosition="left" border class="form-box">
       <!-- 头像 -->
       <view class="ss-flex ss-row-center ss-col-center ss-p-t-60 ss-p-b-0 bg-white">
         <view class="header-box-content">
-          <su-image
-            class="content-img"
-            isPreview
-            :current="0"
-            :src="state.model?.avatar || sheep.$url.static('/static/img/shop/default_avatar.png')"
-            :height="160"
-            :width="160"
-            :radius="80"
-            mode="scaleToFill"
-          />
+          <su-image class="content-img" isPreview :current="0"
+            :src="state.model?.avatar || sheep.$url.static('/static/img/shop/default_avatar.png')" :height="160"
+            :width="160" :radius="80" mode="scaleToFill" />
           <view class="avatar-action">
             <!-- #ifdef MP -->
-            <button
-              class="ss-reset-button avatar-action-btn"
-              open-type="chooseAvatar"
-              @chooseavatar="onChooseAvatar"
-            >
+            <button class="ss-reset-button avatar-action-btn" open-type="chooseAvatar" @chooseavatar="onChooseAvatar">
               修改
             </button>
             <!-- #endif -->
@@ -41,25 +24,16 @@
       <view class="bg-white ss-p-x-30">
         <!-- 昵称 + 性别 -->
         <uni-forms-item name="nickname" label="昵称">
-          <uni-easyinput
-            v-model="state.model.nickname"
-            type="nickname"
-            placeholder="设置昵称"
-            :inputBorder="false"
-            :placeholderStyle="placeholderStyle"
-          />
+          <uni-easyinput v-model="state.model.nickname" type="nickname" placeholder="设置昵称" :inputBorder="false"
+            :placeholderStyle="placeholderStyle" />
         </uni-forms-item>
         <uni-forms-item name="sex" label="性别">
           <view class="ss-flex ss-col-center ss-h-100">
             <radio-group @change="onChangeGender" class="ss-flex ss-col-center">
               <label class="radio" v-for="item in sexRadioMap" :key="item.value">
                 <view class="ss-flex ss-col-center ss-m-r-32">
-                  <radio
-                    :value="item.value"
-                    color="var(--ui-BG-Main)"
-                    style="transform: scale(0.8)"
-                    :checked="parseInt(item.value) === state.model?.sex"
-                  />
+                  <radio :value="item.value" color="var(--ui-BG-Main)" style="transform: scale(0.8)"
+                    :checked="parseInt(item.value) === state.model?.sex" />
                   <view class="gender-name">{{ item.name }}</view>
                 </view>
               </label>
@@ -68,15 +42,8 @@
         </uni-forms-item>
 
         <uni-forms-item name="mobile" label="手机号" @tap="onChangeMobile">
-          <uni-easyinput
-            v-model="userInfo.mobile"
-            placeholder="请绑定手机号"
-            :inputBorder="false"
-            disabled
-            :styles="{ disableColor: '#fff' }"
-            :placeholderStyle="placeholderStyle"
-            :clearable="false"
-          >
+          <uni-easyinput v-model="userInfo.mobile" placeholder="请绑定手机号" :inputBorder="false" disabled
+            :styles="{ disableColor: '#fff' }" :placeholderStyle="placeholderStyle" :clearable="false">
             <template v-slot:right>
               <view class="ss-flex ss-col-center">
                 <su-radio v-if="userInfo.verification?.mobile" :modelValue="true" />
@@ -89,22 +56,12 @@
         </uni-forms-item>
 
         <uni-forms-item name="password" label="登录密码" @tap="onSetPassword">
-          <uni-easyinput
-            v-model="userInfo.password"
-            placeholder="点击修改登录密码"
-            :inputBorder="false"
-            :styles="{ disableColor: '#fff' }"
-            disabled
-            placeholderStyle="color:#BBBBBB;font-size:28rpx;line-height:normal"
-            :clearable="false"
-          >
+          <uni-easyinput v-model="userInfo.password" placeholder="点击修改登录密码" :inputBorder="false"
+            :styles="{ disableColor: '#fff' }" disabled
+            placeholderStyle="color:#BBBBBB;font-size:28rpx;line-height:normal" :clearable="false">
             <template v-slot:right>
               <view class="ss-flex ss-col-center">
-                <su-radio
-                  class="ss-flex"
-                  v-if="userInfo.verification?.password"
-                  :modelValue="true"
-                />
+                <su-radio class="ss-flex" v-if="userInfo.verification?.password" :modelValue="true" />
                 <button v-else class="ss-reset-button ss-flex ss-col-center ss-row-center">
                   <text class="_icon-forward" style="color: #bbbbbb; font-size: 26rpx" />
                 </button>
@@ -116,14 +73,8 @@
 
       <view class="bg-white ss-m-t-14">
         <uni-list>
-          <uni-list-item
-            clickable
-            @tap="sheep.$router.go('/pages/user/address/list')"
-            title="地址管理"
-            showArrow
-            :border="false"
-            class="list-border"
-          />
+          <uni-list-item clickable @tap="sheep.$router.go('/pages/user/address/list')" title="地址管理" showArrow
+            :border="false" class="list-border" />
         </uni-list>
       </view>
     </uni-forms>
@@ -133,24 +84,15 @@
       <view class="title-box ss-p-l-30">第三方账号绑定</view>
       <view class="account-list ss-flex ss-row-between">
         <view v-if="'WechatOfficialAccount' === sheep.$platform.name" class="ss-flex ss-col-center">
-          <image
-            class="list-img"
-            :src="sheep.$url.static('/static/img/shop/platform/WechatOfficialAccount.png')"
-          />
+          <image class="list-img" :src="sheep.$url.static('/static/img/shop/platform/WechatOfficialAccount.png')" />
           <text class="list-name">微信公众号</text>
         </view>
         <view v-if="'WechatMiniProgram' === sheep.$platform.name" class="ss-flex ss-col-center">
-          <image
-            class="list-img"
-            :src="sheep.$url.static('/static/img/shop/platform/WechatMiniProgram.png')"
-          />
+          <image class="list-img" :src="sheep.$url.static('/static/img/shop/platform/WechatMiniProgram.png')" />
           <text class="list-name">微信小程序</text>
         </view>
         <view v-if="'App' === sheep.$platform.name" class="ss-flex ss-col-center">
-          <image
-            class="list-img"
-            :src="sheep.$url.static('/static/img/shop/platform/wechat.png')"
-          />
+          <image class="list-img" :src="sheep.$url.static('/static/img/shop/platform/wechat.png')" />
           <text class="list-name">微信开放平台</text>
         </view>
         <view class="ss-flex ss-col-center">
@@ -159,11 +101,7 @@
             <text class="name">{{ state.thirdInfo.nickname }}</text>
           </view>
           <view class="bind-box ss-m-l-20">
-            <button
-              v-if="state.thirdInfo.openid"
-              class="ss-reset-button relieve-btn"
-              @tap="unBindThirdOauth"
-            >
+            <button v-if="state.thirdInfo.openid" class="ss-reset-button relieve-btn" @tap="unBindThirdOauth">
               解绑
             </button>
             <button v-else class="ss-reset-button bind-btn" @tap="bindThirdOauth">绑定</button>
@@ -181,287 +119,290 @@
 </template>
 
 <script setup>
-  import { computed, reactive, onBeforeMount } from 'vue';
-  import sheep from '@/sheep';
-  import { clone } from 'lodash-es';
-  import { showAuthModal } from '@/sheep/hooks/useModal';
-  import UserApi from '@/sheep/api/member/user';
-  import {
-    chooseAndUploadFile,
-    uploadFilesFromPath,
-  } from '@/sheep/components/s-uploader/choose-and-upload-file';
+import { computed, reactive, onBeforeMount } from 'vue';
+import sheep from '@/sheep';
+import { clone } from 'lodash-es';
+import { showAuthModal } from '@/sheep/hooks/useModal';
+import UserApi from '@/sheep/api/member/user';
+import {
+  chooseAndUploadFile,
+  uploadFilesFromPath,
+} from '@/sheep/components/s-uploader/choose-and-upload-file';
 
-  const state = reactive({
-    model: {}, // 个人信息
-    rules: {},
-    thirdInfo: {}, // 社交用户的信息
-  });
+const state = reactive({
+  model: {}, // 个人信息
+  rules: {},
+  thirdInfo: {}, // 社交用户的信息
+});
 
-  const placeholderStyle = 'color:#BBBBBB;font-size:28rpx;line-height:normal';
+const placeholderStyle = 'color:#BBBBBB;font-size:28rpx;line-height:normal';
 
-  const sexRadioMap = [
-    {
-      name: '男',
-      value: '1',
+const sexRadioMap = [
+  {
+    name: '男',
+    value: '1',
+  },
+  {
+    name: '女',
+    value: '2',
+  },
+];
+
+const userInfo = computed(() => sheep.$store('user').userInfo);
+
+// 选择性别
+function onChangeGender(e) {
+  state.model.sex = e.detail.value;
+}
+
+// 修改手机号
+const onChangeMobile = () => {
+  showAuthModal('changeMobile');
+};
+
+// 选择微信的头像，进行上传
+async function onChooseAvatar(e) {
+  debugger;
+  const tempUrl = e.detail.avatarUrl || '';
+  if (!tempUrl) return;
+  const files = await uploadFilesFromPath(tempUrl);
+  if (files.length > 0) {
+    state.model.avatar = files[0].url;
+  }
+}
+
+// 手动选择头像，进行上传
+async function onChangeAvatar() {
+  const files = await chooseAndUploadFile({ type: 'image' });
+  if (files.length > 0) {
+    state.model.avatar = files[0].url;
+  }
+}
+
+// 修改密码
+function onSetPassword() {
+  showAuthModal('changePassword');
+}
+
+// 绑定第三方账号
+async function bindThirdOauth() {
+  let result = await sheep.$platform.useProvider('wechat').bind();
+  if (result) {
+    await getUserInfo();
+  }
+}
+
+// 解绑第三方账号
+function unBindThirdOauth() {
+  uni.showModal({
+    title: '解绑提醒',
+    content: '解绑后您将无法通过微信登录此账号',
+    cancelText: '再想想',
+    confirmText: '确定',
+    success: async function (res) {
+      if (!res.confirm) {
+        return;
+      }
+      const result = await sheep.$platform.useProvider('wechat').unbind(state.thirdInfo.openid);
+      if (result) {
+        await getUserInfo();
+      }
     },
-    {
-      name: '女',
-      value: '2',
-    },
-  ];
-
-  const userInfo = computed(() => sheep.$store('user').userInfo);
-
-  // 选择性别
-  function onChangeGender(e) {
-    state.model.sex = e.detail.value;
-  }
-
-  // 修改手机号
-  const onChangeMobile = () => {
-    showAuthModal('changeMobile');
-  };
-
-  // 选择微信的头像，进行上传
-  async function onChooseAvatar(e) {
-    debugger;
-    const tempUrl = e.detail.avatarUrl || '';
-    if (!tempUrl) return;
-    const files = await uploadFilesFromPath(tempUrl);
-    if (files.length > 0) {
-      state.model.avatar = files[0].url;
-    }
-  }
-
-  // 手动选择头像，进行上传
-  async function onChangeAvatar() {
-    const files = await chooseAndUploadFile({ type: 'image' });
-    if (files.length > 0) {
-      state.model.avatar = files[0].url;
-    }
-  }
-
-  // 修改密码
-  function onSetPassword() {
-    showAuthModal('changePassword');
-  }
-
-  // 绑定第三方账号
-  async function bindThirdOauth() {
-    let result = await sheep.$platform.useProvider('wechat').bind();
-    if (result) {
-      await getUserInfo();
-    }
-  }
-
-  // 解绑第三方账号
-  function unBindThirdOauth() {
-    uni.showModal({
-      title: '解绑提醒',
-      content: '解绑后您将无法通过微信登录此账号',
-      cancelText: '再想想',
-      confirmText: '确定',
-      success: async function (res) {
-        if (!res.confirm) {
-          return;
-        }
-        const result = await sheep.$platform.useProvider('wechat').unbind(state.thirdInfo.openid);
-        if (result) {
-          await getUserInfo();
-        }
-      },
-    });
-  }
-
-  // 保存信息
-  async function onSubmit() {
-    const { code } = await UserApi.updateUser({
-      avatar: state.model.avatar,
-      nickname: state.model.nickname,
-      sex: state.model.sex,
-    });
-    if (code === 0) {
-      await getUserInfo();
-    }
-  }
-
-  // 获得用户信息
-  const getUserInfo = async () => {
-    // 个人信息
-    const userInfo = await sheep.$store('user').getInfo();
-    state.model = clone(userInfo);
-
-    // 获得社交用户的信息
-    if (sheep.$platform.name !== 'H5') {
-      const result = await sheep.$platform.useProvider('wechat').getInfo();
-      state.thirdInfo = result || {};
-    }
-  };
-
-  onBeforeMount(() => {
-    getUserInfo();
   });
+}
+
+// 保存信息
+async function onSubmit() {
+  const { code } = await UserApi.updateUser({
+    avatar: state.model.avatar,
+    nickname: state.model.nickname,
+    sex: state.model.sex,
+  });
+  if (code === 0) {
+    await getUserInfo();
+  }
+}
+
+// 获得用户信息
+const getUserInfo = async () => {
+  // 个人信息
+  const userInfo = await sheep.$store('user').getInfo();
+  state.model = clone(userInfo);
+
+  // 获得社交用户的信息
+  if (sheep.$platform.name !== 'H5') {
+    const result = await sheep.$platform.useProvider('wechat').getInfo();
+    state.thirdInfo = result || {};
+  }
+};
+
+onBeforeMount(() => {
+  getUserInfo();
+});
 </script>
 
 <style lang="scss" scoped>
-  :deep() {
-    .uni-file-picker {
-      border-radius: 50%;
-    }
-
-    .uni-file-picker__container {
-      margin: -14rpx -12rpx;
-    }
-
-    .file-picker__progress {
-      height: 0 !important;
-    }
-
-    .uni-list-item__content-title {
-      font-size: 28rpx !important;
-      color: #333333 !important;
-      line-height: normal !important;
-    }
-
-    .uni-icons {
-      font-size: 40rpx !important;
-    }
-
-    .is-disabled {
-      color: #333333;
-    }
+:deep() {
+  .uni-file-picker {
+    border-radius: 50%;
   }
 
-  :deep(.disabled) {
-    opacity: 1;
+  .uni-file-picker__container {
+    margin: -14rpx -12rpx;
   }
 
-  .gender-name {
-    font-size: 28rpx;
-    font-weight: 500;
-    line-height: normal;
+  .file-picker__progress {
+    height: 0 !important;
+  }
+
+  .uni-list-item__content-title {
+    font-size: 28rpx !important;
+    color: #333333 !important;
+    line-height: normal !important;
+  }
+
+  .uni-icons {
+    font-size: 40rpx !important;
+  }
+
+  .is-disabled {
     color: #333333;
   }
+}
 
-  .title-box {
-    font-size: 28rpx;
-    font-weight: 500;
-    color: #666666;
-    line-height: 100rpx;
-  }
+:deep(.disabled) {
+  opacity: 1;
+}
 
-  .logout-btn {
-    width: 710rpx;
-    height: 80rpx;
-    background: linear-gradient(90deg, var(--ui-BG-Main), var(--ui-BG-Main-gradient));
-    border-radius: 40rpx;
-    font-size: 30rpx;
-    font-weight: 500;
-    color: $white;
-  }
+.gender-name {
+  font-size: 28rpx;
+  font-weight: 500;
+  line-height: normal;
+  color: #333333;
+}
 
-  .radio-dark {
-    filter: grayscale(100%);
-    filter: gray;
-    opacity: 0.4;
-  }
+.title-box {
+  font-size: 28rpx;
+  font-weight: 500;
+  color: #666666;
+  line-height: 100rpx;
+}
 
-  .content-img {
-    border-radius: 50%;
-  }
-  .header-box-content {
-    position: relative;
-    width: 160rpx;
-    height: 160rpx;
-    overflow: hidden;
-    border-radius: 50%;
-  }
-  .avatar-action {
-    position: absolute;
-    left: 50%;
-    transform: translateX(-50%);
-    bottom: 0;
-    z-index: 1;
+.logout-btn {
+  width: 710rpx;
+  height: 80rpx;
+  background: linear-gradient(90deg, var(--ui-BG-Main), var(--ui-BG-Main-gradient));
+  border-radius: 40rpx;
+  font-size: 30rpx;
+  font-weight: 500;
+  color: $white;
+}
+
+.radio-dark {
+  filter: grayscale(100%);
+  filter: gray;
+  opacity: 0.4;
+}
+
+.content-img {
+  border-radius: 50%;
+}
+
+.header-box-content {
+  position: relative;
+  width: 160rpx;
+  height: 160rpx;
+  overflow: hidden;
+  border-radius: 50%;
+}
+
+.avatar-action {
+  position: absolute;
+  left: 50%;
+  transform: translateX(-50%);
+  bottom: 0;
+  z-index: 1;
+  width: 160rpx;
+  height: 46rpx;
+  background: rgba(#000000, 0.3);
+
+  .avatar-action-btn {
     width: 160rpx;
     height: 46rpx;
-    background: rgba(#000000, 0.3);
+    font-weight: 500;
+    font-size: 24rpx;
+    color: #ffffff;
+  }
+}
 
-    .avatar-action-btn {
-      width: 160rpx;
-      height: 46rpx;
-      font-weight: 500;
-      font-size: 24rpx;
-      color: #ffffff;
-    }
+// 绑定项
+.account-list {
+  background-color: $white;
+  height: 100rpx;
+  padding: 0 20rpx;
+
+  .list-img {
+    width: 40rpx;
+    height: 40rpx;
+    margin-right: 10rpx;
   }
 
-  // 绑定项
-  .account-list {
-    background-color: $white;
-    height: 100rpx;
-    padding: 0 20rpx;
-
-    .list-img {
-      width: 40rpx;
-      height: 40rpx;
-      margin-right: 10rpx;
-    }
-
-    .list-name {
-      font-size: 28rpx;
-      color: #333333;
-    }
-
-    .info {
-      .avatar {
-        width: 38rpx;
-        height: 38rpx;
-        border-radius: 50%;
-        overflow: hidden;
-      }
-
-      .name {
-        font-size: 28rpx;
-        font-weight: 400;
-        color: $dark-9;
-      }
-    }
-
-    .bind-box {
-      width: 100rpx;
-      height: 50rpx;
-      line-height: normal;
-      display: flex;
-      justify-content: center;
-      align-items: center;
-      font-size: 24rpx;
-
-      .bind-btn {
-        width: 100%;
-        height: 100%;
-        border-radius: 25rpx;
-        background: #f4f4f4;
-        color: #999999;
-      }
-      .relieve-btn {
-        width: 100%;
-        height: 100%;
-        border-radius: 25rpx;
-        background: var(--ui-BG-Main-opacity-1);
-        color: var(--ui-BG-Main);
-      }
-    }
-  }
-
-  .list-border {
+  .list-name {
     font-size: 28rpx;
-    font-weight: 400;
     color: #333333;
-    border-bottom: 2rpx solid #eeeeee;
   }
 
-  image {
-    width: 100%;
-    height: 100%;
+  .info {
+    .avatar {
+      width: 38rpx;
+      height: 38rpx;
+      border-radius: 50%;
+      overflow: hidden;
+    }
+
+    .name {
+      font-size: 28rpx;
+      font-weight: 400;
+      color: $dark-9;
+    }
   }
+
+  .bind-box {
+    width: 100rpx;
+    height: 50rpx;
+    line-height: normal;
+    display: flex;
+    justify-content: center;
+    align-items: center;
+    font-size: 24rpx;
+
+    .bind-btn {
+      width: 100%;
+      height: 100%;
+      border-radius: 25rpx;
+      background: #f4f4f4;
+      color: #999999;
+    }
+
+    .relieve-btn {
+      width: 100%;
+      height: 100%;
+      border-radius: 25rpx;
+      background: var(--ui-BG-Main-opacity-1);
+      color: var(--ui-BG-Main);
+    }
+  }
+}
+
+.list-border {
+  font-size: 28rpx;
+  font-weight: 400;
+  color: #333333;
+  border-bottom: 2rpx solid #eeeeee;
+}
+
+image {
+  width: 100%;
+  height: 100%;
+}
 </style>

src/pages/wechat/index.vue

@@ -0,0 +1,153 @@
+<template>
+    <!-- 顶部导航 -->
+    <wd-config-provider theme="dark">
+        <wd-navbar title="福利中心" safeAreaInsetTop :bordered="false">
+            <template #right>
+                <navigator hover-class="navigator-hover" />
+            </template>
+        </wd-navbar>
+        <!-- 用户信息 -->
+        <view class="mx-20rpx mt-30rpx bg-color-dark rounded-12rpx flex justify-between items-center px-6 py-4">
+            <view class="flex items-center">
+                <image :src="userInfo.avatar" class="size-50px rounded-full bg-#333 border border-amber border-solid"
+                    mode="aspectFill" />
+                <view class="flex-1 ml-20rpx">
+                    <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
+                class="text-color-theme-dark border-color-theme border-1px border-solid active_cl_bg-color-theme text-xs text-center px-2 py-8rpx rounded-full">
+                退出登录
+            </view>
+        </view>
+        <!-- 提现相关 -->
+        <view class="mx-20rpx mt-30rpx bg-color-dark rounded-12rpx px-6 py-4">
+            <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 class="text-color-theme text-2xl">{{ v.value }}</text>
+                    <text class="mt-10rpx">{{ v.title }}</text>
+                </view>
+            </view>
+            <view class="flex justify-center items-center mt-30rpx">
+                <text
+                    class="bg-color-theme-dark active_cl_bg-color-theme text-base text-center px-80rpx py-12rpx rounded-full">
+                    立即提现
+                </text>
+            </view>
+        </view>
+        <!-- tab -->
+        <view class="mx-20rpx mt-30rpx bg-color-dark rounded-12rpx py-4 flex justify-evenly items-center">
+            <view class="flex-1 flex-col justify-center items-center" v-for="(v, i) in data.menuTab" :key="i"
+                @tap="doItem(v)">
+                <div class="size-100rpx flex justify-center items-center rounded-full"
+                    :style="{ backgroundColor: v.bgColor }">
+                    <text class="iconfont text-2xl" :class="v.icon" />
+                </div>
+                <text class="mt-10rpx">{{ v.title }}</text>
+            </view>
+        </view>
+        <!-- 规则 -->
+        <view class="mx-20rpx mt-30rpx bg-color-dark rounded-12rpx px-6 py-4">
+            <view class="text-lg">邀请奖励规则</view>
+            <view class="mt-30rpx">
+                <view class="card-thin flex items-start px-16rpx py-12rpx mb-15rpx" v-for="(v, i) in data.rule">
+                    <view class="size-40rpx flex justify-center items-center bg-color-theme-dark rounded-8rpx">
+                        <text class="text-base">{{ i + 1 }}</text>
+                    </view>
+                    <text class="ml-20rpx text-xs">{{ v.title }}</text>
+                </view>
+            </view>
+        </view>
+        <!-- 海报 -->
+        <view class="mx-20rpx mt-30rpx bg-color-dark rounded-12rpx px-6 py-4">
+            <view class="text-lg">我的邀请海报</view>
+            <image class="mt-30rpx" src="/src/static/upload-icon.png" mode="widthFix" />
+            <view class="mt-30rpx flex justify-between items-center text-xs">
+                <view
+                    class="flex-1 text-center px-2 py-8rpx border-1px border-solid rounded-full border-color-theme active_cl_bg-color-theme">
+                    复制链接
+                </view>
+                <view class="w-30rpx" />
+                <view
+                    class="flex-1 text-center px-2 py-8rpx border-1px border-solid rounded-full border-color-theme-dark bg-color-theme-dark active_cl_bg-color-theme">
+                    保存海报
+                </view>
+            </view>
+        </view>
+        <view class="h-30rpx" />
+    </wd-config-provider>
+</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: '礼物奖励',
+            icon: 'icon-liwu',
+            bgColor: '#fad34a',
+            path: "",
+        },
+        {
+            title: '钻石充值',
+            icon: 'icon-lv_zuanshi_fill',
+            bgColor: '#ff5081',
+            path: "/pages/profile/recharge",
+        },
+        {
+            title: '会员中心',
+            icon: 'icon-huiyuan',
+            bgColor: '#ebc26a',
+            path: "/pages/profile/apply-vip",
+        },
+        {
+            title: '邀请好友',
+            icon: 'icon-tianjiahaoyou',
+            bgColor: '#a4e55a',
+            path: "",
+        },
+    ],
+    rule: [
+        {
+            title: '通过链接/二维码邀请用户首次充值,可获得50%现金奖励',
+        },
+        {
+            title: '邀请奖励满200元可提现,3个月工作日内到账',
+        },
+    ],
+}
+
+const doItem = (item) => {
+    if (item.path) {
+        uni.navigateTo({
+            url: item.path,
+        });
+    }
+}
+
+</script>

src/static/icon/self/iconfont.css

@@ -0,0 +1,30 @@
+@font-face {
+  font-family: "iconfont"; /* Project id 5079650 */
+  src: url('//at.alicdn.com/t/c/font_5079650_q7e82zvyi4j.woff2?t=1764739737667') format('woff2'),
+       url('//at.alicdn.com/t/c/font_5079650_q7e82zvyi4j.woff?t=1764739737667') format('woff'),
+       url('//at.alicdn.com/t/c/font_5079650_q7e82zvyi4j.ttf?t=1764739737667') format('truetype');
+}
+
+.iconfont {
+  font-family: "iconfont" !important;
+  font-size: 16px;
+  font-style: normal;
+  -webkit-font-smoothing: antialiased;
+  -moz-osx-font-smoothing: grayscale;
+}
+
+.icon-huiyuan:before {
+  content: "\e67e";
+}
+
+.icon-lv_zuanshi_fill:before {
+  content: "\e601";
+}
+
+.icon-tianjiahaoyou:before {
+  content: "\e618";
+}
+
+.icon-liwu:before {
+  content: "\e600";
+}

unocss.config.ts

@@ -47,6 +47,18 @@ export default {
         'background-color': '#B37B2E',
       },
     ],
+    [
+      'border-color-theme',
+      {
+        'border-color': '#F9C26F',
+      },
+    ],
+    [
+      'border-color-theme-dark',
+      {
+        'border-color': '#D29E52',
+      },
+    ],
     [
       'text-color-theme',
       {
@@ -85,6 +97,14 @@ export default {
         'border-radius': '16rpx',
       },
     ],
+    [
+      'card-thin',
+      {
+        'background-color': 'rgba(0, 0, 0, 0.3)',
+        'box-shadow': 'rgba(0, 0, 0, 0.05) 0px 0px 0px 1px',
+        'border-radius': '16rpx',
+      },
+    ],
   ],
 
   transformers: [transformerAttributify(), transformerClass()],