<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>
|
