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

<template>
	<tpx-dialog :show="show" title="请选择地区" @onClose="handleCloseModal()">
		<view style="position: relative;height: calc(70vh);">
			<tpx-layout>
				<template v-slot:body>
					<u-steps 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 ${curTabIndex == index?'clr-prm':''}`" @click="changeCurTab(index)">
									{{item}}
								</view>
							</template>
						</u-steps-item>
					</u-steps>
					
					<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>
								<view v-for="(sItem, sIndex) in item.data" :class="`showselect-item`" @click="selectItemRegion(sItem)">
									{{sItem.name}}
									<view v-if="submitVals.regIds.indexOf(sItem.id) > -1?'active':''">
										<u-icon name="checkbox-mark" size="32" :bold="true"
											:custom-style="`'color:#B12D29;'`"
										></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 {
				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) {
					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
				})
				this.curList = list
			},
			changeCurTab(index) {
				this.curTabIndex = index
				if (index == 0) {
					this.curList = this.curCountryList
				} else {
					this.getListData()
				}
			},
			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.getListData({
					parentId: item.id
				})
			},
			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;
	margin-bottom: 20rpx;;
}
</style>