universal-wechat-uniapp-241007/pages_order/mine/browseHistory.vue

<template>
	<view class="browse-history">
		<navbar leftClick @leftClick="$utils.navigateBack" title="浏览历史" />
		
		<!-- 筛选标签 -->
		<view class="filter-tabs">
			<uv-tabs 
				:list="filterTabs" 
				:activeStyle="{color: '#000', fontWeight: 900, fontSize: '32rpx'}"
				lineColor="#5baaff" 
				lineHeight="6rpx" 
				lineWidth="50rpx" 
				keyName="title"
				@click="onFilterChange"
			/>
		</view>
		
		<!-- 浏览记录列表 -->
		<view class="history-list" v-if="historyList.length > 0">
			<view class="history-item" 
				v-for="(item, index) in historyList" 
				:key="index"
				@click="goToDetail(item)">
				
				<view class="item-content">
					<!-- 动态内容 -->
					<view class="dynamic-info">
						<view class="title" v-html="$utils.stringFormatHtml(item.title)"></view>
						<view class="meta-info">
							<text class="author">{{ item.userName }}</text>
							<text class="time">{{ $dayjs(item.createTime).format('MM-DD HH:mm') }}</text>
						</view>
					</view>
					
					<!-- 缩略图 -->
					<view class="thumbnail" v-if="item.image">
						<image :src="item.image.split(',')[0]" mode="aspectFill" />
					</view>
				</view>
				
				<!-- 浏览时间 -->
				<view class="browse-time">
					浏览于 {{ $dayjs(item.browseTime).format('YYYY-MM-DD HH:mm') }}
				</view>
			</view>
		</view>
		
		<!-- 空状态 -->
		<view class="empty-state" v-else-if="!loading">
			<uv-empty 
				text="暂无浏览记录" 
				icon="history"
				iconSize="120"
			/>
		</view>
		
		<!-- 加载更多 -->
		<uv-load-more 
			:status="loadStatus" 
			@loadmore="loadMore"
			v-if="historyList.length > 0"
		/>
	</view>
</template>

<script>
	import navbar from '@/components/base/navbar.vue'
	import mixinsList from '@/mixins/loadList.js'
	import { BROWSE_RECORD_CATEGORY } from '@/config/browseConfig.js'
	
	export default {
		mixins: [mixinsList],
		components: {
			navbar
		},
		data() {
			return {
				mixinsListApi: 'getBrowseRecordPage',
				filterTabs: [
					{ id: '', title: '全部' },
					{ id: 0, title: '动态' },
					{ id: 1, title: '租房' },
					{ id: 2, title: '工作' },
					{ id: 5, title: '活动' },
					{ id: 8, title: '文章' }
				],
				currentFilter: '',
				historyList: [],
				loading: false,
				loadStatus: 'loadmore'
			}
		},
		onLoad() {
			this.loadHistoryData()
		},
		onPullDownRefresh() {
			this.refreshData()
		},
		onReachBottom() {
			this.loadMore()
		},
		methods: {
			// 筛选类型改变
			onFilterChange(item) {
				this.currentFilter = item.id
				this.queryParams.type = item.id === '' ? undefined : item.id
				this.refreshList()
			},
			
			// 加载浏览历史数据
			loadHistoryData() {
				this.loading = true
				this.$api('getBrowseRecordPage', {
					...this.queryParams,
					category: BROWSE_RECORD_CATEGORY.BROWSE // 只获取浏览记录
				}, res => {
					this.loading = false
					uni.stopPullDownRefresh()
					
					if (res.code === 200) {
						const newData = res.result.records || res.result || []
						
						if (this.queryParams.pageNum === 1) {
							this.historyList = newData
						} else {
							this.historyList = [...this.historyList, ...newData]
						}
						
						// 更新加载状态
						if (newData.length < this.queryParams.pageSize) {
							this.loadStatus = 'nomore'
						} else {
							this.loadStatus = 'loadmore'
						}
					}
				})
			},
			
			// 刷新数据
			refreshData() {
				this.queryParams.pageNum = 1
				this.loadStatus = 'loadmore'
				this.loadHistoryData()
			},
			
			// 加载更多
			loadMore() {
				if (this.loadStatus === 'loadmore') {
					this.queryParams.pageNum++
					this.loadStatus = 'loading'
					this.loadHistoryData()
				}
			},
			
			// 跳转到详情页
			goToDetail(item) {
				const typeRouteMap = {
					0: '/pages_order/post/postDetail',
					1: '/pages_order/renting/rentingDetail',
					2: '/pages_order/work/workDetail',
					5: '/pages_order/activity/activityDetail',
					8: '/pages_order/article/articleDetail'
				}
				
				const route = typeRouteMap[item.type] || '/pages_order/post/postDetail'
				uni.navigateTo({
					url: `${route}?id=${item.orderId}`
				})
			}
		}
	}
</script>

<style scoped lang="scss">
	.browse-history {
		background-color: #f5f5f5;
		min-height: 100vh;
	}
	
	.filter-tabs {
		background-color: #fff;
		padding: 20rpx 0;
		margin-bottom: 20rpx;
	}
	
	.history-list {
		padding: 0 20rpx;
	}
	
	.history-item {
		background-color: #fff;
		border-radius: 20rpx;
		padding: 30rpx;
		margin-bottom: 20rpx;
		box-shadow: 0 2rpx 10rpx rgba(0, 0, 0, 0.1);
		
		.item-content {
			display: flex;
			align-items: flex-start;
			
			.dynamic-info {
				flex: 1;
				margin-right: 20rpx;
				
				.title {
					font-size: 32rpx;
					color: #333;
					line-height: 1.5;
					margin-bottom: 15rpx;
					display: -webkit-box;
					-webkit-box-orient: vertical;
					-webkit-line-clamp: 2;
					overflow: hidden;
					text-overflow: ellipsis;
				}
				
				.meta-info {
					display: flex;
					align-items: center;
					font-size: 26rpx;
					color: #999;
					
					.author {
						margin-right: 20rpx;
					}
				}
			}
			
			.thumbnail {
				width: 120rpx;
				height: 120rpx;
				border-radius: 12rpx;
				overflow: hidden;
				flex-shrink: 0;
				
				image {
					width: 100%;
					height: 100%;
				}
			}
		}
		
		.browse-time {
			margin-top: 20rpx;
			font-size: 24rpx;
			color: #999;
			text-align: right;
		}
	}
	
	.empty-state {
		padding: 100rpx 0;
		text-align: center;
	}
</style>