feat: 图书详情页

src/views/Service/book.vue

@@ -4,7 +4,7 @@
     <div class="body">
       <el-tabs v-model="activeName" class="tab-no-bottom">
         <el-tab-pane label="条码图书" name="first">
-          <div class="book-card" :key="i" v-for="(item,i) in bookList">
+          <div class="book-card" @click="showBookDetail(item)" :key="i" v-for="(item,i) in bookList">
             <div class="book-img">
               <img :src="item.graph" alt="">
             </div>
@@ -16,7 +16,7 @@
               </div>
             </div>
           </div>
-          <pages :pages="page" @toPagesFather="getBooks"></pages>
+          <pages v-bind="page" @getLimit="getBooks"></pages>
         </el-tab-pane>
 
         <el-tab-pane label="软件下载" name="second">
@@ -53,6 +53,28 @@
         </el-tab-pane>
       </el-tabs>
     </div>
+    <el-dialog
+        class="gs-book-detail-dialog"
+        :title="currentBook.prename"
+        :visible.sync="dialogVisible"
+        width="55%"
+    >
+      <div class="book-card">
+        <div class="book-img">
+          <img :src="currentBook.graph" alt="">
+        </div>
+        <div class="book-content">
+          <div class="title">{{ currentBook.prename }}</div>
+          <div class="price">¥{{ currentBook.price }}</div>
+          <div class="desc">
+            <span>{{ currentBook.author }} 著</span> ｜ <span>{{ currentBook.predate }}</span> ｜
+            <span>{{ currentBook.company }}</span>
+          </div>
+        </div>
+      </div>
+      <h4 style="border-bottom: none; margin-bottom: 20px; font-size: 16px;color: #002c6c">图书介绍</h4>
+      <div style="text-indent: 2em" v-html="currentBook.description"></div>
+    </el-dialog>
   </div>
 </template>
 
@@ -67,6 +89,8 @@ export default {
   },
   data() {
     return {
+      dialogVisible: false,
+      currentBook: {},
       activeName: 'second',
       appList: [
         {
@@ -110,7 +134,7 @@ export default {
       ],
       bookList: [],
       page: {
-        currentPage: 1,
+        currPage: 1,
         pageSize: 10,
         pageCount: 1,
         total: 10,
@@ -121,13 +145,17 @@ export default {
     this.getBooks()
   },
   methods: {
+    showBookDetail(book) {
+      this.currentBook = book;
+      this.dialogVisible = true;
+    },
+
     async getBooks(page = 1) {
       const res = await this.$api.service.getCodeBook({page: page, size: this.page.pageSize})
       const {returnCode, data} = res;
-      console.log(data, 'datadatadatadata');
       if (returnCode === "0") {
         this.bookList = data.list
-        this.page.currentPage = data.currPage
+        this.page.currPage = data.currPage
         this.page.total = data.totalCount
         this.page.pageCount = data.totalPage
       }
@@ -137,6 +165,10 @@ export default {
 </script>
 
 <style lang="scss">
+.gs-book-detail-dialog .el-dialog .el-dialog__body{
+  background-color: #FDFAF6;
+  padding: 28px 24px;
+}
 .book.n-service {
   .book-card {
     display: flex;