✨ feat: 增加书籍详情查看

src/api/qxs.js

@@ -2,6 +2,7 @@ import request from '../utils/request'
 
 const api = {
   getBookList: '/QXS/GetBookList',
+  getBookImg: '/QXS/GetBookImg'
 }
 
 export function GetBookList(parameter) {
@@ -11,3 +12,11 @@ export function GetBookList(parameter) {
     data: parameter
   })
 }
+
+export function GetBookImg(parameter) {
+  return request({
+    url: api.getBookImg,
+    method: 'get',
+    params: parameter
+  })
+}

src/pages/qxs/getBookList.vue

@@ -45,13 +45,14 @@
                 </div>
             </div>
 
-            <a-table :data="data" stripe hoverable :pagination="false" column-resizable class="table" :loading="loading" :columns="columns">
+            <a-table :data="data" stripe hoverable :pagination="false" column-resizable class="table" :loading="loading"
+                :columns="columns">
                 <template #imgUrl="{ record }">
-                    <a-avatar shape="square" size="large" :style="{ backgroundColor: 'rgba(0,0,0,0.25)' }">
+                    <a-avatar shape="square" :size="50" :style="{ backgroundColor: 'rgba(0,0,0,0.25)' }"
+                        v-if="!bookInfo[record.isbn]?.img">
                         <icon-book />
-                        <!-- <icon-book v-if="!record.imgUrl" />
-                        <img alt="" :src="record.imgUrl" v-else /> -->
                     </a-avatar>
+                    <a-image width="50" height="50" fit="contain" v-else :src="bookInfo[record.isbn]?.img" />
                 </template>
                 <template #textbookPrice="{ record }">
                     <span class="oldPrice"><del>￥{{ record.textbookPrice }}</del></span> ￥{{
@@ -60,18 +61,21 @@
                 <template #crouseName="{ record }">
                     {{ record.crouseName }}({{ record.courseType }})
                 </template>
+                <template #optional="{ record }">
+                    <a-button @click="showDetail(record.isbn)">查看详情</a-button>
+                </template>
             </a-table>
             <div class="total">
-                共找到 {{ data.length }} 本书籍
+                共找到 {{ data.length }} 本书籍，封面图片及介绍来自第三方，仅供参考
             </div>
         </a-card>
     </div>
 </template>
 
 <script setup>
-import { ref, reactive } from 'vue'
-import { GetBookList } from '@/api/qxs'
-import { Notification } from '@arco-design/web-vue'
+import { ref, reactive, h } from 'vue'
+import { GetBookList, GetBookImg } from '@/api/qxs'
+import { Notification, Modal, Button } from '@arco-design/web-vue'
 
 const form = reactive({
     username: '',
@@ -80,6 +84,7 @@ const form = reactive({
 
 const loading = ref(false)
 const data = ref([])
+const bookInfo = ref({})
 const userInfo = ref({})
 
 const columns = [
@@ -110,9 +115,32 @@ const columns = [
     }, {
         title: '上课班级',
         dataIndex: 'className',
+    }, {
+        title: '',
+        slotName: 'optional',
     }
 ]
 
+const showDetail = (isbn) => {
+    Modal.info({
+        title: '书籍详情',
+        content: () => h('div', { class: 'info-modal-content' }, [
+            h('div', { style: 'margin-bottom: 10px;' }, `出版日期：${bookInfo.value[isbn].pubdate != '' ? bookInfo.value[isbn].pubdate : '未知'}`),
+            h('div', { style: 'margin-bottom: 10px;' }, `书籍简介：${bookInfo.value[isbn].summary != '' ? bookInfo.value[isbn].summary : '暂无简介'}`)
+        ])
+    })
+}
+
+const getBookInfo = async (isbn) => {
+    try {
+        const res = await GetBookImg({ isbn })
+        if (!res || res.code !== 0)
+            return console.log(`获取书籍信息失败！${res.msg ?? ''}`)
+        bookInfo.value[isbn] = res.data
+    } catch (error) {
+        console.log(`获取书籍信息失败！${error.message}`)
+    }
+}
 
 const getBookList = async () => {
     try {
@@ -131,7 +159,10 @@ const getBookList = async () => {
 
         data.value = res.data.bookList || []
         userInfo.value = res.data.userInfo
-        console.log(res.data)
+
+        data.value.forEach((item) => {
+            getBookInfo(item.isbn)
+        })
     } catch (error) {
         Notification.error({
             title: '获取书单失败！',
@@ -186,7 +217,7 @@ const getBookList = async () => {
     .total {
         text-align: center;
         margin: 15px;
-
+        font-size: 0.8em;
     }
 }
 </style>