wxThird/pages/shop/ckshopList.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">
        		<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="newdistance" v-if="item.distance&&item.distance!= '0.00'">
				 <image src="../../static/img2/dh.png" mode="" class="dhImg"></image>
				<view style="padding-top: 6rpx;"><span >{{item.distance}}km</span></view>
			</view>
			<view class="shoplineLeft">
				<image :src="item.doorImg1" mode="" class="shopImg" v-if="item.doorImg1"></image>
				<image :src="item.doorImg2" mode="" class="shopImg" v-else-if="item.doorImg2"></image>
				<image src="../../static/timg/noimg.png" mode="" class="shopImg" v-else></image>
			</view>
			<view class="shopright">
				<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="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.provinceName}}{{item.cityName}}{{item.areaName}}{{item.address}}</span>
				<!-- 	<span v-if="item.distance&&item.distance!= '0.00'">{{item.distance}}km</span> -->
				</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>
</template>

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

		data() {
			return {
				location: {
					lng: '',
					lat: '',
				},
				queryShopList: '',
				noMoreShow: false,
                goodsId:'',
                cityName:'城市',
                area:'',
                cityCode:'',
				areaName:'区域',
				loading:false,
                areaList:'',
				type:'',
			
			}
		},

		onLoad(opt) {
			var that = this;
			this.goodsId=opt.goodsId;
			this.type=opt.type
			uni.removeStorageSync('selectCity');
			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.getqueryShopList() //获取全部门店列表
					         that.getAdress();
							//that.getqueryShopList() //获取全部门店列表
					
						},
						fail(err) {
					      console.log(err)
						  that.getqueryShopList() //获取全部门店列表
						}
					});
				},
				fail: (err) => {
					 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: {
            quCilck(){
            	this.$refs.popup.open("right")
            	this.popupShow=true;
            },
            gocity(){
				if(this.type==4){
					uni.navigateTo({
						url:'/pages/subPack/chooseCity?type=4&id='+this.goodsId
					})
				}else if(this.type==5){
					uni.navigateTo({
						url:'/pages/subPack/chooseCity?type=5&id='+this.goodsId
					})
				}else{
					uni.navigateTo({
						url:'/pages/subPack/chooseCity?type=2&id='+this.goodsId
					})
				}
            	
            },
           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()
			},
			getqueryShopList() {
				uni.showLoading({
					title: '加载中'
				})
				if(this.type==4){
					var url='openIntegralMall/getShopList'
					var	params = {
							id:this.goodsId,
							lat: this.location.lat ? this.location.lat : '',
							lng: this.location.lng ? this.location.lng : '',
							city:this.cityCode,
							area:this.area
						}
				}else if(this.type==5){
						var url='openHome/queryShopList'
						var	params = {
								collectingID:this.goodsId,
								city:this.cityCode,
								area:this.area,
								lat: this.location.lat ? this.location.lat : '',
								lng: this.location.lng ? this.location.lng : '',
							}
				}
				else{
					var url='openMall/openStoreList'
					var	params = {
							goodsId:this.goodsId,
							id:this.goodsId,
							lat: this.location.lat ? this.location.lat : '',
							lng: this.location.lng ? this.location.lng : '',
							city:this.cityCode,
							area:this.area
						}
					
				}
				this.loading=false;
				this.$http(url,params, 'GET').then(res => {
					uni.hideLoading();
					this.loading=true;
					this.queryShopList = res.data
					//console.log('list+=', this.queryShopList);

				})
			},
            getAreaList(){
				if(this.type==4){
					var url='openIntegralMall/shop-area-list'
					var	params = {
							city:this.cityCode,
							id:this.goodsId,
						}
				}else if(this.type==5){
					//集客
					var url='openHome/shop-area-list'
					var	params = {
							city:this.cityCode,
							collectingID:this.goodsId,
						}
				}
				else{
					var url='openMall/shop-area-list'
					var	params = {
							city:this.cityCode,
							id:this.goodsId,
						}
				}
            	this.$http(url, params, 'GET').then(res => {
            	    this.areaList=res.data
            	
            	})
            },
			getAdress(){
				var that=this;
				var location = this.location.lng + ',' + this.location.lat
				console.log('location'+location)
				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;
							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("接口获取失败")
							that.cityCode = ''
							that.getqueryShopList() //获取全部门店列表
						}
						
					}
				});
			},
			goDetail(item) {
				 this.$store.commit('mutationsckshopInfo', item)	
				uni.navigateBack({
					delta:-1
				})
				// uni.navigateTo({
				// 	url: '../shop/shopDetail?id=' + item.shopId
				// })
			}
		},
		
		// 下拉刷新
		onPullDownRefresh() {
			
			this.getqueryShopList()
			setTimeout(function() {
				uni.stopPullDownRefresh();
			}, 1000);
		},
		
	}
</script>

<style scoped>
	.box {
		min-height: 100vh;
		background-color: #F4F5F7;
		/* padding-top: 20rpx; */
		padding-bottom: 60rpx;
	}

	.shopline {
		margin: 0rpx 24rpx 20rpx;
		padding: 20rpx;
		background-color: #FFFFFF;
		border-radius: 10rpx;
        position: relative;
		display: flex;
	}


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

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

	.nodataBox {
		text-align: center;
	}

	.shopImg {
		width: 146rpx;
		height: 146rpx;
		border-radius: 6rpx;
	}

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

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

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

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

	.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;
        height: 38rpx;
		flex-wrap: wrap;
		align-items: center;
		overflow: hidden;
		padding: 5rpx 0rpx;

	}

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

		font-size: 22rpx;
		line-height: 30rpx;
		margin: 5rpx 10rpx 5rpx 0rpx;
	}

	.timeBg {
		display: flex;

	}

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

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

	.shopNameSearchInput {
		width: 500rpx;
	}

	.colorCS {
		color: #FF4F00;
	}

	.shopbox {
		padding: 0 16rpx;
	}



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

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

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

	.shopright {
		padding-left: 20rpx;
	}

	.shopName {
		font-size: 26rpx;
		color: #333333;
		line-height: 37rpx;
		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;
		color: #999999;
	}

	.noMore {
		text-align: center;
		line-height: 50rpx;
		color: #999999;
		font-size: 28rpx;
	}
	.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;
	}
	.jtbelow{
		width: 14rpx;height: 7rpx;
		margin-left: 10rpx;margin-top: 10rpx;
	}
	.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;
	}
	.areaCkIcon{
		width: 38rpx;height: 28rpx;
	}
	.dhImg{
		width: 35rpx;height: 35rpx;border-radius: 6rpx;
	}
	.newdistance{
		position: absolute;top: 22rpx;right: 18rpx;
		text-align: center;
		font-size: 22rpx;
		color: #666666;
	}
</style>