feat(mine): 添加拓展结余展示

.vscode/settings.json

@@ -1,8 +1,8 @@
 {
   "editor.formatOnSave": true,
   "editor.codeActionsOnSave": {
-    "source.fixAll.eslint": true,
+    "source.fixAll.eslint": "explicit",
-    "source.organizeImports": true
+    "source.organizeImports": "explicit"
   },
   "editor.defaultFormatter": "esbenp.prettier-vscode",
   "[vue]": {

config/mine.js

@@ -1,16 +1,24 @@
-
 const http = uni.$u.http
 
 //我的市场
-export const getMyMarket = (params) => http.get('/sale/api/order/index-myMarket', { params })
+export const getMyMarket = params =>
+  http.get('/sale/api/order/index-myMarket', { params })
 
 // 我的市场点亮
-export const getMyMarketColor = (params) => http.get('/system/manage/area/get-light-area', { params })
+export const getMyMarketColor = params =>
+  http.get('/system/manage/area/get-light-area', { params })
 // 礼品地址列表
-export const getMemberGift = (params) => http.get('/member/api/member-gift/member-gift-list', { params })
+export const getMemberGift = params =>
+  http.get('/member/api/member-gift/member-gift-list', { params })
 
 //全部荣誉墙
-export const getMemberHonorWallAll = (params) => http.get('/member/api/member/member-honor-wall-all', { params })
+export const getMemberHonorWallAll = params =>
+  http.get('/member/api/member/member-honor-wall-all', { params })
 
 //年度奖衔
-export const yearAwards = (params) => http.get('/member/api/member/year-awards-list', { params })
+export const yearAwards = params =>
+  http.get('/member/api/member/year-awards-list', { params })
+
+// 结余查询
+export const getMemberBalance = () =>
+  http.get('/member/api/member-structure/az-framework')

config/request.js

@@ -20,7 +20,7 @@ module.exports = vm => {
 
     //#ifdef DEV_SERVER
     console.log('DEV_SERVER')
-    config.baseURL = '/prod-api'
+    config.baseURL = 'http://192.168.0.104:8080'
     //#endif
 
     //#ifdef QA_SERVER

pages/mine/index.vue

@@ -85,6 +85,55 @@
               </view>
             </view>
           </view>
+          <!-- 当前结余状态 -->
+          <view class="yestDay">
+            <view class="yes_t">拓展结余</view>
+            <view class="unified_balance_container">
+              <!-- 统一进度条 -->
+              <view class="unified_progress_bar">
+                <!-- 左区进度(从左开始) -->
+                <view
+                  class="left_progress"
+                  :class="{ big_area: balanceProgress.isLeftBig }"
+                  :style="{
+                    width: Math.max(balanceProgress.leftProgress, 0) + '%',
+                  }"
+                  v-if="balanceProgress.leftProgress > 0"
+                >
+                </view>
+
+                <!-- 右区进度(从右开始) -->
+                <view
+                  class="right_progress"
+                  :class="{ big_area: !balanceProgress.isLeftBig }"
+                  :style="{
+                    width: Math.max(balanceProgress.rightProgress, 0) + '%',
+                  }"
+                  v-if="balanceProgress.rightProgress > 0"
+                >
+                </view>
+
+                <!-- 左区数值显示(固定在左半区终点) -->
+                <view
+                  class="endpoint_label left_endpoint"
+                  :class="{ big_area_text: balanceProgress.isLeftBig }"
+                >
+                  左区: {{ balanceProgress.leftValue }}
+                </view>
+
+                <!-- 右区数值显示(固定在右半区终点) -->
+                <view
+                  class="endpoint_label right_endpoint"
+                  :class="{ big_area_text: !balanceProgress.isLeftBig }"
+                >
+                  右区: {{ balanceProgress.rightValue }}
+                </view>
+
+                <!-- 中心分割线 -->
+                <view class="center_divider"></view>
+              </view>
+            </view>
+          </view>
           <view class="yestDay">
             <view class="yes_t">昨日业绩</view>
             <view
@@ -296,6 +345,7 @@
 import clTabbar from '@/components/cl-tabbar.vue'
 import * as min from '@/config/balance.js'
 import * as api from '@/config/login.js'
+import { getMemberBalance } from '@/config/mine.js'
 // import talentList from "@/components/talentList.vue";
 export default {
   components: {
@@ -313,6 +363,7 @@ export default {
       waitPayNum: '',
       payNum: '',
       awards: {},
+      balanceData: {}, // 存储结余数据
       markMenuList: [
         {
           url: '/pages/performanceEchart/index',
@@ -479,6 +530,7 @@ export default {
     this.getInfo()
     this.orderNum()
     this.getUserAwardss()
+    this.getMemberBalance()
   },
 
   computed: {
@@ -521,9 +573,66 @@ export default {
         rawPercentage: clampedPercentage,
       }
     },
+    // 计算结余状态
+    balanceProgress() {
+      if (
+        !this.balanceData.tree ||
+        !this.balanceData.tree.length ||
+        !this.balanceData.config
+      ) {
+        return {
+          leftProgress: 0,
+          rightProgress: 0,
+          leftValue: 0,
+          rightValue: 0,
+          maxBig: 0,
+          maxSmall: 0,
+        }
+      }
+
+      const treeData = this.balanceData.tree[0]
+      const config = this.balanceData.config
+
+      const leftValue = parseFloat(treeData.leftFirstSurplus) || 0
+      const rightValue = parseFloat(treeData.rightFirstSurplus) || 0
+      const maxBig = parseFloat(config.expandBig) || 1
+      const maxSmall = parseFloat(config.expandSmall) || 1
+
+      // 判断大小区
+      const isLeftBig = leftValue >= rightValue
+
+      let leftProgress = 0
+      let rightProgress = 0
+
+      if (isLeftBig) {
+        leftProgress = Math.min((leftValue / maxBig) * 100, 100)
+        rightProgress = Math.min((rightValue / maxSmall) * 100, 100)
+      } else {
+        leftProgress = Math.min((leftValue / maxSmall) * 100, 100)
+        rightProgress = Math.min((rightValue / maxBig) * 100, 100)
+      }
+
+      return {
+        leftProgress,
+        rightProgress,
+        leftValue: leftValue.toFixed(0),
+        rightValue: rightValue.toFixed(0),
+        maxBig,
+        maxSmall,
+        isLeftBig,
+      }
+    },
   },
 
   methods: {
+    getMemberBalance() {
+      getMemberBalance().then(res => {
+        console.log('🌈res', res)
+        if (res.code === 200 && res.data) {
+          this.balanceData = res.data
+        }
+      })
+    },
     goYear() {
       uni.navigateTo({
         url: '/pages/mine/yearGift/index',
@@ -1341,4 +1450,169 @@ export default {
   font-size: 24rpx;
   padding: 0 4rpx;
 }
+
+/* 统一结余进度条样式 */
+.unified_balance_container {
+  flex: 1;
+  margin: 10rpx;
+}
+
+.progress_text {
+  position: absolute;
+  top: 50%;
+  transform: translateY(-50%);
+  font-size: 22rpx;
+  color: #000;
+  // text-shadow: 1rpx 1rpx 2rpx rgba(0, 0, 0, 0.8);
+  white-space: nowrap;
+  z-index: 5;
+}
+
+// .left_progress:not(.big_area) .progress_text,
+// .right_progress:not(.big_area) .progress_text {
+//   color: #000;
+//   text-shadow:
+//     1rpx 1rpx 2rpx rgba(0, 0, 0, 0.8),
+//     0 0 8rpx rgba(0, 91, 172, 0.8);
+// }
+
+// .left_progress.big_area .progress_text,
+// .right_progress.big_area .progress_text {
+//   color: #000;
+//   text-shadow:
+//     1rpx 1rpx 2rpx rgba(0, 0, 0, 0.8),
+//     0 0 8rpx rgba(255, 107, 53, 0.8);
+// }
+
+/* 终点标签样式 */
+.endpoint_label {
+  position: absolute;
+  top: 50%;
+  transform: translateY(-50%);
+  font-size: 22rpx;
+  color: #000;
+  padding: 8rpx 12rpx;
+  border-radius: 12rpx;
+  z-index: 15;
+  font-weight: 500;
+}
+
+.left_endpoint {
+  left: calc(50% - 10rpx);
+  transform: translate(-100%, -50%);
+}
+
+.right_endpoint {
+  right: calc(50% - 10rpx);
+  transform: translate(100%, -50%);
+}
+
+.left_text {
+  left: 10rpx;
+}
+
+.right_text {
+  right: 10rpx;
+}
+
+.unified_progress_bar {
+  height: 34rpx;
+  background: #eeeeee;
+  border-radius: 20rpx;
+  position: relative;
+  overflow: hidden;
+}
+
+.left_progress {
+  position: absolute;
+  left: 0;
+  top: 0;
+  height: 100%;
+  max-width: 50%;
+  background: linear-gradient(90deg, #005bac 0%, #3385d6 100%);
+  border-radius: 20rpx 0 0 20rpx;
+  transition: width 0.6s ease-in-out;
+  overflow: hidden;
+}
+
+.left_progress.big_area {
+  background: linear-gradient(90deg, #ff6b35 0%, #f7931e 100%);
+  box-shadow: 0 2rpx 8rpx rgba(255, 107, 53, 0.3);
+}
+
+.right_progress {
+  position: absolute;
+  right: 0;
+  top: 0;
+  height: 100%;
+  max-width: 50%;
+  background: linear-gradient(270deg, #005bac 0%, #3385d6 100%);
+  border-radius: 0 20rpx 20rpx 0;
+  transition: width 0.6s ease-in-out;
+  overflow: hidden;
+}
+
+.right_progress.big_area {
+  background: linear-gradient(270deg, #ff6b35 0%, #f7931e 100%);
+  box-shadow: 0 2rpx 8rpx rgba(255, 107, 53, 0.3);
+}
+
+.center_divider {
+  position: absolute;
+  left: 50%;
+  top: 0;
+  width: 2rpx;
+  height: 100%;
+  background: transparent;
+  transform: translateX(-50%);
+  z-index: 10;
+  box-shadow: 0 0 4rpx rgba(0, 0, 0, 0.2);
+}
+
+.left_progress::before,
+.right_progress::before {
+  content: '';
+  position: absolute;
+  top: 0;
+  left: 0;
+  width: 100%;
+  height: 100%;
+  background: linear-gradient(
+    100deg,
+    rgba(255, 255, 255, 0) 20%,
+    rgba(255, 255, 255, 0.4) 50%,
+    rgba(255, 255, 255, 0) 80%
+  );
+  transform: translateX(-100%);
+  animation: unified_shimmer_animation 3s infinite linear;
+}
+
+.right_progress::before {
+  background: linear-gradient(
+    -100deg,
+    rgba(255, 255, 255, 0) 20%,
+    rgba(255, 255, 255, 0.4) 50%,
+    rgba(255, 255, 255, 0) 80%
+  );
+  transform: translateX(100%);
+  animation: unified_shimmer_animation_right 3s infinite linear;
+}
+
+@keyframes unified_shimmer_animation {
+  0% {
+    transform: translateX(-100%);
+  }
+  100% {
+    transform: translateX(100%);
+  }
+}
+
+@keyframes unified_shimmer_animation_right {
+  0% {
+    transform: translateX(100%);
+  }
+  100% {
+    transform: translateX(-100%);
+  }
+}
 </style>