| | |
| | | </div> |
| | | </el-tooltip> |
| | | </div> |
| | | <div class="bookDetail"> |
| | | <div class="bookDetail" v-loading="loading"> |
| | | <div class="bookImg"> |
| | | <img class="autoImg" :src="bookInfo.icon" alt="" /> |
| | | <img class="autoImg" :src="bookInfo.icon ? bookInfo.icon : defaultImg" alt="" /> |
| | | </div> |
| | | <span class="iconfont icon-tubiaozhizuo"></span> |
| | | |
| | |
| | | {{ bookInfo.seriesName }} |
| | | </div> |
| | | <div class="collectBox"> |
| | | <div class="collectText" @click="collectBook" v-if="bookInfo.isFavourite"> |
| | | 已收藏 |
| | | </div> |
| | | <img |
| | | @click="collectBook" |
| | | v-if="bookInfo.isFavourite" |
| | |
| | | src="@/assets/images/xiehe/detail/Collection_fill.png" |
| | | 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> |
| | | <span v-else class="iconfont icon-shoucang" style="margin-right: 10px"> </span> |
| | | |
| | | <div class="collectText" @click="collectBook" v-else> |
| | | 收藏 |
| | | |
| | | <img |
| | | @click="collectBook" |
| | | class="buyIcon" |
| | | src="@/assets/images/xiehe/detail/Collection.png" |
| | | style="margin-right: 10px" |
| | | /> |
| | | 收藏 |
| | | </div> |
| | | </div> |
| | | </div> |
| | |
| | | </div> |
| | | <div class="authorBox" style="box-sizing: border-box"> |
| | | <div class="titleBox1"> |
| | | <div>一级分类:</div> |
| | | <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>数字教材</span><span>¥</span> <span>{{ bookInfo.price || '-' }}</span |
| | | ><span v-if="bookInfo.VirtualPrice">原价:¥{{ bookInfo.VirtualPrice }}</span> |
| | | </span> |
| | | |
| | |
| | | <el-button v-if="currentRoute == 'teachingServices'" plain @click="addPaperBook" |
| | | >纸质样书</el-button |
| | | > |
| | | <el-button plain @click="applyTextBook">申请使用</el-button> |
| | | <el-button |
| | | size="large" |
| | | type="primary" |
| | | @click="useCode" |
| | | v-if="!bookInfo.alreadyBuy && currentBook?.state !== 'Normal'" |
| | | >使用购书码</el-button |
| | | > |
| | | <el-button |
| | | style="background-color: #144941; color: #fff" |
| | | @click="applyTextBook" |
| | | size="large" |
| | | type="primary" |
| | | v-if="!bookInfo.alreadyBuy && currentBook?.state !== 'Normal'" |
| | | >申请试用</el-button |
| | | > |
| | | |
| | | <el-button |
| | | plain |
| | | size="large" |
| | | @click="read" |
| | | v-if="bookInfo.alreadyBuy || currentBook?.state == 'Normal'" |
| | | >开始阅读</el-button |
| | | > |
| | | </div> |
| | | </div> |
| | | </div> |
| | | </div> |
| | | </div> |
| | | |
| | | <el-dialog v-model="buyBookCodeDialog" title="购书" width="30%"> |
| | | <div class="buyBookCode"> |
| | | <div style="line-height: 30px">购书码 :</div> |
| | | <el-input style="width: 70%" v-model="activateCode" clearable /> |
| | | </div> |
| | | <template #footer> |
| | | <span class="dialog-footer"> |
| | | <el-button @click="buyBookCodeDialog = false">取消</el-button> |
| | | <el-button type="primary" @click="userActiveCodeGet"> 激活 </el-button> |
| | | </span> |
| | | </template> |
| | | </el-dialog> |
| | | <div class="detailContent contentBox"> |
| | | <div class="resourceBox"> |
| | | <div class="tabsBox"> |
| | |
| | | <div class="resourcesBox"> |
| | | <el-empty v-if="!resourceHave" :image-size="150" description="暂无内容"></el-empty> |
| | | <div class="distribution" v-if="resourceHave"> |
| | | <div class="title">资源分布</div> |
| | | <div class="titleBorderBox">资源分布</div> |
| | | <div class="echartsBox"> |
| | | <div class="left"> |
| | | <div id="chartsContent" style="width: 600px; height: 400px"></div> |
| | |
| | | </div> |
| | | </div> |
| | | </div> |
| | | <teacherCertification :isShow="teacherDialog" @dialog-Change="dialogChange" /> |
| | | </div> |
| | | </template> |
| | | |
| | |
| | | import moment from 'moment' |
| | | import axios from 'axios' |
| | | import * as echarts from 'echarts' |
| | | import defaultImg from '@/assets/images/book-cover.png' |
| | | import imgIcon from '@/assets/images/digitalTextbooks/img.png' |
| | | import AudioIcon from '@/assets/images/digitalTextbooks/Audio.png' |
| | | import DIcon from '@/assets/images/digitalTextbooks/3D.png' |
| | |
| | | import videoIcon from '@/assets/images/digitalTextbooks/video.png' |
| | | import VRIcon from '@/assets/images/digitalTextbooks/VR.png' |
| | | import ziliaoIcon from '@/assets/images/digitalTextbooks/ziliao.png' |
| | | import teacherCertification from '@/views/personalCenter/teacherCertification.vue' |
| | | import { ElMessage, ElMessageBox } from 'element-plus' |
| | | import { ref, onBeforeMount, inject, reactive, onMounted, watchEffect } from 'vue' |
| | | const MG = inject('MG') |
| | | const config = inject('config') |
| | | const logIn = inject('logIn') |
| | | import { useUserStore } from '@/store' |
| | | const userStore = useUserStore() |
| | | let teacherDialog = ref(false) |
| | | |
| | | import { useRouter, useRoute } from 'vue-router' |
| | | import { applyBookStore } from '@/store' |
| | | const route = useRoute() |
| | |
| | | let resourceData = ref([]) |
| | | let recommendBookListData = ref([]) |
| | | let editableTabsValue = ref('1') |
| | | let activateCode = ref('') |
| | | let resourceHave = ref(true) |
| | | let currentBook = ref(null) |
| | | let loading = ref(false) |
| | | let buyBookCodeDialog = ref(false) |
| | | var chartDom = null |
| | | var myChart = {} |
| | | var option = null |
| | | |
| | | const editableTabs = reactive([ |
| | | { |
| | | title: '教材信息', |
| | |
| | | digitalTextId.value = route.query.bookId |
| | | getBookDetail(digitalTextId.value) |
| | | getRecommendBookList() |
| | | getTextBookList() |
| | | }) |
| | | |
| | | watchEffect(() => { |
| | |
| | | getBookResource() |
| | | } |
| | | }) |
| | | |
| | | const getTextBookList = async () => { |
| | | const data = { |
| | | start: 0, |
| | | size: 9999, |
| | | topicIdOrRefCode: 'applyDigitalBook', |
| | | appRefCode: config.appRefCode, |
| | | sort: { |
| | | type: 'Desc', |
| | | field: 'CreateDate', |
| | | }, |
| | | } |
| | | const res = await MG.ugc.getTopicMessageList(data) |
| | | if (res.datas && res.datas.length > 0) { |
| | | for (let i = 0; i < res.datas.length; i++) { |
| | | const item = res.datas[i] |
| | | item.content = JSON.parse(item.content)[0] |
| | | item.productId = item.content.id |
| | | } |
| | | currentBook.value = res.datas.find((item) => item.productId == digitalTextId.value) |
| | | } |
| | | } |
| | | |
| | | const read = () => { |
| | | let token = localStorage.getItem(config.tokenKey) |
| | | const url = config.textBookResourceUrl + '?bookId=' + bookInfo.value.refCode + '&token=' + token |
| | | window.open(url) |
| | | } |
| | | |
| | | const userActiveCodeGet = () => { |
| | | let lock = true |
| | | console.log(activateCode.value, 'activateCode.value') |
| | | |
| | | if (activateCode.value == '') { |
| | | ElMessage({ |
| | | type: 'error', |
| | | message: '请输入激活码!', |
| | | }) |
| | | } else { |
| | | if (lock) { |
| | | lock = false |
| | | |
| | | MG.store |
| | | .getActiveCode({ |
| | | code: activateCode.value, |
| | | }) |
| | | .then((res) => { |
| | | console.log(res, 'res') |
| | | const cfg = JSON.parse(res.config) |
| | | console.log(cfg, 'cfg') |
| | | if (cfg && cfg.length > 0) { |
| | | const isActive = cfg.findIndex((item) => item.id == digitalTextId.value) |
| | | |
| | | if (isActive > -1) { |
| | | MG.store |
| | | .userActiveCode({ |
| | | code: activateCode.value, |
| | | }) |
| | | .then((res) => { |
| | | ElMessage({ |
| | | type: res == '激活成功' ? 'success' : 'error', |
| | | message: res, |
| | | }) |
| | | activateCode.value = '' |
| | | buyBookCodeDialog.value = false |
| | | getBookDetail(digitalTextId.value) |
| | | lock = true |
| | | }) |
| | | } else { |
| | | ElMessage({ |
| | | type: 'error', |
| | | message: '您输入的购书码有误', |
| | | }) |
| | | } |
| | | } else { |
| | | ElMessage({ |
| | | type: 'error', |
| | | message: '您输入的购书码有误', |
| | | }) |
| | | } |
| | | }) |
| | | } |
| | | } |
| | | } |
| | | |
| | | const useCode = () => { |
| | | if (localStorage.getItem(config.tokenKey)) { |
| | | buyBookCodeDialog.value = true |
| | | } else { |
| | | logIn() |
| | | } |
| | | } |
| | | |
| | | const dialogChange = (val) => { |
| | | if (val == false) { |
| | | teacherDialog.value = false |
| | | } else { |
| | | teacherDialog.value = true |
| | | } |
| | | } |
| | | |
| | | //收藏书籍 |
| | | const collectBook = () => { |
| | |
| | | } |
| | | |
| | | //申请试用 |
| | | const applyTextBook = () => { |
| | | localStorage.setItem('applyBookInfo', JSON.stringify(bookInfo.value)) |
| | | router.push({ |
| | | path: '/textBookApply', |
| | | }) |
| | | const applyTextBook = async () => { |
| | | if (currentBook.value?.state == 'WaitAudit') { |
| | | ElMessageBox.confirm('您已申请试用该书,是否前往查看', '提示', { |
| | | confirmButtonText: '确定', |
| | | cancelButtonText: '取消', |
| | | type: 'warning', |
| | | }).then(() => { |
| | | router.push({ |
| | | path: '/myApply', |
| | | }) |
| | | }) |
| | | } else { |
| | | toApply() |
| | | } |
| | | } |
| | | |
| | | const toApply = () => { |
| | | if (localStorage.getItem(config.tokenKey)) { |
| | | if (userStore.userInfo && userStore.userInfo.role == 'Teacher') { |
| | | localStorage.setItem('applyBookInfo', JSON.stringify(bookInfo.value)) |
| | | router.push({ |
| | | path: '/textBookApply', |
| | | }) |
| | | } else { |
| | | teacherDialog.value = true |
| | | } |
| | | } else { |
| | | logIn() |
| | | } |
| | | } |
| | | |
| | | const getRecommendBookList = () => { |
| | |
| | | } |
| | | |
| | | const getBookDetail = (id) => { |
| | | loading.value = true |
| | | const query = { |
| | | path: '*', |
| | | queryType: '*', |
| | |
| | | MG.store.getProductDetail(query).then((res) => { |
| | | console.log(res, 'res') |
| | | bookInfo.value = res.datas |
| | | loading.value = false |
| | | console.log(res.datas, 'res') |
| | | }) |
| | | } |
| | |
| | | box-sizing: border-box; |
| | | } |
| | | .collectText { |
| | | font-size: 16px; |
| | | line-height: 25px; |
| | | font-size: 18px; |
| | | line-height: 18px; |
| | | display: inline-block; |
| | | } |
| | | .bookName { |
| | |
| | | display: flex; |
| | | justify-content: space-between; |
| | | margin-bottom: 20px; |
| | | margin-top: 20px; |
| | | } |
| | | .left { |
| | | } |
| | |
| | | margin-top: 20px; |
| | | line-height: 28px; |
| | | } |
| | | .buyBookCode { |
| | | width: 100%; |
| | | display: flex; |
| | | padding: 40px 10px; |
| | | text-align: center; |
| | | align-items: center; |
| | | } |
| | | .tab-name { |
| | | width: 100px; |
| | | height: 40px; |
| | | } |
| | | </style> |