xs/xs-app/pages/bookdetails/bookdetails-chapterCatalog.vue

<template>
	<view class="chapterCatalog_content">
		<view class="new-chapter" @click="clickReadChapter(book_data.chapter_count)">
			<view class="new-chapter__title">
				<view class="new-chapter__title__icon">
					<image class="image" src="../../static/imgs/public/img_new.png" mode=""></image>
				</view>
				<view class="new-chapter__title__name">
					{{book_data.chapter_new_name}}
				</view>
			</view>
			<view class="new-chapter__update-time">
				{{util.convertTimeString(book_data.chapter_time_time)}}更新
			</view>
		</view>
		<view class="first-chapter" v-if="first_chapter" @click="clickReadChapter(first_chapter.id)">
			{{first_chapter.name}}
		</view>
		<view class="two-chapter first-chapter" v-if="two_chapter" @click="clickReadChapter(two_chapter.id)">
			{{two_chapter.name}}
		</view>
		<view class="seeCatalog" @click="clickSeeCatalog()">
			<view class="seeCatalog__title">查看目录</view>
			<view class="seeCatalog__info">
				<view class="seeCatalog__info__name">
					{{seeCatalog_string}}
				</view>
				<uni-icons type="right"></uni-icons>
			</view>
		</view>
		<chapterCatalog v-if="showChapterList" :items="directoryList" :size="40" :remain="16"
		 :scrollHeight="windowHeight*0.6" @clickChar="goToChapter" @Close="hideChapterCatalog"
		 :unLockChapterList="unLockChapterList" :active="0">
		</chapterCatalog>
	</view>
</template>

<script setup lang="ts">
    import { ref } from 'vue';
    import { book_item_data, chapter_item_data } from '../../data/data';
    import { util } from '../../framework/util';
	import { tools } from '../../framework/tools';
	import chapterCatalog from '../../components/read/chapterCatalog.vue'
    import { UserStatus } from '../../stores/userStatusManager';
	const props = defineProps({
		book_data: Object,
	})
	const emits = defineEmits(['clickReadChapter'])
	
	let first_two_chapters:chapter_item_data[] = JSON.parse(props.book_data.first_two_chapters)
	let first_chapter = ref(null)
	let two_chapter = ref(null)
	if(first_two_chapters.length>0) {
		first_chapter.value = first_two_chapters[0]
	}
	if(first_two_chapters.length>1) {
		two_chapter.value = first_two_chapters[1]
	}
	
	let seeCatalog_string = ref('')
	if(props.book_data.book_is_action==1) {
		seeCatalog_string.value = `已完结 共${props.book_data.chapter_count}章`
	} else {
		seeCatalog_string.value = `连载至${props.book_data.chapter_count}章`
	}
	
	const {windowHeight} = uni.getSystemInfoSync()
	let showChapterList = ref(false)
	let directoryList:chapter_item_data[] = []	
	let unLockChapterList = ref([])
	
	function clickReadChapter(id:number) {
		emits('clickReadChapter',id)
	}
	
	function clickSeeCatalog() {
		showChapterCatalog()
	}
	
	function showChapterCatalog() {
		let book_data = props.book_data as book_item_data
		UserStatus().updateUserSelectBook(book_data)
		if(directoryList.length>0) {
			showChapterList.value = true
			return
		}
		util.showLoading()
		tools.getChapterList(props.book_data.chapter_path,(chapter_ls)=>{
			// console.log('chapter_ls=',chapter_ls)
			directoryList = chapter_ls
			unLockChapterList.value =[]
			tools.get_book_un_lock_list(props.book_data.book_id,(list)=>{
				util.hideLoading()
				if(list!=null){
					unLockChapterList.value = list
					showChapterList.value = true
				}else{
					util.showErrorToast('加载错误')
				}
			})
		})
	}
	
	function hideChapterCatalog(){
		showChapterList.value = false
	}
	
	function goToChapter(chapter_list_item_data:chapter_item_data) {
		emits('clickReadChapter',chapter_list_item_data.id)
	}
	
</script>

<style lang="scss">
	.chapterCatalog_content{
		display: flex;
		flex-direction: column;
		padding: 0 40rpx;
		margin-top: 40rpx;
		// margin-bottom: 30rpx;
		
		.new-chapter{
			display: flex;
			flex-direction: row;
			justify-content: space-between;
			font-size: 16px;
			color: #FE4977;
			&__title{
				display: flex;
				flex-direction: row;
				&__icon{
					flex-shrink: 0;
					width: 55rpx;
					height: 26rpx;
					.image{
						width: 100%;
						height: 100%;
					}
				}
				&__name{
					margin-left: 15rpx;
					font-size: 17px;
				}
			}
			&__update-time{
				
			}
		}
		.first-chapter{
			margin-top: 16rpx;
			font-size: 16px;
			color: #5E5E5E;
		}
		.two-chapter{
			
		}
		
		.seeCatalog{
			display: flex;
			flex-direction: row;
			justify-content: space-between;
			align-items: center;
			padding: 0 25rpx;
			margin-top: 30rpx;
			height: 70rpx;
			border-radius: 15rpx;
			background-color: #F9F7F8;
			&__title{
				font-size: 16px;
				color: #000;
			}
			&__info{
				display: flex;
				flex-direction: row;
				align-items: center;
				&__name {
					font-size: 14px;
					color: #757575;
				}
			}
		}
		
	}
</style>