| | |
| | | @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 || "-" }} |
| | | </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 : "-" }} |
| | | 作者:{{ 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" /> |
| | | </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> |
| | |
| | | <script lang="ts" setup> |
| | | import { reactive, ref, onMounted, inject, watch } from "vue"; |
| | | import { useRouter } from "vue-router"; |
| | | import { useUserStore, useBreadcrumbStore } from "@/store"; |
| | | import defaultImg from "@/assets/images/default-book-img.png"; |
| | | import { useUserStore } 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); |
| | |
| | | listData.value.forEach((item) => { |
| | | item.product.icon = tool.getPublicImage(item.product.icon); |
| | | }); |
| | | // console.log(that.collectList); |
| | | // //当前页面 |
| | | paginationData.totalCount = response.totalSize; |
| | | paginationData.totalPage = |
| | |
| | | ? response.totalSize / paginationData.limit |
| | | : Math.floor(response.totalSize / paginationData.limit) + 1; |
| | | loading.value = false; |
| | | collectList.value = response.datas; |
| | | }); |
| | | }; |
| | | onMounted(() => { |
| | |
| | | |
| | | //到图书详情 |
| | | const goDetail = (item) => { |
| | | let crumbs = [ |
| | | { |
| | | name: "教材详情", |
| | | }, |
| | | ]; |
| | | 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, |
| | | }, |
| | | }); |
| | | router.push({ |
| | | path: "/bookdetail", |
| | | query: { |
| | | bookId: item.product.id, |
| | | }, |
| | | }); |
| | | }; |
| | |
| | | justify-content: center; |
| | | } |
| | | .myCarTopPage { |
| | | display: flex; |
| | | justify-content: flex-start; |
| | | box-sizing: border-box; |
| | | overflow: hidden; |
| | | padding-bottom: 20px; |
| | |
| | | } |
| | | .bookone { |
| | | display: flex; |
| | | width: 478px; |
| | | width: 420px; |
| | | min-height: 173px; |
| | | float: left; |
| | | cursor: pointer; |