renshouH5/mine/clientDynamic/clientDynamic.vue

<template>
	<view>
		<view class="tab ddflex">
			<view class="tab-item fflex" :class="tabIndex==1?'tab-item-active':''" @click="tabChange(1)">今日动态</view>
			<view class="tab-item fflex" :class="tabIndex==2?'tab-item-active':''" @click="tabChange(2)">历史动态</view>
		</view>
		<view style="height: 120rpx;"></view>
		
		<view class="log">
			<view v-if="logsList && logsList.length > 0" v-for="(it, index) in logsList" :key="index">
				<view class="time-year" v-if="todayYear!=it.year && index==0 || (index!=0 && (it.year!=logsList[index-1].year))">{{ it.year }}年</view>
				<view class="dflex">
					<view class="time-sort">
						<block v-if="index==0 || (index!=0 && (it.day!=logsList[index-1].day||it.month!=logsList[index-1].month||it.year!=logsList[index-1].year))">
							<text v-if="todayYear==it.year&&todayMonth==it.month&&todayDay==it.day">今日</text>
							<block v-else>
								<text>{{it.day}}</text>{{ it.month }}月
							</block>
						</block>
					</view>
					<view class="li fflex">
						<image src="/mine/static/images/jcico.png" class="jcico"></image>
						<view class="time">{{ it.time }}</view>
						<!-- <view class="des" v-if="it.brief">{{ it.brief }}</view> -->
						<rich-text class="des" :nodes="it.content"></rich-text>
					</view>
				</view>
			</view>
			<view v-if="!logsList || logsList.length == 0" class="nodata">
				<image src="/mine/static/images/empty.png" mode="aspectFill"></image>
				<view>暂无记录~</view>
			</view>
		</view>
		
	</view>
</template>

<script>
	const app = getApp();
	const req = require("../../utils/request.js");

	export default {
		components: {},
		props: {},
		data() {
			return {
				id:'',
				tabIndex:1,
				isLoad: true,
				form: {
					page: 1,
					limit: 10
				},
				
				logsList:[{
					createDate:'2023-03-04',
					brief:'阅读了《3·15|手把手教你读懂“食品标签”，拒绝被“坑”》',
					logsContent:'sss',
					year:"2022",
					month:"10",
					day:'30',
					time:'12:00'
					
				},{
					createDate:'2023-03-04',
					brief:'阅读了《3·15|手把手教你读懂“食品标签”，拒绝被“坑”》',
					logsContent:'sss',
					year:"2023",
					month:"4",
					day:'30',
					time:'12:00'
					
				},{
					createDate:'2023-03-04',
					brief:'浏览了中医馆私域解决方案',
					logsContent:'sss',
					year:"2023",
					month:"3",
					day:'04',
					time:'12:00'
				},{
					createDate:'2023-03-04',
					brief:'填写了表单《英才少儿教育精品VIP课程试听报名》',
					logsContent:'sss',
					year:"2023",
					month:"3",
					day:'03',
					time:'12:00'
				},{
					createDate:'2023-03-04',
					brief:'浏览了中医馆私域解决方案',
					logsContent:'sss',
					year:"2023",
					month:"3",
					day:'03',
					time:'12:00'
				},{
					createDate:'2023-03-04',
					brief:'填写了表单《英才少儿教育精品VIP课程试听报名》',
					logsContent:'sss',
					year:"2023",
					month:"2",
					day:'04',
					time:'12:00'
				},{
					createDate:'2023-03-04',
					brief:'浏览了中医馆私域解决方案',
					logsContent:'sss',
					year:"2022",
					month:"2",
					day:'04',
					time:'12:00'
				},{
					createDate:'2023-03-04',
					brief:'填写了表单《英才少儿教育精品VIP课程试听报名》',
					logsContent:'sss',
					year:"2022",
					month:"2",
					day:'03',
					time:'12:00'
				}],
				todayYear:'',
				todayMonth:'',
				todayDay:''
			}
		},
		onLoad(options) {
			this.id = options.id
			this.todayYear = new Date().getFullYear()
			this.todayMonth = new Date().getMonth() + 1
			this.todayDay = new Date().getDate()
			this.getPageList()
		},
		onShow() {
			
		},
		onReachBottom: function() {
			this.form.page++;
			this.getPageList(false);
		},
		methods: {
			tabChange(index){
				if(this.tabIndex==index) return false
				this.tabIndex = index
				this.form.page = 1
				this.isLoad = true;
				this.getPageList(true)
			},
			getPageList(isShow) {
				if (!this.isLoad) return false;
				this.isLoad = false;
				let form = this.form;
				form.uid = this.id
				if(this.tabIndex==1) form.today = 1
				else form.today = ''
				uni.showLoading();
				req.getRequest(
					'/api/user/getUserTrends',
					form,
					res => {
						res  = res?res.list:[]
						if(res&&res.length>0){
							res.map(item=>{
								let t = this.getDate(item.createDate)
								item.year = t.year
								item.month = t.month
								item.day = t.day
								item.time = t.hour+':'+t.minute
							})
						}
						this.isShow = true;
						if (res && res.length == 10) {
							this.isLoad = true;
						}
						if (this.form.page > 1) {
							res = this.logsList.concat(res);
						}else{
							this.goTop()
						}
						this.logsList = res;
						uni.hideLoading();
					},
					isShow
				);
			},
			getDate(dateStr){
				if(!dateStr) return false
				let date = new Date(dateStr)
				const year = date.getFullYear();
				const month = date.getMonth() + 1;
				const day = date.getDate();
				const hour = date.getHours();
				const minute = date.getMinutes();
				const second = date.getSeconds();
				return {
					year:year,
					month:month,
					day:day,
					hour:hour,
					minute:minute,
					second:second,
				}
			},
			goTop(e) {
				// 一键回到顶部
				if (uni.pageScrollTo) {
					uni.pageScrollTo({
						scrollTop: 0,
						duration:100
					});
				}
			}
		},
		mounted() {
		},
	}
</script>

<style>
	@import "./clientDynamic.css";
</style>