zhxy-desk/pages/studentRanked/components/mark-score-list.vue

<template>
	<el-drawer append-to-body title="点评记录" :visible.sync="show" size="400px" direction="ltr"
		style="backdrop-filter: blur(4px);">
		<u-cell-group v-for="(item,index) in list" :key="index">
			<u-cell class="ui-hover" clickable :title="item.student.student_name">

				<view slot="icon" class="ui-mr10">
					<image :src="item.stuSchool.student_photo" style="width: 40px;height: 40px;border-radius: 20px;">
					</image>
				</view>

				<text slot="label" class="txt-muted">{{item.created_at}} </text>
				<el-tag v-if="item.studentTab.type_text == '好评'" slot="value"
					plain>{{item.studentTab.tab_name}}{{item.score}}</el-tag>
				<el-tag slot="value" v-else plain type="danger">{{item.studentTab.tab_name}}{{item.score}}</el-tag>
				<!-- <u-badge slot="value" value="+1" plain size="mini" type="success"></u-badge> -->
			</u-cell>

		</u-cell-group>
		<view  @click="addTab" class="text-center ui-m ui-p" style="width: 100%;cursor: pointer;">
			{{ showTitle }}
		</view>
	</el-drawer>
</template>

<script>
	export default {
		props: {
			chooseClassId :{
				type : Number|String,
				default : ""
			},
		},
		data() {
			return {
				show: false,
				current_page : 1,
				list : [],
				last_page : 10,
				showTitle : '加载更多',
			}
		},
		mounted() {

		},
		methods: {
			open() {
				this.show = true
			},
			addTab() {
				if(this.showTitle=="没有更多数据了。。。"){
					return
				}
				this.$api.sendRequest({
					url: `/mobile/studentTab/getstudentTabLog`,
					method: "post",
					data: {
						page: this.current_page,
						class_id: this.chooseClassId
					},
					success: res => {
						let arr = [...this.list, ...res.data.data]
						this.current_page++
						this.list =[...this.list,...res.data.data] 
						if (this.current_page >= res.data.last_page) {
							this.showTitle='没有更多数据了。。。'
						}
					}
				})
			}
		},

	}
</script>

<style>
</style>