jobslink-user-clent/pages/setCity/setCity.vue

<template>
	<view>
		<view class="title">
			全部
		</view>
		<block v-for="item in city" :key="item.value">
			<view class="cityList" @click="cityClick(item)">
				{{item.label}}
				<image src="../../static/img/correct.svg" v-if='id === item.value' mode=""></image>
				<image v-else-if="layer !== maxLayer" src="../../static/img/right.svg" mode=""></image>
			</view>
		</block>
		<view class="" v-if="layer === maxLayer" style="height: 230rpx;background-color: #f6f6f6;"></view>
		<view class="btn" v-if="layer === maxLayer" @click="comfirm">
			<view class="bottombtn">
				确定
			</view>
		</view>
	</view>
</template>

<script>
	import {
		getcoder
	} from "@/api/map.js";

	import {
		mapGetters
	} from 'vuex'
	export default {
		data() {
			return {
				choose: false,
				chooseIndex: '',
				parentId: undefined,
				layer: 1,
				maxLayer: 3,
				id: '',
			}
		},
		computed: {
			...mapGetters(['area']),
			city() {
				if (this.parentId) {
					return this.area.children[this.parentId]
				} else {
					return []
				}
			}
		},
		created() {},
		onLoad({
			parentId,
			layer,
			maxLayer
		}) {
			this.parentId = parentId || '0'
			this.layer = parseInt(layer || 1)
			this.maxLayer = parseInt(maxLayer || 3)
		},
		onShow: function() {},
		methods: {
			cityClick(item) {
				if (this.layer === this.maxLayer) {
					this.selectCity(item)
				} else {
					this.goCityInfo(item)
				}
			},
			selectCity(item) {
				this.id = item.value
			},
			goCityInfo(item) {
				uni.navigateTo({
					url: `./setCity?layer=${this.layer + 1}&maxLayer=${this.maxLayer}&parentId=${item.value}`
				})
			},
			comfirm: function() {
				if (this.id) {
					uni.$emit("setCity", this.id)
					uni.navigateBack({
						delta: this.layer
					})
				} else {
					uni.showToast({
						title: "请选择地点",
						icon: "none"
					})
				}
			},
		}
	}
</script>

<style>
	.bottombtn {
		background-color: #1B66FF;
		color: #fff;
		text-align: center;
		border-radius: 10rpx;
		font-family: PingFangSC-Medium;
		font-size: 32rpx;
		height: 90rpx;
		line-height: 90rpx;
	}

	.btn {
		background-color: #fefefe;
		width: 690rpx;
		padding: 30rpx;
		padding-bottom: 80rpx;
		position: fixed;
		bottom: 0;
		left: 0;
	}

	.cityList image {
		width: 32rpx;
		height: 32rpx;
	}

	.cityList {
		display: flex;
		align-items: center;
		justify-content: space-between;
		font-family: PingFangSC-Regular;
		font-size: 32rpx;
		color: #333333;
		padding: 30rpx;
		padding-left: 0;
		margin-left: 30rpx;
		width: 690rpx;
		border-bottom: 1rpx solid #dddddd;
	}

	.location {
		font-family: PingFangSC-Regular;
		font-size: 32rpx;
		color: #333333;
		display: flex;
		align-items: center;
		justify-content: flex-start;
		padding: 30rpx;
	}

	.comfirm {
		margin-left: auto;
	}

	.location image {
		width: 40rpx;
		height: 40rpx;
	}

	.title {
		font-family: PingFangSC-Regular;
		font-size: 28rpx;
		color: #999999;
		background-color: #f6f6f6;
		padding: 30rpx;
	}

	page {
		background-color: #fefefe;
	}
</style>