微信小程序点餐页面实现完整版_丿兔子先生丶_微信小程序点餐页面

irpas 02-07 5607

微信小程序点餐页面实现完整版效果HTMLJSCSS总结

效果

HTML  <view class="page"> <view class="header-input" style="background:#efefef;height:100rpx;width:100%;position: fixed;top: 0px;z-index: 99999;">  <view class="search-input" style="background-color: white;width: 90%;margin: 10px auto;border-radius: 20px;height:60rpx;" > <icon size='15' type='search' style="margin: 15rpx 10rpx;float: left;"></icon> <view style="padding-top:6rpx;float: left;width: 90%;font-size: 28rpx;"> <input bindblur="Search" placeholder="请输入菜名"/> </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-ch_typeno='{{item.ch_typeno}}'> <view class="text-style {{indexId==index?' activeView':''}}"> <text class="{{indexId==index?'active1':''}}">{{item.vch_typename}}</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.ch_typeno}}"> <view class="title" id="title-{{itemft.ch_typeno}}">{{itemft.vch_typename}}</view> <view class="orders" wx:for="{{tabsList}}" wx:key="tabsList" wx:for-item="itemf"> <view wx:if="{{itemf.ch_typeno==itemft.ch_typeno}}" style="height:180rpx;border-bottom:1rpx solid #F0F0F0;width:96%;margin:20rpx auto;"> <image src="{{itemf.img}}" bindtap="toDetail" data-id="{{itemf.ch_dishno}}" data-ch_typeno="{{itemf.ch_typeno}}" style="width:160rpx;height:160rpx;float:left;"></image> <view style="width:calc(100% - 180rpx);float:right;height:160rpx;"> <view style="height:40rpx;line-height:40rpx;margin-top:5rpx;overflow: hidden;white-space: nowrap;text-overflow: ellipsis;"> {{itemf.vch_dishname}}</view> <view style="height:40rpx;line-height:40rpx;margin-top:15rpx;font-size:24rpx;color:#c2c2c2;overflow: hidden;white-space: nowrap;text-overflow: ellipsis;"> <text style="color:red;">会员价：{{itemf.num_m_price1}}￥</text></view> <view style="height:40rpx;line-height:40rpx;margin-top:15rpx;"> <text style="color:#c2c2c2;font-size:24rpx;">售价：{{itemf.num_price1}}￥</text>  <image src="../images/add.png" data-id="{{itemf.ch_dishno}}" bindtap="addCart" style="float:right;height:50rpx;width:50rpx;margin-right: 10rpx;"></image>  <text style="float:right;height:50rpx;padding:0rpx 10rpx;line-height: 50rpx;" class="value" hidden="{{itemf.quantity<=0}}" data-id="{{itemf.ch_dishno}}" data-num="{{itemf.quantity}}">{{itemf.quantity}}</text>  <image src="../images/reduce.png" hidden="{{itemf.quantity<=0}}" data-id="{{itemf.ch_dishno}}" bindtap="delCart" style="float:right;height:50rpx;width:50rpx;"></image> </view> </view> </view> </view> </view> </block> </scroll-view> </view> </view>  <view class="bottom_box"> <view class="shop_cartBox" bindtap="cascadeToggle"> <text wx:if="{{totalNum!=0}}" style="float: right;width: 40rpx;height: 40rpx;border-radius: 50rpx;background-color:red;text-align: center;margin-right: -10rpx;margin-top: -10rpx;color: white;line-height: 40rpx;padding: 2rpx;">{{totalNum}}</text> <image class="shopCart_img" src="../images/cart.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> <span class="shopcart_deleteAll" bindtap="cleanList">清空</span></view> <scroll-view scroll-y style="height:250px;margin-top:35px"> <view wx:if="{{cartList.length===0}}" style="text-align: center;color: gray;margin-top: 40rpx;">~空空如也！~</view> <block wx:for="{{cartList}}" wx:key="item"> <view class="cart_cells" wx:if="{{item.quantity > 0}}"> <image src="{{item.img}}" data-id="{{item.ch_dishno}}" style="width:80rpx;height:80rpx;float:left;margin: 10rpx 10rpx;"></image> <view class="cells_name" style="font-size:28rpx;color:gray;overflow: hidden;white-space: nowrap;text-overflow: ellipsis;" data-index="{{index}}">{{item.vch_dishname}}</view> <view class="cells_price" data-index="{{index}}">会员:{{item.num_m_price1}}￥<text style="color:gray;margin-left: 10rpx;">售价:{{item.num_price1}}￥</text></view> <view class="price-box">  <image src="../images/reduce.png" hidden="{{item.quantity<=0}}" data-id="{{item.ch_dishno}}" bindtap="delCart" style="float:right;height:50rpx;width:50rpx;margin-top: 10rpx;"></image>  <text style="float:right;height:50rpx;padding:0rpx 10rpx;margin-top: 10rpx;line-height: 50rpx;" class="value" hidden="{{item.quantity<=0}}" data-id="{{item.ch_dishno}}" data-num="{{item.quantity}}">{{item.quantity}}</text>  <image src="../images/add.png" data-id="{{item.ch_dishno}}" bindtap="addCart" style="float:right;height:50rpx;width:50rpx;margin-top: 10rpx;"></image> </view> <icon class="shopcart_delete" type="clear" size="24" data-index="{{index}}" data-id="{{item.ch_dishno}}" bindtap="deleteOne" /> </view> </block> </scroll-view> </view> </view> JS // var config = require('../../../utils/config.js'); // var http = require('../../../utils/request.js'); Page({ data: { tabs: [{vch_typename: "推荐",ch_typeno: "a"}, {vch_typename: "锡纸饭套餐",ch_typeno: "b"}, {vch_typename: "锡纸烤饭",ch_typeno: "c"}, {vch_typename: "精品冷碟",ch_typeno: "d"}, ], tabsList: [{ quantity:0,num_price1: 10.1,num_m_price1: 9.90,img:"../images/cai.png", ch_typeno: "a", ch_dishno: 0, vch_dishname: "皇家烩四宝套餐" }, { quantity:0,num_price1: 10.4,num_m_price1: 10.0,img:"../images/cai.png", ch_typeno: "b", ch_dishno: 3, vch_dishname: "皇家烩四宝套餐" }, { quantity:0,num_price1: 10.7, num_m_price1: 10.0,img:"../images/cai.png",ch_typeno: "c", ch_dishno: 6, vch_dishname: "皇家烩四宝套餐" }, { quantity:0,num_price1: 11.0,num_m_price1: 10.0,img:"../images/cai.png", ch_typeno: "d", ch_dishno: 9, vch_dishname: "皇家烩四宝套餐" }, { quantity:0,num_price1: 11.1,num_m_price1: 10.0,img:"../images/cai.png", ch_typeno: "d", ch_dishno: 10, vch_dishname: "皇家烩四宝套餐" } , { quantity:0,num_price1: 11.1,num_m_price1: 10.0,img:"../images/cai.png", ch_typeno: "d", ch_dishno: 11, vch_dishname: "皇家烩四宝套餐" } , { quantity:0,num_price1: 11.1,num_m_price1: 10.0,img:"../images/cai.png", ch_typeno: "d", ch_dishno: 12, vch_dishname: "皇家烩四宝套餐" } , { quantity:0,num_price1: 11.1,num_m_price1: 10.0,img:"../images/cai.png", ch_typeno: "d", ch_dishno: 13, vch_dishname: "皇家烩四宝套餐" }], 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 ch_typeno = e.currentTarget.dataset.ch_typeno; let that = this that.setData({ indexId: index, toTitle: "title-" + ch_typeno }); }, 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) { var that = this; wx.showLoading({ mask: true, title: '加载中…', }) //获取分类 // await GetFoodType(that) //获取菜品 // await GetFoodCook(that) wx.hideLoading() //设置高度，左右滚动 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].ch_typeno).boundingClientRect(function (rect) { var isTop = Number(rect.top); top2.push(isTop); console.log("view-c:" + JSON.stringify(rect)); }).exec(); } that.setData({ top: top2 }); } }); }, onShow: function (options) { var that = this; // 获取购物车缓存数据 var arr = wx.getStorageSync('cart') || []; // 进入页面后判断购物车是否有数据，如果有，将菜单与购物车quantity数据统一 if (arr.length > 0) { for (var i in arr) { for (var j in that.data.tabsList) { if (that.data.tabsList[j].ch_dishno == arr[i].ch_dishno) { 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].num_m_price1 * 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) { // 遍历菜单找到被点击的菜品，数量加1 if (this.data.tabsList[i].ch_dishno == id) { this.data.tabsList[i].quantity += 1; if (arr.length > 0) { for (var j in arr) { // 遍历购物车找到被点击的菜品，数量加1 if (arr[j].ch_dishno == 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].ch_dishno == 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].ch_dishno == id) { arr[j].quantity -= 1; if (arr[j].quantity <= 0) { this.removeByValue(arr, id) } 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 = 0 for (var i in cartList) { // 循环列表得到每个数据 totalP += cartList[i].quantity * cartList[i].num_m_price1; // 所有价格加起来 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].ch_dishno == 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; if (that.data.maskVisual == "hidden") { that.cascadePopup() } 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' }) }, //查看菜品详情 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), }) }, //搜索菜品 Search:function(e){ var searchkey=e.detail.value; console.log(searchkey); } }) //获取商品信息 function GetFoodCook(_this) { var that = _this return new Promise((resove, reject) => { //获取分类 let data = {} let header = {} http.request(config.GetFoodCook_WXList, data, 'POST', header).then(function (res) { var e = res if (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 = _this return new Promise((resove, reject) => { let data = { pagenum: 1, pagesize: 100 } let header = {} http.request(config.GetFoodTypeList, data, 'POST', header).then(function (res) { var e = res if (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/index/index.wxss */ /* 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-top: 1rpx solid #efefef; 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: 80rpx; font-size: 14px; margin-left: 40rpx; padding-top: 10rpx; } .cells_price { width: 60%; height: 50%; position: absolute; top: 50rpx; left: 80rpx; 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:62%; top: 20rpx; } /*删除购物车某项 */ .shopcart_delete { position: absolute; right: 20rpx; 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; } 总结

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