mteacher/src/views/activeProgram/modal/studentList.vue

<template>
    <div>
        <!-- <van-sticky>
            <van-search
            show-action
            shape="round"
            @search="onSearch"
            v-model="params.search"
            placeholder="请输入学生名或手机号"
            >
            <template #action>
                <div @click="onSearch">搜索</div>
            </template>
            </van-search>
        </van-sticky> -->
        <div class="paddingB80">
            <!-- <van-list
                v-model="loading"
                class="studentContainer"
                v-if="dataShow"
                key="data"
                :finished="finished"
                finished-text=""
                @load="getStudent"
            > -->
            <div class="studentContainer" v-if="dataShow" key="data">
                <van-checkbox-group v-model="checkboxSelect">
                    <van-cell-group :border="false">
                        <van-cell
                            v-for="(item, index) in dataList"
                            :key="index"
                            @click="onCheckboxSelect(item)"
                            class="input-cell"
                            value-class="value-times"
                            :center="true"
                        >
                            <template slot="icon">
                                <img
                                    class="logo"
                                    v-if="item.avatar"
                                    :src="item.avatar"
                                    alt=""
                                />
                                <img
                                    class="logo"
                                    v-else
                                    src="@/assets/images/icon_student.png"
                                    alt=""
                                />
                            </template>
                            <template slot="title">
                                {{ item.username }}
                            </template>
                            <template slot="default">
                                <span style="font-size: .16rem;color: #1A1A1A;">可排课次数：<span style="color: #01C1B5;">{{ item.showStudentNum }}</span></span>
                            </template>
                            <template slot="extra">
                                <van-checkbox :name="item.userId">
                                    <template #icon="props">
                                        <img v-if="!item.radioDisabled" class="img-icon" :src="props.checked ? activeButtonIcon : inactiveButtonIcon" />
                                    </template>
                                </van-checkbox>
                            </template>
                        </van-cell>
                    </van-cell-group>
                </van-checkbox-group>
            </div>
            <!-- </van-list> -->
            <m-empty class="empty" msg="暂无学生" v-else key="data" />
        </div>
        <div class="button-group-popup">
            <span class="btn" @click="onPopupCancel">取消</span>
            <span class="btn primary" @click="onPopupSubmit">确定</span>
        </div>
    </div>
</template>

<script>
import MEmpty from "@/components/MEmpty";
import { getActivityStudentCanCourseNum } from '../api'
export default {
    components: {
        MEmpty
    },
    // courseTypeIsVip 当前排课的类型，可能是赠送课程
    props: ['studentList', 'activityId', 'courseTypeIsVip', 'typeStatus', 'studentNum', 'isMusicTheory'],
    data() {
        return {
            params: {
                search: null,
                activityId: this.activityId
            },
            dataShow: true, // 是否有数据
            dataList: [],
            checkboxSelect: [],
        }
    },
    watch: {
        studentList(newVal) {
            if(newVal) {
                let tempVal = newVal || []
                this.checkboxSelect = []
                tempVal.forEach(item => {
                    this.checkboxSelect.push(item.userId)
                })
            }
        }
    },
    mounted() {
        this.getStudent()
    },
    methods: {
        // 搜索
        // onSearch() {
        //     this.dataList = [];
        //     this.getStudent();
        // },
        async getStudent() {
            let params = this.params;
            try {
                const res = await getActivityStudentCanCourseNum(params)
                let result = res.data || []
                let showResult = []
                result.forEach(item => {
                    let showStudentNum = 0
                    if (this.typeStatus) {
                        showStudentNum = this.courseTypeIsVip ? item.vipNum : item.practiceNum
                    } else {
                        showStudentNum = this.courseTypeIsVip ? item.giveVipNum : item.givePracticeNum
                    }
                    item.showStudentNum = showStudentNum
                    // 判断次数大于0的学生展示
                    if(showStudentNum > 0) {
                        showResult.push(item)
                    }
                })
                this.dataList = showResult
                if(showResult.length > 0) {
                    this.dataShow = true
                } else {
                    this.dataShow = false
                }
            } catch {
                //
            }
        },
        onCheckboxSelect(value) {
            if (this.checkboxSelect.includes(value.userId)) {
                this.checkboxSelect.forEach((item, index) => {
                    if(item === value.userId) {
                        this.checkboxSelect.splice(index, 1)
                    }
                })
            } else {
                this.checkboxSelect.push(value.userId)
            }
        },
        onPopupCancel() {
            this.$listeners.close()
        },
        onPopupSubmit() {
            if (this.isMusicTheory) {
                if (!(this.checkboxSelect.length >= 1 && this.checkboxSelect.length <= this.studentNum)) {
                    this.$toast(`请选择1-${this.studentNum}名学生，当前选择${this.checkboxSelect.length}名`);
                    return;
                }
            } else {
                if (this.checkboxSelect.length != this.studentNum) {
                    this.$toast(`请选择学生${this.studentNum}名，当前选择${this.checkboxSelect.length}名`);
                    return;
                }
            }
            let dataList = this.dataList || []
            let checkList = []
            dataList.forEach(item => {
                if(this.checkboxSelect.includes(item.userId)) {
                    checkList.push(item)
                }
            })
            this.$emit('submit', checkList)
        }
    }
}
</script>

<style lang="less" scoped>
@import url("../../../assets/commonLess/variable.less");
.studentContainer {
    padding-top: .1rem;
    background-color: #fff;
    /deep/.van-cell__title {
        font-size: 0.16rem;
        color: @mFontColor;
        // flex: 1 auto;
    }

    .logo {
        width: 0.35rem;
        height: 0.35rem;
        margin-right: 0.12rem;
        border-radius: 100%;
    }

    .input-cell {
        padding: 0.12rem 0.16rem 0.2rem;

        .van-checkbox {
            justify-content: flex-end;
        }
    }

    /deep/.van-cell__value {
        height: 0.2rem;
    }

    /deep/.van-checkbox__icon .van-icon {
        border-color: @sFontColor;
    }
    /deep/.van-checkbox__icon--checked .van-icon {
        border-color: #01C1B5;
    }

    .van-tag {
        margin-left: 0.08rem;
    }
}
.value-times {
    display: flex;
    align-items: center;
    justify-content: center;
}
.paddingB80 {
    padding-bottom: 0.8rem;
}
.button-group-popup {
    position: fixed;
    bottom: 0;
    padding: 0.2rem 0;
    width: 100%;
    text-align: center;
    background-color: #ffffff;
    .btn {
        padding: 0 0.45rem;
        line-height: 0.4rem;
        display: inline-block;
        border: 1px solid @mColor;
        border-radius: 1rem;
        color: @mColor;
        background: #fff;
        font-size: 0.18rem;
        &.primary {
        color: #fff;
        background: @mColor;
        }
    }
    .btn + .btn {
        margin-left: 0.1rem;
    }
}
</style>