Huanyuyuehui/pages/shop/location/index.vue

<template>
	<view>
		
		<view class="tab-nav" :style="`padding-top:`+navtop">
			<view class="back">
				<view class="iconfont icon-zuo" @click="backNav">
					
				</view>
			</view>
			<view class="slot-wrap">
				<image class="icon" src="@/static/images/sousuohui@3.png" mode=""></image>
				<input type="text" v-model="value" placeholder="输入中文/拼音/首字母"
					placeholder-style="color:#999999;font-size:28rpx" @confirm="choseAddress(value)" />
			</view>
		</view>
		<view class="container modal" v-if="cityList.length>0" >
			<view class="list-cell u-border-bottom" v-for="(item1, index) in cityList" :key="index"
				@click="choseAddress2(item1)" style="display: flex;flex-direction: column;">
				{{ item1.name}}
				<text style="color: #999;font-size: 10px;border-bottom:solid 1px #f2f2f2;">{{item1.district}}</text>
			</view>
		</view>
		<view class="container" v-else>

			<view class="cityIndex" v-if="status">
					<view v-for="(item, index) in list" :key="index">
						<view class="list-cell u-border-bottom" v-for="(item1, index) in item.data" :key="index"
							@click="choseAddress(item1)">
							{{ item1 }}
						</view>
					</view>
			</view>
			<view class="cityBox" v-else>
				<view class="box-ul">
					<view class="box-li" v-if="searchList" @click="choseAddress(searchList)">
						{{ searchList }}
					</view>
				</view>
			</view>
			<!-- <u-back-top :scroll-top="scrollTop"></u-back-top> -->
		</view>
	</view>
</template>

<script>
	const {
		globalData
	} = getApp();
	import oRequest from '@/api/admin.js';
	// import my from '@/api/my';
	// import railway from '@/api/railway.js';
	export default {
		data() {
			return {
				type: '',
				data: [],
				 navtop:0,
				gleam: [{
						name: '北京'
					},
					{
						name: '上海'
					},
					{
						name: '深圳'
					},
					{
						name: '广州'
					}
				],
				status: true,
				indexList: ['A', 'B', 'C', 'D', 'E', 'F', 'G', 'H', 'J', 'K', 'L', 'M', 'N', 'P', 'Q', 'R', 'S', 'T', 'W',
					'X', 'Y', 'Z'
				],
				scrollTop: 0,
				searchList: '',
				value: '',
				cityList: [],
				//lists:_stations,
				list: [{
						letter: 'A',
						data: ['阿拉善盟', '鞍山', '安庆', '安阳', '阿坝', '安顺', '阿里', '安康', '阿克苏', '阿勒泰']
					},
					{
						letter: 'B',
						data: [
							'北京','保定','包头','巴彦淖尔','本溪','白山','白城','蚌埠','亳州','滨州','北海','百色','巴中','毕节','保山','宝鸡','白银','博尔塔拉','巴音郭楞'
						]
					},
					{
						letter: 'C',
						data: [
							'承德','沧州','长治','赤峰','长春','常州','滁州','池州','长沙','常德','郴州','潮州','崇左','重庆','成都','楚雄','昌都','昌吉'
						]
					},
					{
						letter: 'D',
						data: [
							'大同','大连','丹东','大庆','大兴安岭','东营','德州','东莞','东沙群岛','德阳','达州','大理','德宏','迪庆','定西'
						]
					},
					{
						letter: 'E',
						data: ['鄂尔多斯', '鄂州', '恩施']
					},
					{
						letter: 'F',
						data: ['抚顺', '阜新', '阜阳', '福州', '抚州', '佛山', '防城港']
					},
					{
						letter: 'G',
						data: ['赣州', '广州', '桂林', '贵港', '广元', '广安', '甘孜', '贵阳', '甘南', '果洛', '固原',
							'高雄'
						]
					},
					{
						letter: 'H',
						data: [
							'邯郸','衡水','呼和浩特','呼伦贝尔','葫芦岛','哈尔滨','鹤岗','黑河','淮安','杭州','湖州','合肥','淮南','淮北','黄山','菏泽','鹤壁','黄石','黄冈','衡阳','怀化','惠州','河源','贺州','河池','海口','红河','汉中','海东','海北','黄南','海南','海西','哈密','和田','花莲县','海外'
						]
					},
					{
						letter: 'J',
						data: [
							'晋城',
							'晋中',
							'锦州',
							'吉林',
							'鸡西',
							'佳木斯',
							'嘉兴',
							'金华',
							'景德镇',
							'九江',
							'吉安',
							'济南',
							'济宁',
							'焦作',
							'荆门',
							'荆州',
							'江门',
							'揭阳',
							'嘉峪关',
							'金昌',
							'酒泉',
							'金门县',
							'基隆',
							'嘉义',
							'嘉义县',
							'九龙'
						]
					},
					{
						letter: 'K',
						data: ['开封', '昆明', '克拉玛依', '克孜勒苏柯尔克孜', '喀什', '可克达拉']
					},
					{
						letter: 'L',
						data: [
							'廊坊',
							'临汾',
							'吕梁',
							'辽阳',
							'辽源',
							'连云港',
							'丽水',
							'六安',
							'龙岩',
							'莱芜',
							'临沂',
							'聊城',
							'洛阳',
							'娄底',
							'柳州',
							'来宾',
							'泸州',
							'乐山',
							'凉山',
							'六盘水',
							'丽江',
							'临沧',
							'拉萨',
							'林芝',
							'兰州',
							'陇南',
							'临夏',
							'连江县',
							'离岛'
						]
					},
					{
						letter: 'M',
						data: ['牡丹江', '马鞍山', '茂名', '梅州', '绵阳', '眉山', '苗栗县']
					},
					{
						letter: 'N',
						data: ['南京', '南通', '宁波', '南平', '宁德', '南昌', '南阳', '南宁', '内江', '南充', '怒江', '那曲',
							'南投县'
						]
					},
					{
						letter: 'P',
						data: ['盘锦', '莆田', '萍乡', '平顶山', '濮阳', '攀枝花', '普洱', '平凉', '屏东县', '澎湖县']
					},
					{
						letter: 'Q',
						data: [
							'秦皇岛',
							'齐齐哈尔',
							'七台河',
							'衢州',
							'泉州',
							'青岛',
							'清远',
							'钦州',
							'黔西南',
							'黔东南',
							'黔南布',
							'曲靖',
							'庆阳'
						]
					},
					{
						letter: 'R',
						data: ['日照', '日喀则']
					},
					{
						letter: 'S',
						data: [
							'石家庄',
							'朔州',
							'沈阳',
							'四平',
							'松原',
							'双鸭山',
							'绥化',
							'上海',
							'苏州',
							'宿迁',
							'绍兴',
							'宿州',
							'三明',
							'上饶',
							'三门峡',
							'商丘',
							'十堰',
							'随州',
							'邵阳',
							'韶关',
							'深圳',
							'汕头',
							'汕尾',
							'三亚',
							'三沙',
							'遂宁',
							'山南',
							'商洛',
							'石嘴山'
						]
					},
					{
						letter: 'T',
						data: [
							'天津',
							'唐山',
							'太原',
							'通辽',
							'铁岭',
							'通化',
							'泰州',
							'台州',
							'铜陵',
							'泰安',
							'漯河',
							'铜仁',
							'铜川',
							'天水',
							'吐鲁番',
							'塔城',
							'台北',
							'台南',
							'台中',
							'桃园',
							'台东县'
						]
					},
					{
						letter: 'W',
						data: [
							'乌海',
							'乌兰察布',
							'无锡',
							'温州',
							'芜湖',
							'潍坊',
							'威海',
							'武汉',
							'梧州',
							'文山',
							'渭南',
							'武威',
							'吴忠',
							'乌鲁木齐'
						]
					},
					{
						letter: 'X',
						data: [
							'邢台',
							'忻州',
							'兴安盟',
							'锡林郭勒盟',
							'徐州',
							'宣城',
							'厦门',
							'新余',
							'新乡',
							'许昌',
							'信阳',
							'襄阳',
							'孝感',
							'咸宁',
							'湘潭',
							'湘西',
							'西双版纳',
							'西安',
							'咸阳',
							'西宁',
							'新竹',
							'新北',
							'新竹县',
							'香港岛',
							'新界'
						]
					},
					{
						letter: 'Y',
						data: [
							'阳泉',
							'运城',
							'营口',
							'延边',
							'伊春',
							'盐城',
							'扬州',
							'鹰潭',
							'宜春',
							'烟台',
							'宜昌',
							'岳阳',
							'益阳',
							'永州',
							'阳江',
							'云浮',
							'玉林',
							'宜宾',
							'雅安',
							'玉溪',
							'延安',
							'榆林',
							'玉树',
							'银川',
							'伊犁',
							'宜兰县',
							'云林县'
						]
					},
					{
						letter: 'Z',
						data: [
							'张家口',
							'朝阳',
							'镇江',
							'舟山',
							'漳州',
							'淄博',
							'枣庄',
							'郑州',
							'周口',
							'驻马店',
							'株洲',
							'张家界',
							'珠海',
							'湛江',
							'肇庆',
							'中山',
							'自贡',
							'资阳',
							'遵义',
							'昭通',
							'张掖',
							'中卫',
							'彰化县'
						]
					}
				]
			};
		},
		watch: {
			value(newName, oldName) {
				if (!this.value) {
					this.cityList = [];
					return
				}
				this.list.forEach((item, index, arr) => {
					const fin = item.data.find((items) => {
						return newName == items;
					});
					if (typeof fin == 'string') {
						this.searchList = fin;
						//console.log(this.searchList)
					}
				});
			}
		},
		onLoad(options) {
			this.type = options.type;
			// this.railways()
			// this.getStation()
		},
		onPageScroll(e) {
			this.scrollTop = e.scrollTop;
		},
		created() {
			let statusBarHeight= uni.getSystemInfoSync().statusBarHeight+"px";
			this.navtop=statusBarHeight;
		},
		methods: {
			backNav(){
				uni.navigateBack({
					delta:1
				})
			},
			choseAddress2(val) {
				let params = {
					lon:'',
					lat:'',
					city:'',
					city_code:'',
				}
				
				const url = 'https://restapi.amap.com/v3/geocode/geo?output=JSON&address='+val.name+'&city='+val.adcode+'&key=19895fce8682f17dd1436b98275ebb72'
				return new Promise(function (resolve,reject){
					uni.request({url:url}).then(result=>{
						if(result[1].data.status === '1'){
							let l=result[1].data.geocodes[0];
							if(l.location){
								params.lat=l.location.split(',')[1];
								params.lon=l.location.split(',')[0];
							}
							params.city=l.formatted_address;
							params.city_code=l.adcode;
							uni.setStorageSync('locationCity', params);
							uni.switchTab({
								url:'/pages/shop/index'
							})
							resolve(result[1].data)
						}
					}).catch(error=>{
						reject(error)
					})
				})
				
				
			},
			async choseAddress(val) {
				let that=this;
				this.value = val;
				let cityCode = ''
					const url = 'https://restapi.amap.com/v3/assistant/inputtips?output=JSON&keywords='+val+'&key=19895fce8682f17dd1436b98275ebb72'
					return new Promise(function (resolve,reject){
						uni.request({url:url}).then(result=>{
							if(result[1].data.status === '1'){
								that.cityList=result[1].data.tips;
								resolve(result[1].data)
							}
						}).catch(error=>{
							reject(error)
						})
					})
				// let res = await oRequest.getTrainAllInfo({
				// 	name: val,
				// 	hot: 0
				// });
				
				// if (res[globalData.status] == globalData.ERR_OK) {
				// 	cityCode = res.data.id
				// 	this.cityList = res.data;
				// }
			}
		}
	};
</script>

<style lang="scss" scoped>
	.body {}
	.tab-nav{
		display: flex;
		align-items: center;
		padding: 20rpx;
		background-color: white;
		.slot-wrap {
			width: 624rpx;
			height: 64rpx;
			background: #f4f4f4;
			border-radius: 40rpx;
			display: flex;
			align-items: center;
			margin-left: 24rpx;
			.icon {
				width: 32rpx;
				height: 32rpx;
				margin-left: 28rpx;
			}
		
			input {
				font-size: 28rpx;
				color: #333333;
				text-indent: 22rpx;
			}
		}
	}
	.cityBox {
		width: 100%;
		height: auto;
		background-color: #ffffff;

		.box-ul {
			padding: 0 20rpx;

			.box-li {
				width: 100%;
				height: 88rpx;
				line-height: 88rpx;
			}
		}
	}

	

	.container {

		.citynow,
		.cityhot {
			padding: 24rpx 28rpx 0;

			.lable {
				font-size: 32rpx;
				font-family: Segoe UI;
				font-weight: bold;
				color: #333333;
			}

			.city-ul {
				display: flex;
				align-items: center;
				flex-wrap: wrap;
				margin-top: 18rpx;

				.city-li {
					width: 210rpx;
					height: 66rpx;
					background: #f8f8f8;
					border-radius: 4rpx;
					text-align: center;
					line-height: 66rpx;
					margin-bottom: 16rpx;

					image {
						width: 28rpx;
						height: 28rpx;
						margin-right: 8rpx;
					}

					&:nth-child(3n-1) {
						margin-left: 32rpx;
						margin-right: 32rpx;
					}
				}
			}
		}
	}


	.modal {
		width: 100%;
		height: 100%;
		position: fixed;
		background-color: white;
		overflow: scroll;
		padding-bottom: 160rpx;
	}

	.cityIndex {
		width: 100%;
		height: auto;
	}

	.list-cell {
		display: flex;
		box-sizing: border-box;
		width: 100%;
		padding: 10px 24rpx;
		overflow: hidden;
		color: #323233;
		font-size: 14px;
		line-height: 24px;
		background-color: #fff;
	}
</style>