|
|
<template>
|
|
|
<view>
|
|
|
<view style="display: flex;flex-direction: column;height: 100vh;">
|
|
|
<view class="hearder-box" style="display: flex;align-items: center;justify-content: space-between;"
|
|
|
v-if="mch">
|
|
|
<view>
|
|
|
<view style="color: #000;font-weight: bold;display: flex;align-items: center;">
|
|
|
{{ mch.name }}
|
|
|
<u-icon name="arrow-right" color="#262626" size="15"></u-icon>
|
|
|
</view>
|
|
|
<view style="margin-top: 20rpx;">
|
|
|
<u-icon @click="openLocation(mch)" name="map"
|
|
|
:label="mch.detail || mch.name" labelColor="#a8a8a8" color="#a8a8a8" size="12"
|
|
|
label-size="12"></u-icon>
|
|
|
</view>
|
|
|
<!-- <view style="color: #999;margin-top: 20rpx;font-size: 28rpx;">距离您1km</view>
|
|
|
<view>
|
|
|
<view style="font-size: 28rpx;color: #999;">
|
|
|
营业时间：<text style="color: #333;">10:30-22:40</text>
|
|
|
</view>
|
|
|
</view> -->
|
|
|
</view>
|
|
|
<view v-if="table" style="font-size: 36rpx;font-weight: bold;">
|
|
|
桌号：{{ table.number }}
|
|
|
</view>
|
|
|
</view>
|
|
|
<view class="content-box" style="overflow: hidden;">
|
|
|
<!-- 左侧菜单 -->
|
|
|
<view class="left-tab" style="overflow-y: scroll;">
|
|
|
<view v-for="(item, index) in cat_list" class="cat-item" @click="cat_index = index"
|
|
|
:class="cat_index == index ? 'cat-item-active' : ''">
|
|
|
<view v-if="item.pic_url">
|
|
|
<image style="width: 60rpx;height: 60rpx;" :src="item.pic_url" mode=""></image>
|
|
|
</view>
|
|
|
<view>
|
|
|
{{ item.name }}
|
|
|
</view>
|
|
|
</view>
|
|
|
|
|
|
</view>
|
|
|
<!-- 右侧菜单 -->
|
|
|
<view class="right-tab" style="display: flex;">
|
|
|
<scroll-view scroll-y style="overflow-y: scroll;float: left;width: 100%;flex: 1;">
|
|
|
<view style="padding: 20rpx;">
|
|
|
<view v-if="cat_list && cat_list.length > 0" style="margin-bottom: 20rpx;">
|
|
|
{{ cat_list[cat_index].name }}</view>
|
|
|
<view v-for="(item, index) in goods_list" @click="show_goods_id = item.goods_id"
|
|
|
style="display: flex;width: 100%;background: #FFF;border-radius: 14rpx;box-shadow: 0px 0px 8rpx 0px rgba(0, 0, 0, 0.1);margin-bottom: 20rpx;overflow: hidden;">
|
|
|
<view style="background: #F0F0F0;">
|
|
|
<image style="display: block;width: 200rpx;height: 200rpx;"
|
|
|
:src="item.goods_info.pic_url" mode="aspectFill"></image>
|
|
|
</view>
|
|
|
<view
|
|
|
style="flex: 1;padding: 10rpx 14rpx;display: flex;flex-direction: column;justify-content: space-between;">
|
|
|
<view>
|
|
|
<view class="goods_name">{{ item.goods_info.name }}</view>
|
|
|
<view style="color: #A16222;font-weight: bold;margin-top: 16rpx;">
|
|
|
￥{{ item.goods_info.price_min }}起
|
|
|
</view>
|
|
|
</view>
|
|
|
<view style="display: flex;justify-content: flex-end;">
|
|
|
<view @click.stop="chooseSpecifications(item, $event)" :data-index="index">
|
|
|
<u-icon name="plus-circle-fill" color="#A16222" size="50rpx"></u-icon>
|
|
|
</view>
|
|
|
</view>
|
|
|
</view>
|
|
|
</view>
|
|
|
<template v-if="goods_loading == 0">
|
|
|
<!-- 加载中 -->
|
|
|
<view style="padding: 20rpx;display: flex;align-items: center;justify-content: center;">
|
|
|
<u-loading-icon></u-loading-icon>
|
|
|
</view>
|
|
|
</template>
|
|
|
<template v-else>
|
|
|
<!-- 加载完毕 -->
|
|
|
</template>
|
|
|
|
|
|
</view>
|
|
|
</scroll-view>
|
|
|
</view>
|
|
|
</view>
|
|
|
<view class="bttom-box" v-show="1 || goodsArr.reduce((sum, item) => sum + (item.num - 0), 0) > 0"
|
|
|
style="height: 110rpx;background: #EFEFEF;position: relative;">
|
|
|
<view
|
|
|
style="padding: 0 30rpx;display: flex;align-items: center;justify-content: space-between;position: relative;z-index: 1;height: 100%;border-top: 1rpx solid #eee;background: #EFEFEF;">
|
|
|
<view style="display: flex;align-items: center;">
|
|
|
<view @click="show_card = !show_card"
|
|
|
style="width: 80rpx;height: 80rpx;background: #FFF;border-radius: 50%;display: flex;align-items: center;justify-content: center;position: relative;">
|
|
|
<u-icon size="70rpx" name="shopping-cart" color="#A16222"></u-icon>
|
|
|
<view
|
|
|
style="position: absolute;background: #BD3124;color: #FFF;font-size: 20rpx;line-height: 30rpx;padding: 0 10rpx;border-radius: 15rpx;right: 0;top: 0;">
|
|
|
{{ goodsArr.reduce((sum, item) => sum + (item.num - 0), 0) }}
|
|
|
</view>
|
|
|
</view>
|
|
|
<view style="margin-left: 40rpx;color: #000;font-weight: bold;font-size: 40rpx;">
|
|
|
<!-- ￥{{ (
|
|
|
goodsArr.reduce((sum, item) => sum + (item.activeGoodsInfo.price * item.num - 0), 0)
|
|
|
).toFixed(2) }} -->
|
|
|
￥{{ totalPrice }}
|
|
|
</view>
|
|
|
</view>
|
|
|
<view @click="toSubmit"
|
|
|
style="background: #A16222;color: #FFF;padding: 0 30rpx;line-height: 60rpx;border-radius: 30rpx;">
|
|
|
去下单
|
|
|
</view>
|
|
|
</view>
|
|
|
<view style="position: fixed;bottom: 0;top: 0;left: 0;right: 0;background: rgba(0, 0, 0, .2);"
|
|
|
@click="show_card = !show_card" v-if="show_card">
|
|
|
<view :style="{
|
|
|
maxHeight: show_card ? '60vh' : '0'
|
|
|
}" style="position: absolute;left: 0;right: 0;bottom: 0;background: #FFF;border-radius: 20rpx 20rpx 0 0;z-index: 0;transition: max-height 0.5s;overflow-y: scroll;">
|
|
|
<view
|
|
|
style="padding: 20rpx 30rpx;border-bottom: 1rpx solid #F0F0F0;position: sticky;top: 0;z-index: 3;background: #FFF;">
|
|
|
购物车({{ goodsArr.reduce((sum, item) => sum + (item.num - 0), 0) }})
|
|
|
</view>
|
|
|
<view style="padding: 20rpx;flex: 1;overflow-y: scroll;">
|
|
|
<view v-for="(item, index) in goodsArr" v-if="item.num > 0"
|
|
|
style="display: flex;width: 100%;background: #f7f7f7;border-radius: 14rpx;margin-bottom: 20rpx;overflow: hidden;padding: 16rpx;">
|
|
|
<view style="overflow: hidden;">
|
|
|
<image style="display: block;width: 140rpx;height: 140rpx;border-radius: 18rpx;"
|
|
|
:src="item.goods.pic_url" mode="aspectFill"></image>
|
|
|
</view>
|
|
|
<view
|
|
|
style="flex: 1;padding: 10rpx 14rpx;display: flex;flex-direction: column;justify-content: space-between;">
|
|
|
<view>
|
|
|
<view class="goods_name" style="-webkit-line-clamp: 1;font-size: 20rpx;">
|
|
|
{{ item.goods.name }}</view>
|
|
|
</view>
|
|
|
<view class="item-desc" style="margin: 10rpx 0;">
|
|
|
<view class="goods_sky" style="color: #999;font-size: 24rpx;">
|
|
|
<text v-for="(sku, _index) of item.activeGoodsInfo.attr_list" :key="_index">
|
|
|
{{ sku.group_name }}：{{ sku.name }}
|
|
|
</text>
|
|
|
</view>
|
|
|
</view>
|
|
|
<view style="display: flex;">
|
|
|
<view v-for="(small, index) of item.small_goods" :key="index"
|
|
|
v-show="small.group_item.length != 0">
|
|
|
<view
|
|
|
style="display: flex;background: #FFF;margin: 0 10rpx 10rpx 0;font-size: 22rpx;padding: 10rpx 20rpx;flex-wrap: nowrap;align-items: center;border-radius: 10rpx;justify-content: center;"
|
|
|
v-for="sitem of small.group_item">
|
|
|
<view>
|
|
|
{{ sitem.name }}
|
|
|
</view>
|
|
|
<view v-if="sitem.price" style="color:#BD3124;">
|
|
|
{{ sitem.price }} 元
|
|
|
</view>
|
|
|
</view>
|
|
|
</view>
|
|
|
</view>
|
|
|
<view style="display: flex;justify-content: space-between;align-items: center;">
|
|
|
<view style="color: #A16222;font-weight: bold;">
|
|
|
￥{{ item.activeGoodsInfo.price }}
|
|
|
</view>
|
|
|
<u-number-box :min="0" v-model="item.num"></u-number-box>
|
|
|
</view>
|
|
|
</view>
|
|
|
</view>
|
|
|
</view>
|
|
|
<view class="bttom-box" style="height: 110rpx;width: 100%;"></view>
|
|
|
</view>
|
|
|
</view>
|
|
|
</view>
|
|
|
</view>
|
|
|
<logins v-if="wcCode != -1" :wcCode="wcCode"
|
|
|
:type="$utils.isInAliBrowser() || $utils.isInWeChatBrowser() ? 0 : 2"></logins>
|
|
|
<pageSku v-if="goods.id" ref="pagesku" :goods="goods" @skuPopData="skuPopData"></pageSku>
|
|
|
<view v-if="show_donghua == 1" :animation="animationData" style="position: fixed;right: 32rpx;top: 600rpx;z-index: 10;"
|
|
|
:style="{
|
|
|
top: top + 'px'
|
|
|
}">
|
|
|
<!-- <image style="width: 50rpx;height: 50rpx;" src="../my/images/av.png" mode=""></image> -->
|
|
|
<u-icon size="50rpx" name="plus-circle-fill" color="#A16222" style="background: #fff;border-radius: 50%;"></u-icon>
|
|
|
</view>
|
|
|
|
|
|
<goods v-if="show_goods_id > 0" :goods_id="show_goods_id" @close="show_goods_id = 0"></goods>
|
|
|
</view>
|
|
|
</template>
|
|
|
<script>
|
|
|
import logins from '@/components/login/logins.vue'
|
|
|
import pageSku from "./compontents/page-sku.vue";
|
|
|
import goods from "./compontents/goods.vue";
|
|
|
export default {
|
|
|
components: {
|
|
|
logins,
|
|
|
pageSku,
|
|
|
goods
|
|
|
},
|
|
|
data() {
|
|
|
return {
|
|
|
wcCode: -1,
|
|
|
mch_id: 0,
|
|
|
store_id: 0,
|
|
|
n_id: 0,
|
|
|
cat_index: 0,
|
|
|
goods_loading: 0,
|
|
|
|
|
|
cat_list: [],
|
|
|
goods_list: [],
|
|
|
mch: null,
|
|
|
table: null,
|
|
|
goods: {},
|
|
|
goodsArr: [],
|
|
|
show_card: false,
|
|
|
|
|
|
|
|
|
top: 0,
|
|
|
show_donghua: 0,
|
|
|
animationData: {},
|
|
|
animation: null,
|
|
|
cartData: null,
|
|
|
is_cont: 0,
|
|
|
|
|
|
show_goods_id: 0
|
|
|
}
|
|
|
},
|
|
|
watch: {
|
|
|
cat_index(value) {
|
|
|
this.goods_list = []
|
|
|
this.getGoods()
|
|
|
}
|
|
|
},
|
|
|
async onLoad(query) {
|
|
|
if (query.wxcode) {
|
|
|
this.wcCode = query.wxcode
|
|
|
} else {
|
|
|
this.wcCode = ''
|
|
|
}
|
|
|
this.mch_id = query.mch_id
|
|
|
this.store_id = query.store_id
|
|
|
this.n_id = query.n_id
|
|
|
this.is_cont = query.is_cont ? 1 : 0
|
|
|
this.getCatList(query)
|
|
|
},
|
|
|
//发送给朋友
|
|
|
onShareAppMessage(res) {
|
|
|
|
|
|
},
|
|
|
onPullDownRefresh() {
|
|
|
|
|
|
},
|
|
|
onShow() {
|
|
|
|
|
|
},
|
|
|
onReady() {
|
|
|
setTimeout(() => {
|
|
|
let view = uni.createSelectorQuery().select(".bttom-box");
|
|
|
if (view) {
|
|
|
view.boundingClientRect(data => {
|
|
|
this.cartData = data
|
|
|
}).exec();
|
|
|
}
|
|
|
}, 200)
|
|
|
},
|
|
|
onHide() {},
|
|
|
computed: {
|
|
|
totalPrice() {
|
|
|
return this.goodsArr.reduce((pre, cur) => {
|
|
|
let price = cur.activeGoodsInfo.price * cur.num
|
|
|
// 计算小料
|
|
|
let smallMaterialPrice = 0
|
|
|
if (cur.small_goods) {
|
|
|
smallMaterialPrice = cur.small_goods.reduce((price, item) => {
|
|
|
return price + item.group_item.reduce((price, item) =>
|
|
|
price + item.price, 0)
|
|
|
}, 0)
|
|
|
}
|
|
|
smallMaterialPrice = cur.num * (Number(smallMaterialPrice))
|
|
|
return pre + Number(price) + smallMaterialPrice;
|
|
|
}, 0).toFixed(2);
|
|
|
}
|
|
|
},
|
|
|
methods: {
|
|
|
async getCatList(query) {
|
|
|
uni.showLoading({
|
|
|
title: '加载中'
|
|
|
})
|
|
|
let res = await this.$api.common.getFootCat({
|
|
|
store_id: query.store_id,
|
|
|
mch_id: query.mch_id,
|
|
|
n_id: query.n_id
|
|
|
})
|
|
|
uni.hideLoading()
|
|
|
if (res.code > 0) {
|
|
|
uni.showModal({
|
|
|
title: '提示',
|
|
|
content: res.msg,
|
|
|
showCancel: false,
|
|
|
success() {
|
|
|
|
|
|
}
|
|
|
})
|
|
|
} else {
|
|
|
if (res.data.is_more && res.data.is_more > 0 && this.is_cont == 0) {
|
|
|
uni.reLaunch({
|
|
|
url: '/pages/takeaway/orderAndSettlement/edit?n_id=' + query.n_id + '&mch_id=' + query.mch_id + '&store_id=' + query.store_id
|
|
|
})
|
|
|
}
|
|
|
this.cat_list = res.data.cat_list
|
|
|
this.mch = res.data.mch
|
|
|
this.table = res.data.table
|
|
|
this.$nextTick(() => {
|
|
|
this.getGoods()
|
|
|
})
|
|
|
}
|
|
|
},
|
|
|
async getGoods() {
|
|
|
this.goods_loading = 0
|
|
|
let res = await this.$api.common.getFootGoods({
|
|
|
cat_id: this.cat_list[this.cat_index].id,
|
|
|
store_id: this.store_id,
|
|
|
mch_id: this.mch_id,
|
|
|
})
|
|
|
this.goods_loading = 1
|
|
|
if (res.code > 0) {
|
|
|
uni.showModal({
|
|
|
title: '提示',
|
|
|
content: res.msg,
|
|
|
showCancel: false,
|
|
|
success() {}
|
|
|
})
|
|
|
} else {
|
|
|
this.goods_list = res.data
|
|
|
}
|
|
|
},
|
|
|
// 选择规格
|
|
|
async chooseSpecifications(params, e) {
|
|
|
uni.showLoading({
|
|
|
title: "请稍等",
|
|
|
mask: true,
|
|
|
});
|
|
|
this.goods = {};
|
|
|
await this.$nextTick()
|
|
|
const res = await this.$api.common.goodsInfo({
|
|
|
id: params.goods_id
|
|
|
});
|
|
|
this.goods = res.data
|
|
|
await this.$nextTick()
|
|
|
await this.setStart(e)
|
|
|
setTimeout(async () => {
|
|
|
uni.hideLoading();
|
|
|
this.$refs.pagesku.skuPopData.type = 2;
|
|
|
this.$refs.pagesku.$refs?.popup?.open();
|
|
|
}, 0)
|
|
|
},
|
|
|
async skuPopData(e) {
|
|
|
const goods = this.goodsArr.find(item => item.goods_sku_id === e.goods_sku_id && item.small_goods_json ===
|
|
|
e.small_goods_json)
|
|
|
if (goods) {
|
|
|
let goodsArr = this.goodsArr
|
|
|
this.goodsArr.forEach((item, index) => {
|
|
|
if (item.goods_sku_id === e.goods_sku_id && item.small_goods_json === e.small_goods_json) {
|
|
|
this.goodsArr[index].num = (this.goodsArr[index].num - 0) + 1
|
|
|
}
|
|
|
})
|
|
|
this.goodsArr = []
|
|
|
this.goodsArr = goodsArr
|
|
|
} else {
|
|
|
e.key = Math.random()
|
|
|
this.goodsArr.push(JSON.parse(JSON.stringify(e)))
|
|
|
}
|
|
|
console.log(this.goodsArr)
|
|
|
await this.$nextTick()
|
|
|
this.setA()
|
|
|
},
|
|
|
setStart(e) {
|
|
|
this.top = e.detail.y
|
|
|
var animation = uni.createAnimation({
|
|
|
duration: 600,
|
|
|
timingFunction: 'ease',
|
|
|
})
|
|
|
this.animation = animation
|
|
|
this.animationData = animation.export()
|
|
|
},
|
|
|
setA() {
|
|
|
this.show_donghua = 1
|
|
|
// 先旋转后放大
|
|
|
this.animation.translate('-600rpx', (this.cartData.top - this.top)).step()
|
|
|
this.animationData = this.animation.export()
|
|
|
setTimeout(() => {
|
|
|
this.show_donghua = 0
|
|
|
this.$nextTick(() => {
|
|
|
this.animation.translate('600rpx', -(this.cartData.top - this.top)).step()
|
|
|
this.animationData = this.animation.export()
|
|
|
})
|
|
|
}, 600)
|
|
|
},
|
|
|
toSubmit() {
|
|
|
let goodsArr = this.goodsArr.filter(item => item.num > 0)
|
|
|
if (!goodsArr.length) {
|
|
|
uni.$u.toast("请选择点餐商品")
|
|
|
return
|
|
|
}
|
|
|
let that = this
|
|
|
uni.setStorage({
|
|
|
key: 'take_n_id_' + this.n_id,
|
|
|
data: goodsArr,
|
|
|
success() {
|
|
|
uni.navigateTo({
|
|
|
url: "/pages/takeaway/orderAndSettlement/index?" + "n_id=" + that.n_id + "&mch_id=" + that.mch_id + "&store_id=" + that.store_id,
|
|
|
});
|
|
|
}
|
|
|
})
|
|
|
}
|
|
|
}
|
|
|
}
|
|
|
</script>
|
|
|
|
|
|
<style lang="scss" scoped>
|
|
|
.hearder-box {
|
|
|
background: linear-gradient(to bottom, #D6BDA3, #F3EEE8);
|
|
|
// background: #FFF;
|
|
|
padding: 20rpx;
|
|
|
}
|
|
|
|
|
|
.content-box {
|
|
|
display: flex;
|
|
|
flex: 1;
|
|
|
background: blue;
|
|
|
|
|
|
.left-tab {
|
|
|
width: 160rpx;
|
|
|
height: 100%;
|
|
|
background: #E3DAD0;
|
|
|
}
|
|
|
|
|
|
.right-tab {
|
|
|
flex: 1;
|
|
|
height: 100%;
|
|
|
background: #FFF;
|
|
|
}
|
|
|
}
|
|
|
|
|
|
.bttom-box {
|
|
|
padding-bottom: constant(safe-area-inset-bottom);
|
|
|
padding-bottom: env(safe-area-inset-bottom);
|
|
|
}
|
|
|
|
|
|
.cat-item {
|
|
|
display: flex;
|
|
|
flex-direction: column;
|
|
|
justify-content: center;
|
|
|
align-items: center;
|
|
|
font-size: 30rpx;
|
|
|
padding: 20rpx;
|
|
|
}
|
|
|
|
|
|
.cat-item-active {
|
|
|
background: #FFF;
|
|
|
}
|
|
|
|
|
|
.goods_name {
|
|
|
display: -webkit-box;
|
|
|
-webkit-box-orient: vertical;
|
|
|
-webkit-line-clamp: 2;
|
|
|
/* 定义文本的行数 */
|
|
|
overflow: hidden;
|
|
|
text-overflow: ellipsis;
|
|
|
font-size: 28rpx;
|
|
|
}
|
|
|
|
|
|
.minus {
|
|
|
border: 1px solid #e5e5e5;
|
|
|
border-right: none;
|
|
|
border-radius: 20px 0 0 20px;
|
|
|
padding: 6px;
|
|
|
}
|
|
|
|
|
|
.plus {
|
|
|
border: 1px solid #e5e5e5;
|
|
|
border-left: none;
|
|
|
border-radius: 0 20px 20px 0;
|
|
|
padding: 6px;
|
|
|
}
|
|
|
|
|
|
.numInput {
|
|
|
width: 35px;
|
|
|
text-align: center;
|
|
|
border: 1px solid #e5e5e5;
|
|
|
padding: 3px 0;
|
|
|
height: 20px;
|
|
|
line-height: 20px;
|
|
|
font-size: 12px;
|
|
|
color: #000;
|
|
|
}
|
|
|
</style> |