uniapp/pagesHome/home/index.vue

<template>
	<view class="content">
		<view class="info">
			<view class="one">
				<view class="one_1">
					<view class="name">
						{{shopInfo.name}}
						<!-- <uni-icons type="forward" size="20"></uni-icons> -->
					</view>
					<view class="num">
						桌号：{{shopInfo.table}}
					</view>
				</view>
				<!-- <view class="one_2">
					<view class="left">
						<text>领劵</text>
						<text class="left_1" v-for="(item,index) in shopInfo.coupon">{{item.name}}</text>
					</view>
					<view class="right">
						<text>去领劵</text>
						<uni-icons color="#C0C0C0" type="forward" size="14"></uni-icons>
					</view>
				</view> -->
				<view class="one_2">
					<view class="left">
						<text>公告</text>
						<text class="left_2">{{shopInfo.notice}}</text>
					</view>
				</view>
				<view class="one_3">
					<image :src="shopInfo.logo" mode="scaleToFill"></image>
				</view>
			</view>
			<view class="two">
				<view class="two_1">
					<scroll-view scroll-y="true" class="scroll-view">
						<view class="list-scroll-view">
							<view class="list" :class="[active==index?'listActive':'']" v-for="(item,index) in typeList"
								:key="index" @tap="toChange(index,item)">
								<uni-badge :text="item.num" absolute="rightTop" size="small">
									<uni-icons color="#FF8C00" :type="item.icon" size="15"></uni-icons>
									<text class="name">{{item.name}}</text>
								</uni-badge>
							</view>
						</view>
					</scroll-view>
				</view>
				<view class="two_2">
					<scroll-view scroll-y="true" class="scroll-view" @scrolltolower="toPage" @scroll="toScroll">
						<view class="list-scroll-view">
							<view class="theme">{{tags.name}}</view>
							<view class="list" v-for="(tag,index) in marketList" :key="index">
								<view class="img">
									<image class="image" :src="tag.file" mode=""></image>
								</view>
								<view class="info">
									<view class="name textOver">
										<text>{{tag.name}}</text>
									</view>
									<view class="spec" v-if="tag.spec">
										<text>{{tag.spec}}</text>
									</view>
									<view class="money">
										<text>¥{{tag.price}}</text>
										<uni-number-box @change="bindChange(tag)" :min="0" :max="tag.stock" value="tag"
											background="#FF8C00" color="#fff" v-model="tag.num" />
									</view>
								</view>
							</view>
						</view>
						<view class="is_bottom" v-if="is_bottom">
							<text>已经到底了！</text>
						</view>
					</scroll-view>
				</view>
			</view>
		</view>
		<view class="foot" @tap="toView">
			<view class="foot_1">
				<uni-badge :text="cartNum.num" absolute="rightTop" size="small">
					<uni-icons color="#FF8C00" type="cart-filled" size="45"></uni-icons>
				</uni-badge>
				<text>合计</text>
				<text class="type">￥</text>
				<text class="money">{{cartNum.total||0}}</text>
			</view>
			<view class="foot_2">
				<button class="button" @tap.stop="toBuy">去结算</button>
			</view>
		</view>
		<!-- 规格 -->
		<uni-popup ref="specShow" background-color="#fff" type="bottom">
			<view class="popup">
				<view class="close">
					<view @click="toDelete">
						<uni-icons color="#858585" type="trash" size="17"></uni-icons>
						<text class="name">清空购物车</text>
					</view>
				</view>
				<view class="info_1" v-if="popupShow=='1'">
					<scroll-view scroll-y="true" class="scroll-view">
						<view class="list-scroll-view">
							<view class="list" v-for="(tag,index) in buyList" :key="index">
								<view class="img">
									<image class="image" :src="tag.file" mode=""></image>
								</view>
								<view class="info">
									<view class="name textOver">
										<text>{{tag.name}}</text>
									</view>
									<view class="spec" v-if="tag.spec">
										<text>{{tag.spec}}</text>
									</view>
									<view class="money">
										<text>¥{{tag.price}}</text>
										<uni-number-box @change="bindChange(tag)" :min="0" :max="tag.stock" value="tag"
											background="#FF8C00" color="#fff" v-model="tag.num" />
									</view>
								</view>
							</view>
						</view>
					</scroll-view>
				</view>
			</view>
		</uni-popup>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				id: '',
				shopInfo: {
					name: '德轩美食',
					table: '1',
					coupon: [{
							name: '满100减10'
						},
						{
							name: '满200减30'
						}
					],
					notice: '您好，欢迎进店选购',
					logo: require("../../static/foods_1.webp")
				},
				list: [{
						_id: '1',
						code: '0',
						name: '三文鱼',
						file: require("../../static/foods_1.webp"),
						price: 126,
						spec: '300g',
						stock: 100
					},
					{
						_id: '2',
						code: '0',
						name: '蜜汁扇贝',
						file: require("../../static/foods_2.webp"),
						price: 68,
						spec: '400g',
						stock: 140
					},
					{
						_id: '3',
						code: '0',
						name: '意大利牛排',
						file: require("../../static/foods_3.webp"),
						price: 128,
						spec: '600g',
						stock: 200
					},
					{
						_id: '4',
						code: '0',
						name: '糖醋里脊',
						file: require("../../static/foods_4.webp"),
						price: 58,
						spec: '500g',
						stock: 140
					},
					{
						_id: '5',
						code: '2',
						name: '黑糖珍珠奶茶',
						file: require("../../static/foods_1.webp"),
						price: 18,
						spec: '500g',
						stock: 120
					},
					{
						_id: '6',
						code: '2',
						name: '雪碧',
						file: require("../../static/foods_2.webp"),
						price: 5,
						spec: '500g',
						stock: 34
					},
					{
						_id: '7',
						code: '2',
						name: '可口可乐',
						file: require("../../static/foods_3.webp"),
						price: 5,
						spec: '500g',
						stock: 50
					},
					{
						_id: '8',
						code: '1',
						name: '芝士小蛋糕',
						file: require("../../static/foods_2.webp"),
						price: 12,
						spec: '260g',
						stock: 10
					},
					{
						_id: '9',
						code: '1',
						name: '草莓千层',
						file: require("../../static/foods_3.webp"),
						price: 15,
						spec: '350g',
						stock: 40
					}
				],
				active: '0',
				tags: {},
				// 数据是否触底
				is_bottom: false,
				scrollTop: 0,
				typeList: [],
				marketList: [],
				// 购物车
				buyList: [],
				// 购物车数量
				cartNum: {},
				is_show: false,
				// 规格弹框
				popupShow: '1',
			}
		},
		onLoad: async function(e) {
			const that = this;
			that.$set(that, `id`, e.id);
			that.search();
		},
		onShow() {
			const that = this;
		},
		methods: {
			// 查询左侧一级列表
			async search() {
				const that = this;
				let type = [{
						icon: 'vip',
						name: '主食',
						code: '0'
					},
					{
						icon: 'fire',
						name: '甜品',
						code: '1'
					},
					{
						icon: '',
						name: '饮料',
						code: '2'
					}
				]
				that.$set(that, `typeList`, type);
				// 查询产品
				that.$set(that, `tags`, type[0])
				that.searchMarket()
			},
			// 查询产品
			async searchMarket() {
				const that = this;
				let list = that.list.filter(i => i.code == that.tags.code)
				if (list) that.$set(that, `marketList`, list)
			},
			// 改变数量
			async bindChange(e) {
				const that = this;
				that.$nextTick(async () => {
					let list = that.buyList.find(i => i._id == e._id)
					if (list) {
						if (list.num == 0) {
							let cart = that.buyList.filter(i => i._id !== list._id)
							if (cart) that.$set(that, `buyList`, cart)
						} else {
							for (let val of that.buyList) {
								if (val._id == list._id) val.num = list.num
							}
						}
					} else {
						if (e.num != 0) that.buyList.push(e)
					}
					for (let s of that.typeList) {
						let num = that.buyList.filter(i => i.code == s.code)
						let buy = num.filter(i => i.num !== 0)
						if (buy) s.num = buy.length
					}
					await that.countMoney()
				})
			},
			// 计算总额
			countMoney() {
				const that = this;
				let list = that.buyList.filter(i => i.num !== 0)
				let totalMoney = 0;
				// 渲染结束执行下面方法
				that.$nextTick(() => {
					for (const val of list) {
						let total = that.$multiply(val.price, val.num);
						totalMoney += Number(total);
					}
					that.$set(that.cartNum, `num`, list.length)
					that.$set(that.cartNum, `total`, totalMoney)
				})
			},
			// 查看选择商品详情
			toView() {
				const that = this;
				that.$set(that, `popupShow`, '1')
				that.$refs.specShow.open();
			},
			// 去购买
			toBuy() {
				const that = this;
				let key = '1'
				if (that.buyList.length > 0) {
					if (that.id) {
						uni.navigateTo({
							url: `/pagesHome/order/add?key=${key}`
						})
					} else {
						uni.navigateTo({
							url: `/pagesHome/order/index?key=${key}`
						})
					}

				}
			},
			// 关闭弹框
			toDelete() {
				const that = this;
				for (let val of that.typeList) val.num = 0
				that.$set(that, `buyList`, [])
				that.$set(that.cartNum, `num`, 0)
				that.$set(that.cartNum, `total`, 0)
				that.searchMarket()
				that.$refs.specShow.close();
			},
			// 分页
			toPage() {
				const that = this;
			},
			// 触底
			toScroll(e) {
				const that = this;
				let up = that.scrollTop;
				that.$set(that, `scrollTop`, e.detail.scrollTop);
				let num = Math.sign(up - e.detail.scrollTop);
				if (num == 1) that.$set(that, `is_bottom`, false);
			},
			// 左侧一级选择
			toChange(index, e) {
				const that = this;
				that.$set(that, `marketList`, []);
				that.$set(that, `active`, index);
				that.$set(that, `tags`, e);
				that.searchMarket();
			},
		}
	}
</script>

<style lang="scss">
	.content {
		font-family: 12px/1 Tahoma, Helvetica, Arial, "\5b8b\4f53", sans-serif;

		.info {
			display: flex;
			flex-direction: column;
			position: relative;
			flex-grow: 1;

			.one {
				.one_1 {
					padding: 2vw;
					display: flex;
					justify-content: space-between;
					font-size: 18px;
					font-weight: bold;

					.name {
						display: flex;
						align-items: center;
					}
				}

				.one_2 {
					display: flex;
					justify-content: space-between;
					align-items: center;
					padding: 2vw;

					.left {
						text:first-child {
							font-size: 14px;
							margin: 0 1vw 0 0;
							font-weight: 600;
						}

						.left_1 {
							font-size: 12px;
							padding: 1vw;
							margin: 0 1vw 0 0;
							color: #FF7800;
							border: 1px solid #FF7800;
							border-radius: 2vw;
						}

						.left_2 {
							font-size: 12px;
							color: #808080;
						}
					}

					.right {
						font-size: 12px;
						color: #808080;
					}
				}

				.one_3 {
					padding: 2vw;
					text-align: center;
					background-color: #f1f1f1;

					image {
						width: 100%;
						border-radius: 2vw;
						height: 15vh;
					}
				}
			}

			.two {
				height: 61vh;
				display: flex;

				.two_1 {
					position: relative;
					width: 25vw;
					background-color: #fafafa;
					display: flex;
					flex-direction: column;

					.list {
						text-align: center;
						padding: 3vw 0;
						border-bottom: 1px solid #f1f1f1;

						.name {
							color: #858585;
							font-size: 12px;
						}
					}

					.listActive {
						background-color: #ffffff;
					}
				}

				.two_2 {
					flex-grow: 1;
					position: relative;
					display: flex;
					flex-direction: column;

					.theme {
						padding: 2vw;
						color: #858585;
						font-size: 12px;
					}

					.list {
						display: flex;
						width: 70vw;
						margin: 0 0 2vw 0;
						padding: 2vw;
						box-shadow: 0 0 5px #f1f1f1;
						border-radius: 5px;

						.img {
							width: 30vw;

							.image {
								width: 30vw;
								height: 20vw;
								border-radius: 5px;
							}
						}

						.info {
							display: flex;
							flex-direction: column;
							justify-content: space-between;
							width: 40vw;
							padding: 0 0 0 2vw;

							.name {
								font-size: 16px;
							}

							.spec {
								font-size: 12px;
								color: #858585;
							}

							.money {
								display: flex;
								justify-content: space-between;
								align-items: center;
								font-size: 16px;
								color: #FF8C00;
								margin: 0 0 1vw 0;
							}
						}
					}
				}
			}
		}

		.foot {
			display: flex;
			justify-content: space-between;
			padding: 0 2vw;
			background-color: #ffffff;
			border-top: 1px solid #f1f1f1;
			z-index: 99999 !important;

			.foot_1 {
				display: flex;
				justify-content: space-between;
				align-items: center;
				font-size: 14px;

				.type {
					color: #FF8C00;
				}

				.money {
					font-size: 25px;
					color: #FF8C00;
				}
			}

			.foot_2 {
				.button {
					background-color: #FF8C00;
					color: #ffffff;
					border-radius: 5vw;
					font-size: 16px;
				}
			}
		}

		.uni-popup {
			z-index: 9999 !important;
		}

		.popup {
			display: flex;
			flex-direction: column;
			width: 100vw;
			height: 60vh;

			.close {
				text-align: right;
				padding: 2vw;

				.name {
					font-size: 14px;
					color: #858585;
				}
			}

			.info_1 {
				position: relative;
				display: flex;
				flex-direction: column;
				height: 54vh;
				margin-bottom: 12vw;

				.list {
					display: flex;
					width: 96vw;
					margin: 0 0 2vw 0;
					padding: 2vw;
					box-shadow: 0 0 5px #f1f1f1;
					border-radius: 5px;

					.img {
						width: 30vw;

						.image {
							width: 30vw;
							height: 20vw;
							border-radius: 5px;
						}
					}

					.info {
						display: flex;
						flex-direction: column;
						justify-content: space-between;
						width: 60vw;
						padding: 0 0 0 2vw;

						.name {
							font-size: 16px;
						}

						.spec {
							font-size: 12px;
							color: #858585;
						}

						.money {
							display: flex;
							justify-content: space-between;
							align-items: center;
							font-size: 16px;
							color: #FF8C00;
							margin: 0 0 1vw 0;
						}
					}
				}
			}
		}
	}

	.scroll-view {
		position: absolute;
		top: 0;
		left: 0;
		right: 0;
		bottom: 0;

		.list-scroll-view {
			display: flex;
			flex-direction: column;
		}
	}
</style>