eta_mobile_front/src/views/report/PreviewDetail.vue

<script setup name="ReportPreview">
import { ref,computed, nextTick, reactive,toRefs } from 'vue'
import { useRoute, useRouter } from "vue-router";
import {getSystemInfo,shareGenerate} from '@/api/common'
import {Base64} from 'js-base64'
import apiReport from '@/api/report'
import AudioBox from './components/AudioBox.vue'
import {showToast} from 'vant'
import {reportManageBtn,useAuthBtn} from '@/hooks/useAuthBtn'
import { copyText } from 'vue3-clipboard'
import {usePublicSettingStore} from '@/store/modules/publicSetting'
import vueQr from 'vue-qr/src/packages/vue-qr.vue'


const {checkAuthBtn} = useAuthBtn()
const publicSettingStore = usePublicSettingStore()

const route=useRoute()
const router=useRouter()

// 智能布局移动端样式时内容排版全部变成1个1行的顺排
function formatSmartStyle() {
    nextTick(() =>{
        const width=window.innerWidth;
        if(width>600) return
        $('.report-drag-item-wrap_child-wrap').css({
            'flex-wrap': 'wrap',
        });
        $('.report-drag-item-wrap_child-wrap').children().css({
            'flex': 'none',
            'width': '100%'
        });
        
        document.querySelectorAll('div[comp-type="text"]').forEach(function(div) {
            div.style.height = 'auto';
        });
    })
}

// 获取报告详情
let reportInfo=ref(null)
let shareUrls=ref(null)
const smartState = reactive({
    bgColor:'',
    headImgStyle:null,//版头style
    endImgStyle:null,//版尾style
    layoutBaseInfo:{
        研报标题:'',
        研报作者:'',
        创建时间:''
    }
})
async function getReportDetail(){
    const res=await apiReport.getReportDetail({ReportId:Number(route.query.id)})
    if(res.Ret===200){
        reportInfo.value=res.Data
        document.title=res.Data.Title

        smartState.bgColor=res.Data.CanvasColor
        smartState.headImgStyle=reportInfo.value.HeadStyle?JSON.parse(reportInfo.value.HeadStyle):[]
        smartState.headImgStyle.map(st =>{
            st.value=st.value || st.label
        })
        smartState.endImgStyle=reportInfo.value.EndStyle?JSON.parse(reportInfo.value.EndStyle):[]
        smartState.endImgStyle.map(st =>{
            st.value=st.value || st.label
        })
        smartState.layoutBaseInfo['研报标题']=reportInfo.value.Title
        smartState.layoutBaseInfo['研报作者']=reportInfo.value.Author
        smartState.layoutBaseInfo['创建时间']=[2,6].includes(reportInfo.value.State)?reportInfo.value.PublishTime:''
        getSystemInfoFun()

        if(res.Data.ReportLayout===2){
            formatSmartStyle()
        }
    }
}
if(route.query.id==-1){
    //新增编辑报告时的预览
    const data=JSON.parse(sessionStorage.getItem('reportPreData'))
    reportInfo.value=data
    document.title=data.Title
    getSystemInfoFun()
}else{
    getReportDetail()
}

const { bgColor,headImgStyle,endImgStyle,layoutBaseInfo } = toRefs(smartState)


const showImgPop = ref(false)
const linkUrl = (waterMarkStr) =>{
    console.log(publicSettingStore)
    let str=''
    let url=''
    const baseUrl= publicSettingStore.publicSetting.ReportViewUrl;
    if(reportInfo.value.ReportCode){

        str= reportInfo.value.ReportLayout===1 
            ? `${baseUrl}/reportshare_crm_report?code=${reportInfo.value.ReportCode}&flag=${waterMarkStr}& ${reportInfo.value.Title}`
            : `${baseUrl}/reportshare_smart_report?code=${reportInfo.value.ReportCode}&flag=${waterMarkStr} ${reportInfo.value.Title}`
        
        const params={
            "Url":str,
            "ReportId":reportInfo.value.Id
        } 
        shareGenerate(params).then(res=>{
            if(res.Ret===200){
                console.log(res)
                if(location.port=='5173'){
                    url='http://8.136.199.33:8611'
                }else{
                    url=location.origin
                }
                shareUrls.value=url+'/v1/share/'+res.Data.UrlToken
            }
        })
    }
}
function handleCopyLink() {
    copyText(shareUrls.value,undefined,(error,event)=>{
        if(error){
            showToast('复制链接成功')

            throw new Error('复制数据失败'+JSON.stringify(error))
        }else{
            showToast('复制链接成功')
        }
    })
}

const waterMarkStr=ref('')
const getSystemInfoFun=()=>{
    getSystemInfo().then(res=>{
        if(res.Ret===200){
          const systemUserInfo=res.Data
          // 设置水印文案
          let waterMarkString=''
          if(systemUserInfo){
            waterMarkString=`${systemUserInfo.RealName}${systemUserInfo.Mobile?systemUserInfo.Mobile:systemUserInfo.Email}`
            waterMarkString=encodeURIComponent(waterMarkString)
            waterMarkStr.value=Base64.encode(waterMarkString)
            linkUrl(waterMarkStr.value)
          }
        }
    })
}


</script>

<template>
    <div class="report-detail-page select-text-disabled" v-if="reportInfo" :style="{backgroundColor:bgColor}">
        <!-- <div class="top-stage-box" v-if="$route.query.id!=-1">
            <span class="stage">第{{reportInfo.Stage}}期 / {{reportInfo.Frequency}}</span>
        </div> -->

        <!-- 版头 -->
        <div class="html-head-img-box" v-if="reportInfo && reportInfo.HeadImg">
            <img :src="reportInfo.HeadImg" alt="" style="display:block;width:100%">
            <div class="head-layout-item" v-for="item in headImgStyle" :key="item.value"
            :style="{fontFamily:item.family,fontSize:(item.sizeMobile || item.size)+'px',fontWeight:item.weight,textAlign:item.align,color:item.color,
                width:item.width,height:item.height,left:item.left,top:item.top
            }">
                {{ layoutBaseInfo[item.value] }}
            </div>
        </div>

        <template v-if="reportInfo&&(!reportInfo.HeadImg) && (!reportInfo.EndImg)">
            <h1 class="report-title">{{reportInfo.Title}}</h1>
            <div class="auth-box">
                <span>{{reportInfo.Author}}</span>
                <span>{{reportInfo.PublishTime}}</span>
            </div>
        </template>
        <!-- 音频 -->
        <AudioBox :url="reportInfo.VideoUrl" v-if="reportInfo.VideoUrl"/>
        <div class="report-abstract" v-if="reportInfo.Abstract">摘要：{{reportInfo.Abstract}}</div>
        
        <!-- 章节 -->
        <template v-if="reportInfo.CollaborateType===2">
            <ul class="chapter-list-wrap">
                <li class="chapter-item-box" v-for="item in reportInfo.ChapterList" :key="item.ReportChapterId">
                    <div class="type-box">
                        <span class="tag">{{item.TypeName}}</span>
                        <span>{{item.Title}}</span>
                    </div>
                    <!-- 音频 -->
                    <!-- <AudioBox :url="item.VideoUrl" v-if="item.VideoUrl"/> -->
                    <div class="report-html-wrap" v-html="item.Content"></div>
                </li>
            </ul>
        </template>
        <!-- 研报 -->
        <template v-else>
            <div class="report-html-wrap" v-html="reportInfo.Content"></div>
        </template>


          <!-- 板尾 -->
        <div class="html-end-img-box" v-if="reportInfo && reportInfo.EndImg">
            <img :src="reportInfo.EndImg" alt="" style="display:block;width:100%">
            <div class="head-layout-item" v-for="item in endImgStyle" :key="item.value"
            :style="{fontFamily:item.family,fontSize:(item.sizeMobile || item.size)+'px',fontWeight:item.weight,textAlign:item.align,color:item.color,
                width:item.width,height:item.height,left:item.left,top:item.top
            }">
                {{ layoutBaseInfo[item.value] }}
            </div>
        </div> 

        <!-- 浮动操作 -->
        <div class="fix-bot-action-box">
            <div class="item" @click="handleCopyLink" v-permission="reportManageBtn.reportManage_reportView_copyWechat">
                <img class="icon" src="@/assets/imgs/report/icon_copy.png" alt="">
                <div>复制链接</div>
            </div>
            <div class="item" @click="showImgPop=true" v-permission="reportManageBtn.reportManage_reportView_wechartShare">
                <img class="icon" src="@/assets/imgs/report/icon_wx_black.png" alt="">
                <div>微信分享</div>
            </div>
        </div>
    </div>


    <van-popup 
        v-model:show="showImgPop" 
        round
    >
        <vue-qr :text="shareUrls" colorDark="#333" colorLight="#fff" :dotScale="1"></vue-qr>
    </van-popup>
</template>

<style lang="scss" scoped>
.report-detail-page{
    padding: 30px 34px;
    margin-bottom: 112px;
    .report-title{
        margin: 30px 0;
        font-weight: 600;
        font-size: 42px;
        line-height: 56px;
    }
    .auth-box{
        display: flex;
        justify-content: space-between;
        font-size: $font-grey;
        font-size: 36px;
        margin-bottom: 40px;
    }
    .report-abstract{
        font-size: 34px;
        line-height: 54px;
        margin: 40px 0;
    }
    .audio-box{
        margin: 40px 0;
    }
    .chapter-list-wrap{
        .chapter-item-box{
            padding-bottom: 20px;
            border-bottom: 1px dashed $border-color;
            margin-bottom: 20px;
            .type-box{
                display: flex;
                align-items: center;
                .tag{
                    display: inline-block;
                    padding: 10px;
                    font-size: 24px;
                    background: rgba(0, 82, 217, 0.1);
                    border-radius: 4px;
                    color: $theme-color;
                    margin-right: 20px;
                }
            }
        }
    }

    .report-drag-item-wrap{
        padding: 6px;
        margin-bottom: 3px;
    }
    .html-head-img-box,.html-end-img-box{
        position: relative;
        margin: 20px 0;
        .head-layout-item{
            position: absolute;
            overflow: hidden;
            box-sizing: border-box
        }
    }
}
.top-stage-box{
    .stage{
        display: inline-block;
        background-color: #F2F3FF;
        border-radius: 8px;
        height: 72px;
        line-height: 72px;
        padding: 0 20px;
        font-size: 28px;
    }
    .edit-icon{
        float: right;
        width: 70px;
        height: 70px;
    }
}


.fix-bot-action-box{
    position: fixed;
    left: 0;
    bottom: 0;
    right: 0;
    z-index: 99;
    background-color: #fff;
    border-top: 1px solid $border-color;
    height: 112px;
    display: flex;
    align-items: center;
    .item{
        height: 100%;
        flex: 1;
        display: flex;
        flex-direction: column;
        justify-content: center;
        align-items: center;
        font-size: 20px;
        .icon{
            width: 40px;
            height: 40px;
            margin-bottom: 5px;
        }
    }
}

@media screen and (min-width:$media-width){
    .report-detail-page{
        max-width: 800px;
        margin: 0 auto 110px;
        padding: 30px;
        .report-title{
            margin: 15px 0;
            font-size: 21px;
            line-height: 28px;
        }
        .auth-box{
            font-size: 18px;
            padding-bottom: 20px;
            margin-bottom: 20px;
        }
        .report-abstract{
            font-size: 17px;
            line-height: 27px;
            margin: 20px 0;
        }
        .chapter-list-wrap{
            .chapter-item-box{
                padding-bottom: 20px;
                margin-bottom: 20px;
                .type-box{
                    .tag{
                        padding: 5px;
                        font-size: 12px;
                        border-radius: 2px;
                        margin-right: 10px;
                    }
                }
            }
        }
    }
    .top-stage-box{
        .stage{
            border-radius: 4px;
            height: 36px;
            line-height: 36px;
            padding: 0 10px;
            font-size: 14px;
        }
        .edit-icon{
            width: 35px;
            height: 35px;
        }
    }

    .fix-bot-action-box{ 
        height: 110px;
        .item {
            font-size: 18px;
            .icon{
                width: 40px;
                height: 40px;
            }
        }
    }
}
</style>