<template>
	<view class="my-collect-page">
		<!-- 顶部导航栏 -->
		<!-- 顶部导航栏 -->
		<uni-nav-bar
			left-icon="left"
			title="我的收藏"
			@clickLeft="goBack()"
			fixed
			color="#8B2316"
			height="180rpx"
			:border="false"
			backgroundColor="#eeeeee"
		>
			
		</uni-nav-bar>

		<!-- 内容区域 -->
		<view class="content-area">
			<!-- 观看历史 -->
			<view class="list-item" @click="goToEnglish">
				<text class="item-text">英文期刊</text>
				<uni-icons type="right" color="#999999" size="16"></uni-icons>
			</view>
			<!-- 分隔线 -->
			<view class="divider"></view>
			<view class="list-item" @click="goToVideo">
				<text class="item-text">肝胆视频</text>
				<uni-icons type="right" color="#999999" size="16"></uni-icons>
			</view>
			<view class="divider"></view>
			<view class="list-item" @click="goToFile">
				<text class="item-text">课件文档</text>
				<uni-icons type="right" color="#999999" size="16"></uni-icons>
			</view>
			<view class="divider"></view>
			<view class="list-item" @click="goToNews">
				<text class="item-text">肝胆新闻</text>
				<uni-icons type="right" color="#999999" size="16"></uni-icons>
			</view>
			<view class="divider"></view>
			<view class="list-item" @click="goToHuanjiao">
				<text class="item-text">患教学堂</text>
				<uni-icons type="right" color="#999999" size="16"></uni-icons>
			</view>
			<view class="divider"></view>
		</view>
	</view>
</template>

<script setup>
import { ref } from 'vue';
import navTo  from "@/utils/navTo.js";
const goBack = () => {
	uni.navigateBack();
};

const goToVideo = () => {
	navTo({
		url:'/pages_app/myCollect/video'
	})
};


const goToEnglish = () => {
	navTo({
		url:'/pages_app/myCollect/english'
	})
};

const goToFile = () => {
	navTo({
		url:'/pages_app/myCollect/file'
	})
};

const goToNews = () => {
	navTo({
		url:'/pages_app/myCollect/news'
	})
};

const goToHuanjiao = () => {
	navTo({
		url:'/pages_app/myCollect/huanjiao'
	})
};

const goToHistory = () => {
	uni.showToast({ title: '观看历史', icon: 'none' });
};

const goToCache = () => {
	uni.showToast({ title: '离线缓存', icon: 'none' });
};
</script>

<style lang="scss" scoped>
.my-collect-page {
	min-height: 100vh;
	background: #f9f9f9;
}

.content-area {
	
}

.list-item {
	display: flex;
	align-items: center;
	justify-content: space-between;
	padding: 30rpx 30rpx;
	background: #ffffff;
	
	.item-text {
		font-size: 32rpx;
		color: #000000;
	}
}

.divider {
	height: 2rpx;
	background: #f0f0f0;
	
}
</style>
