feat(regionSelect): 会员选择区域

pages/commonMixins/regionSelect.js

@@ -20,7 +20,7 @@ export default {
       if (!gradeValue) return
       this.gradeValue = gradeValue
       const params = {
-        type: gradeValue === 80 ? 'city' : 'county',
+        type: 'county',
       }
       getRegionAreaList(params).then(res => {
         this.provinceList = res.data.filter(item => item.parent === 0)
@@ -44,7 +44,6 @@ export default {
       )
     },
     getCityFilterList() {
-      if (this.gradeValue === 80) return
       if (!this.countyList.length) {
         this.cityList = []
       }
@@ -53,7 +52,7 @@ export default {
       )
     },
     getCountyFilterList() {
-      if (!this.gradeValue || this.gradeValue === 80) {
+      if (!this.gradeValue) {
         this.countyList = []
       }
     },

pages/mine/index.vue

@@ -97,49 +97,79 @@
       </view>
     </view>
 
-    <!-- 收益区域 -->
+    <!-- 区域信息Tab -->
-    <view class="my_order" v-if="regionInfoVisible">
+    <view class="my_order" v-if="showRegionTabs">
-      <view class="my_title">
+      <u-tabs
-        <text class="thetitle">收益区域</text>
+        :list="regionTabList"
-      </view>
+        @change="onRegionTabChange"
-      <template
+        :current="currentRegionTab"
-        v-if="
+        :activeColor="'#005BAC'"
-          regionInfo.provinceVal || regionInfo.cityVal || regionInfo.countyVal
+        :inactiveColor="'#999999'"
-        "
+        :lineWidth="30"
+        :lineHeight="4"
+        :lineColor="'#005BAC'"
+        :itemStyle="'padding: 15rpx 25rpx; font-size: 20rpx;'"
       >
-        <view class="region-info-box">
+      </u-tabs>
-          <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>
-      </template>
-      <template v-else>
-        <view class="region-select-action">
-          <u-button
-            @click="openRegionSelect"
-            color="#005BAC"
-            shape="circle"
-            text="选择区域"
-          ></u-button>
-        </view>
-      </template>
-    </view>
 
+      <!-- Tab内容区域 -->
+      <view class="tab-content">
+        <!-- 已选区域内容 -->
+        <view v-if="currentRegionTab === 0 && hasRegionData">
+          <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>
+
+        <!-- 配送中心内容 -->
+        <view v-if="currentRegionTab === 1 && hasDistributionData">
+          <view class="region-info-box">
+            <view class="region-info-item">
+              <text class="region-info-label">{{ '省' }}</text>
+              <text class="region-info-value">{{
+                dstributionCenter.provinceVal || '-'
+              }}</text>
+            </view>
+            <view class="region-info-item">
+              <text class="region-info-label">{{ '市' }}</text>
+              <text class="region-info-value">{{
+                dstributionCenter.cityVal || '-'
+              }}</text>
+            </view>
+            <view class="region-info-item">
+              <text class="region-info-label">{{ '区' }}</text>
+              <text class="region-info-value">{{
+                dstributionCenter.countyVal || '-'
+              }}</text>
+            </view>
+          </view>
+        </view>
+
+        <!-- 配送中心无数据状态 -->
+        <view v-if="currentRegionTab === 1 && !hasDistributionData">
+          <view class="empty-state">
+            <text class="empty-text">暂无配送中心信息</text>
+          </view>
+        </view>
+      </view>
+    </view>
     <view class="my_order">
       <view class="order_flex">
         <template v-for="(item, index) in otherMenuList">
@@ -362,6 +392,7 @@ export default {
       ifSpecial: false,
       awardsList: '',
       regionInfo: {},
+      dstributionCenter: {},
       smallAreaBox: 0,
       totalBox: 0,
       // performanceData: {},
@@ -369,6 +400,7 @@ export default {
       totalSumPv: 0,
       smallAreaPv: 0,
       isNormal: false,
+      currentRegionTab: 0, // 当前选中的tab索引
     }
   },
   onShow() {
@@ -378,7 +410,7 @@ export default {
         return
       }
       this.isNormal = isNormal
-      // this.getRegionSelect()
+      this.getRegionSelect()
       this.getMemberBoxCount()
       this.getMarketDynamicBoxCount()
       // this.getUserAwardss()
@@ -428,8 +460,8 @@ export default {
     marketWrapperVisible() {
       return this.userInfo.memberSign !== MEMBER_SIGN.ZERO_LEVEL
     },
-    regionInfoVisible() {
+    dstributionCenterVisible() {
-      return this.regionInfo?.regionStatus === 0
+      return !!this.dstributionCenter
     },
     formattedTotalSumPv() {
       const value = String(this.totalSumPv || '0.00')
@@ -463,9 +495,54 @@ export default {
         decimal: parts.length > 1 ? `.${parts[1]}` : '',
       }
     },
+    // 是否有已选区域数据
+    hasRegionData() {
+      return !!(
+        this.regionInfo &&
+        (this.regionInfo.provinceVal ||
+          this.regionInfo.cityVal ||
+          this.regionInfo.countyVal)
+      )
+    },
+    // 是否有配送中心数据
+    hasDistributionData() {
+      return !!(
+        this.dstributionCenter &&
+        (this.dstributionCenter.provinceVal ||
+          this.dstributionCenter.cityVal ||
+          this.dstributionCenter.countyVal)
+      )
+    },
+    showRegionTabs() {
+      return !!(
+        (this.regionInfo && Object.keys(this.regionInfo).length) ||
+        (this.dstributionCenter && Object.keys(this.dstributionCenter).length)
+      )
+    },
+    regionTabList() {
+      const tabs = []
+
+      if (this.regionInfo) {
+        tabs.push({
+          name: '已选区域',
+        })
+      }
+
+      if (this.dstributionCenter) {
+        tabs.push({
+          name: '配送中心',
+        })
+      }
+
+      return tabs
+    },
   },
 
   methods: {
+    // Tab切换事件
+    onRegionTabChange({ index }) {
+      this.currentRegionTab = index
+    },
     getRegionSelect() {
       uni.showLoading({
         title: '加载中...',
@@ -473,7 +550,12 @@ export default {
       getRegionSelect()
         .then(res => {
           if (res.code == 200) {
-            this.regionInfo = res.data
+            this.regionInfo = (res.data || []).filter(
+              item => item.businessType === 1
+            )?.[0]
+            this.dstributionCenter = (res.data || []).filter(
+              item => item.businessType === 2
+            )?.[0]
           }
         })
         .finally(() => {
@@ -1347,7 +1429,25 @@ export default {
   }
 }
 
+/* Tab相关样式 */
+.tab-content {
+  padding: 0;
+}
+
+.empty-state {
+  padding: 60rpx 20rpx;
+  text-align: center;
+}
+
+.empty-text {
+  font-size: 28rpx;
+  color: #999999;
+}
+
 .region-select-action {
   padding: 30rpx 20rpx;
 }
+::v-deep .u-tabs__wrapper__nav__item__text {
+  font-size: 26rpx !important;
+}
 </style>

pages/regiest/index.vue

@@ -55,7 +55,7 @@
           />
         </u-form-item>
         <u-form-item
-          v-if="[60, 70, 80].includes(gradeValue) && provinceList.length"
+          v-if="[80].includes(gradeValue) && provinceList.length"
           @click="regionSelectHandle"
           required
           label="会员区域"
@@ -827,7 +827,7 @@ export default {
         if (res.code == 200) {
           if (res.data.isEnough) {
             this.form.pkGradeVal = res.data.pkGradeVal
-            if ([60, 70, 80].includes(res.data.gradeValue)) {
+            if ([80].includes(res.data.gradeValue)) {
               this.gradeValue = res.data.gradeValue
               this.getRegionAreaList(res.data.gradeValue)
             }
@@ -1188,7 +1188,7 @@ export default {
     },
     goBuy() {
       const extParams = {}
-      if ([60, 70, 80].includes(this.gradeValue) && this.provinceList.length) {
+      if ([80].includes(this.gradeValue) && this.provinceList.length) {
         if (!this.regionAddress.length) {
           uni.showToast({
             title: '请选择会员区域',