1

pages/hotel/list.vue

 <template>
 	<view class="hotel-list">
 		<view class="search-box">
+			<view class="hotel-city" @click="showCity">
+				<u-icon name="location" :size="24" color="#EE4454"></u-icon>
+				{{city}}
+			</view>
+			
 			<view class="date" @click="chosenDate">
 				<view>住 {{startDay}}</view>
 				<view>离 {{endDay}}</view>
 			</view>
 			<view class="days">{{day}}晚</view>
 			<view style="width: 1px; flex: 1;">
-				<u-search placeholder="关键字/位置/品牌/酒店名" v-model="searchObj.Name" input-align="left" :value="searchObj.Name"
-				 text-color="#111" bg-color="rgba(0,0,0,0)" @change="research()" :show-action="false"></u-search>
+				<u-search placeholder="关键字/位置/品牌/酒店名" v-model="searchObj.Name" input-align="left"
+					:value="searchObj.Name" text-color="#111" bg-color="rgba(0,0,0,0)" @change="research()"
+					:show-action="false"></u-search>
 			</view>
 		</view>
+		<u-popup v-model="showCityList" mode="bottom" :border-radius="40" :safe-area-inset-bottom="true" >
+			<Address @confirm="confirmCity" :list="cityList"/>
+		</u-popup>
 		<view>
 			<u-dropdown ref="uDropdown" @open="open" @close="close" active-color="#000" inactive-color="#444">
-				<u-dropdown-item v-model="searchObj.OrderByType" :title="optionsTitle[0]" :options="options1" @change="change">
+				<u-dropdown-item v-model="searchObj.OrderByType" :title="optionsTitle[0]" :options="options1"
+					@change="change">
+				</u-dropdown-item>
+				<u-dropdown-item v-model="searchObj.District" :title="optionsTitle[1]" :options="DistrictOptions"
+					@change="changeDistrict">
 				</u-dropdown-item>
 				<!-- <u-dropdown-item v-model="searchObj.enclosure" :title="optionsTitle[1]" :options="options2" @change="change2"></u-dropdown-item> -->
 				<u-dropdown-item :title="optionsTitle[2]">
@@ -26,16 +39,19 @@
 							<view style="font-size: 24rpx;flex:1">￥0</view>
 							<view style="font-size: 24rpx;flex:1;color: #333;text-align: right;">￥1000以上</view>
 						</view>
-						<range-slider ref="rangeslider" :width="690" :height="80" :step="10" :liveMode="true" background-color="#E2E2E2"
-						 :block-size="40" active-color="#111111" min="0" max="1000" @rangechange="rangechange4" :values="tempRateAndPrice.price"></range-slider>
+						<range-slider ref="rangeslider" :width="690" :height="80" :step="10" :liveMode="true"
+							background-color="#E2E2E2" :block-size="40" active-color="#111111" min="0" max="1000"
+							@rangechange="rangechange4" :values="tempRateAndPrice.price"></range-slider>
 						<view style="margin: 20rpx 0 29rpx 0;">
 							<text style="font-size: 28rpx;color:#111;font-weight: 800;">星级</text>
 						</view>
 						<view class="hotel-rate-box">
-							<view v-for="(x,i) in rates" :key="i" class="hotel-rate" :class="{'active':tempRateAndPrice.rate.indexOf(x.Id)!=-1}"
-							 @click="setHotelRate(x.Id)">{{x.Name}}</view>
+							<view v-for="(x,i) in rates" :key="i" class="hotel-rate"
+								:class="{'active':tempRateAndPrice.rate.indexOf(x.Id)!=-1}" @click="setHotelRate(x.Id)">
+								{{x.Name}}</view>
 						</view>
-						<view style="box-shadow: 0px -10px 30px 0px rgba(36, 36, 36, 0.06);margin-top:40rpx;display: flex;">
+						<view
+							style="box-shadow: 0px -10px 30px 0px rgba(36, 36, 36, 0.06);margin-top:40rpx;display: flex;">
 							<view style="flex:1;margin-right: 30rpx;">
 								<u-button :custom-style="btnStyle" @click="resetPrice">重置</u-button>
 							</view>
@@ -51,13 +67,14 @@
 			<canlendar @finish="chosenDateResult"></canlendar>
 		</u-popup>
 		<view class="morewhere">
-			<view v-for="(x,i) in searchObj.TagList" class="item" @click="chosenMorewhere(x)" :class="{'active':x.IsCheck==1}">{{x.Name}}</view>
+			<view v-for="(x,i) in searchObj.TagList" class="item" @click="chosenMorewhere(x)"
+				:class="{'active':x.IsCheck==1}">{{x.Name}}</view>
 		</view>
-		<scroll-view :scroll-y="true" @scrolltolower="lower" :enable-back-to-top="true" :enable-flex="true" :scroll-top="scrollTop"
-		 @scroll="scroll" style="height: calc(100% - 224rpx); padding-bottom: 0px;">
+		<scroll-view :scroll-y="true" @scrolltolower="lower" :enable-back-to-top="true" :enable-flex="true"
+			:scroll-top="scrollTop" @scroll="scroll" style="height: calc(100% - 224rpx); padding-bottom: 0px;">
 			<hotel-good :HotelList="HotelList" :dayObj="dayObj" :searchObj="searchObj"></hotel-good>
 			<u-loadmore v-if="showLoading" :status="status" :load-text="loadText" :font-size="24" :margin-top="20"
-			 :margin-bottom="20" bg-color="#F5F5F5" color="#111" />
+				:margin-bottom="20" bg-color="#F5F5F5" color="#111" />
 		</scroll-view>
 	</view>
 </template>
@@ -66,9 +83,13 @@
 	import rangeSlider from "./components/range-slider.vue"
 	import canlendar from "./components/time/index.vue"
 	import hotelGood from './components/hotel-good.vue';
+	import Address from './components/address/smh-address-indexed.vue'
 	export default {
 		data() {
 			return {
+				city: "成都",
+				cityList:[],
+				showCityList:false,
 				showTimePopup: false,
 				searchObj: {
 					pageIndex: 1,
@@ -80,7 +101,9 @@
 					QEndDate: '',
 					OrderByType: '1', //排序类型
 					QStars: '', //星级
-					TagList: [] //查询标签
+					TagList: [], //查询标签
+					City:262,//市
+					District:0//区
 				},
 				day: 0,
 				startDay: '',
@@ -93,7 +116,7 @@
 				},
 				optionsTitle: [
 					"推荐排序",
-					"附近",
+					"区域",
 					"价格/星级",
 					"筛选"
 				],
@@ -163,19 +186,21 @@
 				showLoading: false,
 				status: "loadmore",
 				page_count: 0,
-				dayObj: {}
+				dayObj: {},
+				DistrictOptions:[{label:"不限",value:0}],
 			}
 		},
 		components: {
 			rangeSlider,
 			canlendar,
-			hotelGood
+			hotelGood,
+			Address
 		},
 		onLoad(options) {
-			if(options && options.Name){
+			if (options && options.Name) {
 				this.searchObj.Name = options.Name
 			}
-			
+
 		},
 		created() {
 			uni.setNavigationBarTitle({
@@ -185,7 +210,7 @@
 			let d = new Date();
 			let d2 = new Date(d.setDate(d.getDate() + 1))
 			let startWeek = "周" + "日一二三四五六".charAt(new Date().getDay());
-			let endWeek = "周" + "日一二三四五六".charAt(new Date().getDay()+1);
+			let endWeek = "周" + "日一二三四五六".charAt(new Date().getDay() + 1);
 			var obj = {
 				start: `${d1.getFullYear()}-${d1.getMonth()+1}-${d1.getDate()}`,
 				end: `${d2.getFullYear()}-${d2.getMonth()+1}-${d2.getDate()}`,
@@ -207,8 +232,23 @@
 			this.day = obj.day;
 			this.getSearchCondition();
 			this.getList();
+			this.getCity();
+			this.getDistrict(262);
 		},
 		methods: {
+			showCity(){
+				this.showCityList=true
+			},
+			confirmCity(val){
+				console.log(val)
+				this.searchObj.City=val.ID
+				this.showCityList=false
+				this.city=val.Name
+				this.getDistrict(val.ID)
+				this.searchObj.District=0
+				this.getList();
+				this.optionsTitle[1]="区域"
+			},
 			scroll: function(e) {
 				this.old.scrollTop = e.detail.scrollTop;
 			},
@@ -218,9 +258,8 @@
 					this.scrollTop = 0;
 				});
 			},
-			research()
-			{
-				this.searchObj.pageIndex=1;
+			research() {
+				this.searchObj.pageIndex = 1;
 				this.getList(1);
 			},
 			lower(e) {
@@ -314,6 +353,7 @@
 				} else {
 					this.tempRateAndPrice.priceText = `￥${e.minValue} - ￥${e.maxValue}之间`
 				}
+				
 			},
 			closeDropdown() {
 				this.$refs.uDropdown.close();
@@ -323,7 +363,7 @@
 				// 同时内部会自动给当前展开项进行高亮
 				this.$refs.uDropdown.highlight();
 				if (index == 2) {
-					this.tempRateAndPrice = this.searchObj.rateAndPrice
+					// this.tempRateAndPrice = this.searchObj.rateAndPrice
 				}
 			},
 			close(index) {
@@ -392,8 +432,8 @@
 			//获取列表数据
 			getList(type) {
 				this.searchObj.QStars = this.tempRateAndPrice.rate.toString();
-				if(type==1){
-					this.HotelList=[];
+				if (type == 1) {
+					this.HotelList = [];
 				}
 				this.request2({
 						url: '/api/Hotel/AppGetHotelPage',
@@ -406,15 +446,95 @@
 						}
 					}
 				);
+			},
+			getCity(){
+				this.request2({
+						url: '/api/Hotel/GetHotelDestination',
+						data: {ID:0}
+					},
+					res => {
+						if (res.resultCode == 1) {
+							this.cityList=[]
+							res.data.map(i=>{
+								let initial=i.PinYin.slice(0,1)
+								
+								let find =this.cityList.filter((e)=>{
+									return e.letter==initial
+								})
+								if(find.length>0){
+								    find[0].citylist.push(i)
+								}else{
+									let obj={
+										letter:initial,
+										citylist:[i],
+										}
+									// obj.citylist[0]=i
+									this.cityList.push(obj)
+								}
+							})
+							console.log(this.cityList)
+						}
+					},
+					err => {
+				
+					}
+				);
+			},
+			getDistrict(id){
+				this.request2({
+						url: '/api/Hotel/GetHotelDestination',
+						data: {ID:id}
+					},
+					res => {
+						if (res.resultCode == 1) {
+							this.DistrictOptions=[{label:"不限",value:0}]
+							res.data.map(i=>{
+								let obj={
+									label:i.Name,
+									value:i.ID
+								}
+								this.DistrictOptions.push(obj)
+							})
+							
+						}
+					},
+					err => {
+				
+					}
+				);
+			},
+			changeDistrict(val){
+				this.getList();
+				let res= this.DistrictOptions.filter(i=>{return i.value==val})
+				this.optionsTitle[1]=res[0].label
 			}
 		},
 	}
 </script>
 
-<style>
+<style scoped>
+	/deep/.u-flex {
+		justify-content: center;
+	}
 	.hotel-list {
 		height: 100vh;
 	}
+	.hotel-list .hotel-city {
+		width: 105rpx;
+		height: 40rpx;
+		padding: 0rpx 10rpx 8rpx 0rpx;
+		margin-right: 20rpx;
+		text-align: center;
+		/* color: #DFBE6E; */
+		border-right: 1px solid #E2E2E2;
+		font-size: 28rpx;
+		white-space: nowrap;
+		overflow: hidden;
+		text-overflow: ellipsis;
+		display: flex;
+		align-items: center;
+		
+	}
 
 	.hotel-list .search-box {
 		height: 88rpx;
@@ -427,18 +547,18 @@
 	}
 
 	.hotel-list .search-box .date {
-		width: 104rpx;
+		width: 80rpx;
 		height: 50rpx;
 		font-size: 22rpx;
 		font-weight: 500;
 		color: #111111;
 		line-height: 29rpx;
-		margin-top:-6px;
+		margin-top: -6px;
 	}
 
 	.hotel-list .search-box .days {
 		height: 40rpx;
-		padding: 8rpx 30rpx 8rpx 19rpx;
+		padding: 8rpx 20rpx 8rpx 10rpx;
 		color: #DFBE6E;
 		border-right: 1px solid #E2E2E2;
 		font-size: 24rpx;

pages/restaurant/list.vue

@@ -2,7 +2,7 @@
 	<view class="hotel-list">
 		<view class="search-box">
 			<view class="city-box" @click="showCity">
-				<u-icon name="location" :size="28"></u-icon>
+				<u-icon name="location" :size="28" color="#EE4454"></u-icon>
 				{{city}}
 			</view>
 			<view style="width: 1px; flex: 1;">
@@ -447,6 +447,7 @@
 				this.city=val.Name
 				this.getDistrict(val.ID)
 				this.msg.District=0
+				this.optionsTitle[2]="区域"
 				this.getFoodList();
 			},
 			getCity(){

pages/ticketCoupons/list.vue

@@ -2,7 +2,7 @@
 	<view class="hotel-list">
 		<view class="search-box">
 			<view class="city-box" @click="showCity">
-				<u-icon name="location" :size="28"></u-icon>
+				<u-icon name="location" :size="28" color="#EE4454"></u-icon>
 				{{city}}
 			</view>
 			<view style="width: 1px; flex: 1;">
@@ -331,6 +331,7 @@
 				this.city=val.Name
 				this.getDistrict(val.ID)
 				this.msg.District=0
+				this.optionsTitle[2]="区域"
 				this.getList();
 			},
 			getCity(){