点餐列表（※）

代码

页面设计

页面分为四部分

顶部：折扣信息区
左侧：菜单总览
右侧：菜单详细列表栏
底部：购物操作

顶部：

很简单

<!-- 折扣信息区 -->
<view class="discount"><text class="discount-txt">减</text>满50元减10元（在线支付专享）
</view>
<view>

菜单总览
这里我们用到
scroll-view 可滚动视图区域
如图：左右都是可以上下滚动的

因为左右菜单是一体，所以在两个并列的scroll-view的外面还要套上一个view标签

<view><!-- 左侧菜单 --><scroll-view  class="left-menu" scroll-y="true" style="height:100%"><view wx:for="{{listData}}" wx:key="{{index}}" class="left-menu-common {{activeIndex===index?'left-menu-selected':'left-menu-unselect'}}" data-index="{{index}}" bindtap="selectMenu"><view class="list-menu-name">{{item.name}}</view></view></scroll-view><scroll-view>...右侧菜单...</scroll-view>
</view>

listDate里的内容很多

<scroll-view scroll-y="true" style="height:1200rpx;" bindscroll="scroll" scroll-into-view="{{toView}}" class="foods-wrapper" scroll-with-animation="true"><view class="content" id="a{{index}}" wx:for="{{listData}}" wx:key="lists"><view class="list-tab">{{item.name}}</view><view class="content-list" wx:for="{{item.foods}}" wx:for-item="items" wx:key="list" wx:for-index="indexs"><view class="list-image-box"><image class="list-image" mode="widthFix" src="{{items.image_url}}"></image></view><view class="list-name-box"><view>{{items.name}}</view><view class="list-price">¥ {{items.specfoods[0].price}}.00<i class="iconfont icon-jiahao2fill add-icon" data-type="{{index}}" data-index="{{indexs}}" bindtap="addToCart"></i></view></view></view></view></scroll-view>

底部菜单操作栏

<!-- 底部操作菜单 -->
<view class="bottom-operate-menu" wx:if="{{loading}}"><view class="shopping-cart"><view style="padding:5px;display:flex"><i class="iconfont icon-gouwuchefill shopping-cart-icon {{sumMonney!=0?'activity-color':'' }}" bindtap="showCartList"><span class="number-msg" wx:if="{{cartList.length!=0}}">{{cupNumber}}</span></i><view class="shopping-cart-price" wx:if="{{sumMonney==0}}">购物车是空的</view><view class="shopping-cart-price" style="color:white;font-size:18px" wx:if="{{sumMonney!=0}}">¥ {{sumMonney}}.00</view></view></view><view class="submit-btn {{sumMonney!=0?'activity-color-bg':'' }}" bindtap="goBalance"><view class="submit-btn-label {{sumMonney!=0?'color-white':'' }}">选好了</view></view>
</view>

点击购物车弹出

<!-- 点击购物车图标(购物车部分) -->
<view class="drawer-screen" bindtap="showCartList" data-statu="close" wx:if="{{showCart}}"></view>
<view class="cartlist-content" wx:if="{{showCart}}"><view class="cartlist-title"><label class='label-title-bar'><label class="lable-selected">已选商品</label></label><label class="lable-icon-clear" bindtap="clearCartList"><i class="iconfont icon-lajitong"></i><label class="label-clear">清空购物车</label></label></view><scroll-view scroll-y="true" class="{{cartList.length>5?'cart-scroll-list':''}}"><view class="cart-list-box" wx:for="{{cartList}}" wx:key="unique"><view class="listL-info"><view>{{item.name}}</view><view class="list-info-size">{{item.detail}}</view></view><view class="listR-info"><view class="listR-info-con"><label class="activity-color">¥ {{item.sum}}.00</label><i class="iconfont icon-jian icon-li-circle" data-index="{{index}}" bindtap="decNumber"></i>{{item.number}}<i class="iconfont icon-jiahao2fill activity-color font20" data-index="{{index}}" bindtap="addNumber"></i></view></view></view></scroll-view>
</view>

页面样式

/* 折扣信息区 */
.discount{width: 100%;height: 70rpx;line-height: 70rpx;background: #fef9e6;font-size: 28rpx;text-align: center;color: #999;z-index: 111;
}
.discount-txt{color:#fff;padding:5rpx 10rpx;background: red;margin-right: 15rpx;
}
/* 左侧菜单 */
.left-menu{width:160rpx;font-size:28rpx;position: absolute;left:0px;z-index: 10;
}
/* 子菜单公共样式 */
.left-menu-common{height: 100rpx;line-height: 100rpx;text-align: center;
}
/* 子菜单未选中样式 */
.left-menu-unselect{color: #6C6C6C;border-bottom:1px solid #E3E3E3;background:#F9F9F9;
}
/* 子菜单选中样式 */
.left-menu-selected{color: #FF9C35;border-left:3px solid #FF9C35;background:white;
}
/* 右侧菜单 */
.list-tab{margin-left:170rpx;font-size:25rpx;background:#F3F4F6;padding:2px;color:#FF9C35;
}
.content-list{margin-left:160rpx;display:flex;border-bottom: 1px solid #E3E3E3;
}
.list-image-box{width:160rpx;height:72px;text-align: center;
}
.list-image{width:108rpx;margin-top:16rpx;
}
.list-name-box{width:200px;font-size:30rpx;margin-top:20rpx;
}
.list-price{margin-top:20rpx;color:#F05A86
}
.add-icon{float:right;color:#FF9C35;font-size:46rpx;
}
/* 底部菜单操作 */
.bottom-operate-menu{z-index: 1001; position: fixed;bottom: 0px;height:55px;width:100%;display: flex;
}
.shopping-cart{width:75%;background:#353535;height: 100%;
}
.shopping-cart-icon{font-size:40px;color:#87888E;margin-left:10px;position: relative;
}
.activity-color{color:#FF9C35;
}
.submit-btn{height:100%;background:#F7F7F7;width:25%;display:flex;
}
.activity-color-bg{background:#FF9C35;
}
.number-msg{padding: 1px 7px;border-radius:50%;background:red;color:white;font-size:14px;position: absolute;text-align: center;top:0px;right:-5px;
}
.shopping-cart-price{color:#A9A9A9;display:flex;align-items: center;margin-left:10px;font-size:15px
}
.submit-btn-label{color:#A9A9A9;font-size:15px;margin:auto;
}
.color-white{color:white;
}
/* 弹窗 */
.drawer-screen {  width: 100%;  height: 100%;  position: fixed;  top: 0;  left: 0;  z-index: 1000;  background: #000;  opacity: 0.5;  overflow: hidden;
}
/* 购物车内容 */
.cartlist-content{  width: 100%; overflow: hidden;  position: fixed;   z-index: 1001;bottom: 55px;max-height: 250px;
}
.cartlist-title{background:#F0F0F0;height:30px
}
.label-title-bar{color:#878787;font-size:12px;border-left:4px solid #FF9C35;margin-left: 20px;
}
.lable-selected{padding:5px
}
.lable-icon-clear{color:#878787;float: right;margin-right: 10px;
}
.label-clear{color:#878787;font-size:12px;}
.cart-list-box{background:#FFFFFF;display:flex;font-size:13px;border-bottom:1px #E3E3E3 solid
}
.listL-info{width:50%;padding:5px 15px;
}
.listR-info{width:50%;padding:10px;
}
.listR-info-con{float:right
}
.font20{font-size:20px
}
.list-info-size{font-size:10px;color:#B1B1B1;
}
.icon-li-circle{margin-left:15px;font-size:20px
}.cart-scroll-list{height:450rpx;
}/* 满减区域 */
.cut-bar{height:20px; position: fixed;bottom:55px;background:#FFCD9B;width:100%;color:#FFF7EC;font-size:12px;text-align:center;
}

页面逻辑

最近时间有点紧，写的有点糙，我就不一一函数解释了

const fetch = require('../../utils/fetch.js')
Page({data: {activeIndex: 0,toView: "a0",cartList: [],currentType: 0,currentIndex: 0,sumMonney: 0, // 总价钱cupNumber: 0, // 购物车里商品的总数量showCart: false, // 是否展开购物车loading: false,containerH: '',heightArr: [], // 数组:查找到的所有单元的内容高度listData:[],},onLoad: function(options) {// 显示模态对话框wx.showLoading({title: "努力加载中"})// 请求数据fetch('food/list').then((res) => {wx.hideLoading();console.log("请求到的列表信息：");console.log(res.data);this.setData({listData: res.data,loading: true})})},// 点击左侧菜单项选择selectMenu: function(e) {let index = e.currentTarget.dataset.indexconsole.log(index)this.setData({activeIndex: index,toView: "a" + index,})},// 加入购物车addToCart: function(e) {console.log(e)var type = e.currentTarget.dataset.type;var index = e.currentTarget.dataset.index;this.setData({currentType: type,currentIndex: index,});var a = this.data// 声明数组addItemvar addItem = {"name": a.listData[a.currentType].foods[a.currentIndex].name,"price": a.listData[a.currentType].foods[a.currentIndex].specfoods[0].price,"number": 1,"sum": a.listData[a.currentType].foods[a.currentIndex].specfoods[0].price,}var sumMonney = a.sumMonney + a.listData[a.currentType].foods[a.currentIndex].specfoods[0].price;// 把新数组(addItem) push到 原数组cartListvar cartList = this.data.cartList;cartList.push(addItem);this.setData({cartList: cartList,showModalStatus: false,sumMonney: sumMonney,cupNumber: a.cupNumber + 1});},// 展开购物车showCartList: function() {if (this.data.cartList.length != 0) {this.setData({showCart: !this.data.showCart,});}},// 购物车添加商品数量addNumber: function(e) {var index = e.currentTarget.dataset.index;var cartList = this.data.cartList;cartList[index].number++;var sum = this.data.sumMonney + cartList[index].price;cartList[index].sum += cartList[index].price;this.setData({cartList: cartList,sumMonney: sum,cupNumber: this.data.cupNumber + 1})},// 购物车减少商品数量decNumber: function(e) {var index = e.currentTarget.dataset.index;var cartList = this.data.cartList;var sum = this.data.sumMonney - cartList[index].price;cartList[index].sum -= cartList[index].price;cartList[index].number == 1 ? cartList.splice(index, 1) : cartList[index].number--;this.setData({cartList: cartList,sumMonney: sum,showCart: cartList.length == 0 ? false : true,cupNumber: this.data.cupNumber - 1});},// 清空购物车clearCartList: function() {this.setData({cartList: [],showCart: false,sumMonney: 0,cupNumber: 0});},// 点击"选好了"，缓存购物车的值goBalance: function(e) {if (this.data.sumMonney == 0) {return}// 请求接口返回参数{error: 0（错误代码）, order_id: 1}}var order_id = this.data.order_idvar method = "POST"fetch("food/order", {id: 1,num: 1}, method).then(function(res) {if (res.data.error !== 0) {wx.showModal({title: '下单失败',content: '操作失败请重试',})return}// 请求成功后跳转到订单确认页面，把返回的order_id订单编号传过去wx.navigateTo({url: '../order/balance/balance?order_id=' + res.data.order_id})})}
})

小程序点餐系统——点餐列表页（未讲解完）相关推荐

2021最新外卖霸王餐小程序、外系统霸王餐H5/APP程序源码|美团/饿了么霸王餐系统粉丝裂变分销源码分享
2021最新外卖霸王餐小程序.外系统霸王餐H5/APP程序源码|美团/饿了么霸王餐系统粉丝裂变分销源码外卖霸王餐系统小程序/H5/APP源码 2021最新霸王餐小程序霸王餐小程序源码地址成品演 ...
待付款已收货订单php,微信小程序待付款收货订单列表页样式设计制作开发教程(3)...
var wxpay = require('../../utils/pay.js') var app = getApp() Page({ data:{ statusType: ["待付款&qu ...
nodejs+vue微信小程序的饭店外卖点餐平台系统
系统模块分析是对系统的各个模块做出相应的说明以及解释.此系统的模块分别有用户模块.服务端模块和管理端模块这两大基本模块,其中服务端模块包括了首页.菜品信息.菜品咨讯.购物车.我的等:而管理端模块则包括 ...
2021年新微信小程序开发系统源码易客多小程序saas系统扫码点餐小程序支付宝小程序快速生成系统源码源代码
2021年新微信小程序开发系统源码小程序saas系统扫码点餐小程序支付宝小程序快速生成系统产品介绍:易客多多合一小程序快速生成系统是厦门四六开科技有限公司开发的快速开发微信百度支付宝小程序生成系统, ...
基于微信小程序的智能推荐点餐系统
摘要在社会高速发展的过程中,计算机系统在社会生产的过程中大量应用,并且随着相关技术的高速发展,这一过程在不断加速.因此,将智能推荐点餐系统管理与当前的网络相结合,利用计算机构建以微信小程序为基础 ...
java微信小程序的校园外卖点餐平台 uniapp
美食是人类永恒的话题,无论是在古代还是现代人们对美食都有一种非常的热爱在里面,但是随着时代的发展,人们可能没有更多的时间去研究美食,很多时候人们在下班或者放学之后更希望通过网络来进行订餐,为此我开发了 ...
2022外卖霸王餐程序、外系统霸王餐H5/APP程序源码|美团/饿了么霸王餐系统粉丝裂变自带账单在线支付提现等
2022外卖霸王餐程序.外系统霸王餐H5/APP程序源码|美团/饿了么霸王餐系统粉丝裂变自带账单在线支付提现等外卖霸王餐系统程序/H5/APP源码 2022最新霸王餐程序霸王餐程序/H5/A ...
Java后台微信点餐小程序开发最新版笔记，Springboot+Mysql+Freemarker+Bootstrap+微信小程序实现扫码点餐小程序，包含语音提示，微信消息推送，网页管理后台
由于之前的Java后台微信点餐小程序有些知识点过时了,所以今天重新出一版,把里面过时的知识点更新下前五章是部署笔记,后面是知识点的详细讲解,大家可以先看部署笔记,部署起来后,再跟着详细知识学习. 第 ...
计算机毕业设计(59)php小程序毕设作品之点餐外卖小程序系统
基于微信小程序的毕业设计题目(5)php点菜外卖小程序(含开题报告.任务书.中期报告.答辩PPT.论文模板) 项目背景和意义目的:本课题主要目标是设计并能够实现一个基于微信小程序外卖点菜系统,前台用 ...
软件工程毕业设计课题（59）微信小程序毕业设计JAVA外卖点餐小程序系统设计与实现
基于微信小程序的毕业设计题目(5)php点菜外卖小程序(含开题报告.任务书.中期报告.答辩PPT.论文模板) 项目背景和意义目的:本课题主要目标是设计并能够实现一个基于微信小程序外卖点菜系统,前台用 ...

小程序点餐系统——点餐列表页（未讲解完）

文章目录

点餐列表（※）

代码

页面设计

页面样式

页面逻辑

小程序点餐系统——点餐列表页（未讲解完）相关推荐

最新文章

热门文章