pet_server/pages/Delivery/location.vue

<template>
	<view class="content">
		<u-index-list :scrollTop="scrollTop" class="scroll-list">
			<view v-for="(item, index) in area" :key="index" class="list-box">
				<u-index-anchor :index="item.index" />
				<view v-for="(iitem,iindex) in item.child" :key="iindex" class="address_name row"
					@click="checked(index,iindex)">
					<view :style="iitem.checked?'color:#F6B301':''">{{iitem.title}}</view>
					<view class="icon">
						<u-icon v-if="iitem.checked" name="checkmark-circle" color="#F6B301"></u-icon>
					</view>
				</view>
			</view>
		</u-index-list>
		<view class="bottom-btn">
			<view class="buttom-dom row">
				<!-- <view class="all" @click="checkAll">
					全选
				</view> -->
				<view class="push" @click="push">
					确定
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	// import { area } from "@/utils/area.js"
	export default {
		data() {
			return {
				scrollTop: 0,
				area: [],
				type: 1,
				checkedArea: []
			}
		},
		onPageScroll(e) {
			this.scrollTop = e.scrollTop;
		},
		onLoad(e) {
			this.getLocation()
			console.log(e)
			if (e.area) {
				this.type = 2
				this.checkedArea = JSON.parse(e.area)
			}
		},
		methods: {
			// 点击确定
			push() {
				let data = []
				let areaStr = ""
				for (let key in this.area) {
					for (let s of this.area[key].child) {
						if (s.checked) {
							data.push(s.id)
							if (areaStr === "") {
								areaStr = s.title
							} else {
								areaStr = areaStr + "," + s.title
							}

						}
					}
				}
				this.$EventBus.$emit('listenSetArea', {
					data,
					areaStr
				})
				uni.navigateBack({
					delta: 1
				})
			},
			// 是否选中
			checked(index, iindex) {
				this.area[index].child[iindex].checked = !this.area[index].child[iindex].checked;
				this.$forceUpdate()
			},
			// 全选
			checkAll() {
				let data = this.area
				for (let key in data) {
					for (let ikey in data[key].child) {
						data[key].child[ikey].checked = true
					}
				}
				this.area = data
				this.$forceUpdate()
			},
			// 获取位置信息
			getLocation() {
				this.request("/common/area_sort", {}, "GET").then(res => {
					if (res.code === 1) {
						this.area = res.data
						if (this.type === 2) {
							let data = this.area
							let checked = this.checkedArea
							for (let key in data) {
								for (let ikey in data[key].child) {
									for (let s of checked) {
										if (data[key].child[ikey].id === s.id) {
											data[key].child[ikey].checked = true
										}
									}
								}
							}
						}
					}
				})
			}
		}
	}
</script>

<style lang="scss">
	.scroll-list {
		height: 90vh;

		.list-box {
			margin-bottom: 80rpx;
		}
	}

	.bottom-btn {
		position: fixed;
		bottom: 0;
		width: 100vw;
		height: 10vh;
		background-color: #FFFFFF;
		display: flex;
		flex-direction: column;
		align-items: center;
		justify-content: center;

		.row {
			justify-content: center;

			.all {
				width: 50%;
				text-align: center;
			}

			.push {
				width: 50%;
				text-align: center;
			}
		}

		.buttom-dom {
			height: 80rpx;
			width: 93%;
			background-color: #F6B301;
			color: #FFFFFF;
			text-align: center;
			line-height: 80rpx;
			color: #FFFFFF;
			border-radius: 80rpx;
		}
	}

	.address_name {
		padding: 30rpx;

		.icon {
			margin-right: 30rpx;
		}
	}
</style>