feat:个人中心ui修改

.env

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

src/App.vue

@@ -21,20 +21,49 @@ export default {
     };
   },
   // #ifndef MP-WEIXIN
+  computed: {
+    unreadCount() {
+      let count = 0;
+      this.chatStore?.chats?.forEach((chat) => {
+        if (!chat.isDnd && !chat.delete && chat.targetId != -200) {
+          count += chat.unreadCount;
+        }
+      });
+      return count;
+    },
+  },
+  watch: {
+    unreadCount(newCount, oldCount) {
+      this.refreshUnreadBadge();
+    },
+  },
   methods: {
-    init() {
+    refreshUnreadBadge() {
+      if (this.unreadCount > 0) {
+        uni.setTabBarBadge({
+          index: 2,
+          text: this.unreadCount + '',
+        });
+      } else {
+        uni.removeTabBarBadge({
+          index: 2,
+          complete: () => { },
+        });
+      }
+    },
+    // 初始化聊天
+    async init() {
       this.reconnecting = false;
       this.isExit = false;
-      // 加载数据
-      this.loadStore()
-        .then(() => {
-          // 初始化websocket
-          this.initWebSocket();
-        })
-        .catch((e) => {
-          console.log(e);
-          this.exit();
-        });
+      try {
+        // 加载数据
+        await this.loadStore()
+        // 初始化websocket
+        this.initWebSocket();
+      } catch (error) {
+        console.log("初始化聊天:", error);
+        this.exit();
+      }
     },
     initWebSocket() {
       let loginInfo = uni.getStorageSync('loginInfo');
@@ -124,6 +153,7 @@ export default {
           this.chatStore.setLoading(false);
           // 刷新会话
           this.chatStore.refreshChats();
+          this.refreshUnreadBadge()
         })
         .catch((e) => {
           console.log(e);
@@ -468,6 +498,7 @@ export default {
           this.pullPrivateOfflineMessage(this.chatStore.privateMsgMaxId);
           this.pullGroupOfflineMessage(this.chatStore.groupMsgMaxId);
           this.configStore.setAppInit(true);
+          this.refreshUnreadBadge()
         })
         .catch((e) => {
           console.log(e);
@@ -486,13 +517,8 @@ export default {
   // #endif
 
   onLaunch() {
-    // 隐藏原生导航栏 使用自定义底部导航
-    // uni.hideTabBar({
-    //   fail: () => {},
-    // });
     // 加载Shopro底层依赖
     ShoproInit();
-
     // #ifndef MP-WEIXIN
     this.$mountStore();
     this.closeSplashscreen(1000); // 延迟1s，避免用户看到页面跳转
@@ -516,7 +542,6 @@ export default {
     const args = plus.runtime.arguments;
     if (args) {
     }
-
     // 获取剪贴板
     uni.getClipboardData({
       success: (res) => { },

src/pages/login/login.vue

@@ -9,8 +9,14 @@
 
       <view class="flex w-full flex-col items-center gap-40rpx">
         <view class="relative flex w-full items-center">
+          <!-- #ifdef MP-WEIXIN -->
+          <input class="h-100rpx w-full rounded-50rpx bg-color-light px-40rpx text-32rpx text-white" type="number"
+            placeholder="请输入账号" placeholder-style="color: rgba(255, 255, 255, 0.6)" v-model="phone" maxlength="11" />
+          <!-- #endif -->
+          <!-- #ifndef MP-WEIXIN -->
           <input class="h-100rpx w-full rounded-50rpx bg-color-light px-40rpx text-32rpx text-white" type="number"
             placeholder="请输入手机号" placeholder-style="color: rgba(255, 255, 255, 0.6)" v-model="phone" maxlength="11" />
+          <!-- #endif -->
         </view>
         <view class="relative flex w-full items-center">
           <input class="h-100rpx w-full rounded-50rpx bg-color-light px-40rpx text-32rpx text-white" type="number"
@@ -82,12 +88,14 @@ const isAgree = ref(false);
 const nodes = ref(''); // 同意协议的文本
 
 onShow(() => {
+  // #ifndef MP-WEIXIN
   if (!phone.value) {
     const lastLoginPhone = uni.getStorageSync('last_login_phone');
     if (lastLoginPhone) {
       phone.value = lastLoginPhone;
     }
   }
+  // #endif
 });
 
 const handleGetCode = async () => {
@@ -122,15 +130,6 @@ const handleLogin = async () => {
     return uni.showToast({ title: '手机号格式错误', icon: 'none' });
   if (!smsCode.value) return uni.showToast({ title: '请填写验证码', icon: 'none' });
 
-  // #ifdef MP-WEIXIN
-  if (!isAgree.value) {
-    uni.showToast({ title: '请先同意授权', icon: 'none' });
-    return
-  }
-  disposeLogin();
-  // #endif
-
-  // #ifndef MP-WEIXIN
   if (!isAgree.value) {
     agreeMessage
       .confirm({
@@ -139,11 +138,13 @@ const handleLogin = async () => {
       })
       .then(() => {
         disposeLogin();
+      })
+      .catch(error => {
+        uni.switchTab({ url: '/pages/wechat-tabbar/index' });
       });
     return;
   }
   disposeLogin();
-  // #endif
 };
 
 const disposeLogin = async () => {

src/pages/tabbar/components/user-ablum.vue

@@ -1,13 +1,9 @@
 <template>
-  <view class="p-4">
+  <view class="p-4 pb-0">
     <view class="flex items-center justify-between text-color-theme mb-1">
       <text>我的相册</text>
-      <navigator
-        class="flex-row-center"
-        url="/pages/profile/upload-album"
-        open-type="navigate"
-        hover-class="navigator-hover"
-      >
+      <navigator class="flex-row-center" url="/pages/profile/upload-album" open-type="navigate"
+        hover-class="navigator-hover">
         <wd-icon name="add-circle1" size="18px" />
         <text class="text-28rpx ml-1">上传相册</text>
       </navigator>
@@ -25,23 +21,23 @@
 </template>
 
 <script setup lang="ts">
-  export interface AlbumData {
-    resourceType: 'IMAGE' | 'VIDEO';
-    address: string;
-    id: string;
-  }
+export interface AlbumData {
+  resourceType: 'IMAGE' | 'VIDEO';
+  address: string;
+  id: string;
+}
 
-  const props = defineProps<{
-    ablumList: AlbumData[];
-  }>();
+const props = defineProps<{
+  ablumList: AlbumData[];
+}>();
 
-  const previewPhoto = (current: number) => {
-    if (!props.ablumList.length) return;
-    const urls = props.ablumList.map((item) => item.address);
-    uni.previewImage({
-      current,
-      urls,
-      indicator: 'number',
-    });
-  };
+const previewPhoto = (current: number) => {
+  if (!props.ablumList.length) return;
+  const urls = props.ablumList.map((item) => item.address);
+  uni.previewImage({
+    current,
+    urls,
+    indicator: 'number',
+  });
+};
 </script>

src/pages/tabbar/profile.vue

@@ -65,21 +65,25 @@
       </view>
 
       <!-- 开通vip -->
+      <navigator url="/pages/profile/apply-vip" open-type="navigate" hover-class="navigator-hover">
+        <view class="menu flex items-center py-2 px-3 mx-4">
+          <image class="size-48rpx" src="/src/static/me/vip.png" mode="scaleToFill" />
+          <view class="color-#222 font-size-sm font-bold">
+            开通会员 尊享特权
+          </view>
+          <view class="absolute right-18rpx top-18rpx flex items-center text-color-theme font-size-24rpx">
+            <text>去开通</text>
+            <text class="iconfont icon-youjiantou font-size-24rpx!"></text>
+          </view>
+        </view>
+      </navigator>
       <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">
-        <view class="font-900 font-italic text-xl">VIP</view>
-        <view class="flex items-center">
-          <text v-if="!userInfo.memberVip?.vip" class="text-xs">尊享vip免费特权</text>
-          <text v-else>{{ formatDate(userInfo.memberVip.expirationTime, "YYYY-MM-DD") }}</text>
-          <navigator url="/pages/profile/apply-vip" open-type="navigate" hover-class="navigator-hover">
-            <text v-if="!userInfo.memberVip?.vip"
-              class="ml-4 px-4 py-1 rounded-full text-24rpx bg-color-theme text-black">
-              立即开通
-            </text>
-            <text v-else class="ml-4 px-2 py-1 rounded-1 text-24rpx bg-color-theme text-black">
-              立即续费
-            </text>
-          </navigator>
+        class="mx-4 px-1 py-2 rounded-b-2 bg-gradient-to-b from-#111 to-#222 b-b-4 b-solid b-t-#D29E52/60 b-l-#D29E52/40 b-r-#D29E52/40 b-b-#D29E52/20 flex items-center justify-evenly">
+        <view v-for="(v, i) in menu" :key="i" class="menu-item flex flex-col-center size-150rpx relative"
+          @tap="onTapMenu(v)">
+          <image :src="v.icon" mode="aspectFill" class="size-full" />
+          <text class="text-xs absolute bottom-20rpx font-size-24rpx" :style="{ color: v.titleColor }">{{ v.title
+          }}</text>
         </view>
       </view>
 
@@ -87,7 +91,7 @@
       <user-ablum :ablumList="ablumList" />
 
       <!-- 邀请福利 -->
-      <view class="bg-gradient-to-r from-#d29e52 to-#333 py-2 px-4 rounded-2 mx-4 c-black">
+      <view v-if="false" class="bg-gradient-to-r from-#d29e52 to-#333 py-2 px-4 rounded-2 mx-4 c-black">
         <view class="flex justify-between items-center">
           <view class="flex items-center">
             <view class="bg-black rounded-full size-40rpx flex-row-center">
@@ -103,7 +107,7 @@
       </view>
 
       <!-- 菜单 -->
-      <view class="mt-2 mx-1">
+      <view class="mt-4 mx-1">
         <wd-cell-group>
           <wd-cell v-for="(item, index) in MenuCellList" :key="index" :title="item.title" title-width="110px"
             :value="item.value" icon-size="24" :icon="item.icon" is-link :to="item.to" @click="item.onClick">
@@ -170,7 +174,6 @@ import { formatDate } from '@/sheep/helper/utils';
 // @ts-ignore
 import { fen2yuanSimple } from '@/sheep/hooks/useGoods';
 import { useMessage } from '@/uni_modules/wot-design-uni';
-import { gotoAppPermissionSetting, requestPermission } from '@/sheep/util/permission';
 
 const { ablumList } = useAblum();
 
@@ -190,6 +193,33 @@ const recentTotal = ref({
   userLikeMeTotal: 0,
 });
 
+const menu = ref([
+  {
+    title: '购买砖石',
+    titleColor: "#d08c30",
+    icon: "/src/static/me/menu_1.png",
+    url: "/pages/profile/recharge"
+  },
+  {
+    title: '我的收益',
+    titleColor: "#654510",
+    icon: "/src/static/me/menu_2.png",
+    url: "/pages/wechat-tabbar/index"
+  },
+  {
+    title: '邀请赚钱',
+    titleColor: "#f56251",
+    icon: "/src/static/me/menu_3.png",
+    url: "/pages/wechat/pages/inviter/index"
+  },
+  {
+    title: '认证中心',
+    titleColor: "#23c0d7",
+    icon: "/src/static/me/menu_4.png",
+    url: "/pages/profile/verify-status"
+  }
+])
+
 // 我的评价数据
 const myEvaluation = reactive({
   scoreSc: 0,
@@ -268,7 +298,7 @@ const goFeedback = () => {
 const MenuCellList = [
   // { title: '我的收益', value: '', icon: 'wallet', to: '/pages/wechat-tabbar/index' },
   { title: '访客记录', value: '', icon: 'browse', to: '/pages/profile/view-record' },
-  { title: '认证中心', value: '', icon: 'user', to: '/pages/profile/verify-status' },
+  // { title: '认证中心', value: '', icon: 'discount-filled', to: '/pages/profile/verify-status' },
   { title: '联系方式', value: '修改微信需客服核实', icon: 'user', to: '/pages/profile/set-wechat' },
   { title: '我的动态', value: '', icon: 'star', to: '/pages/profile/my-moment' },
   { title: '我的评价', value: '', icon: 'view-module', to: '', onClick: lookMyEvaluation },
@@ -277,4 +307,18 @@ const MenuCellList = [
   { title: '关注公众号', value: '领取福利、获取最新下载地址', icon: 'qrcode', to: '', onClick: subOfficial },
   // { title: '设置', value: '', icon: 'setting1', to: '/pages/profile/setting' },
 ];
+
+const onTapMenu = (item: any) => {
+  uni.navigateTo({
+    url: item.url,
+  });
+}
 </script>
+
+<style lang="scss" scope>
+.menu {
+  background: url("/src/static/me/bg.png") no-repeat;
+  background-size: 100%;
+  position: relative;
+}
+</style>

src/static/icon/self/iconfont.css

@@ -1,8 +1,8 @@
 @font-face {
   font-family: "iconfont"; /* Project id 5079650 */
-  src: url('//at.alicdn.com/t/c/font_5079650_dlgclk5ww3.woff2?t=1767687032692') format('woff2'),
-       url('//at.alicdn.com/t/c/font_5079650_dlgclk5ww3.woff?t=1767687032692') format('woff'),
-       url('//at.alicdn.com/t/c/font_5079650_dlgclk5ww3.ttf?t=1767687032692') format('truetype');
+  src: url('https://at.alicdn.com/t/c/font_5079650_dlgclk5ww3.woff2?t=1767687032692') format('woff2'),
+       url('https://at.alicdn.com/t/c/font_5079650_dlgclk5ww3.woff?t=1767687032692') format('woff'),
+       url('https://at.alicdn.com/t/c/font_5079650_dlgclk5ww3.ttf?t=1767687032692') format('truetype');
 }
 
 .iconfont {