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 | 252 +++++++++++++++++++++++---------------------------
1 files changed, 117 insertions(+), 135 deletions(-)
diff --git a/src/views/personalCenter/myBook.vue b/src/views/personalCenter/myBook.vue
index 7b08426..f58b2b3 100644
--- a/src/views/personalCenter/myBook.vue
+++ b/src/views/personalCenter/myBook.vue
@@ -11,205 +11,183 @@
@click="goDetail(item)"
>
<div class="imgBox">
- <img :src="item.product.icon" alt />
+ <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 || "-" }}
+ {{ item.product.name || '-' }}
</div>
- <div class="text-flow" :title="item.tourism_ISBN">
- ISBN锛歿{ item.tourism_ISBN.length != 0 ? item.tourism_ISBN : "-" }}
+ <div class="text-flow" :title="item.isbn">
+ ISBN锛歿{ item.isbn.length != 0 ? item.isbn : '-' }}
</div>
- <div class="text-flow">
- 浣滆�咃細{{ item.tourism_author.length != 0 ? item.tourism_author : "-" }}
- </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 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: inline-block">
- <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 class="myCarTopPage" v-else>
- <el-empty description="鎮ㄨ繕鏈喘涔颁换浣曞浘涔�" :image-size="200" />
+ <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 { useUserStore, useBreadcrumbStore } from "@/store";
-import tool from "@/assets/js/toolClass";
-const MG: any = inject("MG");
-const config: any = inject("config");
-const router = useRouter();
-const crumbStore = useBreadcrumbStore();
-let collectList = ref([]);
-let currentCollect = ref("book");
-let isLoading = ref(false);
-let pages = reactive({
- page: 1,
- pageSize: 10,
- count: 0,
- loading: false,
-});
-let linkType = ref("PurchasedProduct");
+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: 10,
+ limit: 6,
totalCount: 0,
totalPage: 0,
-});
-let inputPage = ref(1);
-const loading = ref(false);
-const listData = ref([]);
+})
+let inputPage = ref(1)
+const loading = ref(false)
+const listData = ref([])
const keyQueryRequests = [
{
- key: "author",
+ key: 'author',
},
{
- key: "isbn",
+ key: 'isbn',
},
-];
+]
const getData = () => {
- loading.value = true;
+ loading.value = true
const searchData = [
{
- keywords: "digitalTextbooks",
- field: "ProductType",
+ keywords: 'digitalTextbooks',
+ field: 'ProductType',
},
- ];
+ ]
const data = {
Size: paginationData.limit,
Start: (paginationData.page - 1) * paginationData.limit,
sort: {
- type: "Desc",
- field: "CreateDate",
+ type: 'Desc',
+ field: 'CreateDate',
},
searchList: searchData,
keyQueryRequests: keyQueryRequests,
- };
+ }
MG.store.getPurchasedProductList(data).then(async (response) => {
- listData.value = handResultsChange(response.datas);
+ listData.value = handResultsChange(response.datas)
listData.value.forEach((item) => {
- item.product.icon = tool.getPublicImage(item.product.icon);
- });
- // console.log(that.collectList);
+ item.product.icon = tool.getPublicImage(item.product.icon)
+ })
// //褰撳墠椤甸潰
- paginationData.totalCount = response.totalSize;
+ 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;
- });
-};
+ : Math.floor(response.totalSize / paginationData.limit) + 1
+ loading.value = false
+ collectList.value = response.datas
+ })
+}
onMounted(() => {
- getData();
-});
+ getData()
+})
// 澶勭悊鏌ヨ缁撴灉
const handResultsChange = (data) => {
- let fieldsData = [];
+ let fieldsData = []
for (let i = 0; i < data.length; i++) {
- const item = data[i];
+ const item = data[i]
for (const val in keyQueryRequests) {
- fieldsData.push(keyQueryRequests[val].key);
+ 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];
+ 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;
+ item[field] = datas[0].Value
} else if (datas[0].Data) {
- item[field] = datas[0].Data.Value;
+ item[field] = datas[0].Data.Value
}
}
}
}
- return data;
-};
+ return data
+}
//鍒板浘涔﹁鎯�
const goDetail = (item) => {
- let crumbs = [
- {
- name: "鏁欐潗璇︽儏",
+ router.push({
+ path: '/bookdetail',
+ query: {
+ bookId: item.product.id,
},
- ];
- crumbStore.dispatch("setCrumbs", {
- type: "textbooks",
- data: crumbs,
- callback: (key) => {
- router.push({
- name: "digitalTextbooks-textbooksDetail",
- query: {
- id: item.product.id,
- rootCmsItemId: item.product.rootCmsItemId,
- crumbsKey: key,
- },
- });
- },
- });
-};
+ })
+}
//鍒嗛〉
const handleSizeChange = (val) => {
- paginationData.limit = val;
- getData();
-};
+ paginationData.limit = val
+ getData()
+}
const handleCurrentChange = (val) => {
- paginationData.page = val;
- inputPage.value = val;
- getData();
-};
+ paginationData.page = val
+ inputPage.value = val
+ getData()
+}
const jumpFun = (event) => {
- event.target.blur();
- var that = this;
+ event.target.blur()
+ var that = this
if (inputPage.value <= 0) {
- inputPage.value = 1;
+ inputPage.value = 1
}
if (inputPage.value > paginationData.totalPage) {
- inputPage.value = paginationData.totalPage;
+ inputPage.value = paginationData.totalPage
}
- paginationData.page = inputPage.value;
- getData();
-};
+ paginationData.page = inputPage.value
+ getData()
+}
</script>
<style scoped>
.pageCon {
@@ -220,14 +198,16 @@
justify-content: center;
}
.myCarTopPage {
+ display: flex;
+ justify-content: flex-start;
+ flex-wrap: wrap;
box-sizing: border-box;
- overflow: hidden;
- padding-bottom: 20px;
}
.details div:first-child {
font-size: 16px;
- color: #2b68cd;
+ color: #019e58;
margin-bottom: 11px;
+ line-height: 24px;
}
.details div:nth-child(2) {
@@ -268,14 +248,15 @@
}
.bookone {
display: flex;
- width: 478px;
+ width: 405px;
min-height: 173px;
- float: left;
cursor: pointer;
+ margin: 10px;
box-sizing: border-box;
- margin: 20px 0px 0 20px;
- padding: 10px 30px;
- border: 1px solid #ddd;
+ 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);
@@ -286,8 +267,9 @@
.bookone .imgBox {
position: relative;
width: 120px;
- height: 160px;
+ height: 150px;
background: #fff;
+ box-shadow: 0px 0px 20px 1px #ccc;
}
.newBookli .imgBox {
position: relative;
--
Gitblit v1.9.1