156 lines
3.1 KiB
Vue
156 lines
3.1 KiB
Vue
<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 '@/commons/utils/getQueryString.js';
|
|
import { tableList, areaList, tableBinding } from '@/http/businessApiManger.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>
|