yizhizan-h5/package/jobIntention/city.vue

<template>
	<view class="address">
		<navBar title="选择城市" color="#000" />
		<!-- 中间主体内容 -->
		<view class="content">
			<scroll-view scroll-y="true" style="width: 100%; height: 100%" :scroll-into-view="toView"
				scroll-with-animation="true">
				<view style="margin: 0 32rpx;">
					<view class="content-title"> 选择城市 </view>
					<view class="content-search">
						<u-search placeholder="搜索城市名" v-model="keyword" @change="getCitysList"
							:show-action="false"></u-search>
					</view>
					<view class="content-map">
						<view class="flex align-center justify-between" @click="getLatOrLng">
							定位城市
							<view class="" style="font-size: 24rpx; font-weight: 500; color: #999999">
								<u-icon name="map" color="#999999" style="margin-right: 10rpx" size="24"></u-icon>重新定位
							</view>
						</view>
						<view class="content-map-address flex justify-center align-center" @click="selectCity(city)">
							{{ city }}
						</view>
					</view>
					<view class="content-map flex justify-between flex-wrap" v-if="rmCity.length > 0">
						<view class="" style="width: 100%"> 热门城市 </view>
						<view class="content-map-address flex justify-center align-center" @click="selectCity(item)"
							v-for="(item, index) in rmCity" :key="index">
							{{ item }}
						</view>
						<view class="content-map-address flex justify-center align-center" style="height: 0">
						</view>
					</view>
				</view>
				<!-- 城市列表 -->
				<view :id="item.letter" class="content-map flex justify-between flex-wrap"
					v-for="(item, index) in cityList" v-if="item&&item.city.length > 0" :key="index">
					<view class="" style="width: 100%;background-color: #f2f2f7;line-height: 60rpx;padding-left: 32rpx;">
						{{ item.letter.toUpperCase() }}
					</view>
					<view style="width: 100%;">
						<view class="content-map-address-style" @click="selectCity(ite)"
							v-for="(ite, ind) in item.city" :key="ind">
							{{ ite }}
						</view>
					</view>
					<!-- <view class="content-map-address flex justify-center align-center" style="height: 0">
					</view> -->
				</view>
			</scroll-view>
		</view>
		<view class="left flex justify-center flex-wrap">
			<view :data-id="item" class="left-item" v-for="(item, index) in list" @tap="bindToView">
				{{ item.toUpperCase() }}
			</view>
		</view>
		<u-popup mode="top" ref="permission">
			<view class="popup-content">
				<view class="popup-text-permission">获取位置需要定位权限，用于推荐同城的求职岗位或牛人</view>
			</view>
		</u-popup>
	</view>
</template>

<script>
	import navBar from "@/components/nav-bar/index.vue";
	import citySelect from '@/static/citySelect.js';
	import cityData from '@/static/cityData.js';
	export default {
		data() {
			return {
				searchList: [],
				cityList: [],
				rmCity: [],
				keyword: "",
				list: [],
				toView: "",
				city: "",
				latitude: "",
				longitude: "",
				type:''
			};
		},
		components: {
			navBar,
		},
		onLoad(options) {
			//#ifdef H5
			this.getLatOrLng(); //获取经纬度
			//#endif
			this.getRmCityList(); //热门城市
			this.getCitysList();
			this.type=options&&options.type
			if(this.$queue.getData('city'))
				this.city=this.$queue.getData('city')
		},
		methods: {
			/**
			 * 热门城市列表
			 */
			getRmCityList() {
				let data = {
					limitCount: 10,
				};
				this.$Request.get("/app/postPush/getHotCity", data).then((res) => {
					if (res.code == 0) {
						this.rmCity = res.data;
					}
				});
			},
			/**
			 * 获取城市列表
			 */
			getCitysList() {
				let filtered = this.keyword ?
					cityData.filter(item => item.cityName.includes(this.keyword)) :
					cityData;
				let grouped = {};
				filtered.forEach(item => {
					let letterObj = citySelect.getFirstLetter(item.cityName);
					let letter = letterObj.firstletter.toUpperCase();
					if (!/^[A-Z]$/.test(letter)) letter = '#';
					if (!grouped[letter]) grouped[letter] = [];
					grouped[letter].push(item.cityName);
				});
				let sortedLetters = Object.keys(grouped).sort((a, b) => {
					if (a === '#') return -1;
					if (b === '#') return 1;
					return a.localeCompare(b);
				});
				this.cityList = sortedLetters.map(letter => ({
					letter,
					city: grouped[letter]
				}));
				this.list = sortedLetters;
			},
			/**
			 * 定位获取经纬度
			 */
			async getLatOrLng() {
				let that = this;
				// #ifdef APP
				  const hasPermission = await this.$queue.checkPermission(
				    'location', // 固定传 'location'，双端通用
				    '获取您的位置用于推荐附近的求职岗位', // 提示文案也无需区分系统（统一表述即可）
					this
				  );
				console.log(hasPermission)
				  if (!hasPermission) {
				    uni.showToast({ title: '未获取定位权限，无法推荐附近岗位', icon: 'none' });
				    return;
				  }
				// #endif
				
				uni.getLocation({
					type: "wgs84", //wgs84  gcj02
					success: function(res) {
						console.log(res, "地理位置");
						that.latitude = res.latitude;
						that.longitude = res.longitude;
						// #ifdef APP-PLUS
						if (res.address) {
							that.city = res.address.city;
						} else {
							that.getSelectCity(that.longitude, that.latitude);
						}
						// #endif
						// #ifndef APP
						that.getSelectCity(that.longitude, that.latitude);
						// #endif
					},
					fail: function(err) {
						console.log("获取地址失败", err);
					},
				});
			},
			/**
			 * @param {Object} longitude
			 * @param {Object} latitude
			 * 使用经纬度获取城市
			 */
			getSelectCity(longitude, latitude) {
				console.log(longitude + "" + latitude, "app请求经纬度");
				this.$Request
					.get("/app/Login/selectCity?lat=" + latitude + "&lng=" + longitude)
					.then((res) => {
						if (res.code == 0) {
							console.log(res, "app定位请求");
							this.city = res.data.city ? res.data.city : "未知";
						}
					});
			},
			/**
			 * @param {Object} city
			 * 选择城市
			 */
			selectCity(city) {
				uni.$emit("city", {
					city: city,
				});
				let data = {
					city: city=='全国'||city=='全部'?'':city,
					county: ''
				}
				uni.$emit('filterCity', data)
				uni.navigateBack({
					delta: this.type=='search'?2:1,
				});
			},

			bindToView(event) {
				var id = event.currentTarget.dataset.id;
				console.log(id);
				this.toView = id;
			},
		},
	};
</script>

<style lang="scss">
	.address {
		display: flex;
		flex-direction: column;
		height: 100vh;
	}

	.content {
		flex: 1;
		overflow: hidden;

		.content-title {
			width: 100%;
			font-size: 38rpx;
			font-weight: bold;
			margin-top: 30rpx;
		}

		.content-search {
			width: 100%;
			height: 60rpx;
			border-radius: 24rpx;
			background-color: #f2f2f7;
			margin-top: 30rpx;
		}

		.content-map {
			width: 100%;
			margin-top: 30rpx;
			font-size: 30rpx;
			font-weight: bold;

			.content-map-address {
				margin-top: 20rpx;
				width: 200rpx;
				height: 70rpx;
				background-color: #f2f2f7;
				font-size: 26rpx;
				font-weight: 500;
			}
			.content-map-address-style{
				padding: 0 32rpx;
				height: 88rpx;
				line-height: 88rpx;
				font-size: 26rpx;
				font-weight: 500;
				border-bottom: 1px solid #f3f3f3;
			}
		}
	}

	.left {
		position: fixed;
		right: 0;
		top: 50%;
		transform: translate(0, -50%);
		width: 30rpx;

		.left-item {
			margin-top: 15rpx;
			padding-left: 10rpx;
			padding-right: 10rpx;
			color: #016bf6;
		}
	}
</style>