源文件

pages/bind_table/bind_table.vue

@@ -0,0 +1,155 @@
+<template>
+	<view>
+		<view class="tab-header">
+			<view class="item" :class="{ active: active == 0 }" @click="tabChange(0)">全部</view>
+			<view class="item" :class="{ active: active == item.id }" v-for="item in tabs" :key="item.id" @click="tabChange(item.id)">
+				{{ item.name }}
+			</view>
+		</view>
+		<view class="list">
+			<view class="item" :class="{ active: item.qrcode }" v-for="item in list" :key="item.id" @click="bindCode(item)">
+				<text class="t1">{{ item.name }}</text>
+				<text class="t2">{{ item.qrcode ? `重新绑定` : '未绑定' }}</text>
+			</view>
+		</view>
+		<u-empty v-if="!list.length" text="空空如也~"></u-empty>
+	</view>
+</template>
+
+<script>
+import { getQueryString } from '@/utils/index.js';
+import { tableList, areaList, tableBinding } from '@/api/index.js';
+export default {
+	data() {
+		return {
+			active: 0,
+			tabs: [],
+			list: []
+		};
+	},
+	onLoad() {
+		this.areaList();
+		this.tableList();
+	},
+	methods: {
+		// 绑定
+		bindCode(item) {
+			uni.scanCode({
+				success: (res) => {
+					let tableCode = getQueryString(decodeURIComponent(res.result), 'code');
+					uni.showModal({
+						title: '注意',
+						content: `确定绑定该桌码吗？`,
+						success: async (res) => {
+							if (res.confirm) {
+								try {
+									uni.showLoading({
+										title: '桌码绑定中...',
+										mask: true
+									});
+									await tableBinding({
+										qrcode: tableCode,
+										id: item.id
+									});
+									uni.hideLoading();
+									uni.showModal({
+										title: '注意',
+										content: '桌码绑定成功',
+										showCancel: false
+									});
+									this.tableList();
+								} catch (e) {
+									uni.hideLoading();
+								}
+							}
+						}
+					});
+				}
+			});
+		},
+		// 切换
+		tabChange(id) {
+			this.active = id;
+			this.tableList();
+		},
+		// 获取区域列表
+		async areaList() {
+			try {
+				const { data } = await areaList();
+				this.tabs = data;
+			} catch (e) {
+				console.log(e);
+			}
+		},
+		// 新版获取店铺桌码信息
+		async tableList() {
+			try {
+				uni.showLoading({
+					title: '加载中...'
+				});
+				const res = await tableList(this.active);
+				this.list = res.data;
+				uni.hideLoading();
+			} catch (e) {
+				console.log(e);
+				uni.hideLoading();
+			}
+		}
+	}
+};
+</script>
+
+<style>
+page {
+	background-color: #fff;
+}
+</style>
+<style scoped lang="scss">
+$color: #19be6b;
+.tab-header {
+	display: flex;
+	padding: 0 14upx;
+	background-color: #fff;
+	height: 120upx;
+	.item {
+		height: inherit;
+		padding: 0 28upx;
+		display: flex;
+		align-items: center;
+		font-size: 32upx;
+		&.active {
+			color: $color;
+		}
+	}
+}
+.list {
+	display: grid;
+	grid-gap: 34upx;
+	background-color: #fff;
+	grid-template-columns: 1fr 1fr 1fr 1fr;
+	padding: 0 34upx 34upx;
+	.item {
+		height: 166upx;
+		display: flex;
+		flex-direction: column;
+		align-items: center;
+		justify-content: center;
+		background-color: #f7f7f7;
+		color: #999;
+		border-radius: 12upx;
+		&.active {
+			background-color: $color;
+			.t1,
+			.t2 {
+				color: #fff;
+			}
+		}
+		.t1 {
+			font-size: 24upx;
+		}
+		.t2 {
+			font-size: 24upx;
+		}
+	}
+}
+</style>