feat: 条码图书接口调试

src/views/Service/book.vue

@@ -6,16 +6,17 @@
         <el-tab-pane label="条码图书" name="first">
           <div class="book-card" :key="i" v-for="(item,i) in bookList">
             <div class="book-img">
-              <img :src="item.img" alt="">
+              <img :src="item.graph" alt="">
             </div>
             <div class="book-content">
-              <div class="title">{{ item.name }}</div>
+              <div class="title">{{ item.prename }}</div>
               <div class="price">¥{{ item.price }}</div>
               <div class="desc">
-                <span>{{ item.author }} 著</span> ｜ <span>{{ item.date }}</span> ｜ <span>{{ item.press }}</span>
+                <span>{{ item.author }} 著</span> ｜ <span>{{ item.predate }}</span> ｜ <span>{{ item.company }}</span>
               </div>
             </div>
           </div>
+          <pages :pages="page" @toPagesFather="getBooks"></pages>
         </el-tab-pane>
 
         <el-tab-pane label="软件下载" name="second">
@@ -52,7 +53,10 @@
 </template>
 
 <script>
+import pages from "../comps/pages.vue";
+
 export default {
+  components: {pages},
   data() {
     return {
       activeName: 'second',
@@ -96,27 +100,27 @@ export default {
         },
       ],
       bookList: [],
+      page: {
+        currentPage: 1,
+        pageSize: 10,
+        pageCount: 1,
+        total: 10,
+      },
     }
   },
   created() {
     this.getBooks()
   },
   methods: {
-    getBooks() {
-      for (let i = 0; i < 10; ++i) {
-        this.bookList.push(
-            {
-              id: i,
-              name: '条码小达人',
-              img:require('./img/5d1d4969-956a-4a85-9631-e45605b0c221.jpg'),
-              price: 30.00,
-              author: '张海成 张铎',
-              date: '2010.1',
-              press: '武汉大学出版社'
-            },
-        )
+    async getBooks(page = 1) {
+      const res = await this.$api.service.getCodeBook({page: page, size: this.page.pageSize})
+      const {returnCode, data} = res;
+      if (returnCode === "0") {
+        this.bookList = data.list
+        this.page.currentPage = data.currPage
+        this.page.total = data.totalCount
+        this.page.pageCount = data.totalPage
       }
-      console.log(this.bookList)
     }
   }
 };
@@ -132,9 +136,11 @@ export default {
     border: 1px solid rgba(197, 216, 238, 0.5);
     margin-bottom: 30px;
     cursor: pointer;
-    &:hover{
+
+    &:hover {
       box-shadow: 0 4px 15px 2px rgba(4, 64, 141, 0.08);
     }
+
     .book-img {
       display: flex;
       align-items: center;
@@ -151,26 +157,27 @@ export default {
     .book-content {
       padding: 16px 20px;
 
-      .title {
+      > .title {
         font-size: 21px;
         font-weight: 500;
         color: #454545;
-        margin-bottom: 46px;
+        height: 70px;
+        overflow: hidden;
       }
 
-      .price {
+      > .price {
         font-size: 32px;
         font-weight: 500;
         color: #F23535;
         line-height: 45px;
-        margin-bottom: 20px;
+        margin-bottom: 15px;
       }
 
-      .desc {
+      > .desc {
         font-size: 14px;
         font-weight: 400;
         color: #666666;
-        line-height: 20px;
+        line-height: 18px;
       }
     }
   }
@@ -183,9 +190,11 @@ export default {
     border: 1px solid rgba(197, 216, 238, 0.5);
     margin-bottom: 25px;
     cursor: pointer;
-    &:hover{
+
+    &:hover {
       box-shadow: 0px 4px 15px 2px rgba(4, 64, 141, 0.08);
     }
+
     .app-img {
       display: flex;
       align-items: center;
@@ -253,7 +262,7 @@ export default {
     }
   }
 
-  .el-tabs__content{
+  .el-tabs__content {
     padding-top: 14px;
   }
 }