1323 lines
32 KiB
Vue
1323 lines
32 KiB
Vue
<template>
|
||
<view class="hzIndex">
|
||
<hzHeader title="线上超市"></hzHeader>
|
||
<view class="container hzContent">
|
||
<view class="main" :style="{paddingBottom:currentTabIndex == 0?'300upx':'180upx'}">
|
||
<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 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:1500upx ;">
|
||
<view class="classify-box" :style="'height: ' + scrollHeight +'px;'">
|
||
<view class="classify-item" :class="attrTypesIndex == index ? 'active' : ''"
|
||
v-for="(item, index) in attrTypes" :key="index" @click="kindClick(index)">
|
||
<text>{{ item.attr_name }}</text>
|
||
</view>
|
||
</view>
|
||
<scroll-view :scroll-top="scrollTop" @scroll="scrollData" @scrolltolower="scrollLoadMore()"
|
||
scroll-y="true" :style="'height: ' + scrollHeight +'px;width:'+scrollWidth+'px;'"
|
||
class="food-list" v-if="foodList.length > 0">
|
||
<view class="list-item" v-for="(item, index) in foodList" :key="index"
|
||
:style="'width:'+scrollWidth+'px'">
|
||
<view class="img-box">
|
||
<image :src="formatImgUrl(item.picture)" @error="imageError($event, index)" mode=""
|
||
@click="vbPicture(new Array(formatImgUrl(item.picture)))"></image>
|
||
</view>
|
||
<view class="fr-content">
|
||
<view class="name">{{ item.food_name }}</view>
|
||
<view class="num" v-if="item.spec">规格：{{ item.spec }}</view>
|
||
<view class="num" style="color: white;" v-else>．</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>
|
||
<load-more :loadingType="loadingTypeMarket" :contentText="contentTextMarket"></load-more>
|
||
</scroll-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 attrTypes" :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="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="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>
|
||
<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 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="formatImgUrl(item.picture)" mode=""></image>
|
||
</view>
|
||
<view class="fr-content">
|
||
<view class="name">{{ item.food_name }}</view>
|
||
<view class="num" v-if="item.spec">规格：{{ item.spec }}</view>
|
||
<view class="num" style="color: white;" v-else>．</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> -->
|
||
</view>
|
||
<view v-if="currentTabIndex == 1">
|
||
<!-- <scroll-view @scrolltolower="scrollLoadMore()" scroll-y="true"
|
||
:style="'height: ' + scrollHeight2 +'px;'" class="food-list1" v-if="listInfo.length > 0">
|
||
<view class="main" v-for="(item, index1) in listInfo" :key="index1">
|
||
<view class="top">
|
||
<view class="dining">预订时间：{{ item.order_time }}</view>
|
||
<view class="status" v-if='item.order_status == 1'>预订成功</view>
|
||
<view class="status " style="color: #666;" v-if='item.order_status == 0'>已取消</view>
|
||
<view class="status " style="color: #666;" v-if='item.order_status == 3'>已备货</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>
|
||
|
||
<view class="list-item" v-for="(it, index2) in item.orderDetails" :key="index2">
|
||
<view class="img-box">
|
||
<image :src="formatImgUrl(it.goods_icon)"
|
||
@error="imageError2($event, index2,index1)" 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 style="float: right;font-size: 28upx;margin-top: 32upx;margin-right: 20upx;">
|
||
总金额：¥{{ item.pay_price }}</view>
|
||
</view>
|
||
|
||
</view>
|
||
<load-more :loadingType="loadingType" :contentText="contentText"></load-more>
|
||
</scroll-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="pageMarket>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 {
|
||
getAttrTypes,
|
||
getMarketKindsList,
|
||
submitMarketOrder,
|
||
myMarketOrderList,
|
||
cancelOrder
|
||
} from '@/common/api.js';
|
||
import {
|
||
callbackRequest,
|
||
alertTip,
|
||
sureAlterTip,
|
||
getStorage,
|
||
vbPicture,
|
||
formatImgUrl,
|
||
wxSdk
|
||
} from '@/common/util.js';
|
||
import contentNone from '@/components/contentNone.vue';
|
||
import loadMore from '@/components/loadMore.vue';
|
||
import datetimePicker from '@/components/dateTime.vue';
|
||
import uniSearchBar from '@/components/uni-search-bar/uni-search-bar.vue'
|
||
export default {
|
||
data() {
|
||
return {
|
||
page: 1,
|
||
pageSize: 10,
|
||
loadingType: 0, //0-loading前；1-loading中；2-没有更多了
|
||
contentText: {
|
||
contentdown: "上拉加载更多",
|
||
contentrefresh: "正在加载...",
|
||
contentnomore: "没有更多数据了"
|
||
},
|
||
pageMarket: 1,
|
||
pageSizeMarket: 10,
|
||
loadingTypeMarket: 0, //0-loading前；1-loading中；2-没有更多了
|
||
contentTextMarket: {
|
||
contentdown: "上拉加载更多",
|
||
contentrefresh: "正在加载...",
|
||
contentnomore: "没有更多数据了"
|
||
},
|
||
week: new Date().getDay(),
|
||
vbPicture: vbPicture,
|
||
formatImgUrl: formatImgUrl,
|
||
dataActive: 0,
|
||
showAlert: false, //是否显示弹窗
|
||
date: [],
|
||
takeFoodPlace: ['梨园', '科技楼'],
|
||
takeFoodPlaceIndex: 0,
|
||
|
||
foodList: [],
|
||
chooseFoodList: [], //选中的食品列表
|
||
userId: getStorage('userInfo').id,
|
||
takeFoodTime: '',
|
||
currentTabIndex: 0,
|
||
orderList: [], //订单列表
|
||
listInfo: [],
|
||
userInfo: getStorage('userInfo'), //用户信息
|
||
submitFlag: true,
|
||
keyword: '',
|
||
attrTypes: [],
|
||
attrTypesIndex: 0,
|
||
containerHeight: '',
|
||
scrollHeight: '',
|
||
scrollHeight2: '',
|
||
scrollWidth: "",
|
||
isLoading: false,
|
||
scrollTop: 0,
|
||
old: {
|
||
scrollTop: 0
|
||
},
|
||
// 新样式 新增
|
||
descriptionVal: '暂无商品',
|
||
activeKey: 0, //左边菜品类型key值
|
||
finished: false,
|
||
refreshing: false,
|
||
};
|
||
},
|
||
components: {
|
||
contentNone,
|
||
datetimePicker,
|
||
uniSearchBar,
|
||
loadMore
|
||
},
|
||
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) {
|
||
this.setHeight();
|
||
this.currentTabIndex = option.currentTabIndex || 0;
|
||
this.getAttrTypes();
|
||
if (this.currentTabIndex == 0) {
|
||
this.chooseFoodList = [];
|
||
} 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.getList();
|
||
}
|
||
},
|
||
activeKey(n, o) { //监听左侧类型切换
|
||
this.foodList = []
|
||
// this.getrightlist(this.leftList[n])
|
||
this.kindClick(n)
|
||
},
|
||
},
|
||
onShow() {
|
||
|
||
},
|
||
methods: {
|
||
onRefresh() {
|
||
// 清空列表数据
|
||
this.finished = true;
|
||
this.getList();
|
||
},
|
||
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)
|
||
},
|
||
imageError(e, index) {
|
||
this.foodList[index]['picture'] = '/static/icons/wutu.jpg';
|
||
},
|
||
imageError2(e, index2, index1) {
|
||
this.listInfo[index1]['orderDetails'][index2]['goods_icon'] = '/static/icons/wutu.jpg';
|
||
},
|
||
|
||
scrollData: function(e) {
|
||
this.old.scrollTop = e.detail.scrollTop
|
||
},
|
||
setHeight() {
|
||
let windowHeight = uni.getSystemInfoSync().windowHeight; //页面可见区域
|
||
let windowWidth = uni.getSystemInfoSync().windowWidth;
|
||
this.scrollWidth = windowWidth - 104;
|
||
this.containerHeight = windowHeight;
|
||
this.scrollHeight = windowHeight - 266;
|
||
this.scrollHeight2 = windowHeight - 132;
|
||
},
|
||
scrollLoadMore() {
|
||
if (this.currentTabIndex == 0) {
|
||
if (this.loadingTypeMarket !== 0) {
|
||
return;
|
||
}
|
||
this.loadingTypeMarket = 1;
|
||
this.pageMarket = this.pageMarket + 1;
|
||
this.getList();
|
||
} else {
|
||
if (this.loadingType !== 0) {
|
||
return;
|
||
}
|
||
this.loadingType = 1;
|
||
this.page = this.page + 1;
|
||
this.initData();
|
||
}
|
||
},
|
||
|
||
search(v) {
|
||
this.pageMarket = 1;
|
||
this.loadingTypeMarket = 0;
|
||
this.keyword = v.value;
|
||
this.getList();
|
||
},
|
||
cancleSearch(v) {
|
||
this.pageMarket = 1;
|
||
this.loadingTypeMarket = 0;
|
||
this.keyword = "";
|
||
this.getList();
|
||
|
||
console.log(v);
|
||
},
|
||
getAttrTypes() {
|
||
let data = {
|
||
method: getAttrTypes,
|
||
data: {
|
||
userId: this.userId
|
||
}
|
||
};
|
||
callbackRequest(data).then(res => {
|
||
if (res.data.returnCode == 1) {
|
||
this.attrTypes = res.data.returnData || [];
|
||
this.getList();
|
||
}
|
||
});
|
||
},
|
||
|
||
getList() {
|
||
if (this.pageMarket == 1) {
|
||
this.scrollTop = this.old.scrollTop
|
||
this.$nextTick(function() {
|
||
this.scrollTop = 0
|
||
});
|
||
}
|
||
let data = {
|
||
method: getMarketKindsList,
|
||
data: {
|
||
pageSize: this.pageSizeMarket,
|
||
pageNum: this.pageMarket,
|
||
userId: this.userId,
|
||
attrType: this.attrTypes[this.attrTypesIndex].attr_name,
|
||
keyWord: this.keyword
|
||
}
|
||
};
|
||
callbackRequest(data).then(res => {
|
||
if (res.data.returnCode == 1) {
|
||
var 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;
|
||
}
|
||
}
|
||
}
|
||
if (this.pageMarket == 1) {
|
||
this.foodList = result;
|
||
} else {
|
||
if (result.length > 0) {
|
||
this.foodList = this.foodList.concat(result);
|
||
this.loadingTypeMarket = 0;
|
||
} else {
|
||
this.loadingTypeMarket = 2;
|
||
}
|
||
}
|
||
}
|
||
});
|
||
},
|
||
//切换分类
|
||
kindClick(index) {
|
||
this.attrTypesIndex = index;
|
||
this.pageMarket = 1;
|
||
this.loadingTypeMarket = 0;
|
||
this.getList();
|
||
},
|
||
//点击日期
|
||
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;
|
||
});
|
||
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: submitMarketOrder,
|
||
data: {
|
||
userId: this.userId,
|
||
diningRoomId: 3,
|
||
takeFoodTime: this.takeFoodTime,
|
||
takeFoodPlace: this.takeFoodPlace[this.takeFoodPlaceIndex],
|
||
orderDetails: arr
|
||
}
|
||
};
|
||
callbackRequest(data).then(res => {
|
||
if (res.data.returnCode == 1) {
|
||
alertTip('预定成功');
|
||
setTimeout(function() {
|
||
uni.redirectTo({
|
||
url: '/pages/market/market?currentTabIndex=1'
|
||
});
|
||
}, 1500);
|
||
} else {
|
||
this.submitFlag = true;
|
||
alertTip(res.data.returnMsg);
|
||
}
|
||
});
|
||
},
|
||
initData() {
|
||
let data = {
|
||
"method": myMarketOrderList,
|
||
data: {
|
||
userId: this.userInfo.id,
|
||
pageSize: this.pageSize,
|
||
pageNum: this.page
|
||
}
|
||
}
|
||
callbackRequest(data)
|
||
.then(res => {
|
||
if (res.data.returnCode == 1) {
|
||
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;
|
||
}
|
||
}
|
||
})
|
||
},
|
||
cancelOrder(item) {
|
||
let data = {
|
||
"method": cancelOrder,
|
||
data: {
|
||
userId: this.userInfo.id,
|
||
orderId: item.id
|
||
}
|
||
}
|
||
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);
|
||
}
|
||
})
|
||
}
|
||
}
|
||
})
|
||
},
|
||
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;
|
||
}
|
||
},
|
||
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">
|
||
@import '@/static/css/common.scss';
|
||
|
||
.container {
|
||
// padding: 22upx;
|
||
margin-top: 150upx;
|
||
}
|
||
|
||
.main {
|
||
.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;
|
||
}
|
||
}
|
||
|
||
.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 {
|
||
background-color: #fff;
|
||
margin: 24upx;
|
||
border-radius: 20upx;
|
||
padding: 24upx;
|
||
}
|
||
|
||
.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> |