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

于 2024-02-28 18:15:58 发布
阅读量207 收藏 5
点赞数 4
分类专栏： 微信小程序 前端 javascript 文章标签： 微信小程序 小程序
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/aaa123aaasqw/article/details/136352858
版权
微信小程序点餐页面实现完整版

效果

 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

.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;
}

 

总结

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

嫣嫣细语
关注
  • 4
    点赞
  • 踩
  • 5
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值