jhlapp/pagesT/customer/components/CommunicationLogs.vue

<template>
	<view>
		<view class="total-num">
			跟进记录<text>{{total}}</text>
		</view>
		<view class="com-ul">
			<view class="com-li" v-for="(item, index) in logs_list" :key="index">
				<view class="top clearfix">
					<view class="float_left staffName">{{ item.staffName }}</view>
					<view class="time float_right">{{ $u.timeFormat(item.time, 'yyyy-mm-dd hh:MM:ss') }}</view>
				</view>
				<view class="cont">{{ item.content }}</view>
				<view class="picture" v-if="item.picture">
					<image :src="item.picture" mode="aspectFill"></image>
				</view>
				<view class="address">{{ item.location }}</view>
			</view>
		</view>
		<u-loadmore :status="load_status" @loadmore="scrolltolower" :load-text="loadText" />
	</view>
</template>

<script>
export default {
	props: {
		customerId: {
			type: [Number, String],
			default: ''
		}
	},
	data() {
		return {
			loadText: {
				loadmore: '点击加载更多',
				loading: '努力加载中',
				nomore: '没有更多了'
			},
			load_status: 'nomore',
			logs_list: [],
			page: 1,
			pageSize: 10,
			total: 0
		};
	},
	created() {
		this.getAllCustomerCommunication();
	},
	methods: {
		scrolltolower() {
			if (this.total / this.pageSize > this.page) {
				this.page += 1;
				this.getAllCustomerCommunication();
			}
		},
		getAllCustomerCommunication() {
			this.load_status = 'loading';
			this.$u.api
				.getAllCustomerCommunication({
					page: this.page,
					pageSize: this.pageSize,
					customerId: this.customerId,
					staffId: '',
					star: '',
					end: ''
				})
				.then(res => {
					if (this.page === 1) {
						this.logs_list = res.data;
					} else {
						this.logs_list = this.logs_list.concat(res.data);
					}
					this.load_status = this.$utils.loadStatus(this.page, this.pageSize, res.pageTotal);
					this.total = res.pageTotal;
				});
		}
	}
};
</script>

<style lang="scss" scoped>
.log-scroll {
	height: 100vh;
}
.total-num{
	font-size: 24rpx;
	padding: 0 40rpx;
	line-height: 80rpx;
	text{
		color: #4076D6;
		margin-left: 8rpx;
	}
}
.com-ul {
	padding: 0 40rpx;
	.com-li {
		margin-bottom: 30rpx;
		padding-bottom: 30rpx;
		border-bottom: 1px dashed #B8C0C8;
		.top {
			.staffName{
				font-weight: 600;
			}
			.time{
				color: #CAD0D7;
				font-weight: 300;
				font-size: 24rpx;
			}
		}
		.cont {
			padding: 20rpx 0;
			line-height: 42rpx;
		}
		.picture{
			image{
				width: 300rpx;
				border-radius: 6rpx;
				height: 100rpx;
				display: block;
			}
		}
		.address{
			margin-top: 16rpx;
			color: #CAD0D7;
			font-weight: 400;
			font-size: 24rpx;
		}
	}
}
</style>