From 87d2fac9c381de99f75ce6c6c39b7d638b980d7e Mon Sep 17 00:00:00 2001
From: 杨磊 <505174330@qq.com>
Date: 星期四, 21 八月 2025 17:52:14 +0800
Subject: [PATCH] 1111
---
src/views/bookStore/detail.vue | 774 ++++++++++++++++++++++++++++++++++++++++++++---------------
1 files changed, 576 insertions(+), 198 deletions(-)
diff --git a/src/views/bookStore/detail.vue b/src/views/bookStore/detail.vue
index bdddfb2..abef0e0 100644
--- a/src/views/bookStore/detail.vue
+++ b/src/views/bookStore/detail.vue
@@ -1,215 +1,593 @@
<template>
- <div style="background-color: #fff;" ref="contentData">
- <detailInfo :bookInfo="bookInfo" v-loading="loading"></detailInfo>
- <div class="contentBox" style="display: flex;">
- <div>
- <bookInfo :bookInfo="bookInfo" v-loading="loading" />
- <resource
- :bookInfo="bookInfo"
- :resourceSupportList="resourceSupportList"
- :allResource="allResource"
- v-loading="resourceLoading"
- />
+ <div class="homePage">
+ <div class="infoBox">
+ <div class="contentBox">
+ <div class="crumbs">
+ <el-breadcrumb separator-class="el-icon-arrow-right">
+ <el-breadcrumb-item :to="{ name: 'bookStore' }">鏁板瓧鏁欐潗</el-breadcrumb-item>
+ <el-breadcrumb-item>璇︽儏</el-breadcrumb-item>
+ </el-breadcrumb>
+ </div>
+ <div class="infoTag" v-if="bookInfo.projectTitle">
+ <el-tooltip
+ class="item"
+ effect="dark"
+ :content="bookInfo.projectTitle"
+ placement="top-start"
+ >
+ <div class="tagText">
+ {{ bookInfo.projectTitle }}
+ </div>
+ </el-tooltip>
+ </div>
+ <div class="bookDetail">
+ <div class="bookImg">
+ <img class="autoImg" :src="bookInfo.icon" alt="" />
+ </div>
+ <span class="iconfont icon-tubiaozhizuo"></span>
+
+ <div class="detailBox">
+ <div class="bookTitle">
+ <div class="bookName" :title="bookInfo.name">
+ {{ bookInfo.name }}
+ </div>
+ <div class="bookTag" :title="bookInfo.seriesName">
+ {{ bookInfo.seriesName }}
+ </div>
+ <div class="collectBox">
+ <img
+ @click="collectBook"
+ v-if="bookInfo.isFavourite"
+ class="buyIcon"
+ src="@/assets/images/bookStore/shoucang.svg"
+ style="margin-right: 10px"
+ />
+ <span
+ @click="collectBook"
+ v-else
+ class="iconfont icon-shoucang"
+ style="margin-right: 10px"
+ >
+ </span>
+ <div class="collectText" @click="collectBook" v-if="bookInfo.isFavourite">
+ 宸叉敹钘�
+ </div>
+ <div class="collectText" @click="collectBook" v-else>鏀惰棌</div>
+ </div>
+ </div>
+ <div class="authorBox">
+ <div class="titleBox1">
+ <div>浣滆�咃細</div>
+ <div>鍑虹増鏃堕棿锛�</div>
+ </div>
+ <div class="valueBox">
+ <div>
+ {{ bookInfo.author ? bookInfo.author : '-' }}
+ </div>
+ <div>
+ {{
+ bookInfo.publicationDate
+ ? moment(bookInfo.publicationDate).format('YYYY-MM-DD')
+ : '-'
+ }}
+ </div>
+ </div>
+ <div class="titleBox1" style="margin-left: 30px">
+ <div>ISBN锛�</div>
+ <div>鐗堟锛�</div>
+ </div>
+ <div class="valueBox">
+ <div>
+ {{ bookInfo.isbn ? bookInfo.isbn : '-' }}
+ </div>
+ <div>
+ {{ bookInfo.pubNumber ? bookInfo.pubNumber : '-' }}
+ </div>
+ </div>
+ </div>
+ <div class="authorBox" style="box-sizing: border-box">
+ <div class="titleBox1">
+ <div>涓�绾у垎绫伙細</div>
+ <div>浜岀骇鍒嗙被锛�</div>
+ </div>
+ <div class="valueBox">
+ <div>鍏ㄥ浗楂樼瓑鑱屼笟鏁欒偛棰勯槻鍖诲涓撲笟瑙勫垝鏁欐潗</div>
+ <div>楂樼瓑鑱屼笟鏁欒偛</div>
+ </div>
+ </div>
+ <div class="purchaseBox">
+ <div class="priceBox">
+ <span v-if="bookInfo.price && bookInfo.price > 0">
+ <span>瀹氫环锛�</span><span>锟�</span> <span>{{ bookInfo.price || '-' }}</span
+ ><span v-if="bookInfo.VirtualPrice">鍘熶环锛氾骏{{ bookInfo.VirtualPrice }}</span>
+ </span>
+
+ <span class="price" v-else>
+ <span class="freePrice">鍏嶈垂</span>
+ </span>
+ </div>
+ <div
+ class="buyInfo"
+ v-if="
+ (currentRoute !== 'teachingServices' && bookInfo.paperBookDD) ||
+ bookInfo.paperBookJD ||
+ bookInfo.paperBookTmall
+ "
+ >
+ 绾歌川涔﹀叾浠栬喘涔版笭閬擄細
+ <span @click="toJDLink" v-if="bookInfo.paperBookJD">
+ <img class="buyIcon" src="@/assets/images/bookStore/浜笢icon-01.svg" />浜笢</span
+ >
+ <span @click="toDDLink" v-if="bookInfo.paperBookDD"
+ ><img class="buyIcon" src="@/assets/images/bookStore/褰撳綋缃�.svg" />褰撳綋</span
+ >
+ <span @click="toTmLink" v-if="bookInfo.paperBookTmall"
+ ><img
+ class="buyIcon"
+ src="@/assets/images/bookStore/tianmaologo2.svg"
+ />澶╃尗</span
+ >
+ </div>
+ </div>
+ <div class="btnBox">
+ <el-button
+ v-if="
+ currentRoute !== 'teachingServices' &&
+ !bookInfo.alreadyBuy &&
+ bookInfo.isSell &&
+ bookInfo.isSell == '1'
+ "
+ type="primary"
+ :disabled="bookInfo.alreadyBuy"
+ @click="gotoOrder"
+ >鐢靛瓙涔﹁喘涔�</el-button
+ >
+ <el-button
+ v-if="bookInfo.pdfFreeFile && !bookInfo.alreadyBuy"
+ type="primary"
+ plain
+ style="min-width: 98px"
+ @click="previewBook"
+ >璇曡</el-button
+ >
+ <el-button
+ v-else-if="bookInfo.pdfFile && bookInfo.alreadyBuy"
+ type="primary"
+ plain
+ style="min-width: 98px"
+ @click="previewBook"
+ >绔嬪嵆闃呰</el-button
+ >
+ <el-button
+ v-if="currentRoute == 'teachingServices' && !bookInfo.alreadyBuy"
+ plain
+ @click="addEbook"
+ >鐢靛瓙鏍蜂功</el-button
+ >
+ <el-button v-if="currentRoute == 'teachingServices'" plain @click="addPaperBook"
+ >绾歌川鏍蜂功</el-button
+ >
+ </div>
+ </div>
+ </div>
+ <el-dialog title="鑱旂郴缂栬緫" :visible.sync="contactVisible" width="30%" :lock-scroll="false">
+ <div class="contactBox" v-if="bookInfo.editor">
+ <div class="contacItem">
+ <i class="iconfont icon-renwu-ren contacIcon"></i>
+ {{ bookInfo.editor.name }}
+ </div>
+ <div class="contacItem">
+ <i class="iconfont icon-QQ contacIcon"></i>
+ {{ bookInfo.editor.qq }}
+ </div>
+ <div class="contacItem">
+ <i class="iconfont icon-tongxunlu contacIcon"></i>
+ {{ bookInfo.editor.phone }}
+ </div>
+ <div class="contacItem">
+ <i class="iconfont icon-dianhua contacIcon"></i>
+ {{ bookInfo.editor.telephone }}
+ </div>
+ </div>
+ <el-empty v-else description="鏆傛棤鏁版嵁" class="empty" :image-size="100"></el-empty>
+ </el-dialog>
+ <el-dialog title="淇℃伅鍙嶉" :visible.sync="dialogVisible" width="50%" :lock-scroll="false">
+ <div class="infoDialog">
+ <el-input
+ type="textarea"
+ :rows="8"
+ placeholder="璇︾粏鎻忚堪鎮ㄦ墍閬囧埌鐨勯棶棰橈紝鏈夊姪浜庡揩閫熺粰鎮ㄥ弽棣堬紒"
+ v-model="textarea"
+ >
+ </el-input>
+ <div class="subBtn">
+ <el-button type="primary" @click="sendDiscuss">鎻愪氦</el-button>
+ </div>
+ <div class="infoList">
+ <div class="infoItem" v-for="(item, index) in commentList" :key="index">
+ <div class="infoImg">
+ <img v-if="item.icon" class="autoImg" :src="item.icon" alt="" />
+ <i v-else class="el-icon-user-solid"></i>
+ </div>
+ <div class="infoContent">
+ <div class="infoTitle">
+ <div class="userNameBox">{{ item.content.name }}</div>
+ <div class="userNameBox">
+ {{ moment(item.createDate).format('YYYY-MM-DD') }}
+ </div>
+ </div>
+ <div class="infoText">
+ {{ item.content.content }}
+ </div>
+ </div>
+ </div>
+ </div>
+ </div>
+ </el-dialog>
</div>
- <div>
- <relatedRecommendation
- :bookInfo="bookInfo"
- :recommendKey="recommendKey"
- @reloadPage="reloadPage"
- ref="rela"
- />
- <!-- <history @reloadPage="reloadPage" /> -->
+ </div>
+
+ <div class="detailContent contentBox">
+ <div class="resourceBox">
+ <div class="tabsBox">
+ <el-tabs v-model="editableTabsValue" type="card" class="demo-tabs">
+ <el-tab-pane
+ v-for="item in editableTabs"
+ :key="item.name"
+ :label="item.title"
+ :name="item.name"
+ >
+ {{ item.content }}
+ </el-tab-pane>
+ </el-tabs>
+ </div>
+ <div v-if="editableTabsValue == '1'" class="textbookInfo">
+ <div class="textbookInfoItem">
+ <div class="titleBorderBox">鍥句功绠�浠�</div>
+ <div class="textbookContent"></div>
+ </div>
+ <div class="textbookInfoItem">
+ <div class="titleBorderBox">浣滆�呯畝浠�</div>
+ <div class="authorInfo"></div>
+ </div>
+ </div>
+ <div v-else-if="editableTabsValue == '2'" class="catalogue">bbbb</div>
</div>
+ <div class="recommendBox"></div>
</div>
</div>
</template>
-<script>
-import config from "@/assets/js/config";
+<script setup>
+import moment from 'moment'
+import { ref, onBeforeMount, inject, reactive, onMounted } from 'vue'
+const MG = inject('MG')
+import { useRouter, useRoute } from 'vue-router'
+const route = useRoute()
+const router = useRouter()
+let bookInfo = ref({})
+let digitalTextId = ref('')
+let editableTabsValue = ref('1')
-import detailInfo from "@/components/detail/detailInfo.vue";
-import relatedRecommendation from "@/components/detail/relatedRecommendation.vue";
-import bookInfo from "@/components/detail/bookInfo.vue";
-import resource from "@/components/detail/resource.vue";
-import history from "@/components/detail/history.vue";
-export default {
- components: {
- detailInfo,
- relatedRecommendation,
- bookInfo,
- resource,
- // history,
+const editableTabs = reactive([
+ {
+ title: '鏁欐潗淇℃伅',
+ name: '1',
},
- created() {
- if (this.$route.query.id && this.$route.query.cmsPath) {
- this.currentId = this.$route.query.id;
- this.currentCmsId = this.$route.query.cmsPath;
- this.getData();
- }
- window.scrollTo(0, 0);
- this.getData();
+ {
+ title: '鐩綍',
+ name: '2',
},
- data() {
- return {
- bookInfo: {},
- resourceSupportList: [],
- allResource: [],
- loading: true,
- resourceLoading: true,
- recommendKey: "",
- };
+ {
+ title: '閰嶅璧勬簮',
+ name: '3',
},
- methods: {
- getData(data) {
- this.loading = true;
- let query = {
- path: "*",
- queryType: "*",
- productId: data ? data.id : this.$route.query.id,
- cmsPath: data ? data.rootCmsItemId : this.$route.query.cmsPath, //鑾峰彇涔︾睄鏂囦欢澶�
- fields: {
- caupress_author: [],
- caupress_content: [],
- caupress_seriesName: [],
- caupress_publicationDate: [],
- caupress_ISBN: [],
- caupress_pubNumber: [],
- caupress_authorAbout: [],
- caupress_recommendationReason: [],
- caupress_preface: [],
- caupress_catalog: [],
- caupress_pdfFreeFile: [],
- caupress_paperBookJD: [],
- caupress_paperBookDD: [],
- caupress_catalogue: [],
- caupress_projectTitle: [],
- caupress_pdfFile: [],
- caupress_contactEditor: [],
- caupress_paperBookTmall: [],
- caupress_isSell: [],
- },
- linkTypes: [
- // 鑾峰彇鍏宠仈鐨勭紪杈戜俊鎭�
- {
- linkType: "caupress_editor",
- fields: {
- telephone: [],
- phone: [],
- qq: [],
- },
- },
- ],
- };
- // 鑾峰彇涔︾睄璇︽儏浠ュ強涔︾睄璧勬簮鏂囦欢澶�
- this.MG.store.getProductDetail(query).then((res) => {
- console.log(res, "res");
- this.bookInfo = res.datas;
- if (this.bookInfo.caupress_catalogue) {
- this.bookInfo.caupress_catalogue = JSON.parse(
- this.bookInfo.caupress_catalogue
- );
- // 鑾峰彇灞傛杩涜鐩稿叧鎺ㄨ崘
+ {
+ title: '棰樺簱',
+ name: '4',
+ },
+ {
+ title: '鏁欏笀璧勬簮',
+ name: '5',
+ },
+ {
+ title: '璧勬簮缁熻',
+ name: '6',
+ },
+])
- this.recommendKey = this.bookInfo.caupress_catalogue[0];
- console.log(this.recommendKey, "this.recommendKey");
- if (this.recommendKey.length > 0) {
- this.catalogue = [];
- this.recommendKey.forEach((item, index) => {
- if (index == 0) {
- this.catalogue.push(item);
- } else {
- this.catalogue.push("&" + item);
- }
- });
- }
- this.$refs.rela.getData(this.catalogue);
- } else {
- this.recommendKey = "null";
- }
- // 鑾峰彇鍏宠仈鐨勭紪杈戜俊鎭�
- let query = this.bookInfo.cmsDatas.find(
- (item) => item.queryTag == "QueryLink_" + "caupress_editor"
- );
- if (query && query.datas.length) {
- this.bookInfo.caupress_editor = {
- name: query.datas[0].name,
- telephone: query.datas[0].telephone,
- phone: query.datas[0].phone,
- qq: query.datas[0].qq,
- };
- }
- if (this.bookInfo.caupress_projectTitle) {
- this.bookInfo.caupress_projectTitle = JSON.parse(
- this.bookInfo.caupress_projectTitle
- );
- }
- if (this.bookInfo.caupress_projectTitle instanceof Array) {
- if (this.bookInfo.caupress_projectTitle.length > 1) {
- this.bookInfo.caupress_projectTitle =
- this.bookInfo.caupress_projectTitle.join("銆�");
- } else {
- this.bookInfo.caupress_projectTitle =
- this.bookInfo.caupress_projectTitle[0];
- }
- }
- this.bookInfo.VirtualPrice = this.bookInfo.saleMethod[0]?.VirtualPrice;
- this.bookInfo.caupress_seriesName =
- config.seriesList[this.bookInfo.caupress_seriesName];
- if (this.bookInfo.caupress_pubNumber) {
- this.bookInfo.caupress_pubNumber =
- this.bookInfo.caupress_pubNumber.split("_")[1];
- }
- this.loading = false;
- this.$store.commit("setHistoryBook", this.bookInfo);
- let folderList = res.datas.cmsDatas[0].datas;
- folderList.forEach((item) => {
- if (item.name == "閰嶅璧勬簮") {
- this.MG.store
- .getProductDetail({
- path: "*",
- cmsPath: res.datas.rootCmsItemId + "\\" + item.id, //涔︾睄鏂囦欢澶笽D鑾峰彇鏂囦欢澶逛腑璧勬簮
- productId: this.currentId,
- queryType: "*",
- itemFields: {
- caupress_fileType: [],
- caupress_file: [],
- caupress_allowDownload: [],
- },
- })
- .then((dataRes) => {
- console.log(dataRes, "resourceSupportList");
- this.resourceSupportList = dataRes.datas.cmsDatas[0].datas;
- });
- } else {
- this.MG.store
- .getProductDetail({
- path: "*",
- cmsPath: res.datas.rootCmsItemId + "\\" + item.id, //涔︾睄鏂囦欢澶笽D鑾峰彇鏂囦欢澶逛腑璧勬簮
- productId: this.currentId,
- queryType: "*",
- itemFields: {
- caupress_fileType: [],
- caupress_file: [],
- caupress_allowDownload: [],
- },
- })
- .then((dataRes) => {
- console.log(dataRes, "allResource");
- this.allResource = dataRes.datas.cmsDatas[0].datas;
- });
- }
- });
- // 鑾峰彇鑱旂郴缂栬緫淇℃伅
+onMounted(() => {
+ digitalTextId.value = route.query.bookId
+ getBookDetail(digitalTextId.value)
+})
- this.resourceLoading = false;
- });
+const getBookDetail = (id) => {
+ const query = {
+ path: '*',
+ queryType: '*',
+ productId: id,
+ storeInfo: 'defaultGoodsStore1',
+ coverSize: {
+ height: 300,
+ width: 210,
},
- reloadPage(data) {
- this.getData(data);
- window.scrollTo(0, 0);
+ fields: {
+ author: [],
+ isbn: [],
+ editionPrinting: [],
+ publicationDate: [],
+ content: [],
+ authorIntroduction: [],
+ catalogue: [],
+ probationPage: [],
+ teachingLevel: [],
+ professionalCategory: [],
+ executiveEditor: [],
},
- },
-};
+ }
+ MG.store.getProductDetail(query).then((res) => {
+ console.log(res, 'res')
+ bookInfo.value = res.datas
+ console.log(res.datas, 'res')
+ })
+}
</script>
-<style></style>
+<style lang="less" scoped>
+.homePage {
+ min-width: 1220px;
+ min-height: calc(100vh - 61.8%);
+ background-color: #fff;
+ padding-bottom: 100px;
+}
+
+.infoBox {
+ width: 100%;
+ height: 530px;
+ padding-top: 10px;
+ background-color: #fff;
+ background-image: url('@/assets/images/xiehe/detail/details_bg.png');
+}
+.infoTag {
+ position: relative;
+ width: 0px;
+ height: 0px;
+ border-right: 20px solid #fff;
+ border-left: 503px solid #e50021;
+ border-top: 19px solid #e50021;
+ border-bottom: 19px solid #e50021;
+}
+.tagText {
+ position: absolute;
+ left: -480px;
+ top: -9.5px;
+ max-width: 480px;
+ text-overflow: ellipsis;
+ color: #fff;
+ font-size: 18px;
+ overflow: hidden;
+ white-space: nowrap;
+}
+.bookDetail {
+ display: flex;
+ overflow: hidden;
+ margin-top: 30px;
+}
+.bookImg {
+ position: relative;
+ width: 338px;
+ height: 400px;
+ box-shadow: 2px 2px 10px #f2f2f2;
+}
+.detailBox {
+ flex: 1;
+ height: 450px;
+ position: relative;
+ margin-top: 20px;
+ overflow: hidden;
+}
+.collectBox {
+ position: absolute;
+ right: 80px;
+ font-size: 14px;
+ color: #999999;
+ cursor: pointer;
+}
+
+.collectBox span:nth-child(1) {
+ margin-right: 10px;
+ font-size: 16px;
+}
+.collectBox span:nth-child(2) {
+ margin-left: 10px;
+ margin-right: 10px;
+
+ font-size: 16px;
+}
+.iconfont {
+ font-size: 25px !important;
+ vertical-align: middle;
+}
+.bookTitle {
+ width: 100%;
+ height: 40px;
+ line-height: 40px;
+ padding-left: 100px;
+ display: flex;
+ padding-right: 240px;
+ box-sizing: border-box;
+}
+.collectText {
+ font-size: 16px;
+ line-height: 25px;
+ display: inline-block;
+}
+.bookName {
+ flex: 1;
+ font-size: 26px;
+ color: #333;
+ text-overflow: ellipsis;
+ white-space: nowrap;
+ overflow: hidden;
+}
+.bookTag {
+ max-width: 200px;
+ font-size: 16px;
+ color: #333;
+ line-height: 36px;
+ margin-left: 15px;
+ text-overflow: ellipsis;
+ white-space: nowrap;
+ overflow: hidden;
+}
+.authorBox {
+ width: 80%;
+ display: flex;
+ padding: 20px;
+ padding-left: 100px;
+ position: relative;
+}
+.valueBox {
+ margin-left: 20px;
+}
+.valueBox div {
+ height: 30px;
+}
+.titleBox1 div {
+ height: 30px;
+}
+.relationBox {
+ position: absolute;
+ right: 50px;
+ color: #999;
+ cursor: pointer;
+ font-size: 14px;
+}
+.purchaseBox {
+ margin-left: 100px;
+ padding-top: 20px;
+}
+.priceBox {
+ border-bottom: 1px dashed #ececec;
+ background-color: #b2d9c8;
+ height: 50px;
+ line-height: 50px;
+ padding-left: 20px;
+}
+.priceBox span:nth-child(1) {
+ color: #000;
+ font-weight: 700;
+ font-size: 16px;
+ padding-right: 20px;
+}
+.priceBox span:nth-child(2) {
+ color: #e50021;
+ font-size: 16px;
+}
+.priceBox span:nth-child(3) {
+ color: #e50021;
+ font-size: 22px;
+ font-weight: 700;
+ padding-right: 20px;
+}
+.priceBox span:nth-child(4) {
+ color: #333;
+ font-size: 16px;
+ padding-right: 20px;
+ text-decoration: line-through;
+}
+.buyInfo {
+ padding: 20px 0px;
+ border-bottom: 1px dashed #ececec;
+ cursor: pointer;
+}
+.buyInfo img {
+ margin-left: 10px;
+}
+.btnBox {
+ margin-left: 100px;
+ margin-top: 30px;
+}
+.infoItem {
+ display: flex;
+ margin-top: 40px;
+}
+.infoImg {
+ width: 50px;
+ height: 50px;
+ border-radius: 50%;
+ border: 1px solid #ccc;
+ background: #efefef;
+ text-align: center;
+ line-height: 60px;
+ position: relative;
+}
+.infoImg i {
+ font-size: 28px;
+}
+.infoList {
+ margin-top: 20px;
+ overflow: auto;
+}
+.infoContent {
+ flex: 1;
+ overflow: hidden;
+ padding: 0 20px 0 10px;
+}
+.infoDialog {
+ padding: 20px;
+}
+.infoTitle {
+ width: 100%;
+ display: flex;
+ justify-content: space-between;
+}
+.infoText {
+ margin-top: 24px;
+ line-height: 20px;
+}
+.contactBox {
+ padding: 0px 40px;
+}
+.contacItem {
+ margin-top: 20px;
+}
+.contacIcon {
+ padding-right: 20px;
+}
+.subBtn {
+ margin-top: 20px;
+ text-align: right;
+}
+.buyIcon {
+ width: 24px;
+ height: 24px;
+ vertical-align: middle;
+}
+.crumbs {
+ margin-top: 10px;
+ border-bottom: 1px solid rgba(20, 73, 65, 0.26);
+ padding-bottom: 20px;
+}
+
+.detailContent {
+ margin-top: 30px;
+ .resourceBox {
+ width: 80%;
+ }
+ .textbookInfo {
+ padding: 20px 0;
+ }
+}
+.titleBorderBox {
+ height: 30px;
+ line-height: 30px;
+ font-weight: 700;
+ border-left: 6px solid #019e58;
+ padding-left: 20px;
+ font-size: 18px;
+}
+.textbookInfoItem {
+ margin-top: 20px;
+}
+</style>
--
Gitblit v1.9.1