Mini_Program/pages/browsing-history/browsing-history.vue

<template>
	<view class="container">
		<!-- 顶部导航栏 -->
		<view class="header">
			<view class="back-btn" @click="goBack">
				<text class="back-icon">←</text>
			</view>
			<text class="header-title">浏览记录</text>
			<view class="clear-btn" @click="handleClear">
				<text class="clear-text">清空</text>
			</view>
		</view>
		
		<!-- 浏览记录列表 -->
		<scroll-view class="scroll-content" scroll-y>
			<view class="history-list">
				<view 
					class="history-item" 
					v-for="(item, index) in historyList" 
					:key="index"
					@click="goToBookDetail(item)"
				>
					<image class="book-cover" :src="item.image" mode="aspectFill" :lazy-load="true"></image>
					<view class="book-info">
						<text class="book-title">{{ item.title }}</text>
						<text class="book-time">{{ item.time }}</text>
					</view>
				</view>
			</view>
			
			<view class="empty-state" v-if="historyList.length === 0">
				<text class="empty-text">暂无浏览记录</text>
			</view>
		</scroll-view>
	</view>
</template>

<script>
	import { getBrowsingHistory, clearBrowsingHistory } from '../../utils/api.js'
	
	export default {
		data() {
			return {
				historyList: [],
				userInfo: null,
				isLoading: false
			}
		},
		onLoad() {
			// 获取用户信息
			try {
				const userInfo = uni.getStorageSync('userInfo')
				if (userInfo && userInfo.id) {
					this.userInfo = userInfo
					// 加载浏览记录
					this.loadBrowsingHistory()
				} else {
					uni.showToast({
						title: '请先登录',
						icon: 'none'
					})
					setTimeout(() => {
						uni.navigateBack()
					}, 1500)
				}
			} catch (e) {
				console.error('获取用户信息失败', e)
			}
		},
		methods: {
			goBack() {
				uni.navigateBack()
			},
			async loadBrowsingHistory() {
				if (!this.userInfo || !this.userInfo.id) {
					return
				}
				
				try {
					this.isLoading = true
					const res = await getBrowsingHistory(this.userInfo.id)
					
					if (res && res.code === 200 && res.data) {
						this.historyList = res.data.map(item => ({
							id: item.bookId,
							title: item.title || '未知书籍',
							image: item.image || 'https://via.placeholder.com/200x300?text=No+Image',
							time: item.time || ''
						}))
					} else {
						this.historyList = []
					}
				} catch (e) {
					console.error('加载浏览记录失败', e)
					this.historyList = []
				} finally {
					this.isLoading = false
				}
			},
			handleClear() {
				if (!this.userInfo || !this.userInfo.id) {
					return
				}
				
				uni.showModal({
					title: '提示',
					content: '确定要清空所有浏览记录吗？',
					success: async (res) => {
						if (res.confirm) {
							try {
								uni.showLoading({
									title: '清空中...',
									mask: true
								})
								
								const result = await clearBrowsingHistory(this.userInfo.id)
								uni.hideLoading()
								
								if (result && result.code === 200) {
									this.historyList = []
									uni.showToast({
										title: '已清空',
										icon: 'success'
									})
								} else {
									uni.showToast({
										title: result.message || '清空失败',
										icon: 'none'
									})
								}
							} catch (e) {
								uni.hideLoading()
								console.error('清空浏览记录失败', e)
								uni.showToast({
									title: '清空失败，请重试',
									icon: 'none'
								})
							}
						}
					}
				})
			},
			goToBookDetail(item) {
				if (!item || !item.id) {
					uni.showToast({
						title: '书籍信息不完整',
						icon: 'none'
					})
					return
				}
				uni.navigateTo({
					url: `/pages/book-detail/book-detail?bookId=${item.id}`
				})
			}
		}
	}
</script>

<style scoped>
	.container {
		width: 100%;
		height: 100vh;
		background-color: #FFFFFF;
		display: flex;
		flex-direction: column;
		padding-top: 30px;
		box-sizing: border-box;
	}
	
	.header {
		display: flex;
		align-items: center;
		justify-content: space-between;
		padding: 20rpx 30rpx;
		background-color: #FFFFFF;
		border-bottom: 1rpx solid #E0E0E0;
		position: relative;
	}
	
	.back-btn {
		width: 60rpx;
		height: 60rpx;
		display: flex;
		align-items: center;
		justify-content: center;
	}
	
	.back-icon {
		font-size: 40rpx;
		color: #333333;
		font-weight: bold;
	}
	
	.header-title {
		position: absolute;
		left: 50%;
		transform: translateX(-50%);
		font-size: 36rpx;
		font-weight: bold;
		color: #333333;
	}
	
	.clear-btn {
		width: 80rpx;
		height: 60rpx;
		display: flex;
		align-items: center;
		justify-content: center;
	}
	
	.clear-text {
		font-size: 28rpx;
		color: #666666;
	}
	
	.scroll-content {
		flex: 1;
		width: 100%;
		padding: 20rpx 30rpx;
	}
	
	.history-list {
		display: flex;
		flex-direction: column;
	}
	
	.history-item {
		display: flex;
		align-items: center;
		padding: 30rpx 0;
		border-bottom: 1rpx solid #F0F0F0;
	}
	
	.history-item:last-child {
		border-bottom: none;
	}
	
	.book-cover {
		width: 160rpx;
		height: 220rpx;
		border-radius: 8rpx;
		margin-right: 30rpx;
		flex-shrink: 0;
		box-shadow: 0 2rpx 8rpx rgba(0,0,0,0.1);
		background-color: #F5F5F5;
	}
	
	.book-info {
		flex: 1;
		display: flex;
		flex-direction: column;
		justify-content: center;
		min-width: 0;
	}
	
	.book-title {
		font-size: 32rpx;
		font-weight: bold;
		color: #333333;
		margin-bottom: 20rpx;
		overflow: hidden;
		text-overflow: ellipsis;
		white-space: nowrap;
	}
	
	.book-time {
		font-size: 24rpx;
		color: #999999;
	}
	
	.empty-state {
		padding: 200rpx 0;
		text-align: center;
	}
	
	.empty-text {
		font-size: 28rpx;
		color: #999999;
	}
</style>