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(),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="" 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="brandsBg">
							<span class="shopScore1" v-if="item.shopScore">{{item.shopScore}}</span>
							<span class="shopScore11" v-if="item.shopScore">分</span>
							<span class="shopScore2" v-if="!item.shopScore">暂无评分</span>
							<view class="brands" v-if="item.brands" v-for="(barnd,index2) in item.brands.split(',')">
								{{barnd}}
							</view>
						</view>

						<view class="timeBg">
							<view class="shopTime"><span v-if="item.startTime">{{item.startTime}}</span> - <span
									v-if="item.endTime">{{item.endTime}}</span> </view>
							<span class="shopScore3">服务次数 {{item.sheetSum}}</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>

	</view>
</template>

<script>
	export default {

		data() {
			return {
				location: {
					lng: '',
					lat: '',
				},
				cityName: '选择城市',
				cityCode: '',
				queryShopList: '',
				shopName: '',
				level: '',
				comprehensive: 1,
				shopLevel: [{
					name: '洗剪点',
					ckeck: false
				}, {
					name: 'VIIIP',
					ckeck: false
				}],
				levelShow: false,
				comprehensiveShow: false,

				uid: '',
				share: {
					title: '车蓝图4S店养车服务',
					path: '/pages/shop/shopList',
					imageUrl: '',
					desc: '',
					content: ''
				}


			}
		},
		onShow() {

			this.levelShow = false;
			this.comprehensiveShow = false;
			// this.$common.isUserId();

			var selectCity = uni.getStorageSync("selectCity");

			this.location = uni.getStorageSync("locationCity");

			if (selectCity) {
				//有选择的城市
				this.cityName = selectCity.city
				this.cityCode = selectCity.code
			} else {
				this.cityName = this.location.cityName
				this.cityCode = this.location.cityCode
			}



			this.getqueryShopList() //获取全部门店列表

		},
		onLoad() {

		},
		methods: {
			showCity() {
				console.log('城市');
				uni.navigateTo({
					url: '../chooseCity/chooseCity'
				})
			},
			mdlx() {
				this.levelShow = !this.levelShow;
				this.comprehensiveShow = false;

			},
			juli() {
				this.comprehensiveShow = !this.comprehensiveShow;
				this.levelShow = false;

			},
			searchList() {
				this.getqueryShopList() //获取全部门店列表
			},
			searchSc() {
				this.shopName = '';
				this.getqueryShopList() //获取全部门店列表
			},

			getqueryShopList() {
				uni.showLoading({
					title: '加载中'
				})
				this.$http('worldKeepCar/worldHome/getWorldShopInfoList', {
					name: this.shopName,
					lat: this.location.lat ? this.location.lat : '',
					lng: this.location.lng ? this.location.lng : '',
					cityCode: this.cityCode ? this.cityCode : '',
					comprehensive: this.comprehensive,

				}, '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 24rpx;
		align-items: center;
		border-bottom: 2rpx solid #EEEEEE;
		position: relative;
		background: #FFFFFF;

	}

	.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;
	}

	.brandsBg {
		display: flex;
		
		 flex-wrap: wrap;
		align-items: center;
		overflow: hidden;
		height: 50rpx;
		
	}

	.brands {
		border-radius: 4rpx;
		padding: 0 5rpx;
		color: #F19D01;
		height: 28rpx;
		border: 1px solid #F19D01;
		margin-right: 5rpx;
		font-size: 20rpx;
		line-height: 28rpx;

	}

	.timeBg {
		display: flex;
		align-items: center;

	}

	.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;
		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 {
		width: 500rpx;
		font-size: 22rpx;
		color: #666666;
		line-height: 30rpx;
		padding-top: 10rpx;
	}

	.shopaddress {
		padding-left: 10rpx;
	}
</style>