556 lines
12 KiB
Vue
556 lines
12 KiB
Vue
<template>
|
||
<view class="">
|
||
<view class="main">
|
||
<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.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="item.picture" mode=""></image>
|
||
</view>
|
||
<view class="fr-content">
|
||
<view class="name">{{item.food_name}}</view>
|
||
<view class="num">剩余{{item.no_buy_num}}份</view>
|
||
<view class="quota-num">
|
||
<view class="buy-num" v-if="item.quota > 0">限购{{item.quota}}份</view>
|
||
</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>
|
||
<!-- <image v-if="item.buyNum < item.quota && item.buyNum < item.no_buy_num" @click="addItem(item)" src="/static/icons/jia.png" mode=""></image>
|
||
<image v-else src="/static/icons/no-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="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="submit">提交订单</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="common-shade" v-if="chooseFoodList.length > 0 && showAlert" @click="showAlert = false">
|
||
<view class="list-box food-list" @click.stop="">
|
||
<view class="list-item" v-for="(item,index) in chooseFoodList" :key="index">
|
||
<view class="img-box">
|
||
<image :src="item.picture" mode=""></image>
|
||
</view>
|
||
<view class="fr-content">
|
||
<view class="name">{{item.name}}</view>
|
||
<view class="num">剩余{{item.no_buy_num}}份</view>
|
||
<view class="quota-num">
|
||
<view class="buy-num" v-if="item.quota > 0">限购{{item.quota}}份</view>
|
||
</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.unit}}</view>
|
||
</view>
|
||
</view>
|
||
</view>
|
||
</view>
|
||
</view>
|
||
</template>
|
||
<script>
|
||
import {commodityList,submitOrder} from '@/common/api.js';
|
||
import {callbackRequest,alertTip,sureAlterTip,getStorage} from '@/common/util.js';
|
||
import contentNone from '@/components/contentNone.vue';
|
||
import datetimePicker from '@/components/dateTime.vue';
|
||
export default {
|
||
data() {
|
||
return {
|
||
dataActive:0,
|
||
chooseClassifyIndex:0,//选中的菜单下标
|
||
showAlert:false,//是否显示弹窗
|
||
kinds : [
|
||
{
|
||
id:'1',
|
||
name: '熟食',
|
||
},
|
||
{
|
||
id:'2',
|
||
name: '水果',
|
||
},
|
||
{
|
||
id:'3',
|
||
name: '凉菜',
|
||
},
|
||
{
|
||
id:'4',
|
||
name: '热菜',
|
||
},
|
||
{
|
||
id:'5',
|
||
name: '蔬菜',
|
||
},
|
||
{
|
||
id:'6',
|
||
name: '主食',
|
||
},
|
||
],
|
||
date : [
|
||
{ tiems: "12-13", week: "星期五" },
|
||
{ tiems: "12-14", week: "星期六" },
|
||
{ tiems: "12-15", week: "星期日" },
|
||
{ tiems: "12-16", week: "星期一" },
|
||
{ tiems: "12-17", week: "星期二" },
|
||
{ tiems: "12-18", week: "星期三" },
|
||
{ tiems: "12-19", week: "星期四" },
|
||
{ tiems: "12-20", week: "星期五" },
|
||
{ tiems: "12-21", week: "星期六" },
|
||
{ tiems: "12-22", week: "星期日" },
|
||
{ tiems: "12-23", week: "星期一" },
|
||
{ tiems: "12-24", week: "星期二" },
|
||
],
|
||
foodList:[],
|
||
chooseFoodList:[],//选中的食品列表
|
||
foodListAll:{},//所有商品
|
||
userId:getStorage('userInfo').id,
|
||
takeFoodTime:""
|
||
}
|
||
},
|
||
components:{
|
||
contentNone,
|
||
datetimePicker
|
||
},
|
||
computed:{
|
||
totalPrice(){
|
||
let totalPrice = 0;
|
||
this.chooseFoodList.forEach((v,i) => {
|
||
let itemTotalPrice = v.price * v.buyNum;
|
||
totalPrice += itemTotalPrice;
|
||
})
|
||
return totalPrice;
|
||
},
|
||
totalNum(){
|
||
let totalNum = 0;
|
||
this.chooseFoodList.forEach((v,i) => {
|
||
totalNum += v.buyNum;
|
||
})
|
||
return totalNum;
|
||
}
|
||
},
|
||
onShow(){
|
||
this.chooseFoodList = [];
|
||
this.getList()
|
||
},
|
||
methods: {
|
||
getList(){
|
||
let data = {
|
||
"method": commodityList,
|
||
data:{userId:this.userId,locationId:3}
|
||
}
|
||
callbackRequest(data)
|
||
.then(res => {
|
||
if(res.data.returnCode == 1){
|
||
let result = res.data.returnData;
|
||
this.foodListAll = result.locationDec;
|
||
this.kindClick(this.chooseClassifyIndex);
|
||
}
|
||
})
|
||
},
|
||
//切换分类
|
||
kindClick(index){
|
||
this.chooseClassifyIndex = index;
|
||
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.takeFoodTime){
|
||
alertTip('请选择取餐时间');
|
||
return;
|
||
}
|
||
if(new Date(this.takeFoodTime + ':00') < new Date()){
|
||
alertTip('取餐时间应大于当前时间');
|
||
return;
|
||
}
|
||
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,
|
||
orderDetails:arr
|
||
|
||
}
|
||
}
|
||
callbackRequest(data)
|
||
.then(res => {
|
||
if(res.data.returnCode == 1){
|
||
alertTip('预定成功');
|
||
setTimeout(function() {
|
||
uni.navigateTo({
|
||
url:'/pages/order-form/order-form'
|
||
})
|
||
}, 1500);
|
||
}else{
|
||
alertTip(res.data.returnMsg);
|
||
}
|
||
})
|
||
},
|
||
onNavigationBarButtonTap : function(){
|
||
uni.navigateTo({
|
||
url: '../order-form/order-form'
|
||
})
|
||
},
|
||
chooseDate(e){
|
||
this.takeFoodTime = e.time;
|
||
}
|
||
}
|
||
}
|
||
</script>
|
||
|
||
<style lang="scss">
|
||
@import '@/static/css/common.scss';
|
||
.container{
|
||
position:relative;
|
||
min-height:100vh;
|
||
}
|
||
.head-box{
|
||
// position:fixed;
|
||
top:0;
|
||
left:0;
|
||
width:100%;
|
||
.scroll-view{
|
||
white-space: nowrap;
|
||
width:100%;
|
||
height:90upx;
|
||
.time-item{
|
||
padding:0 10upx;
|
||
margin:0 16upx;
|
||
display:inline-block;
|
||
.time{
|
||
display:block;
|
||
width:100%;
|
||
font-size:28upx;
|
||
color:#666;
|
||
}
|
||
.week{
|
||
display:block;
|
||
width:100%;
|
||
font-size:28upx;
|
||
color:#666;
|
||
}
|
||
}
|
||
.active{
|
||
.time{
|
||
color:#00c277;
|
||
}
|
||
.week{
|
||
color:#00c277;
|
||
}
|
||
}
|
||
}
|
||
.form-box{
|
||
padding:20upx 30upx 0upx;
|
||
margin-bottom: 20upx;
|
||
background: #fff;
|
||
.form-item{
|
||
overflow:hidden;
|
||
border-bottom:1px solid #eee;
|
||
padding:30upx 0;
|
||
.label{
|
||
float:left;
|
||
width:150upx;
|
||
font-size:28upx;
|
||
color:#333;
|
||
font-weight:bold;
|
||
line-height:50upx;
|
||
}
|
||
.ipt-box{
|
||
margin-left:160upx;
|
||
input{
|
||
width:100%;
|
||
height:50upx;
|
||
line-height:50upx;
|
||
font-size:26upx;
|
||
color:#666;
|
||
}
|
||
.pic{
|
||
width:60upx;
|
||
height:60upx;
|
||
line-height: 80upx;
|
||
}
|
||
}
|
||
.select{
|
||
.arrow{
|
||
float:right;
|
||
width:16upx;
|
||
height:29upx;
|
||
margin-top:10upx;
|
||
}
|
||
input{
|
||
width:70%;
|
||
}
|
||
}
|
||
.jian{
|
||
width: 50upx;
|
||
height:50upx;
|
||
margin-left: 280upx;
|
||
}
|
||
.select {
|
||
.arrow {
|
||
float: right;
|
||
width: 16upx;
|
||
height: 29upx;
|
||
margin-top: 10upx;
|
||
}
|
||
.picker {
|
||
height: 50upx;
|
||
line-height: 50upx;
|
||
font-size: 26upx;
|
||
color: #666;
|
||
}
|
||
}
|
||
}
|
||
}
|
||
}
|
||
|
||
.main{
|
||
// border-top:10upx solid #f8f8f8;
|
||
overflow: hidden;
|
||
// position:absolute;
|
||
top:150upx;
|
||
left:0;
|
||
bottom:80upx;
|
||
width:100%;
|
||
.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:200upx;
|
||
height:200upx;
|
||
image{
|
||
display: block;
|
||
width:100%;
|
||
height:100%;
|
||
}
|
||
}
|
||
.fr-content{
|
||
margin-left:220upx;
|
||
.name{
|
||
font-size:30upx;
|
||
color:#333;
|
||
font-weight:bold;
|
||
@include overstepOne;
|
||
line-height:40upx;
|
||
margin-bottom:6upx;
|
||
}
|
||
.num{
|
||
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:100%;
|
||
height:500upx;
|
||
position:absolute;
|
||
bottom:0;
|
||
left:0;
|
||
background: #fff;
|
||
margin-left:0;
|
||
}
|
||
}
|
||
</style>
|