From 49a435043b0b1a289a24606e35253365d7ab3956 Mon Sep 17 00:00:00 2001
From: QYF-GitLab1 <1940665526@qq.com>
Date: 星期一, 25 八月 2025 17:51:57 +0800
Subject: [PATCH] 首页、及教学出版样式修改
---
src/views/personalCenter/myCollection.vue | 298 +++++++++++++++++++++++++++++++++++++++++++++++++++++++++++
1 files changed, 297 insertions(+), 1 deletions(-)
diff --git a/src/views/personalCenter/myCollection.vue b/src/views/personalCenter/myCollection.vue
index 20bd004..fccd321 100644
--- a/src/views/personalCenter/myCollection.vue
+++ b/src/views/personalCenter/myCollection.vue
@@ -1,3 +1,299 @@
<template>
- <div>鎴戠殑鏀惰棌</div>
+ <!-- <page> -->
+ <div class="personalPage-box">
+ <div class="personalPage-title">鎴戠殑鏀惰棌</div>
+ <div class="personalPage-content">
+ <div class="cartClass">
+ <el-tabs v-model="currentCollect" type="capsule" @tab-click="tabCart">
+ <el-tab-pane label="鏁板瓧鏁欐潗" name="textBooks"></el-tab-pane>
+ </el-tabs>
+ </div>
+ <div class="myCarTopPage">
+ <div class="list-box" v-loading="pages.loading">
+ <div
+ :class="
+ currentCollect == 'book' || currentCollect == 'textBooks'
+ ? 'bookCartContent cartContent'
+ : currentCollect == 'course'
+ ? 'courseCartContent cartContent'
+ : 'cartContent'
+ "
+ >
+ <div
+ class="collectList flex jc-sb clear"
+ v-if="collectList.length > 0 && !pages.loading"
+ >
+ <div v-for="(item, index) in collectList" :key="index" class="collectList-item fl">
+ <div class="cover" @click="goBookDetails(item.id, item.name)">
+ <img :src="item.icon" alt="" />
+ </div>
+ <div class="info" @click="goBookDetails(item.id, item.name)">
+ <span>{{ item.name }}</span>
+ </div>
+ <div class="currentBtn hover" @click="setCoolect(item)">
+ <img src="@/assets/images/personalCenter/collect-click.png" alt="star" />
+ </div>
+ </div>
+ </div>
+ <div v-if="collectList.length == 0 && !pages.loading">
+ <el-empty :image-size="200" description="鏆傛棤鏁版嵁" />
+ </div>
+ </div>
+ <div class="pagination-box">
+ <el-pagination
+ v-model:current-page="pages.page"
+ v-model:page-size="pages.pageSize"
+ :disabled="disabled"
+ :background="background"
+ layout="total, prev, pager, next"
+ :total="pages.count"
+ @current-change="handleCurrentChange"
+ v-if="collectList.length > 0 && !pages.loading"
+ />
+ </div>
+ </div>
+ </div>
+ </div>
+ </div>
+ <!-- </page> -->
</template>
+
+<script setup lang="ts">
+import { reactive, ref, onMounted, inject, watch } from 'vue'
+import { ElMessage, ElMessageBox } from 'element-plus'
+import { useUserStore } from '@/store'
+import { useRouter } from 'vue-router'
+const userStore = useUserStore()
+const router = useRouter()
+const MG: any = inject('MG')
+const config: any = inject('config')
+let currentCollect = ref('textBooks')
+let collectList = ref([])
+const background = ref(false)
+const disabled = ref(false)
+let pages = reactive({
+ page: 1,
+ pageSize: 10,
+ count: 0,
+ loading: false,
+})
+let linkType = ref('FavoriteBookCity')
+
+const tabCart = (event: Event) => {
+ pages.page = 1
+ pages.loading = true
+ collectList.value = []
+ currentCollect.value = event.props.name
+ if (currentCollect.value == 'textBooks') {
+ linkType.value = 'FavoriteBookCity'
+ }
+ getDataList()
+}
+
+function getDataList() {
+ pages.loading = true
+ MG.store
+ .getProductList({
+ handelEBooK: true,
+ queryType: 'AppUserProductLink',
+ linkType: linkType.value,
+ paging: {
+ start: pages.pageSize * pages.page - pages.pageSize,
+ size: pages.pageSize,
+ },
+ })
+ .then((res) => {
+ collectList.value = res.datas
+ pages.count = res.total
+ pages.loading = false
+ })
+ .catch(() => {
+ pages.loading = false
+ })
+}
+onMounted(() => {
+ getDataList()
+})
+
+// watch(
+// () => userStore.token,
+// () => {
+// getDataList()
+// }
+// )
+
+const handleCurrentChange = (val: number) => {
+ pages.page = val
+ getDataList()
+}
+
+const setCoolect = (item) => {
+ ElMessageBox.confirm('纭畾瑕佸彇娑堟敹钘忓悧锛�', {
+ confirmButtonText: '纭畾',
+ cancelButtonText: '鍙栨秷',
+ autofocus: false,
+ type: 'warning',
+ })
+ .then(() => {
+ MG.store
+ .delProductLink({
+ productIds: [item.id],
+ linkType: linkType.value,
+ })
+ .then(() => {
+ ElMessage({
+ message: '鏀惰棌宸插彇娑堬紒',
+ type: 'success',
+ })
+ pages.page = 1
+ getDataList()
+ })
+ })
+ .catch(() => {})
+}
+// 璺宠浆涔︽湰璇︽儏
+const goBookDetails = (id: number, name: string) => {
+ router.push({
+ path: '/bookdetail',
+ query: {
+ bookId: id,
+ },
+ })
+}
+</script>
+<style lang="less" scoped>
+.cartClass {
+ ::v-deep .el-tabs__nav-wrap::after {
+ background-color: #019e58;
+ height: 1px;
+ }
+
+ ::v-deep .el-tabs__item {
+ width: 100px;
+ padding: 0;
+ color: #545c63;
+ }
+
+ ::v-deep .is-active {
+ background-color: #019e58;
+ color: #fff;
+ border-radius: 3px 3px 0 0;
+ }
+}
+
+.collectList {
+ // overflow: hidden;
+ justify-content: flex-start;
+ flex-wrap: wrap;
+}
+
+.bookCartContent {
+ .collectList-item {
+ width: 130px;
+ cursor: pointer;
+ box-sizing: border-box;
+ float: left;
+ position: relative;
+ margin-right: 38px;
+
+ .cover {
+ width: 100%;
+ height: 180px;
+ box-shadow: 0px 0px 20px 1px #ccc;
+
+ img {
+ width: 100%;
+ height: 100%;
+ object-fit: contain;
+ }
+ }
+
+ .info {
+ height: 90px;
+ padding: 15px 0;
+ width: 100%;
+
+ span {
+ font-weight: bold;
+ height: 45px;
+ line-height: 22px;
+ display: -webkit-box;
+ margin-bottom: 5px;
+ -webkit-box-orient: vertical;
+ -webkit-line-clamp: 2;
+ overflow: hidden;
+ text-overflow: ellipsis;
+ }
+ }
+ }
+
+ .collectList-item:nth-child(5),
+ :nth-child(10) {
+ margin-right: 0;
+ }
+}
+
+.courseCartContent {
+ .collectList-item {
+ width: 28%;
+ cursor: pointer;
+ box-sizing: border-box;
+ float: left;
+ margin-right: 5%;
+ box-shadow: 0px 0px 20px 1px #ccc;
+ position: relative;
+
+ .cover {
+ width: 100%;
+ height: 130px;
+
+ img {
+ width: 100%;
+ height: 100%;
+ object-fit: contain;
+ }
+ }
+
+ .info {
+ height: 70px;
+ padding: 15px;
+ width: 100%;
+
+ span {
+ font-weight: bold;
+ height: 45px;
+ line-height: 22px;
+ display: -webkit-box;
+ margin-bottom: 5px;
+ -webkit-box-orient: vertical;
+ -webkit-line-clamp: 2;
+ overflow: hidden;
+ text-overflow: ellipsis;
+ }
+ }
+ }
+}
+
+.currentBtn {
+ width: 20px;
+ height: 20px;
+ padding: 2px;
+ background-color: #fff;
+ position: absolute;
+ top: 5px;
+ right: 2px;
+
+ img {
+ height: 20px;
+ }
+}
+
+.cartContent {
+ min-height: 495px;
+}
+
+.pagination-box {
+ display: flex;
+ justify-content: center;
+}
+</style>
--
Gitblit v1.9.1