zhxy-desk/components/visitLogList.vue

<template>
	<view class="log" >
		<view class="" v-if="list.length">
			<u-list @scrolltolower="scrolltolower" height="90vh">
				<view v-for="(item,index) in list" :key="index" class="log-item">
					<view class="log-item-content">
						<view class="log-item-content-left">
							<image style="width: 80rpx;height: 80rpx;border-radius: 50%;" :src="item.teacher.teacher_photo" mode=""></image>
							<view class="log-item-content-left-text">
								<view class="">
									{{item.teacher.teacher_name}}
								</view>
								<view class="">
									{{item.teacher.teacher_number}}
								</view>
							</view>
						</view>
						<view class="log-item-content-right">
							<view :style="`background:${item.color} ;` " class="log-item-content-right-color">

							</view>
							<view :style="{color : item.state==1 ? '#43B3FF' : item.state==2 ? '#05cca1' : '#FE6B6B'}" class="log-item-content-right-text">
								{{item.state_text}}
							</view>
						</view>
					</view>
					<view class="log-item-info">
						<view style="color: #999;">
							拜访人
						</view>
						<view>
							{{item.student.student_name}}
						</view>
					</view>
					<view class="log-item-info">
						<view style="color: #999;">
							拜访时间
						</view>
						<view>
							{{item.visit_time_str}}
						</view>
					</view>

					<view style="border: 0;padding-bottom: 0;" class="log-item-info">
						<view style="color: #999;">
							拜访事由
						</view>
						<view>
							{{item.reason}}
						</view>
					</view>
					<view style="border: 0;padding-bottom: 0;" class="log-item-info">
						<view style="color: #999;">
							备注
						</view>
						<view>
							{{item.notes}}
						</view>
					</view>
				</view>
				<u-loadmore status="nomore" v-if="is_bottom"/>
			</u-list>
		</view>
		<view class="" v-else>
			<u-empty mode="data" ></u-empty>
		</view>
	</view>
</template>

<script>
	import { getVisitList } from "@/common/api/visit.js"
	export default {
		name: "visitLogList",
		props : {
			stu_school_id : {
				type : Number,
				default : '',
			}
		},
		data() {
			return {
				list : [],
				is_showed : false,		//第一次展示的时候查询一次，后续不需要
				page : 1,
				is_bottom : false,
			};
		},

		methods : {
			scrolltolower(){
				if(this.is_bottom==true) return
				this.$api.sendRequest({
					url: getVisitList,
					method : 'post',
					data : {
						stu_school_id : this.stu_school_id,
						size : 10,
						page : this.page
					},
					success: res => {
						console.log(res,"xiala");
						if(res.data.data.length==0){
							this.is_bottom=true
						}else{
							res.data.data.map(item=>{
								this.list.push(item)
							})
							this.page++
						}
					}
				})
			},
			setShow(){
				if(this.is_showed==false){
					this.getVisitList()
					this.is_showed=true
				}
			},
			getVisitList(){
	
				this.$api.sendRequest({
					url: getVisitList,
					method : 'post',
					data : {
						stu_school_id : this.stu_school_id,
						size : 10,
					},
					success: res => {
						console.log(res,"baifangjlu");
						this.list=res.data.data
						this.page++
					}
				})
			}
		}
	}
</script>

<style lang="scss" scoped>
	.log {
		box-sizing: border-box;
		width: 100%;
		height: 60vh;
		.log-item {
			padding: 32rpx;
			box-sizing: border-box;
			margin-bottom: 32rpx;
			width: 100%;
			background: #ffffff;
			border-radius: 5.33px;
			box-shadow: 0px 0px 6.67px 0px rgba(147, 147, 147, 0.10);

			.log-item-info {
				width: 100%;
				padding: 24rpx 0;
				border-bottom: 1px solid #f2f2f2;
				display: flex;
				justify-content: space-between;
			}

			.log-item-content {
				width: 100%;
				border-bottom: 1px solid #f2f2f2;
				font-size: 24rpx;
				padding-bottom: 24rpx;
				display: flex;
				align-items: center;
			}

			.log-item-content-left {
				display: flex;
				align-items: center;
				flex: 1;

				.log-item-content-left-text {
					margin-left: 32rpx;
				}
			}

			.log-item-content-right {
				display: flex;
				align-items: center;
			}

			.log-item-content-right-color {
				width: 20rpx;
				height: 20rpx;
				border-radius: 50%;
				margin-right: 20rpx;
			}

		}
	}
</style>