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/personalCenter/myBook.vue | 310 +++++++++++++++++++++++++++++++++++++++++++++++++++
1 files changed, 307 insertions(+), 3 deletions(-)
diff --git a/src/views/personalCenter/myBook.vue b/src/views/personalCenter/myBook.vue
index 191e50d..f58b2b3 100644
--- a/src/views/personalCenter/myBook.vue
+++ b/src/views/personalCenter/myBook.vue
@@ -1,7 +1,311 @@
<template>
- <div class="myBook">
- <div class="myBook_header">
- <div class="myBook_header_title">鎴戠殑璁㈠崟</div>
+ <div class="personalPage-box">
+ <div class="personalPage-title">鎴戠殑涔︽灦</div>
+ <div class="personalPage-content">
+ <div class="pageBox cartPage" v-loading="isLoading">
+ <div class="myCarTopPage" v-if="collectList.length > 0">
+ <div
+ class="bookone"
+ v-for="(item, index) in collectList"
+ :key="index"
+ @click="goDetail(item)"
+ >
+ <div class="imgBox">
+ <img v-if="item.product.icon" :src="item.product.icon" />
+ <img v-else :src="defaultImg" alt="" />
+ </div>
+ <div class="details">
+ <div class="text-flow" v-if="item.product.name">
+ {{ item.product.name || '-' }}
+ </div>
+ <div class="text-flow" :title="item.isbn">
+ ISBN锛歿{ item.isbn.length != 0 ? item.isbn : '-' }}
+ </div>
+ <div class="text-flow">浣滆�咃細{{ item.author.length != 0 ? item.author : '-' }}</div>
+ <!-- <div class="text-flow" v-if="item.ExpiryDate">
+ 鎴鏃ユ湡锛�<span style="color: #dd0000">{{ item.ExpiryDate }}</span>
+ </div> -->
+ </div>
+ </div>
+ </div>
+ <div class="myCarTopPage" v-else>
+ <el-empty style="margin: auto" description="鎮ㄨ繕鏈喘涔颁换浣曞浘涔�" :image-size="200" />
+ </div>
+ </div>
+ <div class="pageCon">
+ <!-- 鍒嗛〉 -->
+ <el-pagination
+ background
+ :current-page="paginationData.page - 0"
+ @size-change="handleSizeChange"
+ @current-change="handleCurrentChange"
+ :page-size="paginationData.limit"
+ layout="total, prev, pager, next, slot"
+ :total="paginationData.totalCount"
+ >
+ <div style="display: flex; align-items: center">
+ <span class="el-pagination__jump"
+ >鍓嶅線
+ <div class="el-input el-pagination__editor is-in-pagination">
+ <input
+ type="number"
+ autocomplete="off"
+ min="1"
+ :max="paginationData.totalPage"
+ v-model="inputPage"
+ class="el-input__inner"
+ @keyup.enter="jumpFun($event)"
+ />
+ </div>
+ 椤�
+ </span>
+ <el-button type="primary" class="toBtn" @click="jumpFun">纭畾</el-button>
+ </div>
+ </el-pagination>
+ </div>
</div>
</div>
</template>
+
+<script lang="ts" setup>
+import { reactive, ref, onMounted, inject, watch } from 'vue'
+import { useRouter } from 'vue-router'
+import defaultImg from '@/assets/images/default-book-img.png'
+import tool from '@/assets/js/toolClass'
+const MG: any = inject('MG')
+const config: any = inject('config')
+const router = useRouter()
+let collectList = ref([])
+let isLoading = ref(false)
+
+let paginationData = reactive({
+ page: 1,
+ limit: 6,
+ totalCount: 0,
+ totalPage: 0,
+})
+let inputPage = ref(1)
+const loading = ref(false)
+const listData = ref([])
+const keyQueryRequests = [
+ {
+ key: 'author',
+ },
+ {
+ key: 'isbn',
+ },
+]
+
+const getData = () => {
+ loading.value = true
+ const searchData = [
+ {
+ keywords: 'digitalTextbooks',
+ field: 'ProductType',
+ },
+ ]
+ const data = {
+ Size: paginationData.limit,
+ Start: (paginationData.page - 1) * paginationData.limit,
+ sort: {
+ type: 'Desc',
+ field: 'CreateDate',
+ },
+ searchList: searchData,
+ keyQueryRequests: keyQueryRequests,
+ }
+ MG.store.getPurchasedProductList(data).then(async (response) => {
+ listData.value = handResultsChange(response.datas)
+ listData.value.forEach((item) => {
+ item.product.icon = tool.getPublicImage(item.product.icon)
+ })
+ // //褰撳墠椤甸潰
+ paginationData.totalCount = response.totalSize
+ paginationData.totalPage =
+ response.totalSize % paginationData.limit === 0
+ ? response.totalSize / paginationData.limit
+ : Math.floor(response.totalSize / paginationData.limit) + 1
+ loading.value = false
+ collectList.value = response.datas
+ })
+}
+onMounted(() => {
+ getData()
+})
+// 澶勭悊鏌ヨ缁撴灉
+const handResultsChange = (data) => {
+ let fieldsData = []
+ for (let i = 0; i < data.length; i++) {
+ const item = data[i]
+ for (const val in keyQueryRequests) {
+ fieldsData.push(keyQueryRequests[val].key)
+ }
+ for (let i = 0; i < fieldsData.length; i++) {
+ const field = fieldsData[i]
+ item[field] = JSON.parse(item.datas[field])
+ const datas = item[field]
+ if (datas.length > 0) {
+ if (datas[0].Value) {
+ item[field] = datas[0].Value
+ } else if (datas[0].Data) {
+ item[field] = datas[0].Data.Value
+ }
+ }
+ }
+ }
+ return data
+}
+
+//鍒板浘涔﹁鎯�
+const goDetail = (item) => {
+ router.push({
+ path: '/bookdetail',
+ query: {
+ bookId: item.product.id,
+ },
+ })
+}
+
+//鍒嗛〉
+const handleSizeChange = (val) => {
+ paginationData.limit = val
+ getData()
+}
+const handleCurrentChange = (val) => {
+ paginationData.page = val
+ inputPage.value = val
+ getData()
+}
+const jumpFun = (event) => {
+ event.target.blur()
+ var that = this
+ if (inputPage.value <= 0) {
+ inputPage.value = 1
+ }
+ if (inputPage.value > paginationData.totalPage) {
+ inputPage.value = paginationData.totalPage
+ }
+ paginationData.page = inputPage.value
+ getData()
+}
+</script>
+<style scoped>
+.pageCon {
+ width: 100%;
+ float: left;
+ margin-top: 20px;
+ display: flex;
+ justify-content: center;
+}
+.myCarTopPage {
+ display: flex;
+ justify-content: flex-start;
+ flex-wrap: wrap;
+ box-sizing: border-box;
+}
+.details div:first-child {
+ font-size: 16px;
+ color: #019e58;
+ margin-bottom: 11px;
+ line-height: 24px;
+}
+
+.details div:nth-child(2) {
+ font-size: 14px;
+ color: #666;
+ margin: 15px 0;
+}
+
+.details div:nth-child(3) {
+ margin-bottom: 11px;
+ display: flex;
+ align-items: center;
+}
+.details div:last-child {
+ font-size: 14px;
+ color: #666666;
+}
+.resonBox {
+ display: flex;
+ line-height: 24px;
+}
+.resonTxt {
+ flex: 1;
+ overflow: hidden;
+ line-height: 24px;
+ text-overflow: ellipsis;
+ display: -webkit-box;
+ -webkit-line-clamp: 3;
+ flex-direction: column;
+}
+
+.bookoneTitle {
+ display: flex;
+ justify-content: space-between;
+ align-items: center;
+ padding-bottom: 10px;
+ border-bottom: 1px solid #ddd;
+}
+.bookone {
+ display: flex;
+ width: 405px;
+ min-height: 173px;
+ cursor: pointer;
+ margin: 10px;
+ box-sizing: border-box;
+ padding: 15px 30px;
+ border: 1px solid #b1ccc1;
+ box-sizing: border-box;
+ border-radius: 5px;
+}
+.bookone:hover {
+ -moz-box-shadow: 4px 3px 6px rgba(0, 0, 0, 0.3);
+ -webkit-box-shadow: 4px 3px 6px rgba(0, 0, 0, 0.3);
+ box-shadow: 4px 3px 6px rgba(0, 0, 0, 0.3);
+}
+
+.bookone .imgBox {
+ position: relative;
+ width: 120px;
+ height: 150px;
+ background: #fff;
+ box-shadow: 0px 0px 20px 1px #ccc;
+}
+.newBookli .imgBox {
+ position: relative;
+ width: 105px;
+ height: 140px;
+}
+
+.imgBox img {
+ width: auto;
+ height: auto;
+ max-width: 100%;
+ max-height: 100%;
+ position: absolute;
+ top: 0;
+ left: 0;
+ right: 0;
+ bottom: 0;
+ margin: auto;
+}
+
+.details {
+ flex: 1;
+ margin-left: 10px;
+ margin-top: 10px;
+ overflow: hidden;
+}
+.pageBox {
+ width: 100%;
+}
+.noDataTxt {
+ margin: 50px auto;
+ text-align: center;
+ font-size: 22px;
+ color: #999;
+}
+.el-pagination button {
+ margin-left: 10px;
+}
+</style>
--
Gitblit v1.9.1