127 lines
2.8 KiB
Vue
127 lines
2.8 KiB
Vue
<template>
|
||
<view class="box u-font-32">
|
||
<view class="u-flex gap-30">
|
||
<text>开单时间：</text>
|
||
<text class="color-666">2025/09/22 19:43</text>
|
||
</view>
|
||
<view class="u-flex gap-30 u-m-t-50">
|
||
<text>就餐人数：</text>
|
||
<text class="color-666">{{ cartStore.personCount}} 人</text>
|
||
<up-icon name="edit-pen" size="16" @click="editPersonCount"></up-icon>
|
||
</view>
|
||
<view class="u-flex gap-30 u-m-t-50">
|
||
<text>员工名称：</text>
|
||
<text class="color-666">{{accountStore.shopStaff.name}}</text>
|
||
</view>
|
||
<view class="font-700" style="margin-top: 92rpx"> 订单操作 </view>
|
||
<view class="u-flex btns u-m-t-32">
|
||
<view
|
||
v-for="(item, index) in orderBtns"
|
||
:key="index"
|
||
@click="orderBtnClick(item)"
|
||
:class="[servingSel == item.value ? 'active' : '']"
|
||
class="item tranistion"
|
||
>
|
||
<text>{{ item.name }}</text>
|
||
</view>
|
||
</view>
|
||
<view class="font-700" style="margin-top: 60rpx"> 台桌操作 </view>
|
||
<view class="u-flex btns u-m-t-32">
|
||
<view
|
||
v-for="(item, index) in tableBtns"
|
||
:key="index"
|
||
@click="tableBtnClick(item)"
|
||
:class="[tableSel == item.value ? 'active' : '']"
|
||
class="item tranistion"
|
||
>
|
||
<text >{{ item.name }}</text>
|
||
</view>
|
||
</view>
|
||
</view>
|
||
</template>
|
||
<script setup>
|
||
import { ref, reactive, toRaw, watch, computed ,inject} from "vue";
|
||
const accountStore=inject('accountStore')
|
||
const cartStore=inject('cartStore')
|
||
const orderBtns = [
|
||
{
|
||
name: "单品改价",
|
||
value: "changePrice",
|
||
},
|
||
{
|
||
name: "单品转台",
|
||
value: "transfer",
|
||
},
|
||
{
|
||
name: "赠菜",
|
||
value: "gift",
|
||
},
|
||
{
|
||
name: "单品上菜",
|
||
value: "serve",
|
||
},
|
||
{
|
||
name: "整单上菜",
|
||
value: "serveAll",
|
||
},
|
||
{
|
||
name: "起菜",
|
||
value: "startCooking",
|
||
},
|
||
];
|
||
const selCart = defineModel("selCart", {
|
||
default: null,
|
||
});
|
||
const tableBtns = [
|
||
{
|
||
name: "换台",
|
||
value: "changeTable",
|
||
},
|
||
{
|
||
name: "清台",
|
||
value: "clearTable",
|
||
},
|
||
];
|
||
const servingSel = ref("");
|
||
const tableSel = ref("");
|
||
const emits = defineEmits(["btnClick"]);
|
||
function orderBtnClick(item) {
|
||
servingSel.value = item.value;
|
||
emits("btnClick", item.value);
|
||
}
|
||
|
||
function tableBtnClick(item) {
|
||
tableSel.value = item.value;
|
||
emits("btnClick", item.value);
|
||
}
|
||
function editPersonCount(){
|
||
emits("btnClick", 'editPersonCount');
|
||
}
|
||
</script>
|
||
<style scoped lang="scss">
|
||
.box {
|
||
padding: 32rpx 50rpx;
|
||
position: fixed;
|
||
}
|
||
.gap-30 {
|
||
gap: 30rpx;
|
||
}
|
||
.btns {
|
||
display: flex;
|
||
flex-wrap: wrap;
|
||
.item {
|
||
padding: 14rpx 38rpx;
|
||
margin-right: 26rpx;
|
||
margin-bottom: 30rpx;
|
||
border-radius: 16rpx;
|
||
border: 2rpx solid $my-main-color;
|
||
color: $my-main-color;
|
||
font-size: 28rpx;
|
||
&.active {
|
||
background-color: $my-main-color;
|
||
color: #fff;
|
||
}
|
||
}
|
||
}
|
||
</style>
|