eta_mobile_front/src/views/report/Detail.vue

<script setup name="reportDetail">
import {ref} from 'vue'
import { useRoute } from "vue-router";
import apiReport from '@/api/report'
import ReportPublishPop from './components/ReportPublishPop.vue'
import { showToast,showDialog } from 'vant';

const route=useRoute()

// 获取报告详情
let reportInfo=ref(null)
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
    }
}
getReportDetail()


// 发布报告
const showPublishPop=ref(false)

// 取消发布
function handleReportPublishCancle(){
    showDialog({
        title: '提示',
        message: `是否确认取消发布？`,
        showCancelButton:true
    }).then(()=>{
        apiReport.reportPublishCancle({ReportIds:Number(route.query.id)}).then(res=>{
            if(res.Ret===200){
                getReportDetail()
            }
        })
    })
}

// 发布弹窗关闭
function handlePublishPopClose(refresh){
    if(refresh){
        getReportDetail()
    }
    showPublishPop.value=false
}

// 删除报告
function handleDelReport(){
    showDialog({
        title: '提示',
        message: '删除操作不可恢复，确认删除吗？',
        showCancelButton:true
    }).then(() => {
        // on close
        apiReport.reportDel({ReportIds:Number(route.query.id)}).then(res=>{
            if(res.Ret===200){
                showToast('删除成功')
                setTimeout(() => {
                    window.close()
                }, 1500);
            }
        })
    }).catch(()=>{})
}

// 推送消息
function handleReportSendMsg(){
    
}

</script>

<template>
    <div class="report-detail-page" v-if="reportInfo">
        <div class="top-stage-box">
            <span class="stage">第{{reportInfo.Stage}}期 / {{reportInfo.Frequency}}</span>
            <template v-if="reportInfo.State===1">
                <!-- 删除 -->
                <div class="btn-item" @click="handleDelReport">
                    <img src="@/assets/imgs/icon_del.png" alt="">
                </div>
                <!-- 发布 -->
                <div class="btn-item" @click="showPublishPop=true">
                    <img src="@/assets/imgs/report/icon_publish.png" alt="">
                </div>
            </template>
            <template v-if="reportInfo.State===2">
                <!-- 推送消息 -->
                <div class="btn-item" @click="handleReportSendMsg">
                    <img src="@/assets/imgs/icon_publish.png" alt="">
                </div>
                <!-- 取消发布 -->
                <div class="btn-item" @click="showPublishPop=true">
                    <img src="@/assets/imgs/report/icon_publish.png" alt="">
                </div>
            </template>
        </div>
        <h1 class="report-title">{{reportInfo.Title}}</h1>
        <div class="auth-box">
            <span>{{reportInfo.Author}}</span>
            <span>{{reportInfo.PublishTime}}</span>
        </div>

        <div class="report-abstract">{{reportInfo.Abstract}}</div>
        <div class="report-html-wrap" v-html="reportInfo.Content"></div>
    </div>
    <!-- 报告发布弹窗 -->
    <van-popup 
        v-model:show="showPublishPop"
        position="center"
        round
    >
        <ReportPublishPop :reportId="$route.query.id" @close="handlePublishPopClose"/>
    </van-popup>
</template>

<style lang="scss" scoped>
.report-detail-page{
    padding: 30px 34px;
    .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;
        padding-bottom: 40px;
        border-bottom: 1px solid $border-color;
    }
    .report-abstract{
        font-size: 34px;
        line-height: 54px;
        margin: 40px 0;
    }
}
.top-stage-box{
    .stage{
        display: inline-block;
        background-color: #F2F3FF;
        border-radius: 8px;
        height: 72px;
        line-height: 72px;
        padding: 0 20px;
        font-size: 28px;
    }
    .btn-item{
        float: right;
        width: 70px;
        height: 70px;
        border-radius: 50%;
        display: flex;
        justify-content: center;
        align-items: center;
        background-color: #F2F3FF;
        margin-left: 40px;
        img{
            width: 48px;
            height: 48px;
        }
    }
}
</style>