代客下单修改，增加线上店铺装修页面
This commit is contained in:
parent
e0ae1cca67
commit
504aa80c9e
|
|
@ -0,0 +1,86 @@
|
|||
import request from "@/utils/request";
|
||||
import { Account_BaseUrl } from "@/api/config";
|
||||
const baseURL = Account_BaseUrl + "/admin/shopExtend";
|
||||
const API = {
|
||||
get(data: getRequest) {
|
||||
return request<any, ShopExtend>({
|
||||
url: `${baseURL}`,
|
||||
method: "get",
|
||||
params: data
|
||||
});
|
||||
},
|
||||
edit(data: editRequest) {
|
||||
return request({
|
||||
url: `${baseURL}`,
|
||||
method: "put",
|
||||
data: data,
|
||||
});
|
||||
}
|
||||
}
|
||||
export default API;
|
||||
|
||||
export interface getRequest {
|
||||
/**
|
||||
* key名称
|
||||
*/
|
||||
autoKey?: string;
|
||||
[property: string]: any;
|
||||
}
|
||||
|
||||
/**
|
||||
* ShopExtendDTO
|
||||
*/
|
||||
export interface editRequest {
|
||||
/**
|
||||
* 自增id
|
||||
*/
|
||||
autokey: null | string;
|
||||
/**
|
||||
* 值
|
||||
*/
|
||||
value: null | string;
|
||||
[property: string]: any;
|
||||
}
|
||||
|
||||
|
||||
/**
|
||||
* 店铺扩展信息 实体类。
|
||||
*
|
||||
* ShopExtend
|
||||
*/
|
||||
export interface ShopExtend {
|
||||
/**
|
||||
* 自定义key
|
||||
*/
|
||||
autoKey?: null | string;
|
||||
/**
|
||||
* 创建时间
|
||||
*/
|
||||
createTime?: null | string;
|
||||
detail?: null | string;
|
||||
/**
|
||||
* 自增id
|
||||
*/
|
||||
id?: number | null;
|
||||
/**
|
||||
* 描述
|
||||
*/
|
||||
name?: null | string;
|
||||
/**
|
||||
* 商户Id
|
||||
*/
|
||||
shopId?: number | null;
|
||||
/**
|
||||
* img:图片；text:文本；
|
||||
*/
|
||||
type?: null | string;
|
||||
/**
|
||||
* 更新时间
|
||||
*/
|
||||
updateTime?: null | string;
|
||||
/**
|
||||
* 值
|
||||
*/
|
||||
value?: null | string;
|
||||
[property: string]: any;
|
||||
}
|
||||
|
|
@ -0,0 +1 @@
|
|||
<?xml version="1.0" standalone="no"?><!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd"><svg t="1740188619494" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="10600" xmlns:xlink="http://www.w3.org/1999/xlink" width="128" height="128"><path d="M867.360957 146.270357h16.015883c9.141486 0 16.893466 2.925275 23.402204 8.629562a36.565944 36.565944 0 0 1 11.99363 22.232094l25.157369 146.263775a35.980889 35.980889 0 0 1-8.556431 29.179623 34.664515 34.664515 0 0 1-28.009513 13.090608h-55.945894l-44.610451 623.961263a36.346548 36.346548 0 0 1-36.565943 34.298855H253.638158a36.346548 36.346548 0 0 1-36.565943-34.298855L172.461763 365.666019H116.589001a34.664515 34.664515 0 0 1-28.009513-13.16374 35.980889 35.980889 0 0 1-8.55643-29.106491l25.157369-146.263775a36.858471 36.858471 0 0 1 11.993629-22.232094A34.152591 34.152591 0 0 1 140.57626 146.270357h16.015884L148.547636 38.766482c0-10.604124 3.656594-19.74561 10.896651-27.351326A34.445119 34.445119 0 0 1 185.186712 0.006582h652.482699c10.677256 0 19.599346 3.802858 26.839402 11.481706 7.166925 7.605716 10.45786 16.747202 9.726541 27.424458L867.360957 146.270357zM793.058959 146.270357l5.704288-73.131888H225.116722l4.607309 73.131888h563.334928zM166.90374 292.534131h697.020018l-11.408574-73.131887H171.437917L160.029342 292.534131h6.874398z m78.836174 73.131888l42.270231 585.055099h447.93281l42.270231-585.055099H245.593651z" p-id="10601" fill="#000000"></path></svg>
|
||||
|
After Width: | Height: | Size: 1.5 KiB |
|
|
@ -0,0 +1 @@
|
|||
<?xml version="1.0" standalone="no"?><!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd"><svg t="1740188417254" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="8262" xmlns:xlink="http://www.w3.org/1999/xlink" width="128" height="128"><path d="M160 224a32 32 0 0 0-32 32v512a32 32 0 0 0 32 32h704a32 32 0 0 0 32-32V256a32 32 0 0 0-32-32z m0-64h704a96 96 0 0 1 96 96v512a96 96 0 0 1-96 96H160a96 96 0 0 1-96-96V256a96 96 0 0 1 96-96" p-id="8263" fill="#000000"></path><path d="M704 320a64 64 0 1 1 0 128 64 64 0 0 1 0-128M288 448h256q32 0 32 32t-32 32H288q-32 0-32-32t32-32m0 128h256q32 0 32 32t-32 32H288q-32 0-32-32t32-32" p-id="8264" fill="#000000"></path></svg>
|
||||
|
After Width: | Height: | Size: 753 B |
|
|
@ -0,0 +1 @@
|
|||
<?xml version="1.0" standalone="no"?><!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd"><svg t="1740188698469" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="11697" xmlns:xlink="http://www.w3.org/1999/xlink" width="128" height="128"><path d="M640 288h-64V128H128v704h384v32c0 9.344 2.986667 17.024 8.96 23.04 6.016 5.973333 13.696 8.96 23.04 8.96H96a31.146667 31.146667 0 0 1-23.04-8.96 31.146667 31.146667 0 0 1-8.96-23.04v-768a31.146667 31.146667 0 0 1 8.96-23.04 31.146667 31.146667 0 0 1 23.04-8.96h512a31.146667 31.146667 0 0 1 23.04 8.96c5.973333 6.016 8.96 13.696 8.96 23.04v192zM128 320v512h768v-512H128zM96 256h832a31.146667 31.146667 0 0 1 23.04 8.96c5.973333 6.016 8.96 13.696 8.96 23.04v576a31.146667 31.146667 0 0 1-8.96 23.04 31.146667 31.146667 0 0 1-23.04 8.96H96a31.146667 31.146667 0 0 1-23.04-8.96 31.146667 31.146667 0 0 1-8.96-23.04V288a31.146667 31.146667 0 0 1 8.96-23.04 31.146667 31.146667 0 0 1 23.04-8.96z m608 384a64.512 64.512 0 0 1-45.013333-18.986667 61.226667 61.226667 0 0 1-18.005334-45.013333c0-17.962667 5.973333-32.981333 18.005334-45.013333a61.098667 61.098667 0 0 1 45.013333-18.005334c17.962667 0 32.981333 6.016 45.013333 18.005334 12.032 12.032 18.005333 27.008 18.005334 45.013333 0 17.962667-6.058667 32.981333-18.005334 45.013333-12.032 11.989333-27.008 18.346667-45.013333 18.986667z" fill="#000000" fill-opacity=".96" p-id="11698"></path></svg>
|
||||
|
After Width: | Height: | Size: 1.4 KiB |
|
|
@ -1,8 +1,17 @@
|
|||
<!-- 单图上传组件 -->
|
||||
<template>
|
||||
<el-upload v-model="modelValue" class="single-upload" list-type="picture-card" :show-file-list="false"
|
||||
:accept="props.accept" :before-upload="handleBeforeUpload" :http-request="handleUpload" :on-success="onSuccess"
|
||||
:on-error="onError" multiple>
|
||||
<el-upload
|
||||
v-model="modelValue"
|
||||
class="single-upload"
|
||||
list-type="picture-card"
|
||||
:show-file-list="false"
|
||||
:accept="props.accept"
|
||||
:before-upload="handleBeforeUpload"
|
||||
:http-request="handleUpload"
|
||||
:on-success="onSuccess"
|
||||
:on-error="onError"
|
||||
multiple
|
||||
>
|
||||
<template #default>
|
||||
<el-image v-if="modelValue" :src="modelValue" />
|
||||
<el-icon v-if="modelValue" class="single-upload__delete-btn" @click.stop="handleDelete">
|
||||
|
|
@ -138,6 +147,7 @@ function handleDelete() {
|
|||
modelValue.value = "";
|
||||
}
|
||||
|
||||
const emits = defineEmits(["onSuccess"]);
|
||||
/**
|
||||
* 上传成功回调
|
||||
*
|
||||
|
|
@ -146,6 +156,7 @@ function handleDelete() {
|
|||
const onSuccess = (fileInfo: string) => {
|
||||
ElMessage.success("上传成功");
|
||||
modelValue.value = fileInfo;
|
||||
emits("onSuccess", fileInfo);
|
||||
};
|
||||
|
||||
/**
|
||||
|
|
|
|||
|
|
@ -7,6 +7,9 @@ export interface CartsState {
|
|||
}
|
||||
|
||||
export const useCartsStore = defineStore("carts", () => {
|
||||
//台桌id
|
||||
const table_code = ref('');
|
||||
|
||||
//当前购物车数据
|
||||
const list = useStorage<any[]>("carts", []);
|
||||
//赠菜
|
||||
|
|
@ -20,6 +23,10 @@ export const useCartsStore = defineStore("carts", () => {
|
|||
id: '',
|
||||
number: 0,
|
||||
}
|
||||
//购物车是否为空
|
||||
const isEmpty = computed(() => {
|
||||
return list.value.length === 0 && giftList.value.length === 0
|
||||
})
|
||||
const selCart = computed(() => {
|
||||
if (isSelGift.value) {
|
||||
return giftList.value[selListIndex.value] || defaultCart
|
||||
|
|
@ -43,7 +50,12 @@ export const useCartsStore = defineStore("carts", () => {
|
|||
//支付总价
|
||||
const payMoney = computed(() => {
|
||||
const money = list.value.reduce((acc: number, cur: any) => {
|
||||
return acc + cur.number * cur.salePrice
|
||||
if (cur.is_temporary) {
|
||||
//临时菜
|
||||
return acc + cur.number * (cur.discount_sale_amount)
|
||||
} else {
|
||||
return acc + cur.number * (cur.salePrice)
|
||||
}
|
||||
}, 0)
|
||||
return money.toFixed(2)
|
||||
})
|
||||
|
|
@ -59,13 +71,13 @@ export const useCartsStore = defineStore("carts", () => {
|
|||
})
|
||||
|
||||
|
||||
const table_code = ref('');
|
||||
function changeNumber(step: number, item: CartsState) {
|
||||
if (item.number * 1 + step <= 0) {
|
||||
del(item);
|
||||
return;
|
||||
}
|
||||
update({ ...item, number: step * 1 });
|
||||
const newNumber = item.number * 1 + step * 1;
|
||||
update({ ...item, number: step * 1, pack_number: newNumber < item.pack_number ? (item.pack_number * 1 + step * 1) : item.pack_number });
|
||||
}
|
||||
|
||||
function changeSelCart(cart: CartsState) {
|
||||
|
|
@ -86,6 +98,7 @@ export const useCartsStore = defineStore("carts", () => {
|
|||
function add(data: any) {
|
||||
sendMessage('add', data);
|
||||
}
|
||||
|
||||
function del(data: any) {
|
||||
sendMessage('del', data);
|
||||
}
|
||||
|
|
@ -94,8 +107,8 @@ export const useCartsStore = defineStore("carts", () => {
|
|||
console.log(data);
|
||||
sendMessage('edit', data);
|
||||
}
|
||||
function updateTag(key: string, val: any) {
|
||||
sendMessage('edit', { ...selCart.value, number: 0, [key]: val });
|
||||
function updateTag(key: string, val: any, cart: CartsState) {
|
||||
sendMessage('edit', { ...cart || selCart.value, number: 0, [key]: val });
|
||||
}
|
||||
function clear() {
|
||||
sendMessage('cleanup', {});
|
||||
|
|
@ -123,6 +136,9 @@ export const useCartsStore = defineStore("carts", () => {
|
|||
if (msg.hasOwnProperty('status') && msg.status != 1) {
|
||||
return ElMessage.error(msg.message || '操作失败')
|
||||
}
|
||||
if (msg && msg.data && msg.data[0]) {
|
||||
table_code.value = table_code.value ? table_code.value : msg.data[0].table_code
|
||||
}
|
||||
// 初始化
|
||||
if (msg.operate_type === "manage_init") {
|
||||
// 设置单价
|
||||
|
|
@ -164,6 +180,7 @@ export const useCartsStore = defineStore("carts", () => {
|
|||
} else {
|
||||
giftList.value[giftIndex] = { ...giftItem, ...newCart }
|
||||
}
|
||||
ElMessage.success(msg.message || '修改成功')
|
||||
return
|
||||
}
|
||||
if (!isSelGift.value) {
|
||||
|
|
@ -175,6 +192,7 @@ export const useCartsStore = defineStore("carts", () => {
|
|||
} else {
|
||||
list.value[index] = { ...cartItem, ...newCart }
|
||||
}
|
||||
ElMessage.success(msg.message || '修改成功')
|
||||
return
|
||||
}
|
||||
|
||||
|
|
@ -199,8 +217,11 @@ export const useCartsStore = defineStore("carts", () => {
|
|||
return ElMessage.success(msg.message || '删除成功')
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
}
|
||||
if (msg.operate_type === "manage_cleanup") {
|
||||
list.value = []
|
||||
giftList.value = []
|
||||
table_code.value = ''
|
||||
}
|
||||
console.log(list.value)
|
||||
});
|
||||
|
|
@ -216,7 +237,7 @@ export const useCartsStore = defineStore("carts", () => {
|
|||
del,
|
||||
update,
|
||||
init,
|
||||
changeNumber,
|
||||
changeNumber, isEmpty,
|
||||
selCart, totalNumber,
|
||||
changeSelCart, payMoney,
|
||||
clear, yiyouhui, giftList
|
||||
|
|
|
|||
|
|
@ -58,11 +58,23 @@ class WebSocketManager {
|
|||
this.client.onopen = () => {
|
||||
this.connected = true;
|
||||
console.log("WebSocket 连接已建立");
|
||||
ElNotification.success('WebSocket 连接已建立')
|
||||
this.sendMessage(this.initParams)
|
||||
};
|
||||
this.client.onclose = () => {
|
||||
if (!this.connected) {
|
||||
ElMessageBox.alert('WebSocket 连接已断开', 'Title', {
|
||||
// if you want to disable its autofocus
|
||||
// autofocus: false,
|
||||
confirmButtonText: '立即重连',
|
||||
callback: () => {
|
||||
this.sendMessage(this.initParams)
|
||||
},
|
||||
})
|
||||
}
|
||||
this.connected = false;
|
||||
console.log("WebSocket 连接已断开");
|
||||
|
||||
};
|
||||
this.client.onerror = (error) => {
|
||||
console.error("WebSocket 发生错误:", error);
|
||||
|
|
@ -71,6 +83,14 @@ class WebSocketManager {
|
|||
message: "WebSocket 发生错误",
|
||||
type: "error",
|
||||
});
|
||||
ElMessageBox.alert('WebSocket 发生错误', 'Title', {
|
||||
// if you want to disable its autofocus
|
||||
// autofocus: false,
|
||||
confirmButtonText: '立即重连',
|
||||
callback: () => {
|
||||
this.sendMessage(this.initParams)
|
||||
},
|
||||
})
|
||||
};
|
||||
this.client.onmessage = (event) => {
|
||||
const message = event.data;
|
||||
|
|
|
|||
|
|
@ -1 +1,727 @@
|
|||
<template></template>
|
||||
<template>
|
||||
<div class="app-container">
|
||||
<div class="btn_wraps">
|
||||
<div
|
||||
class="btn"
|
||||
:class="{ active: tableActive == item.autoKey }"
|
||||
v-for="item in tableData"
|
||||
:key="item.autoKey"
|
||||
@click="selectItemChange(item.autoKey)"
|
||||
>
|
||||
{{ item.name }}
|
||||
</div>
|
||||
</div>
|
||||
<div class="form">
|
||||
<div class="preview_wrap">
|
||||
<div class="phone_wrap">
|
||||
<div class="index_bg" v-if="tableActive == 'home'">
|
||||
<img class="bg" :src="selectItem.value" />
|
||||
<div class="menu_wrap">
|
||||
<div class="menu_wrap_div">
|
||||
<div class="left">
|
||||
<div class="icon_wrap">
|
||||
<SvgIcon
|
||||
style="margin-right: 0"
|
||||
color="rgb(0,0,0)"
|
||||
size="30"
|
||||
iconClass="Coffee"
|
||||
></SvgIcon>
|
||||
</div>
|
||||
<div class="info">
|
||||
<div class="t1">点餐</div>
|
||||
<div class="t2">在线点不排队</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="right">
|
||||
<div class="btn">
|
||||
<SvgIcon
|
||||
style="margin-right: 0"
|
||||
size="30"
|
||||
color="rgb(0,0,0)"
|
||||
iconClass="postcard"
|
||||
></SvgIcon>
|
||||
<div class="info">
|
||||
<div class="t1">会员</div>
|
||||
<div class="t2">入会享权益</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="btn">
|
||||
<SvgIcon
|
||||
style="margin-right: 0"
|
||||
color="rgb(0,0,0)"
|
||||
size="30"
|
||||
iconClass="wallet"
|
||||
></SvgIcon>
|
||||
<div class="info">
|
||||
<div class="t1">充值</div>
|
||||
<div class="t2">充值享更多优惠</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="my_bg" v-if="tableActive == 'my_bg'">
|
||||
<img class="bg" :src="selectItem.value" />
|
||||
<div class="content">
|
||||
<div class="item" style="display: flex">
|
||||
<div class="left">
|
||||
<div class="avatar">
|
||||
<i class="icon el-icon-s-custom"></i>
|
||||
</div>
|
||||
<span>微信用户</span>
|
||||
</div>
|
||||
<div class="ewm">
|
||||
<i class="icon el-icon-menu"></i>
|
||||
</div>
|
||||
</div>
|
||||
<div class="item">
|
||||
<div class="title" style="padding-bottom: 10px">我的资产</div>
|
||||
<div class="flex">
|
||||
<div class="btn">
|
||||
<i class="icon el-icon-s-finance"></i>
|
||||
<span class="name">储值</span>
|
||||
<span class="num">**</span>
|
||||
</div>
|
||||
<div class="btn">
|
||||
<i class="icon el-icon-s-ticket"></i>
|
||||
<span class="name">优惠券</span>
|
||||
<span class="num">**</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="item">
|
||||
<div class="title" style="padding-bottom: 10px">我的功能</div>
|
||||
<div class="row">
|
||||
<div class="left">
|
||||
<i class="icon el-icon-s-ticket"></i>
|
||||
<div class="label">我的优惠券</div>
|
||||
</div>
|
||||
<i class="arrow el-icon-arrow-right"></i>
|
||||
</div>
|
||||
<div class="row">
|
||||
<div class="left">
|
||||
<i class="icon el-icon-s-order"></i>
|
||||
<div class="label">我的订单</div>
|
||||
</div>
|
||||
<i class="arrow el-icon-arrow-right"></i>
|
||||
</div>
|
||||
<div class="row">
|
||||
<div class="left">
|
||||
<i class="icon el-icon-user-solid"></i>
|
||||
<div class="label">个人资料</div>
|
||||
</div>
|
||||
<i class="arrow el-icon-arrow-right"></i>
|
||||
</div>
|
||||
<div class="row">
|
||||
<div class="left">
|
||||
<i class="icon el-icon-s-management"></i>
|
||||
<div class="label">我的会员卡</div>
|
||||
</div>
|
||||
<i class="arrow el-icon-arrow-right"></i>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="member_bg" v-if="tableActive == 'member_bg'">
|
||||
<div class="card_wrap">
|
||||
<div class="card">
|
||||
<img class="bg" :src="selectItem.value" />
|
||||
<div class="content">
|
||||
<div class="ewm">
|
||||
<i class="icon el-icon-menu"></i>
|
||||
</div>
|
||||
<div class="title">{{ shopName }}会员卡 Lv.1</div>
|
||||
<div class="tips">
|
||||
<span>欢迎加入本店会员</span>
|
||||
<span>查看特权</span>
|
||||
</div>
|
||||
<div class="btm">
|
||||
<div class="item">
|
||||
<span>0.00</span>
|
||||
<span>储值</span>
|
||||
</div>
|
||||
<div class="item">
|
||||
<span>0</span>
|
||||
<span>积分</span>
|
||||
</div>
|
||||
<div class="item">
|
||||
<span>0</span>
|
||||
<span>优惠券</span>
|
||||
</div>
|
||||
<div class="item">
|
||||
<span>0</span>
|
||||
<span>权益卡</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="info_wrap">
|
||||
<div class="avatar">
|
||||
<i class="icon el-icon-user"></i>
|
||||
</div>
|
||||
<div class="info">
|
||||
<div class="t1">感谢你2天陪伴</div>
|
||||
<div class="t2">
|
||||
您今天的幸运词：
|
||||
<span>林波微步</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="shopinfo_bg" v-if="tableActive == 'shopinfo_bg'">
|
||||
<img class="bg" :src="selectItem.value" />
|
||||
<div class="shop_name">{{ shopName }}</div>
|
||||
<img class="content" src="@/assets/images/shop_editor_bg.png" alt="" />
|
||||
</div>
|
||||
<div class="ticket_wrap" v-if="tableActive == 'ticket_logo'">
|
||||
<img class="logo" :src="selectItem.value" />
|
||||
<img class="ewm" src="@/assets/images/1024.png" />
|
||||
<div class="row">
|
||||
<span class="num">123</span>
|
||||
<span>座位号：#A9</span>
|
||||
</div>
|
||||
<div class="row">甜橙马黛茶</div>
|
||||
<div class="row">
|
||||
<span class="sku">加珍珠、加糖</span>
|
||||
</div>
|
||||
<div class="row">
|
||||
<span class="b">2020-10-24 13:14:52</span>
|
||||
</div>
|
||||
<div class="row">
|
||||
<span class="sku">建议尽快享用，风味更佳</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="editor_wrap">
|
||||
<div class="header" style="padding-bottom: 20px">
|
||||
<div class="t1">
|
||||
{{ selectItem.name }}
|
||||
</div>
|
||||
<div class="t2">注：点击图片更换</div>
|
||||
</div>
|
||||
<div class="form_item">
|
||||
<SingleImageUpload v-model="selectItem.value" @onSuccess="onSuccess">
|
||||
<img v-if="selectItem.value" :src="selectItem.value" class="avatar" />
|
||||
<i v-else class="el-icon-plus avatar-uploader-icon"></i>
|
||||
</SingleImageUpload>
|
||||
<!-- <el-upload
|
||||
:headers="headers"
|
||||
class="avatar-uploader"
|
||||
:action="qiNiuUploadApi"
|
||||
:show-file-list="false"
|
||||
:on-success="handleSuccess"
|
||||
style="width: 200px; height: 200px"
|
||||
>
|
||||
<img v-if="selectItem.value" :src="selectItem.value" class="avatar" />
|
||||
<i v-else class="el-icon-plus avatar-uploader-icon"></i>
|
||||
</el-upload> -->
|
||||
<!-- <div class="title" style="padding-left: 20px;">跳转路径</div>
|
||||
<el-input style="width: 300px;margin-left: 20px;" />
|
||||
<el-button type="primary" style="margin-left: 20px;">修改</el-button> -->
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import shopExtendApi from "@/api/account/shopExtend";
|
||||
export default {
|
||||
data() {
|
||||
return {
|
||||
tableActive: "home",
|
||||
tableData: [],
|
||||
selectItem: {},
|
||||
imageUrl: "",
|
||||
};
|
||||
},
|
||||
mounted() {
|
||||
this.getList();
|
||||
},
|
||||
methods: {
|
||||
// 刷新列表数据
|
||||
async doSubmit() {
|
||||
await shopExtendApi.edit({
|
||||
...this.selectItem,
|
||||
autokey: this.selectItem.autoKey,
|
||||
});
|
||||
this.$message({
|
||||
message: "编辑成功",
|
||||
type: "success",
|
||||
});
|
||||
this.getList();
|
||||
},
|
||||
onSuccess(response) {
|
||||
this.doSubmit();
|
||||
},
|
||||
// 切换类型
|
||||
selectItemChange(key) {
|
||||
this.tableActive = key;
|
||||
const { autoKey, id, name, value } = this.tableData.find((item) => item.autoKey == key);
|
||||
this.selectItem = { autoKey, id, name, value };
|
||||
console.log(this.selectItem);
|
||||
},
|
||||
// 获取装修数据
|
||||
async getList() {
|
||||
try {
|
||||
let res = await shopExtendApi.get({});
|
||||
this.tableData = res;
|
||||
console.log(this.tableData[0]);
|
||||
this.selectItemChange(this.tableActive);
|
||||
} catch (error) {
|
||||
console.log(error);
|
||||
}
|
||||
},
|
||||
},
|
||||
};
|
||||
</script>
|
||||
|
||||
<style scoped lang="scss">
|
||||
.btn_wraps {
|
||||
display: flex;
|
||||
$color: #40a9ff;
|
||||
gap: 30px;
|
||||
|
||||
.btn {
|
||||
width: 100px;
|
||||
height: 40px;
|
||||
border: 1px solid $color;
|
||||
border-radius: 4px;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
box-shadow: 0 0 0 4px #40a9ff29;
|
||||
color: $color;
|
||||
cursor: pointer;
|
||||
|
||||
&.active {
|
||||
background-color: $color;
|
||||
color: #fff;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.form {
|
||||
display: flex;
|
||||
padding-top: 30px;
|
||||
|
||||
.preview_wrap {
|
||||
width: 317px;
|
||||
|
||||
.phone_wrap {
|
||||
width: 100%;
|
||||
background-color: #fff;
|
||||
box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
|
||||
|
||||
.index_bg {
|
||||
padding-bottom: 50px;
|
||||
.bg {
|
||||
width: 100%;
|
||||
height: 500px;
|
||||
object-fit: cover;
|
||||
position: relative;
|
||||
}
|
||||
|
||||
.info {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
padding-top: 10px;
|
||||
|
||||
.t1 {
|
||||
font-size: 14px;
|
||||
}
|
||||
|
||||
.t2 {
|
||||
font-size: 10px;
|
||||
color: #999;
|
||||
}
|
||||
}
|
||||
|
||||
.menu_wrap {
|
||||
padding: 0 20px;
|
||||
margin-top: -50px;
|
||||
position: relative;
|
||||
|
||||
.menu_wrap_div {
|
||||
box-shadow: 0 5px 15px rgba(0, 0, 0, 0.1);
|
||||
display: flex;
|
||||
padding: 20px 10px;
|
||||
border-radius: 10px;
|
||||
background-color: #fff;
|
||||
|
||||
.left {
|
||||
flex: 1;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
|
||||
.icon_wrap {
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
|
||||
.icon {
|
||||
font-size: 34px;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.right {
|
||||
flex: 1;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
border-left: 1px solid #ddd;
|
||||
padding-left: 20px;
|
||||
|
||||
.btn {
|
||||
flex: 1;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
|
||||
&:last-child {
|
||||
margin-top: 6px;
|
||||
}
|
||||
|
||||
.icon {
|
||||
font-size: 30px;
|
||||
}
|
||||
|
||||
.info {
|
||||
flex: 1;
|
||||
padding-top: 0;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.my_bg {
|
||||
background-color: #f5f5f5;
|
||||
height: 100%;
|
||||
padding-bottom: 50px;
|
||||
|
||||
.bg {
|
||||
width: 100%;
|
||||
height: 180px;
|
||||
object-fit: cover;
|
||||
position: relative;
|
||||
}
|
||||
|
||||
.content {
|
||||
padding: 0 10px;
|
||||
margin-top: -40px;
|
||||
position: relative;
|
||||
|
||||
.item {
|
||||
padding: 10px;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
background-color: #fff;
|
||||
border-radius: 10px;
|
||||
margin-bottom: 10px;
|
||||
|
||||
.left {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
|
||||
.avatar {
|
||||
width: 50px;
|
||||
height: 50px;
|
||||
background-color: #efefef;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
border-radius: 50%;
|
||||
|
||||
.icon {
|
||||
font-size: 24px;
|
||||
color: #ddd;
|
||||
}
|
||||
}
|
||||
|
||||
span {
|
||||
margin-left: 10px;
|
||||
}
|
||||
}
|
||||
|
||||
.ewm {
|
||||
width: 30px;
|
||||
height: 30px;
|
||||
border-radius: 50%;
|
||||
background-color: #e3ad7f;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
|
||||
.icon {
|
||||
font-size: 20px;
|
||||
color: #fff;
|
||||
}
|
||||
}
|
||||
|
||||
.flex {
|
||||
display: flex;
|
||||
|
||||
.btn {
|
||||
flex: 1;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
gap: 5px;
|
||||
|
||||
.icon {
|
||||
font-size: 28px;
|
||||
}
|
||||
|
||||
.name {
|
||||
font-size: 14px;
|
||||
}
|
||||
|
||||
.num {
|
||||
color: #e3ad7f;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.row {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
padding: 10px 0;
|
||||
|
||||
.left {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
|
||||
.icon {
|
||||
font-size: 20px;
|
||||
}
|
||||
|
||||
.label {
|
||||
font-size: 14px;
|
||||
margin-left: 10px;
|
||||
}
|
||||
}
|
||||
|
||||
.arrow {
|
||||
font-size: 14px;
|
||||
color: #999;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.member_bg {
|
||||
height: 100%;
|
||||
background-color: #f5f5f5;
|
||||
padding: 10px;
|
||||
padding-bottom: 400px;
|
||||
|
||||
.card_wrap {
|
||||
background-color: #fff;
|
||||
border-radius: 10px;
|
||||
overflow: hidden;
|
||||
|
||||
.card {
|
||||
height: 144px;
|
||||
position: relative;
|
||||
|
||||
.bg {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
position: absolute;
|
||||
top: 0;
|
||||
left: 0;
|
||||
object-fit: cover;
|
||||
border-radius: 0 0 10px 10px;
|
||||
}
|
||||
|
||||
.content {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
position: absolute;
|
||||
top: 0;
|
||||
left: 0;
|
||||
background-color: rgba(0, 0, 0, 0.3);
|
||||
border-radius: 0 0 10px 10px;
|
||||
color: #fff;
|
||||
padding: 20px;
|
||||
font-size: 14px;
|
||||
|
||||
.ewm {
|
||||
width: 30px;
|
||||
height: 30px;
|
||||
border-radius: 50%;
|
||||
background-color: #000;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
position: absolute;
|
||||
top: 15px;
|
||||
right: 20px;
|
||||
|
||||
.icon {
|
||||
font-size: 16px;
|
||||
color: #fff;
|
||||
}
|
||||
}
|
||||
|
||||
.title {
|
||||
font-size: 16px;
|
||||
}
|
||||
|
||||
.tips {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
margin-top: 10px;
|
||||
color: inherit;
|
||||
}
|
||||
|
||||
.btm {
|
||||
width: 100%;
|
||||
display: flex;
|
||||
position: absolute;
|
||||
bottom: 20px;
|
||||
left: 0;
|
||||
|
||||
.item {
|
||||
flex: 1;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.info_wrap {
|
||||
padding: 20px 10px;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
|
||||
.avatar {
|
||||
width: 40px;
|
||||
height: 40px;
|
||||
border-radius: 50%;
|
||||
background-color: #efefef;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
|
||||
.icon {
|
||||
color: #555;
|
||||
font-size: 24px;
|
||||
}
|
||||
}
|
||||
|
||||
.info {
|
||||
flex: 1;
|
||||
|
||||
.t1 {
|
||||
font-size: 14px;
|
||||
}
|
||||
|
||||
.t2 {
|
||||
font-size: 10px;
|
||||
color: #999;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.shopinfo_bg {
|
||||
.bg {
|
||||
width: 100%;
|
||||
height: 120px;
|
||||
object-fit: cover;
|
||||
}
|
||||
|
||||
.shop_name {
|
||||
padding: 10px 10px 0 10px;
|
||||
}
|
||||
|
||||
.content {
|
||||
width: 100%;
|
||||
height: auto;
|
||||
display: block;
|
||||
}
|
||||
}
|
||||
|
||||
.ticket_wrap {
|
||||
padding: 15px;
|
||||
position: relative;
|
||||
|
||||
.ewm {
|
||||
width: 80px;
|
||||
height: 80px;
|
||||
position: absolute;
|
||||
top: 10px;
|
||||
right: 15px;
|
||||
}
|
||||
|
||||
.logo {
|
||||
width: 90px;
|
||||
height: 30px;
|
||||
object-fit: cover;
|
||||
}
|
||||
|
||||
.row {
|
||||
margin-top: 5px;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
|
||||
.sku {
|
||||
font-size: 12px;
|
||||
color: #666;
|
||||
}
|
||||
|
||||
.b {
|
||||
font-weight: bold;
|
||||
}
|
||||
|
||||
.num {
|
||||
font-size: 18px;
|
||||
font-weight: bold;
|
||||
margin-right: 10px;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.editor_wrap {
|
||||
padding-left: 20px;
|
||||
|
||||
.header {
|
||||
.t2 {
|
||||
color: #999;
|
||||
font-size: 12px;
|
||||
}
|
||||
}
|
||||
|
||||
.form_item {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
|
||||
.avatar {
|
||||
display: block;
|
||||
width: 200px;
|
||||
height: 200px;
|
||||
object-fit: cover;
|
||||
}
|
||||
|
||||
.title {
|
||||
flex-shrink: 0;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
</style>
|
||||
|
|
@ -16,7 +16,7 @@
|
|||
</div>
|
||||
<div
|
||||
class="isSeatFee img u-line-1 u-flex u-col-center u-row-center"
|
||||
v-else-if="!item.product_id"
|
||||
v-else-if="item.is_temporary"
|
||||
>
|
||||
<span>临时菜</span>
|
||||
</div>
|
||||
|
|
@ -25,7 +25,7 @@
|
|||
<div class="good-info u-p-t-6">
|
||||
<div class="flex lh-16">
|
||||
<div class="name" :class="{ 'free-price': item.status === 'return' }">
|
||||
{{ item.name }}
|
||||
{{ item.name || item.product_name }}
|
||||
</div>
|
||||
<span class="good_info_discount" v-if="item.is_gift">赠</span>
|
||||
</div>
|
||||
|
|
@ -177,6 +177,9 @@ const vipAllPrice = computed(() => {
|
|||
return 0;
|
||||
});
|
||||
const allPrice = computed(() => {
|
||||
if (props.item.discount_sale_amount * 1 != 0) {
|
||||
return props.item.number * props.item.discount_sale_amount;
|
||||
}
|
||||
return props.item.number * props.item.salePrice;
|
||||
});
|
||||
|
||||
|
|
@ -199,7 +202,7 @@ const emits = defineEmits([
|
|||
"itemClick",
|
||||
]);
|
||||
function editNote() {
|
||||
emits("editNote", props.index);
|
||||
emits("editNote");
|
||||
}
|
||||
//购物车商品输入框数量改变
|
||||
function cartGoodsNumberChange(newval) {
|
||||
|
|
|
|||
|
|
@ -8,18 +8,22 @@
|
|||
@changeNumber="changeNumber"
|
||||
:selCart="carts.selCart"
|
||||
@itemClick="itemClick(item)"
|
||||
@editNote="editNote"
|
||||
></carts-item>
|
||||
</div>
|
||||
<!-- 赠菜 -->
|
||||
<div class="cart-title"><span>以下是优惠菜品</span></div>
|
||||
<div class="cart-title" v-if="carts.giftList.length > 0"><span>以下是优惠菜品</span></div>
|
||||
<div v-for="(item, index) in carts.giftList" :key="index">
|
||||
<carts-item
|
||||
:item="item"
|
||||
@changeNumber="changeNumber"
|
||||
:selCart="carts.selCart"
|
||||
@itemClick="itemClick(item)"
|
||||
@editNote="editNote"
|
||||
></carts-item>
|
||||
</div>
|
||||
|
||||
<el-empty image-size="60" v-if="carts.isEmpty" description="点餐列表为空" />
|
||||
</div>
|
||||
<div class="bottom">
|
||||
<div class="yiyouhui">{{ carts.yiyouhui }}</div>
|
||||
|
|
@ -54,6 +58,11 @@ const props = defineProps({
|
|||
},
|
||||
});
|
||||
|
||||
const emits = defineEmits(["editNote"]);
|
||||
function editNote() {
|
||||
emits("editNote");
|
||||
}
|
||||
|
||||
const selCartId = ref(null);
|
||||
|
||||
const carts = useCartsStore();
|
||||
|
|
|
|||
|
|
@ -37,12 +37,12 @@ const controls = ref([
|
|||
{ label: "整单备注", key: "all-note", disabled: false, per: "all-note" },
|
||||
{ label: "退菜", key: "", disabled: false, per: "order" },
|
||||
{ label: "免厨打", key: "is_print", disabled: false, per: "cart" },
|
||||
{ label: "单品改价", key: "", disabled: false, per: "cart" },
|
||||
{ label: "等叫", key: "", disabled: false, per: "cart" },
|
||||
{ label: "单品改价", key: "changePriceClick", disabled: false, per: "cart" },
|
||||
{ label: "等叫", key: "is_wait_call", disabled: false, per: "cart" },
|
||||
{ label: "整单等叫", key: "", disabled: false, per: "all-wating" },
|
||||
]);
|
||||
|
||||
const emits = defineEmits(["noteClick"]);
|
||||
const emits = defineEmits(["noteClick", "changePriceClick", "packClick"]);
|
||||
function controlsClick(item) {
|
||||
switch (item.key) {
|
||||
case "is_gift":
|
||||
|
|
@ -57,8 +57,8 @@ function controlsClick(item) {
|
|||
case "del":
|
||||
carts.del(carts.selCart);
|
||||
break;
|
||||
case "save":
|
||||
carts.saveCart();
|
||||
case "changePriceClick":
|
||||
emits("changePriceClick", carts.selCart);
|
||||
break;
|
||||
case "one-note":
|
||||
emits("noteClick", true);
|
||||
|
|
@ -66,8 +66,8 @@ function controlsClick(item) {
|
|||
case "all-note":
|
||||
emits("noteClick", false);
|
||||
break;
|
||||
case "order":
|
||||
carts.order();
|
||||
case "is_wait_call":
|
||||
carts.updateTag("is_wait_call", carts.selCart.is_wait_call ? 0 : 1);
|
||||
break;
|
||||
case "all-wating":
|
||||
carts.allWating();
|
||||
|
|
@ -96,6 +96,9 @@ function returnLabel(item) {
|
|||
if (item.key == "is_print") {
|
||||
return carts.selCart.is_print ? "免厨打" : "打印";
|
||||
}
|
||||
if (item.key == "is_wait_call") {
|
||||
return carts.selCart.is_wait_call ? "取消等叫" : "等叫";
|
||||
}
|
||||
return item.label;
|
||||
}
|
||||
</script>
|
||||
|
|
|
|||
|
|
@ -35,7 +35,7 @@
|
|||
<div class="u-flex" style="margin-top: 14px">
|
||||
<el-button v-if="!skuData.isGrounding" disabled style="width: 100%">已下架</el-button>
|
||||
<template v-else>
|
||||
<el-button type="primary" style="width: 100%">确 定</el-button>
|
||||
<el-button type="primary" style="width: 100%" @click="confirm">确 定</el-button>
|
||||
</template>
|
||||
</div>
|
||||
</template>
|
||||
|
|
@ -87,6 +87,7 @@ function open(data) {
|
|||
}
|
||||
function close() {
|
||||
show.value = false;
|
||||
number.value = 1;
|
||||
resetData();
|
||||
}
|
||||
const skuName = computed(() => {
|
||||
|
|
@ -110,6 +111,27 @@ const skuData = computed(() => {
|
|||
});
|
||||
});
|
||||
|
||||
watch(
|
||||
() => skuData.value,
|
||||
(newval) => {
|
||||
if (newval) {
|
||||
number.value = newval.suitNum;
|
||||
}
|
||||
}
|
||||
);
|
||||
|
||||
const emits = defineEmits(["confirm"]);
|
||||
function confirm() {
|
||||
if (skuData.value) {
|
||||
emits("confirm", {
|
||||
sku_id: skuData.value.id,
|
||||
product_id: goods.value.id,
|
||||
number: number.value,
|
||||
});
|
||||
close();
|
||||
}
|
||||
}
|
||||
|
||||
defineExpose({ open, close });
|
||||
</script>
|
||||
|
||||
|
|
|
|||
|
|
@ -3,7 +3,7 @@
|
|||
<el-image v-if="item.coverImg" class="goods-image" :src="item.coverImg" fit="cover"></el-image>
|
||||
<div class="info">
|
||||
<div class="name u-flex u-flex-wrap">
|
||||
<span class="weight" v-if="item.type == 'weigh'">称重</span>
|
||||
<span class="weight" v-if="item.type == 'weight'">称重</span>
|
||||
<span>{{ item.name }}</span>
|
||||
</div>
|
||||
<div class="">￥{{ item.lowPrice }}</div>
|
||||
|
|
@ -47,4 +47,14 @@ const props = defineProps({
|
|||
background-color: rgba(46, 46, 46, 0.38);
|
||||
}
|
||||
}
|
||||
.weight {
|
||||
height: 15px;
|
||||
background: linear-gradient(124deg, rgb(115, 201, 105) 6%, rgb(39, 146, 27) 93%);
|
||||
border-radius: 2px;
|
||||
font-size: 12px;
|
||||
text-align: center;
|
||||
line-height: 15px;
|
||||
padding: 0px 2px;
|
||||
margin-right: 2px;
|
||||
}
|
||||
</style>
|
||||
|
|
@ -0,0 +1,138 @@
|
|||
<template>
|
||||
<el-dialog title="单品改价" width="410px" v-model="show" @close="reset" :modal="modal">
|
||||
<div class="u-m-t-30 u-flex">
|
||||
<div class="no-wrap u-m-r-20">价格更改为</div>
|
||||
<el-input
|
||||
:min="min"
|
||||
placeholder="请输入更改后的价格"
|
||||
v-model="price"
|
||||
@blur="checkPrice"
|
||||
type="number"
|
||||
>
|
||||
<template #append>元</template>
|
||||
</el-input>
|
||||
</div>
|
||||
<div class="u-m-t-16">
|
||||
<span class="color-red">*</span>
|
||||
<span>当前单品单价：{{ originPrice }}元</span>
|
||||
</div>
|
||||
|
||||
<template #footer>
|
||||
<div>
|
||||
<el-button size="medium" @click="close">取消</el-button>
|
||||
<el-button size="medium" type="primary" @click="confirm">确定</el-button>
|
||||
</div>
|
||||
</template>
|
||||
</el-dialog>
|
||||
</template>
|
||||
<script>
|
||||
import { ElMessage } from "element-plus";
|
||||
export default {
|
||||
props: {
|
||||
modal: {
|
||||
type: Boolean,
|
||||
default: true,
|
||||
},
|
||||
vipUser: {
|
||||
type: Object,
|
||||
default: () => {
|
||||
return {
|
||||
isVip: false,
|
||||
};
|
||||
},
|
||||
},
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
min: 0,
|
||||
originPrice: "",
|
||||
price: "",
|
||||
show: false,
|
||||
goods: {
|
||||
productId: -999,
|
||||
},
|
||||
};
|
||||
},
|
||||
computed: {
|
||||
isSeatFee() {
|
||||
return returnIsSeatFee(this.goods);
|
||||
},
|
||||
},
|
||||
methods: {
|
||||
checkPrice() {
|
||||
if (this.price < 0) {
|
||||
this.price = 0;
|
||||
}
|
||||
},
|
||||
changeSel(item) {
|
||||
item.checked = !item.checked;
|
||||
},
|
||||
reset() {
|
||||
this.price = "";
|
||||
},
|
||||
open(item) {
|
||||
console.log(item);
|
||||
this.show = true;
|
||||
const price = item.discount_sale_amount * 1 || item.salePrice * 1;
|
||||
this.price = price;
|
||||
this.originPrice = price;
|
||||
},
|
||||
close() {
|
||||
this.show = false;
|
||||
this.price = "";
|
||||
this.originPrice = "";
|
||||
},
|
||||
async confirm() {
|
||||
if (this.price < 0) {
|
||||
return ElMessage.error("价格不能小于0");
|
||||
}
|
||||
this.$emit("confirm", this.price);
|
||||
this.close();
|
||||
// this.$emit("confirm", { note: note, num: this.number });
|
||||
},
|
||||
},
|
||||
mounted() {},
|
||||
};
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
:deep(.el-dialog__body) {
|
||||
margin-bottom: 14px;
|
||||
margin-top: 14px;
|
||||
padding: 0 20px;
|
||||
}
|
||||
:deep(.el-tag) {
|
||||
margin-top: 10px;
|
||||
margin-right: 10px;
|
||||
margin-bottom: 5px;
|
||||
cursor: pointer;
|
||||
font-size: 15px;
|
||||
line-height: 35px;
|
||||
height: 35px;
|
||||
}
|
||||
.tags {
|
||||
.tag {
|
||||
margin: 10px 10px 0 0;
|
||||
border: 1px solid #dcdfe6;
|
||||
border-radius: 4px;
|
||||
padding: 10px 13px;
|
||||
font-size: 14px;
|
||||
color: #666;
|
||||
cursor: pointer;
|
||||
&.active {
|
||||
color: #1890ff;
|
||||
background: #e8f4ff;
|
||||
border-color: #a3d3ff;
|
||||
}
|
||||
}
|
||||
}
|
||||
:deep(.el-dialog__body) {
|
||||
color: #333;
|
||||
}
|
||||
:deep(input::-webkit-outer-spin-button) {
|
||||
-webkit-appearance: none !important;
|
||||
}
|
||||
:deep(input::-webkit-inner-spin-button) {
|
||||
-webkit-appearance: none !important;
|
||||
}
|
||||
</style>
|
||||
|
|
@ -0,0 +1,111 @@
|
|||
<template>
|
||||
<el-dialog title="添加临时菜" width="410px" v-model="show" @close="reset">
|
||||
<div>
|
||||
<div>将临时菜添加至购物车，不会影响总商品库</div>
|
||||
<div class="u-m-t-16">
|
||||
<el-form ref="form" :model="form" label-width="80px" :rules="rules">
|
||||
<el-form-item label="菜品名称" prop="product_name">
|
||||
<el-input v-model="form.product_name" placeholder="请输入菜品名称"></el-input>
|
||||
</el-form-item>
|
||||
<el-form-item label="价格" prop="discount_sale_amount">
|
||||
<el-input v-model="form.discount_sale_amount" placeholder="请输入价格" type="number">
|
||||
<template #append>元</template>
|
||||
</el-input>
|
||||
</el-form-item>
|
||||
<el-form-item label="下单数量" prop="number">
|
||||
<el-input v-model="form.number" placeholder="请输入下单数量" type="number"></el-input>
|
||||
</el-form-item>
|
||||
<el-form-item label="备注">
|
||||
<el-input v-model="form.remark" placeholder="请输入备注"></el-input>
|
||||
</el-form-item>
|
||||
</el-form>
|
||||
</div>
|
||||
</div>
|
||||
<template #footer>
|
||||
<div>
|
||||
<el-button size="medium" @click="close">取消</el-button>
|
||||
<el-button size="medium" type="primary" @click="confirm">确定</el-button>
|
||||
</div>
|
||||
</template>
|
||||
</el-dialog>
|
||||
</template>
|
||||
<script>
|
||||
import { ElMessage } from "element-plus";
|
||||
export default {
|
||||
data() {
|
||||
return {
|
||||
show: false,
|
||||
rules: {
|
||||
product_name: [{ required: true, message: "请输入菜品名称", trigger: "blur" }],
|
||||
discount_sale_amount: [{ required: true, message: "请输入菜品价格", trigger: "blur" }],
|
||||
number: [{ required: true, message: "请输入下单数量", trigger: "blur" }],
|
||||
},
|
||||
form: {
|
||||
product_name: "",
|
||||
discount_sale_amount: "",
|
||||
number: 1,
|
||||
remark: "",
|
||||
},
|
||||
category: [],
|
||||
units: [],
|
||||
option: {},
|
||||
};
|
||||
},
|
||||
|
||||
methods: {
|
||||
reset() {
|
||||
this.$refs.form.resetFields();
|
||||
},
|
||||
|
||||
open(opt) {
|
||||
this.show = true;
|
||||
this.option = opt;
|
||||
},
|
||||
close() {
|
||||
this.show = false;
|
||||
},
|
||||
async submit() {
|
||||
this.$emit("confirm", this.form);
|
||||
this.close();
|
||||
},
|
||||
confirm() {
|
||||
this.$refs.form.validate((valid) => {
|
||||
if (valid) {
|
||||
console.log(valid);
|
||||
if (this.form.discount_sale_amount * 1 <= 0 || this.form.discount_sale_amount * 1 <= 0) {
|
||||
return ElMessage.error("价格和数量必须大于0");
|
||||
}
|
||||
this.submit();
|
||||
} else {
|
||||
console.log("error submit!!");
|
||||
return false;
|
||||
}
|
||||
});
|
||||
},
|
||||
},
|
||||
mounted() {},
|
||||
};
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
::v-deep .el-dialog__body {
|
||||
margin-bottom: 14px;
|
||||
margin-top: 14px;
|
||||
}
|
||||
::v-deep .el-form-item__label {
|
||||
text-align: left;
|
||||
}
|
||||
input[type="number"]::-webkit-inner-spin-button,
|
||||
input[type="number"]::-webkit-outer-spin-button {
|
||||
-webkit-appearance: none;
|
||||
margin: 0;
|
||||
}
|
||||
::v-deep .el-input__inner::-webkit-inner-spin-button {
|
||||
-webkit-appearance: none;
|
||||
margin: 0;
|
||||
}
|
||||
::v-deep .el-input__inner::-webkit-outer-spin-button {
|
||||
-webkit-appearance: none;
|
||||
margin: 0;
|
||||
}
|
||||
</style>
|
||||
|
|
@ -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>
|
||||
Loading…
Reference in New Issue