You can not select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
287 lines
9.3 KiB
287 lines
9.3 KiB
<template>
|
|
<view class="site-people">
|
|
<stadium-select
|
|
ref="stadiumSelect"
|
|
@change:stadium="stadiumChange"
|
|
></stadium-select>
|
|
<methods-bar
|
|
:type="igsType"
|
|
></methods-bar>
|
|
|
|
<classify-tab
|
|
v-if="[1, 2].includes(igsType)&&tabLs.length"
|
|
:tabs="tabLs"
|
|
@click:tab="tabLs = $event"
|
|
></classify-tab>
|
|
|
|
<number-show :num="siteNum"></number-show>
|
|
|
|
<view class="sp-modify" @click="modifyBtn">修改人数</view>
|
|
<view class="sp-check" @click="checkNotLeaveBtn">查看未离场订单</view>
|
|
|
|
<auto-clean
|
|
:auto-clean="siteInfo.present_person_number_clear"
|
|
@switch:change="switchAutoClean"
|
|
></auto-clean>
|
|
|
|
<modify-number ref="modifyNum"></modify-number>
|
|
<not-leave-modal ref="notLeaveModal"></not-leave-modal>
|
|
</view>
|
|
</template>
|
|
|
|
<script>
|
|
import stadium_select from "./modules/stadium_select.vue";
|
|
import auto_clean from "./modules/auto_clean.vue";
|
|
import methods_bar from "./modules/methods_bar.vue";
|
|
import classify_tab from "./modules/classify_tab.vue";
|
|
import number_show from "./modules/number_show.vue";
|
|
import modify_number from "./modules/modify_number.vue";
|
|
import not_leave_modal from './modules/not_leave_modal.vue';
|
|
import API from "../../js/api.js";
|
|
import server from "../../js/server.js";
|
|
import { showLoad, hideLoad, showNone } from "@/utils/util.js";
|
|
export default {
|
|
components: {
|
|
'stadium-select': stadium_select,
|
|
'auto-clean': auto_clean,
|
|
'methods-bar': methods_bar,
|
|
'classify-tab': classify_tab,
|
|
'number-show': number_show,
|
|
'modify-number': modify_number,
|
|
'not-leave-modal': not_leave_modal
|
|
},
|
|
computed: {
|
|
igsType(){
|
|
// 0时用，对应门店人数/ 1时用，对应门禁人数/ 2时用，对应场地分类人数
|
|
return this.siteInfo?.igs_type || 0;
|
|
},
|
|
// 现场人数
|
|
siteNum(){
|
|
let { igsType, siteInfo, tabLs } = this;
|
|
if(igsType === 0) return siteInfo?.stadium_num || 0;
|
|
if([1,2].includes(igsType)){
|
|
let _tab = tabLs.find(e=>e.selected);
|
|
return _tab?.number || 0;
|
|
};
|
|
return 0
|
|
}
|
|
},
|
|
data(){
|
|
return {
|
|
stadiumInfo: {},
|
|
siteInfo: {},
|
|
tabLs: [
|
|
// { [label], [key], [number], [selected] }
|
|
],
|
|
intervalTimer: null
|
|
}
|
|
},
|
|
async onLoad(options){
|
|
this.$refs.stadiumSelect.initStadium({
|
|
brand_id: options?.brand_id ?? '',
|
|
stadium_id: options?.stadium_id ?? '',
|
|
})
|
|
.then(stadiumInfo=>{
|
|
if(!stadiumInfo?.id) return;
|
|
this.stadiumInfo = stadiumInfo;
|
|
this.initData({
|
|
brand_id: options?.brand_id || '',
|
|
stadium_id: stadiumInfo?.id || ''
|
|
})
|
|
})
|
|
},
|
|
onShow(){
|
|
this.setTimer();
|
|
},
|
|
onHide(){
|
|
this.clearTimer(this.intervalTimer);
|
|
},
|
|
onUnload(){
|
|
this.clearTimer(this.intervalTimer);
|
|
},
|
|
methods: {
|
|
setTimer(){
|
|
this.intervalTimer = setInterval(()=>{
|
|
let { brand_id, id } = this.stadiumInfo;
|
|
if(!brand_id || !id) return;
|
|
this.refreshData({ brand_id, stadium_id: id });
|
|
}, 5000)
|
|
},
|
|
clearTimer(timer){
|
|
try{
|
|
clearInterval(timer);
|
|
timer = null;
|
|
}catch(err){
|
|
}
|
|
},
|
|
stadiumChange(sInfo){
|
|
if(!sInfo?.id) return;
|
|
this.stadiumInfo = sInfo;
|
|
this.initData({
|
|
brand_id: sInfo?.brand_id || '',
|
|
stadium_id: sInfo?.id || ''
|
|
})
|
|
},
|
|
async initData({ brand_id, stadium_id }){
|
|
try{
|
|
showLoad();
|
|
let _skInfo = await this.getSkNumber({ brand_id, stadium_id });
|
|
hideLoad();
|
|
this.resetData(_skInfo);
|
|
}catch(err){
|
|
console.warn('site people index initData err', err);
|
|
}
|
|
},
|
|
// 重置页面数据
|
|
resetData(res){
|
|
this.siteInfo = res || {};
|
|
this.tabLs = [];
|
|
if([1,2].includes(res?.igs_type)){
|
|
let _tabLs = this.getTabList(res);
|
|
_tabLs[0].selected = true;
|
|
this.tabLs = _tabLs;
|
|
}
|
|
},
|
|
async refreshData({ brand_id, stadium_id }){
|
|
let { siteInfo, tabLs } = this;
|
|
let _skInfo = await this.getSkNumber({ brand_id, stadium_id });
|
|
if(_skInfo?.igs_type === siteInfo?.igs_type){
|
|
if(_skInfo?.igs_type === 0)return this.siteInfo = _skInfo;
|
|
let _tabLs = this.getTabList(_skInfo);
|
|
let _selectedTab = tabLs.find(e=>e.selected);
|
|
let _newTabIdx = _tabLs.findIndex(e=>e.key === _selectedTab?.key);
|
|
if(_newTabIdx > -1){
|
|
_tabLs[_newTabIdx].selected = true;
|
|
this.tabLs = _tabLs;
|
|
this.siteInfo = _skInfo;
|
|
}else{
|
|
this.resetData(_skInfo);
|
|
}
|
|
}else{
|
|
this.resetData(_skInfo);
|
|
}
|
|
this.$forceUpdate();
|
|
|
|
},
|
|
getSkNumber({ brand_id, stadium_id }){
|
|
return server.post({
|
|
url: API.skNumber,
|
|
data: {
|
|
brand_id,
|
|
stadium_id,
|
|
},
|
|
failMsg: '加载现场人数信息失败！'
|
|
})
|
|
.then(res=>{
|
|
// if(stadium_id === 156){
|
|
// res.igs_type = 1;
|
|
// res.hw_num = [
|
|
// { gate_id: 1, gate_name: 'A门', number: 10 },
|
|
// { gate_id: 2, gate_name: 'B门', number: 20 },
|
|
// { gate_id: 3, gate_name: 'C门', number: 30 },
|
|
// ]
|
|
// }
|
|
// if(stadium_id === 151){
|
|
// res.igs_type = 2;
|
|
// res.vt_num = [
|
|
// { venue_type_key: 1, venue_type_name: '羽毛球', number: 101 },
|
|
// { venue_type_key: 2, venue_type_name: '篮球', number: 210 },
|
|
// { venue_type_key: 3, venue_type_name: '乒乓球', number: 310 },
|
|
// ]
|
|
// }
|
|
return res || {};
|
|
})
|
|
.catch(err=>{
|
|
console.warn('site people index getSkNumber', err);
|
|
})
|
|
},
|
|
getTabList(res){
|
|
let _ls = [];
|
|
if(res?.igs_type === 1){ // 门禁
|
|
res?.hw_num?.forEach(e=>{
|
|
if(e?.gate_id)_ls.push({
|
|
label: e?.gate_name || '',
|
|
key: e?.gate_id,
|
|
number: e?.number || 0
|
|
})
|
|
})
|
|
}
|
|
if(res?.igs_type === 2){ // 场地分类
|
|
res?.vt_num?.forEach(e=>{
|
|
if(e?.venue_type_key)_ls.push({
|
|
label: e?.venue_type_name || '',
|
|
key: e?.venue_type_key,
|
|
number: e?.number || 0
|
|
})
|
|
})
|
|
}
|
|
return _ls;
|
|
},
|
|
modifyBtn(){
|
|
let { siteNum, stadiumInfo, tabLs, igsType } = this;
|
|
let { brand_id, id } = stadiumInfo;
|
|
this.$refs.modifyNum.initData({
|
|
num: siteNum,
|
|
brand_id,
|
|
stadium_id: id,
|
|
igsType,
|
|
key: tabLs.find(e=>e.selected)?.key,
|
|
success: ()=>{
|
|
this.refreshData({ brand_id, stadium_id: id });
|
|
}
|
|
});
|
|
},
|
|
// 自动清零状态切换
|
|
switchAutoClean(status){
|
|
let { brand_id, id } = this.stadiumInfo;
|
|
server.get({
|
|
url: API.timingOpen,
|
|
data: {
|
|
brand_id: brand_id,
|
|
stadium_id: id,
|
|
status: status
|
|
},
|
|
failMsg: '操作失败！'
|
|
})
|
|
.then(res=>{
|
|
hideLoad();
|
|
showNone('操作成功！');
|
|
setTimeout(_=>{
|
|
this.refreshData({ brand_id, stadium_id: id });
|
|
}, 1000)
|
|
})
|
|
},
|
|
checkNotLeaveBtn(){
|
|
let { tabLs, stadiumInfo, igsType } = this;
|
|
let { brand_id, id } = stadiumInfo;
|
|
this.$refs.notLeaveModal.initData({
|
|
brand_id,
|
|
stadium_id: id,
|
|
igsType,
|
|
key: tabLs.find(e=>e.selected)?.key
|
|
});
|
|
},
|
|
}
|
|
}
|
|
</script>
|
|
|
|
<style lang="scss">
|
|
page{
|
|
background: #fff;
|
|
}
|
|
.sp-modify{
|
|
margin: 40upx auto 0;
|
|
width: 618upx;
|
|
text-align: center;
|
|
border-radius: 10upx;
|
|
background: $mColor;
|
|
@include flcw(32upx, 88upx, #fff);
|
|
}
|
|
.sp-check{
|
|
margin-top: 24upx;
|
|
margin-bottom: 60upx;
|
|
text-decoration: underline;
|
|
text-align: center;
|
|
@include flcw(24upx, 34upx, $mColor);
|
|
}
|
|
</style>
|