high-mini/qianzhu-KFC/buffet-order/buffet-order.vue

<template>
	<view>
		<view class="width100 height120 headsbg backcorfff">
			<view class="height20"></view>
			<view class="width100 fotct font18 fcor666">自助餐厅,不支持外卖</view>
			<image src="../static/imgs/buffstu.png" v-if="typeid == 1" mode="widthFix" class="width100"></image>
			<image src="../static/imgs/buffstu1.png" v-if="typeid == 2" mode="widthFix" class="width100"></image>
		</view>

		<view class="input-box mart20 width90" v-if="typeid == 1">
			<view class="fcor333 font14 alijusstart" style="width: 120px;padding-left: 10px;" @click="jumpregin()">
				{{cityName}}
				<image src="../../static/img/downj.png" mode="widthFix" class="icon12 margle"></image>
			</view>
			<input placeholder="请输入关键字搜索" v-model="storeName" @input="getKfcStoresList()"
				placeholder-style="color:#c0c0c0;" />
			<view class="icon search"></view>
		</view>

		<!-- <view class="mart20 width80 alijusstart fotct marb20" v-if="typeid == 1">
			<view class="width50 fcor333 font16" :class="collection == 1?'colorc8':'fcor333'" @click="changestu(1)">附近餐厅
				<text class="bufbtn" :class="collection == 1?'backgrdc8':'backcor33'">97</text>
			</view>
			<view class="width50 fcor333 font16" :class="collection == 2?'colorc8':'fcor333'" @click="changestu(2)">
				收藏的餐厅
				<text class="bufbtn" :class="collection == 2?'backgrdc8':'backcor33'">0</text>
			</view>
		</view> -->

		<view class="width100 height40" v-if="typeid == 2"></view>
		<view class="width100 height25" v-else></view>
		<!-- <view class="mart20 width80 alijusstart fotct marb20" v-if="typeid == 2">
			<view class="width50 fcor333 font16" :class="collection == 1?'color2f6f43':'fcor333'" @click="changestu(1)">
				附近餐厅
				<text class="bufbtn" :class="collection == 1?'backcorf2f6':'backcor33'">255</text>
			</view>
			<view class="width50 fcor333 font16" :class="collection == 2?'color2f6f43':'fcor333'" @click="changestu(2)">
				收藏的餐厅
				<text class="bufbtn" :class="collection == 2?'backcorf2f6':'backcor33'">0</text>
			</view>
		</view> -->

		<view class="mart10 width90 borderrs backcorfff" v-for="(item,index) in kcfShopList" :key="index"
			@click="jumpmenulist(item)">
			<view class="paddtop10 width90 alijusstart">
				<view class="width80p font16 fcor333 fontwig6" v-if="typeid == 2">{{item.name}}</view>
				<view class="width80p font16 fcor333 fontwig6" v-else>{{item.storeName}}</view>
				<view class="width20 fotrt">
					<!-- <image mode="widthFix" class="icon20" src="../static/imgs/nocollection.png"></image> -->
					<!-- <image mode="widthFix" class="icon20" v-if="typeid == 1" src="../static/imgs/collection.png">
					</image> -->
					<!-- <image mode="widthFix" class="icon20" v-if="typeid == 2" src="../static/imgs/collectionlv.png">
					</image> -->
				</view>
			</view>
			<view class="width90 mart5 font12 fcor999">{{item.address}}</view>
			<view class="width90 mart5 alijusstart paddbotm10">
				<image class="icon15" src="../static/imgs/location.png" v-if="typeid == 1" mode="widthFix"></image>
				<image class="icon15" src="../static/imgs/locabtn.png" v-if="typeid == 2" mode="widthFix"></image>
				<text class="margle font14 fcor666 " v-if="typeid == 2">{{(item.distance / 1000).toFixed(2)}}km</text>
				<text class="margle font14 fcor666 " v-else>{{item.distance}}km</text>
			</view>
		</view>
	</view>
</template>

<script>
	import {
		getStarbucksStore,
		getKfcStoresList
	} from '../../Utils/Api.js';
	let app = getApp();
	export default {
		data() {
			return {
				collection: 1, //是否收藏
				kcfShopList: [], //门店列表
				typeid: app.globalData.distinguishid, //区分类型
				cityName: '', //城市名称
				storeName: '' //搜索名称
			}
		},
		onLoad() {

		},
		onShow() {
			this.cityName = app.globalData.cityName;
			if (this.typeid == 2) {
				this.getStarbucksStore();
			}
			if (this.typeid == 1) {
				this.getKfcStoresList();
			}
		},
		methods: {
			//更换状态
			changestu(item) {
				this.collection = item;
			},
			//跳转地区选择
			jumpregin() {
				uni.navigateTo({
					url: '../../qianzhu-Starbucks/changeRegin/changeRegin'
				})
			},
			//跳转菜单
			jumpmenulist(item) {
				if (this.typeid == 2) {
					uni.navigateTo({
						url: '../menu-list/menu-list?storeCode=' + item.code
					})
				}
				if (this.typeid == 1) {
					uni.navigateTo({
						url: '../kfc-menu-list/kfc-menu-list?storeCode=' + item.storeCode
					})
				}
			},
			//查询星巴克门店列表
			getStarbucksStore() {
				uni.showLoading({
					title: '加载中...'
				})
				let datas = {
					lat: app.globalData.latitude,
					lon: app.globalData.longitude
				}
				getStarbucksStore(datas).then(res => {
					uni.hideLoading();
					if (res.return_code == '000000') {
						this.kcfShopList = res.return_data;
					}
				})
			},
			//肯德基列表
			getKfcStoresList() {
				uni.showLoading({
					title: '加载中...'
				})
				let datas = {
					cityCode: app.globalData.cityId + '000000',
					storeName: this.storeName,
					lat: app.globalData.latitude,
					lon: app.globalData.longitude
				}
				getKfcStoresList(datas).then(res => {
					uni.hideLoading();
					if (res.return_code == '000000') {
						this.kcfShopList = res.return_data;
					}
				})
			}
		}
	}
</script>

<style lang="scss">
	page {
		background-color: #f0f0f0;
	}

	.headsbg {
		border-radius: 0 0 30px 30px;
	}

	.colorc8 {
		color: #c82b1f;
	}

	.backgrdc8 {
		background-color: #c82b1f;
	}

	.borderrs {
		border-radius: 10px;
	}


	.bufbtn {
		padding-left: 7px;
		padding-right: 7px;
		padding-top: 1px;
		padding-bottom: 1px;
		font-size: 12px;
		color: #ffffff;
		border-radius: 15px;
	}

	.input-box {
		height: 80rpx;
		background-color: #ffffff;
		border-radius: 30rpx;
		position: relative;
		display: flex;
		align-items: center;

		.icon {
			display: flex;
			align-items: center;
			position: absolute;
			top: 0;
			right: 0;
			width: 60upx;
			height: 80upx;
			font-size: 34upx;
			color: #c0c0c0;
		}

		input {
			height: 28upx;
			font-size: 28upx;
			width: 100%;
			padding-left: 10px;
		}
	}
</style>