1826 lines
41 KiB
Vue
1826 lines
41 KiB
Vue
<template>
|
||
<view class="hzIndex">
|
||
<hzHeader title="外卖预定"></hzHeader>
|
||
<view class="container hzContent">
|
||
<view class="main">
|
||
<view class="tab-box">
|
||
<view class="tab-item" :class="currentTabIndex == 0 ? 'active_tab' : ''"
|
||
@click="currentTabIndex = 0">
|
||
外卖预订
|
||
<view class="tabBottom" v-if="currentTabIndex == 0"></view>
|
||
</view>
|
||
<view class="tab-item" :class="currentTabIndex == 1 ? 'active_tab' : ''"
|
||
@click="currentTabIndex = 1">
|
||
我的预订
|
||
<view class="tabBottom" v-if="currentTabIndex == 1"></view>
|
||
</view>
|
||
</view>
|
||
<view class="reservation-box" v-if="currentTabIndex == 0">
|
||
<view v-if="currentTabIndex == 0&&(week==4||week==5||week==6||week==0)"
|
||
style="height: 100%;color: #666;height: 600upx;line-height: 60upx;padding-left: 50upx;padding-top: 40upx;font-size: 32upx;">
|
||
外卖预订时间：每周一、周二、周三<br />外卖取餐时间：每周五
|
||
</view>
|
||
<!-- <view v-if="currentTabIndex == 0&&(week==4||week==5||week==6||week==0)"
|
||
style="height: 100%;color: #666;background-color: white;height: 600upx;line-height: 60upx;padding-left: 50upx;padding-top: 40upx;">
|
||
外卖预订时间：每周一、周二、周三<br />外卖取餐时间：每周五
|
||
</view> -->
|
||
<view v-else>
|
||
<view class="search-box">
|
||
<!-- <uni-search-bar placeholder="查询搜索" @confirm="search" cancelButton='auto' bgColor="#F2F6FA"
|
||
@cancel="cancleSearch"></uni-search-bar> -->
|
||
<view class="barber">
|
||
<text style="font-size: 14px;color:#666">取货地点：</text>
|
||
<view class="barber-box">
|
||
<view class="barber-item" v-for="(item, index) in takeFoodPlace" :key="index"
|
||
@click="choosePlace(index)"
|
||
:class="takeFoodPlaceIndex == index ? 'barberactive' : ''">
|
||
{{ item}}
|
||
</view>
|
||
</view>
|
||
</view>
|
||
</view>
|
||
<!-- <view class="cont" style="min-height:960upx ;margin: 0upx;">
|
||
<view class="classify-box">
|
||
<view class="classify-item" :class="chooseClassifyIndex == index ? 'active' : ''"
|
||
v-for="(item, index) in kinds" :key="index" @click="kindClick(index)">
|
||
<text>{{ item.attr_name }}</text>
|
||
</view>
|
||
</view>
|
||
<view class="food-list" v-if="foodList.length > 0">
|
||
<view class="list-item" v-for="(item, index) in foodList" :key="index">
|
||
<view class="img-box">
|
||
<image :src="formatImgUrl(item.picture)" mode=""
|
||
@click="vbPicture(new Array(formatImgUrl(item.picture)))"></image>
|
||
</view>
|
||
<view class="fr-content">
|
||
<view class="name">{{ item.food_name }}</view>
|
||
<view class="num" > </view>
|
||
<view class="choose-num">
|
||
<image v-if="item.buyNum > 0" @click="removeItem(item)"
|
||
src="/static/icons/jian.png" mode=""></image>
|
||
<text v-if="item.buyNum > 0">{{ item.buyNum }}</text>
|
||
<image
|
||
v-if="(item.quota > 0 && item.buyNum >= item.quota) || item.buyNum >= item.no_buy_num"
|
||
src="/static/icons/no-jia.png" mode=""></image>
|
||
<image v-else @click="addItem(item)" src="/static/icons/jia.png" mode="">
|
||
</image>
|
||
</view>
|
||
<view class="price">¥{{ item.price }}/{{ item.company }}</view>
|
||
</view>
|
||
</view>
|
||
</view>
|
||
<content-none v-else :padTop="30"></content-none>
|
||
</view> -->
|
||
<view class="consty">
|
||
<view class="con">
|
||
<van-sidebar v-model="activeKey">
|
||
<van-sidebar-item v-for="(i,index) in kinds" :key="index"
|
||
:title="i.attr_name"></van-sidebar-item>
|
||
</van-sidebar>
|
||
<view class="con_right">
|
||
<van-empty :description="descriptionVal" v-if="foodList.length==0"></van-empty>
|
||
<van-card v-for="(i,index) in foodList" :key="index" :price="i.price"
|
||
:title="i.food_name" :thumb="i.picture">
|
||
<template #thumb>
|
||
<view class="foodImg">
|
||
<image :src="i.picture" alt="" />
|
||
</view>
|
||
</template>
|
||
<template #desc>
|
||
<view class="no_buy_num">{{i.represent}}</view>
|
||
</template>
|
||
<template #price>
|
||
<view class="pic">
|
||
￥<text class="price">{{i.price}}</text>{{i.company? '/'+i.company : ''}}
|
||
</view>
|
||
</template>
|
||
<template #num>
|
||
<view class="numbox">
|
||
<image :class="[i.isShow==true? '': '']" v-if="i.buyNum > 0"
|
||
@click="removeItem(i)" class="numimg"
|
||
src="@/static/takeaway/jian.png" alt="" />
|
||
<view v-if="i.buyNum > 0" style="color: #0e1a24;">{{i.buyNum}}</view>
|
||
<image
|
||
v-if="(i.quota > 0 && i.buyNum >= i.quota) || i.buyNum >= i.no_buy_num"
|
||
:class="[i.isShow==false|| i.no_buy_num==0 &&discern== 0? 'imgIsShow': '']"
|
||
@click="addItem(i)" class="numimg" src="@/static/takeaway/add.png"
|
||
alt="" />
|
||
</view>
|
||
</template>
|
||
</van-card>
|
||
<!-- <view style="height: 140upx;"></view> -->
|
||
</view>
|
||
</view>
|
||
</view>
|
||
<!-- <view style="height: 100upx;"></view>
|
||
<view class="footer-box " v-if="chooseFoodList.length == 0">
|
||
<image class="notCheck" src="../../static/food/notCheck.png" mode="widthFix"></image>
|
||
<text>未选购商品</text>
|
||
</view>
|
||
<view class="pay-box" v-else>
|
||
<view class="fr-btn" @click="showAlert = true">购物车</view>
|
||
<view class="fl-box" @click="showAlert = true">
|
||
<image class="notCheck" src="../../static/icons/carChecked.png" mode="widthFix"></image>
|
||
<text>¥{{ totalPrice }}（{{ totalNum }}）</text>
|
||
</view>
|
||
</view> -->
|
||
<view class="fot">
|
||
<view class="fot_left" @click="showAlert = true">
|
||
<view class="fot_left_top">
|
||
<text class="hj">合计:</text>
|
||
<text class="pic">￥</text>
|
||
<text class="price">{{totalPrice}}</text>
|
||
</view>
|
||
<view class="fot_left_bottom" style="color:#4b5b6b"> 已选择<text>{{totalNum}}</text>件
|
||
</view>
|
||
</view>
|
||
<view class="fot_right" @click="submit">提交订单</view>
|
||
</view>
|
||
<!-- <view class="common-shade " v-if="chooseFoodList.length > 0 && showAlert">
|
||
<view class="list-box food-list box box-column box-between" style="overflow: hidden;">
|
||
<view style="flex-grow: 1;height: 200upx;overflow: auto;">
|
||
<view class="list-item" v-for="(item, index) in chooseFoodList" :key="index">
|
||
<view class="img-box">
|
||
<image :src="formatImgUrl(item.picture)" mode=""></image>
|
||
</view>
|
||
<view class="fr-content">
|
||
<view class="name">{{ item.food_name }}</view>
|
||
<view class="num"></view>
|
||
<view class="choose-num">
|
||
<image v-if="item.buyNum > 0" @click="removeItem(item)"
|
||
src="/static/icons/jian.png" mode=""></image>
|
||
<text v-if="item.buyNum > 0">{{ item.buyNum }}</text>
|
||
<image
|
||
v-if="(item.quota > 0 && item.buyNum >= item.quota) || item.buyNum >= item.no_buy_num"
|
||
src="/static/icons/no-jia.png" mode=""></image>
|
||
<image v-else @click="addItem(item)" src="/static/icons/jia.png" mode="">
|
||
</image>
|
||
</view>
|
||
<view class="price">¥{{ item.price }}/{{ item.company }}</view>
|
||
</view>
|
||
</view>
|
||
</view>
|
||
<view style="width: 100%;background: white;height: auto;">
|
||
<view class="box box-row" style="padding: 20upx;">
|
||
<view style="padding: 10upx 0upx;">备 注：</view>
|
||
<view
|
||
style="padding: 10upx;border: 1px solid #E5E5E5;border-radius: 10upx;flex-grow:1">
|
||
<view class="uni-textarea">
|
||
<textarea style="width: auto;" maxlength="40" v-model="remarks" focus
|
||
@blur="bindTextAreaBlur" fixed="true" auto-height
|
||
placeholder="如有额外要求，请填写" />
|
||
</view>
|
||
</view>
|
||
</view>
|
||
<view class="box box-center" style="padding: 20upx;">
|
||
<view
|
||
style="margin-right: 10%;border-radius: 10upx;padding: 20upx;background: #CCCCCC;width: 40%;text-align: center; color: white;"
|
||
@click="showAlert=false">取消</view>
|
||
<view
|
||
style="border-radius: 10upx;padding: 20upx;background: #00c277;width: 40%;text-align: center;color: white;"
|
||
@click="submit">提交订单</view>
|
||
</view>
|
||
</view>
|
||
</view>
|
||
</view>
|
||
</view>
|
||
<view v-if="currentTabIndex == 0&&(week==4||week==5||week==6||week==0)"
|
||
style="height: 100%;color: #666;background-color: white;height: 600upx;line-height: 60upx;padding-left: 50upx;padding-top: 40upx;">
|
||
外卖预订时间：每周一、周二、周三<br />外卖取餐时间：每周五
|
||
</view> -->
|
||
<van-action-sheet v-model="showAlert">
|
||
<template #description>
|
||
<!-- <view class="description_left">
|
||
<image @click="check_all" class="des_img"
|
||
:src="eckAll?'@/static/takeaway/Eck.png':'@/static/takeaway/nEck.png'" alt="">
|
||
<text style="color:#4b5b6b">当前已选{{n}}件商品</text>
|
||
</view> -->
|
||
<view class="description_right" @click="delShoppingCar">
|
||
<image class="des_img" src="@/static/takeaway/del.png" alt="">
|
||
<text>清空</text>
|
||
</view>
|
||
</template>
|
||
<template #default>
|
||
<view class="content tc">
|
||
<van-card v-for="(i,index) in chooseFoodList" :key="index" :price="i.price"
|
||
:desc="i.desc" :title="i.food_name">
|
||
<template #thumb>
|
||
<view class="shoppingcarimg">
|
||
<image @click="shopcareck(i.eck,index)" :src="i.eck?eck:nEck" alt="">
|
||
<image :src="i.picture" alt=""
|
||
onerror="javascript:getImage('img/common/img404.png')">
|
||
</view>
|
||
</template>
|
||
<template #price>
|
||
<view class="pic">
|
||
￥<text class="price">{{i.price}}</text>{{i.company? '/'+i.company : ''}}
|
||
</view>
|
||
</template>
|
||
<template #num>
|
||
<view class="numbox">
|
||
<image v-if="i.buyNum > 0" @click="removeItem(i)" class="numimg"
|
||
src="@/static/takeaway/jian.png" alt="">
|
||
<view v-if="i.buyNum > 0" style="color: #0e1a24;">{{i.buyNum}}
|
||
</view>
|
||
<image
|
||
v-if="(i.quota > 0 && i.buyNum >= i.quota) || i.buyNum >= i.no_buy_num"
|
||
@click="addItem(i)" class="numimg"
|
||
src="@/static/takeaway/add.png" alt="">
|
||
</view>
|
||
</template>
|
||
</van-card>
|
||
</view>
|
||
<view style="height: 2*37*2upx ;"></view>
|
||
</template>
|
||
</van-action-sheet>
|
||
</view>
|
||
|
||
</view>
|
||
<view v-if="currentTabIndex == 1">
|
||
<!-- <view class="food-list1" v-if="listInfo.length > 0">
|
||
<view class="main" v-for="(item, index) in listInfo" :key="index">
|
||
<view class="top">
|
||
<view class="dining">预订时间：{{ item.order_time }}</view>
|
||
<view class="status" v-if='item.order_status != 0'>预订成功</view>
|
||
<view class="status font-col" v-else-if='item.order_status == 0'>已取消</view>
|
||
<view class="status font-col" v-else>已过期</view>
|
||
</view>
|
||
<view style="font-size: 28upx;color: #666;padding:10upx 20upx">
|
||
<view style="padding: 6upx 0upx;">
|
||
取货地点：
|
||
<text style="color:#00c277">{{ item.take_food_place }}</text>
|
||
</view>
|
||
<view style="padding: 6upx 0upx;">
|
||
取货日期：
|
||
<text style="color:#00c277">{{ item.take_food_time }}</text>
|
||
</view>
|
||
<view v-if="item.remarks">
|
||
备 注：
|
||
<text style="color:#00c277">{{ item.remarks }}</text>
|
||
</view>
|
||
</view>
|
||
|
||
<view class="list-item" v-for="(it, index) in item.orderDetails" :key="index">
|
||
<view class="img-box">
|
||
<image :src="formatImgUrl(it.goods_icon)" mode=""
|
||
@click="vbPicture(new Array(formatImgUrl(it.goods_icon)))"></image>
|
||
</view>
|
||
<view class="fr-content">
|
||
<view class="name">
|
||
{{ it.goods_name }}
|
||
</view>
|
||
<view class="price">
|
||
<view style="float: left;">¥{{ it.price }}/{{ it.unit }}</view>
|
||
<view style="float: right;color: #666;padding-right: 20upx;">
|
||
x{{ it.goods_num }}
|
||
</view>
|
||
</view>
|
||
</view>
|
||
</view>
|
||
<view style="border-top: 1px solid #eee;height:100upx">
|
||
<view @click="cancelOrder(item)" v-if="item.order_status == 1&&item.compareTime"
|
||
style="border: 1px solid red; color: red;border-radius:40upx;float: left;padding: 6upx 30upx;font-size: 28upx;margin-top: 28upx;margin-left: 20upx;">
|
||
取消
|
||
</view>
|
||
<view style="float: right;font-size: 28upx;margin-top: 32upx;margin-right: 20upx;">
|
||
总金额：¥{{ item.pay_price }}</view>
|
||
</view>
|
||
</view>
|
||
</view>
|
||
<content-none v-else :padTop="20"></content-none> -->
|
||
<view class="list_box">
|
||
<van-pull-refresh v-model="refreshing" @refresh="onRefresh">
|
||
<van-empty :description="descriptionVal" v-if="listInfo.length==0 "></van-empty>
|
||
<view class="item_card" v-for="(i,index) in listInfo" :key="index">
|
||
<view class="card_top">
|
||
<view class="card_top_left">
|
||
<img :src="require('@/static/takeaway/rest_img.png')" alt="">
|
||
<view class="st">{{i.take_food_place}}</view>
|
||
<!-- <view class="order_num"
|
||
:style="active==2?'color:#0e1a24;font-size:0.373*37*2upx;margin-left:0':''">
|
||
订单编号
|
||
</view> -->
|
||
</view>
|
||
<view v-if='i.order_status == 0' class="card_top_right yd">已取消</view>
|
||
<view v-if='i.order_status == 3' class="card_top_right qx">已过期</view>
|
||
<view v-if='i.order_status == 1' class="card_top_right qx">预订成功</view>
|
||
</view>
|
||
<view class="card_con">
|
||
<view class="foodbox">
|
||
<view v-for="(k,dex) in i.orderDetails" class="onefood" :key="dex">
|
||
<image class="food_img" :src="k.goods_icon" alt="">
|
||
<view class="flex_name">
|
||
<view class="food_name">{{k.goods_name}}</view>
|
||
<view class="spec">
|
||
<view class="s-text">¥ <text
|
||
class="s-t-price">{{ k.price }}</text>/{{ k.unit }}
|
||
</view>
|
||
<view class="s-num">x{{ k.goods_num }}</view>
|
||
</view>
|
||
</view>
|
||
</view>
|
||
<!-- <view v-else class="morefood">
|
||
<view v-for="(k,dex) in i.orderDetails" :key="dex">
|
||
<img class="food_img" :src="k.goods_icon" alt="">
|
||
<view class="food_name">{{k.goods_name}}</view>
|
||
</view>
|
||
</view> -->
|
||
</view>
|
||
<!-- <view class="allNum">共{{i.allNum}}件</view> -->
|
||
</view>
|
||
<view class="card_bon">
|
||
<view>
|
||
预定时间：{{i.order_time}}
|
||
</view>
|
||
<view>
|
||
<span>总金额：￥ </span><span class="pic">{{i.pay_price}}</span>
|
||
</view>
|
||
</view>
|
||
</view>
|
||
<view v-if="page>1 && listInfo.length==0 || isNull"
|
||
style="text-align: center;padding: 5px 0;font-size: 15px;color: #a8a8a8;">
|
||
没有更多了
|
||
</view>
|
||
</van-pull-refresh>
|
||
</view>
|
||
</view>
|
||
</view>
|
||
</view>
|
||
</view>
|
||
</template>
|
||
|
||
<script>
|
||
import {
|
||
commodityList,
|
||
submitOrder,
|
||
myOrderList,
|
||
cancelOrder,
|
||
getAttrTypesForFood
|
||
} from '@/common/api.js';
|
||
import {
|
||
callbackRequest,
|
||
alertTip,
|
||
sureAlterTip,
|
||
getStorage,
|
||
vbPicture,
|
||
formatImgUrl
|
||
} from '@/common/util.js';
|
||
import contentNone from '@/components/contentNone.vue';
|
||
import loadMore from '@/components/loadMore.vue';
|
||
import datetimePicker from '@/components/dateTime.vue';
|
||
export default {
|
||
data() {
|
||
return {
|
||
week: new Date().getDay(),
|
||
vbPicture: vbPicture,
|
||
formatImgUrl: formatImgUrl,
|
||
dataActive: 0,
|
||
chooseClassifyIndex: 0, //选中的菜单下标
|
||
showAlert: false, //是否显示弹窗
|
||
kinds: [],
|
||
date: [],
|
||
takeFoodPlace: ['梨园', '科技楼'],
|
||
takeFoodPlaceIndex: 0,
|
||
|
||
foodList: [],
|
||
chooseFoodList: [], //选中的食品列表
|
||
foodListAll: {}, //所有商品
|
||
userId: getStorage('userInfo').id,
|
||
takeFoodTime: '',
|
||
currentTabIndex: 0,
|
||
orderList: [], //订单列表
|
||
listInfo: [],
|
||
page: 1,
|
||
pageSize: 10,
|
||
loadingType: 0, //0-loading前；1-loading中；2-没有更多了
|
||
contentText: {
|
||
contentdown: "上拉加载更多",
|
||
contentrefresh: "正在加载...",
|
||
contentnomore: "没有更多数据了"
|
||
},
|
||
userInfo: getStorage('userInfo'), //用户信息
|
||
submitFlag: true,
|
||
remarks: '',
|
||
// 新样式 新增
|
||
descriptionVal: '暂无菜品',
|
||
activeKey: 0, //左边菜品类型key值
|
||
finished: false,
|
||
refreshing: false,
|
||
isNull: false,
|
||
};
|
||
},
|
||
components: {
|
||
contentNone,
|
||
datetimePicker
|
||
},
|
||
computed: {
|
||
totalPrice() {
|
||
let totalPrice = 0;
|
||
this.chooseFoodList.forEach((v, i) => {
|
||
let itemTotalPrice = this.accMul(v.price, v.buyNum); //v.price * v.buyNum;
|
||
totalPrice += itemTotalPrice;
|
||
});
|
||
return Math.floor(totalPrice * 100) / 100;
|
||
},
|
||
totalNum() {
|
||
let totalNum = 0;
|
||
this.chooseFoodList.forEach((v, i) => {
|
||
totalNum += v.buyNum;
|
||
});
|
||
return totalNum;
|
||
}
|
||
},
|
||
onLoad(option) {
|
||
console.log('2222222222', this.week)
|
||
this.currentTabIndex = option.currentTabIndex || 0;
|
||
if (this.currentTabIndex == 0) {
|
||
// 初始化
|
||
this.chooseFoodList = [];
|
||
this.getAttrTypes();
|
||
// this.getList();
|
||
} else {
|
||
this.page = 1;
|
||
this.loadingType = 0;
|
||
this.initData();
|
||
}
|
||
},
|
||
watch: {
|
||
currentTabIndex: function(newVal, oldVal) {
|
||
if (newVal == 1) {
|
||
this.page = 1;
|
||
this.loadingType = 0;
|
||
this.initData();
|
||
} else {
|
||
this.chooseFoodList = [];
|
||
this.getAttrTypes();
|
||
// this.getList();
|
||
}
|
||
},
|
||
activeKey(n, o) { //监听左侧类型切换
|
||
this.foodList = []
|
||
// this.getrightlist(this.leftList[n])
|
||
this.kindClick(n)
|
||
},
|
||
},
|
||
onShow() {
|
||
|
||
},
|
||
methods: {
|
||
onRefresh() {
|
||
// 清空列表数据
|
||
this.finished = true;
|
||
this.initData();
|
||
},
|
||
accMul(arg1, arg2) {
|
||
var m = 0,
|
||
s1 = arg1.toString(),
|
||
s2 = arg2.toString();
|
||
try {
|
||
m += s1.split(".")[1].length
|
||
} catch (e) {}
|
||
try {
|
||
m += s2.split(".")[1].length
|
||
} catch (e) {}
|
||
return Number(s1.replace(".", "")) * Number(s2.replace(".", "")) / Math.pow(10, m)
|
||
},
|
||
choosePlace(index) {
|
||
this.takeFoodPlaceIndex = index;
|
||
},
|
||
compareTime(time1) {
|
||
var endDate = time1 + " 00:00:00";
|
||
endDate = endDate.replace(/-/g, '/');
|
||
var endDateTime = new Date(endDate).getTime();
|
||
var nowDateTime = new Date().getTime();
|
||
if (endDateTime > nowDateTime) {
|
||
return true;
|
||
} else {
|
||
return false;
|
||
}
|
||
},
|
||
getAttrTypes() {
|
||
let data = {
|
||
method: getAttrTypesForFood,
|
||
data: {
|
||
userId: this.userId
|
||
}
|
||
};
|
||
callbackRequest(data).then(res => {
|
||
console.log('分类', res)
|
||
if (res.data.returnCode == 1) {
|
||
this.kinds = res.data.returnData || [];
|
||
this.getList();
|
||
}
|
||
});
|
||
},
|
||
getList() {
|
||
let data = {
|
||
method: commodityList,
|
||
data: {
|
||
userId: this.userId,
|
||
attrType: this.kinds[this.chooseClassifyIndex].attr_name,
|
||
}
|
||
};
|
||
callbackRequest(data).then(res => {
|
||
if (res.data.returnCode == 1) {
|
||
let result = res.data.returnData || [];
|
||
for (var i = 0; i < this.chooseFoodList.length; i++) {
|
||
for (var j = 0; j < result.length; j++) {
|
||
if (this.chooseFoodList[i].id == result[j].id) {
|
||
result[j].buyNum = this.chooseFoodList[i].buyNum;
|
||
}
|
||
}
|
||
}
|
||
//this.foodListAll = result.locationDec;
|
||
this.foodList = result;
|
||
|
||
|
||
//this.kindClick(this.chooseClassifyIndex);
|
||
}
|
||
});
|
||
},
|
||
//切换分类
|
||
kindClick(index) {
|
||
this.chooseClassifyIndex = index;
|
||
this.getList();
|
||
// if (index == 0) {
|
||
// this.foodList = this.foodListAll.cookedFoodList || [];
|
||
// } else if (index == 1) {
|
||
// this.foodList = this.foodListAll.fruitList || [];
|
||
// } else if (index == 2) {
|
||
// this.foodList = this.foodListAll.coldDishList || [];
|
||
// } else if (index == 3) {
|
||
// this.foodList = this.foodListAll.hotDishList || [];
|
||
// } else if (index == 4) {
|
||
// this.foodList = this.foodListAll.vegetablesList || [];
|
||
// } else if (index == 5) {
|
||
// this.foodList = this.foodListAll.mainFoodList || [];
|
||
// }
|
||
},
|
||
//点击日期
|
||
switchTab(i) {
|
||
this.dataActive = i;
|
||
},
|
||
//加入购物车 || 购物车商品数量 加1
|
||
addItem(item) {
|
||
if (this.chooseFoodList.length == 0) {
|
||
this.$set(item, 'buyNum', 1);
|
||
this.chooseFoodList.push(item);
|
||
return false;
|
||
} else {
|
||
let boolean = this.chooseFoodList.every(function(value) {
|
||
return value.id != item.id;
|
||
});
|
||
console.log(boolean);
|
||
if (boolean) {
|
||
this.$set(item, 'buyNum', 1);
|
||
this.chooseFoodList.push(item);
|
||
} else {
|
||
item.buyNum++;
|
||
}
|
||
}
|
||
},
|
||
//购物车商品数量 减1
|
||
removeItem(item) {
|
||
// this.$set(item,item.buyNum --);
|
||
item.buyNum--;
|
||
if (item.buyNum == 0) {
|
||
this.chooseFoodList.forEach((v, i) => {
|
||
if (v.id == item.id) {
|
||
this.chooseFoodList.splice(i, 1);
|
||
if (this.chooseFoodList.length == 0) {
|
||
this.showAlert = false;
|
||
}
|
||
}
|
||
});
|
||
}
|
||
},
|
||
submit() {
|
||
if (!this.submitFlag) {
|
||
return;
|
||
}
|
||
this.submitFlag = false;
|
||
let arr = [];
|
||
this.chooseFoodList.forEach((v, i) => {
|
||
let item = {
|
||
goodsId: v.kinds_id,
|
||
goodsNum: v.buyNum
|
||
};
|
||
arr.push(item);
|
||
});
|
||
let data = {
|
||
method: submitOrder,
|
||
data: {
|
||
userId: this.userId,
|
||
diningRoomId: 3,
|
||
takeFoodTime: this.takeFoodTime,
|
||
takeFoodPlace: this.takeFoodPlace[this.takeFoodPlaceIndex],
|
||
orderDetails: arr,
|
||
remarks: this.remarks
|
||
}
|
||
};
|
||
callbackRequest(data).then(res => {
|
||
if (res.data.returnCode == 1) {
|
||
alertTip('预定成功');
|
||
setTimeout(function() {
|
||
uni.redirectTo({
|
||
url: '/pages/take-out2/take-out3?currentTabIndex=1'
|
||
});
|
||
}, 1500);
|
||
} else {
|
||
this.submitFlag = true;
|
||
alertTip(res.data.returnMsg);
|
||
}
|
||
});
|
||
},
|
||
initData() {
|
||
let data = {
|
||
"method": myOrderList,
|
||
data: {
|
||
userId: this.userInfo.id,
|
||
pageSize: this.pageSize,
|
||
pageNum: this.page
|
||
}
|
||
}
|
||
callbackRequest(data)
|
||
.then(res => {
|
||
if (res.data.returnCode == 1) {
|
||
if (res.data.returnData) {
|
||
let result = res.data.returnData || [];
|
||
if (this.page == 1) {
|
||
this.listInfo = result;
|
||
} else {
|
||
if (result.length > 0) {
|
||
this.listInfo = this.listInfo.concat(result);
|
||
this.loadingType = 0;
|
||
} else {
|
||
this.loadingType = 2;
|
||
}
|
||
}
|
||
for (var i = 0; i < this.listInfo.length; i++) {
|
||
var compareTime = this.compareTime(this.listInfo[i].take_food_time);
|
||
this.listInfo[i].compareTime = compareTime;
|
||
}
|
||
} else {
|
||
this.isNull = true
|
||
}
|
||
|
||
}
|
||
})
|
||
},
|
||
cancelOrder(item) {
|
||
let data = {
|
||
"method": cancelOrder,
|
||
data: {
|
||
userId: this.userInfo.id,
|
||
orderId: item.id
|
||
}
|
||
}
|
||
console.log(data);
|
||
uni.showModal({
|
||
content: '确认取消此订单 ?',
|
||
success: res => {
|
||
if (res.confirm) {
|
||
callbackRequest(data)
|
||
.then(res => {
|
||
if (res.data.returnCode == 1) {
|
||
alertTip('取消成功', 'success', 2000);
|
||
this.page = 1;
|
||
this.loadingType = 0;
|
||
setTimeout(_ => {
|
||
this.initData()
|
||
}, 1000);
|
||
}
|
||
})
|
||
}
|
||
}
|
||
})
|
||
},
|
||
onNavigationBarButtonTap: function() {
|
||
uni.navigateTo({
|
||
url: '../order-form/order-form'
|
||
});
|
||
},
|
||
chooseDate(e) {
|
||
this.takeFoodTime = e.time;
|
||
}
|
||
},
|
||
onReachBottom() {
|
||
if (this.loadingType !== 0) {
|
||
return;
|
||
}
|
||
this.loadingType = 1;
|
||
this.page = this.page + 1;
|
||
this.initData();
|
||
}
|
||
};
|
||
</script>
|
||
|
||
<style lang="scss" scoped>
|
||
@import '@/static/css/common.scss';
|
||
|
||
.hzIndex {
|
||
background-color: #f0f5fa;
|
||
}
|
||
|
||
.box {
|
||
display: flex;
|
||
display: -webkit-flex;
|
||
}
|
||
|
||
.box-row-reverse {
|
||
flex-direction: row;
|
||
}
|
||
|
||
/*水平排列*/
|
||
.box-column {
|
||
flex-direction: column;
|
||
}
|
||
|
||
/*上下排列*/
|
||
.box-left {
|
||
justify-content: flex-start;
|
||
}
|
||
|
||
/*居右*/
|
||
.box-right {
|
||
justify-content: flex-end;
|
||
}
|
||
|
||
/*居左*/
|
||
.box-center {
|
||
justify-content: center;
|
||
}
|
||
|
||
.box-between {
|
||
justify-content: space-between;
|
||
}
|
||
|
||
.box-align-center {
|
||
align-items: center;
|
||
}
|
||
|
||
.box-wrap {
|
||
flex-wrap: wrap;
|
||
margin-left: 28upx;
|
||
}
|
||
|
||
.container {
|
||
margin-top: 150upx;
|
||
|
||
.my-code {
|
||
background: #fff;
|
||
padding-top: 80rpx;
|
||
|
||
.code-box {
|
||
background: #fff;
|
||
overflow: hidden;
|
||
|
||
.code-img {
|
||
display: block;
|
||
width: 350rpx;
|
||
height: 350rpx;
|
||
margin: 70rpx auto 100rpx;
|
||
}
|
||
}
|
||
|
||
.money {
|
||
height: 60rpx;
|
||
text-align: center;
|
||
line-height: 60rpx;
|
||
font-size: 28rpx;
|
||
}
|
||
|
||
.tip {
|
||
font-size: 26rpx;
|
||
color: #666;
|
||
line-height: 40rpx;
|
||
padding: 0 0 30rpx;
|
||
text-align: center;
|
||
}
|
||
}
|
||
}
|
||
|
||
.uni-list {
|
||
background: #fff;
|
||
|
||
.list-item {
|
||
border-bottom: 10upx solid #f8f8f8;
|
||
padding: 30upx 20upx;
|
||
|
||
.content {
|
||
overflow: hidden;
|
||
|
||
.image-box {
|
||
float: left;
|
||
width: 200upx;
|
||
height: 200upx;
|
||
|
||
image {
|
||
display: block;
|
||
width: 100%;
|
||
height: 100%;
|
||
}
|
||
}
|
||
|
||
.fr-content {
|
||
margin-left: 220upx;
|
||
font-size: 26upx;
|
||
|
||
.text {
|
||
color: #666;
|
||
line-height: 40upx;
|
||
margin-bottom: 10upx;
|
||
|
||
text {
|
||
float: left;
|
||
color: #333;
|
||
padding-right: 10upx;
|
||
}
|
||
}
|
||
|
||
.status {
|
||
color: red;
|
||
margin-left: 280upx;
|
||
position: absolute;
|
||
}
|
||
}
|
||
}
|
||
|
||
.bottom {
|
||
overflow: hidden;
|
||
padding: 10upx 20upx 0;
|
||
|
||
.num-box {
|
||
float: left;
|
||
font-size: 28upx;
|
||
color: #333;
|
||
line-height: 40upx;
|
||
padding-top: 20upx;
|
||
|
||
text {
|
||
color: #5fbf3d;
|
||
padding-left: 4upx;
|
||
}
|
||
}
|
||
|
||
.vote-btn {
|
||
float: right;
|
||
width: 160upx;
|
||
height: 60upx;
|
||
background: #5fbf3d;
|
||
font-size: 26upx;
|
||
color: #fff;
|
||
text-align: center;
|
||
line-height: 60upx;
|
||
border-radius: 4upx;
|
||
}
|
||
}
|
||
}
|
||
}
|
||
|
||
.raffle {
|
||
width: 600rpx;
|
||
height: 600rpx;
|
||
}
|
||
|
||
.main {
|
||
.cont {
|
||
margin: 0px -44upx 0px -44upx;
|
||
}
|
||
|
||
.tab-box {
|
||
padding: 0 24upx;
|
||
width: 80%;
|
||
display: flex;
|
||
font-size: 36upx;
|
||
color: #555555;
|
||
|
||
.active_tab {
|
||
font-weight: 800;
|
||
|
||
}
|
||
|
||
.tab-item {
|
||
width: 40%;
|
||
|
||
.tabBottom {
|
||
width: 28%;
|
||
height: 6upx;
|
||
border-radius: 5px;
|
||
background-image: linear-gradient(to right, #64E182, #1CA7B2);
|
||
}
|
||
}
|
||
}
|
||
|
||
.tip {
|
||
font-size: 26upx;
|
||
text-align: center;
|
||
color: #00c277;
|
||
margin: 10upx;
|
||
}
|
||
|
||
.classify-box {
|
||
float: left;
|
||
width: 150upx;
|
||
height: 100%;
|
||
background: #eee;
|
||
overflow: auto;
|
||
|
||
.classify-item {
|
||
padding: 30upx 0;
|
||
line-height: 40upx;
|
||
text-align: center;
|
||
|
||
text {
|
||
font-size: 26upx;
|
||
color: #666;
|
||
}
|
||
}
|
||
|
||
.active {
|
||
background: #fff;
|
||
|
||
text: {
|
||
color: #00c277;
|
||
}
|
||
}
|
||
}
|
||
}
|
||
|
||
.food-list {
|
||
margin-left: 150upx;
|
||
height: 100%;
|
||
overflow: auto;
|
||
background: #fff;
|
||
|
||
.list-item {
|
||
overflow: hidden;
|
||
padding: 20upx 14upx;
|
||
border-bottom: 1px solid #f8f8f8;
|
||
|
||
.img-box {
|
||
float: left;
|
||
width: 120upx;
|
||
height: 120upx;
|
||
|
||
image {
|
||
display: block;
|
||
width: 100%;
|
||
height: 100%;
|
||
}
|
||
}
|
||
|
||
.fr-content {
|
||
margin-left: 140upx;
|
||
|
||
.name {
|
||
font-size: 30upx;
|
||
color: #333;
|
||
font-weight: bold;
|
||
//@include overstepOne;
|
||
line-height: 40upx;
|
||
margin-bottom: 6upx;
|
||
}
|
||
|
||
.num {
|
||
height: 30upx;
|
||
font-size: 26upx;
|
||
color: #666;
|
||
line-height: 40upx;
|
||
margin-bottom: 6upx;
|
||
}
|
||
|
||
.quota-num {
|
||
min-height: 50rpx;
|
||
}
|
||
|
||
.buy-num {
|
||
display: inline-block;
|
||
border: 1px solid #ff0000;
|
||
font-size: 24upx;
|
||
color: #ff0000;
|
||
border-radius: 8upx;
|
||
line-height: 32upx;
|
||
padding: 0 10upx;
|
||
vertical-align: top;
|
||
}
|
||
|
||
.choose-num {
|
||
float: right;
|
||
|
||
image {
|
||
width: 40upx;
|
||
height: 40upx;
|
||
vertical-align: top;
|
||
}
|
||
|
||
text {
|
||
display: inline-block;
|
||
font-size: 28upx;
|
||
color: #666;
|
||
width: 80upx;
|
||
text-align: center;
|
||
line-height: 40upx;
|
||
vertical-align: top;
|
||
}
|
||
}
|
||
|
||
.price {
|
||
font-size: 32upx;
|
||
color: #ff0000;
|
||
}
|
||
}
|
||
}
|
||
}
|
||
|
||
.footer-box {
|
||
position: fixed;
|
||
bottom: 0;
|
||
left: 0;
|
||
width: 100%;
|
||
height: 80upx;
|
||
background: #7ae5bc;
|
||
text-align: center;
|
||
line-height: 80upx;
|
||
|
||
image {
|
||
width: 50upx;
|
||
vertical-align: middle;
|
||
}
|
||
|
||
text {
|
||
font-size: 30upx;
|
||
color: #fff;
|
||
vertical-align: middle;
|
||
padding-left: 10upx;
|
||
}
|
||
}
|
||
|
||
.pay-box {
|
||
position: fixed;
|
||
bottom: 0;
|
||
left: 0;
|
||
width: 100%;
|
||
height: 80upx;
|
||
background: #fff;
|
||
line-height: 80upx;
|
||
|
||
.fl-box {
|
||
// display: inline-block;
|
||
// float:left;
|
||
padding: 10upx 0 0 30upx;
|
||
line-height: 60upx;
|
||
margin-right: 230rpx;
|
||
|
||
image {
|
||
width: 50upx;
|
||
vertical-align: middle;
|
||
margin: 6upx 24upx 0 0;
|
||
vertical-align: top;
|
||
}
|
||
|
||
text {
|
||
font-size: 28upx;
|
||
color: #00c277;
|
||
vertical-align: top;
|
||
}
|
||
}
|
||
|
||
.fr-btn {
|
||
float: right;
|
||
width: 200upx;
|
||
background: #00c277;
|
||
font-size: 28upx;
|
||
color: #fff;
|
||
text-align: center;
|
||
line-height: 80upx;
|
||
}
|
||
}
|
||
|
||
.common-shade {
|
||
|
||
// bottom: 80upx;
|
||
// height: auto;
|
||
.list-box {
|
||
width: 85%;
|
||
height: 50%;
|
||
position: absolute;
|
||
top: 10%;
|
||
left: 0;
|
||
background: #fff;
|
||
margin-left: 7%;
|
||
border-radius: 10upx;
|
||
}
|
||
}
|
||
|
||
.food-list1 {
|
||
height: 100%;
|
||
overflow: auto;
|
||
background: #f8f8f8;
|
||
|
||
// margin: 15upx;
|
||
.main {
|
||
background: #ffffff;
|
||
margin: 10upx;
|
||
border-radius: 10upx;
|
||
margin-bottom: 20upx;
|
||
|
||
.top {
|
||
border-bottom: 1px solid #eee;
|
||
padding: 20upx;
|
||
overflow: hidden;
|
||
|
||
.dining {
|
||
float: left;
|
||
font-size: 24upx;
|
||
line-height: 40upx;
|
||
color: #555;
|
||
}
|
||
|
||
.status {
|
||
float: right;
|
||
font-size: 24upx;
|
||
color: #00c277;
|
||
line-height: 40upx;
|
||
}
|
||
|
||
.font-col {
|
||
color: #999;
|
||
}
|
||
}
|
||
|
||
.bottom {
|
||
border-top: 1px solid #eee;
|
||
overflow: hidden;
|
||
height: 80upx;
|
||
line-height: 68upx;
|
||
padding-left: 20upx;
|
||
|
||
.order-time {
|
||
font-size: 26rpx;
|
||
color: #666;
|
||
}
|
||
|
||
.price {
|
||
float: right;
|
||
font-size: 28upx;
|
||
color: #666;
|
||
|
||
.btn {
|
||
border: 1px solid #00C277;
|
||
border-radius: 10upx;
|
||
padding: 0upx 20upx;
|
||
color: #00C277;
|
||
height: 60upx;
|
||
line-height: 60upx;
|
||
margin-top: 8upx;
|
||
margin-right: 20upx;
|
||
}
|
||
}
|
||
}
|
||
}
|
||
|
||
.list-item {
|
||
overflow: hidden;
|
||
padding: 10upx 10upx 20upx 5upx;
|
||
|
||
.img-box {
|
||
border-radius: 10upx;
|
||
float: left;
|
||
width: 120upx;
|
||
height: 120upx;
|
||
|
||
image {
|
||
display: block;
|
||
width: 100%;
|
||
height: 100%;
|
||
border-radius: 6px;
|
||
margin-left: 20upx;
|
||
}
|
||
}
|
||
|
||
.fr-content {
|
||
margin-left: 160upx;
|
||
|
||
.name {
|
||
font-size: 32upx;
|
||
color: #333;
|
||
@include overstepOne;
|
||
line-height: 40upx;
|
||
margin-bottom: 6upx;
|
||
}
|
||
|
||
.num {
|
||
height: 30upx;
|
||
font-size: 26upx;
|
||
color: #666;
|
||
line-height: 40upx;
|
||
margin-bottom: 6upx;
|
||
}
|
||
|
||
.quota-num {
|
||
min-height: 50rpx;
|
||
}
|
||
|
||
.buy-num {
|
||
display: inline-block;
|
||
border: 1px solid #ff0000;
|
||
font-size: 24upx;
|
||
color: #ff0000;
|
||
border-radius: 8upx;
|
||
line-height: 32upx;
|
||
padding: 0 10upx;
|
||
vertical-align: top;
|
||
}
|
||
|
||
.choose-num {
|
||
float: right;
|
||
|
||
image {
|
||
width: 40upx;
|
||
height: 40upx;
|
||
vertical-align: top;
|
||
}
|
||
|
||
text {
|
||
display: inline-block;
|
||
font-size: 28upx;
|
||
color: #666;
|
||
width: 80upx;
|
||
text-align: center;
|
||
line-height: 40upx;
|
||
vertical-align: top;
|
||
}
|
||
|
||
.fl {
|
||
float: right;
|
||
padding: 10upx 20upx;
|
||
font-size: 24upx;
|
||
color: $assistColor;
|
||
line-height: 32upx;
|
||
border: 1px solid $assistColor;
|
||
border-radius: 8upx;
|
||
margin-left: 10upx;
|
||
}
|
||
}
|
||
|
||
.price {
|
||
font-size: 28upx;
|
||
margin-top: 52upx;
|
||
}
|
||
|
||
.ct {
|
||
margin-left: 20upx;
|
||
color: #ff00009c;
|
||
}
|
||
}
|
||
}
|
||
}
|
||
|
||
// 新版本样式
|
||
.reservation-box {
|
||
margin-top: 40upx;
|
||
}
|
||
|
||
.search-box {
|
||
margin: 0 24upx;
|
||
background: #FFFFFF;
|
||
border-radius: 10*2upx;
|
||
overflow: hidden;
|
||
}
|
||
|
||
.barber {
|
||
margin-top: 16upx;
|
||
margin-left: 24upx;
|
||
margin-bottom: 24upx;
|
||
// border-bottom: 1px solid #eee;
|
||
}
|
||
|
||
.barber-box {
|
||
display: flex;
|
||
flex-direction: row;
|
||
align-items: center;
|
||
margin-top: 24upx;
|
||
margin-left: 40upx;
|
||
}
|
||
|
||
.barber-item {
|
||
width: 100*2upx;
|
||
height: 38*2upx;
|
||
background: #F2F6FA;
|
||
border-radius: 4*2upx;
|
||
border: 1px solid #F2F6FA;
|
||
line-height: 38*2upx;
|
||
color: #555555;
|
||
text-align: center;
|
||
font-size: 28upx;
|
||
margin-left: 28upx;
|
||
}
|
||
|
||
.barber-item:first-child {
|
||
margin-left: 0;
|
||
}
|
||
|
||
.barber-item:last-child {
|
||
margin-left: 62upx;
|
||
}
|
||
|
||
.barberactive {
|
||
background: #EDFCF7;
|
||
border: 1px solid #00ADA6;
|
||
color: #0DB0A7;
|
||
}
|
||
|
||
.sidebarWc {
|
||
height: calc(100vh - 344upx) !important;
|
||
}
|
||
|
||
.van-sidebar {
|
||
width: 2.6*37*2upx;
|
||
height: calc(100vh - 464upx);
|
||
padding-bottom: 150upx;
|
||
background-color: #f0f5fa;
|
||
box-sizing: border-box;
|
||
|
||
.van-sidebar-item {
|
||
padding-left: 0.54*37*2upx;
|
||
background-color: #f0f5fa;
|
||
}
|
||
|
||
.van-sidebar-item__text {
|
||
color: #0e1a24;
|
||
}
|
||
|
||
.van-sidebar-item--select,
|
||
.van-sidebar-item--select:active {
|
||
border-radius: 0;
|
||
background-color: #fff;
|
||
}
|
||
}
|
||
|
||
.van-sidebar::-webkit-scrollbar {
|
||
display: none;
|
||
}
|
||
|
||
.con_right::-webkit-scrollbar {
|
||
display: none;
|
||
}
|
||
|
||
|
||
|
||
.van-popover__action {
|
||
width: 1.8*37*2upx;
|
||
}
|
||
|
||
|
||
|
||
.nav_check {
|
||
display: flex;
|
||
position: relative;
|
||
width: calc(100% - 0.64*37*2upx);
|
||
margin: 0.26*37*2upx auto 0.12*37*2upx;
|
||
align-items: flex-end;
|
||
}
|
||
|
||
.nav_check>view {
|
||
height: 1.32*37*2upx;
|
||
width: 100%;
|
||
display: flex;
|
||
justify-content: center;
|
||
align-items: end;
|
||
padding-bottom: 0.2*37*2upx;
|
||
padding-left: 0.3*37*2upx;
|
||
font-size: 0.427*37*2upx;
|
||
position: relative;
|
||
}
|
||
|
||
.nav_check>view>image {
|
||
position: absolute;
|
||
z-index: 0;
|
||
height: 1.08*37*2upx;
|
||
width: 104%;
|
||
}
|
||
|
||
.nav_rightimg {
|
||
right: 0;
|
||
}
|
||
|
||
.nav_check>view>view {
|
||
position: absolute;
|
||
bottom: .5946*37*2upx;
|
||
z-index: 5;
|
||
}
|
||
|
||
.bana {
|
||
/* height: 2.68*37*2upx ; */
|
||
width: calc(100% - 48upx);
|
||
margin: 0 auto;
|
||
padding: 0.36*37*2upx;
|
||
position: relative;
|
||
box-sizing: border-box;
|
||
border-radius: 0.27*37*2upx;
|
||
border: 1px solid #fff;
|
||
background-image: linear-gradient(to right, #C1E0ff, #C9F8FA);
|
||
font-size: 0.3*37*2upx;
|
||
color: #0370ce;
|
||
}
|
||
|
||
.nb {
|
||
width: 1.68*37*2upx;
|
||
height: 1.44*37*2upx;
|
||
position: absolute;
|
||
bottom: 0;
|
||
right: 0;
|
||
}
|
||
|
||
.bana>view {
|
||
display: flex;
|
||
align-items: center;
|
||
margin-bottom: 0.2*37*2upx;
|
||
}
|
||
|
||
.bana>view>image {
|
||
width: 0.3*37*2upx;
|
||
height: 0.3*37*2upx;
|
||
margin-right: 0.1*37*2upx;
|
||
}
|
||
|
||
.consty {
|
||
// height: 81.3%;
|
||
background: #fff;
|
||
margin-right: 24upx;
|
||
|
||
.con {
|
||
display: flex;
|
||
margin-top: 0.32 * 37 * 2upx;
|
||
height: calc(100% - 120upx);
|
||
// padding-right: 0.32*37*2upx;
|
||
}
|
||
|
||
.con_right {
|
||
border-radius: 0 0.2*37*2upx 0 0;
|
||
overflow: auto;
|
||
background-color: #fff;
|
||
width: calc(100% - 80px);
|
||
padding-top: 0.27*37*2upx;
|
||
height: calc(100vh - 464upx);
|
||
padding-bottom: 150upx
|
||
}
|
||
}
|
||
|
||
.numbox {
|
||
display: flex;
|
||
align-items: center;
|
||
}
|
||
|
||
.numbox>view {
|
||
margin: 0 0.2*37*2upx;
|
||
font-size: 0.42*37*2upx;
|
||
}
|
||
|
||
.numimg {
|
||
width: 0.53*37*2upx;
|
||
height: 0.53*37*2upx;
|
||
}
|
||
|
||
.van-card {
|
||
background-color: #fff;
|
||
/* width: 8.3333*37*2upx ; */
|
||
}
|
||
|
||
.van-sidebar-item--select::before {
|
||
width: 0.24*37*2upx;
|
||
height: 0.48*37*2upx;
|
||
/* background-color: #00ada6; */
|
||
background-image: linear-gradient(to right, #56cc9d, #04aea5);
|
||
;
|
||
border-radius: 0 0.24*37*2upx 0.2*37*2upx 0;
|
||
}
|
||
|
||
.fot {
|
||
width: calc(100% - 48upx);
|
||
height: 1.33*37*2upx;
|
||
background-color: #fff;
|
||
position: fixed;
|
||
z-index: 3000;
|
||
bottom: 0.4*37*2upx;
|
||
left: 50%;
|
||
transform: translate(-50%);
|
||
border-radius: 0.66*37*2upx;
|
||
overflow: hidden;
|
||
display: flex;
|
||
box-shadow: 0 0 0.2*37*2upx 0 #e7eff9;
|
||
}
|
||
|
||
.fot_left {
|
||
width: calc(100% - 214upx);
|
||
height: 100%;
|
||
padding-left: 0.66*37*2upx;
|
||
padding-top: 0.1*37*2upx;
|
||
/* background-color: red; */
|
||
}
|
||
|
||
.fot_right {
|
||
width: 214upx;
|
||
height: 100%;
|
||
background-image: linear-gradient(to right, #56cc9d, #04aea5);
|
||
font-size: 0.42*37*2upx;
|
||
color: #fff;
|
||
text-align: center;
|
||
line-height: 1.33*37*2upx;
|
||
}
|
||
|
||
.hj {
|
||
color: #0e1a24;
|
||
font-size: 0.42*37*2upx;
|
||
font-weight: 600;
|
||
}
|
||
|
||
.pic,
|
||
.price {
|
||
color: #fc701e;
|
||
}
|
||
|
||
.pic {
|
||
font-size: 26upx;
|
||
}
|
||
|
||
.price {
|
||
font-weight: 600;
|
||
font-size: 40upx;
|
||
}
|
||
|
||
.fot_left_top {
|
||
margin-bottom: 0.05*37*2upx;
|
||
}
|
||
|
||
.fot_left_bottom {
|
||
font-size: 0.32*37*2upx;
|
||
}
|
||
|
||
.van-action-sheet__content .content {
|
||
background-color: #fff;
|
||
max-height: 416upx;
|
||
}
|
||
|
||
.van-action-sheet__description {
|
||
height: 1.17*37*2upx;
|
||
background-color: #f6f9ff;
|
||
box-sizing: border-box;
|
||
display: flex;
|
||
justify-content: space-between;
|
||
align-items: center;
|
||
font-size: 0.37*37*2upx;
|
||
}
|
||
|
||
.van-card__content {
|
||
/* padding: 0.2*37*2upx 0; */
|
||
box-sizing: border-box;
|
||
}
|
||
|
||
.description_left {
|
||
color: #0e1a24;
|
||
display: flex;
|
||
align-items: center;
|
||
}
|
||
|
||
.description_right {
|
||
color: #97a5b1;
|
||
display: flex;
|
||
align-items: center;
|
||
}
|
||
|
||
.des_img {
|
||
width: 0.48*37*2upx;
|
||
height: 0.48*37*2upx;
|
||
margin-right: 0.1*37*2upx;
|
||
}
|
||
|
||
.van-card__title {
|
||
font-size: 30upx;
|
||
color: #0e1a23;
|
||
font-weight: 600;
|
||
line-height: normal;
|
||
}
|
||
|
||
.van-card__desc {
|
||
font-size: 0.26*37*2upx;
|
||
color: #97a5b1;
|
||
}
|
||
|
||
.shoppingcarimg {
|
||
display: flex;
|
||
align-items: center;
|
||
}
|
||
|
||
.shoppingcarimg>image:first-child {
|
||
width: 0.53*37*2upx;
|
||
height: 0.53*37*2upx;
|
||
margin-right: 0.32*37*2upx;
|
||
}
|
||
|
||
.foodImg image {
|
||
width: 176upx;
|
||
height: 176upx;
|
||
border-radius: 10upx;
|
||
}
|
||
|
||
.shoppingcarimg>image:last-child {
|
||
width: 2.35*37*2upx;
|
||
height: 2.35*37*2upx;
|
||
}
|
||
|
||
.tc .van-card__thumb {
|
||
width: 3.26*37*2upx;
|
||
}
|
||
|
||
.van-sidebar-item--select,
|
||
.van-sidebar-item--select:active {
|
||
font-weight: 600;
|
||
font-size: 0.373*37*2upx;
|
||
color: #0e1a24;
|
||
}
|
||
|
||
.no_buy_num {
|
||
/* margin-top: 0.1*37*2upx ; */
|
||
|
||
}
|
||
|
||
// 新 预定列表 样式
|
||
.list_box {
|
||
margin-top: 24upx;
|
||
}
|
||
|
||
.item_card {
|
||
width: 9.36*37*2upx;
|
||
background-color: #fff;
|
||
margin: 0 auto 0.32*37*2upx;
|
||
border-radius: 0.27*37*2upx;
|
||
padding: 0.37*37*2upx 0.32*37*2upx;
|
||
}
|
||
|
||
.card_top {
|
||
display: flex;
|
||
align-items: center;
|
||
justify-content: space-between;
|
||
}
|
||
|
||
.card_top_left {
|
||
display: flex;
|
||
align-items: center;
|
||
}
|
||
|
||
.card_top_left>img {
|
||
width: 0.427*37*2upx;
|
||
height: 0.427*37*2upx;
|
||
margin-right: 0.2*37*2upx;
|
||
}
|
||
|
||
.st {
|
||
font-size: 16px;
|
||
font-weight: 600;
|
||
color: #0e1a24;
|
||
}
|
||
|
||
.card_top_left>span:nth-of-type(1) {
|
||
font-size: 0.427*37*2upx;
|
||
font-weight: 600;
|
||
}
|
||
|
||
.order_num {
|
||
font-size: 0.32*37*2upx;
|
||
color: #97a5b1;
|
||
margin-left: 0.2*37*2upx;
|
||
}
|
||
|
||
.card_top_right {
|
||
width: 160upx;
|
||
height: 56upx;
|
||
font-size: 28upx;
|
||
text-align: center;
|
||
line-height: 56upx;
|
||
border-radius: 30upx;
|
||
}
|
||
|
||
.yd {
|
||
background-color: #E0F6F5;
|
||
color: #00ADA6;
|
||
}
|
||
|
||
.qx {
|
||
background-color: #FFF3E7;
|
||
color: #FB8107;
|
||
}
|
||
|
||
.card_con {
|
||
width: 100%;
|
||
box-sizing: border-box;
|
||
display: flex;
|
||
margin-bottom: 24upx;
|
||
justify-content: space-between;
|
||
}
|
||
|
||
.foodbox {
|
||
width: 100%;
|
||
}
|
||
|
||
.food_img {
|
||
display: flex;
|
||
flex-shrink: 0;
|
||
width: 66*2upx;
|
||
height: 66*2upx;
|
||
border-radius: 10*2upx;
|
||
// background: #97A5B1;
|
||
}
|
||
|
||
.flex_name {
|
||
width: 100%;
|
||
display: flex;
|
||
flex-direction: column;
|
||
justify-content: space-around;
|
||
margin-left: 18upx;
|
||
|
||
.food_name {
|
||
font-size: 0.374*37*2upx;
|
||
color: #0e1a24;
|
||
overflow: hidden;
|
||
white-space: nowrap;
|
||
text-overflow: ellipsis;
|
||
width: 2.35*37*2upx;
|
||
}
|
||
|
||
.spec {
|
||
display: flex;
|
||
flex-direction: row;
|
||
align-items: center;
|
||
justify-content: space-between;
|
||
font-size: 10*2upx;
|
||
|
||
.s-text {
|
||
font-size: 12*2upx;
|
||
|
||
.s-t-price {
|
||
font-weight: bold;
|
||
font-size: 16*2upx;
|
||
color: #555555;
|
||
}
|
||
}
|
||
|
||
.s-num {
|
||
font-size: 14*2upx;
|
||
}
|
||
}
|
||
}
|
||
|
||
.allNum {
|
||
font-size: 0.32*37*2upx;
|
||
color: #4b5b6b;
|
||
display: flex;
|
||
align-items: center;
|
||
}
|
||
|
||
.onefood {
|
||
display: flex;
|
||
margin-top: 24upx;
|
||
// align-items: center;
|
||
}
|
||
|
||
.onefood>img {
|
||
margin-right: 0.32*37*2upx;
|
||
}
|
||
|
||
.morefood {
|
||
display: flex;
|
||
}
|
||
|
||
.morefood>view {
|
||
margin-right: 0.2*37*2upx;
|
||
}
|
||
|
||
.card_bon {
|
||
display: flex;
|
||
align-items: flex-end;
|
||
font-size: 28upx;
|
||
justify-content: space-between;
|
||
}
|
||
|
||
.card_bon>view:first-child {
|
||
font-size: 0.32*37*2upx;
|
||
color: #999999;
|
||
}
|
||
|
||
.pic {
|
||
font-size: 18*2upx;
|
||
color: #333333;
|
||
font-weight: 600
|
||
}
|
||
|
||
.van-tab {
|
||
color: #4b5b6b;
|
||
}
|
||
|
||
.van-tab--active {
|
||
color: #04aea5 !important;
|
||
font-weight: 600;
|
||
}
|
||
</style> |