代客下单修改，增加线上店铺装修页面
This commit is contained in:
@@ -6,12 +6,43 @@
|
||||
<span class="title">代客下单</span>
|
||||
<div class="u-m-l-20 flex">
|
||||
<el-button type="primary">选择用户</el-button>
|
||||
<el-button>选择桌号</el-button>
|
||||
<el-popover placement="right" width="333" trigger="click" v-model="tableShow">
|
||||
<el-input
|
||||
placeholder="请输入内容"
|
||||
prefix-icon="search"
|
||||
v-model="tableSearchText"
|
||||
@input="tablesearchInput"
|
||||
></el-input>
|
||||
<div style="max-height: 398px; overflow-y: scroll" class="u-m-t-12">
|
||||
<div
|
||||
class="u-flex u-row-between u-p-t-8 table-item u-p-b-8 u-p-r-30"
|
||||
v-for="(item, index) in tableList"
|
||||
:key="index"
|
||||
@click="tableClick(item, index)"
|
||||
>
|
||||
<span>{{ item.name }}</span>
|
||||
<span :style="{ color: returnTableColor(item.status) }">
|
||||
{{ returnTableLabel(item.status) }}
|
||||
</span>
|
||||
</div>
|
||||
<div class="color-999 u-p-30 u-text-center" v-if="!tableList.length">
|
||||
无可用桌台
|
||||
</div>
|
||||
</div>
|
||||
<template #reference>
|
||||
<el-button>选择桌号</el-button>
|
||||
</template>
|
||||
</el-popover>
|
||||
<el-button type="warning">扫码验券</el-button>
|
||||
</div>
|
||||
</div>
|
||||
<div class="right">
|
||||
<el-input placeholder="请输入商品名称" v-model="keywords" clearable>
|
||||
<el-input
|
||||
placeholder="请输入商品名称"
|
||||
v-model="goods.query.name"
|
||||
clearable
|
||||
@change="getGoods"
|
||||
>
|
||||
<template #suffix>
|
||||
<el-icon class="el-input__icon"><search /></el-icon>
|
||||
</template>
|
||||
@@ -43,13 +74,18 @@
|
||||
<a @click="clearCarts" style="color: #1890ff">清空</a>
|
||||
</div>
|
||||
<cartsList
|
||||
@editNote="showNote(true)"
|
||||
:goodsMapisFinish="goodsMapisFinish"
|
||||
:goodsList="goods.list"
|
||||
ref="refCart"
|
||||
></cartsList>
|
||||
</div>
|
||||
<div class="center">
|
||||
<Controls @noteClick="showNote" @packClick="showPack" />
|
||||
<Controls
|
||||
@noteClick="showNote"
|
||||
@packClick="showPack"
|
||||
@changePriceClick="showChangePrice"
|
||||
/>
|
||||
</div>
|
||||
<div class="right">
|
||||
<div class="flex categoty u-col-center">
|
||||
@@ -73,17 +109,20 @@
|
||||
>
|
||||
<el-tag
|
||||
size="large"
|
||||
type="primary"
|
||||
:type="goods.query.categoryId === item.id ? 'primary' : 'info'"
|
||||
effect="dark"
|
||||
v-if="goods.query.categoryId === item.id"
|
||||
>
|
||||
{{ item.name }}
|
||||
</el-tag>
|
||||
<el-tag size="large" type="info" v-else effect="plain">{{ item.name }}</el-tag>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div v-if="goods.list.length <= 0" class="no-goods">未找到相关商品</div>
|
||||
<div class="goods-list">
|
||||
<div class="lingshicai" @click="showaddLingShiCai">
|
||||
<el-icon size="26"><Plus /></el-icon>
|
||||
<div class="u-m-t-10">临时菜</div>
|
||||
</div>
|
||||
<GoodsItem
|
||||
:item="item"
|
||||
@click="goodsClick(item)"
|
||||
@@ -95,20 +134,81 @@
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<dialogGoodsSel ref="refSelSku"></dialogGoodsSel>
|
||||
<dialogGoodsSel ref="refSelSku" @confirm="skuSelConfirm"></dialogGoodsSel>
|
||||
<note ref="refNote" @confirm="noteConfirm"></note>
|
||||
<pack ref="refPack" @confirm="packConfirm"></pack>
|
||||
<addLingShiCai ref="refAddLingShiCai" @confirm="addLingShiCaiConfirm"></addLingShiCai>
|
||||
<changePrice ref="refChangePrice" @confirm="changePriceConfirm"></changePrice>
|
||||
</div>
|
||||
</template>
|
||||
<script setup>
|
||||
import Controls from "./components/control.vue";
|
||||
import note from "./components/note.vue";
|
||||
import pack from "./components/pack.vue";
|
||||
import changePrice from "./components/popup-cart-changePrice.vue";
|
||||
import addLingShiCai from "./components/popup-linshiCai.vue";
|
||||
import GoodsItem from "./components/goods-item.vue";
|
||||
import dialogGoodsSel from "./components/dialog-goods-sel.vue";
|
||||
import cartsList from "./components/carts/list.vue";
|
||||
import categoryApi from "@/api/product/productclassification";
|
||||
import productApi from "@/api/product/index";
|
||||
import tableApi from "@/api/account/table";
|
||||
import $status from "@/views/tool/table/status.js";
|
||||
|
||||
//桌台
|
||||
const tableSearchText = ref("");
|
||||
const tableList = ref([]);
|
||||
function getTableList() {
|
||||
tableApi.getList({ page: 1, size: 999 }).then((res) => {
|
||||
tableList.value = res.records;
|
||||
});
|
||||
}
|
||||
//返回台桌状态颜色
|
||||
function returnTableColor(key) {
|
||||
const item = $status[key];
|
||||
return item ? item.type : "";
|
||||
}
|
||||
//返回台桌状态
|
||||
function returnTableLabel(key) {
|
||||
const item = $status[key];
|
||||
return item ? item.label : "";
|
||||
}
|
||||
function tableClick(item) {
|
||||
console.log(item);
|
||||
}
|
||||
|
||||
//临时菜
|
||||
const refAddLingShiCai = ref();
|
||||
function showaddLingShiCai() {
|
||||
refAddLingShiCai.value.open();
|
||||
}
|
||||
function addLingShiCaiConfirm(data) {
|
||||
refCart.value.carts.add({
|
||||
sku_id: "-999",
|
||||
product_id: "-999",
|
||||
is_temporary: 1,
|
||||
sku_name: 1,
|
||||
number: 1,
|
||||
is_pack: 0,
|
||||
is_gift: 0,
|
||||
discount_sale_amount: 0,
|
||||
discount_sale_note: "",
|
||||
is_print: 0,
|
||||
is_wait_call: 0,
|
||||
product_name: "",
|
||||
remark: "",
|
||||
...data,
|
||||
});
|
||||
}
|
||||
//单品改价
|
||||
const refChangePrice = ref();
|
||||
function showChangePrice(cart) {
|
||||
refChangePrice.value.open(cart);
|
||||
}
|
||||
function changePriceConfirm(discount_sale_amount) {
|
||||
refCart.value.carts.updateTag("discount_sale_amount", discount_sale_amount);
|
||||
}
|
||||
|
||||
//打包
|
||||
const refPack = ref();
|
||||
function showPack(packNumber, max) {
|
||||
@@ -151,7 +251,9 @@ const category = reactive({
|
||||
function toggleShowAll() {
|
||||
category.showAll = !category.showAll;
|
||||
}
|
||||
function changeCategoryId() {}
|
||||
function changeCategoryId(category) {
|
||||
goods.query.categoryId = category.id;
|
||||
}
|
||||
|
||||
function getCategoryList() {
|
||||
categoryApi
|
||||
@@ -160,6 +262,7 @@ function getCategoryList() {
|
||||
size: 200,
|
||||
})
|
||||
.then((res) => {
|
||||
res.unshift({ name: "全部", id: "" });
|
||||
category.list = res;
|
||||
});
|
||||
}
|
||||
@@ -171,23 +274,20 @@ const goods = reactive({
|
||||
list: [],
|
||||
query: {
|
||||
categoryId: "",
|
||||
keywords: "",
|
||||
name: "",
|
||||
},
|
||||
});
|
||||
|
||||
let goodsMapisFinish = ref(false);
|
||||
|
||||
function getGoods() {
|
||||
productApi
|
||||
.getPage({
|
||||
page: 1,
|
||||
size: 200,
|
||||
...goods.query,
|
||||
})
|
||||
.then((res) => {
|
||||
goods.list = res.records;
|
||||
goodsMapisFinish.value = true;
|
||||
});
|
||||
async function getGoods() {
|
||||
const res = await productApi.getPage({
|
||||
page: 1,
|
||||
size: 200,
|
||||
...goods.query,
|
||||
});
|
||||
goods.list = res.records;
|
||||
goodsMapisFinish.value = true;
|
||||
}
|
||||
|
||||
function goodsClick(item) {
|
||||
@@ -213,6 +313,31 @@ function goodsClick(item) {
|
||||
refSelSku.value.open(item);
|
||||
}
|
||||
}
|
||||
|
||||
// 多规格选择确认
|
||||
function skuSelConfirm(item) {
|
||||
console.log(item);
|
||||
const listItem = refCart.value.carts.list.find(
|
||||
(v) => v.product_id == item.product_id && v.sku_id == item.sku_id
|
||||
);
|
||||
if (listItem) {
|
||||
refCart.value.carts.update({ ...listItem, ...item });
|
||||
} else {
|
||||
refCart.value.carts.add({
|
||||
is_pack: 0,
|
||||
is_gift: 0,
|
||||
is_temporary: 0,
|
||||
discount_sale_amount: 0,
|
||||
discount_sale_note: "",
|
||||
is_print: 0,
|
||||
is_wait_call: 0,
|
||||
product_name: "",
|
||||
remark: "",
|
||||
...item,
|
||||
});
|
||||
}
|
||||
}
|
||||
|
||||
//购物车
|
||||
const refCart = ref(null);
|
||||
function clearCarts() {
|
||||
@@ -236,7 +361,14 @@ function addCarts(item) {
|
||||
}
|
||||
}
|
||||
|
||||
watch(
|
||||
() => goods.query.categoryId,
|
||||
(newval) => {
|
||||
getGoods();
|
||||
}
|
||||
);
|
||||
function init() {
|
||||
getTableList();
|
||||
getCategoryList();
|
||||
getGoods();
|
||||
}
|
||||
@@ -348,6 +480,7 @@ $pl: 30px;
|
||||
background-color: #f7f7fa;
|
||||
z-index: 1;
|
||||
padding-top: 14px;
|
||||
padding-right: 81px;
|
||||
|
||||
.show_more_btn {
|
||||
padding: 0 10px;
|
||||
@@ -400,4 +533,34 @@ $pl: 30px;
|
||||
padding-left: $pl;
|
||||
}
|
||||
}
|
||||
.lingshicai {
|
||||
width: 100px;
|
||||
height: 100px;
|
||||
border-radius: 4px;
|
||||
position: relative;
|
||||
overflow: hidden;
|
||||
cursor: pointer;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
border: 1px solid #dddfe6;
|
||||
color: #999;
|
||||
}
|
||||
:deep(.el-tag--dark.el-tag--info) {
|
||||
background-color: #fff;
|
||||
color: #000;
|
||||
border: 1px solid #dcdfe6;
|
||||
}
|
||||
.table-item {
|
||||
cursor: pointer;
|
||||
transition: 0.2s ease-in-out;
|
||||
|
||||
&:hover {
|
||||
background: #f4f9ff;
|
||||
}
|
||||
}
|
||||
.no-goods {
|
||||
color: #999;
|
||||
}
|
||||
</style>
|
||||
Reference in New Issue
Block a user