high-mini/qianzhu-KFC/kfc-menu-list/kfc-menu-list.vue

<template>
	<view class="content">
		<view class="width100" v-if="flist ==''">
			<view class="width100 height40 font14 padleft15 alijusstart"
				style="background-color: #e7f2ea;color: #4e8a5c;">
				<image class="icon20 paddtright5" mode="widthFix" src="../static/imgs/horn.png"></image>
				营业时间{{starttime}}至{{endtime}}.
			</view>
			<view v-if="flist == '' " class="width100 mart60 fotct font14 fcor666">
				<image mode="widthFix" style="width: 70vw;" :src="imagewxUrl+imgadres"></image>
			</view>
		</view>

		<scroll-view scroll-y class="left-aside" v-if="flist !=''">
			<view v-for="(item,index)  in flist" :key="index" class="f-item" :class="{active: item.name == currentId}"
				@click="tabtap(item)">
				<view class="width100 fotct">
					<image :src="item.imageUrl" mode="widthFix" class="icon45"></image>
				</view>
				<view class="width100 fotct" style="margin-top: -30px;">
					{{item.name}}
				</view>
			</view>
		</scroll-view>


		<scroll-view scroll-with-animation scroll-y class="right-aside" @scroll="asideScroll" :scroll-top="tabScrollTop"
			v-if="flist !='' ">
			<view v-for="(item,index) in slist" :key="index" :id="'main-'+item.kfcId">
				<view class="s-item width90">
					<text class="promotion_mixg1 backcor99" style="margin-right: -3px;"></text>
					<text class="promotion_mixg1 backcor66" style="margin-right: -3px;"></text>
					<text class="promotion_mixg1 backcor33 marglerig"></text>
					{{item.name}}
				</view>
				<view v-if="titem.cateName == item.name" class="t-list mart10 paddbotm10" v-for="(titem,index) in tlist"
					:key="index">
					<view class="paddtop10 width94 font16 fcor333 fotrt fontwig6 text2">
						{{titem.productName}}
					</view>
					<view class="width94 alijun mart5">
						<image :src="titem.productImageUrl" mode="widthFix" class="qzgoodsimg"></image>
						<view class="width50 fotrt">
							<view class="width100 font12 colorc3">¥<text
									class="font18 fontwig6 margle">{{titem.salePrice}}</text>
							</view>
							<view class="width100 font14 mart5 colorc3" v-if="titem.originalPrice != titem.salePrice">
								已减¥{{(titem.originalPrice - titem.salePrice).toFixed(2)}}元</view>
							<view class="width100 height20 font14 mart5 colorc3"
								v-if="titem.originalPrice == titem.salePrice">
							</view>
							<view class="width100 font14 mart5 fcor999" v-if="titem.originalPrice != titem.salePrice"
								style="text-decoration: line-through;">
								原价¥{{titem.originalPrice}}
							</view>
							<view class="width100 height20 font14 mart5 fcor999"
								v-if="titem.originalPrice == titem.salePrice" style="text-decoration: line-through;">

							</view>
							<view class="mart10 icon-click fotrt alijusend" v-if="titem.productId">
								<image class="btn-reduce" mode="widthFix" src="../static/imgs/reduce.png"
									v-if="titem.count > 0" @click="deletenums(titem)"></image>
								<view class="num fcorfff" style="background: #d90209;" v-if="titem.count > 0">
									{{titem.count}}
								</view>
								<image class="btn-plus" mode="widthFix" src="../static/imgs/plus.png"
									@click="showPopups(titem)"></image>
							</view>

							<view class="mart10 icon-click fotrt alijusend" v-else>
								<view class="num fcorfff font14" style="background: #d90209;"
									@click="showPopups(titem)">
									选规格
								</view>
								<view class="unibadge" v-if="titem.count > 0">
									{{titem.count}}
								</view>
							</view>

						</view>
					</view>

				</view>
			</view>
		</scroll-view>

		<shopcart v-if="flist !='' " :goods="shoppingcart" @add="addCart" @dec="decreaseCart" @delAll="delAll">
		</shopcart>


		<!-- 弹窗选择规格 -->
		<wybPopup ref="popup" type="bottom" width="500" height="700" scrollY="true" radius="6" :showCloseIcon="true">
			<image mode="widthFix" class="width40w mart40" :src="kfcimgs"></image>
			<view class="width100 line1 mart10"></view>
			<view class="mart20 width90 font18 fontwig6 fcor333">{{kfcname}}</view>
			<view class="width90 mart10">
				<view class="fcor333 font16 fontwig6">可选套餐</view>
				<view class="mart10 paddleft10 paddtright10 fotct height30  fcor666 font12 typecage"
					v-for="(item,index) in kdjchangelist" :class="[productId == item.productId ? 'bocactive' : '']"
					:key="index" @click="changetype(item)">
					{{item.productName}}
				</view>
			</view>
			<view class="height150"></view>
			<view class="wybfot width100">
				<view class="height50 pricefot alijusstart backcorfff">
					<view class="width60 margle10">
						¥<text class="font24 fontwig6 fcor333 margle">{{kfcprice}}</text>
					</view>
					<view class="icon-click alijusstart">
						<image class="btn-reduce" mode="widthFix" @click="decreaseshopCart()"
							src="../static/imgs/wreduce.png"></image>
						<view class="num fcor333">{{nums}}</view>
						<image class="btn-plus" mode="widthFix" @click="addshopCart()" src="../static/imgs/plus.png">
						</image>
					</view>
				</view>
				<view class="width100 height50 fotct fcorfff" style="background-color: #c72a20;" @click="close()">
					加入购物车</view>
			</view>
		</wybPopup>
	</view>
</template>

<script>
	import shopcart from '../../components/shopcart.vue';
	import wybPopup from '../../components/wyb-popup/wyb-popup.vue';
	import {
		listByStoreCode
	} from '../../Utils/Api.js';
	let app = getApp();
	export default {
		components: {
			shopcart,
			wybPopup
		},
		data() {
			return {
				sizeCalcState: false,
				tabScrollTop: 0,
				currentId: '',
				flist: [],
				slist: [],
				tlist: [],
				list: [],
				storeCode: '', //门店编号
				kdjchangelist: '', //选择的数据
				nums: 1, //数量
				shoppingcart: [], //购物车
				productId: '', //商品id
				kfcname: '', // 名字
				kfcimgs: '', //图片
				kfcprice: '', //价格
				kfcoldprice: '', //原价
				starttime: '', //开始时间
				endtime: '', //结束时间
				imagewxUrl: app.globalData.imageWxImg,
				imgadres: 'storeClose.png',
			}
		},
		onLoad(options) {
			this.storeCode = options.storeCode;
			this.starttime = options.sttime;
			this.endtime = options.entime;
			this.listByStoreCode();
		},
		methods: {
			//肯德基商品详情
			listByStoreCode() {
				uni.showLoading({
					title: '加载中...'
				})
				let datas = {
					storeCode: this.storeCode,
					regionId: app.globalData.cityId
				}
				listByStoreCode(datas).then(res => {
					setTimeout(() => {
						uni.hideLoading();
					}, 1000);
					if (res.return_code == '000000') {
						this.flist = res.return_data;
						this.slist = res.return_data;
						res.return_data.forEach(item => {
							item.products.forEach(items => {
								this.tlist.push(items);
							})
						})
						this.currentId = res.return_data[0].name;
					}
				})
			},
			async loadData() {
				this.flist.forEach(item => {
					item.products.forEach(items => {
						this.tlist.push(items);
					})
				})
			},

			//一级分类点击
			tabtap(item) {
				uni.showLoading({})
				if (!this.sizeCalcState) {
					this.calcSize();
				}
				setTimeout(() => {
					uni.hideLoading();
					this.currentId = item.name;
					let index = this.slist.findIndex(sitem => sitem.name == item.name);
					this.tabScrollTop = this.slist[index].top;
				}, 1000);
			},
			//右侧栏滚动
			asideScroll(e) {
				if (!this.sizeCalcState) {
					this.calcSize();
				}
				let scrollTop = e.detail.scrollTop;
				let tabs = this.slist.filter(item => item.top <= scrollTop).reverse();
				if (tabs.length > 0) {
					this.currentId = tabs[0].name;
				}
			},
			//计算右侧栏每个tab的高度等信息
			calcSize() {
				let h = 0;
				this.slist.forEach(item => {
					let view = uni.createSelectorQuery().select("#main-" + item.kfcId);
					view.fields({
						size: true
					}, data => {
						item.top = h;
						h += data.height;
						item.bottom = h;
					}).exec();
				})
				this.sizeCalcState = true;
			},
			// 规格
			addshopCart() {
				this.nums = this.nums + 1;
			},
			decreaseshopCart() {
				if (this.nums > 1) {
					this.nums = this.nums - 1;
				}
			},
			//购物车
			addCart: function(item) {
				if (item.num >= 0) {
					item.num++
					for (var i = 0; i < this.tlist.length; i++) {
						if (this.tlist[i].productId && item.productId == this.tlist[i].productId) {
							this.tlist[i].count = item.num;
						}

						if (!this.tlist[i].productId) {
							for (var k = 0; k < this.tlist[i].specGroups.length; k++) {
								if (item.productId == this.tlist[i].specGroups[k].productId) {
									this.tlist[i].count = item.num
								}
							}
						}

					}

					this.shoppingcart.forEach((good) => {
						if (item.name == good.name)
							good.num = item.num
					})

				} else {
					this.shoppingcart.forEach((good) => {
						if (item.name == good.name)
							Vue.set(good, 'count', 1)
					})
				}

			},
			decreaseCart(item) {
				if (item.num) {
					item.num--
					for (var i = 0; i < this.tlist.length; i++) {
						if (this.tlist[i].productId && item.productId == this.tlist[i].productId) {
							this.tlist[i].count = this.tlist[i].count - 1;
						}

						if (!this.tlist[i].productId) {
							for (var k = 0; k < this.tlist[i].specGroups.length; k++) {
								if (item.productId == this.tlist[i].specGroups[k].productId) {
									this.tlist[i].count = this.tlist[i].count - 1;
								}
							}
						}

					}
					this.shoppingcart.forEach((good) => {
						if (item.name == good.name)
							good.num = item.num
					})
				}
			},
			// 清空购物车
			delAll() {
				this.shoppingcart.forEach((good) => {
					if (good.num) {
						good.num = 0
					}
				})

				for (var i = 0; i < this.tlist.length; i++) {
					this.tlist[i].count = 0;
				}
				this.shoppingcart = [];
				app.globalData.qianzhulist = '';
			},

			//商品减
			deletenums(item) {
				if (item.count) {
					item.count--
					for (var i = 0; i < this.tlist.length; i++) {
						if (this.tlist[i].productId && item.productId == this.tlist[i].productId) {
							this.tlist[i].count = item.count;
						}
					}
					this.shoppingcart.forEach((good) => {
						if (item.productName == good.name)
							good.num = item.count
					})
				}
			},
			//弹出弹窗
			showPopups(item) {
				let that = this;
				that.nums = 1;
				if (item.productId) {
					that.productId = item.productId;
					// that.kdjchangelist = item;
					that.kfcimgs = item.productImageUrl;
					that.kfcname = item.productName;
					that.kfcprice = item.salePrice;
					that.kfcoldprice = item.originalPrice;
					if (that.shoppingcart.length == 0) {
						let datas = {
							"num": 1,
							"storeCode": that.storeCode,
							"productId": that.productId,
							"name": that.kfcname,
							"imgs": that.kfcimgs,
							"price": that.kfcprice,
							"oldprice": that.kfcoldprice
						}
						that.shoppingcart.push(datas);
						uni.showLoading({
							title: '添加中...'
						})
						setTimeout(() => {
							uni.hideLoading();
						}, 1000);

					} else {
						let indexs = 1;
						for (var i = 0; i < that.shoppingcart.length; i++) {
							if (that.shoppingcart[i].name == that.kfcname) {
								indexs = 0;
								that.shoppingcart[i].num = that.shoppingcart[i].num + 1;
							}
						}
						if (indexs != 0) {
							let datas = {
								"num": 1,
								"storeCode": that.storeCode,
								"productId": item.productId,
								"name": that.kfcname,
								"imgs": that.kfcimgs,
								"price": that.kfcprice,
								"oldprice": that.kfcoldprice
							}
							that.shoppingcart.push(datas);
							uni.showLoading({
								title: '添加中...'
							})
							setTimeout(() => {
								uni.hideLoading();
							}, 1000);
						}
					}

					for (var i = 0; i < that.tlist.length; i++) {
						if (that.tlist[i].productId && item.productId == that.tlist[i].productId) {
							that.tlist[i].count = that.tlist[i].count + 1
						}
					}
				} else {
					that.kdjchangelist = item.specGroups;
					that.kfcimgs = item.specGroups[0].productImageUrl;
					that.productId = item.specGroups[0].productId;
					that.kfcprice = item.specGroups[0].salePrice;
					that.kfcname = item.specGroups[0].productName;
					that.kfcoldprice = item.specGroups[0].originalPrice;
					that.$refs.popup.show();
				}

			},

			//选择类型
			changetype(item) {
				this.productId = item.productId;
				this.kfcimgs = item.productImageUrl;
				this.kfcname = item.productName;
				this.kfcoldprice = item.originalPrice;
				this.kfcprice = item.salePrice;
			},

			//关闭弹窗
			close() {
				if (this.shoppingcart.length == 0) {
					let datas = {
						"num": this.nums,
						"storeCode": this.storeCode,
						"productId": this.productId,
						"name": this.kfcname,
						"imgs": this.kfcimgs,
						"price": this.kfcprice,
						"oldprice": this.kfcoldprice
					}
					this.shoppingcart.push(datas);
					for (var i = 0; i < this.tlist.length; i++) {
						if (!this.tlist[i].productId) {
							for (var k = 0; k < this.tlist[i].specGroups.length; k++) {
								if (this.productId == this.tlist[i].specGroups[k].productId) {
									this.tlist[i].count = this.tlist[i].count + this.nums
								}
							}

						}
					}
					this.$refs.popup.hide();
					return;
				}
				let indexs = 1;
				for (var i = 0; i < this.shoppingcart.length; i++) {
					if (this.shoppingcart[i].name == this.kfcname) {
						indexs = 0;
						this.shoppingcart[i].num = this.shoppingcart[i].num + this.nums;
						for (var i = 0; i < this.tlist.length; i++) {
							if (!this.tlist[i].productId) {
								for (var k = 0; k < this.tlist[i].specGroups.length; k++) {
									if (this.productId == this.tlist[i].specGroups[k].productId) {
										this.tlist[i].count = this.tlist[i].count + this.nums
									}
								}

							}
						}
					}
				}
				if (indexs != 0) {
					let datas = {
						"num": this.nums,
						"storeCode": this.storeCode,
						"productId": this.productId,
						"name": this.kfcname,
						"imgs": this.kfcimgs,
						"price": this.kfcprice,
						"oldprice": this.kfcoldprice
					}
					this.shoppingcart.push(datas);
					for (var i = 0; i < this.tlist.length; i++) {
						if (!this.tlist[i].productId) {
							for (var k = 0; k < this.tlist[i].specGroups.length; k++) {
								if (this.productId == this.tlist[i].specGroups[k].productId) {
									this.tlist[i].count = this.tlist[i].count + this.nums
								}
							}

						}
					}
				}
				this.$refs.popup.hide();
			},
			//排除key对比
			checinfo(item, item1) {
				const keys1 = Object.keys(item);
				const keys2 = Object.keys(item1);
				if (keys1.length !== keys2.length) {
					return false;
				}
				for (let index = 0; index < keys1.length; index++) {
					const val1 = item[keys1[index]];
					const val2 = item1[keys2[index]];
					if (keys2[index] !== 'num') {
						if (val1 !== val2) {
							return false;
						}
					}
				}

				return true;

			}
		}
	}
</script>

<style lang="scss">
	page,
	.content {
		height: 100%;
		background-color: #f8f8f8;
	}

	.content {
		display: flex;
		bottom: 55px;
	}

	.heads {
		position: absolute;
	}

	.icon20 {
		width: 20px;
	}

	.icon15 {
		width: 15px;
	}

	.icon45 {
		width: 45px;
	}


	.left-aside {
		flex-shrink: 0;
		width: 80px;
		height: 100%;
		// margin-top: 85px;
		margin-bottom: 55px;
		background-color: #fff;
	}


	.f-item {
		display: grid;
		align-items: center;
		justify-content: center;
		width: 100%;
		height: 180upx;
		padding: 10px 0px;
		font-size: 24upx;
		color: #666666;
		position: relative;

		&.active {
			background: #f8f8f8;
		}
	}

	.right-aside {
		flex: 1;
		overflow: hidden;
		// margin-top: 85px;
		padding-left: 20upx;
		margin-bottom: 60px;
	}

	.s-item {
		justify-content: flex-end;
		align-items: center;
		display: flex;
		height: 70upx;
		// padding-top: 8upx;
		font-size: 28upx;
		color: #333333;

		.promotion_mixg1 {
			width: 12px;
			height: 2px;
			border-radius: 18px;
			transform: rotate(125deg);
		}


	}

	.t-list {
		width: 96%;
		border-radius: 15px;
		background: #fff;
		min-height: 150px;

		&:after {
			content: '';
			flex: 99;
			height: 0;
		}

	}

	.qzgoodsimg {
		margin-top: -10px;
		min-height: 100px;
		width: 120px;
	}

	.icon-click {
		// position: absolute;
		height: 28px;
		right: 6%;
	}

	.btn-reduce {
		// position: absolute;
		// left: 0px;
		// top: 0;
		width: 28px;
		height: 28px;
		// z-index: 1;

	}

	.btn-plus {
		// position: absolute;
		// right: 0px;
		// top: 0;
		width: 28px;
		height: 28px;
		// z-index: 1;
	}

	.num {
		padding: 0px 20px;
		height: 28px;
		line-height: 28px;
		font-weight: 600;
		border-radius: 18px;
	}

	.typecage {
		margin-left: 2.5%;
		border-radius: 3px;
		border: 1px solid #333333;
		display: inline-block;

	}

	.pricefot {
		border-radius: 15px 15px 0 0;
		box-shadow: 0px 5px 20px #333333;
	}

	.bocactive {
		background-color: #eaf0ec;
		color: #00713e;
	}

	.wybfot {
		position: fixed;
		bottom: 0px;
	}

	.unibadge {
		background: #000;
		width: 20px;
		height: 20px;
		border-radius: 50%;
		font-size: 9px;
		color: #fff;
		line-height: 20px;
		text-align: center;
		position: absolute;
		margin-top: -25px;
		margin-right: -5px;
	}
</style>