feat(mine): 收益区域选择逻辑完善

components/region-select/index.vue

@@ -1,16 +1,333 @@
-<template></template>
+<template>
+  <div
+    v-if="popupVisible"
+    class="region-select-overlay"
+    @click.self="handleClose"
+  >
+    <div class="region-select-popup">
+      <div class="popup-header">
+        <h3 class="popup-title">选择收益区域</h3>
+      </div>
+      <div class="popup-content">
+        <div class="picker-columns">
+          <div class="picker-column">
+            <ul>
+              <li
+                v-for="p in provinces"
+                :key="p.id"
+                @click="selectProvince(p)"
+                :class="{
+                  selected: selectedProvince && selectedProvince.id === p.id,
+                }"
+              >
+                {{ p.name }}
+              </li>
+            </ul>
+          </div>
+          <div class="picker-column">
+            <ul>
+              <li
+                v-for="c in cities"
+                :key="c.id"
+                @click="selectCity(c)"
+                :class="{ selected: selectedCity && selectedCity.id === c.id }"
+              >
+                {{ c.name }}
+              </li>
+            </ul>
+          </div>
+          <div class="picker-column">
+            <ul>
+              <li
+                v-for="d in districts"
+                :key="d.id"
+                @click="selectDistrict(d)"
+                :class="{
+                  selected: selectedDistrict && selectedDistrict.id === d.id,
+                }"
+              >
+                {{ d.name }}
+              </li>
+            </ul>
+          </div>
+        </div>
+      </div>
+      <div class="popup-footer">
+        <button class="popup-btn popup-cancel" @click="handleClose">
+          取消
+        </button>
+        <button class="popup-btn popup-confirm" @click="handleConfirm">
+          确认
+        </button>
+      </div>
+    </div>
+  </div>
+</template>
 
 <script>
-import { getRegionSelect } from '@/config/mine.js'
+import { getRegionSelect, setRegion, getRegionAreaTree } from '@/config/mine.js'
+
 export default {
   name: 'region-select',
   data() {
     return {
-      regionInfo: {},
+      popupVisible: false,
+      areaTree: [],
+      provinces: [],
+      cities: [],
+      districts: [],
+      selectedProvince: null,
+      selectedCity: null,
+      selectedDistrict: null,
     }
   },
-  methods: {},
+  async created() {
+    try {
+      const res = await getRegionSelect()
+      // Assuming res.data exists and has regionStatus and provinceId
+      if (
+        res.code === 200 &&
+        res.data &&
+        res.data.regionStatus === 0 &&
+        !res.data.province
+      ) {
+        await this.loadAreaTree()
+        this.popupVisible = true
+      }
+    } catch (error) {
+      console.error('Failed to get region select info:', error)
+      // Optionally show a user-facing error message, e.g., using a toast library
+    }
+  },
+  methods: {
+    async loadAreaTree() {
+      try {
+        const res = await getRegionAreaTree()
+        if (res.code === 200 && res.data) {
+          this.areaTree = res.data
+          this.provinces = this.areaTree
+          if (this.provinces.length > 0) {
+            this.selectProvince(this.provinces[0])
+          }
+        }
+      } catch (error) {
+        console.error('Failed to load area tree:', error)
+      }
+    },
+    selectProvince(province) {
+      this.selectedProvince = province
+      this.cities = province.children || []
+      this.selectedCity = null
+      this.districts = []
+      if (this.cities.length > 0) {
+        this.selectCity(this.cities[0])
+      } else {
+        // Handle cases where a province might not have cities
+        this.selectedCity = null
+        this.selectedDistrict = null
+      }
+    },
+    selectCity(city) {
+      this.selectedCity = city
+      this.districts = city.children || []
+      this.selectedDistrict = null
+      if (this.districts.length > 0) {
+        this.selectDistrict(this.districts[0])
+      } else {
+        // Handle cases where a city might not have districts
+        this.selectedDistrict = null
+      }
+    },
+    selectDistrict(district) {
+      this.selectedDistrict = district
+    },
+    handleClose() {
+      this.popupVisible = false
+    },
+    async handleConfirm() {
+      if (
+        !this.selectedProvince ||
+        !this.selectedCity ||
+        !this.selectedDistrict
+      ) {
+        return
+      }
+      try {
+        const params = {
+          province: this.selectedProvince.id,
+          city: this.selectedCity.id,
+          county: this.selectedDistrict.id,
+        }
+        const res = await setRegion(params)
+        if (res.code === 200) {
+          this.handleClose()
+          this.$emit('success')
+          // Optionally show a success message
+        } else {
+          // Use a proper UI notification for errors
+          throw new Error(res.message || 'Failed to set region')
+        }
+      } catch (error) {
+        console.error('Failed to set region:', error)
+        // Optionally show a user-facing error message
+      }
+    },
+  },
 }
 </script>
 
-<style></style>
+<style scoped>
+.region-select-overlay {
+  position: fixed;
+  top: 0;
+  left: 0;
+  width: 100%;
+  height: 100%;
+  background-color: rgba(0, 0, 0, 0.5);
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  z-index: 1000;
+  transition: opacity 0.3s ease;
+}
+
+.region-select-popup {
+  width: 90%;
+  max-width: 680rpx;
+  background-color: white;
+  border-radius: 24rpx;
+  animation: scale-up 0.3s ease-out;
+  max-height: 80vh;
+  display: flex;
+  flex-direction: column;
+  overflow: hidden;
+  box-shadow: 0 4rpx 24rpx rgba(0, 0, 0, 0.1);
+}
+
+.popup-header {
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  padding: 30rpx;
+  border-bottom: 1rpx solid #f5f5f5;
+  flex-shrink: 0;
+}
+
+.popup-title {
+  font-size: 32rpx;
+  font-weight: 600;
+  color: #1c1c1e;
+  margin: 0;
+}
+
+.popup-btn {
+  border: none;
+  background: none;
+  cursor: pointer;
+}
+
+.popup-content {
+  overflow: hidden;
+  flex-grow: 1;
+}
+
+.picker-columns {
+  display: flex;
+  height: 500rpx;
+}
+
+.picker-column {
+  flex: 1;
+  overflow-y: auto;
+  -webkit-overflow-scrolling: touch;
+}
+
+.picker-column:not(:last-child) {
+  border-right: 1rpx solid #eaeaeb;
+}
+
+.picker-column:nth-child(2) {
+  background-color: #fcfcfc;
+}
+
+.picker-column::-webkit-scrollbar {
+  display: none;
+}
+.picker-column {
+  -ms-overflow-style: none;
+  scrollbar-width: none;
+}
+
+.picker-column ul {
+  list-style: none;
+  padding: 0;
+  margin: 0;
+  text-align: center;
+}
+
+.picker-column li {
+  padding: 24rpx 10rpx;
+  font-size: 30rpx;
+  color: #666;
+  cursor: pointer;
+  white-space: nowrap;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  transition:
+    background-color 0.2s ease,
+    color 0.2s ease;
+}
+
+.picker-column li.selected {
+  font-weight: 600;
+  color: #007aff;
+  background-color: #f0f7ff;
+}
+
+.popup-footer {
+  display: flex;
+  flex-shrink: 0;
+  padding: 24rpx;
+  gap: 24rpx;
+  background-color: #f7f7f7;
+  border-top: 1rpx solid #efefef;
+}
+
+.popup-footer .popup-btn {
+  flex: 1;
+  text-align: center;
+  padding: 14rpx 0;
+  font-size: 28rpx;
+  border-radius: 40rpx;
+  font-weight: 500;
+  transition:
+    transform 0.1s ease,
+    box-shadow 0.2s ease;
+}
+
+.popup-footer .popup-btn:active {
+  transform: scale(0.97);
+}
+
+.popup-footer .popup-cancel {
+  background-color: #eee;
+  color: #555;
+}
+
+.popup-footer .popup-confirm {
+  background: linear-gradient(135deg, #007aff, #0056b3);
+  color: white;
+  box-shadow: 0 4rpx 12rpx rgba(0, 122, 255, 0.25);
+}
+
+@keyframes scale-up {
+  from {
+    transform: scale(0.8);
+    opacity: 0;
+  }
+  to {
+    transform: scale(1);
+    opacity: 1;
+  }
+}
+</style>

config/mine.js

@@ -25,7 +25,9 @@ export const getRegionSelect = () => {
 }
 
 // 设置区域
-export const setRegion = params =>
+export const setRegion = data =>
-  http.get('/retail-member/api/retail-member/set-region', { params })
+  http.post('/retail-member/api/retail-member/set-region', data)
 
 // 获取可选择区域
+export const getRegionAreaTree = params =>
+  http.get('/retail-member/api/retail-member/region-tree', { params })

config/request.js

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

pages/index/index.vue

@@ -98,6 +98,7 @@
           ref="child2"
           @childMethodTrigger="callChildMethod"
         ></znNewsPopup>
+        <RegionSelect />
         <!-- 直推排行弹窗
         <directrank-popup
           @callznMethodTrigger="callznMethod"
@@ -141,6 +142,7 @@ import {
   REPURCHASE_AREA,
 } from '@/util/specialAreaMap'
 import { MEMBER_SIGN } from '@/util/common.js'
+import RegionSelect from '@/components/region-select/index.vue'
 export default {
   components: {
     noticePopup,
@@ -148,6 +150,7 @@ export default {
     'cl-tabbar': clTabbar,
     getTree,
     'special-area-wrapper': SpecialAreaWrapper,
+    RegionSelect,
   },
   filters: {
     seles(value) {

pages/mine/index.vue

@@ -22,28 +22,22 @@
               <view class="name_box">
                 <view class="tTit1">{{ userInfo.memberCode }}</view>
               </view>
-              <view class="cmem">
+              <view class="level_box">
-                <view style="margin-right: 20rpx; display: flex">
+                <view class="level_tag">
-                  <view style="margin-right: 10rpx">{{ '结算等级' }}:</view>
+                  <u-icon name="star" color="#fff" size="14"></u-icon>
-                  <view class="jxTit1">{{ userInfo.pkGradeVal }}</view>
+                  <text class="level_label">当月级别</text>
+                  <text class="level_value">{{
+                    userInfo.pkGradeVal || '-'
+                  }}</text>
                 </view>
-                <view class="grade_left">
+                <view class="level_tag">
-                  <view class="gra_left1" v-if="userData.registerAuthority">
+                  <u-icon name="level" color="#fff" size="14"></u-icon>
-                    <image
+                  <text class="level_label">荣誉级别</text>
-                      class="gra_icon"
+                  <text class="level_value">{{
-                      src="@/static/images/fw_icon.png"
+                    userInfo.pkAwardsVal || '-'
-                      mode=""
+                  }}</text>
-                    ></image>
-                    <view class="">
-                      {{ userData.registerAuthorityVal }}
-                    </view>
-                  </view>
                 </view>
               </view>
-              <view class="cmem">
-                <view style="margin-right: 10rpx">{{ '荣誉奖衔' }}:</view>
-                <view class="jxTit1">{{ userInfo.pkAwardsVal }}</view>
-              </view>
             </view>
           </view>
           <view class="top_right" @click="goTo('/pages/userData/index')">
@@ -54,7 +48,7 @@
         </view>
       </view>
 
-      <view class="ju_grade" v-if="!ifSpecial">
+      <!-- <view class="ju_grade" v-if="false">
         <view class="jugrade_flex">
           <view class="ju_left">
             <view v-if="awards.tarAwardsName" class="yestDay">
@@ -71,7 +65,6 @@
                   <span class="award-amount">{{
                     sprintProgress.achieved
                   }}</span>
-                  <!-- 已完成 {{ awards.sumRealPv }} / 目标 {{ sprintProgress.target }} -->
                 </view>
               </view>
             </view>
@@ -138,7 +131,8 @@
             </view>
           </view>
         </view>
-      </view>
+      </view> -->
+
       <view class="my_order">
         <view class="my_title">
           <text class="thetitle">{{ '我的订单' }}</text>
@@ -184,17 +178,19 @@
         <view class="region-info-box">
           <view class="region-info-item">
             <text class="region-info-value">{{
-              regionInfo.province || '-'
+              regionInfo.provinceVal || '-'
             }}</text>
             <text class="region-info-label">{{ '省' }}</text>
           </view>
           <view class="region-info-item">
-            <text class="region-info-value">{{ regionInfo.city || '-' }}</text>
+            <text class="region-info-value">{{
+              regionInfo.cityVal || '-'
+            }}</text>
             <text class="region-info-label">{{ '市' }}</text>
           </view>
           <view class="region-info-item">
             <text class="region-info-value">{{
-              regionInfo.county || '-'
+              regionInfo.countyVal || '-'
             }}</text>
             <text class="region-info-label">{{ '区' }}</text>
           </view>
@@ -1114,8 +1110,8 @@ export default {
   overflow: scroll;
   background-image: linear-gradient(
     to bottom,
-    #005bac 5%,
+    #005bac 25%,
-    #f2f2f2 50%
+    #f2f2f2 40%
   ); // background-position: top;
 
   .topBox {
@@ -1146,17 +1142,18 @@ export default {
           color: #ffffff;
           display: flex;
           flex-direction: column;
-          justify-content: space-between;
+          justify-content: center;
+          gap: 12rpx;
 
           .name_box {
             display: flex;
             align-items: center;
 
             .tTit1 {
-              font-size: 28rpx;
+              font-size: 32rpx;
               font-family: Source Han Sans CN;
               font-weight: bold;
-              margin-right: 22rpx;
+              margin-right: 0;
             }
 
             .kuang {
@@ -1166,6 +1163,55 @@ export default {
               font-size: 20rpx;
             }
           }
+
+          .level_box {
+            display: flex;
+            flex-direction: row;
+            align-items: center;
+            flex-wrap: wrap;
+            gap: 16rpx;
+          }
+
+          .level_tag {
+            background: rgba(255, 255, 255, 0.2);
+            backdrop-filter: blur(10rpx);
+            -webkit-backdrop-filter: blur(10rpx);
+            border: 1rpx solid rgba(255, 255, 255, 0.3);
+            padding: 6rpx 18rpx;
+            border-radius: 50px;
+            display: inline-flex;
+            align-items: center;
+            gap: 10rpx;
+            position: relative;
+            overflow: hidden;
+          }
+
+          .level_tag::after {
+            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.5) 50%,
+              rgba(255, 255, 255, 0) 80%
+            );
+            transform: translateX(-100%);
+            animation: bling_shimmer 3.5s infinite linear;
+          }
+
+          .level_label {
+            font-size: 20rpx;
+            opacity: 0.9;
+          }
+
+          .level_value {
+            font-size: 22rpx;
+            font-weight: 600;
+          }
         }
       }
 
@@ -1182,11 +1228,6 @@ export default {
       }
     }
 
-    .cmem {
-      display: flex;
-      align-items: center;
-    }
-
     .grade_left {
       display: flex;
       align-items: center;
@@ -1411,4 +1452,13 @@ export default {
   color: #333;
   font-weight: 600;
 }
+
+@keyframes bling_shimmer {
+  from {
+    transform: translateX(-100%);
+  }
+  to {
+    transform: translateX(100%);
+  }
+}
 </style>