From 9cad6a832c786989be620573b09badccfe7e3b51 Mon Sep 17 00:00:00 2001
From: QYF-GitLab1 <1940665526@qq.com>
Date: 星期一, 25 八月 2025 15:11:37 +0800
Subject: [PATCH] 首页头部，样式调整

---
 src/views/bookStore/index.vue |   83 +++++++++++++++++++++++++++++++++++------
 1 files changed, 71 insertions(+), 12 deletions(-)

diff --git a/src/views/bookStore/index.vue b/src/views/bookStore/index.vue
index 0c89bff..60ed9be 100644
--- a/src/views/bookStore/index.vue
+++ b/src/views/bookStore/index.vue
@@ -4,7 +4,7 @@
       <img class="bannerImg" :src="banner[0]?.icon" @click="bannerLink(item)" />
       <div class="bannerText">
         <div>鏁板瓧鏁欐潗</div>
-        <div class="enText">ABOUT US</div>
+        <div class="enText">TEXT BOOK</div>
       </div>
     </div>
     <div class="contentBox" style="margin-top: 50px">
@@ -12,9 +12,15 @@
         <img class="autoimg" src="@/assets/images/bookStore/feblei.png" />
       </div>
       <div class="classificationBox">
-        <div style="width: 100px">鍒嗙被锛�</div>
+        <div style="width: 100px; line-height: 60px">鍒嗙被锛�</div>
         <div class="classificaListBox">
-          <div class="classificaItem" v-for="(item, index) in classfeild" :key="index">
+          <div
+            class="classificaItem"
+            :class="{ active: currentLevel == item.value }"
+            v-for="(item, index) in classfeild"
+            :key="index"
+            @click="changeLevel(item)"
+          >
             {{ item.name }}
           </div>
         </div>
@@ -23,15 +29,15 @@
       <div class="bookList">
         <div class="bookfilterList">
           <div class="listTitle">
-            <div>缁撴灉锛氬叡璁�***鏉�</div>
-            <div style="width: 300px">
+            <div>缁撴灉锛氬叡璁{ total }}鏉�</div>
+            <div style="width: 340px">
               <el-input
                 v-model="input3"
                 placeholder="杈撳叆鏁欐潗鍚嶇О銆佷綔鑰呭鍚嶃�佸嚭鍝佹柟鍚嶇О鎼滅储"
                 class="input-with-select"
               >
                 <template #append>
-                  <el-button :icon="Search" />
+                  <el-button :icon="Search" @click="getBookList" />
                 </template>
               </el-input>
             </div>
@@ -83,7 +89,12 @@
         <div class="recommendBox">
           <div class="recommendTitle">鎺ㄨ崘鏁欐潗</div>
           <div class="newRecommendList">
-            <div class="recommendItem" v-for="item in bookListData" :key="item.id">
+            <div
+              class="recommendItem"
+              v-for="item in recommendBookListData"
+              :key="item.id"
+              @click="toDetail(item)"
+            >
               <div class="recommendItemImg">
                 <img class="autoImg" :src="item.icon" />
               </div>
@@ -121,9 +132,11 @@
 import { Search } from '@element-plus/icons-vue'
 const input3 = ref('')
 let bookListData = ref([])
-const total = ref(50)
+let recommendBookListData = ref([])
+const total = ref(0)
 const currentPage1 = ref(1)
 const router = useRouter()
+let currentLevel = ref('all')
 
 const toDetail = (item) => {
   router.push({
@@ -134,12 +147,17 @@
   })
 }
 
+const changeLevel = (item) => {
+  currentLevel.value = item.value
+  getBookList()
+}
+
 const getBanner = () => {
   MG.resource
     .getItem({
       path: 'banner\\educationPublishing',
       fields: { link: [] },
-      paging: { start: 0, size: 9 },
+      paging: { start: 0, size: 20 },
     })
     .then((res) => {
       banner.push(...res.datas)
@@ -152,7 +170,7 @@
   getBookList()
 }
 
-const getBookList = () => {
+const getRecommendBookList = () => {
   MG.store
     .getProductList({
       path: 'recommendedTextbooks',
@@ -166,8 +184,32 @@
     })
     .then((res) => {
       console.log(res, '鎺ㄨ崘鏁欐潗')
-      bookListData.value = res.datas
+      recommendBookListData.value = res.datas
     })
+}
+
+const getBookList = () => {
+  const query = {
+    path: '*',
+    queryType: '*',
+    storeInfo: 'defaultGoodsStore1',
+    paging: {
+      start: (currentPage1.value - 1) * 20,
+      size: 20,
+    },
+    fields: {},
+  }
+  if (currentLevel.value !== 'all') {
+    query.fields['teachingLevel='] = currentLevel.value
+  }
+  if (input3.value) {
+    query.fields['Name*'] = input3.value
+  }
+  MG.store.getProductList(query).then((res) => {
+    console.log(res, '11111111111')
+    bookListData.value = res.datas
+    total.value = res.total
+  })
 }
 
 const classifList = () => {
@@ -190,6 +232,7 @@
   getBanner()
   classifList()
   getBookList()
+  getRecommendBookList()
 })
 </script>
 
@@ -215,7 +258,7 @@
       text-align: center;
     }
     .enText {
-      font-size: 36px;
+      font-size: 28px;
       opacity: 0.45;
       margin-top: 20px;
     }
@@ -227,6 +270,7 @@
     margin-top: 30px;
     .classificaListBox {
       display: flex;
+      justify-content: space-between;
       flex-wrap: wrap;
       .classificaItem {
         display: flex;
@@ -295,6 +339,9 @@
     &:last-child {
       margin-right: 0;
     }
+  }
+  .recommendItem:hover {
+    background-image: url(@/assets/images/Mouse_fill.png);
   }
   .recommendItemImg {
     width: 150px;
@@ -380,4 +427,16 @@
   margin: 20px 0;
   padding-bottom: 30px;
 }
+
+.active {
+  background-color: #ebf8f8;
+  border: 1px solid #144941;
+  color: #144941;
+}
+</style>
+<style>
+.el-input-group__append {
+  background-color: #144941;
+  color: #fff;
+}
 </style>

--
Gitblit v1.9.1