feiniao-youwei-uniapp/pages/tabBar/tree/subPages/dynamic.vue

<template>
	<view class="sub-base-container">
		<view class="messgae-list" v-for="(item,index) in messageList" :key="index">
			<text class="date">{{item.date}}</text>
			<view class="message-item" v-for="(ele,idx) in item.list" :key="idx">
				<view class="messgae-info">
					<view class="info-text">
						<up-image class="avatar" :fade="false" :src="ele.icon" width="56rpx" height="56rpx"
							shape="circle"></up-image>
						<view><text class="my">{{ele.nickname}}</text> 使用 <text
								class="name">{{clockinTypeStr[ele.clockinType]}}</text> 能量增加 <text
								class="name">{{ele.energy}}分</text></view>
						<!-- <view><text class="my">励志人生</text> 向 <text class="name">茜茜荔</text> 留言 </view> -->
					</view>
					<!-- <text class="time">{{ele.createTime}}</text> -->
				</view>
				<view class="time">{{ele.createTime}}</view>
				<text class="message-text">{{ele.desc}}</text>
			</view>
		</view>
	</view>
</template>

<script setup>
	import {
		ref,
	} from 'vue';
	import TREE from '@/api/tree.js'
	import {
		onLoad
	} from '@dcloudio/uni-app'

	const messageList = ref([{
		date: '今天',
		list: []
	}])
	const farmBuyIdData = ref('')

	onLoad(({
		farmBuyId
	}) => {
		farmBuyIdData.value = farmBuyId
		getMessageList()
	})

	const clockinTypeStr = {
		'1': '每日阳光',
		"2": "分享守护",
		"3": "每日祝福"
	}

	const getMessageList = () => {
		const params = {
			page: 1,
			limit: 10,
			farmBuyId: farmBuyIdData.value
		}
		TREE.getEnergyRecords(params).then(res => {
			messageList.value[0].list = res.data || []
		})
	}
	// const messageList = [{
	// 		date: '今天',
	// 		list: [{
	// 				name: '茜茜荔',
	// 				date: '11:08',
	// 				desc: '记住，每一次挫折都是成功的垫脚石记住，每一次挫折都是成功的垫脚石'
	// 			},
	// 			{
	// 				name: '茜茜荔',
	// 				date: '11:08',
	// 				desc: '记住，每一次挫折都是成功的垫脚石记住，每一次挫折都是成功的垫脚石'
	// 			}
	// 		]
	// 	},
	// 	{
	// 		date: '昨天',
	// 		list: [{
	// 			name: '茜茜荔',
	// 			date: '11:08',
	// 			desc: '记住，每一次挫折都是成功的垫脚石记住，每一次挫折都是成功的垫脚石'
	// 		}]
	// 	},
	// 	{
	// 		date: '07/30',
	// 		list: [{
	// 			name: '茜茜荔',
	// 			date: '11:08',
	// 			desc: '记住，每一次挫折都是成功的垫脚石记住，每一次挫折都是成功的垫脚石'
	// 		}]
	// 	}
	// ]
</script>

<style lang="scss" scoped>
	.sub-base-container {
		.messgae-list {
			.date {
				font-size: 34rpx;
			}

			.message-item {
				margin-top: 24rpx;
				background: #fff;
				border-radius: 16rpx;
				padding: 24rpx 32rpx;
				.time {
					font-size: 28rpx;
					color: #999999;
					margin-left: 70rpx;
				}

				.messgae-info {
					display: flex;
					align-items: center;
					justify-content: space-between;
					margin-bottom: 16rpx;

					.info-text {
						display: flex;
						align-items: center;

						.my {
							font-weight: 500;
						}

						.name {
							color: #EAB400;
						}
					}

					.avatar {
						margin-right: 16rpx;
					}
				}

				.message-text {
					font-size: 28rpx;
				}
			}
		}

		.messgae-list+.messgae-list {
			margin-top: 24rpx;
		}
	}
</style>