✨ feat: 增加趣选书书单查询功能

src/api/qxs.js

@@ -0,0 +1,13 @@
+import request from '../utils/request'
+
+const api = {
+  getBookList: '/QXS/GetBookList',
+}
+
+export function GetBookList(parameter) {
+  return request({
+    url: api.getBookList,
+    method: 'post',
+    data: parameter
+  })
+}

src/pages/qxs/getBookList.vue

@@ -0,0 +1,191 @@
+<template>
+    <div class="container">
+        <Breadcrumb :items="['趣选书', '书单查询']" />
+
+        <a-card title="趣选书 · 书单查询" class="card">
+            <div class="userLogin">
+                <a-form :model="form" direction="vertical" size="large" :style="{ width: '50%' }">
+                    <a-form-item field="username" label="用户名">
+                        <a-input v-model="form.username" :style="{ width: '320px' }" placeholder="请输入趣选书账户" allow-clear>
+                            <template #prefix>
+                                <icon-user />
+                            </template>
+                        </a-input>
+                        <template #extra>
+                            <div>默认账号：ctbu+学号，如ctbu2024412000</div>
+                        </template>
+                    </a-form-item>
+                    <a-form-item field="password" label="密码">
+                        <a-input-password v-model="form.password" placeholder="请输入趣选书密码" :style="{ width: '320px' }"
+                            :defaultVisibility="false" allow-clear>
+                            <template #prefix>
+                                <icon-lock />
+                            </template>
+                        </a-input-password>
+                        <template #extra>
+                            <div>已为您填充默认密码：ctbu123456</div>
+                        </template>
+                    </a-form-item>
+                    <a-form-item>
+                        <a-space>
+                            <a-button @click="getBookList" :loading="loading">查询</a-button>
+                        </a-space>
+                    </a-form-item>
+                </a-form>
+
+                <a-divider direction="vertical" />
+
+                <div class="userInfo">
+                    <a-avatar :style="{ backgroundColor: '#3370ff' }" :size="70">
+                        <IconUser />
+                    </a-avatar>
+
+                    <div class="username">{{ userInfo.userName ?? '待查询' }}</div>
+                    <div class="termName">{{ userInfo.univName ?? '' }} - {{ userInfo.termName ?? '' }}</div>
+                </div>
+            </div>
+
+            <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)' }">
+                        <icon-book v-if="!record.imgUrl" />
+                        <img alt="" :src="record.imgUrl" v-else />
+                    </a-avatar>
+                </template>
+                <template #textbookPrice="{ record }">
+                    <span class="oldPrice"><del>￥{{ record.textbookPrice }}</del></span> ￥{{
+                        record.textbookDiscountedPrice }}
+                </template>
+                <template #crouseName="{ record }">
+                    {{ record.crouseName }}({{ record.courseType }})
+                </template>
+            </a-table>
+            <div class="total">
+                共找到 {{ 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'
+
+const form = reactive({
+    username: '',
+    password: 'ctbu123456',
+})
+
+const loading = ref(false)
+const data = ref([])
+const userInfo = ref({})
+
+const columns = [
+    {
+        title: '封面',
+        slotName: 'imgUrl',
+    }, {
+        title: '书名',
+        dataIndex: 'title',
+    }, {
+        title: '出版社',
+        dataIndex: 'pressName',
+    }, {
+        title: '作者',
+        dataIndex: 'author',
+    }, {
+        title: 'ISBN号',
+        dataIndex: 'isbn',
+    }, {
+        title: '定价',
+        slotName: 'textbookPrice',
+    }, {
+        title: '课程名称',
+        dataIndex: 'courseName',
+    }, {
+        title: '任课教师',
+        dataIndex: 'multiTeacherName',
+    }, {
+        title: '上课班级',
+        dataIndex: 'className',
+    }
+]
+
+
+const getBookList = async () => {
+    try {
+        loading.value = true
+        const { username, password } = form
+        if (!username || !password)
+            return Notification.error({
+                title: '请完善趣选书账号信息！'
+            })
+        const res = await GetBookList({ username, password })
+        if (!res || res.code !== 0)
+            return Notification.error({
+                title: '获取书单失败！',
+                content: res?.msg ?? '请稍后再试'
+            })
+
+        data.value = res.data.bookList || []
+        userInfo.value = res.data.userInfo
+        console.log(res.data)
+    } catch (error) {
+        Notification.error({
+            title: '获取书单失败！',
+            content: error.message || '请稍后再试'
+        })
+    } finally {
+        loading.value = false
+    }
+}
+
+</script>
+
+<style lang="less" scoped>
+.container {
+    padding: 0 20px 20px 20px;
+}
+
+.table {
+    margin-top: 15px;
+
+    .oldPrice {
+        color: #777;
+        font-size: 0.8em;
+    }
+}
+
+.card {
+    .userLogin {
+        display: flex;
+        width: 100%;
+        margin: 0 auto;
+
+        .userInfo {
+            display: flex;
+            flex-direction: column;
+            justify-content: center;
+            align-items: center;
+            width: 50%;
+
+            .username {
+                margin-top: 10px;
+                font-size: 1.6em;
+            }
+
+            .termName {
+                margin-top: 10px;
+                font-size: 1.1em;
+            }
+        }
+    }
+
+    .total {
+        text-align: center;
+        margin: 15px;
+
+    }
+}
+</style>

src/router/index.js

@@ -183,6 +183,25 @@ const routes = [
             }
         ]
     },
+    {
+        path: "/qxs",
+        name: "qxs",
+        component: DEFAULT_LAYOUT,
+        meta: {
+            title: '趣选书',
+            icon: 'icon-book'
+        },
+        children: [
+            {
+                path: 'getBookList',
+                name: 'qxs.getBookList',
+                component: () => import('../pages/qxs/getBookList.vue'),
+                meta: {
+                    title: '书单查询'
+                }
+            }
+        ]
+    },
     {
         path: "/download",
         name: "download",
@@ -378,7 +397,7 @@ const router = VueRouter.createRouter({
     routes: routes
 })
 
-const allow = ['/', '/login', '/htmlView/view']
+const allow = ['/', '/login', '/qxs/getBookList', '/htmlView/view']
 
 router.beforeEach(async (to, from, next) => {
     if (!allow.includes(to.path)) {