add md240529 site people api

src/subpackage/verification/js/api.js

@@ -0,0 +1,12 @@
+import { ORIGIN } from '@/js/api';
+
+export const SUB_API = { 
+    stadiumList: `${ORIGIN}/admin/stadium/list`,  //  店铺列表
+    skNumber: `${ORIGIN}/stadium/sk/number`,  //  散客人数 - 进场人数
+    skNotLeavingNums: `${ORIGIN}/stadium/sk/notLeavingNums`,  //  【1001536】散客人数 - 未离场订单数量
+    setStadiumPresentNumber: `${ORIGIN}/admin/stadium/setStadiumPresentNumber`,  // 商家助手散客人数校正
+    timingOpen: `${ORIGIN}/stadium/person/timing/open`,  // 【20220208】凌晨自动清零【开/关】
+
+}
+
+export default SUB_API;

src/subpackage/verification/js/server.js

@@ -0,0 +1,10 @@
+import { Server } from '../../../js/server';
+
+class SubServer extends Server {
+    constructor(props){
+        super(props)
+    }
+}
+
+
+export default new SubServer();

src/subpackage/verification/pages/site_people/index.vue

@@ -1,8 +1,28 @@
 <template>
     <view class="site-people">
-        <stadium-select></stadium-select>
-        <methods-bar></methods-bar>
+        <stadium-select 
+            ref="stadiumSelect"
+            @change:stadium="stadiumChange"
+        ></stadium-select>
+        <methods-bar
+
+        ></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>
+
+        <modify-number ref="modifyNum"></modify-number>
+        <not-leave-modal ref="notLeaveModal"></not-leave-modal>
     </view>
 </template>
 
@@ -10,11 +30,148 @@
 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
+        '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] }
+            ]
+        }
+    },
+    async onLoad(options){
+        this.$refs.stadiumSelect.initStadium(options?.brand_id || '')
+        .then(stadiumInfo=>{
+            console.log('stadiumInfo', stadiumInfo);
+            if(!stadiumInfo?.id) return;
+            this.stadiumInfo = stadiumInfo;
+            this.initData({
+                brand_id: options?.brand_id || '',
+                stadium_id: stadiumInfo?.id || ''
+            })
+        })
+    },
+    methods: {
+        stadiumChange(stadiumInfo){
+            console.log('stadium change', stadiumInfo);
+            if(!stadiumInfo?.id) return;
+            this.initData({
+                brand_id: stadiumInfo?.brand_id || '',
+                stadium_id: stadiumInfo?.id || ''
+            })
+        },
+        async initData({ brand_id, stadium_id }){
+            try{
+                showLoad();
+                let _skInfo = await this.getSkNumber({ brand_id, stadium_id });
+                console.log('site people index initData', _skInfo);
+                this.siteInfo = _skInfo || {};
+                this.tabLs = [];
+                hideLoad();
+                if([1,2].includes(_skInfo?.igs_type)){
+                    let _tabLs = this.getTabList(_skInfo);
+                    _tabLs[0].selected = true;
+                    this.tabLs = _tabLs;
+                }
+            }catch(err){
+                console.warn('site people index initData err', err);
+            }
+        },
+        modifyBtn(){
+            this.$refs.modifyNum.show();
+        },
+        checkNotLeaveBtn(){
+            this.$refs.notLeaveModal.show();
+        },
+        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);
+            })
+        },
+        formatSkInfo(res){
+            
+        },
+        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;
+        }
     }
 }
 </script>
@@ -23,4 +180,19 @@ export default {
     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>

src/subpackage/verification/pages/site_people/modules/classify_tab.vue

@@ -0,0 +1,73 @@
+<template>
+    <scroll-view class="classify-tab" scroll-x>
+        <view class="ct-list">
+            <view 
+                v-for="(e, i) in tabs" 
+                :key='i'
+                class="cl-item" 
+                :class="{ 'cl-active': e.selected }"
+                @click="tabChange(i)"
+                >
+                <view class="ci-box">{{ e.label }}</view>
+            </view>
+        </view>
+    </scroll-view>
+</template>
+
+<script>
+export default {
+    props: {
+        tabs: {
+            type: Array,
+            default: () => []
+        }
+    },
+    methods: {
+        tabChange(index){
+            let { tabs } = this;
+            this.$emit('click:tab', tabs.map(e=>{
+                let _obj = { ...e };
+                if(tabs[index].key === e.key){
+                    _obj.selected = true;
+                }else{
+                    _obj.selected = false;
+                }
+                return _obj;
+            }));
+        }
+    }
+}
+</script>
+
+<style lang="scss"  >
+.classify-tab{
+    height: 94upx;
+    border-bottom: 1px solid #D8D8D8;
+    .ct-list{
+        padding: 0 40upx;
+        width: fit-content;
+        white-space: nowrap;
+        font-size: 0;
+        .cl-item{
+            display: inline-block;
+            flex-shrink: 0;
+            flex-grow: 0;
+            border-bottom: 8upx solid transparent;
+            .ci-box{
+                padding: 0 40upx;
+                text-align: center;
+                @include flcw(28upx, 80upx, #2D2D2D);
+            }
+            &+.cl-item{
+                margin-left: 70upx;
+            }
+            &.cl-active{
+                border-bottom-color: $mColor;
+                .ci-box{
+                    color: $mColor;
+                }
+            }
+        }
+    }
+}
+</style>

src/subpackage/verification/pages/site_people/modules/methods_bar.vue

@@ -17,7 +17,8 @@ export default {
     },
     mounted(){
         this.$nextTick(() => {
-            this.date = new Date().toLocaleDateString()
+            let _date = new Date().toLocaleDateString();
+            this.date = _date.replace(/\//g, '.');
         })
     },
     methods: {

src/subpackage/verification/pages/site_people/modules/modify_number.vue

@@ -0,0 +1,97 @@
+<template>
+    <view class="ox-dark-mask" v-show="visible">
+        <view class="nop-modifies-modal">
+            <image class="nmm-close" src="../../../static/images/x_close.png" @click="hide"></image>
+            <view class="nmm-tit">修改现场散客人数</view>
+            <view class="nmm-info">
+                <view class="ni-num">当前现场散客人数为：012</view>
+                <input class="ni-ipt" placeholder="请输入散客人数" v-model="changeNum" type="number" />
+                <view class="ni-tip">修改现场人数可能会影响现场灯光开关，请谨慎操作！</view>
+            </view>
+            <view class="nmm-btns">
+                <view @click="hide">取消</view>
+                <view>确认</view>
+            </view>
+        </view>
+    </view>
+</template>
+
+<script>
+export default {
+    data(){
+        return {
+            visible: false
+        }
+    },
+    methods: {
+        show(){
+            this.visible = true
+        },
+        hide(){
+            this.visible = false
+        }
+    }
+}
+</script>
+
+<style lang="scss">
+    .ox-dark-mask{
+        z-index: 10;
+    }
+    .nop-modifies-modal{
+        position: absolute;
+        left: 50%;
+        top: 50%;
+        transform: translate(-50%, -50%);
+        padding-top: 78upx;
+        width: 620upx;
+        height: 706upx;
+        background-color: #fff;
+        border-radius: 10upx;
+        .nmm-close{
+            position: absolute;
+            right: 30upx;
+            top: 30upx;
+            width: 34upx;
+            height: 34upx;
+        }
+        .nmm-tit{
+            text-align: center;
+            @include flcw(32upx, 44upx, #1A1A1A, 500)
+        }
+        .nmm-info{
+            padding: 54upx 80upx 80upx;
+            .ni-num{
+                @include tHide;
+                @include flcw(28upx, 48upx, #1A1A1A);
+            }
+            .ni-ipt{
+                margin-top: 30upx;
+                padding: 0 20upx;
+                height: 88upx;
+                border-radius: 10upx;
+                border: 2upx solid #D8D8D8;
+                @include flcw(28upx, 40upx, #1A1A1A);
+            }
+            .ni-tip{
+                margin-top: 26upx;
+                @include flcw(24upx, 34upx, #EA5061);
+            }
+        }
+        .nmm-btns{
+            @include ctf(center);
+            >view{
+                margin: 0 10upx;
+                width: 240upx;
+                text-align: center;
+                border-radius: 10upx;
+                border: 2upx solid $mColor;
+                @include flcw(32upx, 84upx, $mColor);
+                &+view{
+                    color: #fff;
+                    background-color: $mColor;
+                }
+            }
+        }
+    }
+</style>

src/subpackage/verification/pages/site_people/modules/not_leave_modal.vue

@@ -0,0 +1,88 @@
+<template>
+    <view class="not-leave-modal ox-dark-mask" v-show="visible">
+        <view class="nop-modifies-modal">
+            <image class="nmm-close" @click="hide" src="../../../static/images/x_close.png"></image>
+            <view class="nmm-tit">未离场订单</view>
+            <view class="nmm-line">
+                <view class="ml-view">次卡未离场：3</view>
+                <view class="ml-view">查看</view>
+            </view>
+            <view class="nmm-line">
+                <view class="ml-view">计时未离场：3</view>
+                <view class="ml-view">查看</view>
+            </view>
+            <view class="nmm-line">
+                <view class="ml-view">年月卡未离场：1</view>
+                <view class="ml-view">查看</view>
+            </view>
+        </view>
+    </view>
+</template>
+
+<script>
+export default {
+    data(){
+        return {
+            visible: false
+        }
+    },
+    methods: {
+        show(){
+            this.visible = true;
+        },
+        hide(){
+            this.visible = false;
+        }
+    }
+}
+</script>
+
+<style lang="scss">
+    .not-leave-modal{
+        z-index: 10;
+        .nop-modifies-modal{
+            position: absolute;
+            left: 50%;
+            top: 50%;
+            transform: translate(-50%, -50%);
+            padding: 80upx 80upx 0upx;
+            width: 620upx;
+            height: 542upx;
+            background-color: #fff;
+            border-radius: 10upx;
+        }
+        .nmm-close{
+            position: absolute;
+            right: 30upx;
+            top: 30upx;
+            width: 34upx;
+            height: 34upx;
+        }
+        .nmm-tit{
+            text-align: center;
+            @include flcw(32upx, 44upx, #1A1A1A, 500)
+        }
+        .nmm-line{
+            margin-top: 40upx;
+            @include ctf(space-between);
+            .ml-view{
+                &:first-child{
+                    @include flcw(28rpx, 48rpx, #1A1A1A);
+                    @include tHide;
+                }
+                &:nth-child(2){
+                    margin-left: 10upx;
+                    flex-shrink: 0;
+                    width: 156rpx;
+                    height: 68rpx;
+                    text-align: center;
+                    border-radius: 10rpx;
+                    border: 2rpx solid $mColor;
+                    @include flcw(32rpx, 64rpx, $mColor);
+                    
+                }
+            }
+        }
+
+    }
+</style>

src/subpackage/verification/pages/site_people/modules/number_show.vue

@@ -0,0 +1,67 @@
+<template>
+    <view class="number-show">
+        <view class="ns-title">现场散客人数</view>
+        <view class="ns-frame">
+            <image class="nf-bg" mode="aspectFit" src="../../../static/images/countdown_bg.png"></image>
+            <view class="nf-txt">
+                <view class="nt-num">{{ num || 0 }}</view>
+            </view>
+        </view>
+    </view>
+</template>
+
+<script>
+export default {
+    props: {
+        num: {
+            type: Number,
+            default: 0
+        }
+    }
+}
+</script>
+
+<style lang="scss">
+.number-show{
+    padding-top: 40upx;
+    .ns-title{
+        text-align: center;
+        @include flcw(32upx, 44upx, #1A1A1A, 500);
+    }
+    .ns-frame{
+        position: relative;
+        margin: 40upx auto;
+        width: 272upx;
+        height: 272upx;
+        .nf-bg{
+            position: absolute;
+            left: 50%;
+            top: 50%;
+            margin-left: -75%;
+            margin-top: -75%;
+            width: 150%;
+            height: 150%;
+            animation: Rotate 6s linear infinite;
+        }
+        @keyframes Rotate{
+            0% {transform: rotate(360deg);}
+            50% {transform: rotate(180deg);}
+            100% {transform: rotate(0deg);}
+        }
+        .nf-txt{
+            position: absolute;
+            left: 50%;
+            top: 50%;
+            transform: translate(-50%, -50%);
+            width: 100%;
+            height: 100%;
+            z-index: 2;
+            @include ctf(center);
+            .nt-num{
+                @include flcw(70upx, 100upx, $mColor, 500);
+                @include tHide;
+            }
+        }
+    }
+}
+</style>

src/subpackage/verification/pages/site_people/modules/stadium_select.vue

@@ -1,6 +1,6 @@
 <template>
     <view class="stadium-select">
-        <picker>
+        <picker :range="stadiumLs" range-key="name" @change="stadiumChange">
             <view class="ss-frame">
                 <input class="sf-ipt" placeholder="请选择店铺" :value="curStadium.name" disabled />
                 <image class="sf-img" mode="aspectFit" src="../../../static/images/arrow_c33.png"></image>
@@ -10,8 +10,64 @@
 </template>
 
 <script>
+import API from "../../../js/api.js";
+import server from "../../../js/server.js";
+import { showLoad, hideLoad, showNone } from "@/utils/util.js";
 export default {
-
+    data(){
+        return {
+            stadiumLs: [],
+            curStadium: {}
+        }
+    },
+    methods: {
+        stadiumChange(e){
+            let { value } = e?.detail;
+            let { stadiumLs } = this;
+            this.curStadium = stadiumLs?.[value] || {};
+            this.$emit('change:stadium', this.curStadium);
+        },
+        async initStadium(brand_id){
+            try{
+                showLoad();
+                let _ls = await this.getStadiumLs({ brand_id });
+                _ls = _ls.filter(e=>{
+                    return [167, 156, 151].includes(e.id);
+                })
+                this.stadiumLs = _ls || [];
+                hideLoad();
+                if(_ls.length){
+                    this.curStadium = _ls[0];
+                    return _ls[0];
+                }else{
+                    showNone('暂无店铺信息！');
+                }
+            }catch(err){
+                hideLoad();
+                console.warn('stadium select initStadium err', err);
+            }
+        },
+        getStadiumLs({
+            page=1,
+            page_size=9999,
+            brand_id='',
+        }){
+            
+            return server.get({
+                url: API.stadiumList,
+                data: {
+                    page,
+                    page_size,
+                    brand_id,
+                },
+                failMsg: '获取店铺列表失败！'
+            })
+            .then(res=>{
+                let _list = res.list || [];
+                return _list
+            })
+        },
+    }
 }
 </script>