czg_team
/
cashier_admin_app
7
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

修改台桌列表页面样式，增加清台功能

This commit is contained in:
YeMingfei666 2024-09-13 17:11:34 +08:00
parent 2aaf46e08b
commit 601606a6fd
2 changed files with 104 additions and 58 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

147
pageTable/index/components/table-item.vue
View File

@ -2,50 +2,60 @@
<view class="item color-fff border-r-12" :class="[data.status]" @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-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 class="u-flex gap-10">
<!-- <uni-tag text="计时" size="small" type="warning"></uni-tag> -->
<!-- <uni-tag text="可预约" size="small" type="primary"></uni-tag> -->
</view>
<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">
<template v-if="data.status=='idle'">
<view class="u-m-t-40 color-main u-font-32">{{returnStutasText(data.status)}}~</view>
<view class="u-flex gap-10 u-m-t-20">
<uni-tag :text="data.type == 0 ? '低消' : '计时'" size="small" type="warning"></uni-tag>
<uni-tag :text="data.isPredate == 1 ? '可预约' : '不可预约'" size="small" type="primary"></uni-tag>
</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="u-m-t-40 w-full u-p-l-20 u-p-r-20 u-m-b-40">
<template v-if="data.status=='idle'">
<view class="u-flex u-row-center">
<my-button type="default" @click="diancan" :disabled="!data.tableId">
<view class=" u-p-l-30 u-p-r-30" :class="{'color-333':data.tableId}">点餐</view>
</my-button>
<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'">
<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="color-666 u-text-left u-p-b-20 border-bottom">
<view class=""><text>已点</text><text class="u-m-l-20 color-333">{{goodsNumber}}件</text> </view>
<view class="u-m-t-10"><text>金额</text><text class="u-m-l-20 color-333">{{allPrice}} 元</text> </view>
<view class="u-m-t-10"><text>待结</text><text class="u-m-l-20 color-333">{{allPrice}} 元</text> </view>
</view>
<view class="u-text-right u-p-20 color-666">
0人扫码
<view class="u-flex u-row-center u-m-t-16">
<template v-if="data.tableId">
<template v-if="data.status=='idle' ">
<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>
@ -58,8 +68,16 @@
import {
$status
} from '@/commons/table-status.js'
import { computed, onMounted, ref } from 'vue';
import {
computed,
onMounted,
ref
} from 'vue';
import {
$table
} from '@/http/yskApi/table.js'
const status = $status
const emits = defineEmits(['more','update'])
function returnStutasText(key) {
const item = status[key]
@ -81,40 +99,28 @@
default: () => {
return {}
}
},
areaMap: {
type: Object,
default: () => {}
}
})
const goodsList=ref([])
const goodsList = ref([])
const allPrice = computed(() => {
return goodsList.value.reduce((prve,cur)=>{
return prve+cur.salePrice*cur.number
},0).toFixed(2)
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
return result
})
async function init(){
if(props.data.tableId){
const {masterId}=await Api.$getMasterId({
tableId:props.data.tableId
})
const {records} = await Api.getCart({
tableId:props.data.tableId,
masterId
})
goodsList.value=records
}
}
onMounted(()=>{
init()
})
const emits = defineEmits(['more'])
onMounted(() => {})
function more() {
emits('more')
@ -128,13 +134,42 @@
}
function toOrderDetail() {
if(props.data.status=='using'){
const {tableId,name,status,amount,areaId}=props.data
if (props.data.status == 'using') {
const {
tableId,
name,
status,
amount,
areaId
} = props.data
go.to('PAGES_CRESATE_ORDER_DETAIL', {
tableId,name,status,amount,areaId
tableId,
name,
status,
amount,
areaId
})
}
}
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=>{
emits('update')
})
}
}
})
}
</script>
<style lang="scss" scoped>
@ -149,6 +184,10 @@
box-shadow: 1px 1px 0 #eee;
border-color: #eee;
.bottom {
min-height: 224rpx;
}
.my-bg-main {
padding: 32rpx 28rpx;

15
pageTable/index/index.vue
View File

@ -23,7 +23,8 @@
<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>
placeholder-style="font-size:28rpx;" placeholder="搜索" />
</view>
<view @tap.stop="hideSearch" v-if="search.show">取消</view>
</view>
</view>
@ -59,7 +60,7 @@
<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>
<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>
@ -303,6 +304,7 @@
tables.list = content
tables.originList = content
}
const areaMap = ref({})
async function getArea() {
const {
content
@ -311,6 +313,11 @@
size: 300
})
tables.area.list = content
areaMap.value = content.reduce((prve, cur) => {
prve[cur.id] = cur.name
return prve
}, {})
console.log(areaMap);
}
watch(() => tables.area.sel, (newval) => {
console.log(newval);
@ -329,7 +336,7 @@
watch(() => times.active, (newval) => {
setTimer()
})
function tableUpdate() {
query.page = 0
@ -352,7 +359,7 @@
watch(() => times.active, (newval) => {
setTimer()
})
onHide(()=>{
onHide(() => {
clearInterval(timer)
})
onShow(opt => {