flyLong/pc/src/views/Main.vue

<template>
    <div class="container">
        <div class="lt">
            <div class="top">
                <ul>
                    <li @click="goPage('member')">
                        <img src="../assets/img/main/member.png" height="54" width="54"/>
                        <div class="liRight">
                            <h5>会员人数</h5>
                            <span>{{ AllCount }}</span>
                        </div>
                        <div class="btLine">
                            <em class="emlt">
                                <i class="el-icon-caret-top"></i>
                                今日新增 {{ NowCount }}
                            </em>
                            <em class="emrt">
                                <i class="el-icon-caret-top"></i>
                                昨日新增 {{ YesterdayCount }}
                            </em>
                        </div>
                    </li>
                    <li @click="goPage('record')">
                        <img src="../assets/img/main/appoint.png" height="54" width="54"/>
                        <div class="liRight">
                            <h5>今日预约人数</h5>
                            <span>{{ TodayOrderNum }}</span>
                        </div>
                        <div class="btLine">
                            <em class="emlt">
                                <i class="el-icon-caret-top"></i>
                                昨日预约 {{ YestodayOrderNum }}
                            </em>
                            <em class="emrt">
                                <i class="el-icon-caret-top"></i>
                                较昨日新增 {{ TodayIncreaseNum }}
                            </em>
                        </div>
                    </li>
                    <li @click="goPage('lesson')">
                        <img src="../assets/img/main/lesson.png" height="54" width="54"/>
                        <div class="liRight">
                            <h5>课程数量</h5>
                            <span>{{ ClassNum }}</span>
                        </div>
                        <div class="btLine">
                            <em class="emlt">
                                <i class="el-icon-caret-top"></i>
                                已预约课程 {{ TodayOrderSttNum }}
                            </em>
                        </div>
                    </li>
                </ul>
            </div>

            <div class="finish">
                <div class="title">
                    <h5>课程管理</h5>
                    <!--                    <span>{{getNowDate}}</span>-->
                </div>
                <ul>
                    <li v-for="c in PreFinishList">
                        <div class="finListTitle" :style="{ background:c.ClassColor }">
                            <em> {{ c.ClassName }}</em>
                            <s>{{ c.BeginTime|parseDate }}</s>
                        </div>
                        <div class="context">
                            <div class="ctl">
                                <span>上课时间：{{ c.BeginStr }} - {{ c.EndStr }}</span>
                                <span>预约人数：{{ c.OrderNum }} 人</span>
                            </div>
                            <em>

                            </em>
                            <el-button type="primary" plain @click="goFinish(c)" v-if="c.FinishClass == 0">上课</el-button>
                            <el-button type="primary" plain @click="checkClassOverPrepare(c)" v-if="c.FinishClass == 2">管理</el-button>
                            <el-button type="primary" plain @click="goFinish(c)"  v-if="c.FinishClass == 3">编辑</el-button>
                        </div>
                    </li>
                    <span class="tips" v-if="PreFinishList == 0">
                           <img src="../assets/img/main/empty.jpg" height="116" width="92"/>
                        <br>
                        暂无下课课程
                    </span>
                </ul>
            </div>
            <div class="appoint">
                <div class="title">
                    <h5>预约课程</h5>
                    <span>{{ getNowDate }}</span>
                </div>
                <div class="appointCard">
                    <el-card class="box-card" v-for="c in classList" @click.native="goLesson">
                        <div class="cardTitle ">
                            {{ c.ClassName }}
                        </div>
                        <span>
                           {{ c.BeginStr }}
                        </span>
                        <em>最大预约人数 <i>{{ c.OrderToplimit }}</i></em>
                        <em>已预约人数 <i>{{ c.OrderNum }}</i></em>
                        <em>预约状态
                            <s class="blue" v-if="c.WxOrder > 0">可预约</s>
                            <s class="red" v-if="c.WxOrder == 0">不可预约</s>
                        </em>
                    </el-card>
                    <span class="tips" v-if="classList == 0">
                           <img src="../assets/img/main/empty.jpg" height="116" width="92"/>
                        <br>
                        暂无预约课程，请先添加
                      <router-link to="/lessonManage">课程表</router-link>
                    </span>
                </div>
            </div>
        </div>
        <div class="rt">
            <div class="rtContext">
                <div class="rtTitle">
                    <h5>最新预约</h5>
                    <span @click="goPage('appoint','second')">查看全部</span>
                </div>
                <ul>
                    <!--                    TodayVipOrder-->
                    <li v-for="as in appointList" @click="goAppointDetail(as.UserName)">
                        <div class="asTitle">
                            <img :src="as.Head" alt="" v-if="as.Head" width="25px" height="25px">
                            <img src="../assets/img/nav/head.png" alt="" v-else width="25px" height="25px">
                            <span>
                                {{ as.UserName }}
                                {{ as.Phone }}  &nbsp; &nbsp; &nbsp;
                                <em>预约时间：  {{ as.Base.CreatedAt |parseDate }}</em>
                          </span>
                        </div>
                        <div class="asContent">
                            <span>上课时间：<em>{{ as.CurrentDate.substr(5, 6) }} {{ as.BeginStr }}</em></span>
                            <span>预约状态：
                                <em v-if="as.Status == 1" class="green">已预约</em>
                                <em v-if="as.Status == 2" class="red">已取消</em>
                                <em v-if="as.Status == 3" class="yellow">预约未到</em>
                                <em v-if="as.Status == 4">已完成</em>
                            </span>
                            <span>预约课程：<s class="blue"
                                          :style="{ background:as.ClassColor }"> {{ as.ClassName }}</s></span>
                            <span>剩余课时：<em :class="[{'red':as.RemainHour == 0}]">{{ as.RemainHour }}课时</em></span>
                        </div>
                    </li>
                    <span class="tips middleTips" v-if="appointList == 0">
                           <img src="../assets/img/main/empty.jpg" height="116" width="92"/>
                        <br>
                        暂无预约，可进入
                        <router-link to="/appoint">预约管理</router-link>
                    </span>
                </ul>
            </div>
        </div>
    </div>
</template>

<script>
    import {
        ClassPreFinishListQuery,
        WaitingBeginClassList,
        ClassOngoingList,
        OrderStatistics,
        VipUserStatistics,
        ClassStatistics,
        ClassOverPrepare,
        VipUserOrderQuery,
        LastOrderQuery,
    } from "../api/getApiRes";

    let qs = require('qs');
    export default {
        data() {
            return {
                editableTabsValue: '1',
                getNowDate: getNowDate(),
                classList: [],
                PreFinishList: [],
                appointList: [],
                TodayClassOrder: [],
                TodayVipOrder: [],
                AllCount: 0,
                YesterdayCount: 0,
                YestodayOrderNum: 0,
                NowCount: 0,
                CountAdd: 0,
                TodayIncreaseNum: 0,
                TodayOrderNum: 0,
                ClassNum: 0,
                TodayOrderSttNum: 0,
            }
        },
        mounted() {
            let that = this;

            // 下课管理
            this.getVipUserStatistics();
            this.getClassStatistics();
            this.ClassQuery();
            this.getVipUserOrderQuery();
            // 预约统计
            this.getOrderStatistics();
            this.getWaitingBeginClassList();
            this.timer = setInterval(() => {
                that.getVipUserOrderQuery();
                this.getVipUserStatistics();
                this.getClassStatistics();
                this.ClassQuery();
                this.getOrderStatistics();
                this.getWaitingBeginClassList();
            }, 10000);
        },
        destroyed() {
            clearInterval(this.timer);//页面销毁时清除定时器
        },
        methods: {
            goLesson() {
                this.$router.push({
                    path: '/appoint',
                })
            },
            goAppointDetail(name) {
                this.$router.push({
                    path: '/appoint',
                    query: {
                        page: 'second',
                        name: name
                    }
                })
            },
            goPage(url, page) {
                this.$router.push({
                    path: '/' + url,
                    query: {
                        page: page
                    }
                })
            },
            // 会员统计
            getVipUserStatistics() {
                let that = this;
                let param = {
                    token: localStorage.token,
                };
                let postdata = qs.stringify(param);
                VipUserStatistics(postdata).then(res => {
                    let json = res;
                    if (json.Code == 0) {
                        that.AllCount = json.Rs.AllCount;
                        that.YesterdayCount = json.Rs.YesterdayCount;
                        that.NowCount = json.Rs.NowCount;
                        that.CountAdd = json.Rs.CountAdd;
                    } else {
                        if (json.Code == 1010) {
                            that.$message.error(json.Memo);
                            that.$router.push({path: '/login', query: {status: 1}});
                            return false
                        } else {
                            that.$message.error(json.Memo);
                        }
                    }
                })
            },
            // 课程统计
            getClassStatistics() {
                let that = this;
                let param = {
                    token: localStorage.token,
                };
                let postdata = qs.stringify(param);
                ClassStatistics(postdata).then(res => {
                    let json = res;
                    if (json.Code == 0) {
                        that.ClassNum = json.Rs.ClassNum;
                        that.TodayOrderSttNum = json.Rs.TodayOrderSttNum;
                    } else {
                        that.$message.error(json.Memo);
                    }
                })
            },
            getOrderStatistics() {
                let that = this;
                that.loading = true;
                let param = {
                    token: localStorage.token,
                };
                let postdata = qs.stringify(param);
                OrderStatistics(postdata).then(res => {
                    let json = res;
                    if (json.Code == 0) {
                        that.loading = false;
                        if (json.Rs) {
                            that.TodayIncreaseNum = json.Rs.TodayIncreaseNum;
                            that.TodayOrderNum = json.Rs.TodayOrderNum;
                            that.YestodayOrderNum = json.Rs.YestodayOrderNum;
                        }
                    } else {
                        that.$message.error(json.Memo);
                    }
                })
            },
            checkClassOverPrepare(row) {
                let that = this;
                // courseEdit
                this.$router.push({
                    path: '/courseEdit', query: {
                        StdId: row.StdId,
                        ClassName: row.ClassName,
                        BeginStr: row.BeginStr,
                        EndStr: row.EndStr,
                        FinishClass: row.FinishClass,
                    }
                });
            },
            goFinish(row) {
                this.$router.push({
                    path: '/courses', query: {
                        // id: row.StdId,
                        // classId: row.ClassId,
                        // ClassName: row.ClassName,
                        // BeginTime: row.BeginTime,
                    }
                });
            },
            getWaitingBeginClassList() {
                let that = this;
                that.loading = true;
                let param = {
                    token: localStorage.token,
                };
                let postdata = qs.stringify(param);
                WaitingBeginClassList(postdata).then(res => {
                    let json = res;
                    if (json.Code == 0) {
                        that.loading = false;
                        that.classList = json.Rs;
                    } else {
                        that.$message.error(json.Memo);
                    }
                })
            },
            // 下课管理
            ClassQuery() {
                let that = this;
                that.loading = true;
                let param = {
                    token: localStorage.token,
                };
                let postdata = qs.stringify(param);
                ClassOngoingList(postdata).then(res => {
                    let json = res;
                    if (json.Code == 0) {
                        that.loading = false;
                        if (json.Rs) {
                            that.PreFinishList = json.Rs;
                        }
                    } else {
                        that.$message.error(json.Memo);
                    }
                })
            },
            // 最新预约
            getVipUserOrderQuery() {
                let that = this;
                that.loading = true;
                let param = {
                    token: localStorage.token,
                    classId: 0,
                    orderDate: globalcurrent(),
                    stdId: 0,
                };
                let postdata = qs.stringify(param);
                // VipUserOrderQuery(postdata).then(res => {
                LastOrderQuery(postdata).then(res => {
                    let json = res;
                    if (json.Code == 0) {
                        that.loading = false;
                        if (json.Rs) {
                            that.appointList = json.Rs;
                        }
                    } else {
                        that.$message.error(json.Memo);
                    }
                })
            }
        },
        filters: {
            parseDate: function (value) {
                if (!value) {
                    return false
                } else {
                    let res = nonTfmtDatetoLength(value, 10).substr(5, 10);
                    return res;
                }
            },
        },
        watch: {
            $route(to) {
                if (to.name == 'Main') {
                    this.getVipUserStatistics();
                    this.getClassStatistics();
                    this.ClassQuery();
                    this.getVipUserOrderQuery();
                    this.getOrderStatistics();
                    this.getWaitingBeginClassList();
                } else {
                    clearInterval(this.timer);//页面销毁时清除定时器
                }
            },
        },
    }
</script>

<style scoped>

    ul, li {
        list-style: none;
        margin: 0;
        padding: 0;

    }

    em {
        font-style: normal;
    }

    .container {
        width: 100%;
        height: 760px;
        overflow: hidden;
        overflow-y: scroll;
        display: block;
        margin: 0 auto;
        padding-bottom: 60px;
    }

    .container > .lt {
        width: 1173px;
        float: left;
        margin-top: 0px;
    }

    .container > .rt {
        /*width: 436px;*/
        width: 26%;
        height: 100%;
        float: right;
    }

    .lt .top {
        width: 100%;
        overflow: hidden;
        display: block;
        margin: 0 auto;
    }

    .lt .top li {
        width: 377px;
        height: 140px;
        float: left;
        background: #fff;
        border-radius: 12px;
        margin-right: 20px;
        cursor: pointer;
    }

    .lt .top li:nth-child(3) {
        margin-right: 0;
    }

    .top li img {
        float: left;
        margin-top: 17px;
        margin-left: 30px;
        margin-right: 24px;
    }

    .top li .liRight {
        width: 200px;
        float: left;
        margin-top: 17px;
    }

    .top .liRight h5 {
        margin: 0;
        padding: 0;
        text-align: left;
    }

    .top .liRight span {
        width: 100%;
        overflow: hidden;
        display: block;
        margin: 0 auto;
        text-align: left;
        font-size: 26px;
        font-family: Arial;
        margin-top: 7px;
        margin-bottom: 20px;
    }

    .btLine {
        width: 84%;
        overflow: hidden;
        display: block;
        margin: 0 auto;
        border-top: 1px solid #F0F2F5;
        padding-top: 17px;
    }

    .btLine em {
        font-size: 14px;
    }

    .btLine .emlt {
        width: 50%;
        float: left;
        text-align: left;
    }

    .btLine i {
        font-size: 18px;
        color: #BDBDBD;
    }

    .emlt i {
        float: left;
    }

    .finish {
        width: 100%;
        min-height: 358px;
        overflow: hidden;
        display: block;
        margin: 0 auto;
        background: #fff;
        margin-top: 15px;
        border-radius: 12px;
        padding-top: 15px;
        padding-bottom: 0px;
    }

    .finish .title {
        overflow: hidden;
        display: block;
        margin: 0 auto;
        padding-left: 30px;
    }

    .finish .title h5 {
        margin: 0;
        float: left;
        font-size: 18px;
    }

    .finish .title span {
        float: right;
        margin-right: 43px;
        font-size: 14px;
        color: #717171;
    }

    .finish ul {
        overflow: hidden;
        display: block;
        margin: 0 auto;
        padding-left: 30px;
        padding-right: 30px;
        margin: 0 auto;
        margin-top: 10px;
    }

    .finish ul li {
        width: 347px;
        height: 149px;
        overflow: hidden;
        float: left;
        margin-bottom: 14px;
    }

    .finish ul li:nth-child(2) {
        margin-left: 24px;
        margin-right: 24px;
    }

    .finish ul li:nth-child(5) {
        margin-left: 24px;
        margin-right: 24px;
    }

    .finish li .finListTitle {
        width: 100%;
        height: 35px;
        line-height: 35px;
        overflow: hidden;
        display: block;
        margin: 0 auto;
        background-color: #3799FF;
        border-top-left-radius: 7px;
        border-top-right-radius: 7px;
        color: #000;
    }
    li .finListTitle em {
        float: left;
        color: #fff;
        padding-left: 5%;
    }
    li .finListTitle s {
        float: right;
        text-decoration: none;
        color: #fff;
        padding-right: 5%;
    }

    .finish li .context {
        width: 344px;
        overflow: hidden;
        display: block;
        margin: 0 auto;
        border: 1px solid #E8E8E8;
        border-top: none;
        padding-top: 16px;
        padding-bottom: 16px;
        border-bottom-left-radius: 7px;
        border-bottom-right-radius: 7px;
    }

    .finish .context em {
        width: 85px;
        overflow: hidden;
        display: block;
        margin: 0 auto;
        height: 40px;
        line-height: 30px;
        color: #BDBDBD;
    }
    .context button {
        height: 30px;
        line-height: 30px;
        padding-top: 0;
    }

    .context .ctl {
        width: 211px;
        float: left;
        padding-left: 16px;
        margin-right: 20px;
    }

    .ctl span {
        width: 100%;
        height: 30px;
        line-height: 30px;
        overflow: hidden;
        display: block;
        margin: 0 auto;
        background-color: #F8F8F8;
        color: #404040;
        font-size: 14px;
        text-align: left;
        padding-left: 20px;
        margin-bottom: 15px;
    }

    .ctl span:nth-child(2) {
        margin-bottom: 0px;
    }

    /deep/ .el-button--primary.is-plain {
        background-color: #fff;
    }

    /deep/ .el-button--primary.is-plain:hover {
        color: #005EA2 !important;
    }

    .blue {
        color: #3799FF;
    }

    .appoint {
        width: 100%;
        overflow: hidden;
        display: block;
        margin: 0 auto;
        background: #fff;
        margin-top: 15px;
        border-radius: 12px;
        padding-top: 15px;
        padding-bottom: 1px;
    }

    .appoint .title {
        overflow: hidden;
        display: block;
        margin: 0 auto;
        padding-left: 30px;
    }

    .appoint .title h5 {
        margin: 0;
        float: left;
        font-size: 18px;
    }

    .appoint .title span {
        float: right;
        margin-right: 43px;
        font-size: 14px;
        color: #717171;
    }

    .appoint .appointCard {
        min-height: 195px;
        overflow: hidden;
        display: block;
        margin: 0 auto;
        padding-top: 25px;
        padding-bottom: 25px;
        padding-left: 30px;
        padding-right: 30px;
    }

    /deep/ .el-card {
        width: 150px;
        float: left;
        margin-right: 31px;
        padding: 0;
        border-radius: 12px;
    }

    /deep/ .el-card:nth-child(last) {
        margin-right: 0;
    }

    /deep/ .el-card__body {
        padding: 0;
    }

    .cardTitle {
        width: 100%;
        overflow: hidden;
        display: block;
        margin: 0 auto;
        height: 40px;
        line-height: 40px;
        background: #F0F2F5;
    }

    .appointCard span {
        width: 100%;
        overflow: hidden;
        display: block;
        margin: 0 auto;
        color: #777777;
        font-family: Arial;
        margin-top: 10px;
        margin-bottom: 10px;
        font-size: 16px;
    }

    .appointCard em {
        overflow: hidden;
        display: block;
        margin: 0 auto;
        font-size: 12px;
        margin-bottom: 14px;
        text-align: left;
        padding-left: 16px;
        padding-right: 16px;
    }

    .appointCard em i {
        float: right;
        color: #000000;
        padding-right: 3px;
    }

    .appointCard em s {
        /*width: 47px;*/
        height: 20px;
        line-height: 20px;
        text-align: center;
        font-style: normal;
        text-decoration: none;
        float: right;
        border-radius: 3px;
        padding: 0 3px;
    }

    .appointCard em s.blue {
        background-color: #E5F2FF;
        color: #3799FF;
    }

    .appointCard em s.red {
        background-color: #E5F2FF;
        color: rgb(204, 2, 2);
    }

    .rtContext {
        width: 100%;
        height: 100%;
        overflow: hidden;
        overflow-y: hidden;
        display: block;
        margin: 0 auto;
        margin-top: 0px;
        background: #fff;
        padding: 0;
        border-radius: 12px;
        min-height: 826px;
        background: #fff;
    }

    .rtContext .rtTitle {
        overflow: hidden;
        display: block;
        margin: 0 auto;
        padding: 10px 30px;
    }

    .rtTitle h5 {
        margin: 0;
        float: left;
        font-size: 18px;
    }

    .rtTitle span {
        float: right;
        font-size: 14px;
        color: #BDBDBD;
        cursor: pointer;
    }

    .rtContext ul {
        width: 100%;
        overflow: hidden;
        display: block;
        height: 100%;
        overflow: hidden;
        overflow-y: scroll;
        margin: 0 auto;
        padding-left: 30px;
        padding-right: 30px;
    }

    .rtContext li {
        width: 100%;
        overflow: hidden;
        display: block;
        margin: 0 auto;
        border-bottom: 1px solid #F0F2F5;
        padding-top: 30px;
        padding-bottom: 10px;
        cursor: pointer;
    }

    .asTitle {
        width: 100%;
        height: 30px;
        overflow: hidden;
        display: block;
        margin: 0 auto;
        text-align: left;
        line-height: 20px;
        color: #000000;
        font-size: 14px;

    }

    .asTitle img {
        float: left;
        margin-right: 5px;
    }

    .asTitle span {
        /*width: 26px;*/
        min-width: 300px;
        height: 30px;
        line-height: 26px;
        float: left;
        margin-right: 10px;
    }

    .asTitle em {
        float: right;
        text-align: right;
    }

    .asContent {
        width: 100%;
        overflow: hidden;
        display: block;
        margin: 0 auto;
    }

    .asContent span {
        width: 50%;
        float: left;
        font-size: 14px;
        color: #BDBDBD;
        margin-bottom: 10px;
        text-align: left;
        text-indent: 8px;
    }

    .asContent span em {
        color: #000;
        text-align: left;
    }

    .asContent span s {
        text-decoration: none;
        color: #000;
        border-radius: 250px;
        padding: 3px 5px;
        text-align: center;
    }

    .asContent span s.blue {
        background-color: #E5F2FF;
    }

    .box-card {
        cursor: pointer;
    }

    .box-card em {
        font-style: normal;
    }

    i {
        font-style: normal;
    }

    .asContent .green {
        color: #25CC42;
    }

    .asContent .red {
        color: red;
    }

    .asContent .yellow {
        color: #FFDD00;
    }

    /deep/ a {
        color: #03B1FF;
    }

    .tips {
        color: #333;
        font-size: 14px !important;
        overflow: hidden;
        display: block;
        margin: 0 auto;
        margin-top: 10px;
        line-height: 30px;
    }

    .middleTips {
        margin-top: 180px;
    }

    /*ipad only*/
    @media only screen and (max-width: 1366px) {
        .container {
            height: 600px;
            padding-top: 6px;
        }

        .container .lt {
            width: 80%;
        }

        .lt .top {
            width: 96%;
        }

        .lt .top li {
            width: 32%;
            margin-right: 2%;
        }

        .top li .liRight {
            width: 40%;
        }

        .btLine {
            width: 96%;
        }

        .btLine em {
            font-size: 12px;
            float: left;
            line-height: 22px;
        }

        .finish ul li {
            width: 30%;
            /*height: 159px;*/
            overflow: hidden;
            padding-bottom: 20px;
        }

        .finish li .context {
            width: 99%;
            overflow: hidden;
            display: block;
            margin: 0;
            padding: 0px;
            height: auto !important;
            padding-bottom: 5px;
            border-top-left-radius: 0;
            border-top-right-radius: 0;
        }

        .finish li .context .ctl {
            width: 100%;
            overflow: hidden;
            display: block;
            margin: 0;
            padding: 0;
            padding-top: 6px;
            margin-bottom: 3px;
        }

        .ctl span {
            width: 80%;
            padding: 0;
            font-size: 12px;
            text-align: center;
        }

        .finish {
            width: 97%;
        }

        .appoint {
            width: 97%;
        }

        .finish .context em {
            height: 30px;
            line-height: 40px;
            font-size: 12px;
            float: left;
        }

        .finish .context {
            height: auto !important;
            padding-bottom: 5px;
        }

        .el-main > .container {
            /*height: 772px;*/
        }

        .container .rt {
            width: 20%;
        }

        .rtTitle span {
            font-size: 12px;
            line-height: 30px;
        }

        .rtContext ul {
            padding: 2px !important;
            font-size: 12px;
        }

        .asTitle {
            width: 30px;
            float: left;
        }

        .asContent {
            width: 82%;
        }

        .asContent span {
            width: 100%;
            overflow: hidden;
            display: block;
            margin: 0 auto;
            font-size: 12px;
            height: 20px;
        }
    }
</style>