wxdaya/src/views/order.vue

<template>
    <div class="order">
        <header>支付列表</header>
        <h2>{{schoolName}}</h2>
        <van-tabs>
            <van-tab title="缴费信息">
                <div class="orderList">
                    <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.voicyPart }} </span>
                                <span> {{ data.amount }} </span>
                                <span> {{ data.payTime }} </span>
                            </div>
                            
                        </div>
                    </div>
                </div>
            </van-tab>
            <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 studentList" :key="data.id">
                        <!-- <div> -->
                            <span> {{ ++index }} </span>
                            <span> {{ data.name }} </span>
                            <span> {{ data.gClass }} </span>
                            <span> {{ data.subName ? data.subName.split('.').reverse()[0] : data.subName }} </span>
                            <span> <van-button 
                                    :disabled="data.pushStatus <= 1 && data.status == 0 ? false : true" 
                                    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 { Toast } from 'vant'
import qs from 'qs'
export default {
    name: 'order',
    components: { Toast },
    data() {
        return {
            classId: this.$route.query.classId,
            schoolName: this.$route.query.schoolName,
            dataList: {}, // 订单列表
            studentList: {}, // 学生列表
            couresList: [], // 课程列表
            adjustStatus: false, //
            changeStudent: null, // 修改的学生对象
        }
    },
    mounted() {
        // 获取订单信息
        axios.post('/order/checkOrderList', qs.stringify({
            classId: this.classId,
            type: 1
        })).then(r => {
            this.dataList = r.data.data
        })
        // 获取所有课程
        axios.post('/user/getCourses ', qs.stringify({
            clazzId: this.classId
        })).then(c => {
            let result = c.data.data
            result.forEach(r => {
                this.couresList.push({
                    name: r.subName.split('.').reverse()[0],
                    subId: r.subId 
                })
            })
        })
        
        // 获取学生列表信息
        this.getStudents()
    },
    methods: {
        getStudents(item) {
            if(!item) {
                item = {}
            }
            axios.post('/user/getMusicTeamStu', qs.stringify({
                musicTeamId: this.classId, // 乐团Id
                name: '', // 学生姓名
                status: '', // 学生状态
                subId: '', // 声部编号
                page: item.page ? item.page : 1, //默认1第一页
                rows: item.rows ? item.rows : 100 // 默认20条数据
            })).then(r => {
                this.studentList = r.data.data.rows
            })
        },
        adjustSelect(item) {
            axios.post('/user/updateUserSub', qs.stringify({
                courseId: this.changeStudent.courseId,
                subId: item.subId,
                userId: this.changeStudent.id
            })).then(student => {
                if(student.data.code == 200) {
                    Toast(student.data.msg)
                    this.changeStudent.subName = item.name
                    this.adjustStatus = false
                }
            })
        },
        adjust(item) {
            // 开始调剂
            if(item.pushStatus <= 1 && item.status == 0) {
                this.adjustStatus = true
                this.changeStudent = item
            }
        }
    }
}
</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;
        }

    }
}
</style>