闲来没事，再写一章，哈哈哈。。。
做了购物车有好长时间了,一直没总结，现在总结下
原本想说废话少说了，直接进入主题，但是忽然感觉本人代码太乱，许多人看不下去
先上图，配合图我来讲下核心思想，
菜品的数组对象，里面东西比较多
图一
电脑颜色太白，见谅哈
核心思想：先将菜类和菜品两个数组对象弄好，
这是菜类数组对象的数据，里面放的有菜类的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%;
}