txCar/pages/shop/ckShop.vue

<template>
	<view class="content">
		<view class="top">

			<!-- 			<view class="shopMr" v-show="shopDefault">
				<view class="shopMrMs">默认门店</view>
				<view class="shopBox">
					    <view class="">
						 <image :src="shopDefault.photoPath" mode="" class="shopImg"></image>
						</view>
						<view class="shopCont">
							<view class="shopName">{{shopDefault.shopName}}</view>
							<view class="flex shopRight">
								<view>
								<span class="span2" >暂无评分</span>
									<span class="span3">服务次数 </span>
								</view>
								<view class="shopBq">{{shopDefault.levelName}}</view>
							</view>
							<view class="shopTime"><span v-show="shopDefault.startTime">{{shopDefault.startTime}}</span> - <span v-show="shopDefault.endTime">{{shopDefault.endTime}}</span> </view>
							<view class="flex addressBox">
								<view class="address" > <span v-show="shopDefault.address"> {{shopDefault.address}}</span></view>
								<view class="shopKm" v-show="shopDefault.distance">{{shopDefault.distance}}km</view>
							</view>
						</view>
					
				</view>
			</view> -->
			<!-- tab -->
			<view class="topView">

				<view class="tab">
					<!-- 93rpx -->
					<view class="tabLine" :class="{tabActive:tabindex==1}" @click="tabindexClick(1)">全部</view>
					<view class="tabLine" :class="{tabActive:tabindex==2}" @click="tabindexClick(2)">关注</view>
					<view class="tabLine" :class="{tabActive:tabindex==3}" @click="tabindexClick(3)">足迹</view>
				</view>
			</view>



			<!-- 全部门店页 -->
			<view class="allShop" v-show="tabindex==1">
				<view class="firstTop">

					<view class="search">
						<!-- 120rpx -->
						<view class="searchVIew">
							<image src="../../static/img/icon_search.png" mode="" class="searchIMg"></image>
							<input type="text" value="" 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>
							<image src="../../static/img/icon_arrow_cheng.png" mode="" v-show="showCity"
								class="screenJt">
							</image>
						</view>
						<view class="screenLine" @click="mdlx">
							<view class="screenLineTxt " :class="{colorCS:levelShow}">门店类型</view>
							<image src="../../static/img/icon_arrow_gray.png" mode="" class="screenJt"
								v-show="!levelShow">
							</image>
							<image src="../../static/img/icon_arrow_cheng.png" mode="" v-show="levelShow"
								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>
							<image src="../../static/img/icon_arrow_cheng.png" mode="" v-show="comprehensiveShow"
								class="screenJt"></image>
						</view>

					</view>

					<!-- 门店类型弹框 -->
					<view class="shoplevelBox" v-show="levelShow" @click="levelShow=false">
						<view class="shoplevelCont">
							<view class="shoplevelLine" v-for="(item,index) in shopLevel" @click.stop="levelClick(item)"
								:class="{shoplevalActive:item.ckeck}">{{item.name}}</view>
						</view>
						<view class="shoplevelBottom">
							<view class="shoplevelReset" @click.stop="shoplevelReset">重置</view>
							<view class="shoplevelsbu" @click.shop="shoplevelsbu">确定</view>
						</view>
					</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 class="shopLineBoxFirst">
					<view class="shopBox shopBox2" v-for="(item,index) in queryShopList"
						@click="addBMemberShopIsDefault(item)">
						<view class="">
							<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="shopCont">
							<view class="shopName">{{item.shopName}}</view>
							<view class="flex shopRight">
								<view>
									<span class="span1" v-if="item.shopScore">{{item.shopScore}}</span>
									<span class="span2" v-if="item.shopScore">分</span>
									<span class="span2" v-if="!item.shopScore">暂无评分</span>
									<span class="span3">服务次数  {{item.sheetSum}}</span>
								</view>
								<view class="shopBq" v-show="item.levelName">{{item.levelName}}</view>
							</view>
							<view class="shopTime"><span v-show="item.startTime">{{item.startTime}}</span> - <span
									v-show="item.endTime">{{item.endTime}}</span> </view>
							<view class="flex addressBox">
								<view class="address"> <span v-show="item.address"> {{item.address}}</span></view>
								<view class="shopKm" v-show="item.distance">{{item.distance}}km</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 class="allShop" v-show="tabindex==2">
				<view class="shopLineBox">
					<view class="shopBox shopBox2" v-for="(item,index) in bMemberShopList"
						@click="addBMemberShopIsDefault(item)">
						<view class="">
							<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="shopCont">
							<view class="shopName">{{item.shopName}}</view>
							<view class="flex shopRight">
								<view>
									<span class="span1" v-if="item.shopScore">{{item.shopScore}}</span>
									<span class="span2" v-if="item.shopScore">分</span>
									<span class="span2" v-if="!item.shopScore">暂无评分</span>
									<span class="span3">服务次数 {{item.sheetSum}} </span>
								</view>
								<view class="shopBq" v-show="item.levelName">{{item.levelName}}</view>
							</view>
							<view class="shopTime"><span v-show="item.startTime">{{item.startTime}}</span> - <span
									v-show="item.endTime">{{item.endTime}}</span> </view>
							<view class="flex addressBox">
								<view class="address"> <span v-show="item.address"> {{item.address}}</span></view>
								<view class="shopKm" v-show="item.distance">{{item.distance}}km</view>
							</view>
						</view>

					</view>
					<view v-if="bMemberShopList==''" class="nodataBox">
						<image src="../../static/img/nodata.png" mode="widthFix" class="nodataImg"></image>
						<view class="noTxt">暂无数据</view>
					</view>
				</view>

			</view>

			<!-- 足迹页 -->
			<view class="allShop" v-show="tabindex==3">
				<view class="footLine">
					<view v-for="(v,i) in shopFootprintList">
						<view class="timeDate">
							{{v.date}}
						</view>
						<view class="shopBox shopBox2" v-for="(item,index) in v.list"
							@click="addBMemberShopIsDefault(item)">
							<view class="">
								<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="shopCont">
								<view class="shopName">{{item.shopName}}</view>
								<view class="flex shopRight">
									<view>
										<span class="span1" v-if="item.shopScore">{{item.shopScore}}</span>
										<span class="span2" v-if="item.shopScore">分</span>
										<span class="span2" v-if="!item.shopScore">暂无评分</span>
										<span class="span3">服务次数 {{item.sheetSum}} </span>
									</view>
									<view class="shopBq" v-show="item.levelName">{{item.levelName}}</view>
								</view>
								<view class="shopTime">{{item.startTime}}-{{item.endTime}}</view>
								<view class="flex addressBox">
									<view class="address">{{item.address}}</view>
									<view class="shopKm">{{item.distance}}km</view>
								</view>
							</view>

						</view>
					</view>

				</view>
				<view v-if="shopFootprintList==''" 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 {
				tabindex: 1,
				location: '',
				cityname: '上海市',
				queryShopList: '',
				shopName: '',
				level: '',
				comprehensive: 0,
				shopLevel: '',
				levelShow: false,
				comprehensiveShow: false,
				shopDefault: '',
				bMemberShopList: [],
				shopFootprintList: [],
				showCity: false,
				page: 1,
			}
		},
		onLoad() {
			this.location = uni.getStorageSync("location");
			if (this.location) {
				this.cityname = this.location.cityname
			} else {
				//初始化数据
				this.location = {
					cityname: '',
					cityCode: ''
				}
			}
			this.getqueryShopList() //获取全部门店列表
			this.getqueryBShopLevel() //查询门店等级
			this.getbMemberShopList() //关注门店
			this.getShopFootprint()
			this.shopDefault = uni.getStorageSync("shopData");
			console.log(this.shopDefault)
		},
		methods: {
			mdlx() {
				this.levelShow = !this.levelShow;
				this.comprehensiveShow = false;
				this.showCity = false
			},
			juli() {
				this.comprehensiveShow = !this.comprehensiveShow;
				this.levelShow = false;
				this.showCity = false
			},
			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
			},
			addBMemberShopIsDefault(item) {
				uni.showLoading({});
				this.$http('miniAppShopInfoController/addBMemberShopIsDefault', {
					shopId: item.shopId
				}, 'POST').then(res => {
					uni.hideLoading();
					var token = res.data.token;
					var logodata = uni.getStorageSync("logodata");
					logodata.token = token;
					uni.setStorage({
						key: 'logodata',
						data: logodata,
						success: function() {
							uni.setStorage({
								key: 'shopData',
								data: item,
								success: function() {

									if (res.code == 0) {
										uni.navigateBack({
											delta: 1
										})
									} else {
										uni.showToast({
											title: res.msg,
											icon: 'none',
											duration: 3000
										});
									}
								}
							});

						}
					});




				})
			},
			getqueryShopList() {
				uni.showLoading({});
				this.$http('miniAppShopInfoController/queryShopList', {
					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
				})
			},
			getbMemberShopList() { //门店
				uni.showLoading({});
				this.$http('miniAppMyBMemberCar/listBMemberShopPage', {
					lat: this.location.lat,
					lng: this.location.lng,
					page: this.page,
					limit: 10
				}, 'GET').then(res => {
					uni.hideLoading();
					var a = res.data.Items
					this.bMemberShopList = this.bMemberShopList.concat(a)
				})
			},
			getShopFootprint() { //足迹
				this.$http('miniAppMyBMemberCar/listBMemberShopFootprintPage', {
					lat: this.location.lat,
					lng: this.location.lng,
					page: this.page,
					limit: 10
				}, 'GET').then(res => {
					var a = res.data.Items;
					//this.shopFootprintList=this.shopFootprintList.concat(a)
					if (this.shopFootprintList.length == 0) {
						this.shopFootprintList = this.shopFootprintList.concat(a);
					} else {
						console.log(a[0].date)
						console.log(this.shopFootprintList[this.shopFootprintList.length - 1].date)
						if (a[0].date == this.shopFootprintList[this.shopFootprintList.length - 1].date) {
							this.shopFootprintList[this.shopFootprintList.length - 1].list.concat(a[0].list);
							a.splice(0, 1);
							this.shopFootprintList = this.shopFootprintList.concat(a);
						} else {
							this.shopFootprintList = this.shopFootprintList.concat(a);
						}
					}
				})
			},
			searchList() {
				this.getqueryShopList()
			},
			searchSc(){
				
				this.shopName = ''
				this.getqueryShopList()
			},
			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()
			},
			tabindexClick(num) {
				this.tabindex = num;
				if (num == 2) {
					this.page = 1;
					this.bMemberShopList = [];
					this.getbMemberShopList()
				} else if (num == 3) {
					this.page = 1;
					this.shopFootprintList = [];
					this.getShopFootprint()
				}
			}
		},
		onReachBottom() {
			this.page++;
			if (this.tabindex == 2) {
				this.getbMemberShopList()
			} else if (this.tabindex == 3) {
				this.getShopFootprint()
			}
			//this.getData()
		},
		onPullDownRefresh() {
			/* this.page=1;
			  this.data=[];
		      this.getData() */
			setTimeout(function() {
				uni.stopPullDownRefresh();
			}, 1000);
		}
	}
</script>

<style scoped>
	.nodataImg {
		width: 400rpx;
		padding-top: 100rpx;
	}

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

	.nodataBox {
		text-align: center;
	}

	.content {
		min-height: 100vh;
		background: #F4F5F7;
	}

	.shopMr {
		padding: 34rpx 24rpx;
		background: #FFFFFF;
	}

	.shopMrMs {
		color: #999999;
		font-size: 24rpx;
	}

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

	.topView {

		width: 100%;
		height: 93rpx;
		background-color: #FFFFFF;
		left: 0rpx;
		top: 0rpx;
		position: fixed;
		z-index: 99;

	}

	.tab {
		display: flex;
		padding: 0 18rpx;
		border-bottom: 1px solid #F4F5F7;
		background: #FFFFFF;
		margin-top: 20rpx;
		justify-content: space-between;

	}

	.tabLine {
		line-height: 88rpx;
		color: #3C3C3C;
		text-align: center;
		width: 210rpx;
		font-size: 30rpx;
	}

	.tabActive {
		color: #FF4F00;
		border-bottom: 4rpx solid #FF4F00;
	}

	.allShop {
		background-color: #FFFFFF;
		padding-top: 111rpx;
	}
	.firstTop{
		width: 100%;
		height: 175rpx;
		background-color: #FFFFFF;
		position: fixed;
		top: 111rpx;
		 z-index: 99;
	}

	.searchIMg {
		width: 40rpx;
		height: 40rpx;
		margin-top: 16rpx;
		margin-left: 20rpx;
	}

	.search {
		padding: 24rpx;
	}

	.searchVIew {
		display: flex;
		background: #F4F5F7;
		border-radius: 36rpx;
		height: 72rpx;
	}

	.searchInput {
		color: #999999;
		font-size: 28rpx;
		padding-left: 16rpx;
		height: 72rpx;
		line-height: 72rpx;
		width: 550rpx;
	}

	.screenJt {
		width: 40rpx;
		height: 40rpx;
	}

	.screen {
		display: flex;
		justify-content: space-between;
		padding: 0 24rpx 16rpx 24rpx;
		border-bottom: 2rpx solid #EEEEEE;
		position: relative;
	}

	.screenLine {
		display: flex;
		color: #333333;
		font-size: 28rpx;

	}
	.shopLineBoxFirst{
		padding: 0 25rpx;
		padding-top: 175rpx;
	}
	.shopLineBox {
		padding: 0 25rpx;
		
	}

	.shopBox2 {
		border-bottom: 2rpx solid #EEEEEE;
		padding-bottom: 30rpx;
	}

	.shoplevelBox {
		position: fixed;
		left: 0;
		width: 750rpx;
		top: 288rpx;
		background: rgba(0, 0, 0, 0.4);

		z-index: 11;
		border-top: 1px solid #EEEEEE;
		border-bottom: 1px solid #EEEEEE;
		height: calc(100vh - 288rpx);
	}

	/* #ifdef H5 */
	.shoplevelBox {

		top: calc(288rpx + 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;
	}

	.footLine {
		padding: 24rpx;
	}

	.timeDate {
		font-size: 24rpx;
		color: #999999;
	}

	.screenJt {
		width: 24rpx;
		height: 24rpx;
		margin-top: 7rpx;
		margin-left: 5rpx;
	}

	.ssScImg {
		width: 40rpx;
		height: 40rpx;
		margin-top: 16rpx;
	}

	.colorCS {
		color: #FF4F00;
	}
</style>