feat(mine): 收益区域选择逻辑完善
This commit is contained in:
woody
parent
4dc1a09b37
commit
e9b79e199a
|
|
@ -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>
|
||||
|
|
|
|||
|
|
@ -25,7 +25,9 @@ export const getRegionSelect = () => {
|
|||
}
|
||||
|
||||
// 设置区域
|
||||
export const setRegion = params =>
|
||||
http.get('/retail-member/api/retail-member/set-region', { params })
|
||||
export const setRegion = data =>
|
||||
http.post('/retail-member/api/retail-member/set-region', data)
|
||||
|
||||
// 获取可选择区域
|
||||
export const getRegionAreaTree = params =>
|
||||
http.get('/retail-member/api/retail-member/region-tree', { params })
|
||||
|
|
|
|||
|
|
@ -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
|
||||
|
|
|
|||
|
|
@ -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) {
|
||||
|
|
|
|||
|
|
@ -22,30 +22,24 @@
|
|||
<view class="name_box">
|
||||
<view class="tTit1">{{ userInfo.memberCode }}</view>
|
||||
</view>
|
||||
<view class="cmem">
|
||||
<view style="margin-right: 20rpx; display: flex">
|
||||
<view style="margin-right: 10rpx">{{ '结算等级' }}:</view>
|
||||
<view class="jxTit1">{{ userInfo.pkGradeVal }}</view>
|
||||
<view class="level_box">
|
||||
<view class="level_tag">
|
||||
<u-icon name="star" color="#fff" size="14"></u-icon>
|
||||
<text class="level_label">当月级别</text>
|
||||
<text class="level_value">{{
|
||||
userInfo.pkGradeVal || '-'
|
||||
}}</text>
|
||||
</view>
|
||||
<view class="grade_left">
|
||||
<view class="gra_left1" v-if="userData.registerAuthority">
|
||||
<image
|
||||
class="gra_icon"
|
||||
src="@/static/images/fw_icon.png"
|
||||
mode=""
|
||||
></image>
|
||||
<view class="">
|
||||
{{ userData.registerAuthorityVal }}
|
||||
<view class="level_tag">
|
||||
<u-icon name="level" color="#fff" size="14"></u-icon>
|
||||
<text class="level_label">荣誉级别</text>
|
||||
<text class="level_value">{{
|
||||
userInfo.pkAwardsVal || '-'
|
||||
}}</text>
|
||||
</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')">
|
||||
<view class="ricon">
|
||||
<u-icon color="#ffffff" size="22" name="setting-fill"></u-icon>
|
||||
|
|
@ -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%,
|
||||
#f2f2f2 50%
|
||||
#005bac 25%,
|
||||
#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>
|
||||
|
|
|
|||
Loading…
Reference in New Issue