tearoom/page_user/city.vue

<template>
	<view>
		<u-navbar title="选择城市" :border-bottom="false" :background="bgc" back-icon-color="#262B37" title-color='#262B37'
			title-size='36' height='40' id="navbar">
		</u-navbar>
		<view class="header w100 flexw">
			<view class="placeholder"></view>
			<view class="flex w100"> 
				<input class="input" :focus="true" @confirm="doneInput" v-model="value" type="text"  confirm-type="search"  :adjust-position="false" placeholder="请输入城市名称" />
				<view style="color: #333;border: 1px solid #ccc;border-radius: 10rpx;margin-left: 20rpx;" class="back_div fsmall bold blue" @tap="onInput()">
					搜索
				</view> 
			</view>
		</view>
	 
		<scroll-view class="w100" scroll-y="true"   :scroll-into-view="scrollIntoId" :style="{height:scrollHeight}" @touchmove.stop.prevent>
			<view v-if="disdingwei" id="hot">
				<!-- 定位模块 -->
				<view class="dingwei">
					<view class="grey flexa fsmall">
						当前定位城市
					</view>
					<view class="dingwei_city">
						<view class="dingwei_city_one" @tap="btncity(cityId,position)">
							{{position}}
						</view>
						<view class="bold blue fmiddle" @click="getWarpweft"> 
							<text style="color:#6a7ef8 ;">{{po_tips}}</text>
						</view>
					</view>
				</view>
 
				<!-- 最近模块 -->
				<!-- <view class="dingwei" v-if="cacheLocation">
					<view class="grey flexa fsmall">
						历史浏览城市
					</view>
					<view class="dingwei_city dingwei_city_zuijin">
						<view class="dingwei_city_one" v-for="(item,index) in cacheLocation" :key="index"   @tap="back_city(item)">
							{{item.city_name}}
						</view>
					</view>
				</view> -->
				<!-- 热门 -->
				<!-- <view class="dingwei" v-if="hotCity">
					<view class="grey flexa fsmall">
						热门城市
					</view>
					<view class="dingwei_city dingwei_city_zuijin">
						<view class="dingwei_city_one" v-for="(item,index) in hotCity" :key="index"   @tap="back_city(item)">
							{{item.city_name}}
						</view>
					</view>
				</view> -->
 
			</view>
 
 
			<!-- 城市列表 -->
			<view v-if="searchValue == ''" v-for="(item, index) in list" :key="index" @click="btncity(item.cityId,item.cityName)">
				<view class="letter-header bold"></view>
				<view class="contents">
				  <view class="city-div">
					<text class="city">{{ item.cityName }}</text>
				  </view>
				</view>
			</view>
			<view class="placeholder footer"></view>
		</scroll-view>
	</view>
</template>
 
<script> 
	import Citys from '@/components/city.js';
	export default {
 
		data() {
			return {
				statusBar:'0px',
				customBar:'45px',
				
				winHeight: 0,
				itemHeight: 0,
				winOffsetY: 0,
				touchmove:false,
				bgc: {
					backgroundColor: "#fff",
				},
				
				scrollHeight: this.statusBarHeight,
				ImgUrl: this.ImgUrl,
				letter: [],
		 
				searchValue: '',
				scrollIntoId: '',
				list: [],
				tId: null,
				searchList: [],
				showMask: false,
				disdingwei: true,
				cacheLocation: [
					{'city_name':'北京'}
				], //最近访问
				position: '', //定位获取的位置
	            cityId:'',
				po_tips: '重新定位',
				hotCity:[
					{'city_name':'北京市'},
					{'city_name':'杭州市'},
					{'city_name':'上海市'},
					{'city_name':'温州市'},
					{'city_name':'长沙市'},
					{'city_name':'成都市'},
					{'city_name':'义乌市'},
					{'city_name':'金华市'},
					{'city_name':'厦门市'},
					{'city_name':'广州市'},
					{'city_name':'深圳市'}
				],
				value:'',
				type:''
			}
		},
		watch:{
			// list(){
			// 	setTimeout(()=>{
			// 		this.setList()
			// 	},100)
			// }
		},
 
		onLoad(option) {
			if(option.type){
				this.type = option.type
			}
			this.getcity()
			this.scrollHeight = uni.getSystemInfoSync().windowHeight - parseInt(this.customBar) +'px'
			//获取存储的最近访问
			var that = this
			// uni.getStorage({
			// 	key: 'location_key',
			// 	success: function(res) {
			// 		that.cacheLocation = res.data
			// 	}
			// });
			//获取定位 经度纬度
			that.getWarpweft()
		   
			// let cityLen = Citys.data.city_nav
			 // this.letter = Citys.index;
			 // this.list = Citys.list; 
			 // this.hotCity = Citys.data.hot_city; 
		},
		methods: {
			// 搜索城市
			onInput() {
				this.getcity()
			},
			// 点击选择城市返回首页
			btncity(cityId,cityName){
				if(this.type == 100){
					uni.reLaunch({
						url:'/page_fenbaotwo/hexiao/xzdp?cityId=' + cityId + '&cityName=' + cityName
					})
				}else{
					uni.reLaunch({
						url:'/pages/nearbystores/index?cityId=' + cityId + '&cityName=' + cityName
					})
				}
			},
			// 查询所有级城市
			getcity(){
				this.$u.get(`/app/allCity/list?cityName=`+ this.value).then(res => {
					if(res.code == 200){
						this.list = res.data
					}
				})
			},
			back(){
				//你自己实现 返回上一页
			},
			setList() { 
				uni.createSelectorQuery()
					.in(this)
					.select('#list')
					.boundingClientRect()
					.exec(ret => { 
						this.winOffsetY = ret[0].top
						this.winHeight = ret[0].height
						this.itemHeight = this.winHeight / this.list.length
					})
				 
			},
			touchStart(e) {
				this.touchmove = true
				let pageY = e.touches[0].pageY
				let index = Math.floor((pageY - this.winOffsetY) / this.itemHeight) 
				if (this.list[index]) {
					this.scrollIntoId = this.list[index].idx
				}
			},
			touchMove(e) {  
				let pageY = e.touches[0].pageY
				let index = Math.floor((pageY - this.winOffsetY) / this.itemHeight)
				if (this.list[index] && this.list[index].idx === this.scrollIntoId) {
					return false
				}
				if (this.list[index]) {
					this.scrollIntoId = this.list[index].idx
				} 
			},
			touchEnd() {
				this.touchmove = false
				this.touchmoveIndex = -1
			},
			
			doneInput(){
				uni.hideKeyboard()
			},
			move(e){
				console.log(111,e);
			},
			getId(index) {
				return this.letter[index];
			},
			query(source, text) {
				let res = [];
				var self = this;
				let len = source.length
				var text = text.toLowerCase()
				for (let i = 0; i < len; i++) {
					//单字母搜索
					if(text.length == 1 && /^[a-zA-Z]$/.test(text)){
						let arr = []
						let idx = text.toUpperCase()
						if(idx == source[i].idx){
							console.log(222,source[i]);
							return source[i].cities
						}
					}
					//其它搜索
					if(source[i].cities){
						let _len = source[i].cities.length
						for (var n = 0; n < _len; n++) {
							let _item = source[i].cities[n]
							 if(new RegExp('^' + text).test(_item.city_name)){
								  res.push(_item);
								  continue;
							 }
							 if(new RegExp('^' + text).test(_item.city_pinyin)){
								  res.push(_item); 
								  continue;
							 }
							 if(new RegExp('^' + text).test(_item.py)){
								  res.push(_item); 
								  continue;
							 }
							 
						} 
					}
				}
				
				return res;
			},
 
			isString(obj) {
				return typeof obj === 'string';
			},
 

 
			back_city(item,hasLocation = false) { 
				console.log(333,item);
				// this.$store.commit('getCity',item.city_name)
				uni.request({
					 url: 'https://apis.map.qq.com/ws/geocoder/v1',
					 data: {
							 key: 'ZQLBZ-UWQCZ-PCJXC-ZPGDU-LNVX5-MDF6T',
							 address: item.city_name,
							 output: 'json',
								 },
						     success:res=>{
								console.log(res)
							 }
						})
				// uni.reLaunch({
				// 	url:'/pages/nearbystores/index'
				// })
				if (item) {
					//是否是定位 
					if(hasLocation){
						item = {city_name:item.city,location:item}
					}
					uni.$emit('selectCity', item);
					//unshift 把数据插入到首位，与push相反
					if(!this.cacheLocation)this.cacheLocation = []
					this.cacheLocation.unshift(item)
					this.searchValue = "";
					this.disdingwei = true
					var arr = this.cacheLocation
					//数组去重
					function distinct(arr) {
						let newArr = []
						for (let i = 0; i < arr.length; i++) {
							if (newArr.indexOf(arr[i]) < 0) {
								newArr.push(arr[i])
							}
						}
						return newArr
					}
					this.cacheLocation = distinct(arr).slice(0,5) 
					uni.setStorage({
						key: 'location_key',
						data: this.cacheLocation
					});
				} 
				this.back() 
			},
			getWarpweft() {
				let that = this
				that.position = '定位中...'
				uni.getLocation({
				  type: 'wgs84',
				  success: res => {
					  this.$u.get(`app/getCity?lon=${res.longitude}&lat=${res.latitude}`).then(res => {
					  	if(res.code == 200){
					  		that.position = res.data.cityName
							that.cityId = res.data.cityId
					  	}
					  })
				  },
				  fail: err => {
				    // 获取失败，err为错误信息
				    console.log('getLocation err:', err);
					that.position = '定位失败'
				  }
				})
			}
		}
	};
</script>
 
<style scoped>
	.fsmall{
		font-size: 26rpx;
	}
	.fmiddle{
		font-size: 28rpx;
	}
	.blue{
		color: #007AFF;
	}
	.bold{
		/* font-weight: 600; */
		color: #ccc;
		margin: 20rpx 20rpx 20rpx 0;
		line-height: 60rpx;
	}
	.flex{
		display: flex;
		justify-content: center;
		align-items: center;
	}
	.mask {
		position: fixed;
		z-index: 3;
		top: 40%;
		left: 40%;
	}
 
	.mask-r {
		height: 120rpx;
		width: 120rpx;
		border-radius: 60rpx;
		display: flex;
		background: rgba(0, 0, 0, 0.5);
		backdrop-filter: blur(5px);
		justify-content: center;
		align-items: center;
		font-size: 40rpx;
		color: #FFFFFF
	}
 
	.content {
		height: 100%;
		width: 100%;
		background-color: #ffffff;
	}
 
	.header { 
		width: 100%;
		position: relative;
		z-index: 8;
		background-color: #FFFFFF;
	}
 
 
	.back_div {
		width: 100rpx;
		height: 100%;
		display: flex;
		justify-content: center;
		align-items: center;
	}
 
	.back_img {
		width: 35rpx;
		height: 35rpx;
	}
 
	.input {
		font-size: 26rpx;
		width: 580rpx;
		height: 60rpx;
		max-height: 60rpx;
		border-radius: 10rpx;
		background-color: #F5F5F5;
		padding-left: 20rpx;
		padding-right: 20rpx;
		box-sizing: border-box;
	}
 
	.title {
		font-size: 30rpx;
		color: white;
	}
 
	.show {
		left: 0;
		width: 100%;
		transition: left 0.3s ease;
	}
 
	.hide {
		left: 100%;
		width: 100%;
		transition: left 0.3s ease;
	}
 
 
	.title {
		font-size: 30rpx;
		color: white;
	}
	.letters {
		position: absolute;
		right: 0; 
		width: 50rpx;
		color: #cccccc; 
		top: 25%; 
		text-align: center;
		font-size: 24rpx;
		font-weight: 510;
	}
	.letters .fmin{
		
	}
 
 
	.letter-header { 
		font-size: 28rpx; 
		padding-left: 40rpx;
		box-sizing: border-box;
		display: flex;
		align-items: center; 
 
	}
 
	.city-div {
		display: inline-block;
		/* width: 660rpx; */
		margin: auto;
		padding: 20rpx 0;
		/* border-bottom-width: 0.5rpx; */
		/* border-bottom-color: #ebedef; */
		/* border-bottom-style: solid; */
		/* display: flex; */
		align-items: center; 
	}
 
	.city {
		font-size: 28rpx;
		color: #000000;
		padding-left: 30rpx;
	}
 
	.dingwei {
	/* 	width: 90%;
		margin: auto; */
		padding-top: 25rpx;
		box-sizing: border-box;
		margin-bottom: 26rpx;
	}
	.dingwei .grey{
		margin-bottom: 25rpx;
		margin-left: 30rpx;
	} 
 
	.dingwei_city {
		width: 100%;  
		box-sizing: border-box;
		display: flex;
		justify-content: space-between;
		background: #fff;
		padding-left: 20rpx;
		padding-right: 20rpx;
	}
 
	.dingwei_city_one { 
		height: 60rpx;
		/* background-color: #F5F5F5; */
		/* border-radius: 30rpx; */
		font-size: 26rpx; 
		padding: 0 20rpx;
		display: flex;
		justify-content: center;
		align-items: center;
		margin: 20rpx 20rpx 20rpx 0;
	}
 
 
	.dingweis {
		width: 32rpx;
		height: 32rpx;
	}
 
	.dingwei_city_zuijin {
		display: flex;
		justify-content: flex-start;
		flex-wrap: wrap;
	} 
	.contents{
		/* display: flex; */
		background-color: #fff;
		padding-left: 30rpx;
		padding-right: 30rpx;
		box-sizing: border-box;
	}
</style>