forked from angelo/web-retail-h5
feat(region-select): 区域选择
This commit is contained in:
woody
parent
e9b79e199a
commit
56089a1c42
|
|
@ -9,48 +9,29 @@
|
|||
<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>
|
||||
<picker-view
|
||||
v-if="popupVisible"
|
||||
class="picker-view"
|
||||
:indicator-style="indicatorStyle"
|
||||
:value="pickerValue"
|
||||
@change="handlePickerChange"
|
||||
>
|
||||
<picker-view-column>
|
||||
<div v-for="p in provinces" :key="p.id" class="picker-item">
|
||||
{{ p.name }}
|
||||
</div>
|
||||
</picker-view-column>
|
||||
<picker-view-column>
|
||||
<div v-for="c in cities" :key="c.id" class="picker-item">
|
||||
{{ c.name }}
|
||||
</div>
|
||||
</picker-view-column>
|
||||
<picker-view-column>
|
||||
<div v-for="d in districts" :key="d.id" class="picker-item">
|
||||
{{ d.name }}
|
||||
</div>
|
||||
</picker-view-column>
|
||||
</picker-view>
|
||||
</div>
|
||||
<div class="popup-footer">
|
||||
<button class="popup-btn popup-cancel" @click="handleClose">
|
||||
|
|
@ -76,15 +57,13 @@ export default {
|
|||
provinces: [],
|
||||
cities: [],
|
||||
districts: [],
|
||||
selectedProvince: null,
|
||||
selectedCity: null,
|
||||
selectedDistrict: null,
|
||||
pickerValue: [0, 0, 0],
|
||||
indicatorStyle: `height: 50px;`,
|
||||
}
|
||||
},
|
||||
async created() {
|
||||
try {
|
||||
const res = await getRegionSelect()
|
||||
// Assuming res.data exists and has regionStatus and provinceId
|
||||
if (
|
||||
res.code === 200 &&
|
||||
res.data &&
|
||||
|
|
@ -96,7 +75,6 @@ export default {
|
|||
}
|
||||
} 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: {
|
||||
|
|
@ -107,69 +85,59 @@ export default {
|
|||
this.areaTree = res.data
|
||||
this.provinces = this.areaTree
|
||||
if (this.provinces.length > 0) {
|
||||
this.selectProvince(this.provinces[0])
|
||||
this.cities = this.provinces[0].children || []
|
||||
if (this.cities.length > 0) {
|
||||
this.districts = this.cities[0].children || []
|
||||
} else {
|
||||
this.districts = []
|
||||
}
|
||||
}
|
||||
}
|
||||
} 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
|
||||
handlePickerChange(e) {
|
||||
const [pIndex, cIndex] = e.detail.value
|
||||
const oldPIndex = this.pickerValue[0]
|
||||
const oldCIndex = this.pickerValue[1]
|
||||
|
||||
this.pickerValue = e.detail.value
|
||||
|
||||
if (pIndex !== oldPIndex) {
|
||||
this.cities = this.provinces[pIndex]?.children || []
|
||||
this.districts = this.cities[0]?.children || []
|
||||
} else if (cIndex !== oldCIndex) {
|
||||
this.districts = this.cities[cIndex]?.children || []
|
||||
}
|
||||
},
|
||||
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
|
||||
) {
|
||||
const [pIndex, cIndex, dIndex] = this.pickerValue
|
||||
const province = this.provinces[pIndex]
|
||||
const city = this.cities[cIndex]
|
||||
const district = this.districts[dIndex]
|
||||
|
||||
if (!province || !city || !district) {
|
||||
return
|
||||
}
|
||||
try {
|
||||
const params = {
|
||||
province: this.selectedProvince.id,
|
||||
city: this.selectedCity.id,
|
||||
county: this.selectedDistrict.id,
|
||||
province: province.id,
|
||||
city: city.id,
|
||||
county: district.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
|
||||
}
|
||||
},
|
||||
},
|
||||
|
|
@ -231,57 +199,21 @@ export default {
|
|||
flex-grow: 1;
|
||||
}
|
||||
|
||||
.picker-columns {
|
||||
display: flex;
|
||||
.picker-view {
|
||||
width: 100%;
|
||||
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;
|
||||
.picker-item {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
height: 50px;
|
||||
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 {
|
||||
|
|
|
|||
Loading…
Reference in New Issue