emis-app/components/buns-address-sheet/buns-address-sheet.vue

<template>
	<tpx-dialog :show="show" title="请选择地区" @onClose="handleCloseModal()">
		<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>
				</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)">
									{{sItem.name}}
									<view class="chk">
										<u-icon name="checkbox-mark" size="32" :bold="true" color="inherit"></u-icon>
									</view>
								</view>
							</view>
						</view>
					</view>
					
				</template>

				<template v-slot:footer>
					<view class="blcok-white-noradius" style="margin-top: 0;margin-bottom: 0;">
						<u-button @click="handleSubmitValue()" type="primary" size="large" shape="circle"
							custom-style="height:80rpx;font-size: 30rpx;">确认</u-button>
					</view>
				</template>
			</tpx-layout>
		</view>
	</tpx-dialog>
</template>

<script>
	import {
		getEmisCountry,
		getEmisRegion
	} from "@/common/api"

	export default {
		watch: {
			show(v) {
				if (v) {
					this.submitVals = JSON.parse(JSON.stringify(this.value))
					this.initData()
				}
			}
		},
		computed: {
			curShowData() {
				const ret = []
				let letterMap = {}
				this.curList.map(t => {
					const firstUpCase = (t.nameEn || '').toLocaleUpperCase()[0]
					if (!letterMap[firstUpCase]) {
						letterMap[firstUpCase] = []
					}
					letterMap[firstUpCase].push(t)
				})
				Object.keys(letterMap).sort((a, b)=> a - b > 0).map((key) => {
					ret.push({
						letters: key,
						data: letterMap[key]
					})
				})
				return ret
			}
		},
		props: {
			show: {
				default () {
					return false
				}
			},
			value: {
				default () {
					return {
						regIds: [],
						regNames: []
					}
				}
			}
		},
		data() {
			return {
				regnameLoading: false,
				curTabIndex: 0,
				curCountryList: [], // { id , name, nameEn }
				curList: [], // { id , name, nameEn }
				submitVals: {
					regIds: [],
					regNames: []
				},
			}
		},
		async created() {
			const res = await getEmisCountry()
			this.curCountryList = this.curList = res.rows || []
		},
		onHide() {

		},
		unmounted() {},

		methods: {
			initData() {
				if (this.submitVals.regIds.length == 0) {
					this.curTabIndex = 0
					let item = this.curCountryList.filter(t => t.name == '中国')[0]
					// 默认选择中国
					this.selectItemRegion(item)
				}
			},
			async getListData({
				parentId
			} = {}) {
				let countryId = this.submitVals.regIds[0] // 最外层是国家id
				if (parentId == countryId) {
					parentId = undefined
				}
				const res = await getEmisRegion({
					parentId,
					countryId
				})
				const list = res.rows || []
				list.map(t => {
					t.name = t.regionName
					t.nameEn = t.regionNameEn
				})
				if(list.length > 0) {
					this.curList = list
				}
				return list
			},
			changeCurTab(index) {
				this.curTabIndex = index
				if (index == 0) {
					this.curList = this.curCountryList
				} else {
					this.getListData()
				}
			},
			async addEmptyItem(item){
				const list = await this.getListData({
					parentId: item.id
				})
				if(list.length > 0) {
					this.curTabIndex = this.curTabIndex + 1
					this.submitVals.regIds.push()
					this.submitVals.regNames.push('请选择')
					this.hackUpdateRgnames()
				}
			},
			async selectItemRegion(item = {}) {
				// 选择数据变化，需清除下所有层级选中数据
				if (item.id != this.submitVals[this.curTabIndex]) {
					this.submitVals.regIds.length = this.curTabIndex
					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)
			},
			handleSubmitValue() {
				const val = this.submitVals
				this.$emit('onSure', val)
				this.$emit('update:value', val)
				this.handleCloseModal()
			}
		}
	}
</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;
		}
	}
}
</style>