Merge branch 'test' of e.coding.net:g-cphe0354/yinshoukeguanliduan/management into dwb
This commit is contained in:
duan
commit
71b6d1929b
210
src/api/table.js
210
src/api/table.js
|
|
@ -118,3 +118,213 @@ export function summaryTableDownload(data) {
|
|||
|
||||
});
|
||||
}
|
||||
|
||||
|
||||
/**
|
||||
* 获取当前台桌订单信息
|
||||
* @returns
|
||||
*/
|
||||
export function getCart(params) {
|
||||
return request({
|
||||
url: `/api/place/cart`,
|
||||
method: "get",
|
||||
params:{
|
||||
shopId: localStorage.getItem("shopId"),
|
||||
...params
|
||||
}
|
||||
});
|
||||
}
|
||||
/**
|
||||
* 已上架商品列表
|
||||
* @returns
|
||||
*/
|
||||
export function getGoodsLists(params) {
|
||||
return request({
|
||||
url: `/api/place/activate`,
|
||||
method: "get",
|
||||
params:{
|
||||
shopId: localStorage.getItem("shopId"),
|
||||
...params
|
||||
}
|
||||
});
|
||||
}
|
||||
|
||||
/**
|
||||
* 点单
|
||||
* @returns
|
||||
*/
|
||||
export function addCart(data) {
|
||||
return request({
|
||||
url: `/api/place/addCart`,
|
||||
method: "post",
|
||||
data:{
|
||||
shopId: localStorage.getItem("shopId"),
|
||||
...data
|
||||
}
|
||||
});
|
||||
}
|
||||
|
||||
/**
|
||||
* 清空购物车/支付订单
|
||||
* @returns
|
||||
*/
|
||||
export function $clearCart(data) {
|
||||
return request({
|
||||
url: `/api/place/clearCart`,
|
||||
method: "delete",
|
||||
data:{
|
||||
shopId: localStorage.getItem("shopId"),
|
||||
...data
|
||||
}
|
||||
});
|
||||
}
|
||||
|
||||
/**
|
||||
* 删除购物车某个商品
|
||||
* @returns
|
||||
*/
|
||||
export function $removeCart(data) {
|
||||
return request({
|
||||
url: `/api/place/removeCart`,
|
||||
method: "delete",
|
||||
data:{
|
||||
shopId: localStorage.getItem("shopId"),
|
||||
...data
|
||||
}
|
||||
});
|
||||
}
|
||||
/**
|
||||
* 更新规格
|
||||
* @returns
|
||||
*/
|
||||
export function $updateCart(data) {
|
||||
return request({
|
||||
url: `/api/place/updateCart`,
|
||||
method: "put",
|
||||
data:{
|
||||
shopId: localStorage.getItem("shopId"),
|
||||
...data
|
||||
}
|
||||
});
|
||||
}
|
||||
/**
|
||||
* 批量打包
|
||||
* @returns
|
||||
*/
|
||||
export function $allPack(data) {
|
||||
return request({
|
||||
url: `/api/place/pack`,
|
||||
method: "put",
|
||||
data:{
|
||||
shopId: localStorage.getItem("shopId"),
|
||||
...data
|
||||
}
|
||||
});
|
||||
}
|
||||
/**
|
||||
* 获取取餐号
|
||||
* @returns
|
||||
*/
|
||||
export function $getMasterId(data) {
|
||||
return request({
|
||||
url: `/api/place/masterId`,
|
||||
method: "get",
|
||||
params:{
|
||||
shopId: localStorage.getItem("shopId"),
|
||||
...data
|
||||
}
|
||||
});
|
||||
}
|
||||
/**
|
||||
* 支付方式获取
|
||||
* @returns
|
||||
*/
|
||||
export function $getPayType(data) {
|
||||
return request({
|
||||
url: `/api/place/payType`,
|
||||
method: "get",
|
||||
params:{
|
||||
shopId: localStorage.getItem("shopId"),
|
||||
...data
|
||||
}
|
||||
});
|
||||
}
|
||||
/**
|
||||
* 创建订单
|
||||
* @returns
|
||||
*/
|
||||
export function $createOrder(data) {
|
||||
return request({
|
||||
url: `/api/place/order`,
|
||||
method: "post",
|
||||
data:{
|
||||
shopId: localStorage.getItem("shopId"),
|
||||
...data
|
||||
}
|
||||
});
|
||||
}
|
||||
|
||||
|
||||
/**
|
||||
* 挂起订单
|
||||
* @returns
|
||||
*/
|
||||
export function $cacheOrder(data) {
|
||||
return request({
|
||||
url: `/api/place/pending`,
|
||||
method: "post",
|
||||
data:{
|
||||
shopId: localStorage.getItem("shopId"),
|
||||
...data
|
||||
}
|
||||
});
|
||||
}
|
||||
|
||||
/**
|
||||
* 获取已挂起订单
|
||||
* @returns
|
||||
*/
|
||||
export function $getCacheOrder(data) {
|
||||
return request({
|
||||
url: `/api/place/pending/cart`,
|
||||
method: "get",
|
||||
params:{
|
||||
shopId: localStorage.getItem("shopId"),
|
||||
...data
|
||||
}
|
||||
});
|
||||
}
|
||||
|
||||
// 会员点单/取消会员点单
|
||||
export function $setUser(data) {
|
||||
return request({
|
||||
url: `/api/place/updateVip`,
|
||||
method: "put",
|
||||
data:{
|
||||
shopId: localStorage.getItem("shopId"),
|
||||
...data
|
||||
}
|
||||
});
|
||||
}
|
||||
// 删除订单
|
||||
export function $delOrder(data) {
|
||||
return request({
|
||||
url: `/api/place/order`,
|
||||
method: "delete",
|
||||
data:{
|
||||
shopId: localStorage.getItem("shopId"),
|
||||
...data
|
||||
}
|
||||
});
|
||||
}
|
||||
// 支付订单
|
||||
export function $payOrder(data) {
|
||||
return request({
|
||||
url: '/api/place/pay',
|
||||
method: "put",
|
||||
data:{
|
||||
shopId: localStorage.getItem("shopId"),
|
||||
...data
|
||||
}
|
||||
});
|
||||
}
|
||||
|
|
@ -19,6 +19,12 @@ export default [
|
|||
key: 'deposit',
|
||||
icon: 'https://cashier-oss.oss-cn-beijing.aliyuncs.com/upload/20240302/18d40f471a924d55b4eb13e5f553734d.png'
|
||||
},
|
||||
{
|
||||
lable: '会员支付',
|
||||
key: 'vipPay',
|
||||
icon:'https://cashier-oss.oss-cn-beijing.aliyuncs.com/upload/20240823/8f8bb342ea71429d8cdba7085ef9ec8f.png'
|
||||
// icon: 'https://cashier-oss.oss-cn-beijing.aliyuncs.com/upload/20240823/81bc318a65f2483fa71f0a5dfd50346c.png'
|
||||
},
|
||||
// {
|
||||
// lable: '挂单',
|
||||
// key: 'arrears',
|
||||
|
|
|
|||
|
|
@ -0,0 +1,290 @@
|
|||
<template>
|
||||
<el-dialog title="选择用户" width="850px" :visible.sync="show">
|
||||
<div class="app-container">
|
||||
<div class="head-container">
|
||||
<el-form :model="query" inline>
|
||||
<el-form-item label="">
|
||||
<el-input
|
||||
v-model="query.name"
|
||||
placeholder="请输入昵称或手机号"
|
||||
></el-input>
|
||||
</el-form-item>
|
||||
<!-- <el-form-item label="是否为会员">
|
||||
<el-select v-model="query.isVip" placeholder="是否是会员">
|
||||
<el-option value="" label="全部"></el-option>
|
||||
<el-option :value="1" label="是"></el-option>
|
||||
<el-option :value="0" label="否"></el-option>
|
||||
</el-select>
|
||||
</el-form-item> -->
|
||||
<el-form-item>
|
||||
<div class="flex gap-20">
|
||||
<el-button type="success" @click="getTableData" size="medium"
|
||||
>搜索</el-button
|
||||
>
|
||||
<!-- <el-button @click="resetHandle" size="medium">重置</el-button> -->
|
||||
<el-button @click="noChooseUser" size="medium"
|
||||
>不选择用户</el-button
|
||||
>
|
||||
<!-- <el-button @click="resetHandle" size="medium">新建用户</el-button> -->
|
||||
</div>
|
||||
</el-form-item>
|
||||
</el-form>
|
||||
</div>
|
||||
<!-- <div class="head-container">
|
||||
<el-button type="primary" icon="el-icon-plus" @click="$refs.addActive.show()">
|
||||
添加活动
|
||||
</el-button>
|
||||
</div> -->
|
||||
|
||||
<div class="head-container">
|
||||
<el-table :data="tableData.data" v-loading="tableData.loading" @cell-click="cellClick">
|
||||
<el-table-column label="ID" prop="id"></el-table-column>
|
||||
<el-table-column label="用户" prop="headImg" width="200px">
|
||||
<template v-slot="scope">
|
||||
<div class="user_info">
|
||||
<el-image
|
||||
:src="scope.row.headImg"
|
||||
style="width: 40px; height: 40px; flex-shrink: 0"
|
||||
>
|
||||
<div slot="error" class="image-slot">
|
||||
<i class="el-icon-user"></i>
|
||||
</div>
|
||||
</el-image>
|
||||
<span class="name">{{ scope.row.nickName }}</span>
|
||||
</div>
|
||||
</template>
|
||||
</el-table-column>
|
||||
<el-table-column
|
||||
label="手机号"
|
||||
prop="telephone"
|
||||
width="160"
|
||||
></el-table-column>
|
||||
<!-- <el-table-column label="性别" prop="sex">
|
||||
<template v-slot="scope">
|
||||
<el-tag type="priamry">{{ scope.row.sex || "未知" }}</el-tag>
|
||||
</template>
|
||||
</el-table-column> -->
|
||||
<el-table-column label="会员" prop="isVip">
|
||||
<template v-slot="scope">
|
||||
<el-tag type="warning" v-if="scope.row.isVip"
|
||||
>会员等级{{ scope.row.isVip }}</el-tag
|
||||
>
|
||||
<span v-else>否</span>
|
||||
</template>
|
||||
</el-table-column>
|
||||
<el-table-column label="余额" prop="amount"></el-table-column>
|
||||
<el-table-column label="积分" prop="totalScore"></el-table-column>
|
||||
|
||||
<el-table-column label="操作" width="90" fixed="right">
|
||||
<template v-slot="scope">
|
||||
<el-button type="success" size="mini" @click="choose(scope.row)">选择</el-button>
|
||||
<!-- <el-button type="text" @click="charge(scope.row)">充值</el-button> -->
|
||||
</template>
|
||||
</el-table-column>
|
||||
</el-table>
|
||||
</div>
|
||||
<div class="head-container">
|
||||
<el-pagination
|
||||
:total="tableData.total"
|
||||
:current-page="tableData.page + 1"
|
||||
:page-size="tableData.size"
|
||||
@size-change="sizeChange"
|
||||
@current-change="paginationChange"
|
||||
layout="total, sizes, prev, pager, next, jumper"
|
||||
></el-pagination>
|
||||
</div>
|
||||
</div>
|
||||
</el-dialog>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import { queryAllShopUser, queryAllShopInfo } from "@/api/shop";
|
||||
import dayjs from "dayjs";
|
||||
let cacheData = {};
|
||||
export default {
|
||||
data() {
|
||||
return {
|
||||
show: false,
|
||||
query: {
|
||||
name: "",
|
||||
},
|
||||
shopInfo: {
|
||||
balanceTotal: 0,
|
||||
userTotal: 0,
|
||||
chageTotal: 0,
|
||||
},
|
||||
tableData: {
|
||||
data: [],
|
||||
page: 0,
|
||||
size: 10,
|
||||
loading: false,
|
||||
total: 0,
|
||||
},
|
||||
};
|
||||
},
|
||||
filters: {
|
||||
timeFilter(s) {
|
||||
return dayjs(s).format("YYYY-MM-DD HH:mm:ss");
|
||||
},
|
||||
},
|
||||
mounted() {
|
||||
cacheData = { ...this.query };
|
||||
this.getTableData();
|
||||
this.getShopInfo();
|
||||
},
|
||||
methods: {
|
||||
cellClick(user){
|
||||
console.log(user)
|
||||
this.$emit("chooseUser",user)
|
||||
this.close()
|
||||
},
|
||||
noChooseUser(){
|
||||
this.$emit("chooseUser",null)
|
||||
this.close()
|
||||
|
||||
},
|
||||
choose(user) {
|
||||
this.$emit("chooseUser",user)
|
||||
this.close()
|
||||
|
||||
},
|
||||
charge(user) {
|
||||
console.log(user);
|
||||
},
|
||||
close(){
|
||||
this.show = false;
|
||||
},
|
||||
open() {
|
||||
this.show = true;
|
||||
},
|
||||
toPage(type) {
|
||||
const pages = {
|
||||
charge: "charge_list",
|
||||
cost: "cost_list",
|
||||
};
|
||||
this.$router.push({
|
||||
name: pages[type],
|
||||
});
|
||||
console.log(pages[type]);
|
||||
},
|
||||
// 获取商家用户概述信息
|
||||
async getShopInfo() {
|
||||
try {
|
||||
const res = await queryAllShopInfo(this.query);
|
||||
this.shopInfo = res;
|
||||
} catch (error) {
|
||||
console.log(error);
|
||||
}
|
||||
},
|
||||
sizeChange() {
|
||||
this.tableData.page = 0;
|
||||
this.getTableData();
|
||||
},
|
||||
// 切换状态
|
||||
async statusChange(e, row) {
|
||||
try {
|
||||
this.tableData.loading = true;
|
||||
const data = { ...row };
|
||||
data.status = e;
|
||||
await modityActivate(data);
|
||||
this.getTableData();
|
||||
} catch (error) {
|
||||
console.log(error);
|
||||
this.tableData.loading = false;
|
||||
}
|
||||
},
|
||||
// 重置查询
|
||||
resetHandle() {
|
||||
this.query.name = "";
|
||||
this.getTableData();
|
||||
},
|
||||
// 分页回调
|
||||
paginationChange(e) {
|
||||
this.tableData.page = e - 1;
|
||||
this.getTableData();
|
||||
},
|
||||
// 获取商品列表
|
||||
async getTableData() {
|
||||
this.tableData.loading = true;
|
||||
try {
|
||||
const res = await queryAllShopUser({
|
||||
...this.query,
|
||||
size: this.tableData.size,
|
||||
page: this.tableData.page + 1,
|
||||
});
|
||||
this.tableData.loading = false;
|
||||
this.tableData.data = res.content;
|
||||
this.tableData.total = res.totalElements;
|
||||
} catch (error) {
|
||||
console.log(error);
|
||||
}
|
||||
},
|
||||
},
|
||||
};
|
||||
</script>
|
||||
|
||||
<style scoped lang="scss">
|
||||
.user_info {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
|
||||
.name {
|
||||
margin-left: 10px;
|
||||
}
|
||||
}
|
||||
::v-deep .el-input--small .el-input__inner{
|
||||
height: 36px;
|
||||
line-height: 36px;
|
||||
}
|
||||
|
||||
::v-deep .image-slot {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
background-color: #efefef;
|
||||
font-size: 20px;
|
||||
color: #999;
|
||||
}
|
||||
|
||||
.card {
|
||||
background-color: #f5f5f5;
|
||||
padding: 0 14px;
|
||||
|
||||
.title {
|
||||
font-size: 22px;
|
||||
padding-top: 14px;
|
||||
}
|
||||
|
||||
.row {
|
||||
display: flex;
|
||||
padding: 20px 0;
|
||||
|
||||
.item {
|
||||
flex: 1;
|
||||
|
||||
.t {
|
||||
text-align: center;
|
||||
color: #555;
|
||||
}
|
||||
|
||||
.n {
|
||||
color: #000;
|
||||
font-size: 20px;
|
||||
font-weight: bold;
|
||||
padding-top: 6px;
|
||||
text-align: center;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
.flex{
|
||||
display: flex;
|
||||
align-items: center;
|
||||
}
|
||||
.gap-20{
|
||||
gap: 20px;
|
||||
}
|
||||
</style>
|
||||
|
||||
|
|
@ -0,0 +1,295 @@
|
|||
<template>
|
||||
<div class="simple-Keyboard-number">
|
||||
<div class="carts">
|
||||
<div class="box_status">{{ number }}</div>
|
||||
<div class="number_list_box">
|
||||
<div class="yd-keyboard">
|
||||
<div class="mini-number-box1">
|
||||
<div class="mini-number">
|
||||
<div class="key-line">
|
||||
<div class="key" @click="keyboradAdd('1')">1</div>
|
||||
<div class="key" @click="keyboradAdd('2')">2</div>
|
||||
<div class="key" @click="keyboradAdd('3')">3</div>
|
||||
</div>
|
||||
<div class="key-line">
|
||||
<div class="key" @click="keyboradAdd('4')">4</div>
|
||||
<div class="key" @click="keyboradAdd('5')">5</div>
|
||||
<div class="key" @click="keyboradAdd('6')">6</div>
|
||||
</div>
|
||||
<div class="key-line">
|
||||
<div class="key" @click="keyboradAdd('7')">7</div>
|
||||
<div class="key" @click="keyboradAdd('8')">8</div>
|
||||
<div class="key" @click="keyboradAdd('9')">9</div>
|
||||
</div>
|
||||
<div class="key-line">
|
||||
<div class="key"></div>
|
||||
<div class="key" @click="keyboradAdd('0')">0</div>
|
||||
<div
|
||||
class="key"
|
||||
style="font-size: 31px"
|
||||
@click="keyboradReduce"
|
||||
>
|
||||
<svg
|
||||
t="1723453480343"
|
||||
class="icon"
|
||||
viewBox="0 0 1664 1024"
|
||||
version="1.1"
|
||||
xmlns="http://www.w3.org/2000/svg"
|
||||
p-id="1467"
|
||||
width="32"
|
||||
height="32"
|
||||
>
|
||||
<path
|
||||
d="M1526.08 1.6H459.84L41.28 416c-53.76 53.248-53.76 139.52 0 192.64l418.624 414.592v-0.064h1066.176a136.96 136.96 0 0 0 137.6-136.256V137.792a136.96 136.96 0 0 0-137.6-136.192z m-331.392 631.168c26.816 26.624 26.816 69.76 0 96.384-26.88 26.56-70.4 26.56-97.28 0l-121.28-120.128-123.328 122.112a69.76 69.76 0 0 1-97.92 0 68.096 68.096 0 0 1 0-96.96L878.208 512l-121.28-120.064a67.648 67.648 0 0 1 0-96.32c26.88-26.624 70.4-26.624 97.28 0l121.216 120.064 122.24-120.96a69.696 69.696 0 0 1 97.92 0 68.032 68.032 0 0 1 0 96.96l-122.24 120.96 121.344 120.064z"
|
||||
fill="#333333"
|
||||
p-id="1468"
|
||||
></path>
|
||||
</svg>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<template v-if="showConfirm">
|
||||
<div class="submit" @click="keyboradConfirm">确认</div>
|
||||
</template>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
<script>
|
||||
export default {
|
||||
props: {
|
||||
isCanEmpty: {
|
||||
type: Boolean,
|
||||
default: false,
|
||||
},
|
||||
showConfirm: {
|
||||
type: Boolean,
|
||||
default: false,
|
||||
},
|
||||
value: {
|
||||
type: [String, Number],
|
||||
default: 0,
|
||||
},
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
number: 0,
|
||||
};
|
||||
},
|
||||
watch: {
|
||||
number(newval) {
|
||||
this.$emit("input", newval);
|
||||
},
|
||||
},
|
||||
methods: {
|
||||
keyboradAdd(n) {
|
||||
if (Number(this.number) == 0) {
|
||||
return (this.number = n);
|
||||
}
|
||||
this.number += n;
|
||||
},
|
||||
keyboradReduce() {
|
||||
if (this.number.length <= 1) {
|
||||
return (this.number =this.isCanEmpty?'': "0");
|
||||
}
|
||||
this.number = this.number.substring(0, this.number.length - 1);
|
||||
},
|
||||
keyboradConfirm() {
|
||||
this.$emit("confirm", this.number);
|
||||
},
|
||||
},
|
||||
mounted() {
|
||||
this.number = `${this.value}`;
|
||||
},
|
||||
};
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
.yd-keyboard {
|
||||
justify-content: center;
|
||||
margin-bottom: 20px;
|
||||
}
|
||||
|
||||
.mini-number-box1 .mini-number,
|
||||
.yd-keyboard {
|
||||
display: flex;
|
||||
|
||||
flex-direction: column;
|
||||
}
|
||||
|
||||
.mini-number-box1 .mini-number {
|
||||
border: 1px solid #dcdfe6;
|
||||
}
|
||||
|
||||
.mini-number-box1 .mini-number .key-line {
|
||||
margin-top: 0;
|
||||
}
|
||||
|
||||
.mini-number-box1 .mini-number .key {
|
||||
width: 122px;
|
||||
height: 60px;
|
||||
-webkit-box-shadow: none;
|
||||
box-shadow: none;
|
||||
border-radius: 0;
|
||||
margin-left: 0;
|
||||
}
|
||||
.mini-number-box1 .mini-number .key:hover {
|
||||
background-color: #dcdfe6;
|
||||
}
|
||||
.mini-number-box1 .mini-number .key:not(:last-child) {
|
||||
border-right: 1px solid #dcdfe6;
|
||||
}
|
||||
|
||||
.mini-number-box1 .mini-number .key-line:not(:last-child) {
|
||||
border-bottom: 1px solid #dcdfe6;
|
||||
}
|
||||
|
||||
.mini-number-box2 {
|
||||
display: flex;
|
||||
|
||||
justify-content: center;
|
||||
}
|
||||
|
||||
.mini-number-box2 .key {
|
||||
width: 80px;
|
||||
height: 70px;
|
||||
}
|
||||
|
||||
.mini-number-box2 .function-button {
|
||||
display: flex;
|
||||
|
||||
flex-direction: column;
|
||||
}
|
||||
|
||||
.mini-number-box2 .function-button .key {
|
||||
margin-top: 8px;
|
||||
}
|
||||
|
||||
.key-line {
|
||||
margin-top: 8px;
|
||||
}
|
||||
|
||||
.key,
|
||||
.key-line {
|
||||
display: flex;
|
||||
|
||||
justify-content: center;
|
||||
}
|
||||
|
||||
.key {
|
||||
width: 64px;
|
||||
height: 64px;
|
||||
background: #fff;
|
||||
-webkit-box-shadow: 0 2px 4px 0 rgba(0, 0, 0, 0.10196078431372549);
|
||||
border-radius: 4px;
|
||||
|
||||
align-items: center;
|
||||
margin-left: 8px;
|
||||
font-family: PingFangSC-Regular;
|
||||
font-weight: 400;
|
||||
font-size: 20px;
|
||||
color: rgba(0, 0, 0, 0.8);
|
||||
text-align: center;
|
||||
line-height: 34px;
|
||||
box-shadow: 0 2px 4px 0 rgba(0, 0, 0, 0.10196078431372549);
|
||||
cursor: pointer;
|
||||
-webkit-user-select: none;
|
||||
-moz-user-select: none;
|
||||
-ms-user-select: none;
|
||||
user-select: none;
|
||||
}
|
||||
.simple-Keyboard-number,
|
||||
.simple-Keyboard-weight {
|
||||
min-width: 410px;
|
||||
background: #fff;
|
||||
border-radius: 4px;
|
||||
overflow: hidden;
|
||||
}
|
||||
.submit {
|
||||
width: 366px;
|
||||
height: 44px;
|
||||
background: #22bf64;
|
||||
border-radius: 2px;
|
||||
|
||||
display: flex;
|
||||
|
||||
justify-content: center;
|
||||
|
||||
align-items: center;
|
||||
font-size: 14px;
|
||||
color: #fff;
|
||||
font-family: PingFangSC-Regular;
|
||||
font-weight: 400;
|
||||
margin-bottom: 40px;
|
||||
cursor: pointer;
|
||||
}
|
||||
.disabled-box {
|
||||
position: absolute;
|
||||
inset: 0;
|
||||
left: 0;
|
||||
right: 0;
|
||||
top: 0;
|
||||
bottom: 0;
|
||||
}
|
||||
|
||||
.carts {
|
||||
flex-direction: column;
|
||||
background: #fff;
|
||||
height: 100%;
|
||||
}
|
||||
|
||||
.carts .title,
|
||||
.carts {
|
||||
display: flex;
|
||||
|
||||
align-items: center;
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
.carts .title {
|
||||
justify-content: space-between;
|
||||
height: 64px;
|
||||
border-bottom: 1px solid #ebebeb;
|
||||
padding: 20px;
|
||||
padding-top: 30px;
|
||||
}
|
||||
|
||||
.carts .title .left {
|
||||
font-family: PingFangSC-Medium;
|
||||
font-weight: 500;
|
||||
font-size: 18px;
|
||||
color: #000;
|
||||
}
|
||||
|
||||
.carts .title .right {
|
||||
font-size: 14.4px;
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
.carts .box_status {
|
||||
margin-bottom: 20px;
|
||||
width: 370px;
|
||||
height: 58px;
|
||||
background: #fff;
|
||||
border: 1px solid #dcdfe6;
|
||||
border-radius: 4px;
|
||||
|
||||
display: flex;
|
||||
|
||||
justify-content: center;
|
||||
|
||||
align-items: center;
|
||||
margin-top: 20px;
|
||||
font-family: MicrosoftYaHei;
|
||||
font-size: 20px;
|
||||
color: rgba(0, 0, 0, 0.8);
|
||||
letter-spacing: 1.25px;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.carts .box_status span {
|
||||
padding: 0 5px;
|
||||
}
|
||||
</style>
|
||||
|
|
@ -0,0 +1,339 @@
|
|||
<template>
|
||||
<el-dialog width="330px" :title="title" :visible.sync="show">
|
||||
<div class="simple-Keyboard-number">
|
||||
<div class="carts">
|
||||
<div class="pad-14">
|
||||
<div class="box_status">
|
||||
<span class="sym">￥</span>
|
||||
<el-input v-model="number" type="text" @input="numberInput"></el-input>
|
||||
<!-- <span class="inputs" :contenteditable="true" @input="numberInput" type="text" >{{ number }}</span> -->
|
||||
</div>
|
||||
</div>
|
||||
<div class="number_list_box">
|
||||
<div class="yd-keyboard">
|
||||
<div class="mini-number-box1">
|
||||
<div class="mini-number">
|
||||
<div class="key-line">
|
||||
<div class="key" @click="keyboradAdd('1')">1</div>
|
||||
<div class="key" @click="keyboradAdd('2')">2</div>
|
||||
<div class="key" @click="keyboradAdd('3')">3</div>
|
||||
<div
|
||||
class="key"
|
||||
style="font-size: 31px"
|
||||
@click="keyboradReduce"
|
||||
>
|
||||
<svg
|
||||
t="1723453480343"
|
||||
class="icon"
|
||||
viewBox="0 0 1664 1024"
|
||||
version="1.1"
|
||||
xmlns="http://www.w3.org/2000/svg"
|
||||
p-id="1467"
|
||||
width="32"
|
||||
height="32"
|
||||
>
|
||||
<path
|
||||
d="M1526.08 1.6H459.84L41.28 416c-53.76 53.248-53.76 139.52 0 192.64l418.624 414.592v-0.064h1066.176a136.96 136.96 0 0 0 137.6-136.256V137.792a136.96 136.96 0 0 0-137.6-136.192z m-331.392 631.168c26.816 26.624 26.816 69.76 0 96.384-26.88 26.56-70.4 26.56-97.28 0l-121.28-120.128-123.328 122.112a69.76 69.76 0 0 1-97.92 0 68.096 68.096 0 0 1 0-96.96L878.208 512l-121.28-120.064a67.648 67.648 0 0 1 0-96.32c26.88-26.624 70.4-26.624 97.28 0l121.216 120.064 122.24-120.96a69.696 69.696 0 0 1 97.92 0 68.032 68.032 0 0 1 0 96.96l-122.24 120.96 121.344 120.064z"
|
||||
fill="#333333"
|
||||
p-id="1468"
|
||||
></path>
|
||||
</svg>
|
||||
</div>
|
||||
</div>
|
||||
<div class="key-line">
|
||||
<div class="key" @click="keyboradAdd('4')">4</div>
|
||||
<div class="key" @click="keyboradAdd('5')">5</div>
|
||||
<div class="key" @click="keyboradAdd('6')">6</div>
|
||||
<div class="key" @click="keyboradAdd('clear')">清空</div>
|
||||
</div>
|
||||
<div class="key-line">
|
||||
<div class="key" @click="keyboradAdd('7')">7</div>
|
||||
<div class="key" @click="keyboradAdd('8')">8</div>
|
||||
<div class="key" @click="keyboradAdd('9')">9</div>
|
||||
<div class="key"></div>
|
||||
</div>
|
||||
<div class="key-line">
|
||||
<div class="key" @click="keyboradAdd('.')">.</div>
|
||||
<div class="key" @click="keyboradAdd('0')">0</div>
|
||||
<div class="key" @click="keyboradAdd('00')">00</div>
|
||||
<div class="key"></div>
|
||||
</div>
|
||||
<div class="confirm key" @click="confirm">确认</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<!-- <div class="submit" @click="keyboradConfirm">确认</div> -->
|
||||
</div>
|
||||
</div>
|
||||
</el-dialog>
|
||||
</template>
|
||||
<script>
|
||||
export default {
|
||||
props: {
|
||||
title: {
|
||||
type: String,
|
||||
default: "支付",
|
||||
},
|
||||
value: {
|
||||
type: [String, Number],
|
||||
default: 0,
|
||||
},
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
number: '0',
|
||||
show:false
|
||||
};
|
||||
},
|
||||
watch: {
|
||||
number(newval) {
|
||||
this.$emit("input", newval);
|
||||
},
|
||||
},
|
||||
methods: {
|
||||
confirm(){
|
||||
|
||||
},
|
||||
open(){
|
||||
this.show=true
|
||||
},
|
||||
close(){
|
||||
this.show=false
|
||||
},
|
||||
numberInput(val){
|
||||
console.log(val)
|
||||
this.number=`${Number(val)}`
|
||||
},
|
||||
keyboradAdd(n) {
|
||||
if (n === "clear") {
|
||||
return (this.number = '0');
|
||||
}
|
||||
if(n==='.'){
|
||||
return this.number += this.number.includes('.')?'' : '.'
|
||||
}
|
||||
if (`${this.number}`.length<=1&&Number(this.number)===0) {
|
||||
return (this.number = n);
|
||||
}
|
||||
this.number += n;
|
||||
},
|
||||
keyboradReduce() {
|
||||
if (this.number.length <= 1) {
|
||||
return (this.number = this.isCanEmpty ? "" : "0");
|
||||
}
|
||||
this.number = this.number.substring(0, this.number.length - 1);
|
||||
},
|
||||
keyboradConfirm() {
|
||||
this.$emit("confirm", this.number);
|
||||
},
|
||||
},
|
||||
mounted() {
|
||||
this.number = `${this.value}`;
|
||||
},
|
||||
};
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
.pad-14 {
|
||||
padding: 14px;
|
||||
width: 100%;
|
||||
}
|
||||
::v-deep .el-dialog__body {
|
||||
padding: 0;
|
||||
}
|
||||
::v-deep .el-input__inner::-webkit-outer-spin-button{
|
||||
-webkit-appearance: none;
|
||||
margin: 0;
|
||||
}
|
||||
::v-deep .el-input__inner::-webkit-inner-spin-button {
|
||||
-webkit-appearance: none;
|
||||
margin: 0;
|
||||
}
|
||||
|
||||
/* Firefox */
|
||||
::v-deep .el-input__inner {
|
||||
-moz-appearance: textfield;
|
||||
}
|
||||
.number_list_box,
|
||||
.yd-keyboard,
|
||||
.mini-number,
|
||||
.mini-number-box1,
|
||||
.key-line {
|
||||
width: 100%;
|
||||
}
|
||||
.yd-keyboard {
|
||||
justify-content: center;
|
||||
}
|
||||
|
||||
.mini-number-box1 .mini-number,
|
||||
.yd-keyboard {
|
||||
display: flex;
|
||||
position: relative;
|
||||
flex-direction: column;
|
||||
}
|
||||
|
||||
.mini-number-box1 .mini-number {
|
||||
border-top: 1px solid #dcdfe6;
|
||||
}
|
||||
|
||||
.mini-number-box2 {
|
||||
display: flex;
|
||||
|
||||
justify-content: center;
|
||||
}
|
||||
|
||||
.mini-number-box2 .function-button {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
}
|
||||
|
||||
.key,
|
||||
.key-line {
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
}
|
||||
|
||||
.key {
|
||||
width: 25%;
|
||||
height: 70px;
|
||||
box-sizing: border-box;
|
||||
background: #fff;
|
||||
align-items: center;
|
||||
font-family: PingFangSC-Regular;
|
||||
font-weight: 400;
|
||||
font-size: 24px;
|
||||
color: #212121;
|
||||
text-align: center;
|
||||
line-height: 34px;
|
||||
cursor: pointer;
|
||||
user-select: none;
|
||||
}
|
||||
.key:hover {
|
||||
background-color: #dcdfe6;
|
||||
}
|
||||
.key:not(:last-child) {
|
||||
border-right: 1px solid #dcdfe6;
|
||||
}
|
||||
|
||||
.key-line:not(:last-child) {
|
||||
border-bottom: 1px solid #dcdfe6;
|
||||
}
|
||||
.confirm {
|
||||
height: 142px;
|
||||
width: 25%;
|
||||
background: #22bf64;
|
||||
color: #fff;
|
||||
position: absolute;
|
||||
bottom: 0;
|
||||
right: 0;
|
||||
border-right: none;
|
||||
}
|
||||
.confirm:hover {
|
||||
background: rgba(34, 191, 100, 0.8666666666666667);
|
||||
}
|
||||
.simple-Keyboard-number,
|
||||
.simple-Keyboard-weight {
|
||||
background: #fff;
|
||||
border-radius: 4px;
|
||||
overflow: hidden;
|
||||
}
|
||||
.submit {
|
||||
width: 366px;
|
||||
height: 44px;
|
||||
background: #22bf64;
|
||||
border-radius: 2px;
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
font-size: 14px;
|
||||
color: #fff;
|
||||
font-family: PingFangSC-Regular;
|
||||
font-weight: 400;
|
||||
margin-bottom: 40px;
|
||||
cursor: pointer;
|
||||
}
|
||||
.disabled-box {
|
||||
position: absolute;
|
||||
inset: 0;
|
||||
left: 0;
|
||||
right: 0;
|
||||
top: 0;
|
||||
bottom: 0;
|
||||
}
|
||||
|
||||
.carts {
|
||||
flex-direction: column;
|
||||
background: #fff;
|
||||
height: 100%;
|
||||
}
|
||||
|
||||
.carts .title,
|
||||
.carts {
|
||||
display: flex;
|
||||
|
||||
align-items: center;
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
.carts .title {
|
||||
justify-content: space-between;
|
||||
height: 64px;
|
||||
border-bottom: 1px solid #ebebeb;
|
||||
padding: 20px;
|
||||
padding-top: 30px;
|
||||
}
|
||||
|
||||
.carts .title .left {
|
||||
font-family: PingFangSC-Medium;
|
||||
font-weight: 500;
|
||||
font-size: 18px;
|
||||
color: #000;
|
||||
}
|
||||
|
||||
.carts .title .right {
|
||||
font-size: 14.4px;
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
.box_status {
|
||||
box-sizing: border-box;
|
||||
width: 100%;
|
||||
background: #fff;
|
||||
border: 1px solid #dcdfe6;
|
||||
border-radius: 4px;
|
||||
display: flex;
|
||||
padding: 14px;
|
||||
align-items: flex-end;
|
||||
font-family: MicrosoftYaHei;
|
||||
font-size: 20px;
|
||||
color: rgba(0, 0, 0, 0.8);
|
||||
letter-spacing: 1.25px;
|
||||
.sym {
|
||||
font-size: 24px;
|
||||
color: #212121;
|
||||
width: 30px;
|
||||
margin-bottom: 3px;
|
||||
}
|
||||
.inputs {
|
||||
font-size: 28px;
|
||||
color: #212121;
|
||||
outline: none;
|
||||
line-height: 37px;
|
||||
border: none;
|
||||
max-width: 250px;
|
||||
}
|
||||
}
|
||||
::v-deep .el-input--small .el-input__inner{
|
||||
font-size: 28px;
|
||||
color: #212121;
|
||||
outline: none;
|
||||
line-height: 37px;
|
||||
border: none;
|
||||
max-width: 250px;
|
||||
padding-left: 0;
|
||||
}
|
||||
|
||||
.carts .box_status span {
|
||||
padding: 0 5px;
|
||||
}
|
||||
</style>
|
||||
|
|
@ -0,0 +1,62 @@
|
|||
export const orderBtns=[
|
||||
{
|
||||
text: "删除",
|
||||
disabled: false,
|
||||
},
|
||||
{
|
||||
text: "规格",
|
||||
disabled: true,
|
||||
},
|
||||
{
|
||||
text: "菜品打折",
|
||||
disabled: false,
|
||||
},
|
||||
{
|
||||
text: "赠菜",
|
||||
disabled: false,
|
||||
},
|
||||
{
|
||||
text: "赠菜",
|
||||
disabled: false,
|
||||
},
|
||||
{
|
||||
text: "打包",
|
||||
disabled: false,
|
||||
},
|
||||
{
|
||||
text: "等叫",
|
||||
disabled: false,
|
||||
},
|
||||
{
|
||||
text: "整单等叫",
|
||||
disabled: false,
|
||||
},
|
||||
{
|
||||
text: "单品备注",
|
||||
disabled: false,
|
||||
},
|
||||
{
|
||||
text: "退菜",
|
||||
disabled: false,
|
||||
},
|
||||
{
|
||||
text: "附加费",
|
||||
disabled: false,
|
||||
},
|
||||
{
|
||||
text: "存单",
|
||||
disabled: false,
|
||||
},
|
||||
{
|
||||
text: "取单",
|
||||
disabled: false,
|
||||
},
|
||||
{
|
||||
text: "修改价格",
|
||||
disabled: false,
|
||||
},
|
||||
{
|
||||
text: "撤单",
|
||||
disabled: false,
|
||||
}
|
||||
]
|
||||
|
|
@ -0,0 +1,75 @@
|
|||
<template>
|
||||
<div>
|
||||
<div class="title">选择支付方式</div>
|
||||
<div class="btn_group">
|
||||
<div class="price_select">
|
||||
<div class="pay_btns">
|
||||
<el-button
|
||||
size="medium"
|
||||
@click="changeSel(item)"
|
||||
v-for="(item, index) in list"
|
||||
:key="index"
|
||||
:type="sel === item.payType ? 'success' : ''"
|
||||
>
|
||||
{{ item.payName }}
|
||||
</el-button>
|
||||
<!-- <el-button size="medium"> 余额支付 </el-button>
|
||||
<el-button size="medium"> 现金支付 </el-button>
|
||||
<el-button size="medium"> 挂账 </el-button> -->
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import { $getPayType } from "@/api/table";
|
||||
export default {
|
||||
props: {
|
||||
value: {
|
||||
type: [String, Number],
|
||||
default: '',
|
||||
},
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
list: [],
|
||||
sel: "",
|
||||
};
|
||||
},
|
||||
watch: {
|
||||
sel(newval) {
|
||||
console.log(newval);
|
||||
this.$emit("input", newval);
|
||||
},
|
||||
},
|
||||
methods: {
|
||||
changeSel(item) {
|
||||
this.sel = item.payType;
|
||||
},
|
||||
async init() {
|
||||
const res = await $getPayType();
|
||||
this.list = res;
|
||||
console.log(res[0]);
|
||||
this.sel = this.sel ? this.sel : res[0].payType;
|
||||
},
|
||||
},
|
||||
mounted() {
|
||||
this.init();
|
||||
},
|
||||
};
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
.title {
|
||||
font-size: 18px;
|
||||
color: #000;
|
||||
font-weight: 600;
|
||||
padding: 20px 0;
|
||||
}
|
||||
.pay_btns .el-button {
|
||||
margin-left: 0;
|
||||
margin-right: 10px;
|
||||
margin-bottom: 10px;
|
||||
}
|
||||
</style>
|
||||
|
|
@ -0,0 +1,258 @@
|
|||
<template>
|
||||
<div class="select_desk">
|
||||
<el-dialog width="410px" title="桌台号/取餐号" :visible.sync="show">
|
||||
<div class="select_desk_dialog">
|
||||
<div class="nav">
|
||||
<div
|
||||
class="li"
|
||||
:class="type === 0 ? 'lion' : ''"
|
||||
@click="changeType(0)"
|
||||
>
|
||||
桌台号
|
||||
</div>
|
||||
<div
|
||||
class="li"
|
||||
:class="type === 1 ? 'lion' : ''"
|
||||
@click="changeType(1)"
|
||||
>
|
||||
自定义取餐号
|
||||
</div>
|
||||
</div>
|
||||
<template v-if="type === 0">
|
||||
<el-select
|
||||
class="inputs"
|
||||
v-model="selTableId"
|
||||
placeholder="请选择桌位"
|
||||
>
|
||||
<el-option
|
||||
v-for="item in tableList"
|
||||
:key="item.id"
|
||||
:label="item.name"
|
||||
:value="item.id"
|
||||
>
|
||||
</el-option>
|
||||
</el-select>
|
||||
</template>
|
||||
<template v-else>
|
||||
<key-board isCanEmpty v-model="masterId"></key-board>
|
||||
</template>
|
||||
|
||||
<div class="confirm_btns">
|
||||
<el-button size="medium" @click="close">取消</el-button>
|
||||
<el-button type="success" size="medium" @click="confirm">确定</el-button>
|
||||
</div>
|
||||
</div>
|
||||
</el-dialog>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import { tbShopTableGet } from "@/api/table";
|
||||
import keyBoard from '../keyboard.vue';
|
||||
|
||||
export default {
|
||||
components:{keyBoard},
|
||||
data() {
|
||||
return {
|
||||
masterId:'',
|
||||
//0 台桌 ,1 取餐号
|
||||
type: 0,
|
||||
show: false,
|
||||
hasOpen: false,
|
||||
total: 0,
|
||||
loading: false,
|
||||
tableList: [],
|
||||
selTableId: "",
|
||||
};
|
||||
},
|
||||
methods: {
|
||||
|
||||
confirm(){
|
||||
const item=this.tableList.find(v=>v.id==this.selTableId)
|
||||
this.$emit('confirm',item)
|
||||
this.close()
|
||||
},
|
||||
// 台桌列表
|
||||
async tbShopTableGet() {
|
||||
this.loading = true;
|
||||
try {
|
||||
const { content, total } = await tbShopTableGet({
|
||||
shopId: localStorage.getItem("shopId"),
|
||||
areaId: this.tabVlaue,
|
||||
});
|
||||
this.tableList = content.filter((v) => v.tableId);
|
||||
this.total = total;
|
||||
this.hasOpen = true;
|
||||
setTimeout(() => {
|
||||
this.loading = false;
|
||||
}, 300);
|
||||
} catch (error) {
|
||||
this.loading = false;
|
||||
console.log(error);
|
||||
}
|
||||
},
|
||||
changeType(type) {
|
||||
this.type = type;
|
||||
},
|
||||
open() {
|
||||
this.show = true;
|
||||
if (!this.hasOpen) {
|
||||
this.tbShopTableGet();
|
||||
}
|
||||
},
|
||||
close() {
|
||||
this.show = false;
|
||||
},
|
||||
},
|
||||
mounted() {},
|
||||
};
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
::v-deep.el-button {
|
||||
padding: 12px 20px;
|
||||
}
|
||||
::v-deep .el-button--success {
|
||||
border-color: #22bf64;
|
||||
background-color: #22bf64;
|
||||
}
|
||||
.select_desk .btn {
|
||||
height: 34px;
|
||||
}
|
||||
::v-deep .inputs .el-input__inner {
|
||||
border-color: transparent !important;
|
||||
color: rgba(0, 0, 0, 0.8);
|
||||
letter-spacing: 1.25px;
|
||||
font-size: 20px;
|
||||
}
|
||||
.select_desk .select_desk_dialog {
|
||||
display: flex;
|
||||
|
||||
flex-direction: column;
|
||||
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
.select_desk .select_desk_dialog .nav {
|
||||
width: 286px;
|
||||
height: 38px;
|
||||
background: #dcf0e8;
|
||||
|
||||
justify-content: space-around;
|
||||
}
|
||||
|
||||
.select_desk .select_desk_dialog .nav .li,
|
||||
.select_desk .select_desk_dialog .nav {
|
||||
border-radius: 4px;
|
||||
|
||||
display: flex;
|
||||
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
.select_desk .select_desk_dialog .nav .li {
|
||||
width: 140px;
|
||||
height: 34px;
|
||||
color: #0fc161;
|
||||
|
||||
justify-content: center;
|
||||
font-size: 14px;
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
.select_desk .select_desk_dialog .nav .lion {
|
||||
background: #0fc161;
|
||||
color: #fff;
|
||||
}
|
||||
|
||||
.select_desk .select_desk_dialog .inputs {
|
||||
width: 370px;
|
||||
line-height: 54px;
|
||||
margin-top: 24px;
|
||||
height: 54px;
|
||||
margin-bottom: 20px;
|
||||
background: #fff;
|
||||
border: 1px solid #dcdfe6;
|
||||
border-radius: 4px;
|
||||
color: rgba(0, 0, 0, 0.8);
|
||||
letter-spacing: 1.25px;
|
||||
text-align: center;
|
||||
font-size: 20px;
|
||||
position: relative;
|
||||
}
|
||||
|
||||
.select_desk .select_desk_dialog .inputs .close {
|
||||
color: #aaa;
|
||||
position: absolute;
|
||||
right: 10px;
|
||||
height: 30px;
|
||||
width: 30px;
|
||||
line-height: 30px;
|
||||
top: 50%;
|
||||
margin-top: -15px;
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
.select_desk .select_desk_dialog .keyboard {
|
||||
display: flex;
|
||||
|
||||
flex-wrap: wrap;
|
||||
width: 100%;
|
||||
margin-top: 20px;
|
||||
margin-bottom: 10px;
|
||||
border-right: 1px solid #dcdfe6;
|
||||
border-bottom: 1px solid #dcdfe6;
|
||||
}
|
||||
|
||||
.select_desk .select_desk_dialog .keyboard .li {
|
||||
height: 60px;
|
||||
width: 33.333%;
|
||||
|
||||
display: flex;
|
||||
|
||||
justify-content: center;
|
||||
|
||||
align-items: center;
|
||||
font-size: 24px;
|
||||
color: #212121;
|
||||
cursor: pointer;
|
||||
|
||||
user-select: none;
|
||||
border-left: 1px solid #dcdfe6;
|
||||
border-top: 1px solid #dcdfe6;
|
||||
|
||||
transition: all 0.1s;
|
||||
}
|
||||
|
||||
.select_desk .select_desk_dialog .keyboard .li:hover {
|
||||
background: #dcdfe6;
|
||||
}
|
||||
|
||||
.select_desk .select_desk_dialog .keyboard .li .icon {
|
||||
font-size: 1.3em;
|
||||
}
|
||||
|
||||
.select_desk .select_desk_dialog .keyboard .confirm {
|
||||
height: 140px;
|
||||
background: #ff9f2e;
|
||||
position: absolute;
|
||||
bottom: 0;
|
||||
right: 0;
|
||||
border-right: none;
|
||||
}
|
||||
|
||||
.select_desk .select_desk_dialog .keyboard .confirm:hover {
|
||||
background: #f88502;
|
||||
}
|
||||
|
||||
.confirm_btns {
|
||||
display: flex;
|
||||
|
||||
justify-content: space-between;
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
.confirm_btns .el-button {
|
||||
width: 175px;
|
||||
}
|
||||
</style>
|
||||
|
|
@ -0,0 +1,109 @@
|
|||
<template>
|
||||
<el-dialog
|
||||
title="整单备注(提交订单时生效)"
|
||||
width="410px"
|
||||
:visible.sync="show"
|
||||
@close="reset"
|
||||
>
|
||||
<el-input
|
||||
:rows="6"
|
||||
type="textarea"
|
||||
v-model="note"
|
||||
placeholder="请输入备注"
|
||||
></el-input>
|
||||
<div>
|
||||
<el-tag
|
||||
v-for="(tag, index) in tags"
|
||||
@click="addNote(tag)"
|
||||
size="medium"
|
||||
:key="index"
|
||||
closable
|
||||
@close="delTag(index)"
|
||||
type="success"
|
||||
>
|
||||
{{ tag }}
|
||||
</el-tag>
|
||||
</div>
|
||||
<div slot="footer">
|
||||
<el-button
|
||||
size="medium"
|
||||
@click="close"
|
||||
>
|
||||
取消
|
||||
</el-button>
|
||||
<el-button size="medium"
|
||||
type="success"
|
||||
@click="confirm">确定</el-button>
|
||||
</div>
|
||||
</el-dialog>
|
||||
</template>
|
||||
<script>
|
||||
export default {
|
||||
data() {
|
||||
return {
|
||||
show: false,
|
||||
tags: [],
|
||||
note: "",
|
||||
};
|
||||
},
|
||||
watch:{
|
||||
'tags.length'(){
|
||||
localStorage.setItem("tags", JSON.stringify(this.tags))
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
reset(){
|
||||
this.note=''
|
||||
},
|
||||
delTag(index){
|
||||
this.tags.splice(index,1)
|
||||
},
|
||||
addNote(tag) {
|
||||
if(this.note.length<=0){
|
||||
return this.note = tag
|
||||
}
|
||||
this.note = tag + "," + this.note;
|
||||
},
|
||||
open(note) {
|
||||
this.show = true;
|
||||
this.note=note
|
||||
const tags = localStorage.getItem("tags");
|
||||
console.log(tags)
|
||||
this.tags = tags ? JSON.parse(tags) : ["免香菜", "不要辣", "不要葱"];
|
||||
},
|
||||
close() {
|
||||
this.show = false;
|
||||
},
|
||||
confirm(){
|
||||
const originTags = [...this.tags]
|
||||
if(this.note.length>=1){
|
||||
if(originTags>=10){
|
||||
originTags.shift()
|
||||
}
|
||||
const newTags=new Set([this.note,...originTags])
|
||||
console.log(newTags)
|
||||
localStorage.setItem("tags", JSON.stringify([...newTags]));
|
||||
}
|
||||
this.$emit('confirm',this.note)
|
||||
this.close()
|
||||
}
|
||||
},
|
||||
mounted() {},
|
||||
};
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
::v-deep .el-dialog__body{
|
||||
margin-bottom: 14px;
|
||||
margin-top: 14px;
|
||||
}
|
||||
::v-deep .el-tag {
|
||||
margin-top: 10px;
|
||||
margin-right: 10px;
|
||||
margin-bottom: 5px;
|
||||
cursor: pointer;
|
||||
font-size: 15px;
|
||||
line-height: 35px;
|
||||
height: 35px;
|
||||
}
|
||||
</style>
|
||||
File diff suppressed because one or more lines are too long
|
|
@ -1,264 +1,334 @@
|
|||
<template>
|
||||
<div class="app-container">
|
||||
<el-tabs v-model="tabVlaue" type="card" @tab-click="tabClick">
|
||||
<el-tab-pane label="全部" name=""></el-tab-pane>
|
||||
<el-tab-pane v-for="item in tabs" :key="item.id" :label="item.name" :name="`${item.id}`">
|
||||
<div slot="label">
|
||||
{{ item.name }}
|
||||
<i class="icon el-icon-edit" @click.stop="$refs.addEara.show(item)"></i>
|
||||
<el-popconfirm title="确定删除吗？" @confirm="delHandle([item.id])">
|
||||
<i class="icon el-icon-delete" slot="reference" @click.stop=""></i>
|
||||
</el-popconfirm>
|
||||
</div>
|
||||
</el-tab-pane>
|
||||
</el-tabs>
|
||||
<div class="head-container">
|
||||
<div class="filter_wrap">
|
||||
<el-button icon="el-icon-plus" @click="$refs.addEara.show()">添加区域</el-button>
|
||||
<el-button type="primary" icon="el-icon-plus" @click="$refs.addTable.show()">添加台桌</el-button>
|
||||
<el-button type="primary" icon="el-icon-download" @click="$refs.downloadTableCode.show()">
|
||||
下载台桌码
|
||||
</el-button>
|
||||
<el-button type="primary" icon="el-icon-download">下载店铺码</el-button>
|
||||
</div>
|
||||
<div class="app-container">
|
||||
<el-tabs v-model="tabVlaue" type="card" @tab-click="tabClick">
|
||||
<el-tab-pane label="全部" name=""></el-tab-pane>
|
||||
<el-tab-pane
|
||||
v-for="item in tabs"
|
||||
:key="item.id"
|
||||
:label="item.name"
|
||||
:name="`${item.id}`"
|
||||
>
|
||||
<div slot="label">
|
||||
{{ item.name }}
|
||||
<i
|
||||
class="icon el-icon-edit"
|
||||
@click.stop="$refs.addEara.show(item)"
|
||||
></i>
|
||||
<el-popconfirm title="确定删除吗？" @confirm="delHandle([item.id])">
|
||||
<i class="icon el-icon-delete" slot="reference" @click.stop=""></i>
|
||||
</el-popconfirm>
|
||||
</div>
|
||||
<div class="head-container">
|
||||
<div class="table_list" v-loading="loading">
|
||||
<div class="item" v-for="item in tableList" :key="item.id">
|
||||
<div class="top">
|
||||
<div class="row row1">
|
||||
<span>{{ item.name }}</span>
|
||||
<div class="state">
|
||||
<span class="dot" :style="{ backgroundColor: status[item.status].type }"></span>
|
||||
{{ status[item.status].label }}
|
||||
</div>
|
||||
</div>
|
||||
<div class="row">
|
||||
<el-tag type="warning" size="mini">{{ item.type == 0 ? '低消' : '计时' }}</el-tag>
|
||||
<el-tag :type="item.isPredate == 1 ? '' : 'info'" size="mini">{{ item.isPredate == 1 ? '可预约'
|
||||
: '不可预约' }}</el-tag>
|
||||
</div>
|
||||
<div class="row">
|
||||
<span class="tips">客座次数：{{ item.maxCapacity }}人</span>
|
||||
</div>
|
||||
</div>
|
||||
<div class="btm">
|
||||
<!-- <div class="btm_item">
|
||||
</el-tab-pane>
|
||||
</el-tabs>
|
||||
<div class="head-container">
|
||||
<div class="filter_wrap">
|
||||
<el-button icon="el-icon-plus" @click="$refs.addEara.show()"
|
||||
>添加区域</el-button
|
||||
>
|
||||
<el-button
|
||||
type="primary"
|
||||
icon="el-icon-plus"
|
||||
@click="$refs.addTable.show()"
|
||||
>添加台桌</el-button
|
||||
>
|
||||
<el-button
|
||||
type="primary"
|
||||
icon="el-icon-download"
|
||||
@click="$refs.downloadTableCode.show()"
|
||||
>
|
||||
下载台桌码
|
||||
</el-button>
|
||||
<el-button type="primary" icon="el-icon-download">下载店铺码</el-button>
|
||||
</div>
|
||||
</div>
|
||||
<div class="head-container">
|
||||
<div class="table_list" v-loading="loading">
|
||||
<div class="item" v-for="item in tableList" :key="item.id">
|
||||
<div class="top">
|
||||
<div class="row row1">
|
||||
<span>{{ item.name }}</span>
|
||||
<div class="state">
|
||||
<span
|
||||
class="dot"
|
||||
:style="{ backgroundColor: status[item.status].type }"
|
||||
></span>
|
||||
{{ status[item.status].label }}
|
||||
</div>
|
||||
</div>
|
||||
<div class="row">
|
||||
<el-tag type="warning" size="mini">{{
|
||||
item.type == 0 ? "低消" : "计时"
|
||||
}}</el-tag>
|
||||
<el-tag :type="item.isPredate == 1 ? '' : 'info'" size="mini">{{
|
||||
item.isPredate == 1 ? "可预约" : "不可预约"
|
||||
}}</el-tag>
|
||||
</div>
|
||||
<div class="row">
|
||||
<span class="tips">客座次数：{{ item.maxCapacity }}人</span>
|
||||
</div>
|
||||
<div class="row">
|
||||
<el-button
|
||||
type="primary"
|
||||
:disabled="!item.tableId||item.status==='closed'"
|
||||
@click="diancanShow(item)"
|
||||
>点餐</el-button
|
||||
>
|
||||
</div>
|
||||
</div>
|
||||
<div class="btm">
|
||||
<!-- <div class="btm_item">
|
||||
<i class="i el-icon-edit"></i>
|
||||
</div> -->
|
||||
<div class="btm_item" @click="$refs.addTable.show(item)">
|
||||
<i class="i el-icon-edit"></i>
|
||||
</div>
|
||||
<el-popconfirm title="确定删除吗？" @confirm="delTableHandle([item.id])" style="flex: 1;">
|
||||
<div class="btm_item" slot="reference">
|
||||
<i class="i el-icon-delete"></i>
|
||||
</div>
|
||||
</el-popconfirm>
|
||||
</div>
|
||||
</div>
|
||||
<div class="empty_wrap">
|
||||
<el-empty description="空空如也~" v-if="!tableList.length"></el-empty>
|
||||
</div>
|
||||
<div class="btm_item" @click="$refs.addTable.show(item)">
|
||||
<i class="i el-icon-edit"></i>
|
||||
</div>
|
||||
<el-popconfirm
|
||||
title="确定删除吗？"
|
||||
@confirm="delTableHandle([item.id])"
|
||||
style="flex: 1"
|
||||
>
|
||||
<div class="btm_item" slot="reference">
|
||||
<i class="i el-icon-delete"></i>
|
||||
</div>
|
||||
</el-popconfirm>
|
||||
</div>
|
||||
</div>
|
||||
<addEara ref="addEara" @success="tbShopAreaGet" />
|
||||
<addTable ref="addTable" @success="tbShopTableGet" />
|
||||
<downloadTableCode :total="total" ref="downloadTableCode" />
|
||||
<div class="empty_wrap">
|
||||
<el-empty description="空空如也~" v-if="!tableList.length"></el-empty>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<addEara ref="addEara" @success="tbShopAreaGet" />
|
||||
<addTable ref="addTable" @success="tbShopTableGet" />
|
||||
<downloadTableCode :total="total" ref="downloadTableCode" />
|
||||
|
||||
<!-- 点餐 -->
|
||||
<table-diancan ref="dianan" @close="onDiancanClose"></table-diancan>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import addEara from './components/addEara'
|
||||
import addTable from './components/addTable'
|
||||
import downloadTableCode from './components/downloadTableCode'
|
||||
import { tbShopTableGet, tbShopAreaGet, tbShopAreaDelete, tbShopTableDelete } from '@/api/table'
|
||||
import addEara from "./components/addEara";
|
||||
import addTable from "./components/addTable";
|
||||
import downloadTableCode from "./components/downloadTableCode";
|
||||
import tableDiancan from "./components/table-diancan.vue";
|
||||
import {
|
||||
tbShopTableGet,
|
||||
tbShopAreaGet,
|
||||
tbShopAreaDelete,
|
||||
tbShopTableDelete,
|
||||
} from "@/api/table";
|
||||
export default {
|
||||
components: {
|
||||
addEara,
|
||||
addTable,
|
||||
downloadTableCode
|
||||
components: {
|
||||
addEara,
|
||||
addTable,
|
||||
downloadTableCode,
|
||||
tableDiancan,
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
tabVlaue: "",
|
||||
tabs: [],
|
||||
loading: false,
|
||||
total: 0,
|
||||
tableList: [],
|
||||
status: {
|
||||
pending:{
|
||||
label: "挂单中",
|
||||
type: "#E6A23C",
|
||||
},
|
||||
using:{
|
||||
label: "开台中",
|
||||
type: "#E6A23C",
|
||||
},
|
||||
paying:{
|
||||
label: "结算中",
|
||||
type: "#E6A23C",
|
||||
},
|
||||
idle: {
|
||||
label: "空闲",
|
||||
type: "#67C23A",
|
||||
},
|
||||
subscribe: {
|
||||
label: "预定",
|
||||
type: "#E6A23C",
|
||||
},
|
||||
closed: {
|
||||
label: "关台",
|
||||
type: "#F56C6C",
|
||||
},
|
||||
opening: {
|
||||
label: "开台中",
|
||||
type: "#67C23A",
|
||||
},
|
||||
cleaning: {
|
||||
label: "台桌清理中",
|
||||
type: "#909399",
|
||||
},
|
||||
},
|
||||
};
|
||||
},
|
||||
mounted() {
|
||||
this.tbShopAreaGet();
|
||||
},
|
||||
methods: {
|
||||
onDiancanClose(){
|
||||
this.tbShopTableGet()
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
tabVlaue: '',
|
||||
tabs: [],
|
||||
loading: false,
|
||||
total: 0,
|
||||
tableList: [],
|
||||
status: {
|
||||
subscribe: {
|
||||
label: '预定',
|
||||
type: '#E6A23C'
|
||||
},
|
||||
closed: {
|
||||
label: '关台',
|
||||
type: '#F56C6C'
|
||||
},
|
||||
opening: {
|
||||
label: '开台中',
|
||||
type: '#67C23A'
|
||||
},
|
||||
cleaning: {
|
||||
label: '台桌清理中',
|
||||
type: '#909399'
|
||||
}
|
||||
}
|
||||
}
|
||||
diancanShow(item) {
|
||||
this.$refs.dianan.open(item);
|
||||
},
|
||||
mounted() {
|
||||
this.tbShopAreaGet()
|
||||
tabClick() {
|
||||
this.tbShopTableGet();
|
||||
},
|
||||
methods: {
|
||||
tabClick() {
|
||||
this.tbShopTableGet()
|
||||
},
|
||||
// 删除桌台
|
||||
async delTableHandle(ids) {
|
||||
try {
|
||||
await tbShopTableDelete(ids)
|
||||
this.tbShopTableGet()
|
||||
} catch (error) {
|
||||
console.log(error)
|
||||
}
|
||||
},
|
||||
// 删除区域
|
||||
async delHandle(ids) {
|
||||
try {
|
||||
await tbShopAreaDelete(ids)
|
||||
this.tabVlaue = ''
|
||||
this.tbShopAreaGet()
|
||||
} catch (error) {
|
||||
console.log(error)
|
||||
}
|
||||
},
|
||||
// 台桌列表
|
||||
async tbShopTableGet() {
|
||||
this.loading = true
|
||||
try {
|
||||
const { content, total } = await tbShopTableGet({
|
||||
shopId: localStorage.getItem('shopId'),
|
||||
areaId: this.tabVlaue
|
||||
})
|
||||
this.tableList = content
|
||||
this.total = total
|
||||
setTimeout(() => {
|
||||
this.loading = false
|
||||
}, 300)
|
||||
} catch (error) {
|
||||
this.loading = false
|
||||
console.log(error)
|
||||
}
|
||||
},
|
||||
// 获取区域
|
||||
async tbShopAreaGet() {
|
||||
try {
|
||||
const { content } = await tbShopAreaGet({
|
||||
shopId: localStorage.getItem('shopId')
|
||||
})
|
||||
this.tabs = content
|
||||
this.tbShopTableGet()
|
||||
} catch (error) {
|
||||
console.log(error)
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
// 删除桌台
|
||||
async delTableHandle(ids) {
|
||||
try {
|
||||
await tbShopTableDelete(ids);
|
||||
this.tbShopTableGet();
|
||||
} catch (error) {
|
||||
console.log(error);
|
||||
}
|
||||
},
|
||||
// 删除区域
|
||||
async delHandle(ids) {
|
||||
try {
|
||||
await tbShopAreaDelete(ids);
|
||||
this.tabVlaue = "";
|
||||
this.tbShopAreaGet();
|
||||
} catch (error) {
|
||||
console.log(error);
|
||||
}
|
||||
},
|
||||
// 台桌列表
|
||||
async tbShopTableGet() {
|
||||
this.loading = true;
|
||||
try {
|
||||
const { content, total } = await tbShopTableGet({
|
||||
shopId: localStorage.getItem("shopId"),
|
||||
areaId: this.tabVlaue,
|
||||
});
|
||||
console.log(content);
|
||||
this.tableList = content;
|
||||
this.total = total;
|
||||
setTimeout(() => {
|
||||
this.loading = false;
|
||||
}, 300);
|
||||
} catch (error) {
|
||||
this.loading = false;
|
||||
console.log(error);
|
||||
}
|
||||
},
|
||||
// 获取区域
|
||||
async tbShopAreaGet() {
|
||||
try {
|
||||
const { content } = await tbShopAreaGet({
|
||||
shopId: localStorage.getItem("shopId"),
|
||||
});
|
||||
this.tabs = content;
|
||||
this.tbShopTableGet();
|
||||
} catch (error) {
|
||||
console.log(error);
|
||||
}
|
||||
},
|
||||
},
|
||||
};
|
||||
</script>
|
||||
|
||||
<style>
|
||||
.el-tabs {
|
||||
margin-bottom: 0;
|
||||
margin-bottom: 0;
|
||||
}
|
||||
</style>
|
||||
<style scoped lang="scss">
|
||||
.icon {
|
||||
margin-left: 10px;
|
||||
margin-left: 10px;
|
||||
}
|
||||
|
||||
.table_list {
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
gap: 20px;
|
||||
min-height: 150px;
|
||||
|
||||
.empty_wrap {
|
||||
flex: 1;
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
gap: 20px;
|
||||
min-height: 150px;
|
||||
justify-content: center;
|
||||
}
|
||||
|
||||
.empty_wrap {
|
||||
flex: 1;
|
||||
.item {
|
||||
border: 1px solid #ddd;
|
||||
|
||||
.top {
|
||||
padding: 20px;
|
||||
|
||||
.row {
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
}
|
||||
gap: 10px;
|
||||
|
||||
.item {
|
||||
border: 1px solid #ddd;
|
||||
|
||||
.top {
|
||||
padding: 20px;
|
||||
|
||||
.row {
|
||||
display: flex;
|
||||
gap: 10px;
|
||||
|
||||
.tips {
|
||||
font-size: 12px;
|
||||
}
|
||||
|
||||
&:not(:first-child) {
|
||||
margin-top: 20px;
|
||||
}
|
||||
|
||||
&.row1 {
|
||||
justify-content: space-between;
|
||||
font-size: 14px;
|
||||
|
||||
.state {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
margin-left: 80px;
|
||||
|
||||
.dot {
|
||||
$size: 6px;
|
||||
width: $size;
|
||||
height: $size;
|
||||
border-radius: 50%;
|
||||
margin-right: $size;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
.tips {
|
||||
font-size: 12px;
|
||||
}
|
||||
|
||||
.btm {
|
||||
border-top: 1px solid #ddd;
|
||||
background-color: #efefef;
|
||||
&:not(:first-child) {
|
||||
margin-top: 20px;
|
||||
}
|
||||
|
||||
&.row1 {
|
||||
justify-content: space-between;
|
||||
font-size: 14px;
|
||||
|
||||
.state {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
margin-left: 80px;
|
||||
|
||||
.btm_item {
|
||||
flex: 1;
|
||||
height: 40px;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
position: relative;
|
||||
|
||||
&:hover {
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
&:nth-child(1) {
|
||||
&::before {
|
||||
content: '';
|
||||
height: 50%;
|
||||
border-right: 1px solid #ddd;
|
||||
position: absolute;
|
||||
top: 25%;
|
||||
right: 0;
|
||||
}
|
||||
}
|
||||
|
||||
.i {
|
||||
color: #666;
|
||||
}
|
||||
.dot {
|
||||
$size: 6px;
|
||||
width: $size;
|
||||
height: $size;
|
||||
border-radius: 50%;
|
||||
margin-right: $size;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.btm {
|
||||
border-top: 1px solid #ddd;
|
||||
background-color: #efefef;
|
||||
display: flex;
|
||||
|
||||
.btm_item {
|
||||
flex: 1;
|
||||
height: 40px;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
position: relative;
|
||||
|
||||
&:hover {
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
&:nth-child(1) {
|
||||
&::before {
|
||||
content: "";
|
||||
height: 50%;
|
||||
border-right: 1px solid #ddd;
|
||||
position: absolute;
|
||||
top: 25%;
|
||||
right: 0;
|
||||
}
|
||||
}
|
||||
|
||||
.i {
|
||||
color: #666;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
</style>
|
||||
Loading…
Reference in New Issue