|
|
@@ -0,0 +1,427 @@
|
|
|
+<script setup>
|
|
|
+import { ref } from 'vue'
|
|
|
+import { ElMessageBox } from 'element-plus'
|
|
|
+import moment from 'moment';
|
|
|
+import 'moment/dist/locale/zh-cn'
|
|
|
+import { apiReportDetail, apiReportMoreRecmd, apiReportDetailBanner, apiRddpShareImg } from '@/api/report'
|
|
|
+import { apiGetWechatQRCode } from '@/api/common'
|
|
|
+import { apiApplyPermission } from '@/api/user'
|
|
|
+import { useRoute, onBeforeRouteUpdate, useRouter } from 'vue-router';
|
|
|
+import { useStore } from 'vuex';
|
|
|
+import reportCancel from './components/reportCancel.vue'
|
|
|
+moment.locale('zh-cn')
|
|
|
+
|
|
|
+const route = useRoute()
|
|
|
+const router = useRouter()
|
|
|
+const store = useStore()
|
|
|
+
|
|
|
+let reportId = ref(route.query.reportId || '')
|
|
|
+
|
|
|
+
|
|
|
+// 获取报告详情
|
|
|
+let info = ref(null)
|
|
|
+let isReportPublishCancel = ref(false)//报告取消发布了
|
|
|
+const getReportDetail = async () => {
|
|
|
+ const res = await apiReportDetail({
|
|
|
+ report_id: Number(reportId.value)
|
|
|
+ })
|
|
|
+ if (res.code === 200) {
|
|
|
+ info.value = res.data
|
|
|
+
|
|
|
+ document.title = res.data.report_info.classify_name_first
|
|
|
+ store.commit('modifyBreadCrumb', res.data.report_info.classify_name_first)
|
|
|
+
|
|
|
+ // 获取详情如果为联系销售根据判断条件是否主动申请一次
|
|
|
+ if (!res.data.auth_ok) {
|
|
|
+ if (info.value.permission_check.type == 'contact' && !info.value.permission_check.customer_info.has_apply) {
|
|
|
+ if (info.value.permission_check.customer_info.status == '冻结' || (info.value.permission_check.customer_info.status == '试用' && info.value.permission_check.customer_info.is_suspend == 1)) {
|
|
|
+ apiApplyPermission({
|
|
|
+ company_name: info.value.permission_check.customer_info.company_name,
|
|
|
+ real_name: info.value.permission_check.customer_info.name,
|
|
|
+ source: 4,
|
|
|
+ from_page: '报告详情'
|
|
|
+ }).then(res => {
|
|
|
+ if (res.code === 200) {
|
|
|
+ console.log('主动申请成功');
|
|
|
+ }
|
|
|
+ })
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+
|
|
|
+ // 获取侧边更多推荐
|
|
|
+ if (res.data.auth_ok) {
|
|
|
+ getAsideMoreRecmd(res.data.report_info)
|
|
|
+ getAsideBanner(res.data.report_info)
|
|
|
+ }
|
|
|
+
|
|
|
+ //向小程序发送分享数据
|
|
|
+ //处理分享标题
|
|
|
+ let shareTitle = '', shareImg = '', imgText = '';
|
|
|
+ const shareTime = moment(res.data.report_info.publish_time).format('MMDD')
|
|
|
+
|
|
|
+ if (res.data.report_info.abstract) {
|
|
|
+ shareTitle = res.data.report_info.abstract
|
|
|
+ imgText = `<div style="font-size:78px">${res.data.report_info.title}（${shareTime}）</div>`
|
|
|
+ } else {
|
|
|
+ shareTitle = res.data.report_info.title
|
|
|
+ imgText = `<div style="font-size:78px">${moment(res.data.report_info.publish_time).format('YYYY/MM/DD')}</div><div style="font-size:78px">${res.data.report_info.classify_name_second}</div>`
|
|
|
+ }
|
|
|
+ const rddpImgRes = await apiRddpShareImg({
|
|
|
+ pars: JSON.stringify({
|
|
|
+ title: imgText,
|
|
|
+ time_format: moment(res.data.report_info.publish_time).format('YYYY/MM/DD'),
|
|
|
+ background_img: res.data.report_info.share_bg_img,
|
|
|
+ }),
|
|
|
+ report_id: Number(reportId.value),
|
|
|
+ })
|
|
|
+ if (rddpImgRes.code === 200) {
|
|
|
+ shareImg = rddpImgRes.data
|
|
|
+ }
|
|
|
+
|
|
|
+ const postData = {
|
|
|
+ path: '/pages-report/raiReportDetail',
|
|
|
+ params: {
|
|
|
+ reportId: reportId.value
|
|
|
+ },
|
|
|
+ title: shareTitle,
|
|
|
+ shareImg: shareImg
|
|
|
+ }
|
|
|
+ wx.miniProgram.postMessage({ data: postData })
|
|
|
+
|
|
|
+ } else if (res.code === 4002) {
|
|
|
+ isReportPublishCancel.value = true
|
|
|
+ }
|
|
|
+}
|
|
|
+getReportDetail()
|
|
|
+
|
|
|
+
|
|
|
+
|
|
|
+// 侧边栏更多推荐
|
|
|
+let moreRecmdList = ref([])
|
|
|
+const getAsideMoreRecmd = async (data) => {
|
|
|
+ console.log('获取侧边栏更多推荐');
|
|
|
+ const res = await apiReportMoreRecmd({
|
|
|
+ reportId: Number(data.report_id),
|
|
|
+ classify_name_first: data.classify_name_first
|
|
|
+ })
|
|
|
+ if (res.code === 200) {
|
|
|
+ moreRecmdList.value = res.data
|
|
|
+ }
|
|
|
+}
|
|
|
+
|
|
|
+//点击侧边栏更多推荐
|
|
|
+const handleClickAsideRecmd = (item) => {
|
|
|
+ router.replace({
|
|
|
+ query: {
|
|
|
+ reportId: item.ReportId
|
|
|
+ }
|
|
|
+ })
|
|
|
+}
|
|
|
+
|
|
|
+//侧边栏报告合集
|
|
|
+let banner = ref(null)
|
|
|
+const getAsideBanner = async (data) => {
|
|
|
+ console.log('获取侧边栏报告合集');
|
|
|
+ const res = await apiReportDetailBanner({
|
|
|
+ reportId: Number(data.report_id),
|
|
|
+ classify_name_first: data.classify_name_first
|
|
|
+ })
|
|
|
+ if (res.code === 200) {
|
|
|
+ banner.value = res.data
|
|
|
+ }
|
|
|
+}
|
|
|
+
|
|
|
+//点击侧边栏报告合集
|
|
|
+const handleAsideBanner = (data) => {
|
|
|
+ if (data.Type == '报告合集' && data.ShowType === 1) {
|
|
|
+ router.push({
|
|
|
+ path: '/report/list',
|
|
|
+ query: {
|
|
|
+ classifyId: data.ClassifyIdFirst,
|
|
|
+ classifyName: data.ClassifyNameFirst
|
|
|
+ }
|
|
|
+ })
|
|
|
+ } else if (data.Type == '报告合集' && data.ShowType === 3) {
|
|
|
+ router.push({
|
|
|
+ path: '/report/varietyreportlist',
|
|
|
+ query: {
|
|
|
+ classifyId: data.ClassifyIdFirst,
|
|
|
+ }
|
|
|
+ })
|
|
|
+ }else {
|
|
|
+ router.push({
|
|
|
+ path: '/report/specialcolumndetail',
|
|
|
+ query: {
|
|
|
+ columnId: data.ClassifyIdSecond
|
|
|
+ }
|
|
|
+ })
|
|
|
+ }
|
|
|
+}
|
|
|
+
|
|
|
+
|
|
|
+onBeforeRouteUpdate((to, from) => {
|
|
|
+ console.log(to.query);
|
|
|
+ // 更新页面数据
|
|
|
+ reportId.value = to.query.reportId
|
|
|
+ getReportDetail()
|
|
|
+ getQRCodeImg()
|
|
|
+})
|
|
|
+
|
|
|
+//登录
|
|
|
+const handleGoLogin = () => {
|
|
|
+ wx.miniProgram.getEnv(res => {
|
|
|
+ if (res.miniprogram) {
|
|
|
+ localStorage.setItem('goBeforeUrl', window.location.href)
|
|
|
+ wx.miniProgram.reLaunch({ url: '/pages/login' })
|
|
|
+ }
|
|
|
+ })
|
|
|
+}
|
|
|
+
|
|
|
+// 点击申请
|
|
|
+const handleGoApply = async () => {
|
|
|
+ if (store.state.userInfo.is_bind === 0) {
|
|
|
+ ElMessageBox({
|
|
|
+ title: `温馨提示`,
|
|
|
+ message: '为了优化您的用户体验，<br>请登录后查看更多信息！',
|
|
|
+ dangerouslyUseHTMLString: true,
|
|
|
+ center: true,
|
|
|
+ confirmButtonText: '去登录',
|
|
|
+ confirmButtonClass: 'self-elmessage-confirm-btn',
|
|
|
+ showCancelButton: true,
|
|
|
+ cancelButtonText: '取消',
|
|
|
+ cancelButtonClass: 'self-elmessage-cancel-btn'
|
|
|
+ }).then(res => {
|
|
|
+ wx.miniProgram.reLaunch({ url: '/pages/login' })
|
|
|
+ }).catch(() => { })
|
|
|
+ return
|
|
|
+ }
|
|
|
+ if (info.value.permission_check.type == 'apply') {
|
|
|
+ if (info.value.permission_check.customer_info.has_apply) {// 已经申请过
|
|
|
+ const htmlStr = `<p>您已提交过申请，请耐心等待</p>`
|
|
|
+ ElMessageBox({
|
|
|
+ title: '温馨提醒',
|
|
|
+ message: htmlStr,
|
|
|
+ center: true,
|
|
|
+ dangerouslyUseHTMLString: true,
|
|
|
+ confirmButtonText: '知道了',
|
|
|
+ confirmButtonClass: 'self-elmessage-confirm-btn'
|
|
|
+ })
|
|
|
+ } else {
|
|
|
+ if (!info.value.permission_check.customer_info.status || info.value.permission_check.customer_info.status != '流失' || info.value.permission_check.customer_info.status != '关闭') {
|
|
|
+ router.push({
|
|
|
+ path: '/apply/permission',
|
|
|
+ query: {
|
|
|
+ source: 4,
|
|
|
+ fromPage: '报告详情'
|
|
|
+ }
|
|
|
+ })
|
|
|
+ } else {//主动调一次申请权限接口
|
|
|
+ const res = await apiApplyPermission({
|
|
|
+ company_name: info.value.permission_check.customer_info.company_name,
|
|
|
+ real_name: info.value.permission_check.customer_info.name,
|
|
|
+ source: 4,
|
|
|
+ from_page: '报告详情'
|
|
|
+ })
|
|
|
+ if (res.code === 200) {
|
|
|
+ getReportDetail()
|
|
|
+ const htmlStr = `<p>申请已提交</p><p>请等待销售人员与您联系</p>`
|
|
|
+ ElMessageBox({
|
|
|
+ title: '温馨提醒',
|
|
|
+ message: htmlStr,
|
|
|
+ center: true,
|
|
|
+ dangerouslyUseHTMLString: true,
|
|
|
+ confirmButtonText: '知道了',
|
|
|
+ confirmButtonClass: 'self-elmessage-confirm-btn'
|
|
|
+ })
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+}
|
|
|
+
|
|
|
+// 获取小程序码
|
|
|
+let QRCodeImg = ref('')
|
|
|
+const getQRCodeImg = async () => {
|
|
|
+ const res = await apiGetWechatQRCode({
|
|
|
+ CodeScene: JSON.stringify({ reportId: reportId.value }),
|
|
|
+ CodePage: 'pages-report/raiReportDetail'
|
|
|
+ })
|
|
|
+ if (res.code === 200) {
|
|
|
+ QRCodeImg.value = res.data
|
|
|
+ }
|
|
|
+}
|
|
|
+getQRCodeImg()
|
|
|
+
|
|
|
+</script>
|
|
|
+
|
|
|
+<template>
|
|
|
+ <div class="report-detail-page" v-if="info">
|
|
|
+ <div class="hasrightaside-box">
|
|
|
+ <div class="content-box">
|
|
|
+ <div class="report-box">
|
|
|
+ <iframe class="iframe-wrap" :src="info.rai_report_url" frameborder="0" style="border:none"></iframe>
|
|
|
+ <!-- 无权限 -->
|
|
|
+ <div class="no-auth-wrap" v-if="store.state.userInfo?.is_bind === 0">
|
|
|
+ <div class="apply-box">
|
|
|
+ <div>您尚未登录，请登录后查看更多信息</div>
|
|
|
+ <div class="global-main-btn btn" @click="handleGoLogin">
|
|
|
+ 立即登录
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ <template v-else>
|
|
|
+ <div class="no-auth-wrap" v-if="!info.auth_ok">
|
|
|
+ <div
|
|
|
+ class="apply-box"
|
|
|
+ v-if="info.permission_check.type == 'apply'"
|
|
|
+ >
|
|
|
+ <div>您暂无权限查看报告，若想查看请申请开通</div>
|
|
|
+ <div class="global-main-btn btn" @click="handleGoApply">
|
|
|
+ 立即申请
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ <div class="apply-box" v-else>
|
|
|
+ <div>您暂无权限查看报告</div>
|
|
|
+ <div>
|
|
|
+ 若想查看请联系对口销售：{{ info.permission_check.name }}--{{
|
|
|
+ info.permission_check.mobile
|
|
|
+ }}
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ </template>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ <div
|
|
|
+ class="right-aside-box"
|
|
|
+ v-if="info.auth_ok && !info.report_info.has_chapter"
|
|
|
+ >
|
|
|
+ <div class="fix-top">
|
|
|
+ <div class="share-box">
|
|
|
+ <div class="label">分享</div>
|
|
|
+ <el-popover
|
|
|
+ :width="200"
|
|
|
+ popper-style="box-shadow: rgb(14 18 22 / 35%) 0px 10px 38px -10px, rgb(14 18 22 / 20%) 0px 10px 20px -15px; padding: 20px;"
|
|
|
+ >
|
|
|
+ <template #reference><div class="icon"></div></template>
|
|
|
+ <template #default>
|
|
|
+ <img
|
|
|
+ :src="QRCodeImg"
|
|
|
+ class="share-xcx-img"
|
|
|
+ alt=""
|
|
|
+ style="width: 150px; display: block; margin: 0 auto"
|
|
|
+ />
|
|
|
+ </template>
|
|
|
+ </el-popover>
|
|
|
+ </div>
|
|
|
+ <div class="hot-box" style="margin-top: 60px" v-if="banner">
|
|
|
+ <div class="label">{{ banner.Type }}</div>
|
|
|
+ <div
|
|
|
+ class="img-con"
|
|
|
+ :style="'background-image:url(' + banner.ImgUrl + ')'"
|
|
|
+ @click="handleAsideBanner(banner)"
|
|
|
+ >
|
|
|
+ <!-- 专栏 -->
|
|
|
+ <div v-if="banner.Type == '专栏详情'" class="cloumn-box">
|
|
|
+ <div class="title">
|
|
|
+ {{ banner.ClassifyNameSecond.substring(0, 12) }}
|
|
|
+ </div>
|
|
|
+ <div class="multi-ellipsis user">
|
|
|
+ {{ banner.ReportAuthor }} {{ banner.VipTitle }}
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ <!-- 报告列表 -->
|
|
|
+ <div v-else class="rep-box cloumn-box">
|
|
|
+ <div class="title">
|
|
|
+ {{ banner.ClassifyNameFirst.substring(0, 12) }}
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ <div class="recmd-box" style="margin-top: 40px">
|
|
|
+ <div class="label">更多推荐</div>
|
|
|
+ <div
|
|
|
+ class="recmd-item"
|
|
|
+ v-for="item in moreRecmdList"
|
|
|
+ :key="item.Id"
|
|
|
+ @click="handleClickAsideRecmd(item)"
|
|
|
+ >
|
|
|
+ <div class="title">{{ item.ClassifySecondFirst }}</div>
|
|
|
+ <div>{{ item.Title }}</div>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ <report-cancel v-if="isReportPublishCancel" />
|
|
|
+</template>
|
|
|
+
|
|
|
+<style lang="scss" scoped>
|
|
|
+.report-detail-page {
|
|
|
+ .iframe-wrap{
|
|
|
+ display: block;
|
|
|
+ box-sizing: border-box;
|
|
|
+ width: 100%;
|
|
|
+ height: 600px;
|
|
|
+ }
|
|
|
+ .no-auth-wrap {
|
|
|
+ text-align: center;
|
|
|
+ color: #f3a52f;
|
|
|
+ margin-top: -140px;
|
|
|
+ padding-top: 140px;
|
|
|
+ min-height: 200px;
|
|
|
+ position: relative;
|
|
|
+ z-index: 5;
|
|
|
+ background: linear-gradient(
|
|
|
+ 360deg,
|
|
|
+ #ffffff 60%,
|
|
|
+ rgba(255, 255, 255, 0) 88%
|
|
|
+ );
|
|
|
+ .btn {
|
|
|
+ width: 218px;
|
|
|
+ margin-left: auto;
|
|
|
+ margin-right: auto;
|
|
|
+ margin-top: 20px;
|
|
|
+ }
|
|
|
+ }
|
|
|
+
|
|
|
+ .right-aside-box {
|
|
|
+ .hot-box {
|
|
|
+ .img-con {
|
|
|
+ position: relative;
|
|
|
+ .cloumn-box {
|
|
|
+ padding: 17px 15px;
|
|
|
+ .title {
|
|
|
+ font-size: 16px;
|
|
|
+ font-weight: bold;
|
|
|
+ color: #fff;
|
|
|
+ width: 105px;
|
|
|
+ }
|
|
|
+ .user {
|
|
|
+ font-size: 12px;
|
|
|
+ color: #fff;
|
|
|
+ margin-top: 4px;
|
|
|
+ width: 105px;
|
|
|
+ }
|
|
|
+ .stage {
|
|
|
+ margin-top: 10px;
|
|
|
+ color: #f3a52f;
|
|
|
+ font-size: 12px;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ .rep-box {
|
|
|
+ .stage {
|
|
|
+ position: absolute;
|
|
|
+ bottom: 27px;
|
|
|
+ left: 16px;
|
|
|
+ color: #f3a52f;
|
|
|
+ font-size: 12px;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+}
|
|
|
+</style>
|
