From 5f00696dfb25bc90034448ceb634ed1ef256681a Mon Sep 17 00:00:00 2001
From: qiyunfeng-create <1940665526@qq.com>
Date: 星期四, 21 八月 2025 21:13:35 +0800
Subject: [PATCH] Merge branch 'master' of http://182.92.203.7:2001/r/xiehe_website
---
src/views/bookStore/detail.vue | 593 +++++++++++++++++++++++++++++++++++++++++++++++++++++++++++
1 files changed, 593 insertions(+), 0 deletions(-)
diff --git a/src/views/bookStore/detail.vue b/src/views/bookStore/detail.vue
new file mode 100644
index 0000000..abef0e0
--- /dev/null
+++ b/src/views/bookStore/detail.vue
@@ -0,0 +1,593 @@
+<template>
+ <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>
+
+ <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 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')
+
+const editableTabs = reactive([
+ {
+ title: '鏁欐潗淇℃伅',
+ name: '1',
+ },
+ {
+ title: '鐩綍',
+ name: '2',
+ },
+ {
+ title: '閰嶅璧勬簮',
+ name: '3',
+ },
+ {
+ title: '棰樺簱',
+ name: '4',
+ },
+ {
+ title: '鏁欏笀璧勬簮',
+ name: '5',
+ },
+ {
+ title: '璧勬簮缁熻',
+ name: '6',
+ },
+])
+
+onMounted(() => {
+ digitalTextId.value = route.query.bookId
+ getBookDetail(digitalTextId.value)
+})
+
+const getBookDetail = (id) => {
+ const query = {
+ path: '*',
+ queryType: '*',
+ productId: id,
+ storeInfo: 'defaultGoodsStore1',
+ coverSize: {
+ height: 300,
+ width: 210,
+ },
+ 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 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