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

This commit is contained in:
woody 2025-06-12 18:04:32 +08:00
parent 2e0bcaf8d7
commit f5cae88636
2 changed files with 158 additions and 32 deletions

View File

@ -70,14 +70,22 @@ export default {
res.data.regionStatus === 0 &&
!res.data.province
) {
await this.loadAreaTree()
this.popupVisible = true
this.open()
}
} 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()

View File

@ -223,26 +223,42 @@
<view class="my_title">
<text class="thetitle">收益区域</text>
</view>
<view class="region-info-box">
<view class="region-info-item">
<text class="region-info-label">{{ '省' }}</text>
<text class="region-info-value">{{
regionInfo.provinceVal || '-'
}}</text>
<template
v-if="
regionInfo.provinceVal || regionInfo.cityVal || regionInfo.countyVal
"
>
<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">
<text class="region-info-label">{{ '市' }}</text>
<text class="region-info-value">{{
regionInfo.cityVal || '-'
}}</text>
</template>
<template v-else>
<view class="region-select-action">
<u-button
@click="openRegionSelect"
color="#005BAC"
shape="circle"
text="选择区域"
></u-button>
</view>
<view class="region-info-item">
<text class="region-info-label">{{ '区' }}</text>
<text class="region-info-value">{{
regionInfo.countyVal || '-'
}}</text>
</view>
</view>
</template>
</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;
font-weight: 600;
line-height: 1.2;
display: flex;
align-items: baseline;
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>