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>
            <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 0 0 8px;">缴费总额：{{ amountCount }}元</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-tabs>
    </div>
</template>

<script>
import { queryStudentApply, querySubByMusicGroupId, updateSubject } from '@/api/teacher'
export default {
    name: 'order',
    data() {
        return {
            musicGroupId: this.$route.query.musicGroupId,
            musicGroupName: this.$route.query.musicGroupName,
            dataList: {}, // 订单列表
            amountCount: 0, // 总额
            studentList: {}, // 学生列表
            couresList: [],
            voicyPart: 0,
            voicyPartList: [{
                text: '全部声部',
                value: 0
            }],
            adjustStatus: false, //
            changeStudent: null, // 修改的学生对象
        }
    },
    mounted() {
        window.localStorage.removeItem('userInfo') // 删除用户信息
        window.localStorage.removeItem('Authorization') // 删除用户信息

        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
                    })
                })
            }
        })
        
        // 获取订单信息
        this.getOrderList()
        this.getOrderStudentList()
        
    },
    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
                }
            })
        },
        onChange() {
            // 切换声部时
            // let subId = value ? value : ''
            this.getOrderList(this.voicyPart)
            this.getOrderStudentList(this.voicyPart)
        }
    }
}
</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{
        // border: 1px solid #ccc;
        // border-left: 0;
        // border-right: 0;
        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;
    /deep/.van-dropdown-menu__bar {
        height: .4rem;
        box-shadow: none;
    }
}
</style>