uu
This commit is contained in:
aihe
parent
8ad91d60d4
commit
f21ef5a3c5
@ -3,25 +3,27 @@
|
||||
<view style="position: relative;height: calc(75vh);">
|
||||
<tpx-layout>
|
||||
<template v-slot:header>
|
||||
<u-steps v-if="!regnameLoading" direction="column" activeColor="#B12D29" inactiveColor="#B12D29" dot="true">
|
||||
<u-steps-item v-for="(item, index) in submitVals.regNames">
|
||||
<template v-slot:desc>
|
||||
<view :class="`pl-20 pb-20 ${curTabIndex == index?'clr-prm':''}`" @click="changeCurTab(index)">
|
||||
<u-row>
|
||||
<view style="flex: 1;">{{item}}</view>
|
||||
<u-icon name="arrow-right" size="32" color="rgb(214, 215, 217)"></u-icon>
|
||||
</u-row>
|
||||
</view>
|
||||
</template>
|
||||
</u-steps-item>
|
||||
</u-steps>
|
||||
|
||||
<view class="stp-list">
|
||||
<view v-for="(item, index) in submitVals.regNames"
|
||||
:class="`stp-item ${curTabIndex == index?'active':''}`" @click="changeCurTab(index)">
|
||||
<view class="dot"></view>
|
||||
<view class="cont">
|
||||
<view>{{item}}</view>
|
||||
<u-icon name="arrow-right" size="32" color="rgb(214, 215, 217)"></u-icon>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
|
||||
</template>
|
||||
<template v-slot:body>
|
||||
<view class="showselect-list">
|
||||
<view v-for="(item, index) in curShowData" class="showselect-group">
|
||||
<view v-if="item.letters" class="pr-20">{{item.letters}}</view>
|
||||
<view style="flex: 1;">
|
||||
<view v-for="(sItem, sIndex) in item.data" :class="`showselect-item ${submitVals.regIds.indexOf(sItem.id) > -1?'active':''}`" @click="selectItemRegion(sItem)">
|
||||
<view v-for="(sItem, sIndex) in item.data"
|
||||
:class="`showselect-item ${submitVals.regIds.indexOf(sItem.id) > -1?'active':''}`"
|
||||
@click="selectItemRegion(sItem)">
|
||||
{{sItem.name}}
|
||||
<view class="chk">
|
||||
<u-icon name="checkbox-mark" size="32" :bold="true" color="inherit"></u-icon>
|
||||
@ -30,7 +32,7 @@
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
|
||||
|
||||
</template>
|
||||
|
||||
<template v-slot:footer>
|
||||
@ -70,7 +72,7 @@
|
||||
}
|
||||
letterMap[firstUpCase].push(t)
|
||||
})
|
||||
Object.keys(letterMap).sort((a, b)=> a - b > 0).map((key) => {
|
||||
Object.keys(letterMap).sort((a, b) => a - b > 0).map((key) => {
|
||||
ret.push({
|
||||
letters: key,
|
||||
data: letterMap[key]
|
||||
@ -96,7 +98,6 @@
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
regnameLoading: false,
|
||||
curTabIndex: 0,
|
||||
curCountryList: [], // { id , name, nameEn }
|
||||
curList: [], // { id , name, nameEn }
|
||||
@ -140,7 +141,7 @@
|
||||
t.name = t.regionName
|
||||
t.nameEn = t.regionNameEn
|
||||
})
|
||||
if(list.length > 0) {
|
||||
if (list.length > 0) {
|
||||
this.curList = list
|
||||
}
|
||||
return list
|
||||
@ -153,15 +154,14 @@
|
||||
this.getListData()
|
||||
}
|
||||
},
|
||||
async addEmptyItem(item){
|
||||
async addEmptyItem(item) {
|
||||
const list = await this.getListData({
|
||||
parentId: item.id
|
||||
})
|
||||
if(list.length > 0) {
|
||||
if (list.length > 0) {
|
||||
this.curTabIndex = this.curTabIndex + 1
|
||||
this.submitVals.regIds.push()
|
||||
this.submitVals.regNames.push('请选择')
|
||||
this.hackUpdateRgnames()
|
||||
}
|
||||
},
|
||||
async selectItemRegion(item = {}) {
|
||||
@ -171,17 +171,10 @@
|
||||
this.submitVals.regNames.length = this.curTabIndex
|
||||
this.submitVals.regIds.push(item.id)
|
||||
this.submitVals.regNames.push(item.name)
|
||||
this.hackUpdateRgnames()
|
||||
}
|
||||
// 选中后切换下一层级视图
|
||||
this.addEmptyItem(item)
|
||||
},
|
||||
hackUpdateRgnames() {
|
||||
this.regnameLoading = true
|
||||
setTimeout(()=> {
|
||||
this.regnameLoading = false
|
||||
});
|
||||
},
|
||||
handleCloseModal() {
|
||||
this.$emit('update:show', false)
|
||||
},
|
||||
@ -196,26 +189,78 @@
|
||||
</script>
|
||||
|
||||
<style scoped lang="scss">
|
||||
.showselect-list{
|
||||
|
||||
}
|
||||
.showselect-group {
|
||||
display: flex;
|
||||
}
|
||||
.showselect-item{
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
margin-bottom: 20rpx;
|
||||
.chk{
|
||||
display: none;
|
||||
}
|
||||
&.active{
|
||||
font-weight: bold;
|
||||
color: #B12D29;
|
||||
.chk{
|
||||
display: block;
|
||||
.stp-list {
|
||||
.stp-item {
|
||||
padding-bottom: 20rpx;
|
||||
position: relative;
|
||||
.dot {
|
||||
position: absolute;
|
||||
top: 8rpx;
|
||||
bottom: 2rpx;
|
||||
left: 0;
|
||||
&:before{
|
||||
content: ' ';
|
||||
display: block;
|
||||
width: 16rpx;
|
||||
height: 16rpx;
|
||||
border-radius: 50%;
|
||||
background-color: $uni-color-primary;
|
||||
}
|
||||
&::after{
|
||||
position: absolute;
|
||||
content: ' ';
|
||||
display: block;
|
||||
width: 3rpx;
|
||||
border-radius: 3rpx;
|
||||
background-color: $uni-color-primary;
|
||||
margin-left: 6rpx;
|
||||
bottom: 0;
|
||||
top: 24rpx;
|
||||
}
|
||||
}
|
||||
.cont {
|
||||
padding-left: 40rpx;
|
||||
display: flex;
|
||||
flex: 1;
|
||||
justify-content: space-between;
|
||||
}
|
||||
&:last-child{
|
||||
.dot {
|
||||
&::after{
|
||||
display: none;
|
||||
}
|
||||
}
|
||||
}
|
||||
&.active{
|
||||
color: $uni-color-primary;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
.showselect-list {}
|
||||
|
||||
.showselect-group {
|
||||
display: flex;
|
||||
}
|
||||
|
||||
.showselect-item {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
margin-bottom: 20rpx;
|
||||
|
||||
.chk {
|
||||
display: none;
|
||||
}
|
||||
|
||||
&.active {
|
||||
font-weight: bold;
|
||||
color: #B12D29;
|
||||
|
||||
.chk {
|
||||
display: block;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
</style>
|
||||
Loading…
Reference in New Issue
Block a user