uni-app单商家点餐系统（已完结-附带源码）

• 可以三端打包，移动网页、微信小程序、app

部分代码

<template>
	<view class="content">
		<!-- 分类导航 -->
		<view class="classify-list">
			<!-- 左侧分类导航 -->
			<scroll-view scroll-y="true" class="left">
				<view class="row" v-for="(item,index) in classifyList" :key="index"
					:class="[index === showClassifyIndex ? 'active' : '']" @tap="tapClassify(index)">
					<view class="text">
						<view class="block" :class="'bg-' + themeColor.name"></view>
						{{item.title}}
					</view>
				</view>
			</scroll-view>
			<!-- 右侧分类导航 -->
			<scroll-view scroll-y="true" class="right">
				<view v-for="(item, index) in classifyList" :key="index">
					<view v-if="index === showClassifyIndex" class="classify">
						<view class="" v-if="item.goods_list.length !== 0">
							<!-- 标题 -->
							<view class="item-title unify-weight">{{item.title}}</view>

							<view class="item-subclass unify-relative"
								v-for="(item2,index2) in item.goods_list" :key="index2">
								<view class="item-subclass-ice unify-flex" @tap="tapGoodsDetails(item2)">
									<view class="item-left">
										<image class="item-left-image" :src="item2.goods_cover || errorImage" mode="">
										</image>
									</view>
									<view class="item-right">
										<view class="item-right-con">
											<view class="item-right-name unify-weight unify-font-size-line-astrict">
												{{item2.goods_name}}
											</view>
											<view class="item-right-desc unify-font-size-two-line-astrict">
												{{item2.goods_desc}}
											</view>
											<view class="item-right-price unify-absolute unify-flex">
												<view class="item-price unify-weight" :class="'tf-' + themeColor.name">
													<text class="item-price-iden">{{moneySymbol}}</text>
													{{item2.goods_price}}
													<text
														class="item-original-price">{{moneySymbol}}{{item2.goods_original_price}}</text>
												</view>
											</view>
										</view>
									</view>
								</view>
								
								<uni-goods-add-subtract :data="item2" :index="index" :index2="index2" :absolute="true" bottom="10rpx" right="40rpx" @minus="tapNumber" @add="tapNumber"></uni-goods-add-subtract>
							</view>

							<!-- 间隔 -->
							<view style="height: 60px" v-if="goodsNum > 0"></view>
						</view>
						<view class="no-data" v-else>
							<image class="iconfont" :src="iconRight" mode="widthFix"></image>
							暂无分类
						</view>
					</view>
				</view>
			</scroll-view>
		</view>
		
		<uni-goods-add-subtract-animation :show="isCartIcon" :cartItemElc="cartItemElc"></uni-goods-add-subtract-animation>

		<!-- 购物车 -->
		<uni-shopping-trolley ref="uniShoppingTrolley" :show="show" :cartItemElc="cartItemElc" :isCartIcon="isCartIcon"
			:num="goodsNum" :totalPrice="totalPrice" :isMinus="isMinus" @updateIsCartIcon="updateIsCartIcon" @updateCartItemElc="updateCartItemElc">
		</uni-shopping-trolley>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				windowHeight: this.windowHeight,	// 屏幕高度
				statusBarHeight: this.statusBarHeight,	// 状态栏
				errorImage: this.$mAssetsPath.errorImage,
				iconRight: this.$mAssetsPath.iconRight,
				moneySymbol: this.$mConstDataConfig.moneySymbol,
				appName: this.$mSettingConfig.appName,
				show: false, // 购物车是否显示
				isCartIcon: false, // 动画标
				cartItemElc: { // 坐标
					left: 0,
					top: 0
				},
				goodsNum: 0, // 购物车数量
				totalPrice: 0, // 商品总价
				isMinus: 0, // 判断是否减操作
				showClassifyIndex: 0, // 一级菜单高亮显示序号
				classifyList: [{
						title: "招聘推荐",
						goods_list: [{
							goods_name: '新鲜盐焗鸡新鲜盐焗鸡新鲜盐焗鸡新鲜盐焗鸡新鲜盐焗鸡',
							goods_cover: '/static/mall/goods2.png',
							goods_desc: '盐水鸡是一道由鸡、辣椒、盐水等做成的菜肴，冷热均可食，味咸辣。可用于虚劳瘦弱、骨蒸潮热、脾虚泄泻、消渴、崩漏、赤白带、遗精等',
							goods_price: '19',
							goods_original_price: '29',
							goods_number: 0,
							goods_image: ["/static/mall/goods1.png", "/static/mall/goods2.png"],
						}, {
							goods_name: '新鲜盐焗鸡',
							goods_cover: '',
							goods_desc: '盐水鸡是一道由鸡、辣椒、盐水等做成的菜肴，冷热均可食，味咸辣。可用于虚劳瘦弱、骨蒸潮热、脾虚泄泻、消渴、崩漏、赤白带、遗精等',
							goods_price: '19',
							goods_original_price: '29',
							goods_number: 0,
							goods_image: ["/static/mall/goods1.png", "/static/mall/goods2.png"],
						}, {
							goods_name: '新鲜盐焗鸡',
							goods_cover: '/static/mall/goods2.png',
							goods_desc: '盐水鸡是一道由鸡、辣椒、盐水等做成的菜肴，冷热均可食，味咸辣。可用于虚劳瘦弱、骨蒸潮热、脾虚泄泻、消渴、崩漏、赤白带、遗精等',
							goods_price: '19',
							goods_original_price: '29',
							goods_number: 0,
							goods_image: ["/static/mall/goods1.png", "/static/mall/goods2.png"],
						}, {
							goods_name: '新鲜盐焗鸡',
							goods_cover: '/static/mall/goods2.png',
							goods_desc: '盐水鸡是一道由鸡、辣椒、盐水等做成的菜肴，冷热均可食，味咸辣。可用于虚劳瘦弱、骨蒸潮热、脾虚泄泻、消渴、崩漏、赤白带、遗精等',
							goods_price: '19',
							goods_original_price: '29',
							goods_number: 0,
							goods_image: ["/static/mall/goods1.png", "/static/mall/goods2.png"],
						}, {
							goods_name: '新鲜盐焗鸡',
							goods_cover: '/static/mall/goods2.png',
							goods_desc: '盐水鸡是一道由鸡、辣椒、盐水等做成的菜肴，冷热均可食，味咸辣。可用于虚劳瘦弱、骨蒸潮热、脾虚泄泻、消渴、崩漏、赤白带、遗精等',
							goods_price: '19',
							goods_original_price: '29',
							goods_number: 0,
							goods_image: ["/static/mall/goods1.png", "/static/mall/goods2.png"],
						}]
					},
					{
						title: "肉丸类",
						goods_list: []
					}
				],
			}
		},
		onLoad() {
			
		},
		methods: {
			// 商品详情
			tapGoodsDetails(e) {
				this.$openPage({
					name: 'goodsDetails',
					query: {
						data: e
					}
				})
			},

			// 点击分类
			tapClassify(e) {
				this.showClassifyIndex = e;
			},

			// 点击商品数量加减 1减  2加
			tapNumber(e, type, index, index2) {
				let classifyList = this.classifyList;
				this.isMinus = type; // 判断是否减操作  1减  2加
				switch (type) {
					case 1:
						classifyList[index].goods_list[index2].goods_number--
						this.goodsNum--
						this.countTotalPrice() // 回调计算总价
						if (this.goodsNum === 0) {
							this.show = false;
							setTimeout(() => {
								this.$refs.uniShoppingTrolley.isCartShow() // 回调组件isCartShow方法
							}, 20)
						}
						break
					case 2:
						this.show = true;
						classifyList[index].goods_list[index2].goods_number++
						this.cartItemElc.left = e.touches[0].pageX - 15; // 自由调动位置
						this.cartItemElc.top = e.touches[0].pageY - 40;
						setTimeout(() => {
							this.goodsNum++
							this.countTotalPrice() // 回调计算总价
							this.$refs.uniShoppingTrolley.isCartShow() // 回调组件isCartShow方法
						}, 20)
						break
					default:
						break
				}
				this.classifyList = classifyList;
			},

			// 计算商品总价
			countTotalPrice() {
				let total = 0,
					classifyList = this.classifyList;
				classifyList.forEach((item, index) => {
					item.goods_list.forEach((item2, index2) => {
						total += Number(item2.goods_price) * item2.goods_number;
					})
				})
				this.totalPrice = total;
			},

			// 更新动画标状态  默认false
			updateIsCartIcon(e) {
				this.isCartIcon = e;
			},
			
			// 更新cartItemElc坐标移动
			updateCartItemElc(e) {
				this.cartItemElc = e;
			}
		}
	}
</script>

<style lang="scss" scoped>
	/* 模块分类 */
	.classify-list {
		width: 100%;
		height: 100%;
		background-color: #FFFFFF;
		display: flex;
		position: absolute;
		padding-top: 88rpx;
		/* #ifdef APP-PLUS */
		padding-top: calc(88rpx + var(--status-bar-height));
		/* #endif */
		bottom: 0;

		.left {
			width: 24%;
			left: 0rpx;
			background-color: #f8f8f8;

			.row {
				width: 100%;
				height: 90rpx;
				display: flex;
				align-items: center;

				.text {
					width: 100%;
					position: relative;
					font-size: 28rpx;
					display: flex;
					justify-content: center;
					color: #3c3c3c;

					.block {
						position: absolute;
						width: 0rpx;
						left: 0rpx;
					}
				}

				&.active {
					height: 100rpx;
					background-color: #FFFFFF;

					.text {
						font-size: 30rpx;
						font-weight: 600;
						color: #2d2d2d;

						.block {
							width: 6rpx;
							height: 100%;
							left: 10rpx;
						}
					}
				}
			}
		}

		.right {
			width: 76%;
			left: 24%;
			background-color: #fff;

			.classify {
				width: 100%;
				padding: 0 20rpx 0;
				padding-top: 10rpx;

				// 标题
				.item-title {
					line-height: 86rpx;
					font-size: $uni-font-size-base;
				}

				.item-subclass {
					margin-bottom: 40rpx;
					
					.item-subclass-ice {

						.item-left {
						
							.item-left-image {
								width: 180rpx;
								height: 180rpx;
								border-radius: 10rpx;
							}
						}
						
						.item-right {
							width: 65%;
							height: 180rpx;
						
							.item-right-con {
								height: inherit;
								margin: 10rpx 30rpx 10rpx 20rpx;
						
								.item-right-name {
									font-size: $uni-font-size-base;
								}
						
								.item-right-desc {
									font-size: $uni-font-size-sm;
									color: $uni-text-color-grey;
									margin-top: 10rpx;
								}
						
								.item-right-price {
									width: 57%;
									bottom: 10rpx;
									justify-content: space-between;
						
									.item-price {
						
										.item-price-iden {
											font-size: $uni-font-size-sm;
											font-weight: 500;
										}
						
										.item-original-price {
											font-size: $uni-font-size-sm;
											margin-left: 5rpx;
											font-weight: 500;
											color: $uni-text-color-grey;
											text-decoration: line-through;
										}
									}
								}
							}
						}
					}
				
					.item-operation {
						width: max-content;
						align-items: center;
						bottom: 10rpx;
						right: 50rpx;
					
						.item-number {
							width: 50rpx;
							text-align: center;
							font-size: $uni-font-size-base;
						}
					
						.iconfont {
							font-size: 40rpx;
						}
					}
				}

				.no-data {
					margin: 48rpx 0;
					color: #909399;
					display: flex;
					justify-content: center;
					align-items: center;

					.iconfont {
						margin-right: 20rpx;
						width: 50rpx;
						height: 52rpx;
					}
				}
			}
		}
	}
</style>

---

可访问直接导入BHX使用: 单商家点餐平台 - DCloud 插件市场