456

xs-app/pages.json

@@ -40,6 +40,14 @@
 			"style": {
 				"navigationStyle": "custom"
 			}
+		},
+		{
+			"path" : "pages/search/search",
+			"style" : 
+			{
+				"navigationBarTitleText" : "",
+				"enablePullDownRefresh" : false
+			}
 		}
 	],
 	"tabBar": {

xs-app/pages/bookstore/bookstore.vue

@@ -1,43 +1,88 @@
 <template>
-	<view> 书城 </view>
-	<view style="display: flex; margin-top: 30px; height: 50px; font-size: 30px; background-color: red; justify-content: center; align-items: center;" 
-	@click="onClickTest"> 测试 </view>
+	<view class="content">
+		<view> 书城 </view>
+		<view class="item_demo" @click="onClickTest"> 测试更换数据 </view>
+		<view class="item_demo" @click="onClickNav">跳转</view>
+		<view class="container">
+			<template-book3 :dataList='book_3_data_list'></template-book3>
+			<template-book-list></template-book-list>
+		</view>
+	</view>
 </template>
 
- <script >	 
+ <script setup lang="ts">
+	import { onLoad } from '@dcloudio/uni-app';
+    import { ref } from 'vue';
     import { util } from '../../framework/util';
-	export default {
-		data() {
-			return {
-			}
-		},
-		onLoad() {
-		},
-		methods: {
-			onClickTest() {
-				util.showLoading()
-				setTimeout(()=>{
-					util.hideLoading()
-				},1500)
-				
-				// util.showInfoToast('信息')
-				// util.showSuccessToast('成功')
-				// util.showErrorToast('失败')
-				
-				// util.showModal('标题',null,()=>{
-				// 	console.log('11111111')
-				// },null,'是吧')
-				
-				// util.showModalNoCancel('标题')
-				
-				// util.showActionSheet('你好', ['1','2','3'], (index)=>{
-				// 	console.log('确定index=',index)
-				// })
-			}
+	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
+		
+	onLoad((options)=>{
+		console.log('bookstore-options=',options)
+		requestData(bool)
+	})
+		
+	function requestData(is:boolean) {
+		if(is) {
+			book_3_data_list.value = ['4','5','6']
+		} else {
+			book_3_data_list.value = ['1','1','1']
 		}
 	}
+	
+    function onClickTest() {
+	    util.showLoading()
+		setTimeout(()=>{
+			util.hideLoading()
+			bool = !bool
+			requestData(bool)
+		},200)
+		
+		// util.showInfoToast('信息')
+		// util.showSuccessToast('成功')
+		// util.showErrorToast('失败')
+		
+		// util.showModal('标题',null,()=>{
+		// 	console.log('11111111')
+		// },null,'是吧')
+		
+		// util.showModalNoCancel('标题',null)
+		
+		// util.showActionSheet('你好', ['1','2','3'], (index:number)=>{
+		// 	console.log('确定index=',index)
+		// })
+    }
+	
+	function onClickNav() {
+		uni.navigateTo({
+			url:'/pages/search/search' + '?' + 'id=123',
+		})
+	}
+		
 </script>
 
 <style lang="scss">
+	.content{
+		display: flex;
+		flex-direction: column;
+		width: 100%;
+	
+		.container{
+			display: flex;
+			flex-direction: column;
+		}
+	}
+	
+	.item_demo{
+		display: flex; 
+		margin-top: 30rpx; 
+		height: 100rpx; 
+		font-size: 30px; 
+		background-color: red; 
+		justify-content: center; 
+		align-items: center;
+	}
 	
 </style>

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

@@ -0,0 +1,76 @@
+<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__image">
+					<image class="image" src="../../../static/logo.png" mode="aspectFill"></image>
+				</view>
+				<view class="book_box__name">{{item}}</view>
+			</view>
+		</view>
+	</view>
+</template>
+
+<script setup lang="ts">
+	defineProps({
+		dataList: Array,
+	})
+	
+	// 传值并观察-例子
+	// import { watch } from 'vue';
+	// const props = defineProps({
+	// 	dataList: Array,
+	// })
+	// watch(()=>props.dataList, (new_v,old_v)=>{
+	//     console.log('dataList-观察    新值:',new_v,'旧值:',old_v)
+	// },{immediate:true})
+	
+</script>
+
+
+<style lang="scss">
+	.book-3-content{
+		display: flex;
+		flex-direction: row;
+		background-color: green;
+		margin-top: 20rpx;
+				
+		&__container{
+			width: 100%;
+						
+			.book_box{
+				display: flex;
+				flex-direction: column;
+				width: 100%;
+				background-color: deepskyblue;
+				
+				&__image {
+					display: flex;
+					height: 200rpx;
+					justify-content: center;
+					align-items: center;
+					.image{
+						width: 75%;
+						height: 100%;
+						border-radius: 6px;
+						background-color: greenyellow;
+					}
+				}
+				&__name {
+					display: -webkit-box;
+					align-items: center;
+					-webkit-line-clamp: 1;
+					-webkit-box-orient: vertical;
+					overflow: hidden;
+					text-overflow: ellipsis;
+					width: 90%;
+					margin-left: 5%;
+					margin-top: 10rpx;
+					text-align: center;
+					background-color: red;
+				}
+			}
+		}
+	}
+	
+</style>

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

@@ -0,0 +1,19 @@
+<template>
+	<view class="content">
+	    书-list
+	</view>
+</template>
+
+<script setup lang="ts">
+	
+</script>
+
+<style lang="scss">
+	.content{
+		display: flex;
+		flex-direction: column;
+		height: 200rpx;
+		background-color: plum;
+	}
+	
+</style>

xs-app/pages/search/search.vue

@@ -0,0 +1,16 @@
+<template>
+	<view></view>
+</template>
+
+<script setup lang="ts">
+	import { onLoad } from '@dcloudio/uni-app';
+	
+	onLoad((options)=>{
+		console.log('search-options=',options)
+	})
+	
+</script>
+
+<style lang="scss">
+
+</style>