优化

mallApp/src/pages/home/recent.vue

@@ -20,7 +20,22 @@
             <button class="admin-button-com mini-btn blue top-button" @click="logout()">退出登录</button>
           </view>
           <view class="ghs_list_area flex-col justify-end">
-              <view class="ghs_box flex-col justify-end" v-for="item in list.data" :key="item.id">
+              <view class="ghs_box flex-col justify-end" v-for="(item, index) in list.data" :key="item.id">
+                <!-- 右上角tip按钮 -->
+                <view class="tip-button" @click.stop="showMoreOptions(index)">
+                  <view class="tip-icon"></view>
+                </view>
+                
+                <!-- 更多选项弹出菜单 -->
+                <view class="more-options-popup" v-if="activePopupIndex === index" @click.stop>
+                  <view class="popup-overlay" @click="hideMoreOptions"></view>
+                  <view class="popup-content">
+                    <view class="popup-item" @click="handlePopupAction('recharge', item)">
+                      <text>{{ Number(item.balance) < 0 ? '结账' : '充值' }}</text>
+                    </view>
+                  </view>
+                </view>
+
                 <view class="image-text_7 flex-row justify-between" @click.stop="bug(item)">
                   <view class="section_1 flex-col">
                     <image class="logo" :src="item.smallAvatar" />
@@ -86,7 +101,8 @@ export default {
   data () {
     return {
       //0没有登录 1有登录
-      loginStyle :0
+      loginStyle :0,
+      activePopupIndex: -1, // 控制弹出菜单的显示
     };
   },
   computed: {
@@ -165,6 +181,35 @@ export default {
           return false
         }
       })
+    },
+    showMoreOptions(index) {
+      this.activePopupIndex = index;
+    },
+    hideMoreOptions() {
+      this.activePopupIndex = -1;
+    },
+    handlePopupAction(action, item) {
+      // 先关闭弹出菜单
+      this.hideMoreOptions();
+      
+      // 根据动作类型调用相应的方法
+      switch(action) {
+        case 'getLevelChange':
+          this.getLevelChange(item);
+          break;
+        case 'getBalanceChange':
+          this.getBalanceChange(item);
+          break;
+        case 'getSettleList':
+          this.getSettleList(item);
+          break;
+        case 'getBuyList':
+          this.getBuyList(item);
+          break;
+        case 'recharge':
+          this.recharge(item);
+          break;
+      }
     }
   }
 };
@@ -462,6 +507,121 @@ export default {
           }
         }
 
+        // 右上角tip按钮样式
+        .tip-button {
+          position: absolute;
+          top: 20upx;
+          right: 20upx;
+          width: 44upx;
+          height: 44upx;
+          background-color: rgba(255, 255, 255, 0.95);
+          border-radius: 50%;
+          display: flex;
+          align-items: center;
+          justify-content: center;
+          z-index: 20;
+          cursor: pointer;
+          transition: all 0.3s ease;
+          box-shadow: 0 2upx 8upx rgba(0, 0, 0, 0.12);
+          border: 1upx solid rgba(0, 0, 0, 0.08);
+          
+          &:hover {
+            background-color: rgba(255, 255, 255, 1);
+            box-shadow: 0 4upx 12upx rgba(0, 0, 0, 0.18);
+            transform: scale(1.08);
+          }
+          
+          &:active {
+            transform: scale(0.95);
+          }
+          
+          .tip-icon {
+            width: 12upx;
+            height: 12upx;
+            position: relative;
+            
+            &::before {
+              content: '';
+              position: absolute;
+              width: 12upx;
+              height: 2upx;
+              background-color: #666;
+              border-radius: 1upx;
+              top: 2upx;
+              left: 0;
+              box-shadow: 0 4upx 0 #666, 0 8upx 0 #666;
+              transition: all 0.3s ease;
+            }
+          }
+          
+          &:hover .tip-icon::before {
+            background-color: #333;
+            box-shadow: 0 4upx 0 #333, 0 8upx 0 #333;
+          }
+        }
+
+        // 更多选项弹出菜单样式
+        .more-options-popup {
+          position: fixed;
+          top: 0;
+          left: 0;
+          width: 100vw;
+          height: 100vh;
+          z-index: 1000;
+          
+          .popup-overlay {
+            position: absolute;
+            top: 0;
+            left: 0;
+            width: 100%;
+            height: 100%;
+            background-color: rgba(0, 0, 0, 0.3);
+          }
+          
+          .popup-content {
+            position: absolute;
+            top: 50%;
+            left: 50%;
+            transform: translate(-50%, -50%);
+            background-color: white;
+            border-radius: 20upx;
+            padding: 0;
+            min-width: 400upx;
+            box-shadow: 0 10upx 30upx rgba(0, 0, 0, 0.3);
+            overflow: hidden;
+            
+            .popup-item {
+              padding: 35upx 40upx;
+              border-bottom: 1upx solid #f0f0f0;
+              text-align: center;
+              cursor: pointer;
+              transition: all 0.3s ease;
+              position: relative;
+              
+              &:last-child {
+                border-bottom: none;
+              }
+              
+              &:hover {
+                background-color: #f8f9fa;
+                transform: translateX(5upx);
+              }
+              
+              &:active {
+                background-color: #e9ecef;
+              }
+              
+              text {
+                color: #333;
+                font-size: 32upx;
+                font-weight: 500;
+                position: relative;
+                z-index: 1;
+              }
+            }
+          }
+        }
+
       }
     }
   }