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

<template>
    <div class="studentList">
        <van-sticky :offset-top="isHead ? '.46rem' : 0">
            <van-dropdown-menu active-color="#01C1B5">
                <van-dropdown-item v-model="value1" @change="getList" :options="option1" />
                <van-dropdown-item v-model="value2" @change="getList" :options="option2" />
            </van-dropdown-menu>
            <!-- <van-search
            show-action
            shape="round"
            :left-icon="searchIcon"
            @search="onSearch"
            v-model="search"
            placeholder="请输入学生名或手机号"
            >
                <template #action>
                    <div @click="onSearch">搜索</div>
                </template>
            </van-search> -->
        </van-sticky>
        <div class="studentContainer">
            <van-cell-group v-if="dataShow">
            <van-cell
                v-for="(item, index) in dataListArray"
                :key="index"
                class="input-cell"
                :center="true"
            >
                <template slot="icon">
                    <img class="logo" v-if="item.headUrl" :src="item.headUrl" alt="" />
                    <img class="logo" v-else src="@/assets/images/icon_student.png" alt="" />
                </template>
                <template slot="title">
                    <div class="studentName">
                        {{ item.name }}
                        <div class='icon' v-if="item.memberRankSettingId">
                            <img src='./icons/vip_icon.png' />
                        </div>
                    </div>
                </template>
                <template slot="label">
                    <span>{{ (item.subjectName) }}</span>
                </template>
            </van-cell>
            </van-cell-group>
            <m-empty class="empty" v-else key="data" />
        </div>
        <!-- <div class="button-group-popup">
            <span class="btn">取消</span>
        </div> -->
    </div>
</template>

<script>
import MEmpty from "@/components/MEmpty"
import deepClone from '@/helpers/deep-clone'
export default {
    props: {
        isHead: {
            type: Boolean,
            default() {
                return false
            }
        },
        dataList: {
            type: Array,
            default() {
                return []
            }
        },
        dataSubjectList: {
            type: Array,
            default() {
                return []
            }
        }
    },
    components: { MEmpty },
    watch: {
        dataList(newVal) {
            this.dataListArray = newVal
        }
    },
    data() {
        return {
            search: null,
            value1: 0,
            value2: 0,
            option1: [
                { text: '全部声部', value: 0 },
            ],
            option2: [
                { text: '全部学员', value: 0 },
                { text: '会员学员', value: 'b' },
                { text: '普通会员', value: 'c' },
            ],
            dataShow: true,
            dataListArray: [],
            allArray: [],
            searchIcon: require("@/assets/images/search.png"),
        }
    },
    mounted() {
        this.dataListArray = this.dataList
        // console.log(this.dataList)
        this.allArray = deepClone(this.dataList)
        this.dataSubjectList.forEach(subject => {
            this.option1.push({
                text: subject.subjectName,
                value: subject.id
            })
        })
    },
    methods: {
        onSearch() {
            this.getList()
        },
        getList() {
            this.dataShow = true
            let search = this.search,
                subject = this.value1 ? this.value1 : null,
                student = this.value2 ? this.value2 : null
            let tempArray = []
            let allArray = this.allArray
            for(let i = 0; i < allArray.length; i++) {
                if(search && allArray[i].name.indexOf(search) < 0) {
                    break
                }
                if(subject && allArray[i].subjectIdList != subject) {
                    break
                }
                if(student) {
                    if(student == 'a' && !allArray[i].memberRankSettingId) {
                        break
                    } else if(student == 'c' && allArray[i].memberRankSettingId) {
                        break
                    }
                }
                tempArray.push(allArray[i])
            }
            this.dataListArray = tempArray
            if(tempArray.length <= 0) {
                this.dataShow = false
            }
        }
    }
}
</script>

<style lang="less" scoped>
@import url("../../../assets/commonLess/variable.less");
.studentList {
    background-color: #f5f5f5;
    min-height: calc(100vh - .8rem);
}
/deep/.van-search .van-cell {
  padding: 5px 8px 5px 0 !important;
}
.paddingB80 {
  padding-bottom: 0.8rem;
}
.studentName {
  font-size: 0.16rem;
  color: #1a1a1a;
  line-height: 0.22rem;
  display: flex;
}
.studentContainer {
  /deep/.van-cell__title {
    font-size: 0.14rem;
    color: @mFontColor;
    // flex: 1 auto;
  }

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

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

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

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

  /deep/.van-radio__icon .van-icon {
    border-color: #d3d3d3;
  }

  /deep/.van-radio__icon--checked {
    .van-icon {
      border-color: @mColor;
      background: @mColor;
    }
  }

  .icon{
        display: flex;
        align-items: center;
        margin-left: .15rem;
        img{
            width: .4rem;
            // margin-top: -.02rem;
        }
    }

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