bawangcan-user/pages/index/selectCampus.vue

<template>
	<view class="container">
		<view class="search-bar">
			<view class="search-bar-form">
				<view class="navLeft" @tap="gocity">
					<view class="localName">{{city}}</view>
					<text class="cuIcon-unfold"></text>
				</view>
				<view class="search-bar-box">
					<icon class="icon-search-in-box" type="search" size="16"></icon>
					<input disabled="false" class="search-bar-input" placeholder="搜索地址" @click="dingwei" />
				</view>
			</view>
		</view>
		<view class="tui-list search-result" v-if="weizhi.names">
			<view class="current-city">
				<view class="current-left" @tap="saveAddress">
					<view class="positionT">{{weizhi.names}}</view>
					<view class="positionJ">{{weizhi.dizhi}}</view>
				</view>
				<view class="current-right" @tap="dingwei">
					<image class="dw" mode="widthFix" src="../../static/img/home/dw.png"></image><span>重新定位</span>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	import ZhToPinYin from '@/js_sdk/tui-zh-pinyin/tui-zh-pinyin.js';
	var QQMapWX = require('@/js_sdk/qqmap-wx-jssdk1.2/qqmap-wx-jssdk.js');
	var qqmapsdk;
	// #ifdef MP-WEIXIN
	var citySelector = requirePlugin('citySelector');
	// #endif
	export default {
		data() {
			return {
				inputVal: '', // 搜索框输入的内容
				inputShowed: false, // 输入框是否显示
				list: [],
				latitude: '',
				longitude: '',
				searchResult: [], // 搜索城市的结果
				weizhi: {
					names: "",
					dizhi: ""
				},
				city: ''
			}
		},
		onLoad: function(options) {
			const that = this;
			// #ifdef MP-WEIXIN
			// 实例化API核心类
			qqmapsdk = new QQMapWX({
				key: 'J5FBZ-XCUKI-UFEG2-5KOJJ-XD4L3-KNFNG'
			});
			// #endif
			if (options.name && options.name != '') {
				that.weizhi.names = options.name;
				that.weizhi.dizhi = options.dizhi;
			}
		},
		onShow() {
			// #ifdef MP-WEIXIN
			const item = citySelector.getCity();
			if(item){
				 citySelector.clearCity();
				 this.$queue.setData('latitude', item.location.latitude);
				 this.$queue.setData('longitude', item.location.longitude);
				 this.$queue.setData('city', item.name);
				 this.$queue.setData('localCampus', item.name);
			}
			// #endif
			var city = this.$queue.getData("city")
			if (city != '') {
				this.city = city
			}
		},
		methods: {
			gocity() {
				const key = 'YXDBZ-P5LWW-375RH-OCVNQ-B2HY7-U6FBG'; // 使用在腾讯位置服务申请的key
				const referer = '番茄饭团霸王餐'; // 调用插件的app的名称
				const hotCitys = ''; // 用户自定义的的热门城市
				wx.navigateTo({
					url: `plugin://citySelector/index?key=${key}&referer=${referer}&hotCitys=${hotCitys}`,
				})

				// uni.navigateTo({
				// 	url: '/pages/index/citys'
				// });
			},
			saveAddress() {
				console.log("this.city____:" + this.city)
				this.$queue.setData('latitude', this.latitude);
				this.$queue.setData('longitude', this.longitude);
				this.$queue.setData('city', this.city);
				this.$queue.setData('localCampus', this.weizhi.names);
				uni.navigateBack();
			},
			initLocation(latitude, longitude) {
				var that = this;
				qqmapsdk.reverseGeocoder({
					location: latitude + ',' + longitude || '',
					success: function(res) { //成功后的回调
						if (res.status == 0) {
							console.log(res)
							let s = res.result.ad_info.city.substring(0, res.result.ad_info.city.length - 1);
							that.city = s;
							console.log(that.city)
							// that.province = res.result.address_component.province;
							// that.city = res.result.address_component.city;
							// that.district = res.result.address_component.district;
							// that.address = that.province + that.city + that.district;
						}
					},
					fail: function(error) {
						console.error(error);
					},
					complete: function(res) {
						console.log(res);
					}
				})
			},
			dingwei() {
				const that = this;
				const lat = this.$queue.getData('latitude');
				const lon = this.$queue.getData('longitude');
				uni.chooseLocation({
					latitude: lat,
					longitude: lon,
					success: function(res) {
						console.log(res)
						console.log('位置名称：' + res.name);
						console.log('详细地址：' + res.address);
						console.log('纬度：' + res.latitude);
						console.log('经度：' + res.longitude);
						if (res.name && res.address) {
							// #ifdef H5
							that.loAcquire(res.longitude,res.latitude)
							// #endif
							// #ifdef MP-WEIXIN
							that.initLocation(res.latitude, res.longitude);
							// #endif
							that.latitude = res.latitude;
							that.longitude = res.longitude;
							that.weizhi.names = res.name;
							that.weizhi.dizhi = res.address
						} else {
							that.$queue.showToast('请选择正确地址信息！');
						}
					}
				});
			},
			loAcquire(longitude,latitude){
				let that = this;
				uni.showLoading({
				    title: '加载中',
					mask:true
				});
				let str = `output=jsonp&key=J5FBZ-XCUKI-UFEG2-5KOJJ-XD4L3-KNFNG&location=${latitude},${longitude}`
				this.$jsonp('https://apis.map.qq.com/ws/geocoder/v1/?'+str,{}).then(res=>{
				  uni.hideLoading();
				  if(res.status == 0){
					  console.log(res)
					  let s = res.result.ad_info.city.substring(0, res.result.ad_info.city.length - 1);
					  that.city = s;
					  console.log(that.city)
				  }
				})
			},
		}
	}
</script>

<style lang="scss">
	page {
		height: 100%;
	}

	.page {
		height: 100%;
		overflow: hidden;
	}

	.search-bar {
		display: flex;
		align-items: center;
		padding: 27rpx 30rpx 35rpx;
		background-color: #fff;
	}

	.search-bar-form {
		display: flex;
		align-items: center;
	}

	.search-bar-box {
		display: flex;
		align-items: center;
		position: relative;
		padding-left: 20rpx;
		padding-right: 20rpx;
		width: 538rpx;
		height: 64rpx;
		z-index: 1;
		border-radius: 32rpx;
		background: #f2f5f7;
		margin-left: 20rpx;
	}
	
	.search-bar-input {
		line-height: normal;
		width: 100%;
		padding-left: 20rpx;
		font-size: 30rpx;
		color: #333;
	}

	.phcolor {
		font-size: 30rpx;
	}

	.icon-clear {
		height: 38rpx;
	}

	.icon-clear .tui-icon-class {
		display: block
	}

	.search-bar-label {
		height: 64rpx;
		display: flex;
		justify-content: center;
		align-items: center;
		position: absolute;
		top: 0;
		right: 0;
		bottom: 0;
		left: 0;
		z-index: 2;
		border-radius: 32rpx;
		color: #ccc;
		background: #f2f5f7;
	}

	.icon-search {
		position: relative;
		height: 26rpx;
		margin-right: 20rpx;
		font-size: inherit;
	}

	.search-bar-text {
		font-size: 30rpx;
		line-height: 32rpx;
	}

	.cancel-btn {
		padding-left: 30rpx;
	}

	.search-result::before {
		display: none;
	}

	.search-result::after {
		display: none;
	}

	.tui-list-cell {
		display: flex;
		flex-direction: row;
		justify-content: space-between;
		align-items: center;
		width: 100%;
	}

	.tui-list-cell-hover {
		background-color: #eee !important;
	}

	.tui-list-cell-navigate {
		width: 100%;
		position: relative;
		padding: 30rpx 0 30rpx 30rpx;
		font-size: 28rpx;
		color: #333;
	}

	.tui-list-cell-navigate::after {
		content: '';
		position: absolute;
		border-bottom: 1rpx solid #eaeef1;
		-webkit-transform: scaleY(0.5);
		transform: scaleY(0.5);
		bottom: 0;
		right: 0;
		left: 30rpx;
	}

	.current-city {
		padding: 0 30rpx 30rpx;
		background: #fff;
		position: relative;
	}

	.current-city1 {
		margin-top: 15px;
	}

	.current-left {
		width: 70%;
	}

	.current-left1 {
		width: 100%;
		padding: 30upx 0;
		border-bottom: 1px solid #efefef;
	}

	.positionT {
		font-size: 15px;
		font-weight: 600;
	}

	.positionJ {
		font-size: 12px;
		color: #999;
	}

	.current-right {
		position: absolute;
		right: 0;
		top: 20%;
		width: 30%;
		text-align: center;
		font-size: 12px;
		color: #FF4701;
	}

	.dw {
		width: 30upx;
		position: relative;
		top: 6upx
	}

	.current-city .title {
		padding-top: 30upx;
		font-size: 24rpx;
		line-height: 24rpx;
		color: #999;
	}


	.localName {
		float: left;
	}


	.bns {
		position: fixed;
		bottom: 0;
		width: 100%;
		height: 100upx;
		line-height: 100upx;
		text-align: center;
		background: #fff;
		font-size: 36upx;
		color: #333;
	}

	.tj {
		width: 40upx;
		position: relative;
		top: 6upx;
		right: 6upx;
	}
</style>