xmhjc-web/src/components/NewsCom/NewsType1.vue

<template>
    <div>
        <div style="width: 1200px;padding: 20px;margin: 0 auto;">
            <a-breadcrumb>
                <a-breadcrumb-item><a href="/index">首页</a></a-breadcrumb-item>
                <a-breadcrumb-item v-if="ismeunName">{{ismeunName}}</a-breadcrumb-item>
                <a-breadcrumb-item>详情</a-breadcrumb-item>
            </a-breadcrumb>
        </div>
    <div class="indexMain">
        
        <!-- 直接展示富文本 -->
        <div style="width: 100%;" v-if="!showVideo">
            <div v-if="title">
                <div class="fwbtitle">{{ title }}</div>
                <div class="fwbtitle2">
                    {{ ArticleDetail.columnIdName }}
                    {{ ArticleDetail.time }}
                </div>
            </div>
            
            <div  v-html="newsHtml" class="right">
            
            </div>
        </div>
        

        <!-- 展示视频详情页 -->
        <div style="width: 100%;" v-else>
            <div class="nether">
                <div class="nether_left">
                    <div v-if="videoInfo" class="left_title">
                        <div class="left_title_1">{{videoInfo.title}}</div>
                        <div class="left_title_2">
                            <div>{{ ArticleDetail.columnIdName }}</div>
                            <div>{{videoInfo.time}}</div>
                            <div>{{videoInfo.readNum}}次播放</div>
                        </div>
                    </div>
                    <div class="videoBox">
                        <video id="myVideo" v-if="videoUrl!=''" style="height:100%;width: 100%;" controls>
                            <source :src="videoUrl"
                            type="video/mp4">
                            <source :src="videoUrl"  type="video/ogg">
                            您的浏览器不支持 HTML5 video 标签。
                        </video>
                    </div>
                    
                    <div>
                        <CommentList />
                    </div>
                </div>
                <div class="nether_right">
                    <div class="fontsw">更多推荐</div>
                    <a-divider />
                    <div @click="openDetail(item)" class="nether_right_item" v-for="(item,index) in imglist" :key="index">
                        <div><img class="nether_right_img" :src="item.coverList[0].fileUrl" alt=""></div>
                        <div class="nether_right_text">{{ item.title }}</div>
                        <div class="nether_right_text">{{ item.subTitle }}</div>
                    </div>
                </div>
            </div>
        </div>
    </div>
    </div>
</template>

<script setup>
import { ref,onMounted, watch } from "vue";
import {getMenuDetailByOpen,
getArticleDetailByOpen,
saveReadArticleNum,
relatedArticles} from '@/http/api/common.js' 
import CommentList from './base/comment-list.vue'
//定义路由
import {useRouter,useRoute} from 'vue-router'
const router=useRouter()
const route=useRoute()
//使用pinia缓存数据
import { useCounterStore } from '@/stores/counter'
const counter = useCounterStore()

const ismeunName = ref('')

const newsHtml = ref('请稍后')

const showVideo = ref(false)
const imglist = ref([])

const data = ref(null)

const title = ref('')
const videoInfo = ref('')
const videoUrl = ref('')
watch(()=>counter.menuName,(newVal)=>{
    ismeunName.value = newVal
})
watch(
  () => route.query,
  async(routeQuery) => {
    if (routeQuery?.ismeun == '1') {
        //如果是从导航栏过来的 
        let res = await getMenuDetailByOpen({
            id:route?.query?.muenId
        })
        title.value = ''
        newsHtml.value = res.data.content
    }else{
        //判断打开的是富文本还是视频详情页
        //bodyType 正文类型1=富文本；2=视频；3=xxx 4取counter中数据
        if (route?.query?.bodyType == '4') {
            newsHtml.value = counter.detailsContent
        } else {
            showVideo.value = route?.query?.bodyType == '1'? false:true
                //添加阅读记录
                await saveReadArticleNum({
                    id:route?.query?.id
                })
                //获取文章详情
                let res = await getArticleDetailByOpen({
                    id:route?.query?.id
                })
                
                ArticleDetail.value = res.data
                console.log('videoUrl',videoUrl.value);
                if (!showVideo.value) {
                    // 如果是富文本 获取内容和标题
                    newsHtml.value = res.data.content
                    title.value = res.data.title
                }else{
                    videoInfo.value = res.data
                    //视频
                    videoUrl.value = res.data.videoList[0].fileUrl

                    document.getElementById("myVideo").load();

                }
                
                await getrelatedArticles(res.data.subId)
        }
    }
  }
)
const ArticleDetail = ref({
    time:'',
    columnIdName:''
})
const getrelatedArticles = async(id) =>{
    let res = await relatedArticles({
        "pageNum": 1,
        "pageSize": 3,
        "subId": id
    })
    imglist.value = res.data.rows
}
onMounted(async() => {
    ismeunName.value = counter.menuName
//   console.log(route.query);
  if (route?.query?.ismeun == '1') {
    //如果是从导航栏过来的 
    let res = await getMenuDetailByOpen({
        id:route?.query?.muenId
    })
    newsHtml.value = res.data.content
    return
  }

  //判断打开的是富文本还是视频详情页
  //bodyType 正文类型1=富文本；2=视频；3=xxx 4取counter中数据
    if (route?.query?.bodyType == '4') {
        newsHtml.value = counter.detailsContent
    } else  {
      showVideo.value = route?.query?.bodyType == '1'? false:true
        //添加阅读记录
        await saveReadArticleNum({
            id:route?.query?.id
        })
        //获取文章详情
        let res = await getArticleDetailByOpen({
            id:route?.query?.id
        })
        ArticleDetail.value = res.data
        if (!showVideo.value) {
            // 如果是富文本 获取内容和标题
            newsHtml.value = res.data.content
            title.value = res.data.title
        }else{
            videoInfo.value = res.data
            //视频
            videoUrl.value = res.data.videoList[0].fileUrl

        }
        
        await getrelatedArticles(res.data.subId)
   }
});

function openDetail (e){
    //回到顶部
    const targetElement = document.getElementById('top');
    if (targetElement) {
        targetElement.scrollIntoView();
    }



    //bodyType 正文类型1=富文本；2=视频；3=xxx
    router.push({
        path:'/CompanyNews',
        query:{
            openType:'1',
            bodyType:route?.query?.bodyType,
            id:e.id
        }
    })


}
</script>

<style scoped>
.indexMain{
    width: 1200px;
    margin: 0 auto;
    padding: 20px;
    display: flex;
    background-color: #fff;
    min-height: 300px;
    overflow: auto;
    flex-direction: column;
}
.right{
    margin-top: 20px;
}
/* .right >>> img{
    width: 100%;
    height: auto;
} */
.fwbtitle{
    font-size: 28px;
    text-align: left;
    font-weight: bold;
    /* height: 60px; */
    line-height: 60px;
}
.fwbtitle2{
    font-size: 16px;
    text-align: left;
    color: #999;
    height: 40px;
    line-height: 40px;
}
.nether{
    margin-top: 20px;
    display: flex;
}
.nether_left{
    width: 75%;
    background-color: #fff;
}
.nether_right{
    margin-left: 50px;
    width: 19%;
    background-color: #fff;
}
.nether_right_item{
    display: flex;
    flex-direction: column;
    align-items: center;
    margin: 5px;
}
.nether_right_text{
    cursor: pointer;
}
.nether_right_img{
    width: 100%;
    height: 180px;
}

.videoBox{
    width: 100%;
    height: 450px;
    background-color: #000;
    text-align: center
}

.left_title_1{
    font-size: 24px;
}
.left_title_2{
    display: flex;
    color: #999090;
    width: 300px;
    justify-content: space-between;
    margin: 10px 0;
}

</style>