微信小程序点餐页面实现完整版

效果
HTML
JS
CSS
- 总结

效果

HTML

<view class="page"><view class="header-input" style="background:#efefef;height:40rpx;"><!-- 搜索条 --><view class="search-input" style="background-color: white;" bindtap="searchNav"><icon size='15' type='search'></icon><view style="padding-top:10rpx;"><text class='search-key'>搜索商品</text></view></view></view><view class="body"><!-- 左侧滚动栏 --><view style='float: left' class='left'><scroll-view scroll-y scroll-with-animation scroll-left="{{scrollLength}}" class='scrollY'style='height: {{winHeight}}px'><view class='all clear'><block wx:key="tabs" wx:for="{{tabs}}"><view bindtap='jumpIndex' data-menuindex='{{index}}' data-ft_id='{{item.ft_id}}'><view class="text-style {{indexId==index?' activeView':''}}"><text class="{{indexId==index?'active1':''}}">{{item.ft_name}}</text></view></view></block></view></scroll-view></view><view class="right" style='height: {{winHeight}}rpx;width:calc(100% - 200rpx);'><scroll-view scroll-y scroll-with-animation scroll-left="{{scrollLength}}" bindscroll="scrollToLeft"scroll-into-view="{{toTitle}}" class='scrollRight' style='height: {{winHeight}}px'><block wx:key="tabs" wx:for="{{tabs}}" wx:for-item="itemft"><view id="view-{{itemft.ft_id}}"><view class="title" id="title-{{itemft.ft_id}}">{{itemft.ft_name}}</view><view class="orders" wx:for="{{tabsList}}" wx:for-item="itemf"><view wx:if="{{itemf.ft_id==itemft.ft_id}}"style="height:180rpx;border-bottom:1rpx solid #F0F0F0;width:96%;margin:20rpx auto;"><image src="{{itemf.food_Img}}" bindtap="toDetail" data-id="{{itemf.f_Cooks_Id}}"data-ft_id="{{itemf.ft_id}}" style="width:160rpx;height:160rpx;float:left;"></image><view style="width:calc(100% - 180rpx);float:right;height:160rpx;"><viewstyle="height:40rpx;line-height:40rpx;margin-top:5rpx;overflow: hidden;white-space: nowrap;text-overflow: ellipsis;">{{itemf.f_Name}}</view><viewstyle="height:40rpx;line-height:40rpx;margin-top:15rpx;font-size:24rpx;color:#c2c2c2;overflow: hidden;white-space: nowrap;text-overflow: ellipsis;">{{itemf.f_Description}}</view><view style="height:40rpx;line-height:40rpx;margin-top:15rpx;"><text style="color:red;">￥{{itemf.f_DPrice}}</text><textstyle="color:#c2c2c2;font-size:24rpx;margin-left:10rpx;text-decoration:line-through;">￥{{itemf.f_Price}}</text><!-- 加号 --><image src="../../../images/add.png" data-id="{{itemf.f_Cooks_Id}}" bindtap="addCart"style="float:right;height:40rpx;width:40rpx;"></image><!-- 数量 --><text style="float:right;height:40rpx;padding:0rpx 10rpx;" class="value"hidden="{{itemf.quantity<=0}}" data-id="{{itemf.f_Cooks_Id}}"data-num="{{itemf.quantity}}">{{itemf.quantity}}</text><!-- 减号 --><image src="../../../images/reduce.png" hidden="{{itemf.quantity<=0}}"data-id="{{itemf.f_Cooks_Id}}" bindtap="delCart" style="float:right;height:40rpx;width:40rpx;"></image></view></view></view></view></view></block></scroll-view></view></view><!-- 底部下单 --><view class="bottom_box"><view class="shop_cartBox" bindtap="cascadeToggle"><image class="shopCart_img" src="../../../images/shopCart.png"></image></view><view class="all_money">总计：{{totalPrice}}元，{{totalNum}}件</view><view class="choose_ok color-block" bindtap="gotoOrder">下单</view></view><!--购物车弹窗  --><view hidden="{{maskFlag}}" class="modal-mask" bindtap="cascadeToggle"></view><view animation="{{animationData}}" class="cart_popup"><view class="shopcart_title"><span class="shopcart_close" bindtap="cascadeToggle">返回</span>购物车<spanclass="shopcart_deleteAll" bindtap="cleanList">清空购物车</span></view><scroll-view scroll-y style="height:250px;margin-top:35px"><block wx:for="{{cartList}}" wx:key=""><view class="cart_cells" wx:if="{{item.quantity > 0}}"><view class="cells_name"style="font-size:28rpx;color:gray;overflow: hidden;white-space: nowrap;text-overflow: ellipsis;"data-index="{{index}}">{{item.f_Name}}</view><view class="cells_price" data-index="{{index}}">{{item.f_DPrice}}</view><view class="price-box"><!-- 减号 --><image src="../../../images/reduce.png" hidden="{{item.quantity<=0}}" data-id="{{item.f_Cooks_Id}}"bindtap="delCart" style="float:right;height:40rpx;width:40rpx;margin-top: 10rpx;"></image><!-- 数量 --><text style="float:right;height:40rpx;padding:0rpx 10rpx;margin-top: 10rpx;" class="value"hidden="{{item.quantity<=0}}" data-id="{{item.f_Cooks_Id}}"data-num="{{item.quantity}}">{{item.quantity}}</text><!-- 加号 --><image src="../../../images/add.png" data-id="{{item.f_Cooks_Id}}" bindtap="addCart"style="float:right;height:40rpx;width:40rpx;margin-top: 10rpx;"></image></view><icon class="shopcart_delete" type="clear" size="18" data-index="{{index}}" data-id="{{item.f_Cooks_Id}}"bindtap="deleteOne" /></view></block></scroll-view></view>
</view>

JS

var config = require('../../../utils/config.js');
var http = require('../../../utils/request.js');
Page({/*** 页面的初始数据*/data: {tabs: [{ft_name: "推荐",ft_id: "a"},{ft_name: "锡纸饭套餐",ft_id: "b"},{ft_name: "锡纸烤饭",ft_id: "c"},{ft_name: "精品冷碟",ft_id: "d"}],tabsList: [{ft_id: "a",f_Cooks_Id:'11',food_Img:'../../../images/meishi.jpg',f_Name:'小炒牛肉',f_Description:'真的很好吃，商家推荐！',f_DPrice:'12',f_Price:'18',quantity:'0',f_Introduction:'小炒牛肉是一道美食，制作原料主要有牛肉、玉兰片、鸡蛋清等，辅料有小葱、江米酒、 味精、酱油、姜、植物油、盐、淀粉等，属于川菜。',si_imgUrl:[{pic_Url:'../../../images/meishi.jpg'},{pic_Url:'../../../images/meishi2.jpg'}]},{ft_id: "a",f_Cooks_Id:'12',food_Img:'../../../images/meishi2.jpg',f_Name:'虎皮凤爪',f_Description:'真的很好吃，商家推荐！',f_DPrice:'12',f_Price:'18',quantity:'0',f_Introduction:'虎皮凤爪是一道色香味俱全的地方名肴，属于粤菜系。皮酥肉嫩，色泽饱满，特别诱人，家常下酒小菜。肉掌丰厚，鲜香味辣，越嚼越香，越嚼越有劲。以鸡爪 花椒、桂皮、八角、少许盐等制作而成。',si_imgUrl:[{pic_Url:'../../../images/meishi2.jpg'},{pic_Url:'../../../images/meishi3.jpg'}]},{ft_id: "b",f_Cooks_Id:'13',food_Img:'../../../images/meishi3.jpg',f_Name:'红烧牛腩',f_Description:'真的很好吃，商家推荐！',f_DPrice:'12',f_Price:'18',quantity:'0',f_Introduction:'红烧牛腩是四川省传统的特色名菜，属于川菜系。主要食材是牛腩。卤汁乳白稠浓，肉质肥嫩，滋味鲜美。营养价值较高，一般人都适合食用。',si_imgUrl:[{pic_Url:'../../../images/meishi3.jpg'},{pic_Url:'../../../images/meishi4.jpg'}]},{ft_id: "b",f_Cooks_Id:'14',food_Img:'../../../images/meishi4.jpg',f_Name:'羊肉串',f_Description:'真的很好吃，商家推荐！',f_DPrice:'12',f_Price:'18',quantity:'0',f_Introduction:'羊肉串是指新鲜的羊肉用竹签或钢签穿成串后烧烤制成的菜品，是一种比较常见的烧烤类菜品。',si_imgUrl:[{pic_Url:'../../../images/meishi4.jpg'},{pic_Url:'../../../images/meishi5.jpg'}]},{ft_id: "c",f_Cooks_Id:'15',food_Img:'../../../images/meishi.jpg',f_Name:'小炒牛肉',f_Description:'真的很好吃，商家推荐！',f_DPrice:'12',f_Price:'18',quantity:'0',f_Introduction:'小炒牛肉是一道美食，制作原料主要有牛肉、玉兰片、鸡蛋清等，辅料有小葱、江米酒、 味精、酱油、姜、植物油、盐、淀粉等，属于川菜。',si_imgUrl:[{pic_Url:'../../../images/meishi.jpg'},{pic_Url:'../../../images/meishi2.jpg'}]},{ft_id: "c",f_Cooks_Id:'15',food_Img:'../../../images/meishi2.jpg',f_Name:'虎皮凤爪',f_Description:'真的很好吃，商家推荐！',f_DPrice:'12',f_Price:'18',quantity:'0',f_Introduction:'虎皮凤爪是一道色香味俱全的地方名肴，属于粤菜系。皮酥肉嫩，色泽饱满，特别诱人，家常下酒小菜。肉掌丰厚，鲜香味辣，越嚼越香，越嚼越有劲。以鸡爪 花椒、桂皮、八角、少许盐等制作而成。',si_imgUrl:[{pic_Url:'../../../images/meishi2.jpg'},{pic_Url:'../../../images/meishi3.jpg'}]},{ft_id: "d",f_Cooks_Id:'16',food_Img:'../../../images/meishi3.jpg',f_Name:'红烧牛腩',f_Description:'真的很好吃，商家推荐！',f_DPrice:'12',f_Price:'18',quantity:'0',f_Introduction:'红烧牛腩是四川省传统的特色名菜，属于川菜系。主要食材是牛腩。卤汁乳白稠浓，肉质肥嫩，滋味鲜美。营养价值较高，一般人都适合食用。',si_imgUrl:[{pic_Url:'../../../images/meishi3.jpg'},{pic_Url:'../../../images/meishi4.jpg'}]},{ft_id: "d",f_Cooks_Id:'17',food_Img:'../../../images/meishi4.jpg',f_Name:'羊肉串',f_Description:'真的很好吃，商家推荐！',f_DPrice:'12',f_Price:'18',quantity:'0',f_Introduction:'羊肉串是指新鲜的羊肉用竹签或钢签穿成串后烧烤制成的菜品，是一种比较常见的烧烤类菜品。',si_imgUrl:[{pic_Url:'../../../images/meishi4.jpg'},{pic_Url:'../../../images/meishi5.jpg'}]}],indexId: 0,toTitle: "title-0",scrollTop: 0,top: [],totalPrice: 0, //选中商品总价格totalNum: 0, //选中商品数量cartList: [], //选中商品列表// 购物车动画animationData: {},animationMask: {},maskVisual: "hidden",maskFlag: true,},// 左侧点击事件jumpIndex(e) {let index = e.currentTarget.dataset.menuindex;let ft_id = e.currentTarget.dataset.ft_id;let that = thisthat.setData({indexId: index,toTitle: "title-" + ft_id});},scrollToLeft(res) {console.log("scrollToLeft-res:" + JSON.stringify(res) + JSON.stringify(this.data.top));this.setData({scrollTop: res.detail.scrollTop})var length = this.data.top.length;for (var i = 0; i < this.data.top.length; i++) {if (this.data.top[i] - this.data.top[0] <= this.data.scrollTop && (i < length - 1 && this.data.top[i + 1] - this.data.top[0] > this.data.scrollTop)) {if (this.data.indexId != i) {this.setData({indexId: i,});}}}},onLoad: async function (options) {console.log(this.data.tabsList)var that = this;wx.showLoading({mask: true,title: '加载中…',})// //获取分类// await GetFoodType(that)// //获取菜品// await GetFoodCook(that)wx.hideLoading()console.log(that.data.tabsList)//赋值wx.getSystemInfo({success: function (res) {that.setData({winHeight: res.windowHeight - 100});var top2 = new Array();for (var i = 0; i < that.data.tabs.length; i++) {wx.createSelectorQuery().select('#view-' + that.data.tabs[i].ft_id).boundingClientRect(function (rect) {var isTop = Number(rect.top);top2.push(isTop);console.log("view-c:" + JSON.stringify(rect));}).exec();}that.setData({top: top2});}});this.onShow()},onShow: function (options) {var that = this;// 获取购物车缓存数据var arr = wx.getStorageSync('cart') || [];// 进入页面后判断购物车是否有数据，如果有，将菜单与购物车quantity数据统一if (arr.length > 0) {for (var j in that.data.tabsList) {for (var i in arr) {if (that.data.tabsList[j].f_Cooks_Id == arr[i].f_Cooks_Id) {that.data.tabsList[j].quantity = arr[i].quantity;break} else {that.data.tabsList[j].quantity = 0;}}}} else {for (var j in that.data.tabsList) {that.data.tabsList[j].quantity = 0;}}// 进入页面计算购物车总价、总数var totalPrice = 0;var totalNum = 0;if (arr.length > 0) {for (var i in arr) {totalPrice += arr[i].f_DPrice * arr[i].quantity;totalNum += Number(arr[i].quantity);}}// 赋值数据this.setData({cartList: arr,tabsList: that.data.tabsList,totalPrice: totalPrice.toFixed(2),totalNum: totalNum})},// 购物车增加数量addCart: function (e) {var id = e.currentTarget.dataset.id;var arr = wx.getStorageSync('cart') || [];var f = false;for (var i in this.data.tabsList) { // 遍历菜单找到被点击的菜品，数量加1if (this.data.tabsList[i].f_Cooks_Id == id) {this.data.tabsList[i].quantity += 1;if (arr.length > 0) {for (var j in arr) { // 遍历购物车找到被点击的菜品，数量加1if (arr[j].f_Cooks_Id == id) {arr[j].quantity += 1;f = true;try {wx.setStorageSync('cart', arr)} catch (e) {console.log(e)}break;}}if (!f) {arr.push(this.data.tabsList[i]);}} else {arr.push(this.data.tabsList[i]);}try {wx.setStorageSync('cart', arr)} catch (e) {console.log(e)}break;}}this.setData({cartList: arr,tabsList: this.data.tabsList})this.getTotalPrice();},// 购物车减少数量delCart: function (e) {var id = e.currentTarget.dataset.id;var arr = wx.getStorageSync('cart') || [];for (var i in this.data.tabsList) {if (this.data.tabsList[i].f_Cooks_Id == id) {this.data.tabsList[i].quantity -= 1;if (this.data.tabsList[i].quantity <= 0) {this.data.tabsList[i].quantity = 0;}if (arr.length > 0) {for (var j in arr) {if (arr[j].f_Cooks_Id == id) {arr[j].quantity -= 1;if (arr[j].quantity <= 0) {this.removeByValue(arr, id) //77}if (arr.length <= 0) {this.setData({tabsList: this.data.tabsList,cartList: [],totalNum: 0,totalPrice: 0,})this.cascadeDismiss()}try {wx.setStorageSync('cart', arr)} catch (e) {console.log(e)}}}}}}this.setData({cartList: arr,tabsList: this.data.tabsList})this.getTotalPrice();},// 定义根据id删除数组的方法removeByValue: function (array, val) {for (var i = 0; i < array.length; i++) {if (array[i].f_Cooks_Id == val) {array.splice(i, 1);break;}}},// 获取购物车总价、总数getTotalPrice: function () {var cartList = this.data.cartList; // 获取购物车列表var totalP = 0;var totalN = 0for (var i in cartList) { // 循环列表得到每个数据totalP += cartList[i].quantity * cartList[i].f_DPrice; // 所有价格加起来     totalN += cartList[i].quantity}this.setData({ // 最后赋值到data中渲染到页面cartList: cartList,totalNum: totalN,totalPrice: totalP.toFixed(2)});},// 清空购物车cleanList: function (e) {for (var t in this.data.tabs) {for (var j in this.data.tabsList) {this.data.tabsList[j].quantity = 0;}}try {wx.setStorageSync('cart', "")} catch (e) {console.log(e)}this.setData({tabsList: this.data.tabsList,cartList: [],cartFlag: false,totalNum: 0,totalPrice: 0,})this.cascadeDismiss()},//删除购物车单项deleteOne: function (e) {var id = e.currentTarget.dataset.id;var index = e.currentTarget.dataset.index;var arr = wx.getStorageSync('cart')for (var i in this.data.tabsList) {if (this.data.tabsList[i].f_Cooks_Id == id) {this.data.tabsList[i].quantity = 0;}}arr.splice(index, 1);if (arr.length <= 0) {this.setData({tabsList: this.data.tabsList,cartList: [],cartFlag: false,totalNum: 0,totalPrice: 0,})this.cascadeDismiss()}try {wx.setStorageSync('cart', arr)} catch (e) {console.log(e)}this.setData({cartList: arr,tabsList: this.data.tabsList})this.getTotalPrice()},//切换购物车开与关cascadeToggle: function () {var that = this;var arr = this.data.cartListif (arr.length > 0) {if (that.data.maskVisual == "hidden") {that.cascadePopup()} else {that.cascadeDismiss()}} else {that.cascadeDismiss()}},// 打开购物车方法cascadePopup: function () {var that = this;// 购物车打开动画var animation = wx.createAnimation({duration: 200,timingFunction: 'ease-in-out',delay: 0});that.animation = animation;animation.translate(0, -285).step();that.setData({animationData: that.animation.export(),});// 遮罩渐变动画var animationMask = wx.createAnimation({duration: 200,timingFunction: 'linear',});that.animationMask = animationMask;animationMask.opacity(0.8).step();that.setData({animationMask: that.animationMask.export(),maskVisual: "show",maskFlag: false,});},// 关闭购物车方法cascadeDismiss: function () {var that = this// 购物车关闭动画that.animation.translate(0, 285).step();that.setData({animationData: that.animation.export()});// 遮罩渐变动画that.animationMask.opacity(0).step();that.setData({animationMask: that.animationMask.export(),});// 隐藏遮罩层that.setData({maskVisual: "hidden",maskFlag: true});},// 跳转确认订单页面gotoOrder: function () {wx.navigateTo({url: '../confirmOrder/confirmOrder'})},//跳转搜索searchNav: function () {wx.navigateTo({url: '/pages/search/search'});},toDetail: function (e) {var id = e.currentTarget.dataset.id;var goodDetail = [];for (var i = 0; i < this.data.tabsList.length; i++) {if (this.data.tabsList[i].f_Cooks_Id == id) {goodDetail.push(this.data.tabsList[i]);}}wx.navigateTo({url: '../../category/goodDetail/goodDetail?goodDetail=' + JSON.stringify(goodDetail),})},gotoOrder: function () {var count=wx.getStorageSync('cart').lengthconsole.log(count)if(count<=0){wx.showToast({title: '请先选择菜品',icon:"none"})return}wx.navigateTo({url: '../../category/previewOrder/previewOrder',})}
})
//获取商品信息
function GetFoodCook(_this) {var that = _thisreturn new Promise((resove, reject) => {//获取分类let data = {CookName:""}let header = {}http.request(config.GetFoodCook_WXList, data, 'POST', header).then(function (res) {var e = resif (e.meta.Code == 200) {that.setData({tabsList: e.data.foodCookInfo == null ? [] : e.data.foodCookInfo})resove(true);} else {wx.showToast({title: res.Msg,duration: 2000,icon: "none",mask: true})reject(false)}}).catch((res) => {wx.showToast({title: res.Msg,duration: 2000,icon: "none",mask: true})reject(false)})})
}
//获取商品类别
function GetFoodType(_this) {var that = _thisreturn new Promise((resove, reject) => {let data = {pagenum: 1,pagesize: 100}let header = {}http.request(config.GetFoodTypeList, data, 'POST', header).then(function (res) {var e = resif (e.meta.Code == 200) {that.setData({tabs: e.data.foodTypeInfo == null ? [] : e.data.foodTypeInfo})resove(true);} else {wx.showToast({title: res.Msg,duration: 2000,icon: "none",mask: true})reject(false)}}).catch((res) => {wx.showToast({title: res.Msg,duration: 2000,icon: "none",mask: true})reject(false)})})
}

CSS

/* pages/catering.wxss /
.page {
display: flex;
flex-direction: column;
width: 100%;
/ background: #F7F4F8; /
background-image: linear-gradient(90deg, #FCFCFC 0%, #FCFCFC 99%);
/ padding-top: 16px; */
}

.under_line {
width: 100%;
border-top: 1rpx solid #efefef;
}

::-webkit-scrollbar {
width: 0;
height: 0;
color: transparent;
}

.body {
margin-top: 100rpx;
display: flex;
width: 100%;
}

.scrollY {
width: 200rpx;
/* position: fixed;
left: 0;
top: 0; /
background: #F5F5F5;
/ border-right: 1rpx solid #efefef; */
}

/* scrollRight{
flex: 1;
} /
.right {
flex: 1;
/ height: 200rpx; /
/ background: #00FF00; */
}

.left {
border-right: 1rpx solid #efefef;
}

.text-style {
width: 200rpx;
height: 100rpx;
line-height: 100rpx;
text-align: center;
font-size: 28rpx;
font-family: PingFangSC-Semibold;
color: rgba(51, 51, 51, 1);
}

.active1 {
color: #FB4C22;
/* background: #FFF; */
}

.activeView {
background: #FFF;
}

.active {
display: block;
width: 50rpx;
height: 6rpx;
background: #FB4C22;
position: relative;
left: 75rpx;
bottom: 30rpx;
}

.title {
margin-left: 32rpx;
padding-top: 16rpx;
font-size: 28rpx;
/* padding-bottom: 16rpx; */
}

/*底部 */

.bottom_box {
width: 100%;
height: 80rpx;
position: fixed;
left: 0;
bottom: 0px;
z-index: 100;
background-color: #fff;
}

.shop_cartBox {
width: 100rpx;
height: 100rpx;
background-color: #FB4C22;
border-radius: 50%;
position: absolute;
top: -40rpx;
left: 20rpx;
}

.shopCart_img {
width: 50rpx;
height: 50rpx;
position: absolute;
top: 24rpx;
left: 24rpx;
}

.all_money {
position: absolute;
width: 50%;
height: 80rpx;
top: 0;
left: 25%;
line-height: 80rpx;
text-align: center;
font-size: 32rpx;
}

.choose_ok {
position: absolute;
width: 25%;
height: 80rpx;
top: 0;
right: 0;
line-height: 80rpx;
text-align: center;
color: #fff;
font-size: 40rpx;
}

.fontP {
color: #FB4C22;
font-size: 40rpx;
}
.color-block{
color: #fff;
font-size: 35rpx;
background: #FB4C22;
}

/*弹窗遮罩层 */

.modal-mask {
position: fixed;
top: 0;
left: 0;
width: 100%;
height: 100%;
opacity:0.6;
background: #000;
z-index: 666;
}

/*购物车弹窗 */

.cart_popup {
width: 100%;
height: 285px;
background: #fff;
position: fixed;
z-index: 999;
left: 0;
bottom: -285px;
overflow: auto;
}

.shopcart_title {
width: 100%;
height: 70rpx;
line-height: 80rpx;
text-align: center;
position: fixed;
left: 0;
background-color: #FB4C22;
color: #fff;
}

/*关闭按钮 */

.shopcart_close {
position: absolute;
left: 30rpx;
font-size: 28rpx;
}

/*清空购物车 */

.shopcart_deleteAll {
position: absolute;
right: 30rpx;
font-size: 28rpx;
}

.margin_r {
margin-right: 30rpx;
}

/*购物车列表 */

.cart_cells {
width: 100%;
height: 98rpx;
position: relative;
border-bottom: 1px #dedede solid;
}

.cells_name {
width: 40%;
height: 50%;
position: absolute;
top: 0;
left: 0;
font-size: 14px;
margin-left: 40rpx;
padding-top: 10rpx;
}

.cells_price {
width: 60%;
height: 50%;
position: absolute;
top: 50rpx;
left: 0;
margin-left: 40rpx;
font-size: 14px;
padding-bottom: 10rpx;
color: #FB4C22;
}

.price-box {
padding-right: 20rpx;
display: flex;
flex-direction: row;
justify-content: space-between;
width: 20%;
position: absolute;
left: 60%;
top: 20rpx;
}

/*删除购物车某项 */

.shopcart_delete {
position: absolute;
right: 40rpx;
top: 32rpx;
}

/*我的订单 */

.my_menu {
width: 100%;
overflow: auto;
padding-top: 140rpx;
background: #fff;
}

.weui_titleBox {
height: 100rpx;
line-height: 100rpx;
padding: 0 30rpx;
font-size: 32rpx;
color: #000;
}

.weui_titleBox::after {
border-bottom: none;
}

.weui_orderBox {
height: 100rpx;
line-height: 100rpx;
padding: 0 30rpx;
vertical-align: sub;
border-top: 1rpx solid #e5e5e5;
}

.weui_orderBox::before {
border-top: none;
}

.bd_radius {
border-radius: 50%;
}

.order_img {
vertical-align: sub;
}

/*合计 */

.order_sum {
height: 100rpx;
padding: 0 30rpx;
line-height: 100rpx;
color: #000;
font-size: 32rpx;
overflow: hidden;
border-bottom: 1rpx solid #e5e5e5;
}

.order_sum::after {
border-bottom: none;
}

.order_sumMoney {
float: left;
}

.order_Money {
color: #FB4C22;
}

.order_payd {
color: #01bf05;
float: right;
vertical-align: sub;
}

.paydIcon {
vertical-align: sub;
font-size: 48rpx;
margin-right: 40rpx;
}

/*价格，份数 */

.order_price {
font-size: 28rpx;
}

.fenxi {
width: 100%;
height: 10rpx;
background: #ddd;
}

总结

这是一个完整的点餐页面，下载修改接口即可使用。如果对你有帮助希望能给个关注，我会继续分享更多的内容！