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 style="height: 90rpx;"></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"></nodata>
        <uni-popup ref="popup" type="right" :mask-click="true">
			<view class="popup-content">
				<scroll-view class="brandList" scroll-y="true">
					<view v-for="item in areaList" class="areaListLine"
					 :class="{areaActvie:item.area==areaName}"
					 @click="checkarea(item)">
					  <span >{{item.area}}</span>
					<!--  <image src="" mode=""></image> -->
					</view>
				</scroll-view>
			</view>
			
		</uni-popup>
	</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:'区域',
			}
		},

		onLoad() {
			var that = this;
			uni.removeStorageSync('selectCity');
			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) {

				}
			});
			
		},
		onShow() {
			const selectCity = uni.getStorageSync('selectCity');
			if(selectCity){
				this.cityName=selectCity.city
				this.cityCode=selectCity.code
				this.getqueryShopList() //获取门店列表
			}
		},
		methods: {
			quCilck(){
				this.$refs.popup.open("right")
				this.popupShow=true;
			},
			gocity(){
				uni.navigateTo({
					url:'/pages/subPack/chooseCity'
				})
			},
			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
				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)
							let cityname = res.data.regeocode.addressComponent.city;
							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("接口获取失败")
						}
						
					}
				});
			},
			getAreaList(){
				this.$http('opencarOwnerHome/shop-area-list', {
				    city:this.cityCode
				}, 'GET').then(res => {
				    this.areaList=res.data
				
				})
			},
			getqueryShopList() {
				uni.showLoading({
					title: '加载中'
				})
				this.$http('opencarOwnerHome/queryShopInfoList', {

					lat: this.location.lat ? this.location.lat : '',
					lng: this.location.lng ? this.location.lng : '',
                    city:this.cityCode,
                    area:this.area
				}, 'GET').then(res => {
					uni.hideLoading();
					this.queryShopList = res.data.shop
					console.log('list+=', this.queryShopList);

				})
			},

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

<style scoped>
	.popup-content{
		width: 590rpx;
		background: #FFFFFF;
		height: 100vh;
	}
	.brandList{
		height:99vh;
	}
	.areaListLine{
		padding: 20rpx;
		color: #666666;
		font-size: 28rpx;
		border-bottom: 1px solid #eaeaea;
	}
	.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;
	}
</style>