|
|
@@ -1,68 +1,27 @@
|
|
|
<template>
|
|
|
- <div class="c-details">
|
|
|
- <div class="d-left">
|
|
|
- <div class="tops">
|
|
|
- <h1>
|
|
|
- <div>
|
|
|
- <i :class="'el-icon-jy-' + fileType(datas.docFileType)"></i>
|
|
|
- </div>
|
|
|
- {{ datas.docName }}
|
|
|
- </h1>
|
|
|
- <div class="cd-tips">
|
|
|
- <ul>
|
|
|
- <li class="li-tags" v-for="item in getContentTags" :key="item">{{ item }}</li>
|
|
|
- <li>{{ datas.viewTimes }}次浏览<el-divider direction="vertical"></el-divider></li>
|
|
|
- <li>{{ datas.downTimes }}次下载<el-divider direction="vertical"></el-divider></li>
|
|
|
- <li>共{{ datas.docPageSize }}页<el-divider direction="vertical"></el-divider></li>
|
|
|
- <li>{{ datas.docFileSize }}<el-divider direction="vertical"></el-divider></li>
|
|
|
- <li class="no-line">{{ datas.uploadDate }}上传</li>
|
|
|
- </ul>
|
|
|
- <!-- <div class="coin"><i class="el-icon-jy-iconJianYu"></i><span>{{ datas.price }}</span></div> -->
|
|
|
- </div>
|
|
|
- <el-divider class="heng-line" v-if="lineShow"></el-divider>
|
|
|
- <!-- <div class="load-doc">
|
|
|
- <div class="icons">
|
|
|
- <el-tooltip placement="bottom" effect="light" popper-class="f-share">
|
|
|
- <span class="spa1"><i class="el-icon-jy-share"></i>分享</span>
|
|
|
- <div slot="content">
|
|
|
- <img :src="locaHref + '/jydocs/share/img?docId=' + docIds" width="110" height="108">
|
|
|
- <p style="color: #686868;font-size: 14px;text-align:center;">微信扫码分享</p>
|
|
|
- </div>
|
|
|
- </el-tooltip>
|
|
|
- <span class="spa1 spa2" @click="shoucang"><i
|
|
|
- :class="collectd == 1 ? 'el-icon-jy-guanzhu' : 'el-icon-jy-weiguanzhu'"></i>{{ collectd == 1 ? '已收藏' :
|
|
|
- '收藏' }}</span>
|
|
|
- <el-tooltip content="如果您发现此内容有侵权行为，请联系客服400-108-6670进行投诉" placement="top" effect="dark">
|
|
|
- <span class="spa1"><i class="el-icon-jy-jubao"></i>投诉举报</span>
|
|
|
- </el-tooltip>
|
|
|
- </div>
|
|
|
- </div> -->
|
|
|
- </div>
|
|
|
- <div class="middles" :class="{ 'actives': buyed == 0, 'actives1': lineShow == 1 }">
|
|
|
- <h3>摘要</h3>
|
|
|
- <p>{{ datas.docSummary }}</p>
|
|
|
- <div class="continue" v-show="buyed == 0">全文共{{ datas.docPageSize }}页，<span @click="continued">阅读全文<i
|
|
|
- class="el-icon-arrow-down"></i></span></div>
|
|
|
- </div>
|
|
|
- <div class="head-tip" id="fixedTop" :class="{ 'is-fixed': fixed }">
|
|
|
- <h3 v-show="fixed">
|
|
|
- <i :class="'el-icon-jy-' + fileType(datas.docFileType)"></i>
|
|
|
- <span>{{ datas.docName }}</span>
|
|
|
- </h3>
|
|
|
- <span class="pages"><i>{{ page_num }}</i> / <i>{{ page_count }}</i></span>
|
|
|
- </div>
|
|
|
- <div class="bottoms" id="colWidth">
|
|
|
- <div class="page">
|
|
|
- <div class="cont-p" id="pdfPage">
|
|
|
- <!-- <div class="buyed" v-if="buyed == 1">您已兑换过该文档，可直接下载</div>
|
|
|
- <div class="buyed no-buyed" v-if="redShow && islogin">剑鱼币余额不足，现有 {{ coinNum }} 剑鱼币，还需 {{ datas.price - coinNum }}
|
|
|
- 剑鱼币，请先充值
|
|
|
- </div> -->
|
|
|
+ <div class="detail-main">
|
|
|
+ <div class="c-details">
|
|
|
+ <div class="d-left">
|
|
|
+ <div class="tops">
|
|
|
+ <h1>
|
|
|
+ <div>
|
|
|
+ <i :class="'el-icon-jy-' + fileType(datas.docFileType)"></i>
|
|
|
+ </div>
|
|
|
+ {{ datas.docName }}
|
|
|
+ </h1>
|
|
|
+ <div class="cd-tips">
|
|
|
+ <ul>
|
|
|
+ <li class="li-tags" v-for="item in getContentTags" :key="item">{{ item }}</li>
|
|
|
+ <li>{{ datas.viewTimes }}次浏览<el-divider direction="vertical"></el-divider></li>
|
|
|
+ <li>{{ datas.downTimes }}次下载<el-divider direction="vertical"></el-divider></li>
|
|
|
+ <li>共{{ datas.docPageSize }}页<el-divider direction="vertical"></el-divider></li>
|
|
|
+ <li>{{ datas.docFileSize }}<el-divider direction="vertical"></el-divider></li>
|
|
|
+ <li class="no-line">{{ datas.uploadDate }}上传</li>
|
|
|
+ </ul>
|
|
|
+ <!-- <div class="coin"><i class="el-icon-jy-iconJianYu"></i><span>{{ datas.price }}</span></div> -->
|
|
|
</div>
|
|
|
-
|
|
|
- </div>
|
|
|
- <div class="foot-tip tops" id="footp">
|
|
|
- <div class="load-doc">
|
|
|
+ <el-divider class="heng-line" v-if="lineShow"></el-divider>
|
|
|
+ <!-- <div class="load-doc">
|
|
|
<div class="icons">
|
|
|
<el-tooltip placement="bottom" effect="light" popper-class="f-share">
|
|
|
<span class="spa1"><i class="el-icon-jy-share"></i>分享</span>
|
|
|
@@ -78,18 +37,91 @@
|
|
|
<span class="spa1"><i class="el-icon-jy-jubao"></i>投诉举报</span>
|
|
|
</el-tooltip>
|
|
|
</div>
|
|
|
- <el-button type="primary" @click="loadFile">{{ islogin ? btnName : '查看详情' }}</el-button>
|
|
|
+ </div> -->
|
|
|
+ </div>
|
|
|
+ <div class="middles" :class="{ 'actives': buyed == 0}">
|
|
|
+ <h3>摘要</h3>
|
|
|
+ <p>{{ datas.docSummary }}</p>
|
|
|
+ <div class="continue" v-show="buyed == 0">全文共{{ datas.docPageSize }}页，<span @click="continued">阅读全文<i
|
|
|
+ class="el-icon-arrow-down"></i></span></div>
|
|
|
+ </div>
|
|
|
+ <div class="head-tip" id="fixedTop" :class="{ 'is-fixed': fixed }">
|
|
|
+ <h3 v-show="fixed">
|
|
|
+ <i :class="'el-icon-jy-' + fileType(datas.docFileType)"></i>
|
|
|
+ <span>{{ datas.docName }}</span>
|
|
|
+ </h3>
|
|
|
+ <span class="pages"><i>{{ page_num }}</i> / <i>{{ page_count }}</i></span>
|
|
|
+ </div>
|
|
|
+ <div class="bottoms" id="colWidth">
|
|
|
+ <div class="page">
|
|
|
+ <div class="cont-p" id="pdfPage">
|
|
|
+ <div class="buyed" v-if="buyed == 1">您已兑换过该文档，可直接下载</div>
|
|
|
+ <div class="buyed no-buyed" v-if="redShow && islogin">剑鱼币余额不足，现有 {{ coinNum }} 剑鱼币，还需 {{ datas.price - coinNum }}
|
|
|
+ 剑鱼币，请先充值
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+
|
|
|
+ </div>
|
|
|
+ <div class="foot-tip tops" id="footp">
|
|
|
+ <div class="load-doc">
|
|
|
+ <div class="icons">
|
|
|
+ <el-tooltip placement="bottom" effect="light" popper-class="f-share">
|
|
|
+ <span class="spa1"><i class="el-icon-jy-share"></i>分享</span>
|
|
|
+ <div slot="content">
|
|
|
+ <img :src="locaHref + '/jydocs/share/img?docId=' + docIds" width="110" height="108">
|
|
|
+ <p style="color: #686868;font-size: 14px;text-align:center;">微信扫码分享</p>
|
|
|
+ </div>
|
|
|
+ </el-tooltip>
|
|
|
+ <span class="spa1 spa2" @click="shoucang"><i
|
|
|
+ :class="collectd == 1 ? 'el-icon-jy-guanzhu' : 'el-icon-jy-weiguanzhu'"></i>{{ collectd == 1 ? '已收藏' :
|
|
|
+ '收藏' }}</span>
|
|
|
+ <el-tooltip content="如果您发现此内容有侵权行为，请联系客服400-108-6670进行投诉" placement="top" effect="dark">
|
|
|
+ <span class="spa1"><i class="el-icon-jy-jubao"></i>投诉举报</span>
|
|
|
+ </el-tooltip>
|
|
|
+ </div>
|
|
|
+ <div class="file-action">
|
|
|
+ <!-- 会员免费文档 -->
|
|
|
+ <div class="file-action-content member-free" v-if="datas.productType === 1">
|
|
|
+ <div class="coin before-coin" v-if="!userMemberInfo.docMemberStatus && userMemberInfo.free_download !== 1">原价：<i class="el-icon-jy-iconJianYu"></i><span style="text-decoration: line-through;">{{ datas.price }}</span></div>
|
|
|
+ <div v-if="userMemberInfo.docMemberStatus">会员免费</div>
|
|
|
+ <el-button type="primary" @click="loadFile" v-if="!userMemberInfo.docMemberStatus && userMemberInfo.free_download === 1">
|
|
|
+ <i class="el-icon-jy-iconJianYu"></i>
|
|
|
+ <span>{{ datas.price }}</span>
|
|
|
+ <span>原价下载</span>
|
|
|
+ </el-button>
|
|
|
+ <el-button class="prime-cost" v-if="!userMemberInfo.docMemberStatus && userMemberInfo.free_download !== 1">
|
|
|
+ <span>使用免费下载特权</span>
|
|
|
+ <span>（1次机会）</span>
|
|
|
+ </el-button>
|
|
|
+ <el-button type="primary" @click="loadFile">{{ islogin ? btnName : '查看详情' }}</el-button>
|
|
|
+ </div>
|
|
|
+ <!-- 精品文档 -->
|
|
|
+ <div class="file-action-content member-pay" v-else>
|
|
|
+ <el-button type="primary" @click="loadFile">
|
|
|
+ <i class="el-icon-jy-iconJianYu"></i>
|
|
|
+ <span>{{ datas.price }}</span>
|
|
|
+ <span>原价下载</span>
|
|
|
+ </el-button>
|
|
|
+ <div class="coin before-coin">原价：<i class="el-icon-jy-iconJianYu"></i><span>{{ datas.price }}</span></div>
|
|
|
+ <div class="coin after-coin" v-if="datas.productType !== 1">会员价：<i class="el-icon-jy-iconJianYu"></i><span>{{ datas.price }}</span></div>
|
|
|
+ <div class="file-download">
|
|
|
+ 您已下载过该文档，可再次下载
|
|
|
+ </div>
|
|
|
+ <el-button type="primary" @click="loadFile">{{ islogin ? btnName : '查看详情' }}</el-button>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
</div>
|
|
|
</div>
|
|
|
</div>
|
|
|
- </div>
|
|
|
- <div class="d-right">
|
|
|
- <div class="r-tops">
|
|
|
- <a :href="item.s_link" v-for="item in adsUrl" :key="item.s_pic">
|
|
|
- <img :src="item.s_pic">
|
|
|
- </a>
|
|
|
+ <div class="d-right">
|
|
|
+ <div class="r-tops">
|
|
|
+ <a :href="item.s_link" v-for="item in adsUrl" :key="item.s_pic">
|
|
|
+ <img :src="item.s_pic">
|
|
|
+ </a>
|
|
|
+ </div>
|
|
|
+ <v-recommend :recomes="recomes"></v-recommend>
|
|
|
</div>
|
|
|
- <v-recommend :recomes="recomes"></v-recommend>
|
|
|
</div>
|
|
|
</div>
|
|
|
</template>
|
|
|
@@ -99,6 +131,7 @@ import { getDetails, getShow, getRecommend, getDown, getAdverse, getCoin, getAdd
|
|
|
import { formatSize, dateFormatter, recoveryPageData } from '@/utils/'
|
|
|
import vRecommend from '@/components/recommend'
|
|
|
import { getSearchTag } from '../api/modules/home'
|
|
|
+import { getUserInfo } from '../api/modules/user'
|
|
|
export default {
|
|
|
components: {
|
|
|
[Button.name]: Button,
|
|
|
@@ -140,7 +173,8 @@ export default {
|
|
|
heightList: []
|
|
|
},
|
|
|
tabs: [],
|
|
|
- islogin: false
|
|
|
+ islogin: false,
|
|
|
+ userMemberInfo: {}
|
|
|
}
|
|
|
},
|
|
|
created () {
|
|
|
@@ -150,6 +184,10 @@ export default {
|
|
|
this.getSimpleData_()
|
|
|
this.setTop()
|
|
|
this.adverse()
|
|
|
+ this.getDocMemberInfo()
|
|
|
+ },
|
|
|
+ beforeCreate () {
|
|
|
+ $('.docs-app').addClass('page-content')
|
|
|
},
|
|
|
mounted () {
|
|
|
this.details()
|
|
|
@@ -178,6 +216,19 @@ export default {
|
|
|
}
|
|
|
},
|
|
|
methods: {
|
|
|
+ // 获取文库会员信息
|
|
|
+ getDocMemberInfo () {
|
|
|
+ getUserInfo().then(res => {
|
|
|
+ if(res && res.data && res.data.error_code === 0) {
|
|
|
+ this.userMemberInfo = res.data.data
|
|
|
+ if(this.userMemberInfo.docMemberStatus) {
|
|
|
+ this.btnName = '下载文档'
|
|
|
+ } else {
|
|
|
+ this.btnName = '开通文库会员免费下载'
|
|
|
+ }
|
|
|
+ }
|
|
|
+ })
|
|
|
+ },
|
|
|
loginCallback () {
|
|
|
this.islogin = true
|
|
|
this.adverse()
|
|
|
@@ -281,19 +332,19 @@ export default {
|
|
|
getCoin({ B: true }).then(res => {
|
|
|
if (res.data.error_code === 0) {
|
|
|
this.coinNum = res.data.data.points.balance
|
|
|
- if (this.buyed === 1) {
|
|
|
- this.btnName = '下载文档'
|
|
|
- this.lineShow = false
|
|
|
- } else {
|
|
|
- if (this.coinNum < this.datas.price) {
|
|
|
- this.btnName = '立即充值'
|
|
|
- this.redShow = true
|
|
|
- } else {
|
|
|
- this.btnName = '下载文档'
|
|
|
- this.redShow = false
|
|
|
- this.lineShow = true
|
|
|
- }
|
|
|
- }
|
|
|
+ // if (this.buyed === 1) {
|
|
|
+ // this.btnName = '下载文档'
|
|
|
+ // this.lineShow = false
|
|
|
+ // } else {
|
|
|
+ // if (this.coinNum < this.datas.price) {
|
|
|
+ // this.btnName = '立即充值'
|
|
|
+ // this.redShow = true
|
|
|
+ // } else {
|
|
|
+ // this.btnName = '下载文档'
|
|
|
+ // this.redShow = false
|
|
|
+ // this.lineShow = true
|
|
|
+ // }
|
|
|
+ // }
|
|
|
}
|
|
|
})
|
|
|
},
|
|
|
@@ -319,27 +370,49 @@ export default {
|
|
|
})
|
|
|
},
|
|
|
details () {
|
|
|
- getDetails({ docId: this.docIds, from: this.$route.query.from }).then(res => {
|
|
|
- if (res.data.error_code === 0) {
|
|
|
- this.recommend(res.data.data.detail.tags)
|
|
|
- this.datas = res.data.data.detail
|
|
|
+ getDetails({ docId: this.docIds, from: this.$route.query.from }).then(data => {
|
|
|
+ const res = data.data
|
|
|
+ if (res.error_code === 0) {
|
|
|
+ this.recommend(res.data.detail.tags)
|
|
|
+ this.datas = res.data.detail
|
|
|
this.datas.docFileSize = formatSize(this.datas.docFileSize)
|
|
|
this.datas.uploadDate = dateFormatter(this.datas.uploadDate.replace(/-/g, '/'), 'yyyy/MM/dd')
|
|
|
this.datas.docSummary = this.datas.docSummary.split('').length >= 500 ? this.datas.docSummary + '...' : this.datas.docSummary
|
|
|
this.datas.tags = this.datas.tags.split(',')
|
|
|
- this.buyed = res.data.data.status
|
|
|
+ this.buyed = res.data.status
|
|
|
if (this.buyed === 1) {
|
|
|
document.getElementById('fixedTop').style.display = 'block'
|
|
|
document.getElementById('footp').style.position = 'fixed'
|
|
|
document.getElementById('footp').style.bottom = '0'
|
|
|
} else {
|
|
|
document.getElementById('fixedTop').style.display = 'none'
|
|
|
+ if(res.data.detail.productType === 1){
|
|
|
+ // 会员免费文档
|
|
|
+ console.log(this.userMemberInfo, 'userMemberInfo')
|
|
|
+ if(this.userMemberInfo.docMemberStatus){
|
|
|
+ // 是文库会员
|
|
|
+ } else {
|
|
|
+ // 不是文库会员
|
|
|
+ if(this.userMemberInfo.free_download === 0){
|
|
|
+ // 未使用未留资
|
|
|
+ } else if(this.userMemberInfo.free_download === 1){
|
|
|
+ // 已使用
|
|
|
+ } else if(this.userMemberInfo.free_download === 2){
|
|
|
+ // 已留资未使用
|
|
|
+ }
|
|
|
+ }
|
|
|
+ } else if(res.data.detail.productType === 2){
|
|
|
+ // 精品文档
|
|
|
+ if(this.userMemberInfo.docMemberStatus){
|
|
|
+
|
|
|
+ }
|
|
|
+ }
|
|
|
}
|
|
|
this.coined()
|
|
|
- if (res.data.data.status === 1) {
|
|
|
+ if (res.data.status === 1) {
|
|
|
this.buyShow()
|
|
|
}
|
|
|
- this.collectd = res.data.data.collect
|
|
|
+ this.collectd = res.data.collect
|
|
|
}
|
|
|
})
|
|
|
},
|
|
|
@@ -436,7 +509,10 @@ export default {
|
|
|
@include diy-icon('weiguanzhu', 18);
|
|
|
@include diy-icon('guanzhu', 18);
|
|
|
@include diy-icon('iconJianYu', 24);
|
|
|
-
|
|
|
+.detail-main{
|
|
|
+ width: 100%;
|
|
|
+ background: #F2F2F4;
|
|
|
+}
|
|
|
.c-details {
|
|
|
position: relative;
|
|
|
width: 1200px;
|
|
|
@@ -547,18 +623,46 @@ export default {
|
|
|
align-items: center;
|
|
|
|
|
|
::v-deep .el-button {
|
|
|
- width: 132px;
|
|
|
- height: 36px;
|
|
|
- padding: 7px 34px 8px 34px;
|
|
|
- border-radius: 6px;
|
|
|
+ min-width: 180px;
|
|
|
+ height: 46px;
|
|
|
+ // padding: 7px 34px 8px 34px;
|
|
|
+ border-radius: 8px;
|
|
|
background-color: #2CB7CA;
|
|
|
border-color: #2CB7CA;
|
|
|
-
|
|
|
+ &.prime-cost{
|
|
|
+ padding: 0;
|
|
|
+ background-color: #fff;
|
|
|
+ &>span{
|
|
|
+ display: flex;
|
|
|
+ flex-direction: column;
|
|
|
+ font-size: 16px;
|
|
|
+ &>span{
|
|
|
+ line-height: 24px;
|
|
|
+ color: #2ABED1;
|
|
|
+ }
|
|
|
+ &>span:last-child {
|
|
|
+ font-size: 14px;
|
|
|
+ line-height: 18px;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
span {
|
|
|
color: #fff;
|
|
|
font-size: 16px;
|
|
|
}
|
|
|
}
|
|
|
+ .file-action{
|
|
|
+ &-content{
|
|
|
+ display: flex;
|
|
|
+ align-items: center;
|
|
|
+ .before-coin{
|
|
|
+ display: flex;
|
|
|
+ align-items: center;
|
|
|
+ color: #999999;
|
|
|
+ font-size: 14px;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
|
|
|
.icons {
|
|
|
color: rgba(104, 104, 104, 1);
|
|
|
@@ -698,7 +802,7 @@ export default {
|
|
|
|
|
|
.foot-tip {
|
|
|
width: 920px;
|
|
|
- height: 56px;
|
|
|
+ height: 68px;
|
|
|
background: #FFFFFF;
|
|
|
box-shadow: 0px 0px 28px 0px rgba(0, 0, 0, 0.08);
|
|
|
padding: 0 40px;
|
|
|
@@ -713,7 +817,7 @@ export default {
|
|
|
}
|
|
|
|
|
|
button {
|
|
|
- margin-left: 18px;
|
|
|
+ margin-left: 24px;
|
|
|
}
|
|
|
}
|
|
|
}
|
tangshizhe