517 lines
11 KiB
Vue
517 lines
11 KiB
Vue
<template>
|
||
<view class="color-333 u-font-28 min-page bg-gray ">
|
||
|
||
<up-sticky>
|
||
<view class="bg-fff u-p-l-30 u-p-b-30 u-relative">
|
||
|
||
<view class="input-wrapper">
|
||
<view class="input-main">
|
||
<view class="u-flex u-p-r-30 u-font-28" @click="showstatusToggle">
|
||
<text class="u-m-r-10 u-line-1" :class="{'color-main':status.active!=0}"
|
||
style="max-width: 100rpx;">{{status.list[status.active].label }}</text>
|
||
<up-icon name="arrow-down" size="16"></up-icon>
|
||
</view>
|
||
<uni-easyinput clearable class='jeepay-search' :inputBorder="false"
|
||
trim="all"
|
||
placeholder="搜索" v-model="search.keyword"
|
||
@clear="searchConfirm"
|
||
@confirm="searchConfirm">
|
||
<template #prefixIcon>
|
||
<image src="@/static/iconImg/icon-search.svg" class="input-icon" />
|
||
</template>
|
||
</uni-easyinput>
|
||
<view class="u-m-l-4">
|
||
<button class="" type="text" @click="searchConfirm"> <text class="color-333">搜索</text></button>
|
||
</view>
|
||
</view>
|
||
</view>
|
||
<view :style="{height:status.show?statusHeight:0}" class="tranistion status overflow-hide">
|
||
<view @tap="changestatusActive(index,item)" 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>
|
||
</up-sticky>
|
||
|
||
|
||
|
||
|
||
<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:pageData.area.sel===item.id}" @tap="changeAreaSel(item)"
|
||
v-for="(item,index) in pageData.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 ">
|
||
<template v-if="pageData.tabList.length">
|
||
<view class="u-flex u-flex-wrap u-row-between">
|
||
<view class="u-m-b-30" v-for="(item,index) in pageData.tabList" :key="index">
|
||
<table-item @bind="scanCode" @update="getTable" :areaMap="pageData.areaMap" @more="moreShow(item)" :data="item"></table-item>
|
||
</view>
|
||
</view>
|
||
<my-pagination :page="pageData.query.page" :totalElements="pageData.query.totalElements" :size="pageData.query.size"
|
||
@change="pageChange"></my-pagination>
|
||
</template>
|
||
|
||
<my-img-empty v-if="pageData.hasAjax&&!pageData.tabList.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>
|
||
</template>
|
||
|
||
<script setup>
|
||
import { onLoad, onReady, onShow, } from '@dcloudio/uni-app';
|
||
import { ref, reactive, computed, watch } from 'vue';
|
||
import {
|
||
$table,
|
||
$tableArea,
|
||
$bind
|
||
} from '@/http/yskApi/table.js'
|
||
import { objToArrary } from '@/commons/utils/returrn-data.js'
|
||
import { $status } from '@/commons/table-status.js'
|
||
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 infoBox from '@/commons/utils/infoBox.js'
|
||
import { hasPermission } from '@/commons/utils/hasPermission.js'
|
||
import { getShopTable, shopTableBind } from '@/api/table.js'
|
||
import { getShopArea } from '@/api/area.js'
|
||
|
||
const statusList = objToArrary($status)
|
||
console.log(statusList)
|
||
statusList.unshift({
|
||
key: '',
|
||
label: '全部'
|
||
})
|
||
const status = reactive({
|
||
list: statusList,
|
||
active: 0,
|
||
show: false,
|
||
bottomHeight: 14
|
||
})
|
||
|
||
const pageData = reactive({
|
||
hasAjax: false,
|
||
areaMap: {},
|
||
query: {
|
||
page: 1,
|
||
size: 10,
|
||
status: '',
|
||
areaId: '',
|
||
totalElements:0
|
||
},
|
||
tabList: [],
|
||
area: {
|
||
list: [],
|
||
sel: ''
|
||
}
|
||
})
|
||
const search = reactive({
|
||
keyword: '',
|
||
show: false
|
||
})
|
||
const refMoreSheet = ref(null)
|
||
const actionSheet = reactive({
|
||
list: ['结账', '清台', '增减菜', '换台', '打印订单', '历史订单','绑定码牌'],
|
||
title: '',
|
||
selTable: ''
|
||
})
|
||
|
||
const statusHeight = computed(() => {
|
||
return 30 * status.list.length + status.bottomHeight + 'px'
|
||
})
|
||
|
||
watch(() => pageData.area.sel, (newval) => {
|
||
pageData.query.page = 1
|
||
getTable()
|
||
})
|
||
watch(() => status.active, (newval) => {
|
||
pageData.query.page = 1
|
||
getTable()
|
||
})
|
||
|
||
onShow(opt => {
|
||
getData()
|
||
})
|
||
function getData() {
|
||
getTable()
|
||
getArea()
|
||
}
|
||
|
||
/**
|
||
* 获取桌台列表
|
||
*/
|
||
async function getTable() {
|
||
const res = await getShopTable(pageData.query)
|
||
pageData.hasAjax = true
|
||
pageData.tabList = res.records
|
||
pageData.query.totalElements= res.totalRow
|
||
}
|
||
|
||
/**
|
||
* 获取区域
|
||
*/
|
||
async function getArea() {
|
||
const res = await getShopArea({ name: '', page: 0, size: 300 })
|
||
pageData.area.list = res.records
|
||
pageData.areaMap = res.records.reduce((prve, cur) => {
|
||
prve[cur.id] = cur.name
|
||
return prve
|
||
}, {})
|
||
}
|
||
|
||
/**
|
||
* 区域选择确定
|
||
* @param {Object} item
|
||
*/
|
||
function changeAreaSel(item) {
|
||
pageData.area.sel = item.id
|
||
pageData.query.areaId = item.id
|
||
}
|
||
|
||
/**
|
||
* 更多操作打开
|
||
* @param {Object} table
|
||
*/
|
||
function moreShow(table) {
|
||
actionSheet.title = table.name
|
||
actionSheet.selTable = table
|
||
refMoreSheet.value.open()
|
||
}
|
||
|
||
/**
|
||
* 更多操作选择
|
||
* @param {Object} index
|
||
*/
|
||
async function actionSheetClick(index) {
|
||
console.log(index);
|
||
const item = actionSheet.selTable
|
||
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('清台成功')
|
||
pageData.query.page = 1
|
||
getTable()
|
||
})
|
||
}
|
||
}
|
||
})
|
||
}
|
||
if (index == 2) {
|
||
return infoBox.showToast('待开放，请敬请期待！')
|
||
}
|
||
if (index == 3) {
|
||
return infoBox.showToast('待开放，请敬请期待！')
|
||
}
|
||
if (index == 4) {
|
||
//打印订单
|
||
const res = await $fun.printOrder(actionSheet.selTable.tableId)
|
||
return
|
||
}
|
||
if (index == 6) {
|
||
//绑定码牌
|
||
scanCode(item)
|
||
return
|
||
}
|
||
infoBox.showToast('待开放，请敬请期待！')
|
||
}
|
||
|
||
/**
|
||
* 去结账
|
||
* @param {Object} item
|
||
*/
|
||
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
|
||
})
|
||
}
|
||
|
||
/**
|
||
* 绑定码牌
|
||
* @param {Object} item
|
||
*/
|
||
function scanCode(item) {
|
||
console.log(item)
|
||
if ( item.tableCode != '') {
|
||
infoBox.showToast('当前桌台已绑定')
|
||
return;
|
||
}
|
||
uni.scanCode({
|
||
onlyFromCamera: true,
|
||
success: function(res) {
|
||
console.log('条码类型：' + res.scanType);
|
||
console.log('条码内容：' + res.result);
|
||
let params = getQueryString(res.result);
|
||
shopTableBind({
|
||
"tableCode": params.code,
|
||
"id": item.id,
|
||
}).then(res => {
|
||
getTable()
|
||
})
|
||
}
|
||
});
|
||
}
|
||
|
||
/**
|
||
* 解码
|
||
* @param {Object} url
|
||
*/
|
||
function getQueryString(url) {
|
||
let params = {};
|
||
// 正则表达式来匹配URL中的查询字符串
|
||
let reg = /(?:\?|#|&){1}([^=]*)=([^&]*)/g;
|
||
url.replace(reg, (match, key, value) => {
|
||
params[key] = value;
|
||
});
|
||
return params;
|
||
|
||
}
|
||
|
||
/**
|
||
* 搜索
|
||
*/
|
||
function searchConfirm() {
|
||
search.show = false
|
||
pageData.query.page = 1;
|
||
maskHide()
|
||
getTable()
|
||
}
|
||
|
||
const times = reactive({
|
||
list: [10, 15, 20, 30],
|
||
active: 0,
|
||
show: false,
|
||
bottomHeight: 14
|
||
})
|
||
|
||
function hideType() {
|
||
status.show = false
|
||
search.show = false
|
||
times.show = false
|
||
}
|
||
|
||
/**
|
||
* 打开类型
|
||
*/
|
||
function showstatusToggle() {
|
||
status.show = !status.show
|
||
search.show = false
|
||
times.show = false
|
||
if (status.show) {
|
||
maskShow()
|
||
} else {
|
||
maskHide()
|
||
}
|
||
}
|
||
|
||
/**
|
||
* 类型选择
|
||
* @param {Object} i
|
||
*/
|
||
function changestatusActive(i) {
|
||
status.active = i
|
||
status.show = false
|
||
pageData.query.status = status.list[i].key
|
||
mask.value.toggle()
|
||
}
|
||
|
||
const mask = ref(null)
|
||
|
||
function maskShow() {
|
||
mask.value.open()
|
||
}
|
||
|
||
function maskHide() {
|
||
mask.value.close()
|
||
}
|
||
|
||
// 页数改变事件
|
||
function pageChange(page) {
|
||
pageData.query.page = page
|
||
getTable()
|
||
}
|
||
|
||
|
||
</script>
|
||
|
||
<style lang="scss" scoped>
|
||
.fixed-top {
|
||
z-index: 10;
|
||
}
|
||
.input-wrapper {
|
||
display: flex;
|
||
justify-content: space-between;
|
||
align-items: center;
|
||
padding-top: 26rpx;
|
||
background-color: $J-bg-ff;
|
||
|
||
.input-main {
|
||
flex: 1;
|
||
display: flex;
|
||
align-items: center;
|
||
height: 64rpx;
|
||
|
||
image {
|
||
padding: 22rpx;
|
||
width: 26rpx;
|
||
height: 26rpx;
|
||
}
|
||
|
||
input {
|
||
flex: 1;
|
||
font-size: 27rpx;
|
||
}
|
||
|
||
::v-deep uni-button {
|
||
font-size: 28rpx;
|
||
color: $my-main-color;
|
||
background: rgba(255, 255, 255, 1);
|
||
}
|
||
|
||
::v-deep.uni-easyinput {
|
||
.uni-easyinput__content {
|
||
background-color: $J-bg-f5 !important;
|
||
border-radius: $J-b-r12;
|
||
|
||
.uni-easyinput__content-input {
|
||
padding-left: 0 !important;
|
||
|
||
.uni-input-input {
|
||
border-radius: $J-b-r12 !important;
|
||
overflow: hidden !important;
|
||
}
|
||
}
|
||
|
||
.uni-input-placeholder {
|
||
font-size: 27rpx;
|
||
}
|
||
|
||
.uni-icons {
|
||
color: rgba(230, 230, 230, 1) !important;
|
||
}
|
||
}
|
||
}
|
||
}
|
||
}
|
||
|
||
.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;
|
||
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> |