devbox
小蓝xlanll
这个屌丝很懒，什么也没留下！
关注作者
热门标签
热门文章
当前位置:   article > 正文

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

作者：小蓝xlanll | 2024-04-10 11:56:53

赞

踩

uniapp点餐小程序源码
  • 可以三端打包，移动网页、微信小程序、app

部分代码

  1. <template>
  2. 	<view class="content">
  3. 		<!-- 分类导航 -->
  4. 		<view class="classify-list">
  5. 			<!-- 左侧分类导航 -->
  6. 			<scroll-view scroll-y="true" class="left">
  7. 				<view class="row" v-for="(item,index) in classifyList" :key="index"
  8. 					:class="[index === showClassifyIndex ? 'active' : '']" @tap="tapClassify(index)">
  9. 					<view class="text">
  10. 						<view class="block" :class="'bg-' + themeColor.name"></view>
  11. 						{{item.title}}
  12. 					</view>
  13. 				</view>
  14. 			</scroll-view>
  15. 			<!-- 右侧分类导航 -->
  16. 			<scroll-view scroll-y="true" class="right">
  17. 				<view v-for="(item, index) in classifyList" :key="index">
  18. 					<view v-if="index === showClassifyIndex" class="classify">
  19. 						<view class="" v-if="item.goods_list.length !== 0">
  20. 							<!-- 标题 -->
  21. 							<view class="item-title unify-weight">{{item.title}}</view>
  22.  
  23. 							<view class="item-subclass unify-relative"
  24. 								v-for="(item2,index2) in item.goods_list" :key="index2">
  25. 								<view class="item-subclass-ice unify-flex" @tap="tapGoodsDetails(item2)">
  26. 									<view class="item-left">
  27. 										<image class="item-left-image" :src="item2.goods_cover || errorImage" mode="">
  28. 										</image>
  29. 									</view>
  30. 									<view class="item-right">
  31. 										<view class="item-right-con">
  32. 											<view class="item-right-name unify-weight unify-font-size-line-astrict">
  33. 												{{item2.goods_name}}
  34. 											</view>
  35. 											<view class="item-right-desc unify-font-size-two-line-astrict">
  36. 												{{item2.goods_desc}}
  37. 											</view>
  38. 											<view class="item-right-price unify-absolute unify-flex">
  39. 												<view class="item-price unify-weight" :class="'tf-' + themeColor.name">
  40. 													<text class="item-price-iden">{{moneySymbol}}</text>
  41. 													{{item2.goods_price}}
  42. 													<text
  43. 														class="item-original-price">{{moneySymbol}}{{item2.goods_original_price}}</text>
  44. 												</view>
  45. 											</view>
  46. 										</view>
  47. 									</view>
  48. 								</view>
  49. 								
  50. 								<uni-goods-add-subtract :data="item2" :index="index" :index2="index2" :absolute="true" bottom="10rpx" right="40rpx" @minus="tapNumber" @add="tapNumber"></uni-goods-add-subtract>
  51. 							</view>
  52.  
  53. 							<!-- 间隔 -->
  54. 							<view style="height: 60px" v-if="goodsNum > 0"></view>
  55. 						</view>
  56. 						<view class="no-data" v-else>
  57. 							<image class="iconfont" :src="iconRight" mode="widthFix"></image>
  58. 							暂无分类
  59. 						</view>
  60. 					</view>
  61. 				</view>
  62. 			</scroll-view>
  63. 		</view>
  64. 		
  65. 		<uni-goods-add-subtract-animation :show="isCartIcon" :cartItemElc="cartItemElc"></uni-goods-add-subtract-animation>
  66.  
  67. 		<!-- 购物车 -->
  68. 		<uni-shopping-trolley ref="uniShoppingTrolley" :show="show" :cartItemElc="cartItemElc" :isCartIcon="isCartIcon"
  69. 			:num="goodsNum" :totalPrice="totalPrice" :isMinus="isMinus" @updateIsCartIcon="updateIsCartIcon" @updateCartItemElc="updateCartItemElc">
  70. 		</uni-shopping-trolley>
  71. 	</view>
  72. </template>
  73.  
  74. <script>
  75. 	export default {
  76. 		data() {
  77. 			return {
  78. 				windowHeight: this.windowHeight,	// 屏幕高度
  79. 				statusBarHeight: this.statusBarHeight,	// 状态栏
  80. 				errorImage: this.$mAssetsPath.errorImage,
  81. 				iconRight: this.$mAssetsPath.iconRight,
  82. 				moneySymbol: this.$mConstDataConfig.moneySymbol,
  83. 				appName: this.$mSettingConfig.appName,
  84. 				show: false, // 购物车是否显示
  85. 				isCartIcon: false, // 动画标
  86. 				cartItemElc: { // 坐标
  87. 					left: 0,
  88. 					top: 0
  89. 				},
  90. 				goodsNum: 0, // 购物车数量
  91. 				totalPrice: 0, // 商品总价
  92. 				isMinus: 0, // 判断是否减操作
  93. 				showClassifyIndex: 0, // 一级菜单高亮显示序号
  94. 				classifyList: [{
  95. 						title: "招聘推荐",
  96. 						goods_list: [{
  97. 							goods_name: '新鲜盐焗鸡新鲜盐焗鸡新鲜盐焗鸡新鲜盐焗鸡新鲜盐焗鸡',
  98. 							goods_cover: '/static/mall/goods2.png',
  99. 							goods_desc: '盐水鸡是一道由鸡、辣椒、盐水等做成的菜肴，冷热均可食，味咸辣。可用于虚劳瘦弱、骨蒸潮热、脾虚泄泻、消渴、崩漏、赤白带、遗精等',
  100. 							goods_price: '19',
  101. 							goods_original_price: '29',
  102. 							goods_number: 0,
  103. 							goods_image: ["/static/mall/goods1.png", "/static/mall/goods2.png"],
  104. 						}, {
  105. 							goods_name: '新鲜盐焗鸡',
  106. 							goods_cover: '',
  107. 							goods_desc: '盐水鸡是一道由鸡、辣椒、盐水等做成的菜肴，冷热均可食，味咸辣。可用于虚劳瘦弱、骨蒸潮热、脾虚泄泻、消渴、崩漏、赤白带、遗精等',
  108. 							goods_price: '19',
  109. 							goods_original_price: '29',
  110. 							goods_number: 0,
  111. 							goods_image: ["/static/mall/goods1.png", "/static/mall/goods2.png"],
  112. 						}, {
  113. 							goods_name: '新鲜盐焗鸡',
  114. 							goods_cover: '/static/mall/goods2.png',
  115. 							goods_desc: '盐水鸡是一道由鸡、辣椒、盐水等做成的菜肴，冷热均可食，味咸辣。可用于虚劳瘦弱、骨蒸潮热、脾虚泄泻、消渴、崩漏、赤白带、遗精等',
  116. 							goods_price: '19',
  117. 							goods_original_price: '29',
  118. 							goods_number: 0,
  119. 							goods_image: ["/static/mall/goods1.png", "/static/mall/goods2.png"],
  120. 						}, {
  121. 							goods_name: '新鲜盐焗鸡',
  122. 							goods_cover: '/static/mall/goods2.png',
  123. 							goods_desc: '盐水鸡是一道由鸡、辣椒、盐水等做成的菜肴，冷热均可食，味咸辣。可用于虚劳瘦弱、骨蒸潮热、脾虚泄泻、消渴、崩漏、赤白带、遗精等',
  124. 							goods_price: '19',
  125. 							goods_original_price: '29',
  126. 							goods_number: 0,
  127. 							goods_image: ["/static/mall/goods1.png", "/static/mall/goods2.png"],
  128. 						}, {
  129. 							goods_name: '新鲜盐焗鸡',
  130. 							goods_cover: '/static/mall/goods2.png',
  131. 							goods_desc: '盐水鸡是一道由鸡、辣椒、盐水等做成的菜肴，冷热均可食，味咸辣。可用于虚劳瘦弱、骨蒸潮热、脾虚泄泻、消渴、崩漏、赤白带、遗精等',
  132. 							goods_price: '19',
  133. 							goods_original_price: '29',
  134. 							goods_number: 0,
  135. 							goods_image: ["/static/mall/goods1.png", "/static/mall/goods2.png"],
  136. 						}]
  137. 					},
  138. 					{
  139. 						title: "肉丸类",
  140. 						goods_list: []
  141. 					}
  142. 				],
  143. 			}
  144. 		},
  145. 		onLoad() {
  146. 			
  147. 		},
  148. 		methods: {
  149. 			// 商品详情
  150. 			tapGoodsDetails(e) {
  151. 				this.$openPage({
  152. 					name: 'goodsDetails',
  153. 					query: {
  154. 						data: e
  155. 					}
  156. 				})
  157. 			},
  158.  
  159. 			// 点击分类
  160. 			tapClassify(e) {
  161. 				this.showClassifyIndex = e;
  162. 			},
  163.  
  164. 			// 点击商品数量加减 1减  2加
  165. 			tapNumber(e, type, index, index2) {
  166. 				let classifyList = this.classifyList;
  167. 				this.isMinus = type; // 判断是否减操作  1减  2加
  168. 				switch (type) {
  169. 					case 1:
  170. 						classifyList[index].goods_list[index2].goods_number--
  171. 						this.goodsNum--
  172. 						this.countTotalPrice() // 回调计算总价
  173. 						if (this.goodsNum === 0) {
  174. 							this.show = false;
  175. 							setTimeout(() => {
  176. 								this.$refs.uniShoppingTrolley.isCartShow() // 回调组件isCartShow方法
  177. 							}, 20)
  178. 						}
  179. 						break
  180. 					case 2:
  181. 						this.show = true;
  182. 						classifyList[index].goods_list[index2].goods_number++
  183. 						this.cartItemElc.left = e.touches[0].pageX - 15; // 自由调动位置
  184. 						this.cartItemElc.top = e.touches[0].pageY - 40;
  185. 						setTimeout(() => {
  186. 							this.goodsNum++
  187. 							this.countTotalPrice() // 回调计算总价
  188. 							this.$refs.uniShoppingTrolley.isCartShow() // 回调组件isCartShow方法
  189. 						}, 20)
  190. 						break
  191. 					default:
  192. 						break
  193. 				}
  194. 				this.classifyList = classifyList;
  195. 			},
  196.  
  197. 			// 计算商品总价
  198. 			countTotalPrice() {
  199. 				let total = 0,
  200. 					classifyList = this.classifyList;
  201. 				classifyList.forEach((item, index) => {
  202. 					item.goods_list.forEach((item2, index2) => {
  203. 						total += Number(item2.goods_price) * item2.goods_number;
  204. 					})
  205. 				})
  206. 				this.totalPrice = total;
  207. 			},
  208.  
  209. 			// 更新动画标状态  默认false
  210. 			updateIsCartIcon(e) {
  211. 				this.isCartIcon = e;
  212. 			},
  213. 			
  214. 			// 更新cartItemElc坐标移动
  215. 			updateCartItemElc(e) {
  216. 				this.cartItemElc = e;
  217. 			}
  218. 		}
  219. 	}
  220. </script>
  221.  
  222. <style lang="scss" scoped>
  223. 	/* 模块分类 */
  224. 	.classify-list {
  225. 		width: 100%;
  226. 		height: 100%;
  227. 		background-color: #FFFFFF;
  228. 		display: flex;
  229. 		position: absolute;
  230. 		padding-top: 88rpx;
  231. 		/* #ifdef APP-PLUS */
  232. 		padding-top: calc(88rpx + var(--status-bar-height));
  233. 		/* #endif */
  234. 		bottom: 0;
  235.  
  236. 		.left {
  237. 			width: 24%;
  238. 			left: 0rpx;
  239. 			background-color: #f8f8f8;
  240.  
  241. 			.row {
  242. 				width: 100%;
  243. 				height: 90rpx;
  244. 				display: flex;
  245. 				align-items: center;
  246.  
  247. 				.text {
  248. 					width: 100%;
  249. 					position: relative;
  250. 					font-size: 28rpx;
  251. 					display: flex;
  252. 					justify-content: center;
  253. 					color: #3c3c3c;
  254.  
  255. 					.block {
  256. 						position: absolute;
  257. 						width: 0rpx;
  258. 						left: 0rpx;
  259. 					}
  260. 				}
  261.  
  262. 				&.active {
  263. 					height: 100rpx;
  264. 					background-color: #FFFFFF;
  265.  
  266. 					.text {
  267. 						font-size: 30rpx;
  268. 						font-weight: 600;
  269. 						color: #2d2d2d;
  270.  
  271. 						.block {
  272. 							width: 6rpx;
  273. 							height: 100%;
  274. 							left: 10rpx;
  275. 						}
  276. 					}
  277. 				}
  278. 			}
  279. 		}
  280.  
  281. 		.right {
  282. 			width: 76%;
  283. 			left: 24%;
  284. 			background-color: #fff;
  285.  
  286. 			.classify {
  287. 				width: 100%;
  288. 				padding: 0 20rpx 0;
  289. 				padding-top: 10rpx;
  290.  
  291. 				// 标题
  292. 				.item-title {
  293. 					line-height: 86rpx;
  294. 					font-size: $uni-font-size-base;
  295. 				}
  296.  
  297. 				.item-subclass {
  298. 					margin-bottom: 40rpx;
  299. 					
  300. 					.item-subclass-ice {
  301.  
  302. 						.item-left {
  303. 						
  304. 							.item-left-image {
  305. 								width: 180rpx;
  306. 								height: 180rpx;
  307. 								border-radius: 10rpx;
  308. 							}
  309. 						}
  310. 						
  311. 						.item-right {
  312. 							width: 65%;
  313. 							height: 180rpx;
  314. 						
  315. 							.item-right-con {
  316. 								height: inherit;
  317. 								margin: 10rpx 30rpx 10rpx 20rpx;
  318. 						
  319. 								.item-right-name {
  320. 									font-size: $uni-font-size-base;
  321. 								}
  322. 						
  323. 								.item-right-desc {
  324. 									font-size: $uni-font-size-sm;
  325. 									color: $uni-text-color-grey;
  326. 									margin-top: 10rpx;
  327. 								}
  328. 						
  329. 								.item-right-price {
  330. 									width: 57%;
  331. 									bottom: 10rpx;
  332. 									justify-content: space-between;
  333. 						
  334. 									.item-price {
  335. 						
  336. 										.item-price-iden {
  337. 											font-size: $uni-font-size-sm;
  338. 											font-weight: 500;
  339. 										}
  340. 						
  341. 										.item-original-price {
  342. 											font-size: $uni-font-size-sm;
  343. 											margin-left: 5rpx;
  344. 											font-weight: 500;
  345. 											color: $uni-text-color-grey;
  346. 											text-decoration: line-through;
  347. 										}
  348. 									}
  349. 								}
  350. 							}
  351. 						}
  352. 					}
  353. 				
  354. 					.item-operation {
  355. 						width: max-content;
  356. 						align-items: center;
  357. 						bottom: 10rpx;
  358. 						right: 50rpx;
  359. 					
  360. 						.item-number {
  361. 							width: 50rpx;
  362. 							text-align: center;
  363. 							font-size: $uni-font-size-base;
  364. 						}
  365. 					
  366. 						.iconfont {
  367. 							font-size: 40rpx;
  368. 						}
  369. 					}
  370. 				}
  371.  
  372. 				.no-data {
  373. 					margin: 48rpx 0;
  374. 					color: #909399;
  375. 					display: flex;
  376. 					justify-content: center;
  377. 					align-items: center;
  378.  
  379. 					.iconfont {
  380. 						margin-right: 20rpx;
  381. 						width: 50rpx;
  382. 						height: 52rpx;
  383. 					}
  384. 				}
  385. 			}
  386. 		}
  387. 	}
  388. </style>

watermark,type_d3F5LXplbmhlaQ,shadow_50,text_Q1NETiBA6Z2S6KGr5oqY5omH,size_12,color_FFFFFF,t_70,g_se,x_16watermark,type_d3F5LXplbmhlaQ,shadow_50,text_Q1NETiBA6Z2S6KGr5oqY5omH,size_12,color_FFFFFF,t_70,g_se,x_16watermark,type_d3F5LXplbmhlaQ,shadow_50,text_Q1NETiBA6Z2S6KGr5oqY5omH,size_12,color_FFFFFF,t_70,g_se,x_16

watermark,type_d3F5LXplbmhlaQ,shadow_50,text_Q1NETiBA6Z2S6KGr5oqY5omH,size_12,color_FFFFFF,t_70,g_se,x_16watermark,type_d3F5LXplbmhlaQ,shadow_50,text_Q1NETiBA6Z2S6KGr5oqY5omH,size_12,color_FFFFFF,t_70,g_se,x_16watermark,type_d3F5LXplbmhlaQ,shadow_50,text_Q1NETiBA6Z2S6KGr5oqY5omH,size_12,color_FFFFFF,t_70,g_se,x_16

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

声明：本文内容由网友自发贡献，不代表【wpsshop博客】立场，版权归原作者所有，本站不承担相应法律责任。如您发现有侵权的内容，请联系我们。转载请注明出处：https://www.wpsshop.cn/w/小蓝xlanll/article/detail/398548
推荐阅读
相关标签

Copyright © 2003-2013 www.wpsshop.cn 版权所有，并保留所有权利。

  

闽ICP备14008679号