mteacher/src/views/teacher/order.vue

<template>
    <div class="order">
        <header>缴费详情
            <van-dropdown-menu>
                <van-dropdown-item @change="onChange" v-model="voicyPart" :options="voicyPartList" />
            </van-dropdown-menu>
        </header>
        <h2>{{musicGroupName}}</h2>
        <van-tabs color="#14928a">
            <van-tab title="缴费信息">
                <div class="table">
                    <div class="title">
                        <span></span>
                        <span>姓名</span>
                        <span>声部</span>
                        <span>支付金额</span>
                        <span>到账时间</span>
                    </div>
                    <div class="content">
                        <div v-for="(data, index) in dataList" :key="data.id">
                        <!-- <div> -->
                            <span> {{ ++index }} </span>
                            <span> {{ data.userName }} </span>
                            <span> {{ data.subjectName }} </span>
                            <span> {{ data.paymentAmount }} </span>
                            <span> {{ data.payTime }} </span>
                        </div>
                        <p style="padding: 8px 8px 20px">缴费总额：{{ (amountCount).toFixed(2) }}元</p>
                    </div>
                </div>
            </van-tab>
            <van-tab title="报名信息">
                <div class="table">
                    <div class="title">
                        <span></span>
                        <span>姓名</span>
                        <span>班级</span>
                        <span>声部</span>
                        <span>备注</span>
                        <span>调剂</span>
                    </div>
                    <div class="content">
                        <div v-for="(data, index) in studentList" :key="data.id">
                        <!-- <div> -->
                            <span> {{ ++index }} </span>
                            <span> {{ data.userName }} </span>
                            <span> {{ data.currentClass }} </span>
                            <span> {{ data.subjectName }} </span>
                            <span> {{ data.remark }} </span>
                            <span><van-button
                                    :disabled="data.paymentStatus == 2 ? true : false"
                                    round
                                    @click = "adjust(data)"
                                    type = "danger"
                                    size = "small">调剂</van-button> </span>
                        </div>
                    </div>
                </div>
                <van-action-sheet
                    v-model="adjustStatus"
                    :actions="couresList"
                    cancel-text="取消"
                    @cancel="adjustStatus = false"
                    @select="adjustSelect" />
            </van-tab>
            <van-tab title="数据统计">
                <van-cell class="countInfo" title="报名总人数" :value="config.regNum + '人'"></van-cell>
                <van-cell class="countInfo" title="缴费总人数" :value="config.payNum + '人'"></van-cell>
                <van-cell class="countInfo" title="家长会当日缴费人数" :value="config.firstDayPayNum + '人'"></van-cell>
                <van-cell class="countInfo" :value="config.payScale + '%'">
                    <template #title>
                        <div style="display: flex;align-items: center;">家长会当日缴费人数占比
                            <van-icon name="question-o" @click="onTip" style="padding-left: .05rem;" />
                        </div>
                    </template>
                </van-cell>
                <div style="width: 100%;overflow-x: auto;">
                    <div class="table" style="width: 145%;">
                        <van-row style="border: 1px solid #eaeaea">
                            <van-col span="1">&nbsp;</van-col>
                            <van-col span="3">学员编号</van-col>
                            <van-col span="2">姓名</van-col>
                            <van-col span="2">声部</van-col>
                            <van-col span="4">
                                <div style="display: flex;align-items: center;justify-content: center;" @click="onChangeSort('1')">
                                    预报名时间
                                    <div>
                                        <i class="box box-up" :class="[orderByPerRegister == 'ASC' ? 'active' : null]" style="margin-bottom: .02rem;"></i>
                                        <i class="box box-down" :class="[orderByPerRegister == 'DESC' ? 'active' : null]"></i>
                                    </div>
                                </div>
                            </van-col>
                            <van-col span="4">预报名时间差</van-col>
                            <van-col span="4">
                                <div style="display: flex;align-items: center;justify-content: center;" @click="onChangeSort('2')">
                                    缴费时间
                                    <div>
                                        <i class="box box-up" :class="[orderByPayTime == 'ASC' ? 'active' : null]" style="margin-bottom: .02rem;"></i>
                                        <i class="box box-down" :class="[orderByPayTime == 'DESC' ? 'active' : null]"></i>
                                    </div>
                                </div>
                            </van-col>
                            <van-col span="4">缴费时间差</van-col>
                        </van-row>
                        <van-row v-for="(data, index) in countList" :key="data.id" style="border: 1px solid #ebedf0">
                            <van-col span="1">{{ ++index }}</van-col>
                            <van-col span="3">{{ data.userId }}</van-col>
                            <van-col span="2">{{ data.studentName }}</van-col>
                            <van-col span="2">{{ data.actualSubjectName }}</van-col>
                            <van-col span="4">{{ data.perRegisterTime }}</van-col>
                            <van-col span="4">{{ data.perRegIntervalStr }}</van-col>
                            <van-col span="4">{{ data.payTime }}</van-col>
                            <van-col span="4">{{ data.payIntervalStr }}</van-col>
                        </van-row>
                    </div>
                </div>
            </van-tab>
        </van-tabs>
    </div>
</template>

<script>
import { queryStudentApply, querySubByMusicGroupId, getRegisterOrPreList, updateSubject } from '@/api/teacher'
import setLoading from '@/utils/loading'
import cleanDeep from 'clean-deep'
export default {
    name: 'order',
    data() {
        return {
            musicGroupId: this.$route.query.musicGroupId,
            musicGroupName: this.$route.query.musicGroupName,
            dataList: {}, // 订单列表
            amountCount: 0, // 总额
            studentList: {}, // 学生列表
            couresList: [],
            countList: [],
            voicyPart: 0,
            voicyPartList: [{
                text: '全部声部',
                value: 0
            }],
            adjustStatus: false, //
            changeStudent: null, // 修改的学生对象
            orderByPerRegister: null, // 预报名时间排序状态
            orderByPayTime: null, // 缴费时间排序状态
            config: {
                regNum: 0,
                firstDayPayNum: 0,
                payScale: 0,
                payNum: 0
            }
        }
    },
    async mounted() {
        window.localStorage.removeItem('userInfo') // 删除用户信息
        window.localStorage.removeItem('Authorization') // 删除用户信息
        setLoading(true)
        await querySubByMusicGroupId({ musicGroupId: this.musicGroupId }).then(res => {
            let result = res.data
            if(result.code == 200) {
                result.data.forEach(r => {
                    this.voicyPartList.push({
                        text: r.name,
                        value: r.id
                    })

                    this.couresList.push({
                        name: r.name,
                        id: r.id
                    })
                })
            }
        })
        setLoading(false)
        // 获取订单信息
        this.getOrderList()
        this.getOrderStudentList()
        this.getRegisterOrPreList()
    },
    methods: {
        adjust(item) {
            // 开始调剂
            if(item.paymentStatus != 2) {
                this.adjustStatus = true
                this.changeStudent = item
            }
        },
        adjustSelect(item) { // 修改专业
            updateSubject({
                musicGroupId: this.musicGroupId,
                subId: item.id,
                userId: this.changeStudent.userId
            }).then(res => {
                let result = res.data
                if(result.code == 200) {
                    this.$toast('修改成功')
                    this.adjustStatus = false
                    this.getOrderStudentList()
                } else {
                    this.$toast(result.msg)
                }
            })
        },
        getOrderList() {
            // 获取订单信息
            queryStudentApply({
                musicGroupId: this.musicGroupId,
                rows: 9999,
                subjectId: this.voicyPart ? this.voicyPart : '',
                paymentStatus:  2,
                page: 1
            }).then(res => {
                let result = res.data
                this.amountCount = 0
                if(result.code == 200) {
                    this.dataList = result.data.rows
                    result.data.rows.forEach(item => {
                        this.amountCount += item.paymentAmount
                    })
                }
            })
        },
        getOrderStudentList() {
            // 获取订单信息
            queryStudentApply({
                musicGroupId: this.musicGroupId,
                rows: 9999,
                subjectId: this.voicyPart ? this.voicyPart : '',
                page: 1
            }).then(res => {
                let result = res.data
                if(result.code == 200) {
                    this.studentList = result.data.rows
                }
            })
        },
        async getRegisterOrPreList() {
            setLoading(true)
            // 获取订单信息
            await getRegisterOrPreList(cleanDeep({
                musicGroupId: this.musicGroupId,
                rows: 9999,
                subjectId: this.voicyPart ? this.voicyPart : '',
                orderByPerRegister: this.orderByPerRegister,
                orderByPayTime: this.orderByPayTime,
                page: 1
            })).then(res => {
                let result = res.data
                if(result.code == 200) {
                    let tempDate = result.data
                    let scale = ((tempDate.firstDayPayNum / tempDate.payNum) * 100).toFixed(2)
                    this.config = {
                        regNum: tempDate.regNum,
                        firstDayPayNum: tempDate.firstDayPayNum,
                        payScale: scale,
                        payNum: tempDate.payNum
                    }
                    this.countList = tempDate.rows
                }
            })
            setLoading(false)
        },
        onChange() {
            // 切换声部时
            // let subId = value ? value : ''
            this.getOrderList(this.voicyPart)
            this.getOrderStudentList(this.voicyPart)
            this.getRegisterOrPreList(this.voicyPart)
        },
        onTip() {
            this.$dialog.alert({
                message: '家长会当日缴费人数 / 缴费总人数',
            }).then(() => {
            // on close
            });

        },
        async onChangeSort(sort) {
            if(sort == 1) {
                this.orderByPayTime = null
                if(this.orderByPerRegister == 'ASC') {
                    this.orderByPerRegister = 'DESC'
                } else if(this.orderByPerRegister == 'DESC') {
                    this.orderByPerRegister = null
                } else {
                    this.orderByPerRegister = 'ASC'
                }
            } else if(sort == 2) {
                this.orderByPerRegister = null
                if(this.orderByPayTime == 'ASC') {
                    this.orderByPayTime = 'DESC'
                } else if(this.orderByPayTime == 'DESC') {
                    this.orderByPayTime = null
                } else {
                    this.orderByPayTime = 'ASC'
                }
            }
            await this.getRegisterOrPreList()
        }
    }
}
</script>

<style lang="less" scoped>
.order {
    background: #fff;
    min-height: 100vh;
}
header {
    height: .40rem;
    line-height: .40rem;
    color: #000;
    font-size: .17rem;
    background: #fff;
    box-shadow: 0px 1px 8px 0px rgba(0,0,0,0.07);
    text-align: center;
}
h2 {
    font-size: .16rem;
    color: #fff;
    padding: .1rem 0;
    text-align: center;
    background: #14928a;
}


.table {
    .title {
        display: flex;
        align-items: center;
        text-align: center;
        border-bottom: 1px solid #eaeaea;
    }

    span {
        flex: 1;
        padding: .08rem 0;
        font-size: .14rem;
        &:first-child {
            width: .3rem;
            flex: inherit;
        }
    }

    .content > div{
        width: 100%;
        display: flex;
        align-items: center;
        text-align: center;
        &:nth-child(2n+2) {
            background: #eaeaea;
        }

    }
}
/deep/.van-dropdown-menu {
    height: .4rem;
    position: absolute;
    right: .15rem;
    top: 0;
    .van-dropdown-menu__bar {
        height: .4rem;
        box-shadow: none;
    }
}

/deep/.van-col {
    font-size: 0.14rem;
    text-align: center;
    padding: .08rem 0;
}
/deep/.van-row {
    &:nth-child(2n+3) {
        background: #eaeaea;
    }
}

.box {
    display: flex;
    flex-direction: row;
    align-items: center;
    margin-left: .02rem;
}
.box-up {
    width: 0;
    height: 0;
    border-left: 4px solid transparent;
    border-right: 4px solid transparent;
    border-bottom: 6px solid #ccc;
    &.active {
        border-bottom-color: #14928a;
    }
}
.box-down {
    width: 0;
    height: 0;
    border-left: 4px solid transparent;
    border-right: 4px solid transparent;
    border-top: 6px solid #ccc;
    &.active {
        border-top-color: #14928a;
    }
}

.countInfo {
    /deep/.van-cell__title {
        flex: 1 auto;
    }
    /deep/.van-cell__value {
        color: #14928a;
    }
}
</style>