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>
					<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 v-if="curList.length > 0" class="mb-10">
						<tpx-input v-model:value="keywords" isWhite="true" placeholder="请输入关键字"></tpx-input>
					</view>
					
					<view class="showselect-list">
						<view>
							<view v-for="(sItem, sIndex) in curShowData"
								:class="`showselect-item ${submitVals.regIds.indexOf(sItem.code) > -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 v-if="curShowData.length == 0 && keywords">
							<tpx-empty size="sm"></tpx-empty>
						</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 * as apiService from "@/common/api"
	

	export default {
		watch: {
			show(v) {
				if (v) {
					this.submitVals = JSON.parse(JSON.stringify(this.value))
					this.initData()
				}
			}
		},
		computed: {
			curShowData() {
				let ret = this.curList || []
				if(this.keywords) {
					ret = ret?.filter?.(t=> t.name?.indexOf(this.keywords) > -1)
				}
				return ret
			}
		},
		props: {
			show: {
				default () {
					return false
				}
			},
			value: {
				default () {
					return {
						regIds: [],
						regNames: []
					}
				}
			}
		},
		data() {
			return {
				curTabIndex: 0,
				keywords: '',
				curCountryList: [], // { id , name, nameEn }
				curList: [], // { id , name, nameEn }
				submitVals: {
					regIds: [],
					regNames: []
				},
			}
		},
		async created() {
			const res = await apiService.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, regionType
			} = {}) {
				let countryId = this.submitVals.regIds[0] // 最外层是国家id
				if (parentId == countryId) {
					parentId = undefined
				}
				const res = await apiService.getEmisRegion({
					regionType, // 必填
					parentCode: parentId,
					countryCode: countryId,
				})
				const list = res.rows || []
				list.map(t => {
					t.name = t.regionName
					t.nameEn = t.regionNameEn
					t.code = t.code || t.regionCode
				})
				this.curList = list
				return list
			},
			changeCurTab(index) {
				this.keywords = ''
				this.curTabIndex = index
				if (index == 0) {
					// 国家特殊处理
					this.curList = this.curCountryList
				} else {
					let parentId = this.submitVals.regIds[index-1]
					// 有父级code的才做刷新列表视图
					if(parentId) {
						this.getListData({
							regionType: this.curTabIndex,
							parentId
						})
					}
				}
			},
			async addEmptyItem() {
				this.submitVals.regIds.push(undefined)
				this.submitVals.regNames.push('请选择')
				this.curTabIndex = this.curTabIndex + 1
			},
			async selectItemRegion(item = {}) {
				this.keywords = ''
				// 选择数据变化，需清除下所有层级选中数据
				if (item.code != this.submitVals.regIds[this.curTabIndex]) {
					this.submitVals.regIds.length = this.curTabIndex
					this.submitVals.regNames.length = this.curTabIndex
					this.submitVals.regIds.push(item.code)
					this.submitVals.regNames.push(item.name)
				}
				const list = await this.getListData({
					regionType: this.curTabIndex + 1,
					parentId: item.code
				})
				// 选择最后一个tab视图 才做追加
				if (list.length > 0 && this.curTabIndex + 1 == this.submitVals.regIds.length) {
					this.addEmptyItem(item)
				}
			},
			handleCloseModal() {
				this.$emit('update:show', false)
			},
			handleSubmitValue() {
				const val = this.submitVals
				val.regIds = val.regIds.filter(t=> typeof(t) != 'undefined')
				val.regNames = val.regNames.filter(t=> t != '请选择')
				this.$emit('onSure', val)
				this.$emit('update:value', val)
				this.handleCloseModal()
			}
		}
	}
</script>

<style scoped lang="scss">
	.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-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>