Переглянути джерело

feat(frontend): 我的页面改为电商风格 - 订单五宫格/购物车/收货地址, 移除功能网格

- profile-main: 待办提醒区替换为我的订单区块(待付款/待发货/待收货/售后/全部订单)
- profile-main: 新增购物车(角标99+封顶)与收货地址入口
- profile-main: 移除功能入口网格, 设置改为菜单项放退出登录上方
- profile-main: loadOrderCounts 修正字段映射(pending/paid/shipped/refunding)
- profile-main: 补充 loadCartCount 方法定义
- order-list: onLoad 支持 status 参数, 我的订单五宫格点击直达对应状态列表

Ultraworked with [Sisyphus](https://github.com/oh-my-open-code/oh-my-open-code)

Co-authored-by: Sisyphus <sisyphus@ohmyopencode.ai>
Xiaogang Liao 2 місяців тому
батько
коміт
fca482cd4d

+ 173 - 137
cfc-frontend/pages/profile-main/profile.vue

@@ -153,89 +153,71 @@
         </view>
       </view>
 
-      <!-- 有待办的提醒(条件显示) -->
-      <view class="reminder-section" v-if="hasReminders">
-        <text class="section-title">📌 待办提醒</text>
-        <view class="reminder-grid">
-          <view class="reminder-item" v-if="pendingTasks > 0" @click="goToTasks">
-            <text class="reminder-icon">📋</text>
-            <view class="reminder-body">
-              <text class="reminder-text">待完成任务</text>
-              <text class="reminder-count">{{ pendingTasks }} 项</text>
-            </view>
-            <text class="reminder-arrow">›</text>
-          </view>
-          <view class="reminder-item" v-if="orderUnpaid > 0" @click="goToOrders">
-            <text class="reminder-icon">💳</text>
-            <view class="reminder-body">
-              <text class="reminder-text">待付款订单</text>
-              <text class="reminder-count">{{ orderUnpaid }} 笔</text>
-            </view>
-            <text class="reminder-arrow">›</text>
-          </view>
-          <view class="reminder-item" v-if="orderShipped > 0" @click="goToOrders">
-            <text class="reminder-icon">📦</text>
-            <view class="reminder-body">
-              <text class="reminder-text">待收货</text>
-              <text class="reminder-count">{{ orderShipped }} 笔</text>
-            </view>
-            <text class="reminder-arrow">›</text>
-          </view>
-          <view class="reminder-item" v-if="orderAfterSale > 0" @click="goToOrders">
-            <text class="reminder-icon">🔧</text>
-            <view class="reminder-body">
-              <text class="reminder-text">售后处理</text>
-              <text class="reminder-count">{{ orderAfterSale }} 笔</text>
-            </view>
-            <text class="reminder-arrow">›</text>
-          </view>
+      <!-- 我的订单(电商风格) -->
+      <view class="order-section">
+        <view class="order-section-header">
+          <text class="section-title">🛒 我的订单</text>
+          <text class="order-all-link" @click="goToOrders">全部订单 ›</text>
         </view>
-      </view>
-
-      <!-- 功能入口(精简网格) -->
-      <view class="menu-grid-section">
-        <view class="menu-grid">
-          <view class="menu-grid-item" @click="goToFamily">
-            <view class="menu-grid-icon-wrap" style="background:rgba(245,158,11,0.1)">
-              <text class="menu-grid-icon">👨‍👩‍👧‍👦</text>
+        <view class="order-card">
+          <view class="order-grid">
+            <view class="order-grid-item" @click="goToOrderStatus('pending')">
+              <view class="order-icon-wrap">
+                <text class="order-icon">💳</text>
+                <text class="order-badge" v-if="orderPending > 0">{{ orderPending }}</text>
+              </view>
+              <text class="order-grid-text">待付款</text>
             </view>
-            <text class="menu-grid-text">家庭成员</text>
-          </view>
-          <view class="menu-grid-item" @click="goToChallenges">
-            <view class="menu-grid-icon-wrap" style="background:rgba(255,107,157,0.1)">
-              <text class="menu-grid-icon">🔥</text>
+            <view class="order-grid-item" @click="goToOrderStatus('paid')">
+              <view class="order-icon-wrap">
+                <text class="order-icon">📦</text>
+                <text class="order-badge" v-if="orderUnpaid > 0">{{ orderUnpaid }}</text>
+              </view>
+              <text class="order-grid-text">待发货</text>
             </view>
-            <text class="menu-grid-text">家庭挑战</text>
-          </view>
-          <view class="menu-grid-item" @click="goToGrowth">
-            <view class="menu-grid-icon-wrap" style="background:rgba(16,185,129,0.1)">
-              <text class="menu-grid-icon">📈</text>
+            <view class="order-grid-item" @click="goToOrderStatus('shipped')">
+              <view class="order-icon-wrap">
+                <text class="order-icon">🚚</text>
+                <text class="order-badge" v-if="orderShipped > 0">{{ orderShipped }}</text>
+              </view>
+              <text class="order-grid-text">待收货</text>
             </view>
-            <text class="menu-grid-text">成长记录</text>
-          </view>
-          <view class="menu-grid-item" @click="goToHealthReports">
-            <view class="menu-grid-icon-wrap" style="background:rgba(14,165,233,0.1)">
-              <text class="menu-grid-icon">📋</text>
+            <view class="order-grid-item" @click="goToOrderStatus('refunding')">
+              <view class="order-icon-wrap">
+                <text class="order-icon">🔧</text>
+                <text class="order-badge" v-if="orderAfterSale > 0">{{ orderAfterSale }}</text>
+              </view>
+              <text class="order-grid-text">售后</text>
             </view>
-            <text class="menu-grid-text">健康报告</text>
-          </view>
-          <view class="menu-grid-item" v-if="role === 'parent'" @click="goToAppointments">
-            <view class="menu-grid-icon-wrap" style="background:rgba(99,102,241,0.1)">
-              <text class="menu-grid-icon">📅</text>
+            <view class="order-grid-item" @click="goToOrders">
+              <view class="order-icon-wrap">
+                <text class="order-icon">📋</text>
+              </view>
+              <text class="order-grid-text">全部</text>
             </view>
-            <text class="menu-grid-text">测评预约</text>
           </view>
-          <view class="menu-grid-item" @click="goToSettings">
-            <view class="menu-grid-icon-wrap" style="background:rgba(107,114,128,0.1)">
-              <text class="menu-grid-icon">⚙️</text>
+          <view class="order-extra-row">
+            <view class="order-extra-item" @click="goToCart">
+              <text class="order-extra-icon">🛒</text>
+              <text class="order-extra-text">购物车</text>
+              <text class="order-extra-badge" v-if="cartCount > 0">{{ cartCount > 99 ? '99+' : cartCount }}</text>
+            </view>
+            <view class="order-extra-divider"></view>
+            <view class="order-extra-item" @click="goToAddress">
+              <text class="order-extra-icon">📍</text>
+              <text class="order-extra-text">收货地址</text>
             </view>
-            <text class="menu-grid-text">设置</text>
           </view>
         </view>
       </view>
 
-      <!-- 退出登录 -->
-      <view class="logout-section">
+      <!-- 设置 + 退出 -->
+      <view class="bottom-menu-section">
+        <view class="menu-row" @click="goToSettings">
+          <text class="menu-row-icon">⚙️</text>
+          <text class="menu-row-text">设置</text>
+          <text class="menu-row-arrow">›</text>
+        </view>
         <view class="logout-btn" @click="logout">
           <text class="logout-text">退出登录</text>
         </view>
@@ -277,6 +259,7 @@ export default {
       // 家庭
       familyMembers: [],
       // 商城
+      orderPending: 0,
       orderUnpaid: 0,
       orderShipped: 0,
       orderAfterSale: 0,
@@ -306,9 +289,6 @@ export default {
     },
     upgradeBtnText() {
       return this.memberLevel === 'FAMILY' ? '升级' : '立即开通'
-    },
-    hasReminders() {
-      return this.pendingTasks > 0 || this.orderUnpaid > 0 || this.orderShipped > 0 || this.orderAfterSale > 0
     }
   },
   onShow() {
@@ -334,6 +314,7 @@ export default {
       this.loadTasks()
       this.loadChallenges()
       this.loadOrderCounts()
+      this.loadCartCount()
       this.loadProfileStats()
     },
     loadUserInfo() {
@@ -399,9 +380,18 @@ export default {
       var self = this
       getOrderCounts().then(function(res) {
         if (res && res.data) {
-          self.orderUnpaid = res.data.unpaid || res.data.paid || 0
+          self.orderPending = res.data.pending || 0
+          self.orderUnpaid = res.data.paid || 0
           self.orderShipped = res.data.shipped || 0
-          self.orderAfterSale = res.data.refunding || res.data.afterSale || 0
+          self.orderAfterSale = res.data.refunding || 0
+        }
+      }).catch(function() {})
+    },
+    loadCartCount() {
+      var self = this
+      cartCount().then(function(res) {
+        if (res && res.data != null) {
+          self.cartCount = res.data || 0
         }
       }).catch(function() {})
     },
@@ -469,6 +459,15 @@ export default {
     goToOrders: function() {
       uni.navigateTo({ url: '/pages/shop/order-list/order-list' })
     },
+    goToOrderStatus: function(status) {
+      uni.navigateTo({ url: '/pages/shop/order-list/order-list?status=' + status })
+    },
+    goToCart: function() {
+      uni.navigateTo({ url: '/pages/shop/cart/cart' })
+    },
+    goToAddress: function() {
+      uni.navigateTo({ url: '/pages/shop/address/address' })
+    },
     goToSettings: function() {
       uni.showActionSheet({
         itemList: ['完善信息', '家庭成员', '邀请加入', '设置密码', '隐私设置', '关于浠艾福'],
@@ -867,98 +866,135 @@ export default {
   line-height: 1;
 }
 
-/* 待办提醒 */
-.reminder-section {
+/* 我的订单(电商风格) */
+.order-section {
   margin: 0 30rpx 20rpx;
 }
-.reminder-grid {
-  display: flex;
-  flex-direction: row;
-  flex-wrap: wrap;
-  gap: 12rpx;
-}
-.reminder-item {
-  flex: 1;
-  min-width: 0;
-  background: #fff;
-  border-radius: 16rpx;
-  padding: 18rpx 20rpx;
+.order-section-header {
   display: flex;
   align-items: center;
-  gap: 12rpx;
-  box-shadow: 0 2rpx 8rpx rgba(0,0,0,0.04);
-}
-.reminder-icon {
-  font-size: 32rpx;
-  flex-shrink: 0;
-}
-.reminder-body {
-  flex: 1;
-  display: flex;
-  flex-direction: column;
-  min-width: 0;
-}
-.reminder-text {
-  font-size: 22rpx;
-  color: #333;
-  line-height: 1.2;
-}
-.reminder-count {
-  font-size: 20rpx;
-  color: #F97316;
-  font-weight: bold;
-  margin-top: 2rpx;
-}
-.reminder-arrow {
-  font-size: 28rpx;
-  color: #ccc;
-  flex-shrink: 0;
+  justify-content: space-between;
+  margin-bottom: 14rpx;
 }
-
-/* 功能网格 */
-.menu-grid-section {
-  margin: 0 30rpx 20rpx;
+.order-all-link {
+  font-size: 24rpx;
+  color: #999;
 }
-.menu-grid {
+.order-card {
   background: #fff;
   border-radius: 20rpx;
-  padding: 20rpx 12rpx;
+  padding: 24rpx 12rpx;
   box-shadow: 0 2rpx 12rpx rgba(0,0,0,0.06);
+}
+.order-grid {
   display: flex;
   flex-wrap: wrap;
-  gap: 8rpx;
 }
-.menu-grid-item {
-  width: 33.33%;
+.order-grid-item {
+  width: 20%;
   display: flex;
   flex-direction: column;
   align-items: center;
   gap: 10rpx;
-  padding: 12rpx 0;
+  padding: 8rpx 0;
 }
-.menu-grid-icon-wrap {
-  width: 68rpx;
-  height: 68rpx;
-  border-radius: 18rpx;
+.order-icon-wrap {
+  position: relative;
+  width: 64rpx;
+  height: 64rpx;
   display: flex;
   align-items: center;
   justify-content: center;
 }
-.menu-grid-icon {
-  font-size: 34rpx;
+.order-icon {
+  font-size: 40rpx;
   line-height: 1;
 }
-.menu-grid-text {
+.order-badge {
+  position: absolute;
+  top: -8rpx;
+  right: -14rpx;
+  min-width: 30rpx;
+  height: 30rpx;
+  line-height: 30rpx;
+  border-radius: 15rpx;
+  background: #FF4D4F;
+  color: #fff;
+  font-size: 18rpx;
+  text-align: center;
+  padding: 0 6rpx;
+}
+.order-grid-text {
   font-size: 22rpx;
   color: #666;
   line-height: 1;
 }
+.order-extra-row {
+  display: flex;
+  align-items: center;
+  margin-top: 20rpx;
+  padding-top: 20rpx;
+  border-top: 1rpx solid #F2F2F2;
+}
+.order-extra-item {
+  flex: 1;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  gap: 8rpx;
+}
+.order-extra-icon {
+  font-size: 28rpx;
+}
+.order-extra-text {
+  font-size: 24rpx;
+  color: #333;
+}
+.order-extra-badge {
+  min-width: 30rpx;
+  height: 30rpx;
+  line-height: 30rpx;
+  border-radius: 15rpx;
+  background: #F97316;
+  color: #fff;
+  font-size: 18rpx;
+  text-align: center;
+  padding: 0 6rpx;
+}
+.order-extra-divider {
+  width: 1rpx;
+  height: 30rpx;
+  background: #F2F2F2;
+}
 
-/* 退出 */
-.logout-section {
+/* 设置 + 退出 */
+.bottom-menu-section {
   margin: 0 30rpx;
   padding-bottom: 20rpx;
 }
+.menu-row {
+  width: 100%;
+  background: #fff;
+  border-radius: 16rpx;
+  padding: 24rpx;
+  display: flex;
+  align-items: center;
+  gap: 14rpx;
+  box-shadow: 0 2rpx 8rpx rgba(0,0,0,0.04);
+  margin-bottom: 20rpx;
+}
+.menu-row-icon {
+  font-size: 30rpx;
+}
+.menu-row-text {
+  flex: 1;
+  font-size: 26rpx;
+  color: #333;
+}
+.menu-row-arrow {
+  font-size: 28rpx;
+  color: #ccc;
+}
 .logout-btn {
   width: 100%;
   background: #fff;

+ 4 - 1
cfc-frontend/pages/shop/order-list/order-list.vue

@@ -144,7 +144,10 @@ export default {
       searchTimer: null
     }
   },
-  onLoad() {
+  onLoad(options) {
+    if (options && options.status) {
+      this.currentStatus = options.status
+    }
     this.loadCounts()
     this.loadOrders()
   },