<template>
<div class="">
<van-sticky>
<div>
<van-nav-bar style="background-color: #FF5777;" @click-left="onClickLeft">
<template #left>
<van-icon name='arrow-left' color="#FFFFFF" size="16px">
</van-icon>
<span style="color: #FFFFFF;font-size: 16px;padding-left: .1rem;">返回</span>
</template>
<template #title>
<span style="color: #FFFFFF;">新生列表</span>
</template>
</van-nav-bar>
<!-- 学生导航 -->
<van-row type="flex" justify="space-between" class='my-stu-nav'>
<van-col span="6">姓名</van-col>
<van-col span="6">学号</van-col>
<van-col span="6">领物品</van-col>
<van-col span="6">缴费</van-col>
</van-row>
<form action="">
<van-search v-model="keywords" show-action placeholder="请输入学生姓名或学号" @search="onSearch" @cancel="onCancel" />
</form>
</div>
</van-sticky>
<!-- 学生列表 -->
<div>
<van-list v-model="loading" :finished="finished" :immediate-check='immediate' finished-text="没有更多了" @load="onLoadMore">
<van-row type="flex" v-for='(item,index) in list' :key='item.id' @click="gotoDetail(item.id)" justify="space-between" class='my-stu-list'>
<van-col span="6">{{item.name}}</van-col>
<van-col span="6">{{item.no}}</van-col>
<van-col span="6">{{item.is_get}}</van-col>
<van-col span="6">{{item.is_pay}}</van-col>
</van-row>
</van-list>
</div>
</div>
</template>
<script>
import {get_student_list} from '@/model/student.js'
export default {
name: '',
data() {
return {
keywords: '',
list: [],
loading: false,
finished: false,
immediate:true,
page:1,
pagesize:20
}
},
created() {
},
watch: {
//监听属性和事件
},
methods: {
//加载数据
onLoadMore() {
// 异步更新数据
get_student_list(this.keywords,this.page,this.pagesize).then(res=>{
if(res.code == 100000){
if(this.page == 1){
this.list = res.result
}else{
this.list = this.list.concat(res.result)
}
this.page = this.page + 1
// 加载状态结束
this.loading = false;
}else{
//数据全部加载完成
this.finished = true;
}
})
},
//点击返回
onClickLeft() {
this.$router.back()
},
//点击搜索
onSearch() {
this.page = 1
this.onLoadMore();
},
//取消搜索
onCancel() {
this.page = 1
this.onLoadMore();
},
//跳到详情
gotoDetail(id) {
this.$router.push('/stu/detail/' + id)
}
},
computed: {
//计算属性
},
beforeCreate() {
//console.log('beforeCreate函数......');
},
beforeMount() {
//mounted函数时页面标签的内容基本还没有渲染完成
},
mounted() {
//mounted函数时页面标签的内容基本已经渲染完成时调用这个函数
},
beforeDestroy() {
//console.log('beforeDestroy函数......');
},
destroyed() {
//console.log('destroyed函数......');
},
beforeUpdate() {
//当数据发生改变时,在标签没有被渲染之前触发
},
updated() {
//当数据发生改变时,在标签被渲染后触发
}
}
</script>
<style scoped>
.my-stu-nav {
background-color: #1989FA;
text-align: center;
height: 30px;
font-size: 16px;
line-height: 30px;
color: #FFFFFF;
}
.my-stu-list {
text-align: center;
height: 45px;
font-size: 14px;
line-height: 45px;
border-bottom: 2px solid #EBE8E8;
}
</style>