From 3bf6467574296c22f7ab28ec02ba7ab221648abc Mon Sep 17 00:00:00 2001
From: zhao <2796247050@qq.com>
Date: Thu, 18 Jul 2024 17:41:23 +0800
Subject: [PATCH] zyh

---
 src/views/book/component/home.vue | 78 +++++++++++++++++----------------------
 1 file changed, 34 insertions(+), 44 deletions(-)

diff --git a/src/views/book/component/home.vue b/src/views/book/component/home.vue
index adf31dc..6968efa 100644
--- a/src/views/book/component/home.vue
+++ b/src/views/book/component/home.vue
@@ -1,26 +1,26 @@
 <script setup lang="ts">
-import {useT_bookApi} from 'src\\api\\maku\\t_book.ts'
-import {ref} from 'vue'
+import { ref } from 'vue';
+import { useT_bookApi } from "../../../api/maku/t_book";
 
-const book =ref({
-	id:0,
-	bookname:'',
-	author:'',
-	price:'',
-	bookcover:'',
-	store:0,
-	introduction:'',
-	description:''
-})
-// function getbook(){
-// 	useT_bookApi(1).then(res=>{
-// 		book.value=res.data
-// 	})
-// }
-// getbook()
+
+const totalBooks = 5; // 假设有5本书
+
+// 创建一个包含所有书籍的数组，初始值为5个空对象
+const books = ref(Array(totalBooks).fill({}));
+
+// 定义一个函数，用于根据索引调用对应的API获取书籍信息
+function getBook(index: number) {
+    useT_bookApi(index + 1).then(res => {
+        books.value[index] = res.data;
+    });
+}
+
+// 使用循环调用获取书籍信息的函数
+for (let i = 0; i < totalBooks; i++) {
+    getBook(i);
+}
 
 </script>
-
 <template>
 	<div class="search-suggest-combobox">
 		<div class="input-search">
@@ -29,30 +29,18 @@ const book =ref({
 		</div>
 	</div>
 	<div class="screen-outer">
-		<div class="tb-pick-content-item">
-			<div class="img-wrapper"></div>
-			<div class="info-wrapper">进口安佳淡奶油1L动物奶油新西兰家用生日蛋糕裱花蛋挞液专用烘焙</div>
-			<div class="price-wrapper">
-				<span class="price-unit">¥</span>
-				<span class="price-value">30</span>
-			</div>
-		</div>
-		<div class="tb-pick-content-item">
-			<div class="img-wrapper"></div>
-		</div>
-		<div class="tb-pick-content-item">
-			<div class="img-wrapper"></div>
-		</div>
-		<div class="tb-pick-content-item">
-			<div class="img-wrapper"></div>
-		</div>
-		<div class="tb-pick-content-item">
-			<div class="img-wrapper"></div>
-		</div>
-		<div class="tb-pick-content-item">
-			<div class="img-wrapper"></div>
-		</div>
-	</div>
+    <div class="tb-pick-content-item" v-for="book in books" :key="book.id">
+        <div class="img-wrapper">
+            <img :src="book.bookCover" style="width:100%; height:120%;" alt="Book Cover">
+        </div>
+        <div class="info-wrapper">{{ book.bookName }}</div>
+        <div class="price-wrapper">
+            <span class="price-unit">¥</span>
+            <span class="price-value">{{ book.price }}</span>
+        </div>
+    </div>
+</div>
+
 </template>
 
 <style scoped lang="scss">
@@ -96,6 +84,8 @@ const book =ref({
 }
 
 .screen-outer {
+
+    transform:translate(10px);
 	background: #fff;
 	width: 1552px;
 	margin: 30px auto;
@@ -142,7 +132,7 @@ const book =ref({
 }
 
 .img-wrapper {
-	background-image: url('https://img.alicdn.com/bao/uploaded/i1/3937219703/O1CN01FZXnRo2LY1zwkI3j0_!!3937219703-0-C2M.jpg');
+	// background-image: url();
 	background-position: 50%;
 	background-repeat: no-repeat;
 	background-size: cover;