discounts-minapp/orderFood/shopList.vue

<template>
	<view class="shopList">
		<view class="sub-title">
			自助餐厅，不支持外卖
		</view>
		<view class="step-box">
			<view class="step-item" v-for="(item,index) in iconList" :key="index">
				<view class="step-content">
					<image class="icon" :src="item.icon" mode=""></image>
					<view class="title">
						{{item.title}}
					</view>
				</view>
				<image v-if="index<3" class="arrow" src="https://zswl-dev.oss-cn-chengdu.aliyuncs.com/63b7c68b71a69169d1b33f92/store/bdb/user/avatar/raTdgnQlHfUu9455bbfe63b68d3de6aac3f0ace0f0fa.png/1.png" mode=""></image>
			</view>
		</view>
		
		<view class="search-box">
			<view class="city" @click="chooseCity">
				{{city}}
				<image class="arrow" src="https://zswl-dev.oss-cn-chengdu.aliyuncs.com/63b7c68b71a69169d1b33f92/store/bdb/user/avatar/zxcYhNinF6bA08f2a8a2c1cfcf4953f9f58d9e01fb65.png/1.png" mode=""></image>
			</view>
			<input class="search-input" @input="input" type="text" placeholder="请输入关键字搜索" v-model="query.jsonString['shop.shopName']" />
		</view>
		
		<view class="tab-box">
			<view class="tab-item" :class="[active == 1?'active':'']" @click="handleTab(1)">
				<view class="title">
					附近餐厅
				</view>
				<view class="num">
					{{total}}
				</view>
			</view>
			<!-- <view class="tab-item" :class="[active == 2?'active':'']" @click="handleTab(2)">
				<view class="title">
					收藏的餐厅
				</view>
				<view class="num">
					99
				</view>
			</view> -->
		</view>
		
		<zs-list mt="0" @load="loadMore" :status="status">
			
			<view class="shop-item" v-for="item in list" :key="item.id" @click="handleItem(item.pid)">
				<view class="title">
					{{item.title}}
				</view>
				
				<view class="address">
					{{item.address}}
				</view>
				<view class="distance-box">
					<image class="icon" src="https://zswl-dev.oss-cn-chengdu.aliyuncs.com/63b7c68b71a69169d1b33f92/store/bdb/user/avatar/dcVu4aDpGqtEb448adf2015d6df676865bae8811712f.png/1.png" mode=""></image>
					<view class="distance">
						{{item.distance.toFixed(2)}}km
					</view>
				</view>
			</view>
		</zs-list>
		
		
	</view>
</template>

<script>
	import {debounce} from '@/utils/tool.js'
	import {getFoodShopList} from '@/api/orderFood';
	export default {
		
		data() {
			return {
				query:{
					latitude: 30.57447,
					longitude: 103.92377,
					distance: 1000000000,
					regionCode:'',
					productType:'Restaurant',
					jsonString:{ot:"XBK",'shop.shopName': ""},
					page:0,
					size:10
				},
				total:0,
				search:'',
				city:uni.getStorageSync('HomeCity')||uni.getStorageSync('city'),
				status: 'more',
				active:1,
				list:[],
				iconList:[
					{
						icon:'https://zswl-dev.oss-cn-chengdu.aliyuncs.com/63b7c68b71a69169d1b33f92/store/bdb/user/avatar/i2UtMJa19SdPa7c5a75ed573099d17655f14438bca4a.png/1.png',
						title:'选择门店'
					},
					{
						icon:'https://zswl-dev.oss-cn-chengdu.aliyuncs.com/63b7c68b71a69169d1b33f92/store/bdb/user/avatar/0z35goC7xh0k36fdd6deed90b8d46f37f4a28c399c48.png/1.png',
						title:'选择饮品'
					},
					{
						icon:'https://zswl-dev.oss-cn-chengdu.aliyuncs.com/63b7c68b71a69169d1b33f92/store/bdb/user/avatar/GouemYUdFFqx399dd566771ccef15fe744ad8629b19c.png/1.png',
						title:'等待取餐码'
					},
					{
						icon:'https://zswl-dev.oss-cn-chengdu.aliyuncs.com/63b7c68b71a69169d1b33f92/store/bdb/user/avatar/zsWQBVQJo8DOe5778c87a4e22e574ad51e9c4a3ac0ed.png/1.png',
						title:'到点取餐'
					}
				]
			}
		},
		methods: {
			input:debounce(function(val) {
				this.status = 'more'
				this.query.page = 0
				this.list = []
				this.getFoodShopList()
			}),
			loadMore() {
				this.getFoodShopList()
			},
			handleTab(val ){
				this.active = val
			},
			chooseCity(){
				uni.navigateTo({
					url:`/hotel/cityList?backUrl=/orderFood/shopList`
				})
			},
			handleItem(id){
				uni.navigateTo({
					url:'/orderFood/shopDetail?id='+id
				})
			},
			getFoodShopList(){
				this.status = 'loading'
				let query = JSON.parse(JSON.stringify(this.query))
				if(!query.jsonString['shop.shopName']){
					console.log(query);
					delete query.jsonString['shop.shopName']
				}
				query.jsonString = JSON.stringify(query.jsonString)
				getFoodShopList(query).then(res=>{
					if(res.state = 'Success'){
						console.log(res);
						this.list = this.list.concat(res.content.content)
						this.total = res.content.totalElements
						if(this.list.length >= res.content.totalElements){
							this.status = 'noMore'
						}else{
							this.status = 'more'
							this.query.page++
						}
					}
				})
			}
		},
		onLoad(options){
			// this.query.regionCode = options.regionCode||uni.getStorageSync('regionCode')
			if(options.regionCode){
				this.city = uni.getStorageSync('HomeCity')
				this.query.regionCode = options.regionCode
			}else{
				this.query.regionCode = uni.getStorageSync('regionCode')
				this.city = uni.getStorageSync('city')
			}
			this.query.jsonString.ot = uni.getStorageSync('ot')
			
			let location = JSON.parse(uni.getStorageSync('location')) 
			this.query.latitude = location.latitude
			this.query.longitude = location.longitude
			
		}
	}
</script>

<style lang="scss" >
.shopList{
	background: #F9F9F9;
	min-height: 100vh;
	.sub-title{
		font-weight: 800;
		font-size: 32rpx;
		color: #222222;
		background: #FFFFFF;
		text-align: center;
	}
	.step-box{
		display: flex;
		justify-content: space-between;
		background: #FFFFFF;
		border-radius: 0rpx 0rpx 40rpx 40rpx;
		padding: 28rpx 60rpx;
		.step-item{
			display: flex;
			align-items: center;
			.step-content{
				text-align: center;
				.icon{
					width: 80rpx;
					height: 80rpx;
				}
				.title{
					font-size: 24rpx;
					color: #222222;
					margin-top: 20rpx;
				}
			}
			.arrow{
				width: 70rpx;
				height: 6rpx;
				margin-top: -55rpx;
			}
		}
	}
	.search-box{
		display: flex;
		align-items: center;
		height: 72rpx;
		background: #FFFFFF;
		border-radius: 40rpx 40rpx 40rpx 40rpx;
		margin: 0 24rpx;
		padding: 12rpx 24rpx;
		box-sizing: border-box;
		margin-top: 32rpx;
		.city{
			display: flex;
			align-items: center;
			font-weight: bold;
			font-size: 28rpx;
			color: #222222;
			padding-right: 14rpx;
			border-right:2rpx solid #F0F0F0;
			.arrow{
				width: 48rpx;
				height: 48rpx;
			}
		}
		.search-input{
			flex: 1;
			padding: 0 20rpx;
		}
	}
	.tab-box{
		display: flex;
		align-items: center;
		.tab-item{
			display: flex;
			align-items: center;
			justify-content: center;
			flex: 1;
			padding: 28rpx 0;
			.title{
				font-weight: bold;
				font-size: 36rpx;
				color: #222222;
			}
			.num{
				color: #fff;
				font-size: 24rpx;
				min-width: 28rpx;
				text-align: center;
				height: 28rpx;
				line-height: 28rpx;
				padding: 2rpx 6rpx;
				border-radius: 14rpx;
				background: #AAAAAA;
				box-sizing: border-box;
			}
		}
		.tab-item.active{
			.num{
				background: #FF4D3A;
			}
		}
	}
	
	.zs-list{
		margin: 0 24rpx;
		.shop-item{
			padding: 28rpx;
			background: #FFFFFF;
			border-radius: 16rpx 16rpx 16rpx 16rpx;
			margin-bottom: 20rpx;
			.title{
				font-weight: 800;
				font-size: 32rpx;
				color: #222222;
			}
			.address{
				font-size: 24rpx;
				color: #AAAAAA;
				margin-top: 16rpx;
			}
			.distance-box{
				display: flex;
				align-items: center;
				margin-top: 16rpx;
				.icon{
					width: 28rpx;
					height: 28rpx;
				}
				.distance{
					font-size: 24rpx;
					color: #222222;
					margin-left: 4rpx;
				}
			}
		}
	}
}
</style>