first
This commit is contained in:
358
pageTable/index/components/add-table.vue
Normal file
358
pageTable/index/components/add-table.vue
Normal file
@@ -0,0 +1,358 @@
|
||||
<template>
|
||||
<my-model ref="model" :title="title" :borderRadius="16" @confirm="submit" :confirmClickClose="false">
|
||||
<template #desc>
|
||||
<view>
|
||||
<uni-forms ref="refform" label-position="left" :model="form" label-align="left" :label-width="400"
|
||||
:rules="rules">
|
||||
<view class="form">
|
||||
<view class="border-bottom u-p-b-10 u-p-t-10">
|
||||
<uni-forms-item required label="" name="areaId">
|
||||
<template #label>
|
||||
<view class="u-text-left ">
|
||||
<text class="color-red">*</text>
|
||||
<text class="color-333 u-font-28">选择区域</text>
|
||||
</view>
|
||||
</template>
|
||||
<picker @change="areaChange"
|
||||
:value="area.selIndex"
|
||||
range-key="name" :range="area.list">
|
||||
<view class=" u-flex u-row-between u-relative ">
|
||||
<view class="zhezhao u-absolute position-all" style="z-index: 1;"></view>
|
||||
<view class="u-flex-1">
|
||||
<uni-easyinput :inputBorder="false" paddingNone v-model="area.sel.name"
|
||||
placeholder="请选择区域"></uni-easyinput>
|
||||
|
||||
</view>
|
||||
<uni-icons type="right" size="18" color="#999"></uni-icons>
|
||||
</view>
|
||||
|
||||
</picker>
|
||||
|
||||
</uni-forms-item>
|
||||
</view>
|
||||
<view class="border-bottom u-p-b-10 u-p-t-10">
|
||||
<uni-forms-item required label="" name="status">
|
||||
<template #label>
|
||||
<view class="u-text-left ">
|
||||
<!-- <text class="color-red">*</text> -->
|
||||
<text class="color-333 u-font-28">桌台状态</text>
|
||||
</view>
|
||||
</template>
|
||||
<picker @change="statusChange" range-key="label"
|
||||
:value="status.selIndex"
|
||||
:range="status.list">
|
||||
<view class=" u-flex u-row-between u-relative ">
|
||||
<view class="zhezhao u-absolute position-all" style="z-index: 1;"></view>
|
||||
<view class="u-flex-1">
|
||||
<uni-easyinput :inputBorder="false" paddingNone v-model="status.sel.label"
|
||||
placeholder="请选择桌台状态"></uni-easyinput>
|
||||
</view>
|
||||
<uni-icons type="right" size="18" color="#999"></uni-icons>
|
||||
</view>
|
||||
|
||||
</picker>
|
||||
|
||||
</uni-forms-item>
|
||||
</view>
|
||||
<view class="border-bottom u-p-b-10">
|
||||
<uni-forms-item required label="" name="name">
|
||||
<template #label>
|
||||
<view class="u-text-left">
|
||||
<text class="color-333 u-font-28">桌台名称</text>
|
||||
<!-- <text class="color-red">*</text> -->
|
||||
</view>
|
||||
</template>
|
||||
<view class="u-flex-1">
|
||||
<uni-easyinput :inputBorder="false" paddingNone v-model="form.name"
|
||||
placeholder="请输入桌台名称"></uni-easyinput>
|
||||
</view>
|
||||
</uni-forms-item>
|
||||
</view>
|
||||
|
||||
<view class="border-bottom u-p-b-10">
|
||||
<uni-forms-item required label="" name="maxCapacity">
|
||||
<template #label>
|
||||
<view class="u-text-left">
|
||||
<text class="color-333 u-font-28">客座数</text>
|
||||
<!-- <text class="color-red">*</text> -->
|
||||
</view>
|
||||
</template>
|
||||
<view class="u-flex-1">
|
||||
<uni-number-box v-model="form.maxCapacity"></uni-number-box>
|
||||
</view>
|
||||
</uni-forms-item>
|
||||
</view>
|
||||
<view class="border-bottom u-p-b-10">
|
||||
<uni-forms-item required label="" name="isPredate">
|
||||
<template #label>
|
||||
<view class="u-text-left">
|
||||
<text class="color-333 u-font-28">网络预定开关</text>
|
||||
<!-- <text class="color-red">*</text> -->
|
||||
</view>
|
||||
</template>
|
||||
<view class="u-flex-1 u-flex u-row-right">
|
||||
<my-switch v-model="form.isPredate"></my-switch>
|
||||
</view>
|
||||
</uni-forms-item>
|
||||
</view>
|
||||
<view class="border-bottom u-p-b-10">
|
||||
<uni-forms-item required label="" name="types">
|
||||
<template #label>
|
||||
<view class="u-text-left">
|
||||
<text class="color-333 u-font-28">类型</text>
|
||||
<!-- <text class="color-red">*</text> -->
|
||||
</view>
|
||||
</template>
|
||||
<view class="u-flex-1">
|
||||
<my-tabs @change="tabsChange" :list="tabs.list" v-model="tabs.sel"></my-tabs>
|
||||
</view>
|
||||
</uni-forms-item>
|
||||
</view>
|
||||
<view class="border-bottom u-p-b-10">
|
||||
<uni-forms-item required label="" name="types">
|
||||
<template #label>
|
||||
<view class="u-text-left">
|
||||
<text class="color-333 u-font-28">清台管理</text>
|
||||
<!-- <text class="color-red">*</text> -->
|
||||
</view>
|
||||
</template>
|
||||
<view class="u-flex-1">
|
||||
<my-tabs @change="autoClearsChange" :list="autoClears.list" v-model="form.autoClear"></my-tabs>
|
||||
</view>
|
||||
</uni-forms-item>
|
||||
</view>
|
||||
<template v-if="tabs.sel==1">
|
||||
<view class=" u-p-b-10">
|
||||
<uni-forms-item required label="" >
|
||||
<template #label>
|
||||
<view class="u-text-left">
|
||||
<text class="color-333 u-font-28">每小时收费</text>
|
||||
<!-- <text class="color-red">*</text> -->
|
||||
</view>
|
||||
</template>
|
||||
<view class="u-flex-1">
|
||||
<uni-easyinput :inputBorder="false" paddingNone v-model="form.perhour" type="number"
|
||||
placeholder="请输入每小时收费"></uni-easyinput>
|
||||
</view>
|
||||
</uni-forms-item>
|
||||
</view>
|
||||
</template>
|
||||
<template v-else>
|
||||
<view class=" u-p-b-10">
|
||||
<uni-forms-item required label="" >
|
||||
<template #label>
|
||||
<view class="u-text-left">
|
||||
<text class="color-333 u-font-28">最低消费</text>
|
||||
<!-- <text class="color-red">*</text> -->
|
||||
</view>
|
||||
</template>
|
||||
<view class="u-flex-1">
|
||||
<uni-easyinput :inputBorder="false" paddingNone v-model="form.amount" type="number"
|
||||
placeholder="请输入最低消费"></uni-easyinput>
|
||||
</view>
|
||||
</uni-forms-item>
|
||||
</view>
|
||||
</template>
|
||||
|
||||
</view>
|
||||
</uni-forms>
|
||||
</view>
|
||||
</template>
|
||||
|
||||
</my-model>
|
||||
</template>
|
||||
|
||||
<script setup>
|
||||
import {
|
||||
$tableArea,$table
|
||||
} from '@/http/yskApi/table.js'
|
||||
import {
|
||||
ref,
|
||||
reactive,
|
||||
onMounted
|
||||
} from 'vue';
|
||||
import {
|
||||
$status
|
||||
} from '@/commons/table-status.js'
|
||||
import {objToArrary} from '@/commons/utils/returrn-data.js'
|
||||
import infoBox from '@/commons/utils/infoBox.js'
|
||||
const emits= defineEmits(['update'])
|
||||
const tabs=reactive({
|
||||
list:['低消','计时'],
|
||||
sel:1
|
||||
})
|
||||
//清台管理
|
||||
const autoClears=reactive({
|
||||
list:['手动清台','自动清台']
|
||||
})
|
||||
function autoClearsChange(i){
|
||||
form.autoClearsChange=i
|
||||
}
|
||||
const status = reactive({
|
||||
list:objToArrary($status),
|
||||
sel: '',
|
||||
selIndex:0
|
||||
})
|
||||
console.log(status.list);
|
||||
const props = defineProps({
|
||||
title: {
|
||||
type: String,
|
||||
default: '编辑桌台'
|
||||
}
|
||||
})
|
||||
const model = ref(null)
|
||||
const area = reactive({
|
||||
list: [],
|
||||
sel: '',
|
||||
selIndex:0
|
||||
})
|
||||
async function getArea() {
|
||||
const {
|
||||
content
|
||||
} = await $tableArea.get({
|
||||
page: 0,
|
||||
size: 300
|
||||
})
|
||||
area.list = content.map(v => {
|
||||
return {
|
||||
...v,
|
||||
name: v.name,
|
||||
value: v.id,
|
||||
label: v.name
|
||||
}
|
||||
})
|
||||
console.log(area.list);
|
||||
|
||||
}
|
||||
|
||||
function tabsChange(e){
|
||||
if(e){
|
||||
form.type=2
|
||||
}else{
|
||||
form.type=0
|
||||
}
|
||||
}
|
||||
function statusChange(e){
|
||||
status.sel = status.list[e.detail.value]
|
||||
form.status = status.sel.key
|
||||
}
|
||||
function areaChange(e) {
|
||||
console.log(e);
|
||||
area.sel = area.list[e.detail.value]
|
||||
form.areaId = area.sel.id
|
||||
}
|
||||
onMounted(()=>{
|
||||
getArea()
|
||||
})
|
||||
function open(tableData) {
|
||||
Object.assign(form,tableData)
|
||||
getArea()
|
||||
model.value.open()
|
||||
if(tableData){//编辑
|
||||
const {areaId,type}=tableData
|
||||
area.sel=area.list.find(v=>v.id==areaId)
|
||||
area.selIndex=area.list.findIndex(v=>v.id==areaId)
|
||||
status.sel=status.list.find(v=>v.key==tableData.status)
|
||||
status.selIndex=status.list.findIndex(v=>v.key==tableData.status)
|
||||
tabs.sel=form.type==2?1:0
|
||||
}
|
||||
}
|
||||
|
||||
function close() {
|
||||
model.value.close()
|
||||
}
|
||||
defineExpose({
|
||||
open,
|
||||
close
|
||||
})
|
||||
|
||||
|
||||
function unitChange(e) {
|
||||
units.current = e.detail.value
|
||||
form.unit = units.list[e.detail.value].name
|
||||
}
|
||||
|
||||
const refform = ref(null)
|
||||
const form = reactive({
|
||||
id: '',
|
||||
name: '',
|
||||
areaId: '',
|
||||
status:'',
|
||||
maxCapacity: 0,
|
||||
isPredate: 1,
|
||||
type: 2,
|
||||
perhour: 0,
|
||||
amount: 0
|
||||
})
|
||||
// 校验规则
|
||||
const rules = {
|
||||
areaId: {
|
||||
rules: [{
|
||||
required: true,
|
||||
errorMessage: '请选择区域'
|
||||
}]
|
||||
},
|
||||
name: {
|
||||
rules: [{
|
||||
required: true,
|
||||
errorMessage: '请输入桌台名称'
|
||||
}]
|
||||
}
|
||||
}
|
||||
|
||||
function submit() {
|
||||
refform.value.validate(res => {
|
||||
console.log(res)
|
||||
console.log(form);
|
||||
$table.update({...form,qrcode:form.tableId}).then(Response=>{
|
||||
infoBox.showSuccessToast('更新成功')
|
||||
close()
|
||||
emits('update')
|
||||
})
|
||||
}).catch(err => {
|
||||
console.log(err);
|
||||
})
|
||||
}
|
||||
const page = reactive({
|
||||
type: 'add'
|
||||
})
|
||||
|
||||
function cancel() {
|
||||
uni.navigateBack()
|
||||
}
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
.border-bottom {
|
||||
padding: 10rpx 0;
|
||||
}
|
||||
|
||||
.form {
|
||||
margin-top: 32rpx;
|
||||
background-color: #fff;
|
||||
padding: 32rpx 24rpx 32rpx 24rpx;
|
||||
border-radius: 18rpx 18rpx 18rpx 18rpx;
|
||||
|
||||
.u-text-left {
|
||||
min-width: 160rpx;
|
||||
}
|
||||
|
||||
// background-color: transparent;
|
||||
}
|
||||
|
||||
::v-deep.uni-forms-item {
|
||||
min-height: 80rpx;
|
||||
}
|
||||
|
||||
::v-deep.uni-forms-item .uni-forms-item__label {
|
||||
font-size: 28rpx !important;
|
||||
}
|
||||
|
||||
::v-deep.uni-easyinput__placeholder-class {
|
||||
font-size: 28rpx;
|
||||
}
|
||||
|
||||
::v-deep.uni-forms-item__error {
|
||||
display: none;
|
||||
}
|
||||
</style>
|
||||
249
pageTable/index/components/table-item.vue
Normal file
249
pageTable/index/components/table-item.vue
Normal file
@@ -0,0 +1,249 @@
|
||||
<template>
|
||||
<view class="item color-fff border-r-12" :class="[computedClass]" @click="toOrderDetail">
|
||||
<view class="my-bg-main" :style="{'background-color':returnStutasColor(data.status)}">
|
||||
<view class="u-flex u-row-between">
|
||||
<view class="u-font-32">{{data.name}}</view>
|
||||
<view class="u-flex" @tap.stop="more">
|
||||
<uni-icons type="more-filled" color="#fff" size="16"></uni-icons>
|
||||
</view>
|
||||
</view>
|
||||
<view class="u-flex u-m-t-10 u-row-between">
|
||||
<view>{{areaMap[data.areaId]||'' }}</view>
|
||||
<view class="tag" :style="{color:returnStutasColor(data.status)}">
|
||||
{{returnStutasText(data.status)}}
|
||||
</view>
|
||||
</view>
|
||||
|
||||
</view>
|
||||
<view class="u-flex u-flex-col u-row-center u-col-center bg-fff bottom">
|
||||
<template v-if="data.status!='using'">
|
||||
<view class=" u-font-32" :style="{color:returnStutasColor(data.status)}">
|
||||
{{returnStutasText(data.status)}}~
|
||||
</view>
|
||||
</template>
|
||||
<view class=" w-full u-p-l-16 u-p-r-16 u-p-t-16 u-font-24">
|
||||
<template v-if="data.status=='using'&& data.orderId">
|
||||
<view class="color-666 u-text-left u-p-b-20 border-bottom">
|
||||
<view class=""><text>已点</text><text class="u-m-l-20 color-333">{{data.productNum||0}}件</text>
|
||||
</view>
|
||||
<view class="u-m-t-10"><text>金额</text><text class="u-m-l-20 color-333">{{data.totalAmount||0}}
|
||||
元</text> </view>
|
||||
<view class="u-m-t-10"><text>待结</text><text class="u-m-l-20 color-333">{{data.totalAmount||0}}
|
||||
元</text> </view>
|
||||
</view>
|
||||
<view class="u-flex u-row-between u-font-20 u-p-b-20 u-p-t-20">
|
||||
<text class="color-333">开台时间</text>
|
||||
<text class="color-666"> {{data.useTime}}</text>
|
||||
</view>
|
||||
</template>
|
||||
<template v-else>
|
||||
<view class="u-flex u-row-center u-m-t-16">
|
||||
<template v-if="data.tableId">
|
||||
<template v-if="data.status=='idle'||(data.status=='using'&&!data.orderId) ">
|
||||
<my-button color="#333" :width="150" :height="56" type="default" @click="diancan">
|
||||
选择
|
||||
</my-button>
|
||||
</template>
|
||||
<template v-if="data.status=='cleaning' ">
|
||||
<my-button color="#333" :width="150" :height="56" type="default" @click="qingtai">
|
||||
清台
|
||||
</my-button>
|
||||
</template>
|
||||
</template>
|
||||
<my-button v-else :width="150" :height="56" type="default" disabled>
|
||||
选择
|
||||
</my-button>
|
||||
</view>
|
||||
</template>
|
||||
|
||||
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
</template>
|
||||
|
||||
<script setup>
|
||||
import * as Api from '@/http/yskApi/Instead.js'
|
||||
import myButton from '@/components/my-components/my-button'
|
||||
import go from '@/commons/utils/go.js'
|
||||
import {hasPermission} from '@/commons/utils/hasPermission.js'
|
||||
import {
|
||||
$status
|
||||
} from '@/commons/table-status.js'
|
||||
import {
|
||||
computed,
|
||||
onMounted,
|
||||
ref
|
||||
} from 'vue';
|
||||
import {
|
||||
$table
|
||||
} from '@/http/yskApi/table.js'
|
||||
import infoBox from '@/commons/utils/infoBox.js'
|
||||
const status = $status
|
||||
const emits = defineEmits(['more', 'update'])
|
||||
|
||||
function returnStutasText(key) {
|
||||
key = returnIsUseing(key)
|
||||
const item = status[key]
|
||||
return item ? item.label : ''
|
||||
}
|
||||
|
||||
const computedClass = computed(() => {
|
||||
const key = returnIsUseing(props.data.status)
|
||||
return key
|
||||
})
|
||||
|
||||
function returnIsUseing(key) {
|
||||
// return key = key == 'using' ? (props.data.orderId ? key : 'idle') : key
|
||||
return key
|
||||
}
|
||||
|
||||
function returnStutasColor(key) {
|
||||
// if(key=='using'){
|
||||
// return 'rgb(250,85,85)'
|
||||
// }else{
|
||||
// return ''
|
||||
// }
|
||||
key = returnIsUseing(key)
|
||||
const item = status[key]
|
||||
return item ? item.type : ''
|
||||
}
|
||||
const props = defineProps({
|
||||
data: {
|
||||
type: Object,
|
||||
default: () => {
|
||||
return {}
|
||||
}
|
||||
},
|
||||
areaMap: {
|
||||
type: Object,
|
||||
default: () => {}
|
||||
}
|
||||
})
|
||||
const goodsList = ref([])
|
||||
const allPrice = computed(() => {
|
||||
return goodsList.value.reduce((prve, cur) => {
|
||||
return prve + cur.salePrice * cur.number
|
||||
}, 0).toFixed(2)
|
||||
})
|
||||
|
||||
const goodsNumber = computed(() => {
|
||||
let result = 0
|
||||
result = goodsList.value.reduce((prve, cur) => {
|
||||
return prve + cur.number
|
||||
}, 0)
|
||||
return result
|
||||
})
|
||||
|
||||
onMounted(() => {})
|
||||
|
||||
function more() {
|
||||
if(props.data.status=='closed'){
|
||||
return uni.showToast({
|
||||
icon:'none',
|
||||
title:'桌台关闭中！'
|
||||
})
|
||||
}
|
||||
emits('more')
|
||||
}
|
||||
|
||||
|
||||
async function diancan() {
|
||||
hasPermission('允许下单').then(res=>{
|
||||
if(res){
|
||||
const useType = props.status == 'using' ? props.data.useType : undefined
|
||||
go.to('PAGES_CREATE_ORDER', {
|
||||
tableId: props.data.tableId,
|
||||
name: props.data.name,
|
||||
maxCapacity: props.data.maxCapacity,
|
||||
status: props.data.status,
|
||||
})
|
||||
}
|
||||
})
|
||||
|
||||
}
|
||||
|
||||
function toOrderDetail() {
|
||||
if (props.data.status == 'using' && props.data.orderId) {
|
||||
const {
|
||||
tableId,
|
||||
name,
|
||||
status,
|
||||
amount,
|
||||
areaId,
|
||||
orderId
|
||||
} = props.data
|
||||
if (!orderId) {
|
||||
return uni.showToast({
|
||||
icon: 'none',
|
||||
title: '台桌未返回订单id'
|
||||
})
|
||||
}
|
||||
go.to('PAGES_ORDER_DETAIL', {
|
||||
tableId,
|
||||
name,
|
||||
status,
|
||||
amount,
|
||||
areaId,
|
||||
id: orderId
|
||||
})
|
||||
}
|
||||
}
|
||||
|
||||
function qingtai() {
|
||||
const item = props.data
|
||||
uni.showModal({
|
||||
title: '提示',
|
||||
content: '确定要清台：' + props.data.name + '？',
|
||||
success(res) {
|
||||
if (res.confirm) {
|
||||
$table.update({
|
||||
...item,
|
||||
status: "idle",
|
||||
qrcode: item.tableId,
|
||||
}).then(res => {
|
||||
infoBox.showToast('清台成功')
|
||||
emits('update')
|
||||
})
|
||||
}
|
||||
}
|
||||
})
|
||||
}
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
.gap-10 {
|
||||
gap: 10rpx;
|
||||
}
|
||||
|
||||
.item {
|
||||
width: 330rpx;
|
||||
box-sizing: border-box;
|
||||
overflow: hidden;
|
||||
box-shadow: 1px 1px 0 #eee;
|
||||
border-color: #eee;
|
||||
|
||||
.bottom {
|
||||
min-height: 224rpx;
|
||||
}
|
||||
|
||||
.my-bg-main {
|
||||
padding: 32rpx 28rpx;
|
||||
|
||||
.tag {
|
||||
background-color: rgba(255, 255, 255, .7);
|
||||
font-size: 24rpx;
|
||||
color: $my-main-color;
|
||||
border-radius: 8rpx;
|
||||
padding: 2rpx 10rpx;
|
||||
}
|
||||
}
|
||||
|
||||
&.using {
|
||||
.tag {
|
||||
color: rgb(250, 85, 85);
|
||||
}
|
||||
}
|
||||
|
||||
}
|
||||
</style>
|
||||
BIN
pageTable/index/images/1.png
Normal file
BIN
pageTable/index/images/1.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 553 B |
BIN
pageTable/index/images/2.png
Normal file
BIN
pageTable/index/images/2.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 559 B |
BIN
pageTable/index/images/3.png
Normal file
BIN
pageTable/index/images/3.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 613 B |
155
pageTable/index/index - 副本.vue
Normal file
155
pageTable/index/index - 副本.vue
Normal file
@@ -0,0 +1,155 @@
|
||||
<template>
|
||||
<view>
|
||||
<view class="tab-header">
|
||||
<view class="item" :class="{ active: active == 0 }" @click="tabChange(0)">全部</view>
|
||||
<view class="item" :class="{ active: active == item.id }" v-for="item in tabs" :key="item.id" @click="tabChange(item.id)">
|
||||
{{ item.name }}
|
||||
</view>
|
||||
</view>
|
||||
<view class="list">
|
||||
<view class="item" :class="{ active: item.qrcode }" v-for="item in list" :key="item.id" @click="bindCode(item)">
|
||||
<text class="t1">{{ item.name }}</text>
|
||||
<text class="t2">{{ item.qrcode ? `重新绑定` : '未绑定' }}</text>
|
||||
</view>
|
||||
</view>
|
||||
<u-empty v-if="!list.length" text="空空如也~"></u-empty>
|
||||
</view>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import {getQueryString} from '@/commons/utils/getQueryString.js';
|
||||
import { tableList, areaList, tableBinding } from '@/http/businessApiManger.js';
|
||||
export default {
|
||||
data() {
|
||||
return {
|
||||
active: 0,
|
||||
tabs: [],
|
||||
list: []
|
||||
};
|
||||
},
|
||||
onLoad() {
|
||||
this.areaList();
|
||||
this.tableList();
|
||||
},
|
||||
methods: {
|
||||
// 绑定
|
||||
bindCode(item) {
|
||||
uni.scanCode({
|
||||
success: (res) => {
|
||||
let tableCode = getQueryString(decodeURIComponent(res.result), 'code');
|
||||
uni.showModal({
|
||||
title: '注意',
|
||||
content: `确定绑定该桌码吗？`,
|
||||
success: async (res) => {
|
||||
if (res.confirm) {
|
||||
try {
|
||||
uni.showLoading({
|
||||
title: '桌码绑定中...',
|
||||
mask: true
|
||||
});
|
||||
await tableBinding({
|
||||
qrcode: tableCode,
|
||||
id: item.id
|
||||
});
|
||||
uni.hideLoading();
|
||||
uni.showModal({
|
||||
title: '注意',
|
||||
content: '桌码绑定成功',
|
||||
showCancel: false
|
||||
});
|
||||
this.tableList();
|
||||
} catch (e) {
|
||||
uni.hideLoading();
|
||||
}
|
||||
}
|
||||
}
|
||||
});
|
||||
}
|
||||
});
|
||||
},
|
||||
// 切换
|
||||
tabChange(id) {
|
||||
this.active = id;
|
||||
this.tableList();
|
||||
},
|
||||
// 获取区域列表
|
||||
async areaList() {
|
||||
try {
|
||||
const { data } = await areaList();
|
||||
this.tabs = data;
|
||||
} catch (e) {
|
||||
console.log(e);
|
||||
}
|
||||
},
|
||||
// 新版获取店铺桌码信息
|
||||
async tableList() {
|
||||
try {
|
||||
uni.showLoading({
|
||||
title: '加载中...'
|
||||
});
|
||||
const res = await tableList(this.active);
|
||||
this.list = res.data;
|
||||
uni.hideLoading();
|
||||
} catch (e) {
|
||||
console.log(e);
|
||||
uni.hideLoading();
|
||||
}
|
||||
}
|
||||
}
|
||||
};
|
||||
</script>
|
||||
|
||||
<style>
|
||||
page {
|
||||
background-color: #fff;
|
||||
}
|
||||
</style>
|
||||
<style scoped lang="scss">
|
||||
$color: #19be6b;
|
||||
.tab-header {
|
||||
display: flex;
|
||||
padding: 0 14upx;
|
||||
background-color: #fff;
|
||||
height: 120upx;
|
||||
.item {
|
||||
height: inherit;
|
||||
padding: 0 28upx;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
font-size: 32upx;
|
||||
&.active {
|
||||
color: $color;
|
||||
}
|
||||
}
|
||||
}
|
||||
.list {
|
||||
display: grid;
|
||||
grid-gap: 34upx;
|
||||
background-color: #fff;
|
||||
grid-template-columns: 1fr 1fr 1fr 1fr;
|
||||
padding: 0 34upx 34upx;
|
||||
.item {
|
||||
height: 166upx;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
background-color: #f7f7f7;
|
||||
color: #999;
|
||||
border-radius: 12upx;
|
||||
&.active {
|
||||
background-color: $color;
|
||||
.t1,
|
||||
.t2 {
|
||||
color: #fff;
|
||||
}
|
||||
}
|
||||
.t1 {
|
||||
font-size: 24upx;
|
||||
}
|
||||
.t2 {
|
||||
font-size: 24upx;
|
||||
}
|
||||
}
|
||||
}
|
||||
</style>
|
||||
522
pageTable/index/index.vue
Normal file
522
pageTable/index/index.vue
Normal file
@@ -0,0 +1,522 @@
|
||||
<template>
|
||||
<view class="color-333 u-font-28 min-page bg-gray ">
|
||||
<view class="fixed-top bg-fff u-flex u-p-l-30 u-row-between">
|
||||
<view class="u-flex u-flex-1 u-row-between">
|
||||
<view class="u-flex u-p-t-30 u-p-b-30 u-flex-1 u-row-center" @tap="showsTimesToggle">
|
||||
<text class="u-m-r-12">{{times.list[times.active]}}秒</text>
|
||||
<image src="/pageTable/static/images/icon-arrow-down-fill.svg" class="icon-arrow-down-fill" mode="">
|
||||
</image>
|
||||
</view>
|
||||
<view class="u-flex u-p-t-30 u-p-b-30 u-flex-1 u-row-center" @tap="showstatusToggle">
|
||||
<text class="u-m-r-12"
|
||||
:class="{'color-main':status.active!=0}">{{status.list[status.active].label }}</text>
|
||||
<image src="/pageTable/static/images/icon-arrow-down-fill.svg" class="icon-arrow-down-fill" mode="">
|
||||
</image>
|
||||
</view>
|
||||
</view>
|
||||
<view style="width: 164rpx;"></view>
|
||||
<view class="search-box">
|
||||
<view class="search-btn u-flex" @tap="showSearch" :style="{width:search.show?'694rpx':'164rpx'}">
|
||||
<image src="@/static/iconImg/icon-search.svg" class="input-icon" />
|
||||
<view class="u-flex-1 u-p-l-10">
|
||||
<input v-model="search.keyword" @confirm="searchConfirm" type="text"
|
||||
placeholder-style="font-size:28rpx;" placeholder="搜索" />
|
||||
</view>
|
||||
<view @tap.stop="hideSearch" v-if="search.show">取消</view>
|
||||
</view>
|
||||
</view>
|
||||
<view :style="{height:times.show?timesHeight:0}" class="tranistion status overflow-hide">
|
||||
<view @tap="changeTimesActive(index)" class="u-flex u-p-l-30 lh30 u-p-r-30 u-row-between"
|
||||
v-for="(item,index) in times.list" :key="index">
|
||||
<view>{{item}}</view>
|
||||
<uni-icons v-if="times.active===index" type="checkmarkempty" :color="color.ColorMain"></uni-icons>
|
||||
</view>
|
||||
<view :style="{height: status.bottomHeight+'px'}"></view>
|
||||
</view>
|
||||
<view :style="{height:status.show?statusHeight:0}" class="tranistion status overflow-hide">
|
||||
<view @tap="changestatusActive(index)" class="u-flex u-p-l-30 lh30 u-p-r-30 u-row-between"
|
||||
v-for="(item,index) in status.list" :key="index">
|
||||
<view>{{item.label}}</view>
|
||||
<uni-icons v-if="status.active===index" type="checkmarkempty" :color="color.ColorMain"></uni-icons>
|
||||
</view>
|
||||
<view :style="{height: status.bottomHeight+'px'}"></view>
|
||||
</view>
|
||||
|
||||
</view>
|
||||
|
||||
<view class="list u-p-30">
|
||||
<view class="my-bg-main table-type u-flex border-r-12 color-fff ">
|
||||
<view class="item u-p-20" :class="{sel:tables.area.sel===item.id}" @tap="changeAreaSel(item)"
|
||||
v-for="(item,index) in tables.area.list" :key="index">
|
||||
<view class="box">
|
||||
<view>{{item.name}}</view>
|
||||
<view class="u-m-t-10">0/12</view>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
|
||||
<view class="u-m-t-30 u-flex u-flex-wrap u-row-between">
|
||||
<view class="u-m-b-30" v-for="(item,index) in tables.list" :key="index">
|
||||
<table-item @update="getTable" :areaMap="areaMap" @more="moreShow(item)" :data="item"></table-item>
|
||||
</view>
|
||||
<my-img-empty v-if="tables.hasAjax&&!tables.list.length" tips="未找到相关桌台"></my-img-empty>
|
||||
</view>
|
||||
</view>
|
||||
|
||||
</view>
|
||||
<my-action-sheet :active="4" @itemClick="actionSheetClick" ref="refMoreSheet" :list="actionSheet.list"
|
||||
:title="actionSheet.title">
|
||||
<template #title>
|
||||
<view class="color-999 u-p-30 u-text-center border-bottom">桌号：{{actionSheet.title}}</view>
|
||||
</template>
|
||||
</my-action-sheet>
|
||||
<my-mask ref="mask" @close="hideType"></my-mask>
|
||||
<add-table ref="refTable" @update="tableUpdate"></add-table>
|
||||
</template>
|
||||
|
||||
<script setup>
|
||||
import {
|
||||
$status
|
||||
} from '@/commons/table-status.js'
|
||||
import {
|
||||
$table,
|
||||
$tableArea
|
||||
} from '@/http/yskApi/table.js'
|
||||
import {
|
||||
objToArrary
|
||||
} from '@/commons/utils/returrn-data.js'
|
||||
import {
|
||||
onLoad,
|
||||
onReady,
|
||||
onHide,
|
||||
onShow,
|
||||
onPageScroll,
|
||||
onPullDownRefresh
|
||||
} from '@dcloudio/uni-app';
|
||||
import color from '@/commons/color';
|
||||
import go from '@/commons/utils/go.js';
|
||||
import myMask from '@/components/my-components/my-mask'
|
||||
import addTable from './components/add-table'
|
||||
import myActionSheet from '@/components/my-components/my-action-sheet';
|
||||
import tableItem from './components/table-item'
|
||||
import * as $fun from './util.js'
|
||||
import {
|
||||
ref,
|
||||
reactive,
|
||||
computed,
|
||||
onBeforeUnmount,
|
||||
watch
|
||||
} from 'vue';
|
||||
import infoBox from '@/commons/utils/infoBox.js'
|
||||
import {hasPermission} from '@/commons/utils/hasPermission.js'
|
||||
const refMoreSheet = ref(null)
|
||||
const actionSheet = reactive({
|
||||
list: ['结账', '清台', '增减菜', '换台', '打印订单', '历史订单'],
|
||||
title: '',
|
||||
selTable: ''
|
||||
})
|
||||
|
||||
function moreShow(table) {
|
||||
actionSheet.title = table.name
|
||||
actionSheet.selTable = table
|
||||
refMoreSheet.value.open()
|
||||
}
|
||||
function toPay(item) {
|
||||
go.to('PAGES_ORDER_PAY', {
|
||||
tableId: item.tableId,
|
||||
tableName: item.name,
|
||||
masterId: item.masterId,
|
||||
orderId: item.orderId,
|
||||
discount: 1,
|
||||
userId:item.userId
|
||||
})
|
||||
}
|
||||
async function actionSheetClick(index) {
|
||||
console.log(index);
|
||||
const item = actionSheet.selTable
|
||||
//编辑
|
||||
// refTableShow()
|
||||
if (index == 0) {
|
||||
if (!item.orderId) {
|
||||
return infoBox.showToast('该桌台暂无要结账的订单！')
|
||||
}
|
||||
const canJieZhang=await hasPermission('允许收款')
|
||||
if(!canJieZhang){
|
||||
return
|
||||
}
|
||||
return toPay(item)
|
||||
}
|
||||
if (index == 1) {
|
||||
//清台
|
||||
return uni.showModal({
|
||||
title: '提示',
|
||||
content: '确定要清台：' + item.name + '？',
|
||||
success(res) {
|
||||
if (res.confirm) {
|
||||
$table.update({
|
||||
...item,
|
||||
status: "idle",
|
||||
qrcode: item.tableId,
|
||||
}).then(res => {
|
||||
infoBox.showToast('清台成功')
|
||||
tableUpdate()
|
||||
})
|
||||
}
|
||||
}
|
||||
})
|
||||
}
|
||||
if (index == 2) {
|
||||
return infoBox.showToast('待开放，请敬请期待！')
|
||||
}
|
||||
if (index == 3) {
|
||||
return infoBox.showToast('待开放，请敬请期待！')
|
||||
}
|
||||
if (index == 4) {
|
||||
//打印订单
|
||||
const res = await $fun.printOrder(actionSheet.selTable.tableId)
|
||||
return
|
||||
}
|
||||
infoBox.showToast('待开放，请敬请期待！')
|
||||
}
|
||||
|
||||
|
||||
const refTable = ref(null)
|
||||
|
||||
function refTableShow() {
|
||||
refTable.value.open(actionSheet.selTable)
|
||||
}
|
||||
|
||||
function refTableClose() {
|
||||
refTable.value.close()
|
||||
}
|
||||
|
||||
const search = reactive({
|
||||
keyword: '',
|
||||
show: false
|
||||
})
|
||||
|
||||
function searchConfirm() {
|
||||
hideSearch()
|
||||
filterTableList()
|
||||
// tables.list = tables.originList.filter((v) =>
|
||||
// v.name.includes(search.keyword.trim())
|
||||
// );
|
||||
}
|
||||
|
||||
function hideSearch() {
|
||||
search.show = false
|
||||
maskHide()
|
||||
}
|
||||
|
||||
function showSearch() {
|
||||
search.show = true
|
||||
status.show = false
|
||||
times.show = false
|
||||
maskShow()
|
||||
}
|
||||
|
||||
const page = reactive({
|
||||
list: [1, 2],
|
||||
status: 'noMore'
|
||||
})
|
||||
|
||||
|
||||
|
||||
function showsTimesToggle() {
|
||||
times.show = !times.show
|
||||
search.show = false
|
||||
status.show = false
|
||||
if (times.show) {
|
||||
maskShow()
|
||||
} else {
|
||||
maskHide()
|
||||
}
|
||||
}
|
||||
const times = reactive({
|
||||
list: [10, 15, 20, 30],
|
||||
active: 0,
|
||||
show: false,
|
||||
bottomHeight: 14
|
||||
})
|
||||
const timesHeight = computed(() => {
|
||||
return 30 * times.list.length + times.bottomHeight + 'px'
|
||||
})
|
||||
|
||||
function changeTimesActive(i) {
|
||||
times.active = i
|
||||
search.show = false
|
||||
times.show = false
|
||||
status.show = false
|
||||
maskHide()
|
||||
}
|
||||
|
||||
const statusList = objToArrary($status)
|
||||
statusList.unshift({
|
||||
key: 'all',
|
||||
label: '全部'
|
||||
})
|
||||
const status = reactive({
|
||||
list: statusList,
|
||||
active: 0,
|
||||
show: false,
|
||||
bottomHeight: 14
|
||||
})
|
||||
|
||||
function hideType() {
|
||||
status.show = false
|
||||
search.show = false
|
||||
times.show = false
|
||||
}
|
||||
|
||||
const statusHeight = computed(() => {
|
||||
return 30 * status.list.length + status.bottomHeight + 'px'
|
||||
})
|
||||
|
||||
|
||||
function changestatusActive(i) {
|
||||
status.active = i
|
||||
status.show = false
|
||||
toggleMask()
|
||||
}
|
||||
|
||||
function showstatusToggle() {
|
||||
status.show = !status.show
|
||||
search.show = false
|
||||
times.show = false
|
||||
if (status.show) {
|
||||
maskShow()
|
||||
} else {
|
||||
maskHide()
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
const filters = reactive({
|
||||
time: {
|
||||
start: '',
|
||||
end: ''
|
||||
}
|
||||
})
|
||||
|
||||
function clearTime() {
|
||||
filters.time.start = ''
|
||||
filters.time.end = ''
|
||||
}
|
||||
|
||||
const datePicker = ref(null)
|
||||
|
||||
function datePickerConfirm(e) {
|
||||
console.log(e);
|
||||
filters.time.start = e.start
|
||||
filters.time.end = e.end
|
||||
}
|
||||
|
||||
function timeToggle() {
|
||||
datePicker.value.toggle()
|
||||
}
|
||||
|
||||
|
||||
const mask = ref(null)
|
||||
|
||||
function toggleMask(show) {
|
||||
mask.value.toggle()
|
||||
}
|
||||
|
||||
function maskShow() {
|
||||
mask.value.open()
|
||||
}
|
||||
|
||||
function maskHide() {
|
||||
mask.value.close()
|
||||
}
|
||||
|
||||
const query = {
|
||||
page: 0,
|
||||
size: 10,
|
||||
areaId: 0
|
||||
}
|
||||
const tables = reactive({
|
||||
hasAjax: false,
|
||||
originList: [],
|
||||
list: [],
|
||||
area: {
|
||||
list: [],
|
||||
sel: ''
|
||||
}
|
||||
})
|
||||
|
||||
function changeAreaSel(item) {
|
||||
tables.area.sel = item.id
|
||||
query.areaId = item.id
|
||||
}
|
||||
async function getTable() {
|
||||
const {
|
||||
content
|
||||
} = await $table.get(query)
|
||||
tables.hasAjax = true
|
||||
tables.originList = content
|
||||
filterTableList()
|
||||
}
|
||||
const areaMap = ref({})
|
||||
async function getArea() {
|
||||
const {
|
||||
content
|
||||
} = await $tableArea.get({
|
||||
page: 0,
|
||||
size: 300
|
||||
})
|
||||
tables.area.list = content
|
||||
areaMap.value = content.reduce((prve, cur) => {
|
||||
prve[cur.id] = cur.name
|
||||
return prve
|
||||
}, {})
|
||||
}
|
||||
watch(() => tables.area.sel, (newval) => {
|
||||
console.log(newval);
|
||||
query.page = 0
|
||||
getTable()
|
||||
})
|
||||
watch(() => status.active, (newval) => {
|
||||
query.page = 0
|
||||
// if (newval === 0) {
|
||||
// return tables.list = tables.originList
|
||||
// }
|
||||
// tables.list = tables.originList.filter((v) => {
|
||||
// return v.status == status.list[status.active].key
|
||||
// });
|
||||
filterTableList()
|
||||
})
|
||||
|
||||
function filterTableList() {
|
||||
tables.list = tables.originList.filter((v) => {
|
||||
console.log(status.list[status.active].key);
|
||||
return (status.active == 0 ? true : v.status == status.list[status.active].key) && (
|
||||
v.name.includes(search.keyword.trim())
|
||||
)
|
||||
});
|
||||
}
|
||||
watch(() => times.active, (newval) => {
|
||||
setTimer()
|
||||
})
|
||||
|
||||
|
||||
function tableUpdate() {
|
||||
query.page = 0
|
||||
getTable()
|
||||
}
|
||||
let timer = null
|
||||
|
||||
function getData() {
|
||||
getTable()
|
||||
getArea()
|
||||
}
|
||||
|
||||
function setTimer() {
|
||||
clearInterval(timer)
|
||||
getData()
|
||||
timer = setInterval(() => {
|
||||
getData()
|
||||
}, times.list[times.active] * 1000)
|
||||
}
|
||||
watch(() => times.active, (newval) => {
|
||||
setTimer()
|
||||
})
|
||||
onBeforeUnmount(() => {
|
||||
console.log('table page onBeforeUnmount');
|
||||
clearInterval(timer)
|
||||
})
|
||||
onHide(() => {
|
||||
console.log('table page hide');
|
||||
clearInterval(timer)
|
||||
})
|
||||
onShow(opt => {
|
||||
setTimer()
|
||||
})
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
.fixed-top {
|
||||
z-index: 10;
|
||||
}
|
||||
|
||||
.table-type {
|
||||
flex-wrap: wrap;
|
||||
padding: 0 10rpx 0 10rpx;
|
||||
|
||||
.item {
|
||||
width: 25%;
|
||||
margin-bottom: 10rpx;
|
||||
|
||||
.box {
|
||||
position: relative;
|
||||
padding: 10rpx;
|
||||
border-radius: 10rpx;
|
||||
|
||||
&::after {
|
||||
position: absolute;
|
||||
display: block;
|
||||
content: '';
|
||||
top: 0;
|
||||
bottom: 0;
|
||||
width: 2px;
|
||||
border-radius: 2px;
|
||||
right: -20rpx;
|
||||
background-color: rgba(255, 255, 255, .5);
|
||||
}
|
||||
}
|
||||
|
||||
&:nth-of-type(4n) {
|
||||
.box::after {
|
||||
background-color: transparent;
|
||||
}
|
||||
}
|
||||
|
||||
&.sel {
|
||||
.box {
|
||||
background-color: rgba(255, 255, 255, .6);
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
.search-box {
|
||||
background-color: #fff;
|
||||
padding: 16rpx 0;
|
||||
top: 0;
|
||||
bottom: 0;
|
||||
position: absolute;
|
||||
right: 30rpx;
|
||||
display: flex;
|
||||
|
||||
.search-btn {
|
||||
padding: 0 30rpx;
|
||||
box-sizing: border-box;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
// width: 164rpx;
|
||||
transition: all .3s ease-in-out;
|
||||
background-color: rgb(247, 247, 247);
|
||||
border-radius: 100px;
|
||||
}
|
||||
}
|
||||
|
||||
.status {
|
||||
position: absolute;
|
||||
top: 100%;
|
||||
left: 0;
|
||||
right: 0;
|
||||
z-index: 10;
|
||||
background-color: #fff;
|
||||
}
|
||||
|
||||
|
||||
.icon-arrow-down-fill {
|
||||
width: 16rpx;
|
||||
height: 10rpx;
|
||||
}
|
||||
|
||||
.list {
|
||||
margin-top: 52px;
|
||||
}
|
||||
</style>
|
||||
31
pageTable/index/util.js
Normal file
31
pageTable/index/util.js
Normal file
@@ -0,0 +1,31 @@
|
||||
import * as Api from '@/http/yskApi/Instead.js'
|
||||
import go from '@/commons/utils/go.js'
|
||||
//打印订单
|
||||
export function printOrder(tableId) {
|
||||
return new Promise((resolve, reject) => {
|
||||
uni.showModal({
|
||||
title: '提示',
|
||||
content: '确定要打印订单吗？',
|
||||
success(res) {
|
||||
if (res.confirm) {
|
||||
Api.$printOrder({
|
||||
tableId
|
||||
}).then(res => {
|
||||
resolve(res)
|
||||
})
|
||||
}
|
||||
}
|
||||
})
|
||||
})
|
||||
|
||||
}
|
||||
//去支付页面
|
||||
export function toPay(options) {
|
||||
go.to('PAGES_CRESATE_ORDER_PAY', {
|
||||
tableId: options.tableId,
|
||||
tableName: options.name,
|
||||
masterId: options.masterId,
|
||||
orderId: orderDetail.info.id,
|
||||
discount: 1
|
||||
})
|
||||
}
|
||||
1
pageTable/static/images/icon-arrow-down-fill.svg
Normal file
1
pageTable/static/images/icon-arrow-down-fill.svg
Normal file
@@ -0,0 +1 @@
|
||||
<svg xmlns="http://www.w3.org/2000/svg" width="8.42" height="4.945" viewBox="0 0 8.42 4.945"><defs><style>.a{fill:#333;}</style></defs><path class="a" d="M230.634,368.187a.7.7,0,0,0-.513-.187l-7,.047a.7.7,0,0,0-.513.187.676.676,0,0,0,0,.979l3.5,3.5c.047.047.14.093.187.14l.047.047a.731.731,0,0,0,.746-.14l3.5-3.546A.735.735,0,0,0,230.634,368.187Z" transform="translate(-222.4 -368)"/></svg>
|
||||
|
After Width: | Height: | Size: 390 B |
Reference in New Issue
Block a user