123

xs-app/components/read/chapterCatalog.vue

@@ -1,7 +1,27 @@
 <template>
 	<uni-popup @maskClick="emits('Close')" :animation="false" mask-background-color="rgba(0,0,0,0)" ref="catalog"  background-color="#fff"  @change="onChange">
+		<view style="'position': fixed;display: flex;
+		'justify-content': space-around;
+		'align-items': center;margin-left: auto;padding-left: 10%;padding-right: 10%;margin-top: 5%;" :style="{'backgroundColor':db_color}">
+			<image :src="book_data.book_cover" style="width: 100rpx;height: 150rpx;"></image>
+			<view style="margin-left: 100rpx;">
+				<view style="font-size: 1.5ex;" :style="{'color':font_color}" >{{book_data.book_name}}</view>
+				<view style="font-size: 1.5ex; margin-top: 50rpx;" :style="{'color':font_color}" >{{book_data.author_name}}</view>
+			</view>
+		</view>
+		<view style="display: flex;
+		align-items: center;margin-top: 5%;">
+			<view :style="{'color':font_color,'fontSize':'1.5ex','paddingLeft':'10%','width':'65%'}">{{tools.book_status_title(book_data)}}</view>
+			<view @click="onClickSort" :style="{'color':font_color,'fontSize':'1.5ex'}">
+				<image src="../../static/logo.png" style="width: 25rpx;height: 25rpx;;"></image>
+				<text  :style="{'color':font_color,'width':'80%'}">{{ sortName }} </text>
+			</view>
+		</view>
+		<view style="border-bottom: #eee solid 1px;display: flex;
+		align-items: center;margin-top: 5%;">
+		</view>
 		<view
-			:style="{'backgroundColor':db_color}"
+			:style="{'backgroundColor':db_color,'paddingLeft':'10%','paddingRight':'10%','marginTop':'5%'}"
 			@touchend.stop>
 			<view>
 			<!-- 	<movable-area>
@@ -33,9 +53,13 @@
 							transform: `translateY(${offset}px)`
 						}"
 					>
-					<view class="item-wrap" v-for="(item, index) in visibleData" :key="item.id">
+					<view v-for="(item, index) in visibleData" :key="item.id">
 						<!-- <slot :item="item" :active="active"></slot> -->
-						<view :style="{'color':font_color}" class="directory-listItem" @click="clickChar(item)">{{ item.name }}</view>
+						<view :style="{'widows':'100%'}" class="directory-listItem" @click="clickChar(item)">
+							<text  class="ellipsis" :style="{'color':font_color,'width':'80%'}">{{ item.name }} </text>
+							<image src="../../static/logo.png" style="width: 25rpx;height: 25rpx;;"></image>
+						</view>
+						
 					</view>
 					</view>
 				</scroll-view>
@@ -47,9 +71,11 @@
 </template>
 
 <script setup lang="ts">
-	import { ref,onMounted,computed} from 'vue';
+	import { ref,onMounted,computed, nextTick} from 'vue';
 	import { ReadSetting } from '../../stores/readSetting';
 import { tools } from '../../framework/tools';
+import { book_item_data } from '../../data/data';
+import { UserStatus } from '../../stores/userStatusManager';
 	// const {items,remain,size,active,scrollHeight} = defineProps(['items','remain','size','active','scrollHeight'])
 	const {items,remain,size,scrollHeight} =defineProps({
 		  items: {
@@ -84,9 +110,10 @@ import { tools } from '../../framework/tools';
 	let offset = ref(0)
 	let scrollTop = ref(0)
 	let y = ref(0)
-	
+	let sortStatus = 1;
+	let sortName = ref('倒序')
 	let mode = ref(ReadSetting().getReadSetting().readMode)
-	
+	let sortItems = ref(items)
 	const catalog = ref(null)
 	onMounted(()=>{
 		const type = 'bottom'
@@ -99,17 +126,17 @@ import { tools } from '../../framework/tools';
 	})
 	
 	let nextCount = computed(()=>{
-		return Math.min(items.length - end.value, remain);
+		return Math.min(sortItems.value.length - end.value, remain);
 	})
 	
 	let visibleData = computed(()=>{
 		const t_start = start.value - preCount.value;
 		const t_end = end.value + nextCount.value;
-		return items.slice(t_start, t_end);
+		return sortItems.value.slice(t_start, t_end);
 	})
 	
 	let localHeight = computed(()=>{
-		return items.length * size;
+		return sortItems.value.length * size;
 	})
 	
 	function clickChar(item){
@@ -148,6 +175,37 @@ import { tools } from '../../framework/tools';
 	let font_color = ref(tools.getFontColorByMode(ReadSetting().data.readMode))
 	let db_color = ref(tools.getDbColorByMode(ReadSetting().data.readMode))
 	
+	let book_data:book_item_data = UserStatus().getUserSelectBook()
+	
+	function onClickSort(){
+		if(sortStatus==1){
+			sortStatus = 2;
+			sortName.value = "正序"
+		}else{
+			sortStatus = 1;
+			sortName.value = "倒序"
+		}
+		sortItems.value = []
+		start.value = 0
+		end.value = 0	
+		offset.value = 0
+		scrollTop.value = 0
+		y.value = 0
+		sortItems.value = items
+		nextTick(()=>{
+			if(sortStatus==1){
+				sortItems.value = sortItems.value.sort((a:any,b:any)=>{
+					return a.id - b.id
+				})
+			}else{
+				sortItems.value = sortItems.value.sort((a:any,b:any)=>{
+					return b.id - a.id
+				})
+			}
+		})
+	
+	
+	}
 	
 </script>
 
@@ -179,7 +237,7 @@ import { tools } from '../../framework/tools';
 		padding-left: 10px;
 		height: 40px;
 		font-size: 14px;
-		border-bottom: #eee solid 1px;
+		/* border-bottom: #eee solid 1px; */
 	}
 	.active {
 		color: red;
@@ -200,4 +258,10 @@ import { tools } from '../../framework/tools';
 	.scroll-view::-webkit-scrollbar {
 	  display: none; /* 隐藏滚动条 */
 	}
+	.ellipsis {
+	  white-space: nowrap; /* 防止文本换行 */
+	  overflow: hidden; /* 隐藏超出容器的文本 */
+	  text-overflow: ellipsis; /* 当文本溢出时显示省略号 */
+	  width: 100%; /* 或其他你需要的宽度 */
+	}
 </style>

xs-app/components/read/settingMenu.vue

@@ -10,7 +10,7 @@
 				<view @click="emit('clickNextChapter')" :style="{'color':font_color}">下一章</view>
 			</view>
 			
-			<view v-if="showSettingFontSizeMode==false" class="popup-content" :class="{ 'popup-height': type === 'left' || type === 'right' }">
+			<view v-if="showSettingFontSizeMode==false" class="popup-content">
 				<view class="items-box">
 					<view class="item-box" @click="emit('clickCatalog')" :style="{'color':font_color}">
 						目录

xs-app/framework/tools.ts

@@ -165,4 +165,12 @@ export class tools {
 			return config.read_config.DarkDbColor
 		}
 	}
+	
+	public static book_status_title(book_data:book_item_data){
+		if(book_data.book_is_action==1){
+			return `连载至 第${book_data.chapter_count}章`
+		}else{
+			return `已完结 共${book_data.chapter_count}章`
+		}
+	}
 }

xs-app/pages/readbook/read.vue

@@ -34,7 +34,7 @@
 	const {windowHeight,windowWidth} = uni.getSystemInfoSync()
 	const readPages = ref(null)
 	const Menu = ref(null)
-	let book_data:book_item_data = UserStatus().getUserSlectBook()
+	let book_data:book_item_data = UserStatus().getUserSelectBook()
 	let directoryList:chapter_item_data[] = []
 	let cur_read_chapter_index =ref(0)
 	let start_read_chapter_id = book_data.start_read_chapter_id

xs-app/stores/userStatusManager.ts

@@ -7,7 +7,7 @@ export const UserStatus = defineStore('user-status',()=>{
 	async function updateUserSelectBook(d:book_item_data){
 		data.cur_select_book_data=d;
 	}
-	function getUserSlectBook():book_item_data{
+	function getUserSelectBook():book_item_data{
 		if(data==null){
 			return null
 		}
@@ -16,5 +16,5 @@ export const UserStatus = defineStore('user-status',()=>{
 		}
 		return data.cur_select_book_data
 	}
-	return {data,getUserSlectBook,updateUserSelectBook}
+	return {data,getUserSelectBook,updateUserSelectBook}
 })