txCar/pages/shop/shopList.vue

<template>
	<view class="box">
		<view class="allShop" >
			<view class="topView">
				<view class="search"><!-- 120rpx -->
					<view class="searchVIew">
						<image src="../../static/img/icon_search.png" mode="" class="searchIMg"></image>
						<input type="text" value="" placeholder-style="color:#999999" placeholder="请输入门店名称" class="searchInput" v-model="shopName" @confirm="searchList" />
					   <image src="../../static/img/icon_search_del.png" v-show="shopName" mode="" class="ssScImg" @click="searchSc"></image>
					</view>
				</view>
				<view class="screen">
					<view class="screenLine">
						<view class="screenLineTxt" @click="showCity=true,comprehensiveShow=false,levelShow=false">{{cityname}}</view>
						<image src="../../static/img/icon_arrow_gray.png" mode="" v-show="!showCity" class="screenJt"></image>
						
					</view>
					
					<view class="screenLine" @click="juli" :class="{colorCS:comprehensiveShow}">
						<view class="screenLineTxt" v-if="comprehensive==0">综合排序</view>
						<view class="screenLineTxt"  v-if="comprehensive==1">距离最近</view>
						<view class="screenLineTxt"  v-if="comprehensive==2">评分最高</view>
						<image src="../../static/img/icon_arrow_gray.png" mode="" v-show="!comprehensiveShow" class="screenJt"></image>
						
					</view>
					
					<!-- 综合排序 -->
					  <view class="shoplevelBox " v-show="comprehensiveShow"  @click="comprehensiveShow=false">
					  	<view class="shoplevelCont ">
							<view class="comprehensivebox">
								 <view class="comprehensiveLine" :class="{comprehensiveACtive:comprehensive==0}" @click.stop="comprehensiveClick(0)">综合排序</view>
								 <view class="comprehensiveLine" :class="{comprehensiveACtive:comprehensive==1}" @click.stop="comprehensiveClick(1)">距离最近</view>
								 <view class="comprehensiveLine" :class="{comprehensiveACtive:comprehensive==2}" @click.stop="comprehensiveClick(2)">评分最高</view>
							</view>
					  		
					  	</view>
					  	
					  </view>
					<!-- 综合排序 -->
				</view>
			</view>
			<view class="shopLineBox">
				
					  <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/img/noimg.png" mode="" class="shopImg" v-else></image>
					  	</view>
					  	<view class="shopright">
					  		<view class="shopTop">
					  			<view class="shopName">{{item.shopName}}</view>
					  			<!-- <image src="../../static/img/shopcall.png" mode="" class="shopCallImg"></image> -->
					  		</view>
					  		<view class="shopScore">
					  			<span class="shopScore1" v-if="item.shopScore">{{item.shopScore}}</span>
					  			<span class="shopScore2" v-if="item.shopScore">分</span>
					  			<span class="shopScore2" v-if="!item.shopScore">暂无评分</span>
					  			<span class="shopScore3">服务次数 {{item.sheetSum}}</span>
					  		</view>
					  		<view class="shopTime"><span v-if="item.startTime">{{item.startTime}}</span> - <span v-if="item.endTime">{{item.endTime}}</span> </view>
					  	    <view class="shopBottom">
					  			<view class="shopBottomLeft">
					  				<span v-if="item.distance&&item.distance!= '0.00'">{{item.distance}}km</span>
					  				<span class="shopaddress">{{item.address}}</span>
					  			</view>
					  		<!-- 	<view class="Btn" @click="ckshop(item)">确定</view> -->
					  		</view>
					  	
					  	</view>
					  </view>
					
				
				<view v-if="queryShopList==''" class="nodataBox">
					<image src="../../static/img/nodata.png" mode="widthFix" class="nodataImg"></image>
					<view class="noTxt">暂无数据</view>
				</view>
			</view>
			
		</view>
		<chose-city @selectCity="selectCity"  v-if="showCity" @closeModal="closeModal"></chose-city>
	</view>
</template>

<script>
import choseCity from "@/components/chose-city/chose-city"
export default {
	components: {
		choseCity
	},
	data() {
		return {
			location:'',
			cityname:'上海市',
			queryShopList:'',
			shopName:'',
			level:'',
			comprehensive:1,
			shopLevel:[
				{name:'洗剪点',ckeck:false},{name:'VIIIP',ckeck:false}
			],
			levelShow:false,
			comprehensiveShow:false,
			showCity:false,
			uid:'',
		}
	},
	onShow() {
		this.showCity=false;
		this.levelShow=false;
		this.comprehensiveShow=false;
		this.$common.isUserId();
		
		 this.location=uni.getStorageSync("location");
		 if(this.location){
		 	this.cityname=this.location.cityname
		 }
		 
		 this.uid = uni.getStorageSync("logodata").uid;
		 if (this.uid) {
		 	this.getqueryShopList()//获取全部门店列表
		 	this.getqueryBShopLevel()//查询门店等级
		 }
	},
	onLoad() {
        
	},
	methods: {
		mdlx(){
			this.levelShow=!this.levelShow;this.comprehensiveShow=false;this.showCity=false
		},
		juli(){
			this.comprehensiveShow=!this.comprehensiveShow;this.levelShow=false;this.showCity=false
		},
		searchList(){
			 this.getqueryShopList()//获取全部门店列表
		},
		searchSc(){
			this.shopName='';
			this.getqueryShopList()//获取全部门店列表
		},
		selectCity(item) {
			console.log('-您选择的城市-',item)
			this.location.cityname=item.name;
			this.location.cityCode=item.citycode;
			this.cityname=item.name;
			console.log(this.location)
			uni.setStorage({
				key: 'location',
				data: this.location,
				success: function () {}
			}); 
			this.showCity = false;
		    this.getqueryShopList()//获取全部门店列表
		},
		closeModal() {
			this.showCity = false
		
		},
		getqueryShopList(){
			uni.showLoading({ });
			this.$http('worldKeepCar/worldHome/getWorldShopInfoList', {
			   shopName:this.shopName,
			  lat:this.location.lat,
			  lng:this.location.lng,
			 cityCode:this.location.cityCode,
			  comprehensive:this.comprehensive,
			  level:this.level,
			 },'GET').then(res => {
				uni.hideLoading();
				this.queryShopList=res.data
				
				// 处理 undefined和null转为空白字符串
				this.queryShopList.forEach((item, index) => {
					for (const key in item) {
						item[key] = this.$praseStrEmpty(item[key])
					}
				})
			})
		},
		getqueryBShopLevel(){
			this.$http('miniAppShopInfoController/queryBShopLevel', {
			  
			 },'GET').then(res => {
				res.data.forEach(item=>{
					item.ckeck=false;
				})
				this.shopLevel=res.data
			})
		},
		levelClick(item){
			item.ckeck=!item.ckeck
		},
		shoplevelReset(){
			this.shopLevel.forEach(item=>{
				item.ckeck=false;
			})
			// this.getqueryShopList()
			//this.levelShow=false;
		},
		shoplevelsbu(){
			var arr=[]
			this.shopLevel.forEach(item=>{
				if(item.ckeck){
					arr.push(item.id)
				}
			})
			this.level=arr.join(',')
			console.log(this.level)
			this.levelShow=false;
			this.getqueryShopList()
		},
		comprehensiveClick(num){
			this.comprehensive=num;
			this.comprehensiveShow=false;
			this.getqueryShopList()
		},
        goDetail(item){
			uni.navigateTo({
				url:'../shop/shopDetail?id='+item.shopId
			})
		}
	}
}
</script>

<style scoped>
	.box{
		min-height: 100vh;
		background:#F4F5F7 ;
	}
	.allShop{
		/* background: #FFFFFF; */
	}
	.topView{
		position: fixed;
		width: 100%;
		height: 170rpx;
		background-color: #FFFFFF;
		z-index: 11;
	}
	.searchIMg{
		width: 40rpx;height: 40rpx;margin-top: 16rpx;margin-left: 20rpx;
	}
	.ssScImg{
		width: 40rpx;height: 40rpx;margin-top: 16rpx;
	}
	.search{
		padding: 24rpx;
		background: #FFFFFF;
	}
	.searchVIew{
		display: flex;
		background: #F4F5F7;
		border-radius: 36rpx;
		height: 72rpx;
	}
	.searchInput{
		color: #333333;font-size: 28rpx;padding-left: 16rpx;
		height: 72rpx;line-height: 72rpx;width: 570rpx;
	}
	.screenJt{
		width: 24rpx;
		height: 24rpx;
		margin-top: 7rpx;
		margin-left: 5rpx;
		
	}
	.screen{
		display: flex;
		justify-content: space-around;
		padding: 0 24rpx 16rpx 24rpx;
		border-bottom: 2rpx solid #EEEEEE;
		position: relative;
		background: #FFFFFF;
		height: 60rpx;
	}
	.screenLine{
		display: flex;
		color: #333333;
		font-size: 28rpx;
		
	}
	.shopLineBox{
		padding: 190rpx 0rpx 25rpx;
	}
	.shopBox2{
		margin-top: 20rpx;
		padding-bottom: 30rpx;
		background: #FFFFFF;
		border-radius: 10rpx;
		padding-left: 20rpx;
		padding-right: 20rpx;
	}
	.shoplevelBox{
		position: fixed;
		left: 0;
		width: 750rpx;
		top: 196rpx;
		background: rgba(0,0,0,0.4);
		
		z-index: 11;
		border-top: 1px solid #EEEEEE;
		border-bottom:1px solid #EEEEEE ;
		height: calc(100vh - 196rpx);
	}
	/* #ifdef H5 */
	.shoplevelBox{
		
		top: calc(196rpx + 44px);
		
	}
	/* #endif */
	
	.shoplevelCont{
		display: flex;
		flex-wrap: wrap;
		background: #FFFFFF;
		padding: 24rpx;
	}
	.shoplevelLine{
		color: #333333;
		line-height: 64rpx;
		padding: 0 40rpx;
		height: 64rpx;
		background: #F4F5F7;
		border-radius: 32rpx;
		margin-right: 20rpx;
		margin-bottom: 30rpx;
	}
	.shoplevelBottom{
		display: flex;
		justify-content: space-between;
		padding-top: 60rpx;
		padding-right: 24rpx;
		background: #FFFFFF;
		padding: 24rpx;
	}
	.shoplevelReset{
		width: 320rpx;
		height: 74rpx;
		border-radius: 37rpx;
		border: 2rpx solid #FF4F00;
		text-align: center;
		line-height: 74rpx;
		font-size: 30rpx;
		font-family: PingFangSC-Medium, PingFang SC;
		font-weight: 500;
		color: #FF4F00;
	}
	.shoplevelsbu{
		width: 320rpx;
		height: 74rpx;
		background: #FF4F00;
		border-radius: 37rpx;
		font-size: 30rpx;
		font-family: PingFangSC-Medium, PingFang SC;
		font-weight: 500;
		color: #FFFFFF;
		text-align: center;
	   line-height: 74rpx;
	   border: 2rpx solid #FF4F00;
	}
	.shoplevalActive{
		color: #FF4F00;
		background: rgba(255, 79, 0, 0.08);
		
	}
	.comprehensiveLine{
	/* 	width: 200rpx;
		height: 60rpx;
		line-height: 60rpx;
		text-align: center;
		border: 1px solid rgb(228, 228, 228);
		border-radius: 10rpx; */
		font-size: 26rpx;
		font-family: PingFangSC-Regular, PingFang SC;
		font-weight: 400;
		color: #333333;
		padding: 25rpx 0;
		
	}
	.comprehensivebox{
		/* display: flex;justify-content: space-around; */
	}
	.comprehensiveACtive{
		color: #FF4F00;
	}
	.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{
			color: #333333;
			font-size: 26rpx;
			font-weight: 600;
		}
		.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;
		}
	.shopTime{
		color: #666666;font-size: 22rpx;
	}	
	.addressBox{
		color: #666666;font-size: 22rpx;
	}
	.shopNameSearchInput{
		width: 500rpx;
	}
	.colorCS{
		color: #FF4F00;
	}
	.shopbox{
		padding:0 16rpx;
	}
	.shopline{
		padding: 20rpx;
		background: #FFFFFF;
		border-radius: 10rpx;
		margin-top: 20rpx;
		display: flex;
	}
	.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;
		color: #FF4F00;
	}
	.shopScore2{
		font-size: 22rpx;
		color: #FF4F00;
	}
	.shopScore3{
		font-size: 22rpx;
		color: #333333;
		padding-left: 20rpx;
	}
	.shopTime{
		font-size: 22rpx;
		color: #666666;
		line-height: 30rpx;
		padding-top: 10rpx;
	}
	.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{
		width: 500rpx;
		font-size: 22rpx;
		color: #666666;
		line-height: 30rpx;
		padding-top: 10rpx;
	}
	.shopaddress{
		padding-left: 10rpx;
	}
</style>