From 9cad6a832c786989be620573b09badccfe7e3b51 Mon Sep 17 00:00:00 2001
From: QYF-GitLab1 <1940665526@qq.com>
Date: 星期一, 25 八月 2025 15:11:37 +0800
Subject: [PATCH] 首页头部，样式调整
---
src/views/bookStore/detail.vue | 664 ++++++++++++++++++++++++++++++++++++++++++++++++------
1 files changed, 584 insertions(+), 80 deletions(-)
diff --git a/src/views/bookStore/detail.vue b/src/views/bookStore/detail.vue
index abef0e0..6fbb16d 100644
--- a/src/views/bookStore/detail.vue
+++ b/src/views/bookStore/detail.vue
@@ -20,9 +20,9 @@
</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>
@@ -35,24 +35,27 @@
{{ bookInfo.seriesName }}
</div>
<div class="collectBox">
+ <div class="collectText" @click="collectBook" v-if="bookInfo.isFavourite">
+ 宸叉敹钘�
+ </div>
<img
@click="collectBook"
v-if="bookInfo.isFavourite"
class="buyIcon"
- src="@/assets/images/bookStore/shoucang.svg"
+ 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">
- 宸叉敹钘�
+ <span v-else class="iconfont icon-shoucang" style="margin-right: 10px"> </span>
+
+ <div class="collectText" @click="collectBook" v-else>
+ 鏀惰棌
+
+ <img
+ class="buyIcon"
+ src="@/assets/images/xiehe/detail/Collection.png"
+ style="margin-right: 10px"
+ />
</div>
- <div class="collectText" @click="collectBook" v-else>鏀惰棌</div>
</div>
</div>
<div class="authorBox">
@@ -87,18 +90,16 @@
</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>
@@ -167,66 +168,36 @@
<el-button v-if="currentRoute == 'teachingServices'" plain @click="addPaperBook"
>绾歌川鏍蜂功</el-button
>
+ <el-button
+ plain
+ @click="applyTextBook"
+ v-if="!bookInfo.alreadyBuy && currentBook?.state !== 'Normal'"
+ >鐢宠璇曠敤</el-button
+ >
+ <el-button plain @click="useCode" v-if="!bookInfo.alreadyBuy">浣跨敤璐功鐮�</el-button>
+ <el-button
+ plain
+ @click="read"
+ v-if="bookInfo.alreadyBuy || currentBook?.state == 'Normal'"
+ >寮�濮嬮槄璇�</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>
-
+ <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">
@@ -244,30 +215,122 @@
<div v-if="editableTabsValue == '1'" class="textbookInfo">
<div class="textbookInfoItem">
<div class="titleBorderBox">鍥句功绠�浠�</div>
- <div class="textbookContent"></div>
+ <div class="textbookContent" v-if="bookInfo.content" v-html="bookInfo.content"></div>
+ <div v-else>
+ <el-empty description="鏆傛棤鏁版嵁" />
+ </div>
</div>
<div class="textbookInfoItem">
<div class="titleBorderBox">浣滆�呯畝浠�</div>
- <div class="authorInfo"></div>
+ <div
+ class="authorInfo"
+ v-if="bookInfo.authorIntroduction"
+ v-html="bookInfo.authorIntroduction"
+ ></div>
+ <div v-else>
+ <el-empty description="鏆傛棤鏁版嵁" />
+ </div>
</div>
</div>
- <div v-else-if="editableTabsValue == '2'" class="catalogue">bbbb</div>
+ <div v-else-if="editableTabsValue == '2'" class="catalogue">
+ <div v-if="bookInfo.catalogue" v-html="bookInfo.catalogue" class="catalogueContent"></div>
+ <el-empty description="鏆傛棤鏁版嵁" v-else />
+ </div>
+ <div v-else-if="editableTabsValue == '6'" class="supportingResources">
+ <div class="resourcesBox">
+ <el-empty v-if="!resourceHave" :image-size="150" description="鏆傛棤鍐呭"></el-empty>
+ <div class="distribution" v-if="resourceHave">
+ <div class="titleBorderBox">璧勬簮鍒嗗竷</div>
+ <div class="echartsBox">
+ <div class="left">
+ <div id="chartsContent" style="width: 600px; height: 400px"></div>
+ </div>
+ <div class="right">
+ <div>
+ <p>璧勬簮绉嶇被</p>
+ <p>
+ <span class="num">{{ resourceData.length }}</span
+ >绉�
+ </p>
+ </div>
+ </div>
+ </div>
+ </div>
+ </div>
+ </div>
+ <div v-else class="catalogue"><el-empty description="鏆傛棤鏁版嵁" /></div>
</div>
- <div class="recommendBox"></div>
+ <div class="recommendBox">
+ <div class="recommendTitle">鎺ㄨ崘鏁欐潗</div>
+ <div class="newRecommendList">
+ <div class="recommendItem" v-for="item in recommendBookListData" :key="item.id">
+ <div class="recommendItemImg">
+ <img class="autoImg" :src="item.icon" />
+ </div>
+ <div class="infoBox2">
+ <div class="bookName2">{{ item.name }}</div>
+ <div class="author2">
+ 浣滆�咃細{{ item.authorcaupress_author ? item.caupress_author : '-' }}
+ </div>
+ <div class="priceBox2">
+ <span class="oldPrice" v-if="item.oldPrice">鍘熶环锛毬{ item.oldPrice }}</span>
+ <span class="price" v-if="item.price && item.price > 0">
+ 瀹氫环锛毬�
+ <span>{{ item.price }}</span>
+ </span>
+ <span class="price" v-else> 瀹氫环锛�<span class="freePrice">鍏嶈垂</span> </span>
+ </div>
+ </div>
+ </div>
+ </div>
+ </div>
</div>
+ <teacherCertification :isShow="teacherDialog" @dialog-Change="dialogChange" />
</div>
</template>
<script setup>
import moment from 'moment'
-import { ref, onBeforeMount, inject, reactive, onMounted } from 'vue'
+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 PPTIcon from '@/assets/images/digitalTextbooks/PPT.png'
+import shijuanIcon from '@/assets/images/digitalTextbooks/shijuan.png'
+import shixunIcon from '@/assets/images/digitalTextbooks/shixun.png'
+import tuozhanIcon from '@/assets/images/digitalTextbooks/tuozhan.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()
const router = useRouter()
let bookInfo = ref({})
let digitalTextId = ref('')
+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([
{
@@ -299,9 +362,308 @@
onMounted(() => {
digitalTextId.value = route.query.bookId
getBookDetail(digitalTextId.value)
+ getRecommendBookList()
+ getTextBookList()
})
+watchEffect(() => {
+ if (editableTabsValue.value == '6') {
+ 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 = () => {
+ if (localStorage.getItem(config.tokenKey)) {
+ if (bookInfo.value.isFavourite) {
+ MG.store
+ .delProductLink({
+ productIds: [bookInfo.value.id],
+ linkType: 'FavoriteBookCity',
+ })
+ .then(() => {
+ bookInfo.value.isFavourite = false
+ })
+ } else {
+ let params = {
+ productIds: [bookInfo.value.id],
+ linkType: 'FavoriteBookCity',
+ }
+ MG.store.addProductLink(params).then((res) => {
+ bookInfo.value.isFavourite = true
+ })
+ }
+ } else {
+ logIn()
+ console.log(logIn)
+ }
+}
+
+//鐢宠璇曠敤
+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 = () => {
+ MG.store
+ .getProductList({
+ path: 'recommendedTextbooks',
+ paging: {
+ start: 0,
+ size: 5,
+ },
+ fields: {
+ author: [],
+ },
+ })
+ .then((res) => {
+ console.log(res, '鎺ㄨ崘鏁欐潗')
+ recommendBookListData.value = res.datas
+ })
+}
+
+const getBookResource = () => {
+ try {
+ axios
+ .get('https://yxjy.pumcp.com/books/resource/' + bookInfo.value.refCode + '/resource.json')
+ .then(async (res) => {
+ console.log(res, 'resource')
+ if (res.data.length > 0) {
+ res.data.forEach((item) => {
+ if (item.resourceTypeShow == '鍥剧墖') {
+ item.icon = imgIcon
+ } else if (item.resourceTypeShow == '瑙嗛') {
+ item.icon = videoIcon
+ } else if (item.resourceTypeShow == '闊抽') {
+ item.icon = AudioIcon
+ } else if (item.resourceTypeShow == 'PPT') {
+ item.icon = PPTIcon
+ } else if (item.resourceTypeShow == '鎷撳睍') {
+ item.icon = tuozhanIcon
+ } else if (item.resourceTypeShow == '璧勬枡') {
+ item.icon = ziliaoIcon
+ } else if (item.resourceTypeShow == '璇曞嵎') {
+ item.icon = shijuanIcon
+ } else if (item.resourceTypeShow == '3D') {
+ item.icon = DIcon
+ } else if (item.resourceTypeShow == '瀹炶') {
+ item.icon = shixunIcon
+ } else if (item.resourceTypeShow == 'VR') {
+ item.icon = VRIcon
+ } else {
+ item.icon = ziliaoIcon
+ }
+ })
+ resourceData.value = await groupByResourceTypeShow(res.data)
+ resourceHave.value = true
+ console.log(resourceData.value, 'resourceData')
+ initChart(resourceData.value)
+ } else {
+ resourceHave.value = false
+ }
+ })
+ .catch((error) => {
+ console.log(error, 'error1')
+
+ resourceData = []
+ resourceHave = false
+ })
+ } catch (error) {
+ console.log(error, 'error')
+ resourceData = []
+ resourceHave = false
+ }
+}
+
+const groupByResourceTypeShow = (resources) => {
+ const grouped = resources.reduce((acc, item) => {
+ const key = item.resourceTypeShow
+ if (!acc[key]) {
+ acc[key] = {
+ resourceTypeShow: key,
+ list: [],
+ }
+ }
+ acc[key].list.push(item)
+ return acc
+ }, {})
+ return Object.values(grouped)
+}
+
+const initChart = (data) => {
+ let dataList = []
+ let num = []
+ data.forEach((item) => {
+ dataList.push(item.resourceTypeShow)
+ num.push(item.list.length)
+ })
+ chartDom = document.getElementById('chartsContent')
+ console.log(chartDom, 'chartDom')
+
+ myChart = echarts.init(chartDom)
+ myChart.setOption({
+ tooltip: {},
+ xAxis: {
+ data: dataList,
+ },
+ yAxis: {},
+ series: [
+ {
+ name: '鏁伴噺',
+ type: 'bar',
+ data: num,
+ itemStyle: {
+ color: function (params) {
+ // params.dataIndex鏄暟鎹」鐨勭储寮曪紝浣犲彲浠ユ牴鎹繖涓储寮曟潵璁剧疆涓嶅悓鐨勯鑹�
+ const colors = [
+ '#5EA1FF',
+ '#FF5A85',
+ '#7E7AFF',
+ '#3CB768',
+ '#FF8F54',
+ '#FF574B',
+ '#3DB0BF',
+ '#FBBB3B',
+ '#3B5EFB',
+ '#B1FB3B',
+ ]
+ return colors[params.dataIndex % colors.length]
+ },
+ },
+ },
+ ],
+ })
+}
+
const getBookDetail = (id) => {
+ loading.value = true
const query = {
path: '*',
queryType: '*',
@@ -328,6 +690,7 @@
MG.store.getProductDetail(query).then((res) => {
console.log(res, 'res')
bookInfo.value = res.datas
+ loading.value = false
console.log(res.datas, 'res')
})
}
@@ -418,8 +781,8 @@
box-sizing: border-box;
}
.collectText {
- font-size: 16px;
- line-height: 25px;
+ font-size: 18px;
+ line-height: 18px;
display: inline-block;
}
.bookName {
@@ -572,8 +935,10 @@
.detailContent {
margin-top: 30px;
+ display: flex;
+ justify-content: space-between;
.resourceBox {
- width: 80%;
+ width: 76%;
}
.textbookInfo {
padding: 20px 0;
@@ -590,4 +955,143 @@
.textbookInfoItem {
margin-top: 20px;
}
+
+.distribution {
+ .title {
+ margin: 10px 0;
+ font-weight: bold;
+ }
+ .echartsBox {
+ height: 400px;
+ border-radius: 7px 7px 7px 7px;
+ border: 1px solid #e4e7ed;
+ display: flex;
+ justify-content: space-between;
+ margin-bottom: 20px;
+ margin-top: 20px;
+ }
+ .left {
+ }
+ .right {
+ background: rgba(64, 158, 255, 0.09);
+ display: flex;
+ align-items: center;
+ justify-content: center;
+ text-align: center;
+ width: 200px;
+ p {
+ line-height: 30px;
+ }
+ .num {
+ font-size: 18px;
+ font-weight: bold;
+ }
+ }
+ .list {
+ display: flex;
+ margin-bottom: 40px;
+ .listItem {
+ width: 100px;
+ display: block;
+ box-sizing: border-box;
+ .imgBox {
+ margin: 0 auto;
+ position: relative;
+ width: 80px;
+ height: 80px;
+ }
+ .bookInfo {
+ margin: 0;
+ overflow: hidden;
+ text-align: center;
+ .title {
+ color: #333;
+ margin: 10px 0;
+ white-space: nowrap;
+ text-overflow: ellipsis;
+ overflow: hidden;
+ }
+ }
+ }
+ }
+}
+
+.recommendBox {
+ width: 23%;
+ border: 1px solid #e4e7ed;
+ border-radius: 10px;
+ .recommendTitle {
+ height: 50px;
+ line-height: 50px;
+ padding-left: 20px;
+ border-bottom: 1px solid #e4e7ed;
+ color: #333333;
+ font-weight: 700;
+ }
+}
+
+.newRecommendList {
+ padding-top: 0;
+ display: flex;
+ flex-direction: column;
+ justify-content: center;
+ align-items: center;
+ .recommendItem {
+ margin-right: 20px;
+ height: 300px;
+ background-repeat: no-repeat;
+ background-size: 100% 100%;
+ cursor: pointer;
+ background-color: #fff;
+ padding-top: 10px;
+ margin-top: 10px;
+ &:last-child {
+ margin-right: 0;
+ }
+ }
+ .recommendItemImg {
+ width: 150px;
+ height: 200px;
+ position: relative;
+ margin: 0 auto;
+ }
+ .infoBox2 {
+ text-align: center;
+ margin-top: 10px;
+ }
+ .author2 {
+ margin-top: 10px;
+ }
+ .priceBox2 {
+ margin-top: 10px;
+ .oldPrice {
+ font-size: 16px;
+ color: #444444;
+ text-decoration: line-through;
+ margin-right: 20px;
+ }
+ .price {
+ span {
+ font-weight: bold;
+ font-size: 14px;
+ }
+ }
+ }
+}
+.textbookContent,
+.authorInfo {
+ 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>
--
Gitblit v1.9.1