gas-cylinder-h5/pages/home/locationArea.vue

<template>
	<!-- 地区定位 -->
	<view>
		<u-navbar title="选择地区" autoBack placeholder></u-navbar>
		<view class="card_address">
			<view class="add_title">{{address || '定位中...'}}</view>
			<view class="anew_title" @click="reposition"><u-icon name="map" size="24" color="#f9ae3d"></u-icon>重新定位
			</view>
		</view>
		<view style="margin-top: 20rpx;">
			<view class="item_city" v-for="(item,index) in areaData" @click="selectArea(item,'area')">
				<view class="city_title">{{item.label}}</view>
				<view class="item_district" v-for="(item1,index1) in item.children"
					@click.stop="selectArea(item1,'district')">
					{{item1.label}}
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	import {
		urbanArea
	} from '@/static/js/districtCode.js'
	export default {
		data() {
			return {
				address: '',
				areaData: urbanArea(), //原始数据
			}
		},
		mounted() {
			var city1 = this.$cache.getCache('city')
			var district2 = this.$cache.getCache('district')
			if (city1) {
				this.address = city1
			} else {
				this.address = district2
			}
		},
		methods: {
			selectArea(value, type) {
				this.$cache.setCache('city', '')
				this.$cache.setCache('district', '')
				if (type == 'area') {
					this.$cache.setCache('city', value.label)
				} else if (type == 'district') {
					this.$cache.setCache('district', value.label)
				}
				uni.$emit('selectArea');
				uni.redirectTo({
					url: '/pages/indexRouter'
				})
			},
			// 重新定位
			reposition() {
				uni.getLocation({
					type: 'gcj02', //返回可以用于uni.openLocation的经纬度
					geocode: true,
					success: (res) => {
						this.$cache.setCache('longitude', res)
						this.$cache.setCache('district', res.address.district)
						this.address = res.address.district
						uni.$emit('selectArea');
						uni.redirectTo({
							url: '/pages/indexRouter'
						})
					},
				});
			}
		}
	}
</script>

<style lang="scss" scoped>
	.card_address {
		padding: 30rpx 20rpx;
		display: flex;
		justify-content: space-between;
		align-items: center;
		border-bottom: 2rpx solid transparent;
		border-image: linear-gradient(to bottom, transparent 50%, #e7e6e4 50%) 0 0 100% 0;
		background-color: #fff;
	}

	.add_title {
		font-size: 30rpx;
		font-weight: 600;
	}

	.anew_title {
		display: flex;
		align-items: center;
		font-size: 30rpx;
		color: #f9ae3d;
	}

	.item_city {
		margin: 0rpx 20rpx;
	}

	.city_title {
		font-size: 30rpx;
		font-weight: 600;
		padding-top: 30rpx;
		padding-bottom: 30rpx;
		border-bottom: 2rpx solid transparent;
		border-image: linear-gradient(to bottom, transparent 50%, #e7e6e4 50%) 0 0 100% 0;
	}

	.item_district {
		font-size: 30rpx;
		font-weight: 600;
		padding: 30rpx 20rpx;
		border-bottom: 2rpx solid transparent;
		border-image: linear-gradient(to bottom, transparent 50%, #e7e6e4 50%) 0 0 100% 0;
	}
</style>