feat(region-select): 区域选择添加主动选择按钮

components/region-select/index.vue

@@ -70,14 +70,22 @@ export default {
         res.data.regionStatus === 0 &&
         !res.data.province
       ) {
-        await this.loadAreaTree()
+        this.open()
-        this.popupVisible = true
       }
     } catch (error) {
       console.error('Failed to get region select info:', error)
     }
   },
   methods: {
+    async open() {
+      return new Promise(async (resolve, reject) => {
+        if (this.areaTree.length === 0) {
+          await this.loadAreaTree()
+        }
+        this.popupVisible = true
+        resolve()
+      })
+    },
     async loadAreaTree() {
       try {
         const res = await getRegionAreaTree()

pages/mine/index.vue

@@ -223,26 +223,42 @@
         <view class="my_title">
           <text class="thetitle">收益区域</text>
         </view>
-        <view class="region-info-box">
+        <template
-          <view class="region-info-item">
+          v-if="
-            <text class="region-info-label">{{ '省' }}</text>
+            regionInfo.provinceVal || regionInfo.cityVal || regionInfo.countyVal
-            <text class="region-info-value">{{
+          "
-              regionInfo.provinceVal || '-'
+        >
-            }}</text>
+          <view class="region-info-box">
+            <view class="region-info-item">
+              <text class="region-info-label">{{ '省' }}</text>
+              <text class="region-info-value">{{
+                regionInfo.provinceVal || '-'
+              }}</text>
+            </view>
+            <view class="region-info-item">
+              <text class="region-info-label">{{ '市' }}</text>
+              <text class="region-info-value">{{
+                regionInfo.cityVal || '-'
+              }}</text>
+            </view>
+            <view class="region-info-item">
+              <text class="region-info-label">{{ '区' }}</text>
+              <text class="region-info-value">{{
+                regionInfo.countyVal || '-'
+              }}</text>
+            </view>
           </view>
-          <view class="region-info-item">
+        </template>
-            <text class="region-info-label">{{ '市' }}</text>
+        <template v-else>
-            <text class="region-info-value">{{
+          <view class="region-select-action">
-              regionInfo.cityVal || '-'
+            <u-button
-            }}</text>
+              @click="openRegionSelect"
+              color="#005BAC"
+              shape="circle"
+              text="选择区域"
+            ></u-button>
           </view>
-          <view class="region-info-item">
+        </template>
-            <text class="region-info-label">{{ '区' }}</text>
-            <text class="region-info-value">{{
-              regionInfo.countyVal || '-'
-            }}</text>
-          </view>
-        </view>
       </view>
 
       <!-- 市场动态 -->
@@ -258,16 +274,30 @@
             <view class="stat-content">
               <view class="stat-item">
                 <text class="stat-label">总业绩</text>
-                <text class="stat-value">{{ totalSumPv || '0.00' }}</text>
+                <view class="stat-value">
+                  <text class="stat-value__integer">{{
+                    formattedTotalSumPv.integer
+                  }}</text>
+                  <text class="stat-value__decimal">{{
+                    formattedTotalSumPv.decimal
+                  }}</text>
+                </view>
               </view>
               <view class="stat-divider"></view>
               <view class="stat-item">
                 <text class="stat-label">小区业绩</text>
-                <text class="stat-value">{{ smallAreaPv || '0.00' }}</text>
+                <view class="stat-value">
+                  <text class="stat-value__integer">{{
+                    formattedSmallAreaPv.integer
+                  }}</text>
+                  <text class="stat-value__decimal">{{
+                    formattedSmallAreaPv.decimal
+                  }}</text>
+                </view>
               </view>
             </view>
             <view class="stat-more-arrow">
-              <u-icon name="arrow-right" color="#fff" size="16"></u-icon>
+              <u-icon name="arrow-right" color="#fff" size="14"></u-icon>
             </view>
           </view>
           <view
@@ -277,16 +307,30 @@
             <view class="stat-content">
               <view class="stat-item">
                 <text class="stat-label">总盒数</text>
-                <text class="stat-value">{{ totalBox || '0' }}</text>
+                <view class="stat-value">
+                  <text class="stat-value__integer">{{
+                    formattedTotalBox.integer
+                  }}</text>
+                  <text class="stat-value__decimal">{{
+                    formattedTotalBox.decimal
+                  }}</text>
+                </view>
               </view>
               <view class="stat-divider"></view>
               <view class="stat-item">
                 <text class="stat-label">小区盒数</text>
-                <text class="stat-value">{{ smallAreaBox || '0' }}</text>
+                <view class="stat-value">
+                  <text class="stat-value__integer">{{
+                    formattedSmallAreaBox.integer
+                  }}</text>
+                  <text class="stat-value__decimal">{{
+                    formattedSmallAreaBox.decimal
+                  }}</text>
+                </view>
               </view>
             </view>
             <view class="stat-more-arrow">
-              <u-icon name="arrow-right" color="#fff" size="16"></u-icon>
+              <u-icon name="arrow-right" color="#fff" size="14"></u-icon>
             </view>
           </view>
         </view>
@@ -382,7 +426,7 @@
         </u-button>
       </view>
     </u-popup>
-    <RegionSelect />
+    <RegionSelect ref="regionSelect" />
     <!-- <talentList :drShow="drShow" @closeShow="closeShow"></talentList> -->
   </view>
 </template>
@@ -568,6 +612,38 @@ export default {
     regionInfoVisible() {
       return this.regionInfo?.regionStatus === 0
     },
+    formattedTotalSumPv() {
+      const value = String(this.totalSumPv || '0.00')
+      const parts = value.split('.')
+      return {
+        integer: parts[0],
+        decimal: parts.length > 1 ? `.${parts[1]}` : '',
+      }
+    },
+    formattedSmallAreaPv() {
+      const value = String(this.smallAreaPv || '0.00')
+      const parts = value.split('.')
+      return {
+        integer: parts[0],
+        decimal: parts.length > 1 ? `.${parts[1]}` : '',
+      }
+    },
+    formattedTotalBox() {
+      const value = String(this.totalBox || '0')
+      const parts = value.split('.')
+      return {
+        integer: parts[0],
+        decimal: parts.length > 1 ? `.${parts[1]}` : '',
+      }
+    },
+    formattedSmallAreaBox() {
+      const value = String(this.smallAreaBox || '0')
+      const parts = value.split('.')
+      return {
+        integer: parts[0],
+        decimal: parts.length > 1 ? `.${parts[1]}` : '',
+      }
+    },
   },
 
   methods: {
@@ -578,6 +654,19 @@ export default {
         }
       })
     },
+    openRegionSelect() {
+      uni.showLoading({
+        title: '加载中...',
+      })
+      this.$refs.regionSelect
+        ?.open()
+        .then(() => {
+          uni.hideLoading()
+        })
+        .catch(() => {
+          uni.hideLoading()
+        })
+    },
     goYear() {
       uni.navigateTo({
         url: '/pages/mine/yearGift/index',
@@ -1399,6 +1488,7 @@ export default {
 
 .stat-block:active {
   transform: scale(0.98);
+  filter: brightness(1.1);
 }
 
 .stat-block.primary {
@@ -1430,25 +1520,49 @@ export default {
 .stat-divider {
   width: 2rpx;
   height: 60rpx;
-  background-color: rgba(255, 255, 255, 0.4);
+  background: linear-gradient(
+    to bottom,
+    rgba(255, 255, 255, 0.1),
+    rgba(255, 255, 255, 0.5),
+    rgba(255, 255, 255, 0.1)
+  );
 }
 
 .stat-label {
   font-size: 24rpx;
-  margin-top: 8rpx;
   opacity: 0.9;
 }
 
 .stat-value {
-  font-size: 34rpx;
+  display: flex;
-  font-weight: 600;
+  align-items: baseline;
-  line-height: 1.2;
+  line-height: 1;
+  margin-top: 8rpx;
   word-break: break-all;
 }
 
+.stat-value__integer {
+  font-size: 40rpx;
+  font-weight: 600;
+}
+
+.stat-value__decimal {
+  font-size: 28rpx;
+  font-weight: 500;
+  margin-left: 4rpx;
+}
+
 .stat-more-arrow {
   margin-left: 20rpx;
   flex-shrink: 0;
+  width: 50rpx;
+  height: 50rpx;
+  border-radius: 50%;
+  background-color: rgba(255, 255, 255, 0.15);
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  box-shadow: inset 0 1px 1px rgba(255, 255, 255, 0.1);
 }
 
 @keyframes bling_shimmer {
@@ -1459,4 +1573,8 @@ export default {
     transform: translateX(100%);
   }
 }
+
+.region-select-action {
+  padding: 30rpx 20rpx;
+}
 </style>