更新代客下单无台桌下单，更新台桌列表

pageTable/index/index.vue

@@ -54,11 +54,18 @@
 					</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 @bind="unBind" @update="getTable" :areaMap="areaMap" @more="moreShow(item)" :data="item"></table-item>
-				</view>
+			
+			<view class="u-m-t-30 ">
+				<template v-if="tables.list.length">
+					<view class="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 @bind="unBind" @update="getTable" :areaMap="areaMap" @more="moreShow(item)" :data="item"></table-item>
+						</view>
+					</view>
+						<my-pagination :page="query.page" :totalElements="query.totalElements" :size="query.size"
+							@change="pageChange"></my-pagination>
+				</template>
+				
 				<my-img-empty v-if="tables.hasAjax&&!tables.list.length" tips="未找到相关桌台"></my-img-empty>
 			</view>
 		</view>
@@ -372,10 +379,17 @@
 		mask.value.close()
 	}
 
-	const query = {
-		page: 0,
+	const query = reactive({
+		page: 1,
 		size: 10,
-		areaId: 0
+		areaId: 0,
+		totalElements:0
+	})
+	// 页数改变事件
+	function pageChange(page) {
+		console.log(page);
+		query.page = page
+		getTable()
 	}
 	const tables = reactive({
 		hasAjax: false,
@@ -393,9 +407,10 @@
 	}
 	async function getTable() {
 		const {
-			content
+			content,total
 		} = await $table.get(query)
 		tables.hasAjax = true
+		query.totalElements=total||0
 		tables.originList = content
 		filterTableList()
 	}
@@ -415,11 +430,11 @@
 	}
 	watch(() => tables.area.sel, (newval) => {
 		console.log(newval);
-		query.page = 0
+		query.page = 1
 		getTable()
 	})
 	watch(() => status.active, (newval) => {
-		query.page = 0
+		query.page = 1
 		// if (newval === 0) {
 		// 	return tables.list = tables.originList
 		// }