• 设为首页
  • 点击收藏
  • 手机版
    手机扫一扫访问
    迪恩网络手机版
  • 关注官方公众号
    微信扫一扫关注
    迪恩网络公众号

微信小程序商品购物车

原作者: [db:作者] 来自: [db:来源] 收藏 邀请

闲来没事,再写一章,哈哈哈。。。

做了购物车有好长时间了,一直没总结,现在总结下

原本想说废话少说了,直接进入主题,但是忽然感觉本人代码太乱,许多人看不下去

先上图,配合图我来讲下核心思想,

菜品的数组对象,里面东西比较多

 

图一

     图二

电脑颜色太白,见谅哈

核心思想:先将菜类和菜品两个数组对象弄好,

这是菜类数组对象的数据,里面放的有菜类的id,name,和本商户的shop_id

菜品的数组对象,里面东西比较多

fid代表的是所属菜类的id,id是本菜品的id,showtaset是用来控制菜品口味弹框开关的,showdisher_alert,这个原来也是一个控制弹框不过后来给删了,作用不大,没必要看了,cartnum,是表示该菜品在购物车的数量,title是菜品名称,volume是菜品销量

fname:菜品所属类的名称,cainum同cartnum,两者作用一样,在此我要说明下,购物车里显示条件的是wx:if="{{menu.cainum>0}}"  我还是遍历的菜品数组,只不过多了一个判断。这样比较方便简单。

数据都有了,接下来就是对这些数据进行一系列操作了,大家可以专注的看addFoodnum,和reduceFoodnum,这两个方法,

菜品加减我想写在下一篇,这一篇太乱了,实在对不起看客。下面是代码

js

var app = getApp();

var web_url = 'https://www.kelaidan.com';

var shop_id = app.globalData.shop_id;

var caidan_flag = true;

var that = this;

var optionId;

Page({

data: {

//数据定义

submitOrderDisabled: true,

catalogSelect: 1,

//数组定义

cailei: [],

caidan: [],

s_id: 0,

seat_name: "",

currentTab: 0,

currentType: 0,

showCart: false,

sumNum: 0,

sumMon: 0,

scrollLeft: 0,

windowWidth: 0,

currentCategory: 0,

currentCategoryTitle: 0,

currentCategoryContent: 15,

isCategoryItemTap: false,

isScrollWithAnimation: false,

isAddItemTopArray: true,

itemTopArray: [],

animationData: {},

isLoaded: false,

isContentCanFloat: [],

//设置菜单分类导航的自动滑动

tabsContentHeight: 0,

tabHeight: 0,

categoryBoxScrollTop: 0,

categoryBoxScrollIntoView: 0

},

onLoad: function (options) {

var that = this;

var seat_id = wx.getStorageSync('seat_id');

console.log(seat_id);

console.log(options);

console.log("手机号给框架")

wx.showLoading({

title: '请稍等',

})

var token = wx.getStorageSync('token');

if (token === null || token === "") {

wx.navigateTo({

url: '/pages/authpage/index',

})

}

wx.request({

method: "GET",

url: web_url + '/home/menu/index',

data: {

shop_id: shop_id,

token: token,

},

success: function (e) {

console.log(e);

if (e.data.code === 401 || e.data.code === 400) {

wx.showLoading({

title: '用户信息丢失',

})

wx.clearStorageSync();

setTimeout(function () {

wx.navigateTo({

url: '/pages/authpage/index',

})

}, 2000);

}

that.setData({

caidan: e.data.data.dan_pins,

cailei: e.data.data.menu_type

})

 

}

})

setTimeout(function () {

var greens = wx.getStorageSync('greens');

if (greens == "" || greens == null) { }

else {

 

that.setData({

sumMon: greens.sumMon,

sumNum: greens.sumNum,

caidan: greens.caidan,

submitOrderDisabled: greens.submitOrderDisabled

})

 

}

}, 1500)

optionId = options.currentTab;

wx.getSystemInfo({

success: function (res) {

that.setData({

winWidth: res.windowWidth,

winHeight: res.windowHeight

})

 

}

});


 

// setTimeout(function() {

//初始化时获取每个子view的offsetTop位置

var totalCont = 13;

that.setData({

currentCategoryContent: totalCont,

categoryBoxScrollIntoView: totalCont

});

var timer = setInterval(function () {

 

totalCont--;

if (totalCont < 0) {

clearInterval(timer);

}

that.setData({

currentCategoryContent: totalCont

});

 

}, 300);

// }, 1000);

},

onShow: function () {

var that = this;

//缓存数据到本地

var token = wx.getStorageSync('token');

if (token === null || token === "") {

wx.navigateTo({

url: '/pages/authpage/index',

})

}

var seat_id = wx.getStorageSync('seat_id');

console.log(1111112222);

console.log(wx.getStorageSync('seat_id'));

that.setData({

s_id: wx.getStorageSync('seat_id'),

})

wx.request({

method: "GET",

url: web_url + '/home/menu/seatName',

data: {

shop_id: shop_id,

seat_id: seat_id,

token: token

},

success: function (e) {

console.log(e);

that.setData({

seat_name: e.data.data.seat_name

})

if (e.data.code === 401 || e.data.code === 400) {

wx.showLoading({

title: '用户信息丢失',

})

wx.clearStorageSync();

setTimeout(function () {

wx.hideLoading();

wx.navigateTo({

url: '/pages/authpage/index',

})

}, 2000);

}

}

})

var date2 = new Date;

var current_time = date2.getTime();

var prev_time = wx.getStorageSync('prev_time');

var time = current_time - prev_time;

if (time > 900000) {

wx.removeStorageSync('greens');

}

if (time > 14400000) {

wx.removeStorageSync('seat_id');

}

if (time > 10800000) {

wx.removeStorageSync('order_id');

}

var greens = wx.getStorageSync('greens');

if (greens === "" || greens === null) { } else {

this.setData({

sumMon: greens.sumMon,

sumNum: greens.sumNum,

caidan: greens.caidan,

submitOrderDisabled: greens.submitOrderDisabled

})

}

var animation = wx.createAnimation({

duration: 0,

timingFunction: 'ease',

})

this.animation = animation;

var sourceData = wx.getStorageSync("sourceData");

 

},

 

onReady: function () {

 

},

 

onShareAppMessage: function () {

var title = "点餐小程序";

var path = "pages/order/order";

 

return {

title: title,

path: path

}

},

chooseType: function (ev) {

that.setData({

currentType: ev.target.dataset.index

})

},

//scoll-view中的方法

upper: function (ev) { },

lower: function (ev) { },

scroll: function (ev) { },

onReachBottom: function (ev) { },

onPullDownRefresh: function (ev) {

wx.removeStorageSync('greens');

var token = wx.getStorageSync('token');

if (token === null || token === "") {

wx.navigateTo({

url: '/pages/authpage/index',

})

}

wx.request({

method: "GET",

url: web_url + '/home/menu/index',

data: {

shop_id: shop_id,

token: token,

},

success: function (e) {

console.log(e);

if (e.data.code === 401 || e.data.code === 400) {

wx.showLoading({

title: '用户信息丢失',

})

wx.clearStorageSync();

setTimeout(function () {

wx.navigateTo({

url: '/pages/authpage/index',

})

}, 2000);

}

that.setData({

caidan: e.data.data.dan_pins,

cailei: e.data.data.menu_type,

sumMon:0,

sumNum:0

})

 

}

})

setTimeout(function () {

wx.stopPullDownRefresh();

}, 1500)

},

// //添加类实现点击变色事件

// chooseCatalog: function(data) {

// var that = this;

// var i = data.currentTarget.dataset.index;

// var ww = "caidan[" + i + "].tasteName";

// that.setData({

// [ww]: data.currentTarget.dataset.taste,

// catalogSelect: data.currentTarget.dataset.select

// })

 

// },

//商品加方法

addFoodNum: function (e) {

var kunum = e.currentTarget.dataset.kucunnum;

setTimeout(function () { }, 100)

if (kunum > 0) {

that = this;

var price = e.currentTarget.dataset.price;

var sumNum = that.data.sumNum + 1;

price = Number(price);

var sumMon = (that.data.sumMon * 100 + price * 100) / 100;

var i = e.currentTarget.dataset.index;

// var ww = "caidan[" + i + "].tasteName";

var cartnum = that.data.caidan[i].cartnum + 1;

// var volume = Number(that.data.caidan[i].volume) + 1;

// var tasteName = e.currentTarget.dataset.tastename;

// var id = that.data.caidan[i].id;

var cainum = that.data.caidan[i].cainum + 1;

var kucunnum = that.data.caidan[i].num - 1;

// if (that.data.caidan[i].show_taste === true) {

// var oo = "caidan[" + i + "].show_taste";

// that.setData({

// [oo]: false

// })

// }

var up = "caidan[" + i + "].cainum";

var xx = "caidan[" + i + "].cartnum";

var po = "caidan[" + i + "].num";

// var xo = "caidan[" + i + "].volume";

var submitOrderDisabled = true;

if (sumMon >= 0.01) {

submitOrderDisabled = false;

}

that.setData({

sumNum: sumNum,

sumMon: sumMon.toFixed(2),

[up]: cainum,

[po]: kucunnum,

// [xo]: volume,

// [ww]: tasteName,

[xx]: cartnum,

// catalogSelect: 1,

submitOrderDisabled: submitOrderDisabled

})

var greens = {

sumNum: that.data.sumNum,

sumMon: that.data.sumMon,

caidan: that.data.caidan,

submitOrderDisabled: submitOrderDisabled

}

wx.setStorageSync('greens', greens);

}

else {

wx.showToast({

title: '已卖完',

icon: "loading",

duration: 2000

})

}

},

//商品减方法

reduceFoodNum: function (ev) {

var that = this;

if (that.data.sumNum > 0) {

if (sumNum == 0 || sumNum < 0) {

 

that.setData({

sumMon: 0,

sumNum: 0

})

}

var price = ev.currentTarget.dataset.price;

var sumNum = that.data.sumNum - 1;

price = Number(price);

 

var sumMon = (that.data.sumMon * 100 - price * 100) / 100;

var i = ev.currentTarget.dataset.index;

var kucunnum = that.data.caidan[i].num + 1;

var cartnum = that.data.caidan[i].cartnum - 1;

var cainum = that.data.caidan[i].cainum - 1;

// var volume = Number(that.data.caidan[i].volume)- 1;

var qq = "caidan[" + i + "].cainum";

var yy = "caidan[" + i + "].cartnum";

var po = "caidan[" + i + "].num";

// var xo = "caidan[" + i + "].volume";

var submitOrderDisabled = true;

if (sumNum == 0) {

that.setData({

showCart: false

})

}

if (sumMon >= 0.01) {

submitOrderDisabled = false;

}

that.setData({

sumNum: sumNum,

sumMon: sumMon.toFixed(2),

[qq]: cainum,

// [xo]: volume,

[yy]: cartnum,

[po]: kucunnum,

submitOrderDisabled: submitOrderDisabled

})

if (sumMon <= 0) {

that.setData({

sumMon: 0

})

}

 

var greens = {

sumNum: that.data.sumNum,

sumMon: that.data.sumMon,

caidan: that.data.caidan,

submitOrderDisabled: submitOrderDisabled

}

wx.setStorageSync('greens', greens);

if (sumNum == 0 || sumNum < 0) {

for (var j = 0; j < that.data.caidan.length; j++) {

var zz = "caidan[" + j + "].cartnum";

var pp = "caidan[" + j + "].cainum";

that.setData({

[pp]: 0,

[zz]: 0,

sumMon: 0

})

}

wx.removeStorageSync('greens');

that.setData({

sumMon: 0,

sumNum: 0,

[qq]: 0

})

}

}

 

},

//购物车显示隐藏

hiddenLayer: function () {

var that = this;

that.setData({

showCart: false

//showCart控制购物车显示隐藏

})

},

seeDetailCart: function () {

var that = this;

that.setData({

showCart: !that.data.showCart

})

},

clearCart: function () {

var that = this;

//清空购物车 定义变量jsonC 赋值为caidan

var jsonC = that.data.caidan;

 

for (var i = 0; i < jsonC.length; i++) {

//把jsonC对象中菜数都清为零 cartnum 也为零

jsonC[i].cainum = 0

jsonC[i].cartnum = 0

}

//给data赋数据

that.setData({

caidan: jsonC,

sumNum: 0,

sumMon: 0,

showCart: false

})

wx.removeStorageSync('greens');

 

},

placeOrder: function () {

var that = this;

if (that.data.sumMon > 0) {

//定义数组 将作为 caidan 中有 对象

var detailArray = new Array;

var jsonC = that.data.caidan;

for (var i = 0; i < jsonC.length; i++) {

if (jsonC[i].cainum > 0) {

//用a 接caidan 里面的数据

var a = {

id: jsonC[i].id,

num: jsonC[i].cainum,

title: jsonC[i].title,

price: jsonC[i].price,

pic: jsonC[i].caiimage

};

//将a 赋给新定义的detailArray

detailArray.push(a);

}

}

var orderResult = {

sumNum: that.data.sumNum,

sumMon: that.data.sumMon,

orderDetail: detailArray

};

wx.setStorageSync('orderResult', orderResult);

wx.navigateTo({

//跳转页面

url: '/pages/balance/index',

})

} else {

wx.showToast({

title: "请先添加产品",

icon: "success",

duration: 500

})

}

},

fadeOut: function () {

this.animation.scale(2, 2).opacity(0).step()

this.setData({

animationData: this.animation.export()

})

},

 

rotateAndScale: function () {

// 旋转同时放大

this.animation.rotate(45).scale(2, 2).step()

this.setData({

animationData: this.animation.export()

})

},

rotateThenScale: function () {

// 先旋转后放大

this.animation.rotate(45).step()

this.animation.scale(2, 2).step()

this.setData({

animationData: this.animation.export()

})

},

rotateAndScaleThenTranslate: function () {

// 先旋转同时放大,然后平移

this.animation.rotate(45).scale(2, 2).step()

this.animation.translate(100, 100).step({

duration: 1000

})

this.setData({

animationData: this.animation.export()

})

},

 

onUnload: function () {

// 页面关闭

},

changeTab: function (e) {

var scrollLeft = ((e.detail.current + 1));

if (scrollLeft < 0) {

scrollLeft = 0;

}

this.setData({

scrollLeft: scrollLeft * (this.data.windowWidth),

currentTab: e.detail.current

});

},

setCurrentTab: function (e) {

this.setData({

currentTab: e.target.dataset.tab

});

},

switchCategory: function (e) {


 

var isContentCanFloatArr = this.data.isContentCanFloat;

if (isContentCanFloatArr[parseInt(e.currentTarget.dataset.category)]) {

this.setData({

currentCategoryTitle: e.currentTarget.dataset.category

});

} else {

this.setData({

currentCategoryTitle: isContentCanFloatArr.length

});

}

this.setData({

currentCategory: e.currentTarget.dataset.category,

currentCategoryContent: e.currentTarget.dataset.category,

isCategoryItemTap: true

});

 

//延时1秒,禁用doCategoryContentsScroll中的滚动事件的代码块

setTimeout(function () {

this.setData({

isCategoryItemTap: false

});

}.bind(this), 1000);

},

doCategoryBoxScroll: function (e) {

if (this.data.isAddItemTopArray) {

this.setData({

tabsContentHeight: e.detail.scrollHeight - e.detail.scrollTop,

tabHeight: e.detail.scrollHeight / 16

});

} else {

var top = e.detail.scrollTop;

this.setData({

categoryBoxScrollTop: top

});

}

},

doCategoryContentsScroll: function (e) {

if (this.data.isAddItemTopArray) {

//初始化时获取每个子view的offsetTop位置

var tempArr = this.data.itemTopArray;

tempArr.unshift(e.detail.scrollTop);

this.setData({

itemTopArray: tempArr

});

if (e.detail.scrollTop <= 20) { //20是保险值,本应该是0

var that = this;

 

setTimeout(function () {

that.setData({

isScrollWithAnimation: true,

isAddItemTopArray: false,

isLoaded: true,

categoryBoxScrollIntoView: 0

});

//校验itemTopArray的长度

if (tempArr.length < 15 + 1) {

var lastValue = tempArr[tempArr.length - 1];

for (var m = 15; m > tempArr.length - 1; m--) {

tempArr.push(lastValue);

}

that.setData({

itemTopArray: tempArr

});

}

var tempCanFloatArr = [];

for (var k = 0; k < tempArr.length; k++) {

//判断最后一个要不要把title漂浮起来

var currContentHeight = e.detail.scrollHeight - tempArr[k];

if (currContentHeight <= that.data.tabsContentHeight) {

//只有最后一个内容区的高度大于滑动区的高度,最后一个内容区的标题可漂浮

tempCanFloatArr.push(false);

} else {

tempCanFloatArr.push(true);

}

}

that.setData({

isContentCanFloat: tempCanFloatArr

});

wx.hideLoading();

//下面的模态弹出框调试滑动view的offsetTop时打开

/*wx.showModal({

title: 'view个数',

//content: that.data.itemTopArray.join(','),

content: that.data.itemTopArray.length + "",

success: function (res) {

if (res.confirm) {

console.log('用户点击确定')

} else if (res.cancel) {

console.log('用户点击取消')

}

}

});*/

}, 2000);

that.fadeOut();

}

} else {

//减少操作太频繁的计算量

if (!this.data.isCategoryItemTap) {

for (var i = 0; i < this.data.itemTopArray.length; i++) {

if (e.detail.scrollTop < this.data.itemTopArray[i + 1]) {

if (this.data.currentCategory != i) {

var isContentCanFloatArr = this.data.isContentCanFloat;

if (isContentCanFloatArr[i]) {

this.setData({

currentCategoryTitle: i

});

} else {

this.setData({

currentCategoryTitle: isContentCanFloatArr.length

});

}

this.setData({

currentCategory: i

});

//滚动菜单分类

var currentCategoryBox_offsetTop = i * this.data.tabHeight;

var categoryBoxScrollTop_temp = this.data.categoryBoxScrollTop;

var min_categoryBoxScrollTop = categoryBoxScrollTop_temp;

var max_categoryBoxScrollTop = min_categoryBoxScrollTop + this.data.tabsContentHeight;

if (currentCategoryBox_offsetTop < min_categoryBoxScrollTop) {

//说明已经在屏幕的可视区的上方了,让滚动条向下一个tabHeight

var scroll_top = currentCategoryBox_offsetTop;

var scroll_view = Math.floor(scroll_top / this.data.tabHeight);

if (scroll_view < 0) {

scroll_view = 0;

}

this.setData({

categoryBoxScrollTop: scroll_top,

categoryBoxScrollIntoView: scroll_view

});

} else if (currentCategoryBox_offsetTop + this.data.tabHeight > max_categoryBoxScrollTop) {

//说明已经在屏幕的可视区的下方了,让滚动条向上移动一个tabHeight

var scroll_top = min_categoryBoxScrollTop + (currentCategoryBox_offsetTop + this.data.tabHeight - max_categoryBoxScrollTop);

var scroll_view = Math.ceil(scroll_top / this.data.tabHeight);

if (scroll_view > 15) {

scroll_view = 15;

}

this.setData({

categoryBoxScrollIntoView: scroll_view

});

}

}

break;

}

}

}

}

},

onHide: function () {

var date = new Date;

var prev_time = date.getTime();

wx.setStorageSync('prev_time', prev_time);

},

dishes_alert: function (e) {

var that = this;

var image = e.currentTarget.dataset.image;

var volume = e.currentTarget.dataset.volume;

var price = e.currentTarget.dataset.price;

var index = e.currentTarget.dataset.index;

var cainum = e.currentTarget.dataset.cainum;

var name = e.currentTarget.dataset.name;

var lable = e.currentTarget.dataset.lable;

console.log(e);

 

that = this;

wx.navigateTo({

url: '/pages/goods_news/index?&image=' + image + '&volume=' + volume + '&price=' + price + '&index=' + index + '&cainum=' + cainum + '&name=' + name + '&lable=' + lable,

})

},

close_dishalert: function (e) {

var that = this;

var i = e.currentTarget.dataset.index;

var ff = "caidan[" + i + "].showdishes_alert";

 

var closedishes_alert = false;

that.setData({

[ff]: false

})

 

},

doCategoryContentsToLower: function (e) {

if (!this.data.isAddItemTopArray) {

if (!this.data.isCategoryItemTap) {

var isContentCanFloatArr = this.data.isContentCanFloat;

if (isContentCanFloatArr[15]) {

this.setData({

currentCategoryTitle: 15

});

} else {

this.setData({

currentCategoryTitle: isContentCanFloatArr.length

});

}

this.setData({

currentCategory: 15,

categoryBoxScrollIntoView: 15

});

}

}

}

});

wxml  部分

<swiper class="tabs-content" current="{{currentTab}}" bindchange="changeTab">

<view class='zhuohao'>

<text style='float:left;padding-left:15px;'>SOLO觞楽私厨酒肆</text>

<text wx:if="{{seat_name}}" style='float:right;padding-right:15px;'>{{seat_name}}</text>

</view>

<view style='height:10rpx;'></view>

<swiper-item class="tabs-content-item">

<view class="goods-content">

<scroll-view class="category-box" scroll-y="true" scroll-into-view="category-Box-item-{{categoryBoxScrollIntoView}}" bindscroll="doCategoryBoxScroll" style="height:100%;">

<view wx:for="{{cailei}}" wx:for-index="idx" wx:for-item="item" id="category-Box-item-{{idx}}" class="category-item {{currentCategory==idx?'active':''}}" data-category="{{idx}}" bindtap="switchCategory">

<view class="category-item-inner">

<text>{{item.name}}</text>

</view>

</view>

<view style='height:130px;'></view>

</scroll-view>

<scroll-view class="category-contents" scroll-y="true" scroll-into-view="category-contents-item-{{currentCategoryContent}}" scroll-with-animation="{{isScrollWithAnimation}}" bindscroll="doCategoryContentsScroll" bindscrolltolower="doCategoryContentsToLower"

lower-threshold="100" style="height:100%;">

<view wx:for="{{cailei}}" wx:for-index="i" wx:for-item="sort" id="category-contents-item-{{i}}" class="category-contents-item">

<!-- <view class="goods-box-title" wx:if="{{i!=0}}">

<view class="{{currentCategoryTitle==i?'fixed-title':''}}">{{sort.name}}</view>

</view> -->

<view class="goods-box" wx:for="{{caidan}}" wx:for-index="index" wx:for-item="menu" wx:if="{{sort.id==menu.fid}}">

<view class="goods-item">

<view bindtap='dishes_alert' data-name='{{menu.title}}' data-image="{{menu.caiimage}}" data-volume="{{menu.volume}}" data-price='{{menu.price}}' data-cainum='{{menu.cainum}}' data-id='{{menu.id}}' data-index='{{index}}' data-lable='{{menu.lable}}'>

<image src="{{menu.caiimage}}"></image>

</view>

<view class="goods-info-box">

<view class="goods-title" bindtap='dishes_alert' data-name='{{menu.title}}' data-lable='{{menu.lable}}' data-image="{{menu.caiimage}}" data-volume="{{menu.volume}}" data-price='{{menu.price}}' data-cainum='{{menu.cainum}}' data-id='{{menu.id}}' data-index='{{index}}'>{{menu.title}}</view>

<view class="goods-likes" bindtap='dishes_alert' data-lable='{{menu.lable}}' data-name='{{menu.title}}' data-image="{{menu.caiimage}}" data-volume="{{menu.volume}}" data-price='{{menu.price}}' data-cainum='{{menu.cainum}}' data-id='{{menu.id}}' data-index='{{index}}'>

<view class="goods-likes-left">月售{{menu.volume}}

<text>{{menu.lable}}</text>

</view>

</view>

<view class="goods-tools">

<view class="goods-price">¥{{menu.price}}</view>

<view class='goods-reduce' wx:if="{{menu.cainum>0}}" bindtap="reduceFoodNum" data-price='{{menu.price}}' data-cainum='{{menu.cainum}}' data-index='{{index}}' data-id='{{menu.id}}' data-kucunnum='{{menu.num}}'>-</view>

<text wx:if="{{menu.cainum>0}}">{{menu.cainum}}</text>

<view class="goods-add" bindtap="addFoodNum" data-tasteName="{{menu.tasteName}}" data-price='{{menu.price}}' data-cainum='{{menu.cainum}}' data-id='{{menu.id}}' data-index='{{index}}' data-kucunnum='{{menu.num}}'>+</view>

</view>

</view>

</view>

</view>

 

</view>

<view style='height:100px;'></view>

</scroll-view>

 

</view>

</swiper-item>

</swiper>

<view class="Bill-layer" wx:if="{{showCart && sumNum > 0}}" bindtap="hiddenLayer"></view>

<view class="Bill">

<scroll-view scroll-y="true" style="height: 500rpx;background-color:white" wx:if="{{showCart && sumNum > 0}}">

<view class="clearCart">

<button bindtap="clearCart">清空购物车</button>

</view>

<view class="book-result-detail" wx:for="{{caidan}}" wx:for-index="index" wx:for-item="shop" wx:if="{{shop.cainum>0}}">

<view wx:if="{{shop.cainum>0}}">

<text>{{shop.title}}</text>

<view class="operations" wx:if="{{shop.cainum>0}}">

<view class="goods-reduce1" data-num="{{shop.cainum}}" ata-kucunnum='{{shop.num}}' bindtap="reduceFoodNum" wx:if="{{shop.cainum> 0}}" data-index='{{index}}' data-price="{{shop.price}}" data-title="{{shop.title}}">-</view>

<text wx:if="{{shop.cainum > 0}}">{{shop.cainum}}</text>

<view class="goods-add1" data-num="{{shop.cainum}}" bindtap="addFoodNum" data-price="{{shop.price}}" data-tasteName="{{shop.tasteName}}" data-index='{{index}}' data-title="{{shop.title}}" data-kucunnum='{{shop.num}}'>+</view>

</view>

</view>

</view>

</scroll-view>

<view class="takeBill {{showCart ? '' : 'bdt'}}">

<view class="box-left">

<view class="tips" bindtap="seeDetailCart">

<view>{{sumNum}}</view>

</view>

<view class="money">¥ {{sumMon}}</view>

</view>

<button class="box-right" disabled="{{submitOrderDisabled}}" bindtap="placeOrder"> 下单 </button>

</view>

</view>

<view class="shopping-box">

<view class="cart-bth">

</view>

<view class="cart-tips"></view>

<view class="pay-bth"></view>

</view>

<view animation="{{animationData}}" class="loading {{isLoaded?'hidden':''}}"></view>

wxss部分:

.page {

background: #f0f0f0;

height: 100%;

width: 100%;

font-family: "微软雅黑",

Helvetica,

Arial,

"Hiragino Sans GB",

"Source Han Sans CN",

"PingFang SC",

Roboto,

"Heiti SC",

"Microsoft Yahei",

sans-serif;

background: #fff;

}

.share{

width: 100%;

height: 100%;

}

.merchant_xinxi{

width: 100%;

}

.book-box, .order-box {

width: 100%;

position: relative;

box-sizing: border-box;

}

.zhuohao{

width: 100%;

background: #ebebeb;

height: 100rpx;

line-height: 100rpx;

}

.zhuohao text{

font-size: 13px;

color:#FF535F;

}

 

.swiper-vertical-box {

width: 100%;

padding-left: 70px;

box-sizing: border-box;

}

 

/*.swiper-vertical-tab{width:100px;position:absolute;left:0px;top:0;min-height:100%; }*/

 

.swiper-vertical-tab {

width: 70px;

position: absolute;

left: 0px;

top: 0;

}

 

.swiper-vertical-tab view {

height: 60px;

font-size: 13px;

color: #505050;

text-align: center;

box-sizing: border-box;

padding-top: 20px;

padding-bottom: 20px;

}

 

.swiper-vertical-tab {

background: #eee;

height: 100%;

}

 

.swiper-vertical-tab view.on {

background: #fff;

height: 100%;

}

 

.swiper-vertical-box .vertical-list {

height: 100%;

}

 

.type-detail {

background: #fff;

padding-bottom: 10px;

}

 

.type-detail>view {

border-top: 0px solid #e5e5e5;

border-bottom: 1px solid #e5e5e5;

margin-left: 10px;

overflow: hidden;

padding-left: 80px;

box-sizing: border-box;

position: relative;

height: 92px;

width: 100%;

margin-bottom: -1px;

}

 

.type-detail view image {

width: 70px;

height: 70px;

border-radius: 6px;

margin-top: 10px;

border: 1px solid #ccc;

float: left;

margin-bottom: 10px;

position: absolute;

left: 0;

top: 0;

}

 

.book-detail {

float: left;

width: 100%;

}

 

.book-detail .cai_name {

font-size: 16px;

color: #505050;

height: 60px;

line-height: 60px;

}




 

.book-detail>view {

margin-top: 5px;

width: 100%;

overflow: hidden;

position: relative;

height: 28px;

}

 

.book-detail .reduce, .book-result-detail .reduce {

color: #fff;

background-color: #06c1ae;

width: 50rpx;

height: 50rpx;

line-height: 40rpx;

text-align: center;

border-radius: 50%;

font-size: 50rpx;

}

.book-detail .money {

font-size: 13px;

color: #fa4b22;

line-height: 10px;

}


 

.Bill-layer {

width: 100%;

height: 100%;

background: #000;

opacity: 0.5;

position: fixed;

left: 0;

top: 0;

z-index: 0;

}

 

.Bill {

position: fixed;

left: 0;

bottom: 0;

width: 100%;

z-index: 2;

}

 

.takeBill {

height: 55px;

background: #fff;

position: relative;

z-index: 99999;

}

 

.takeBill .box-right {

width: 120px;

height: 55px;

background: #FF535F;

position: absolute;

right: 0;

top: -1px;

border-radius: 0;

color: #fff;

line-height: 52px;

text-align: center;

}

 

.box-left {

margin-left: 30px;

}

 

.box-left>view {

float: left;

}

 

.box-left .tips {

width: 30px;

background: url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAADwAAAA8CAYAAAA6/NlyAAAAAXNSR0IArs4c6QAAAARnQU1BAACx jwv8YQUAAAAJcEhZcwAADsQAAA7EAZUrDhsAAAAZdEVYdFNvZnR3YXJlAEFkb2JlIEltYWdlUmVh ZHlxyWU8AAADcWlUWHRYTUw6Y29tLmFkb2JlLnhtcAAAAAAAPD94cGFja2V0IGJlZ2luPSLvu78i IGlkPSJXNU0wTXBDZWhpSHpyZVN6TlRjemtjOWQiPz4gPHg6eG1wbWV0YSB4bWxuczp4PSJhZG9i ZTpuczptZXRhLyIgeDp4bXB0az0iQWRvYmUgWE1QIENvcmUgNS41LWMwMTQgNzkuMTUxNDgxLCAy MDEzLzAzLzEzLTEyOjA5OjE1ICAgICAgICAiPiA8cmRmOlJERiB4bWxuczpyZGY9Imh0dHA6Ly93 d3cudzMub3JnLzE5OTkvMDIvMjItcmRmLXN5bnRheC1ucyMiPiA8cmRmOkRlc2NyaXB0aW9uIHJk ZjphYm91dD0iIiB4bWxuczp4bXBNTT0iaHR0cDovL25zLmFkb2JlLmNvbS94YXAvMS4wL21tLyIg eG1sbnM6c3RSZWY9Imh0dHA6Ly9ucy5hZG9iZS5jb20veGFwLzEuMC9zVHlwZS9SZXNvdXJjZVJl ZiMiIHhtbG5zOnhtcD0iaHR0cDovL25zLmFkb2JlLmNvbS94YXAvMS4wLyIgeG1wTU06T3JpZ2lu YWxEb2N1bWVudElEPSJ4bXAuZGlkOmFhZTI3MTNkLTVkZjUtMGQ0My04NTFmLWVjNTU4OGQ3ZGRm NyIgeG1wTU06RG9jdW1lbnRJRD0ieG1wLmRpZDo5Qjc0QUFBREZDQzQxMUU2ODE5MEFGQ0QxNDRB ODU5QiIgeG1wTU06SW5zdGFuY2VJRD0ieG1wLmlpZDo5Qjc0QUFBQ0ZDQzQxMUU2ODE5MEFGQ0Qx NDRBODU5QiIgeG1wOkNyZWF0b3JUb29sPSJBZG9iZSBQaG90b3Nob3AgQ0MgKFdpbmRvd3MpIj4g PHhtcE1NOkRlcml2ZWRGcm9tIHN0UmVmOmluc3RhbmNlSUQ9InhtcC5paWQ6YWFlMjcxM2QtNWRm NS0wZDQzLTg1MWYtZWM1NTg4ZDdkZGY3IiBzdFJlZjpkb2N1bWVudElEPSJ4bXAuZGlkOmFhZTI3 MTNkLTVkZjUtMGQ0My04NTFmLWVjNTU4OGQ3ZGRmNyIvPiA8L3JkZjpEZXNjcmlwdGlvbj4gPC9y ZGY6UkRGPiA8L3g6eG1wbWV0YT4gPD94cGFja2V0IGVuZD0iciI/PhXpIG0AAATbSURBVGhD7ZpZ KHVdGMcf85BMmWcXSi4osxsppUSJS0PulCguREmU3CjcybWpXMiNKaW4Q5RMVwopc5Exmd7ve56z lrN5N+fsvdf5zjqd71e7/V97s6y/NTxr2C5//gWcCFd2dxq+1PDg4CBMTk7C29sbe2LCzc0NoqOj oaCgAGpqasDb25u9cTw+DeOtsLAQXl9f6cVPZGZmwsDAALi4uLAnjsVnk0YD5eXl4O7uzp6os7Gx Aevr6yzleFg1aN3e3kJ/fz8sLS1RurS0FNra2kg7GlYNWgEBAdDc3MxSAJubm0w5HlaP0sHBwTRw IWdnZ/Dy8kLa0dAUh1tbW2FlZYWl5MPDwwNCQ0MhIyODoklkZCR7Y0ZTHI6JiWFKTjDCnJ6ewvT0 NDQ0NMDDwwN7Y0aTYd6kHYGrqyuYnZ1lKTOamvTa2hq0tLSQzs/Ph8bGRtKy8Pz8DHNzczAxMUHp 4uJiaG9vJ83RVMNxcXFMAZyfnzMlDzgDLCoqYil1NBkODw+ngQE5OTmhu2wop8UhISFMmdFk2NXV FaKiokg/Pj7C/f09aZnAvssJCwtjyowmw4hy4MJ4LBuXl5dMmVrkdzQbjo2NZUrOfiy8hpWxWMYa Vhp2ihrmTdrX1xf8/PxIKzHUh2Vu0mq1i2g2jP3C09OTtGxNGudQ3LBa/0U0G8bQxPvx09MTrZVl 4fr6+nPHRlgNI7I2a2VIUlspIboMyzpSK//5NjMsaw3zGeF3dBmWdRFxcXHBlGDDyj6MC25Z4IYx BuM+nBq6DOM2io+PD2mZapiX5af+i+gyjPB+jIvum5sb0vYEwyNfvdnEsGz9eGpqiqmf+y+i27C9 lonYonA2dXBwAFtbW7C4uAhdXV0wPz/PfgIgOTmZqb/RtKelZGFhAXp6ekiXlZVBVVUVaS3gJsLd 3R3tLmJzxEup1d5ZOvvC5jw6OgpeXl7syVd0G97d3YX6+nrSWVlZUFdX96VgXKsVmqc/Pj7o90UR Hx9PlZCQkMCe/I1uw2ikpKSEpWwPhhp/f3+6MORwzdNoMj09nY52f0O3YQQP1fQsHnABEhgYSBcW NigoiDQW/vsz1HjxzUOjGDKMu/vb29uksXB4/oR3Xlh+KdNYeLzbC0OGe3t7YWZmhjQep2ZnZ5OW Gd1hCcFBgnN0dMSU3AgzvLe3x5TcGDKcmJjIFMDy8jKd64gONaIx1IcRnHAcHx+zlP3AcFRZWUnz gd8wVMNIU1MThRl78/7+/jmA/obhkuLIjCN0WlqasFipB/zbFRUVLPUzhpu0o2H/tvgf43SGbdak cVNgfHycvvrBDXKcdubl5dGoHhERwX7KOkTmZRPD+C1IZ2cnnUx8B1c93d3dkJOTw578jsi8EOGG sTZqa2tVC8jBgg4PD1usHZF5cYT3Ydxt4AXEbyw6OjpgZGSE7vybC3yPTdQSIvPiCDe8urrKFNCO SGpqKn1dg3flZ07WfNEnMi+OcMPKLdukpCSmTKSkpDBlOumzhMi8OMIN42Kfs7+/z5QJ5ZwbR1pL iMyLI9xwbm4uUwBDQ0Ows7ND304dHh5CX18fewNWjawi8+L8P0obBf8wxkYsiBr4HN9bU0CReXFs OtMaGxujERQHH+yPODuqrq7WVEBEZF42Mywrwpu07DiZYYB/AGTCksEzMhzoAAAAAElFTkSuQmCC") no-repeat left 12px;

background-size: 100% auto;

height: 40px;

position: relative;

}

 

.box-left .tips view {

position: absolute;

right: -5px;

top: 7px;

width: 20px;

height: 20px;

background: #f55022;

color: #fff;

border-radius: 10px;

text-align: center;

line-height: 20px;

font-size: 12px;

}

 

.box-left .money {

color: #fa4b22;

font-size: 17px;

margin-left: 10px;

margin-top: 15px;

}

 

.clearCart {

height: 35px;

text-align: right;

background: #f5f5f5;

}

 

.clearCart button {

background: none;

float: right;

color: #646464;

line-height: 35px;

font-size: 14px;

padding-left: 16px;

background: url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABoAAAAcCAYAAAB/E6/TAAAAAXNSR0IArs4c6QAAAARnQU1BAACx jwv8YQUAAAAJcEhZcwAADsQAAA7EAZUrDhsAAAAZdEVYdFNvZnR3YXJlAEFkb2JlIEltYWdlUmVh ZHlxyWU8AAADcWlUWHRYTUw6Y29tLmFkb2JlLnhtcAAAAAAAPD94cGFja2V0IGJlZ2luPSLvu78i IGlkPSJXNU0wTXBDZWhpSHpyZVN6TlRjemtjOWQiPz4gPHg6eG1wbWV0YSB4bWxuczp4PSJhZG9i ZTpuczptZXRhLyIgeDp4bXB0az0iQWRvYmUgWE1QIENvcmUgNS41LWMwMTQgNzkuMTUxNDgxLCAy MDEzLzAzLzEzLTEyOjA5OjE1ICAgICAgICAiPiA8cmRmOlJERiB4bWxuczpyZGY9Imh0dHA6Ly93 d3cudzMub3JnLzE5OTkvMDIvMjItcmRmLXN5bnRheC1ucyMiPiA8cmRmOkRlc2NyaXB0aW9uIHJk ZjphYm91dD0iIiB4bWxuczp4bXBNTT0iaHR0cDovL25zLmFkb2JlLmNvbS94YXAvMS4wL21tLyIg eG1sbnM6c3RSZWY9Imh0dHA6Ly9ucy5hZG9iZS5jb20veGFwLzEuMC9zVHlwZS9SZXNvdXJjZVJl ZiMiIHhtbG5zOnhtcD0iaHR0cDovL25zLmFkb2JlLmNvbS94YXAvMS4wLyIgeG1wTU06T3JpZ2lu YWxEb2N1bWVudElEPSJ4bXAuZGlkOmFhZTI3MTNkLTVkZjUtMGQ0My04NTFmLWVjNTU4OGQ3ZGRm NyIgeG1wTU06RG9jdW1lbnRJRD0ieG1wLmRpZDo5QTNCOEU2QUZDQzQxMUU2ODE5MEFGQ0QxNDRB ODU5QiIgeG1wTU06SW5zdGFuY2VJRD0ieG1wLmlpZDo5QTNCOEU2OUZDQzQxMUU2ODE5MEFGQ0Qx NDRBODU5QiIgeG1wOkNyZWF0b3JUb29sPSJBZG9iZSBQaG90b3Nob3AgQ0MgKFdpbmRvd3MpIj4g PHhtcE1NOkRlcml2ZWRGcm9tIHN0UmVmOmluc3RhbmNlSUQ9InhtcC5paWQ6YWFlMjcxM2QtNWRm NS0wZDQzLTg1MWYtZWM1NTg4ZDdkZGY3IiBzdFJlZjpkb2N1bWVudElEPSJ4bXAuZGlkOmFhZTI3 MTNkLTVkZjUtMGQ0My04NTFmLWVjNTU4OGQ3ZGRmNyIvPiA8L3JkZjpEZXNjcmlwdGlvbj4gPC9y ZGY6UkRGPiA8L3g6eG1wbWV0YT4gPD94cGFja2V0IGVuZD0iciI/Pm6VsksAAAD7SURBVEhL7ZbB DkRADIZrE86OEl7Da4in8FAu5hHEI7h6DQdHFw4c7LaZmYxJjMHuHnZ9SVOtpL9WYzjLC9ihqiro uo5Ha4IggCRJeLTNg3sjWyKI6Z6KlZAAnzzLMjKbLlQOCeGYBOq1DU5RFMs0TTz8DJ7nHevoCnLr 8jynBM7/Hej1vtbRnwkxxshUbHM6RiFce331bXM69zKc5hY6zS10GqMQHlhoKrY5nR8+j0Tr4ziS v4Ko4boueUQKhWFIvq7rS2LDMFANJIoi8oh8R33fQ1mWu597W3BCaZqC7/sUr36JUaxpGmjbFuZ5 5tlj4LiwkziOpQgAwBMNeHlKuzj5HAAAAABJRU5ErkJggg==") no-repeat left center;

background-size: 13px auto;

}

 

.clearCart button::after {

border: 0 none;

}

 

.book-result-detail {

overflow: hidden;

}

 

.book-result-detail>view {

background: #fff;

overflow: hidden;

height: 50px;

padding-top: 10px;

padding-left: 15px;

box-sizing: border-box;

padding-right: 10px;

border-bottom: 1px solid #e6e6e6;

}

 

.book-result-detail>view text {

float: left;

}

 

.book-result-detail>view view {

float: right;

}

 

.food-detail {

overflow: hidden;

height: 36px;

line-height: 36px;

}

page, scroll-view, view {

box-sizing: border-box;

font-family: "微软雅黑";

}

 

page {

display: flex;

display:-webkit-box;

display: -moz-box;

display: -ms-flexbox;

display: -webkit-flex;

flex-direction: column;

-webkit-box-direction: column;

-moz-box-direction: column;

-webkit-flex-direction:column;

background-color: #f7f7f7;

height: 100%;

width: 100%;

}


 

.food-detail>text {

float: left;

color: #3c3c3c;

font-size: 16px;

display: block;

}

 

.food-detail>view {

float: right;

}

 

.food-detail>view text {

font-size: 15px;

color: #999;

}

 

.place {

height: 5px;

width: 100%;

background: #f0f0f0;

}

 

.order-list {

border-top: 1px solid #e6e6e6;

border-bottom: 1px sol id #e6e6e6;

margin-top: -1px;

padding: 20px 15px;

}

 

.order-list>text {

color: #3c3c3c;

font-size: 16px;

margin-bottom: 6px;

display: block;

}

 

.order-list .time {

color: #999;

font-size: 13px;

text-align: right;

}

 

.bdt {

border-top: 1px solid #e6e6e6;

}

 

.sale-out {

position: absolute;

width: 70px;

left: 0;

bottom: 0;

background: #aaa;

color: #fff;

z-index: 2;

text-align: center;

}

.tabs {

border-top: 2rpx solid #b3b3b3;

border-bottom: 2rpx solid #d8d8d8;

white-space: nowrap;

height: 91rpx;

background-color: #fff;

width: 100%;

}

 

.tabs-item {

display: inline-block;

width: 33%;

text-align: center;

font-size: 32rpx;

padding: 20rpx 0;

border-bottom: 6rpx solid transparent;

color: #999;

}

 

.tabs-item.active {

border-bottom: 6rpx solid #32b8ad;

color: #333;

}

 

/*选项卡内容区的样式*/

 

.tabs-content {

height: 100%;

width: 100%;

-webkit-box-flex:1;

-moz-box-flex:1;

flex:1;

-webkit-flex:1;

overflow: auto;

}

.tabs-content-item{

width: 100%;

height: 100%;

transform: translate(0%, 0px) translateZ(0px);

overflow: auto;

}

 

.goods-content {

display: flex;

display:-webkit-box;

display: -moz-box;

display: -ms-flexbox;

display: -webkit-flex;

justify-content: flex-start;

-webkit-box-direction: flex-start;

-webkit-justify-content:center;

width: 100%;

height: 100%;

}

 

.category-box {

width: 200rpx;

background-color: #f5f6f8;

overflow: auto;

height: 100%;

}

 

.category-item {

width: 100%;

}

 

.category-item-inner {

margin: 0 auto;

width: 180rpx;

display: flex;

justify-content: center;

align-items: center;

height: 100rpx;

background: #ebebeb;

}

 

.category-item.active {

background-color: #fff;

border-top: 4rpx solid #f1f2f4;

border-bottom: 4rpx solid #f1f2f4;

margin-top: -4rpx;

}

 

.category-item.active .category-item-inner {

background-color: #fff;

border-bottom: 2rpx solid transparent;

}

.category-item image {

width: 40rpx;

height: 40rpx;

margin-right: 10rpx;

}

 

.category-item text {

font-size: 32rpx;

color: #999;

}

 

.category-item:last-of-type .category-item-inner {

border-bottom: none;

}

 

/*分类右边商品列表区图片*/

 

.category-contents {

flex: 1;

height: 100%;

overflow: auto;

}

 

.category-contents-item {

display: flex;

display:-webkit-box;

display: -moz-box;

display: -ms-flexbox;

display: -webkit-flex;

-webkit-flex-flow:row wrap;

-webkit-box-orient:horizontal;

flex-flow:row wrap;

align-items: flex-start;

flex-wrap: wrap;

}

 

.goods-box-title {

flex: 100%;

height: 60rpx;

}

 

.goods-box-title view {

height: 60rpx;

line-height: 60rpx;

color: #333;

padding-left: 20rpx;

font-size: 28rpx;

}

 

.fixed-title {

position: fixed;

left: 200rpx;

right: 0;

top: 0;

background-color: #ebebeb;

}

 

.category-contents-item .goods-box {

flex: 100%;

background-color: #fff;

padding-left: 20rpx;

}

 

.goods-box .goods-item {

display: flex;

align-items: flex-start;

justify-content: flex-start;

background-color: #fff;

padding: 20rpx 0;

border-bottom: 2rpx solid #d8d8d8;

}

 

.goods-box .goods-item:last-of-type {

border-bottom: 2rpx solid transparent;

}

 

.goods-item image {

width: 140rpx;

height: 140rpx;

border-radius: 10rpx;

}

 

.goods-item .goods-info-box {

display: flex;

flex-direction: column;

flex: 1;

margin-left: 20rpx;

}

 

.goods-info-box .goods-title {

color: #383838;

font-size: 32rpx;

}

 

.goods-intro {

font-size: 26rpx;

color: #999;

margin-top: 10rpx;

}

 

.goods-info-box .goods-likes {

display: flex;

font-size: 26rpx;

margin-top: 10rpx;

color: #999;

}

 

.goods-likes-right {

margin-left: 20rpx;

}

 

.goods-tools {

font-size: 32rpx;

}

 

.goods-price {

width: 55%;

float:left;

color: red;

margin-left: -6rpx;

 

}

.goods-tools text{

float: left;

margin-right: 30rpx;

margin-left: 15rpx;

font-size: 14px;

}

.goods-reduce{

color: #FF535F;

border:1px solid #FF535F;

background-color: white;

width: 50rpx;

float:left;

height: 50rpx;

line-height: 42rpx;

text-align: center;

border-radius: 50%;

font-size: 50rpx;

}

.goods-add {

color: #fff;

float:right;

background-color: #FF535F;

width: 50rpx;

height: 50rpx;

line-height: 48rpx;

text-align: center;

border-radius: 50%;

font-size: 50rpx;

position: absolute;

right: 27rpx;

}

.goods-add-selecttaste {

color: #fff;

float:right;

background-color: #FF535F;

width: 100rpx;

height: 50rpx;

line-height: 48rpx;

text-align: center;

font-size: 23rpx;

position: absolute;

right: 20rpx;

}

.operations{

width: 20%;

}

 

.goods-add1 {

color: #fff;

background-color: #FF535F;

width: 50rpx;

height: 50rpx;

line-height: 48rpx;

text-align: center;

border-radius: 50%;

font-size: 50rpx;

position: absolute;

right: 15rpx;

}

.operations text{

font-size: 14px;

position: absolute;

right: 100rpx;

}

.goods-reduce1{

color: #FF535F;

border:1px solid #FF535F;

background-color: white;

width: 50rpx;

height: 50rpx;

position: absolute;

right: 150rpx;

line-height: 42rpx;

text-align: center;

border-radius: 50%;

font-size: 50rpx;

}

.goods-select {

margin-right: 20rpx;

color: #fff;

background-color: #06c1ae;

height: 50rpx;

line-height: 50rpx;

text-align: center;

border-radius: 25rpx;

font-size: 28rpx;

font-weight: normal;

padding: 0 20rpx;

}

 

/*页脚购物车的样式*/



 

/*初始化页面(获取每个子view的offsetTop)显示正在加载中提示*/

 

.loading {

position: absolute;

background-color: #fff;

left: 0;

top: 0;

width: 100%;

height: 100%;

display: flex;

justify-content: center;

align-items: center;

z-index: 9999;

}

.hidden {

display: none;

}

.mask{

width: 100%;

height: 100%;

position: fixed;

top: 0;

left: 0;

background: #000;

z-index: 9000;

opacity: 0.6;

}

.modalDlg{

width: 500rpx;

height: 450rpx;

position: fixed;

top: 20%;

z-index: 9999;

left:125rpx;

/* margin-left:-80rpx; */

background-color: #fff;

border-radius: 4rpx;

}

.shutalert{

width: 110rpx;

margin: 0rpx auto;

}

.shutalert image{

width: 100rpx;

height: 100rpx;

position: absolute;

bottom: -120rpx;

left: 200rpx;

}

.kouwei_wrap{

width:140rpx;text-align:center;height:30px;font-size:11px;float:left;margin-left:15rpx;border:1px solid #ebebeb;margin-top:20rpx;line-height: 30px;

}

.active-pop{

width:140rpx;text-align:center;height:30px;font-size:11px;float:left;margin-left:15rpx;border:1px solid #FF535F;color: #FF535F;z-index: 999;margin-top:20rpx;line-height: 30px;

}

.push_shopcart_wrap{

position: absolute;

right: 10px;

bottom: 8px;

}

.shopcart_right{

width: 180rpx;

height: 50rpx;

text-align:center;

line-height: 40rpx;

background: #FC717C;

border-radius:13px;

}

.shop_price_wrap{

position: absolute;

left: 10px;

bottom: 10px;

}

 

.main{

width: 100%;

}

.setmeal{

width: 100%;

}

 

.caipingjieshao_wrap{

width: 94%;

margin: 3% auto;

text-indent:2em;

font-size: 14px;

word-wrap:break-word;

}

.topsetmeal{

width: 100%;

height: 40px;

padding: 0px;

margin: 0;

}

.topsetmeal_one{

float: left;

margin-left: 10px;

width: 98%;

height: 100%;

}

.topsetmeal_name{

font-size: 20pt;

}

.goods_image{

margin-top: 10px;

width: 100%;

height: 260px;

text-align: center;

}

.goods_image .images{

width: 100%;

height: 100%;

text-align: center;

}

.goods_image .images image{

width: 95%;

height: 100%;

}

.top-placeholder {

margin-top: 20px;

width: 100%;

height: 30px;

}

.goods_sales{

margin-top: 5px;

width: 100%;

height: 20px;

color: #A5A5A5;

}

.goods_sales text{

font-size: 10pt;

line-height: 20px;

padding-left: 10px;

font-family: 微软雅黑;

}

.goods_prices{

width: 100%;

height: 30px;

}

.goods_prices text{

color:#FA4E44;

font-size: 18pt;

margin-left: 6px;

float: left;

}

.goods_prices .goods_shopping{

color: white;

width: 150px;

height: 100%;

border-radius: 30px 30px 30px 30px;

background-color: #FF535F;

margin-right: 20px;

float: right;

line-height: 30px;

font-size: 12pt;

font-weight: bold;

text-align: center;

font-family: 楷体;

}

 

.top-placeholder .text {

font-size: 15pt;

line-height: 30px;

padding-left: 10px;

font-family: 微软雅黑;

font-weight: 25px;

}

.box-middle{

width: 120px;

height: 55px;

background-color: #FED161;

margin-right: 120px;

float: right;

right: 0;

top: -1px;

border-radius: 0;

color: #fff;

line-height: 52px;

text-align: center;

}

.showdishes_alert{

width: 100%;

height: 100%;

position: fixed;

top:0;

bottom: 0;

left: 0;

right: 0;

z-index: 99;

background-color: #fff;

}

.close_wrap{

width: 100%;

height: 80rpx;

line-height: 80rpx;

float: right;

}

.close_wrap image{

width: 60rpx;

height: 60rpx;

float: left;

padding-left: 22rpx;

}

.taste_wrap{

width:100%;

}


 


鲜花

握手

雷人

路过

鸡蛋
该文章已有0人参与评论

请发表评论

全部评论

专题导读
热门推荐
阅读排行榜

扫描微信二维码

查看手机版网站

随时了解更新最新资讯

139-2527-9053

在线客服(服务时间 9:00~18:00)

在线QQ客服
地址:深圳市南山区西丽大学城创智工业园
电邮:jeky_zhao#qq.com
移动电话:139-2527-9053

Powered by 互联科技 X3.4© 2001-2213 极客世界.|Sitemap