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

pageTable/index/components/table-item.vue

@@ -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">
+				<view>{{areaMap[data.areaId]||'' }}</view>
-					<!-- <uni-tag  text="计时" size="small" type="warning"></uni-tag> -->
-					<!-- <uni-tag text="可预约" size="small" type="primary"></uni-tag> -->
-				</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">
+		<view class="u-flex u-flex-col u-row-center u-col-center bg-fff bottom">
-			<template v-if="data.status=='idle'">
+			<template v-if="data.status!='using'">
-				<view class="u-m-t-40 color-main u-font-32">{{returnStutasText(data.status)}}~</view>
+				<view class="  u-font-32" :style="{color:returnStutasColor(data.status)}">
-				<view class="u-flex gap-10 u-m-t-20">
+					{{returnStutasText(data.status)}}~</view>
-					<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>
 			</template>
-			<view class="u-m-t-40 w-full u-p-l-20 u-p-r-20 u-m-b-40">
+			<view class=" w-full u-p-l-16 u-p-r-16 u-p-t-16 u-font-24">
-				<template v-if="data.status=='idle'">
+				<template v-if="data.status=='using'">
-					<view class="u-flex u-row-center">
+					<view class="color-666 u-text-left u-p-b-20 border-bottom">
-						<my-button type="default" @click="diancan" :disabled="!data.tableId">
+						<view class=""><text>已点</text><text class="u-m-l-20 color-333">{{data.productNum||0}}件</text>
-							<view class=" u-p-l-30 u-p-r-30" :class="{'color-333':data.tableId}">点餐</view>
+						</view>
-						</my-button>
+						<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="u-flex u-row-center u-m-t-16">
-						<view class=""><text>已点</text><text class="u-m-l-20 color-333">{{goodsNumber}}件</text> </view>
+						<template v-if="data.tableId">
-						<view class="u-m-t-10"><text>金额</text><text class="u-m-l-20 color-333">{{allPrice}} 元</text> </view>
+							<template v-if="data.status=='idle' ">
-						<view class="u-m-t-10"><text>待结</text><text class="u-m-l-20 color-333">{{allPrice}} 元</text> </view>
+								<my-button color="#333" :width="150" :height="56" type="default" @click="diancan">
-					</view>
+									选择
-					<view class="u-text-right u-p-20 color-666">
+								</my-button>
-						0人扫码
+							</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,13 +99,17 @@
 			default: () => {
 				return {}
 			}
+		},
+		areaMap: {
+			type: Object,
+			default: () => {}
 		}
 	})
-	const goodsList=ref([])
+	const goodsList = ref([])
 	const allPrice = computed(() => {
-		return goodsList.value.reduce((prve,cur)=>{
+		return goodsList.value.reduce((prve, cur) => {
-			return prve+cur.salePrice*cur.number
+			return prve + cur.salePrice * cur.number
-		},0).toFixed(2)
+		}, 0).toFixed(2)
 	})
 
 	const goodsNumber = computed(() => {
@@ -98,23 +120,7 @@
 		return result
 	})
 
-	async function init(){
+	onMounted(() => {})
-		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'])
 
 	function more() {
 		emits('more')
@@ -128,13 +134,42 @@
 	}
 
 	function toOrderDetail() {
-		if(props.data.status=='using'){
+		if (props.data.status == 'using') {
-			const {tableId,name,status,amount,areaId}=props.data
+			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;
 

pageTable/index/index.vue

@@ -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);
@@ -352,7 +359,7 @@
 	watch(() => times.active, (newval) => {
 		setTimer()
 	})
-	onHide(()=>{
+	onHide(() => {
 		clearInterval(timer)
 	})
 	onShow(opt => {