123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350351352353354355356357358359360361362363364365366367368369370371372373374375376377378379380381382383384385386387388389390391392393394395396397398399400401402403404405406407408409410411412413414415416417418419420421422423424425426427428429430431432433434435436437438439440441442443444445446447448449450451452453454455456457458459460461462463464465466467468469470471472473 |
- <script setup>
- import apiReport from '@/api/modules/report'
- import { useRoute } from 'vue-router'
- import { Message } from 'tdesign-mobile-vue';
- import apiCommon from '@/api/modules/common'
- import apiUser from '@/api/modules/user'
- import { useThrottleFn } from '@vueuse/core'
- const route = useRoute()
- // 获取系统配置
- let systemConfig = null
- function getSystemConfig() {
- apiCommon.systemConfig().then(res => {
- if (res.Ret === 200) {
- systemConfig = res.Data
- console.log(res.Data);
- }
- })
- }
- getSystemConfig()
- // 获取用户信息
- let userInfo = null
- async function getUserInfo() {
- const res = await apiUser.userInfo()
- if (res.Ret === 200) {
- userInfo = res.Data
- }
- }
- const reportId = route.query.reportid
- const reportInfo = ref(null)
- const reportContent = ref('')
- const reportStatus = ref(0)//1已过期,2没有该品种权限,3没有权限,4有权限,5未绑定
- const reportCollected = ref(false)//报告是否收藏
- const isBind=ref(false)
- async function getReportInfo() {
- if (!reportId) return
- const res = await apiReport.getReportDetail({
- ReportId: Number(reportId)
- })
- if (res.Ret === 200) {
- reportInfo.value = res.Data.Report
- reportStatus.value = res.Data.Status
- reportCollected.value = res.Data.IsCollect || false
- isBind.value=res.Data.IsSignIn
- nextTick(() => {
- handlePreviewImgs()
- })
- // 设置分享文案
- wx.miniProgram.postMessage({
- data: {
- title: res.Data.Report.Title
- }
- });
- await getUserInfo()
- if (res.Data.Status === 4) {
- if (userInfo.Status === 2 && userInfo.HasPermission === '私有权限') {
- reportInfo.value.Content=modifyReportContentIframeData(reportInfo.value.Content)
- formatIframeData()
- }else{
- reportContent.value = modifyReportContentIframeData(reportInfo.value.Content)
- splitReportContent(reportContent.value)
- }
- } else {//无权限
- reportContent.value = modifyReportContentIframeData(reportInfo.value.ContentSub)
- }
- }
- }
- getReportInfo()
- // 修改报告中嵌入的图表地址
- function modifyReportContentIframeData(str){
- let temStr=str.replace(/http:\/\/eta.dwfutures.com:8001/g,'https://dwresearch.dwfutures.com')
- return temStr.replace(/http:\/\/58.210.74.21:9100\/etastatic/g,'https://dwresearch.dwfutures.com/etastatic')
- }
- // 给报告详情中图表加参数
- function formatIframeData() {
- reportContent.value = reportInfo.value.Content.replace(/\/chartshow\?code=/g, `/chartshow?source=etamini&token=${localStorage.getItem('token')}&reportId=${reportId}&code=`)
- splitReportContent(reportContent.value)
- }
- // 报告内容分页
- const pageSize=20
- let page=0
- let endPageNum=0
- let contentTotals=[]
- const renderContentList=ref([])
- function splitReportContent(data){
- const arr=data.split('</p>');
- contentTotals=arr.map(_ => _+'</p>')
- renderContentList.value=contentTotals.slice(0,pageSize)
- endPageNum=parseInt(contentTotals.length / pageSize) + 1;
- }
- function handleLoadContent(){
- renderContentList.value=renderContentList.value.concat(contentTotals.slice(page*pageSize,(page+1)*pageSize))
- }
- // 拨打电话
- function handleCallPhone() {
- let tel = userInfo.SellerPhone
- if (!tel) {
- systemConfig.forEach(item => {
- if (item.ConfKey === 'ServicePhone') {
- tel = item.ConfVal
- }
- });
- }
- var phoneLink = 'tel:' + tel;
- var link = document.createElement('a');
- link.setAttribute('href', phoneLink);
- link.onclick = function () {
- return true;
- };
- link.click();
- }
- // 点击收藏
- async function handleCollect() {
- const res = reportCollected.value ? await apiReport.reportCollectCancel({ ReportId: Number(reportId) }) : await apiReport.reportCollect({ ReportId: Number(reportId) })
- if (res.Ret === 200) {
- Message.success(reportCollected.value ? '取消收藏成功' : '收藏成功')
- reportCollected.value = !reportCollected.value
- // 通知更新收藏列表
- wx.miniProgram.postMessage({
- data: 'refreshCollectList'
- });
- }
- }
- // 显示免责声明
- const isShowMZSM = ref(false)
- // 显示返回顶部
- const showToTop = ref(false)
- const handlePageScroll=useThrottleFn(()=>{
- const top = document.documentElement.scrollTop || document.body.scrollTop
- if (top > window.outerHeight) {
- showToTop.value = true
- } else {
- showToTop.value = false
- }
- if(page >= endPageNum) return
- const clientHeight = document.documentElement.clientHeight || document.body.clientHeight; // 可视高度
- const scrollHeight = document.body.scrollHeight; // 总高度
- const bufferHeight = 400;
- if((scrollHeight - top - clientHeight) < bufferHeight+100) {
- console.log('触底')
- page++
- handleLoadContent();
- }
- },300)
- function handleBackTop() {
- document.body.scrollTop = document.documentElement.scrollTop = 0
- }
- // 点击报告内容中的图片
- function handlePreviewImgs() {
- document.getElementById('rich-content').addEventListener('click', function (event) {
- let imgArray = [];
- let curImageSrc = event.target.src;
- let oParent = event.target.parentNode;
- if (curImageSrc && !oParent.hasAttribute('href')) {
- let imgs = document.querySelectorAll('.rich-content img');
- for (let i = 0; i < imgs.length; i++) {
- let itemSrc = imgs[i].src;
- imgArray.push(itemSrc);
- }
- wx.previewImage({ current: curImageSrc, urls: imgArray });
- }
- });
- }
- onMounted(() => {
- window.addEventListener('scroll', handlePageScroll)
- })
- onUnmounted(() => {
- window.removeEventListener('scroll', handlePageScroll)
- })
- function handleGoLogin(){
- const redirectUrl=encodeURIComponent(`/pages-report/reportDetail/index?id=${route.query.reportid}`)
- wx.miniProgram.reLaunch({
- url:`/pages/login/index?redirectUrl=${redirectUrl}`
- })
- }
- </script>
- <template>
- <div class="report-detail-page" v-if="reportInfo">
- <div class="title-box">{{ reportInfo.Title }}</div>
- <div class="author-box">{{ reportInfo.Author }}</div>
- <div class="time-box">
- <span>{{ reportInfo.PublishTime }}</span>
- <span class="btn" @click="isShowMZSM = true">免责声明</span>
- </div>
- <div class="des-box" v-if="reportInfo.Abstract">
- <svg-icon name="icon01"></svg-icon>
- <div>{{ reportInfo.Abstract }}</div>
- </div>
- <div
- id="rich-content"
- class="report-content-box rich-content"
- >
- <div v-for="item in renderContentList" :key="item" v-html="item"></div>
- </div>
- <!-- 右侧悬浮操作栏 -->
- <div class="right-fix-box">
- <!-- 收藏 -->
- <svg-icon
- @click="handleCollect"
- class="item collect-icon"
- :name="reportCollected ? 'collected' : 'collect'"
- v-if="reportStatus === 4"
- />
- <!-- 返回顶部 -->
- <div class="item back-top-img">
- <svg-icon
- name="backtop"
- v-show="showToTop"
- @click="handleBackTop"
- class="back-top-img"
- />
- </div>
- </div>
- </div>
- <!-- 无权限 -->
- <div class="no-auth-wrap" v-if="reportStatus !== 4">
- <div class="opcity-box"></div>
- <div class="content-box">
- <img class="icon" src="@/assets/imgs/lock-img.png" alt="" />
- <div class="text" v-if="reportStatus === 3">
- 您暂无权限查看,<br />请联系客服人员开通!
- </div>
- <div class="text" v-if="reportStatus === 2">
- 您暂无该品种权限,<br />请联系销售人员开通!
- </div>
- <div class="text" v-if="reportStatus === 1">
- 您的权限已过期,<br />请联系销售人员开通!
- </div>
- <t-button
- theme="primary"
- block
- style="width: 300px; margin: 30px auto"
- @click="handleCallPhone"
- >立即联系</t-button
- >
- </div>
- </div>
- <!-- 未绑定 -->
- <div class="no-auth-wrap" v-if="reportStatus === 5&&!isBind">
- <div class="opcity-box"></div>
- <div class="content-box">
- <img class="icon" src="@/assets/imgs/lock-img.png" alt="" />
- <div class="text">
- 为了优化您的用户体验<br />请登录后查看更多信息!
- </div>
- <t-button
- theme="primary"
- block
- style="width: 300px; margin: 30px auto"
- @click="handleGoLogin"
- >去登陆</t-button
- >
- </div>
- </div>
- <!-- 免责声明 -->
- <disclaimers-wrap v-model:show="isShowMZSM" />
- </template>
- <style lang="scss" scoped>
- .report-detail-page {
- background-color: #fff;
- padding: var(--page-padding);
- .title-box {
- font-size: 36px;
- line-height: 44px;
- margin-bottom: 20px;
- }
- .time-box {
- margin-top: 10px;
- font-size: var(--font-size-small);
- color: var(--text-color-grey);
- .btn {
- float: right;
- color: var(--primary-color);
- }
- }
- .des-box {
- background-color: #f8f8f8;
- padding: 20px;
- margin: 20px 0;
- display: flex;
- gap: 0 10px;
- color: var(--text-color-sub);
- font-size: var(--font-size-small);
- line-height: 36px;
- }
- .report-content-box {
- margin-top: 20px;
- line-height: 1.8;
- font-size: 36px;
- :deep(img) {
- width: 100% !important;
- }
- :deep(span) {
- font-size: 36px !important;
- line-height: 1.8 !important;
- background-color: rgba(255, 255, 255, 0) !important;
- }
- :deep(p) {
- font-size: 36px !important;
- line-height: 1.8 !important;
- background-color: rgba(255, 255, 255, 0) !important;
- }
- :deep(ul) {
- font-size: 36px !important;
- line-height: 1.8 !important;
- background-color: rgba(255, 255, 255, 0) !important;
- }
- :deep(ol) {
- font-size: 36px !important;
- line-height: 1.8 !important;
- background-color: rgba(255, 255, 255, 0) !important;
- }
- :deep(iframe) {
- width: 100% !important;
- }
- :deep(li) {
- font-size: 36px !important;
- line-height: 1.8 !important;
- background-color: rgba(255, 255, 255, 0) !important;
- list-style: inherit !important;
- list-style-position: inside !important;
- }
- :deep(span.fr-emoticon) {
- width: 36px !important;
- height: 36px !important;
- background-repeat: no-repeat !important;
- background-size: cover !important;
- display: inline-block !important;
- vertical-align: middle !important;
- }
- }
- .right-fix-box {
- position: fixed;
- z-index: 99;
- right: 34px;
- bottom: 130px;
- .item {
- margin-top: 10px;
- }
- .back-top-img {
- width: 100px;
- height: 100px;
- display: block;
- }
- .collect-icon {
- width: 100px;
- height: 100px;
- display: block;
- }
- }
- }
- .no-auth-wrap {
- position: fixed;
- left: 0;
- right: 0;
- bottom: 0;
- z-index: 99;
- .opcity-box {
- height: 129px;
- background: linear-gradient(
- 360deg,
- #ffffff 0%,
- rgba(255, 255, 255, 0) 100%
- );
- }
- .content-box {
- background-color: #fff;
- padding-bottom: 200px;
- text-align: center;
- color: var(--primary-color);
- }
- .icon {
- display: block;
- margin: 0 auto;
- width: 200px;
- height: 200px;
- }
- }
- @media (min-width: 600px) {
- .report-detail-page {
- .title-box {
- font-size: 18px;
- line-height: 22px;
- margin-bottom: 10px;
- }
- .time-box {
- margin-top: 5px;
- }
- .des-box {
- padding: 10px;
- margin: 10px 0;
- gap: 0 5px;
- line-height: 18px;
- }
- .report-content-box {
- margin-top: 10px;
- font-size: 18px;
- :deep(span) {
- font-size: 18px !important;
- }
- :deep(p) {
- font-size: 18px !important;
- }
- :deep(ul) {
- font-size: 18px !important;
- }
- :deep(ol) {
- font-size: 18px !important;
- }
- :deep(li) {
- font-size: 18px !important;
- }
- :deep(span.fr-emoticon) {
- width: 18px !important;
- height: 18px !important;
- }
- }
- .right-fix-box {
- right: 17px;
- bottom: 65px;
- .item {
- margin-top: 5px;
- }
- .back-top-img {
- width: 50px;
- height: 50px;
- }
- .collect-icon {
- width: 50px;
- height: 50px;
- }
- }
- }
- .no-auth-wrap {
- .opcity-box {
- height: 65px;
- }
- .content-box {
- padding-bottom: 100px;
- }
- .icon {
- width: 100px;
- height: 100px;
- }
- }
- }
- </style>
|