456

xs-app/config/config.ts

@@ -24,12 +24,19 @@ export class config {
 		USER_DATA: "USER_DATA",
 	}
 	
+	/**
+	 * 本地数据的key
+	 */
+	public static storage_key = {
+		BOOKSHELF_LIST: "BOOKSHELF_LIST",
+	}
+	
 	/**
 	 * 测试域名
 	 */
 	private static URL_DEBUG = {
-		Dynamic:"http://",
-		Static:"http://"
+		Dynamic:"https://bookapi.hainanmlwl.com",
+		Static:"https://zaoca.oss-accelerate.aliyuncs.com"
 	}
 	
 	
@@ -67,7 +74,9 @@ export class config {
 		 * 静态
 		 */
 		Static:{
-			
+			book_details(book_id:number) {
+				return config.url_addr.Static + `/bookstatic/book/${book_id}.json`
+			},
 		},
 		
 		StatesCode:{

xs-app/framework/tools.ts

@@ -1,8 +1,10 @@
 
 import { config } from "../config/config";
 import { book_item_data, chapter_item_data } from "../data/data";
+import { BookshelfData } from "../stores/bookshelfManager";
 import { http } from "./http";
 import { log } from "./log";
+import { util } from "./util";
 
 export class tools {
 	public static platform:string = config.Platform.H5
@@ -24,24 +26,51 @@ export class tools {
 	public static gotoBookdetails(book_id:number, cb:Function=null) {
 		if(book_id) {
 			uni.navigateTo({
-				url:'/pages/bookdetails/bookdetails?book_id='+book_id,
-				success: () => {
+				url:'/pages/bookdetails/bookdetails',
+				success: (res) => {
+					res.eventChannel.emit('data',{'book_id':book_id})
 					cb && cb()
 				}
 			})
+			// uni.navigateTo({
+			// 	url:'/pages/bookdetails/bookdetails?book_id='+book_id,
+			// 	success: () => {
+			// 		cb && cb()
+			// 	}
+			// })
 		} else {
 			log.Error('书详情id错误')
 		}
 	}
 	
+	// 进入阅读
+	public static gotoRead(book_id:number) {
+		uni.reLaunch({
+			url: '/pages/readbook/read'
+		});
+	}
+	
+	// 检查在书架
+	public static checkOnBookshelf(book_id:number):boolean {
+		return BookshelfData().checkBookOnBookshelf(book_id)
+	}
+	
 	// 添加书架
-	public static addBookshelf(book_id:number) {
-		
+	public static addBookshelf(book_data:book_item_data, cb:Function) {
+		util.showLoading('加入书架...', true)
+		util.hideLoading(500, ()=>{
+			BookshelfData().addBook(book_data)
+			cb && cb()
+		})
 	}
 	
 	// 删除书架
-	public static deleteBookshelf(book_list:number[]) {
-		
+	public static deleteBookshelf(book_id_list:number[], cb:Function) {
+		util.showLoading('移除书架...', true)
+		util.hideLoading(500, ()=>{
+			BookshelfData().deleteBook(book_id_list)
+			cb && cb()
+		})
 	}
 		
 	public static getChapterList(chapter_path:string,cb:Function){

xs-app/framework/util.ts

@@ -7,30 +7,37 @@ export class util {
 	 * 获取本地数据
 	 */
 	public static getStorage(key:string){
-		let d = uni.getStorageSync(key)
-		if(util.isNull(d)){
+		try {
+			let d = uni.getStorageSync(key)
+			if(util.isNull(d)){
+				return null
+			}
+			return d
+		} catch(e) {
+			console.error('本地获取失败', e);
 			return null
 		}
-		return d
 	}
 	
 	/**
 	 * 设置本地数据
 	 */
 	public static setStorage(key:string,value:string){
-		uni.setStorageSync(key,value)
+		try {
+		    uni.setStorageSync(key,value)
+		} catch (e) {
+		    console.error('本地存储失败', e);
+		}
 	}
 	
-	
 	/**
-	 * 清除本地key数据
+	 * 删除本地key数据
 	 */
-	public static clearStorageForKey(key:string){
-		let d = util.getStorage(key)
-		if(util.isNull(d)){
-			log.Error(`${key} is null!`);
-		}else{
-			util.setStorage(key,null)
+	public static removeStorageForKey(key:string){
+		try {
+			uni.removeStorageSync(key)
+		} catch (e) {
+		    console.error('本地删除失败', e);
 		}
 	}
 	
@@ -38,7 +45,11 @@ export class util {
 	 * 清除本地数据
 	 */
 	public static clearAllStorage(){
-		uni.clearStorageSync()
+		try {
+			uni.clearStorageSync()
+		} catch (e) {
+			console.error('本地清空失败', e);
+		}
 	}
 	
 	public static isNull(v:any){
@@ -67,8 +78,17 @@ export class util {
 		})
 	}
 	
-	public static hideLoading() {
-		uni.hideLoading()
+	// delaytime:毫秒
+	public static hideLoading(delaytime:number=0, cb:Function=null) {
+		if(delaytime<=0) {
+			uni.hideLoading()
+			cb && cb()
+			return
+		}
+		setTimeout(()=>{
+			uni.hideLoading()
+			cb && cb()
+		},delaytime)
 	}
 	
 	// Toast

xs-app/pages/bookdetails/bookdetails.vue

@@ -1,15 +1,72 @@
 <template>
 	<view>
-		
+		{{ book_data.book_name }}
+	</view>
+	<view style="margin-top: 50px; display: flex; flex-direction: row; justify-content: space-between;">
+		<view @click="clickRead" style="width: 40%; height: 50px; background-color: red;">
+			立即阅读
+		</view>
+		<view @click="clickBookshelf" style="width: 40%; height: 50px; background-color: red;">
+			{{ is_on_bookshelf?'移除书架':'加入书架' }}
+		</view>
 	</view>
+	
 </template>
 
 <script setup lang="ts">
-	import { onLoad} from '@dcloudio/uni-app'
+    import { getCurrentInstance, onMounted, ref } from 'vue';
+    import { config } from '../../config/config';
+    import { http } from '../../framework/http';
+    import { book_item_data } from '../../data/data';
+    import { util } from '../../framework/util';
+    import { tools } from '../../framework/tools';
+    import { log } from '../../framework/log';
+	
+	let book_data = ref(new book_item_data())
+	let is_on_bookshelf = ref(false)
 	
-	onLoad((options)=>{
-		console.log('bookdetails book_id=',options.book_id)
+	onMounted(() => {
+		const instance = getCurrentInstance().proxy
+	    const eventChannel = instance.getOpenerEventChannel()
+	    eventChannel.on('data', function(data:any) {
+			log.Debug('书详情id=',data.book_id)
+	        requestBookdetails(data.book_id)
+	        is_on_bookshelf.value = tools.checkOnBookshelf(data.book_id)
+	    })
 	})
+		
+	function requestBookdetails(book_id:number) {
+		util.showLoading()
+		let url = config.url_confg.Static.book_details(book_id)
+		http.StaticRequest(url,(err=null,data=null)=>{
+			util.hideLoading()
+			if(!err&&data) {
+				if(data.code==config.url_confg.StatesCode.SUCCESS){
+					book_data.value = data.content
+					// console.log(book_data.value)
+				}
+			}
+		})
+	}
+	
+	function clickRead() {
+		tools.gotoRead(book_data.value.book_id)
+	}
+	
+	function clickBookshelf() {
+		let finish_cb = (()=>{
+			is_on_bookshelf.value = !is_on_bookshelf.value
+		})
+		if(is_on_bookshelf.value) {
+			tools.deleteBookshelf([book_data.value.book_id], ()=>{
+				finish_cb()
+			})
+		} else {
+			tools.addBookshelf(book_data.value, ()=>{
+				finish_cb()
+			})
+		}
+	}
 	
 </script>
 

xs-app/pages/bookshelf/bookshelf-bookList.vue

@@ -0,0 +1,69 @@
+<template>
+	<view class="content">
+		<view class="book-list">
+			<view class="book-list__item" v-for="(item,index) in book_list" :key="index"
+			@click="clickBookItem(item,index)">
+				<image class="book-list__item__book-cover" :src="item.book_cover" mode="aspectFill"></image>
+				<view class="book-list__item__book-name">
+					{{item.book_name}}
+				</view>
+				<view class="book-list__item__book-info">
+					 0章 / 500章
+				</view>
+			</view>
+		</view>
+		
+	</view>
+</template>
+
+<script setup lang="ts">
+	import { ref } from 'vue';
+    import { BookshelfData } from '../../stores/bookshelfManager';
+    import { book_item_data } from '../../data/data';
+	
+	let book_list = ref(BookshelfData().getBookList())
+	console.log('BookshelfData111 =',book_list.value)
+	
+	function clickBookItem(book_data:book_item_data, index:number) {
+		if(index>0) {
+			book_list.value.splice(index,1)
+			book_list.value.unshift(book_data)
+		}
+	}
+	
+</script>
+
+<style lang="scss">
+	.content{
+		display: flex;	
+		flex-direction: column;
+		
+		.book-list{
+			display: flex;
+			flex-direction: row; //横向排列
+			flex-wrap: wrap;     //换行排列
+			padding: 1% 2%;
+			// background-color: red;
+			&__item {
+				display: flex;
+				flex-direction: column;
+				margin: 2% 2%;
+				width: 46%;
+				align-items: center;
+				// background-color: purple;
+				&__book-cover{
+					width: 300rpx;
+					height: 400rpx;
+				}
+				&__book-name{
+					margin-top: 10rpx;
+					
+				}
+				&__book-info{
+					margin-top: 10rpx;
+					
+				}
+			}
+		}
+	}
+</style>

xs-app/pages/bookshelf/bookshelf-readHistory.vue

@@ -0,0 +1,12 @@
+<template>
+	<view class="" style="display: none;">
+		阅读历史
+	</view>
+</template>
+
+<script setup lang="ts">
+	
+</script>
+
+<style lang="scss">
+</style>

xs-app/pages/bookshelf/bookshelf.vue

@@ -1,30 +1,41 @@
 <template>
-	书架
-	<view>
+	<view class="bookshelf-content">
+		<bookList></bookList>
+		<readHistory></readHistory>
+	</view>
+	<!-- <view>
 		<button @click="onBtnClick"> 去读书</button>
 	</view>
 	<view v-for="item in book_list " :key="item.book_id">
 		<image :src="item.book_cover" @click="onClickItem(item)">
 			{{item.book_name}}
 		</image>
-	</view>
+	</view> -->
 </template>
 
 <script setup lang="ts">
+	import bookList from '../bookshelf/bookshelf-bookList.vue'
+	import readHistory from '../bookshelf/bookshelf-readHistory.vue'
+	
 	import { log } from '../../framework/log';
 	import { http } from '../../framework/http';
 	import { config } from '../../config/config';
-	import { ref } from 'vue';
 	import { book_item_data } from '../../data/data';
 	import { UserStatus } from '../../stores/userStatusManager';
-	function onBtnClick(){
-		jumpRead()
+    import { ref } from 'vue';
+	
+	let is_show = ref(true)
+		
+	function onBtnClick(){	
+		is_show.value = !is_show.value
+		// jumpRead()
 	}
 	
 	function onClickItem(item:book_item_data){
 		// util.alert("点击了"+item.book_name)
 		item.start_read_chapter_id = 1
 		UserStatus().updateUserSlectBook(item)
+		
 		uni.reLaunch({
 			url: '/pages/readbook/read'
 		});
@@ -49,5 +60,9 @@
 	}
 </script>
 
-<style scoped>
+<style lang="scss">
+	.bookshelf-content{
+		display: flex;
+		flex-direction: column;
+	}
 </style>

xs-app/pages/bookstore/bookstore.vue

@@ -1,46 +1,50 @@
 <template>
 	<view class="content">
-		<view class="item_demo" @click="onClickTest"> 测试更换数据 </view>
+		<view class="item_demo" @click="onClickTest"> 测试util </view>
 		<view class="item_demo" @click="onClickNav">跳转</view>
 		<view class="container">
-			<template-book3 :dataList='book_3_data_list'></template-book3>
+			<template-book3 :dataList='book_3_data_list' @clickBook='clickBook'></template-book3>
 			<template-book-list></template-book-list>
 		</view>
 	</view>
 </template>
 
  <script setup lang="ts">
-	import { onLoad } from '@dcloudio/uni-app';
+	 import templateBook3 from '../bookstore/template/template-book-3.vue'
+	 import templateBookList from '../bookstore/template/template-book-list.vue'
     import { ref } from 'vue';
     import { util } from '../../framework/util';
-	import { tools } from '../../framework/tools';
-	import templateBook3 from '../bookstore/template/template-book-3.vue'
-	import templateBookList from '../bookstore/template/template-book-list.vue'
-	
-	let book_3_data_list = ref<Array<string>>([])
-	var bool:boolean = true
+    import { book_item_data } from '../../data/data';
+    import { tools } from '../../framework/tools';
+				
+	let book_3_data_list = ref<Array<book_item_data>>()
 		
-	onLoad((options)=>{
-		console.log('bookstore-options=',options)
-		requestData(bool)
-	})
+	requestData()
 		
-	function requestData(is:boolean) {
-		if(is) {
-			book_3_data_list.value = ['5','6','7']
-		} else {
-			book_3_data_list.value = ['1','1','1']
-		}
+	function requestData() {
+		let book_data_1 = new book_item_data()
+		book_data_1.book_id = 1
+		book_data_1.book_name = '玄鉴仙族'
+		book_data_1.book_cover = 'https://www.uuks5.com/cover/766295.jpg'
+		let book_data_2 = new book_item_data()
+		book_data_2.book_id = 2
+		book_data_2.book_name = '走进不科学'
+		book_data_2.book_cover = 'https://www.mayiwsk.com/files/article/image/88/88817/88817s.jpg'
+		let book_data_3 = new book_item_data()
+		book_data_3.book_id = 3
+		book_data_3.book_name = '光阴之外'
+		book_data_3.book_cover = 'https://www.deqixs.com/files/cover/202304/91c935a0-be7c-450f-bedb-aab07a242207.jpg'
+		
+		book_3_data_list.value = [book_data_1,book_data_2,book_data_3]
+	}
+	
+	function clickBook(data:book_item_data) {
+		tools.gotoBookdetails(data.book_id)
 	}
 	
     function onClickTest() {
 		util.showLoading()
-		setTimeout(()=>{
-			util.hideLoading()
-			bool = !bool
-			requestData(bool)
-		},200)
-		
+		util.hideLoading(1000)		
 		// util.showInfoToast('信息')
 		// util.showSuccessToast('成功')
 		// util.showErrorToast('失败')
@@ -57,7 +61,9 @@
     }
 	
 	function onClickNav() {
-		tools.gotoBookdetails(1)
+		uni.navigateTo({
+			url: '/pages/search/search'
+		})
 		return
 	}
 		

xs-app/pages/bookstore/template/template-book-3.vue

@@ -1,20 +1,26 @@
 <template>
 	<view class="book-3-content">
 		<view class="book-3-content__container" v-for="(item,index) in dataList" :key="index">
-			<view class="book_box">
+			<view class="book_box" @click="clickBook(item)">
 				<view class="book_box__image">
-					<image class="image" src="../../../static/logo.png" mode="aspectFill"></image>
+					<image class="image" :src="item.book_cover" mode="aspectFill"></image>
 				</view>
-				<view class="book_box__name">{{item}}</view>
+				<view class="book_box__name">{{item.book_name}}</view>
 			</view>
 		</view>
 	</view>
 </template>
 
 <script setup lang="ts">
+    import { book_item_data } from '../../../data/data';
 	defineProps({
 		dataList: Array,
 	})
+	const emits = defineEmits(['clickBook'])
+	
+	function clickBook(data:book_item_data) {
+		emits('clickBook',data)
+	}
 	
 	// 传值并观察-例子
 	// import { watch } from 'vue';

xs-app/pages/search/search-nav.vue

@@ -24,7 +24,7 @@
 		height:Number,
 	})
 	let search_content = ref('')
-	let emits = defineEmits(['clickSearch'])
+	const emits = defineEmits(['clickSearch'])
 	
 	function onInput() {
 		// console.log('search_content',search_content.value)

xs-app/pages/test/index.vue

@@ -46,7 +46,7 @@
 		title.value = "fuck!"
 		obj.a = "world";
 	}
-	
+		
 	// Dialog 使用用例 给组件传递参数和回调 start
 	let isOpenDialog = ref(false)
 	let titleName = ref("fuck u!")

xs-app/stores/bookshelfManager.ts

@@ -0,0 +1,49 @@
+import {defineStore} from 'pinia';
+import { book_item_data } from '../data/data';
+import { util } from '../framework/util';
+import { config } from '../config/config';
+export const BookshelfData = defineStore('bookshelf-data',()=>{
+	let book_list:book_item_data[] = null
+	function getBookList():book_item_data[]{
+		if(book_list) {
+			return book_list
+		}
+		book_list = []
+		let string = util.getStorage(config.storage_key.BOOKSHELF_LIST)
+		if(string) {
+			book_list = JSON.parse(string)
+		}
+		return book_list
+	}
+	function checkBookOnBookshelf(book_id:number):boolean {
+		let on_bookshelf:boolean = false
+		for (let i = 0; i < getBookList().length; i++) {
+			let element = getBookList()[i]
+			if(element.book_id == book_id) {
+				on_bookshelf = true
+				break
+			}
+		}
+		return on_bookshelf
+	}
+	async function addBook(book_data:book_item_data){
+		getBookList().unshift(book_data)
+		util.setStorage(config.storage_key.BOOKSHELF_LIST, JSON.stringify(getBookList()))
+	}
+	async function deleteBook(book_id_list:number[]) {
+		for (let i = 0; i < getBookList().length; i++) {
+			let i_element = getBookList()[i]
+			for (let j = 0; j < book_id_list.length; j++) {
+				let j_element = book_id_list[i]
+				if(i_element.book_id = j_element) {
+					getBookList().splice(i,1)
+				}
+			}
+		}
+		util.setStorage(config.storage_key.BOOKSHELF_LIST, JSON.stringify(getBookList()))
+	}
+	function sortBookList(book_data:book_item_data, index:number) {
+		
+	}
+	return {book_list,getBookList,addBook,deleteBook,checkBookOnBookshelf,sortBookList}
+})