wxThird/pages/index/shopList.vue

<template>
	<view class="box">
        <view class="regionBox">
			<view class="regionLine" @click="gocity">
				<view class="regionTxt">{{cityName}}</view>
				<image src="../../static/timg/icon_arrow_def@2x.png" mode="" class="jtbelow"></image>
			</view>
			<view class="regionSx"></view>
			<view class="regionLine" @click="quCilck">
				<!-- <picker @change="bindPickerChange" :value="index" :range="areaList" range-key='area' @cancel="cancelHandling">
					
				</picker> -->
				<view class="regionTxt">{{areaName}}</view>
				<image src="../../static/timg/icon_arrow_def@2x.png" mode="" class="jtbelow"></image>
			</view>
		</view>
		
		<view class="sstop">
			<image src="../../static/timg/icon_search@2x.png" mode="" class="sstopimg"></image>
			<input type="text" v-model="shopName" placeholder="请输入商品名称" class="sstopInput" @confirm="getqueryShopList">
			<image src="../../static/img/icon_close.png" mode="" @click="empty" v-if="inputChShow" class="inputCh"></image>
		</view>
		<view style="height: 210rpx;"></view>
		<view class="shopline" v-for="(item,index) in queryShopList" @click="goDetail(item)">
			<view class="shoplineLeft">
				<image :src="item.photoPath" mode="" class="shopImg" v-if="item.photoPath"></image>
				<image src="../../static/timg/noimg.png" mode="" class="shopImg" v-else></image>
			</view>
			<view class="shopright">
				<view style="display: flex;justify-content: space-between;">
					<view style="width: 410rpx;">
						<view class="shopTop">
							<view class="shopName">{{item.shopName}}</view>
						</view>
						<view class="brandsBg" v-if="item.brands">
							<view class="brands" v-for="(v,index2) in item.brands.split(',')">{{v}}</view>
						</view>
					</view>
					<view class="yuyuBtnBox" >
						<view>预约</view>
						<image style="width: 21rpx;height: 21rpx;margin-top: 4rpx;margin-left: 5rpx;" src="http://dmsphoto.66km.com.cn/thFiles/1D60717A-DC1D-43BC-BBFE-EE0FAFD1A470.png" mode=""></image>
					</view>
				</view>	
				
				

				<view class="shopTime"><span v-if="item.startTime">{{item.startTime}}</span> - <span
						v-if="item.endTime">{{item.endTime}}</span> </view>

				<view class="shopBottomLeft">

					<span class="shopaddress"
						v-if="item.address">{{item.address}}</span>
					<span v-if="item.distance&&item.distance!= '0.00'">{{item.distance}}km</span>
				</view>
				<view class="shopdhBox">
				  <view class="shopcall" @click.stop="makePhoneCall(item.mobilePhone)">
					  <image class="shopcallIcon" src="http://dmsphoto.66km.com.cn/thFiles/AB063613-7B7A-4BD4-AF43-9ECC082FF5C6.png" mode=""></image>
				      <view class="shopcallTxt">联系电话</view>
				  </view>
				  <view class="shopcall" style="padding-left: 65rpx;" @click.stop="goMap(item)">
				  	  <image class="shopcallIcon" src="http://dmsphoto.66km.com.cn/thFiles/5479ED98-61D3-41CB-8080-889E851FF6C0.png" mode=""></image>
				      <view class="shopcallTxt">一键导航</view>
				  </view>
				</view>

			</view>



		</view>


		<!-- 上拉 加载更多 -->
		<view class="noMore" v-if="noMoreShow && (queryShopList.length!=0)">没有更多数据</view>
		<!-- 无数据空白页 -->
		<nodata v-if="queryShopList.length==0&&loading"></nodata>
        <uni-popup ref="popup" type="right" :mask-click="true">
			<view class="popup-content">
				<scroll-view class="brandList" scroll-y="true">
					<!-- :class="{areaActvie:item.area==areaName}" -->
					<view v-for="item in areaList" class="areaListLine"
					 
					 @click="checkarea(item)">
					  <span >{{item.area}}</span>
					  <image v-if="item.code==area" class="areaCkIcon" src="http://dmsphoto.66km.com.cn/thFiles/0A1DADEA-1807-4ABC-B391-ECC8B1882DA4.png" mode=""></image>
					</view>
				</scroll-view>
			</view>
			
		</uni-popup>
		<!-- 手机号授权 -->
		<view class="authorizBox" v-if="authorizShow" @click="authorizShowno">
			<view class="authorizCont" @click.stop="">
				<view class="authorizName">{{wxOpenData.miniAppName}}</view>
				<view class="authorizMs">您好，欢迎访问本店，授权手机号登录能获取我们最新的促销活动哦~</view>
				<button class="authorizContbutton" type="default" open-type="getPhoneNumber" @getphonenumber="decryptPhoneNumber">授权</button>
			</view>
			<view style="text-align: center;padding-top: 56rpx;">
				<image src="../../static/timg/icon_guanbi@2x.png"  @click="authorizShowno" mode="" class="authorizCloseImg"></image>
			</view>
		</view>
		<!-- <view>lng:{{location.lng}}</view>
		<view>lat:{{location.lat}}</view> -->
	</view>
</template>

<script>
	import nodata from '../../components/nodata/nodata.vue'
	export default {
		components: {
			nodata,
		},

		data() {
			return {
				location: {
					lng: '',
					lat: '',
				},
				queryShopList: '',
				noMoreShow: false,
                regionName:'',
                twoRegionName:'',
                cityName:'城市',
				area:'',
				cityCode:'',
				areaList:'',
				index:'',
				areaName:'区域',
				loading:false,
				ext:'',
				authorizShow:false,
				wxOpenData:'',
				userInfo: '',
				shopName:'',
				inputChShow:false,
			}
		},
        watch:{
			shopName(val){
				console.log(val)
				if(val){
					this.inputChShow=true
				}
			},
        		
        },
		onLoad() {
			var that = this;
			uni.removeStorageSync('selectCity');
			this.userInfo = this.$store.state.userInfo;
			this.ext=this.$common.getExtStoreId();
			 if(this.userInfo){
				 this.themeColor = uni.getStorageSync("themeColor");
				 this.wxOpenData=this.$store.state.wxOpenData;
				 this.init()
			 }else{
				 this.$common.automaticlogin().then(val => {
				 	this.themeColor = uni.getStorageSync("themeColor");
				 	this.userInfo=this.$store.state.userInfo;
				 	this.wxOpenData=this.$store.state.wxOpenData;
				 	this.init()
					if(!this.userInfo){
						uni.hideLoading();
						this.authorizShow=true
					}
				 })
			 }
			
			
			// that.getqueryShopList();
			
		},
		onShow() {
			const selectCity = uni.getStorageSync('selectCity');
			//console.log("onShow")
			//console.log(selectCity)
			if(selectCity){
				this.cityName=selectCity.city
				this.cityCode=selectCity.code
				this.areaName='区域'
				this.area=''
				this.getAreaList()
				this.getqueryShopList() //获取门店列表
			}
		},
		methods: {
			empty(){
				
				this.shopName='';
				this.inputChShow=false;
				this.queryShopList=[];
				this.page=1;
				this.getqueryShopList()
			},
			authorizShowno(){
				this.authorizShow=false
			},
			decryptPhoneNumber: function(e) {
				  console.log(e);
				  this.code=e.detail.code
				  this.wxPhoneLogin()
				  this.authorizShow=false;
			},
			wxPhoneLogin(){
					 var that=this;
					 this.$http('miniApp2/sys/wxPhoneLogin', {
					   appId:this.ext.appId,
					   unionId:this.ext.unionId,
					   code:this.code,
					   openId:this.wxOpenData.openid
					  },'POST').then(res => {
						var data = res.data;
						if(data.loginInfo){
							this.userInfo=data.loginInfo.openUser;
							this.wxOpenData=data.loginInfo;
							this.$store.commit('mutationswxOpenData', data)
							this.$store.commit('mutationsuserInfo', this.userInfo)
						    this.init()
						}	
					  })
			},
			init(){
				var that = this;
				uni.showLoading({
					title: '加载中'
				})
				uni.authorize({
					scope: 'scope.userLocation',
					success() {
						uni.getLocation({
							type: 'gcj02',
							success: function(res) {
								console.log(res)
								that.location.lat = res.latitude
								that.location.lng = res.longitude
						        that.getAdress();
								//that.getqueryShopList() //获取全部门店列表
						
							},
							fail(err) {
								console.log("定位失败")
						        that.getqueryShopList();
							}
						});
					},
					fail: (err) => {
						console.log(err)
						 that.getqueryShopList();
						 
					}})
			},
			quCilck(){
				console.log(this.cityName)
				if(this.cityName){	
					this.$refs.popup.open("right")
					//this.popupShow=true;
					if(this.areaList.length==0){
						/* uni.showToast({
							title: '当前城市下无区域，请切换城市查看',
							icon: 'none',
							duration: 4000
						}); */
						uni.showModal({
						        title: '提示',
						        content: '当前城市下无区域，请切换城市查看',
						        success: function(res) {
						        if (res.confirm) {
						            // 执行确认后的操作
									uni.navigateTo({
										url:'/pages/subPack/chooseCity?type=1'
									})
						        } 
						        else {
						            // 执行取消后的操作
						        }
						    }
						})
					}
				}else{
					uni.showModal({
					        title: '提示',
					        content: '当前城市暂无门店，请切换城市查看',
					        success: function(res) {
					        if (res.confirm) {
					            // 执行确认后的操作
								uni.navigateTo({
									url:'/pages/subPack/chooseCity?type=1'
								})
					        } 
					        else {
					            // 执行取消后的操作
					        }
					    }
					})
				}
				
			},
			gocity(){
				uni.navigateTo({
					url:'/pages/subPack/chooseCity?type=1'
				})
			},
			checkarea(item){
				if(this.area==item.code){
					this.areaName='区域'
					this.area=''
					this.getqueryShopList() //获取门店列表
				}else{
					this.areaName=item.area
					this.area=item.code
					this.getqueryShopList() //获取门店列表
				}
				this.$refs.popup.close()
			},
			bindPickerChange(e){
				//console.log(e)
				this.areaName=this.areaList[e.detail.value].area
				this.area=this.areaList[e.detail.value].code
				this.getqueryShopList() //获取门店列表
			},
			cancelHandling(){
				this.areaName='区域'
				this.area=''
				this.getqueryShopList() //获取门店列表
			},
            makePhoneCall(num){
				uni.makePhoneCall({
					phoneNumber:num
				});
			},
            goMap(item){
				var that = this;
				if (!item.lat || !item.lng) {
					uni.showToast({
						title: '该店铺未设置定位',
						icon: 'none',
						duration: 3000
					});
				} else {
					uni.openLocation({
						latitude: Number(item.lat),
						longitude: Number(item.lng),
						name: item.shopName,
						address: item.provinceName + item.cityName + item.areaName +
							item.address,
						success: function() {
							console.log('success');
						},
						fail(err) {
							console.log(err)
						}
					});
				}
			},
			getAdress(){
				var that=this;
				var location = this.location.lng + ',' + this.location.lat
				console.log('location'+location)
				//location='117.29249484592015,39.026727973090274'
				
				uni.request({
					url: 'https://restapi.amap.com/v3/geocode/regeo',
					data: {
						key: '389a059efa3f499d9145eb84b1c3248d',
						location: location,
					},
					dataType: "json",
					success: (res) => {
						console.log('定位城市', res);
						if(res.data.regeocode){
							console.log("城市名称")
							 console.log(res.data.regeocode.addressComponent.city)
							// console.log(res.data.pois[0].cityname)
							if(res.data.regeocode.addressComponent.city.length!=0){
								var cityname = res.data.regeocode.addressComponent.city;
								
							}else{
								var cityname = res.data.regeocode.addressComponent.province;
							}
							
							var cityCode = res.data.regeocode.addressComponent.adcode
							cityCode = cityCode.slice(0, -2)
							cityCode = cityCode + '00'
							this.cityName = cityname
							this.cityCode = cityCode
							that.getqueryShopList() //获取全部门店列表
							that.getAreaList()
							
						}else{
							console.log("接口获取失败")
							uni.hideLoading();
						}
						
					}
				});
			},
			getAreaList(){
				this.$http('opencarOwnerHome/shop-area-list', {
				    city:this.cityCode
				}, 'GET').then(res => {
				    this.areaList=res.data
				
				})
			},
			getqueryShopList() {
				uni.showLoading({
					title: '加载中'
				})
				this.loading=false;
				this.$http('opencarOwnerHome/queryShopInfoList', {

					lat: this.location.lat ? this.location.lat : '',
					lng: this.location.lng ? this.location.lng : '',
                    city:this.cityCode,
                    area:this.area,
					shopName:this.shopName
				}, 'GET').then(res => {
					uni.hideLoading();
					this.queryShopList = res.data.shop;
					this.loading=true;
					//console.log('list+=', this.queryShopList);
					if(this.queryShopList.length==0){
						/* uni.showToast({
							title: '当前城市暂无门店，请切换城市查看',
							icon: 'none',
							duration: 4000
						}); */
						uni.showModal({
						        title: '提示',
						        content: '当前城市暂无门店，请切换城市查看',
						        success: function(res) {
						        if (res.confirm) {
						            // 执行确认后的操作
									uni.navigateTo({
										url:'/pages/subPack/chooseCity?type=1'
									})
						        } 
						        else {
						            // 执行取消后的操作
						        }
						    }
						})
					}

				})
			},

			goDetail(item) {
				// uni.navigateTo({
				// 	url: '../shop/shopDetail?id=' + item.shopId
				// })
				if (this.userInfo) {
					uni.navigateTo({
						url:'onlineBooking?naShopId='+item.shopId+'naUnionId='+item.unionId
					})
				} else {
					this.authorizShow = true;
					return false;
				}
				
			}
		},
		
		// 下拉刷新
		onPullDownRefresh() {
			
			this.getqueryShopList()
			setTimeout(function() {
				uni.stopPullDownRefresh();
			}, 1000);
		},
		
	}
</script>

<style scoped>
.areaCkIcon{
	width: 38rpx;height: 28rpx;
}
	.popup-content{
		width: 590rpx;
		background: #FFFFFF;
		height: 100vh;
	}
	.brandList{
		height:99vh;
	}
	.areaListLine{
		padding:30rpx 24rpx;
		color: #666666;
		font-size: 28rpx;
		border-bottom: 1px solid #eaeaea;
		display: flex;
		justify-content: space-between;
		line-height: 28rpx;
	}
	.areaActvie{
		background: #F19D01;
		color: #FFFFFF;
	}
	
.jtbelow{
	width: 14rpx;height: 7rpx;
	margin-left: 10rpx;margin-top: 10rpx;
}
.regionSx{
	width: 2rpx;height: 33rpx;background:#EEEEEE;
}
.regionLine{
	display: flex;justify-content: center;font-size: 26rpx;
	width: 370rpx;line-height: 33rpx;color: #3C3C3C;
}
.regionBox{
	display: flex;
	justify-content: center;
	background: #FFFFFF;
	padding: 20rpx 0;
	margin-bottom: 20rpx;
	position: fixed;
	width: 100vw;
	top: 0;left: 0;
}
	.box {
		min-height: 100vh;
		background-color: #F4F5F7;
		padding-bottom: 60rpx;
	}
	.shopdhBox{
		display: flex;padding-top: 16rpx;
	}
	.shopcall{
		display: flex;
	}
	.shopcallIcon{
		width: 23rpx;height: 23rpx;margin-top: 5rpx;
	}
	.shopcallTxt{
		color: #3C3C3C;font-size: 24rpx;
		line-height: 33rpx;padding-left: 8rpx;
	}
	.yuyuBtnBox{
		    display: flex;
		    font-size: 24rpx;
		    color: #FF8113;
		    align-items: center;
		    justify-items: center;
		/* border-left: 1px solid #EEEEEE;
		 padding-left: 20rpx; */
	}

	.shopline {
		margin: 0rpx 24rpx 20rpx;
		padding: 20rpx;
		background-color: #FFFFFF;
		border-radius: 10rpx;

		display: flex;
	}


	.nodataImg {
		width: 400rpx;
		padding-top: 100rpx;
	}

	.noTxt {
		font-size: 36rpx;
		color: #999999;
		padding-top: 50rpx;
	}

	.nodataBox {
		text-align: center;
	}

	.shopImg {
		width: 154rpx;
		height: 154rpx;
		border-radius: 10rpx;
	}

	.shopBox {
		padding-top: 30rpx;
		display: flex;
	}

	.flex {
		display: flex;
		justify-content: space-between;
	}

	.shopCont {
		padding-left: 22rpx;
		width: 520rpx;
	}

	

	.span1 {
		color: #FF4F00;
		font-size: 36rpx;
	}

	.span2 {
		color: #FF4F00;
		font-size: 22rpx;
	}

	.span3 {
		color: #333333;
		font-size: 22rpx;
		padding-left: 22rpx;
	}

	.shopBq {
		color: #FF4F00;
		font-size: 22rpx;
		border-radius: 4rpx;
		border: 1px solid #FF4F00;
		line-height: 30rpx;
		height: 30rpx;
		padding: 0rpx 5rpx;
		margin-top: 10rpx;
	}

	.brandsBg {
		display: flex;
		align-items: center;
		padding: 5rpx 0rpx;
		flex-wrap: wrap;
		    height: 36rpx;
		/* 隐藏文字显示 ...不换行 */
		overflow: hidden;
		text-overflow: ellipsis;
		white-space: nowrap;
	}
	

	.brands {
		border-radius: 4rpx;
		padding: 0 5rpx;
		color: #F19D01;
		height: 28rpx;
		border: 1px solid #F19D01;

		font-size: 20rpx;
		line-height: 28rpx;
		margin: 5rpx 10rpx 5rpx 0rpx;
	}

	.timeBg {
		display: flex;

	}

	.shopTime {
		color: #666666;
		font-size: 24rpx;
	}

	.addressBox {
		color: #666666;
		font-size: 22rpx;
	}

	.shopNameSearchInput {
		width: 500rpx;
	}

	.colorCS {
		color: #FF4F00;
	}

	.shopbox {
		padding: 0 16rpx;
	}



	.shopCallImg {
		width: 38rpx;
		height: 46rpx;
	}

	.shopTop {
		display: flex;
		justify-content: space-between;
		
	}

	.shopright {
		padding-left: 20rpx;
		width: 510rpx;
	}

	.shopName {
		font-size: 28rpx;
		font-weight: bold;
		color: #333333;
		line-height: 40rpx;
		width: 450rpx;
		white-space: nowrap;
		overflow: hidden;
		text-overflow: ellipsis;
	}

	.shopScore1 {
		font-size: 36rpx;
		font-weight: bold;
		color: #FF4F00;
		height: 50rpx;
		line-height: 50rpx;
	}

	.shopScore11 {
		font-size: 22rpx;
		color: #FF4F00;
		margin-right: 14rpx;

	}

	.shopScore2 {
		font-size: 22rpx;
		color: #666666;
		margin-right: 14rpx;
		padding: 8rpx 0;
	}

	.shopScore3 {
		font-size: 22rpx;
		color: #333333;
		padding-left: 20rpx;
	}



	.Btn {
		width: 104rpx;
		height: 56rpx;
		background: #FF2400 linear-gradient(135deg, #FD5300 0%, #FF270A 100%);
		border-radius: 6rpx;
		font-size: 26rpx;
		text-align: center;
		color: #FFFFFF;
		line-height: 56rpx;
	}

	.shopBottom {
		display: flex;

	}

	.shopBottomLeft {

		font-size: 25rpx;
		color: #666666;
		line-height: 30rpx;
		padding-top: 10rpx;
		display: flex;
		justify-content: space-between;
		padding-right: 10rpx;
	}

	.shopaddress {
		width: 400rpx;
		/* 隐藏文字显示 ...不换行 */
		overflow: hidden;
		text-overflow: ellipsis;
		white-space: nowrap;
	}

	.noMore {
		text-align: center;
		line-height: 50rpx;
		color: #999999;
		font-size: 28rpx;
	}
	.authorizBox{
		width: 100vw;
		height: 100vh;
		background: rgba(0, 0, 0, 0.5);
		position: fixed;
		top: 0;
		left: 0;
	}
	.authorizCont{
		margin-top: 30vh;
		width: 564rpx;
		height: 408rpx;
		background: #FFFFFF;
		border-radius: 24rpx;
		margin-left: 93rpx;
		position: relative;
	}
	.authorizCloseImg{
		width: 62rpx;
		height: 62rpx;
	}
	.sqLogoBox{
		width: 180rpx;
		height: 180rpx;
		background: #FFFFFF;
		border-radius: 90rpx;
		text-align: center;
		position: absolute;
		top: -50rpx;
		left: 192rpx;
	}
	.authorizName{
		color: #333333;
		line-height: 42rpx;
		font-size: 30rpx;
		text-align: center;
		padding-top: 58rpx;
	}
	.authorizMs{
		color: #999999;
		line-height: 36rpx;
		font-size: 26rpx;
		width: 452rpx;
		padding-top: 24rpx;
		text-align: center;
		margin-left: 56rpx;
	}
	.authorizContbutton{
		width: 422rpx;
		height: 88rpx;
		background: #D53533;
		border-radius: 44rpx;
		line-height: 88rpx;
		text-align: center;
		font-size:30rpx;
		color: #FFFFFF;
		margin-top: 62rpx;
		margin-left:71rpx;
	}
	.sstopInput{
		width: 626rpx;
		height: 72rpx;
		background: #F4F5F7;
		border-radius: 36rpx;
		line-height: 72rpx;
		font-size: 28rpx;
		padding-left: 76rpx;
	}
	.sstop{
		position: fixed;
		padding-top: 24rpx;
		padding-left: 24rpx;
		background: #ffffff;
		width: 100vw;
		top: 72rpx;
		left: 0;
		padding-bottom: 20rpx;
	}
	.sstopimg{
		width: 40rpx;
		height: 40rpx;
		position: absolute;
		left: 44rpx;
		top: 40rpx;
	}
	.inputCh{
	width:40rpx;
	height: 40rpx;
	position: absolute;
	right: 60rpx;
	top: 40rpx;
	z-index: 11;
	}
</style>