效果
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;">
<view
style="height:40rpx;line-height:40rpx;margin-top:5rpx;overflow: hidden;white-space: nowrap;text-overflow: ellipsis;">
{{itemf.f_Name}}</view>
<view
style="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>
<text
style="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>购物车<span
class="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 = this
that.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) { // 遍历菜单找到被点击的菜品，数量加1
if (this.data.tabsList[i].f_Cooks_Id == id) {
this.data.tabsList[i].quantity += 1;
if (arr.length > 0) {
for (var j in arr) { // 遍历购物车找到被点击的菜品，数量加1
if (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 = 0
for (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.cartList
if (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').length
console.log(count)
if(count<=0){
wx.showToast({
title: '请先选择菜品',
icon:"none"
})
return
}
wx.navigateTo({
url: '../../category/previewOrder/previewOrder',
})
}
})
//获取商品信息
function GetFoodCook(_this) {
var that = _this
return new Promise((resove, reject) => {
//获取分类
let data = {
CookName:""
}
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/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;
}
总结
这是一个完整的点餐页面，下载修改接口即可使用。如果对你有帮助希望能给个关注，我会继续分享更多的内容！
扫一扫
6159
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
