448 lines
9.2 KiB
Vue
448 lines
9.2 KiB
Vue
<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="/pageInvoicing/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="/pageInvoicing/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 @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 @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 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 {
|
|
ref,
|
|
reactive,
|
|
computed,
|
|
watch
|
|
} from 'vue';
|
|
const refMoreSheet = ref(null)
|
|
const actionSheet = reactive({
|
|
list: ['编辑', '历史订单'],
|
|
title: '',
|
|
selTable: ''
|
|
})
|
|
|
|
function moreShow(table) {
|
|
actionSheet.title = table.name
|
|
actionSheet.selTable = table
|
|
refMoreSheet.value.open()
|
|
}
|
|
|
|
function actionSheetClick(index) {
|
|
console.log(index);
|
|
if (index == 0) {
|
|
refTableShow()
|
|
}
|
|
}
|
|
|
|
|
|
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()
|
|
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.list = content
|
|
tables.originList = content
|
|
}
|
|
async function getArea() {
|
|
const {
|
|
content
|
|
} = await $tableArea.get({
|
|
page: 0,
|
|
size: 300
|
|
})
|
|
tables.area.list = content
|
|
}
|
|
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
|
|
});
|
|
})
|
|
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()
|
|
})
|
|
onHide(()=>{
|
|
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> |