PopularScienceVoting-video/src/views/videoDetails.vue

<template>
  
   <div style="background: #06247A;display: flex;flex-direction: column;min-height: 700px;">
    <div>
      <van-image
  height="102"
  fit="cover"
  :src=IMG_PATH
/></div>
      <div style="display:flex;justify-content: end;">
          <div class="ranking">
          <div class="no" v-if="rank<16">NO.{{ rank }}</div>
          <div class="no" v-else>&nbsp;</div>
          <div class="text1">{{ ticket }}</div>
          <div class="text2">票数</div>
      </div>
      </div>
    
      <div class="bg">
          <div class="tiltle">{{ tiltles }}</div>
          <div class="name">
              <div v-for="auther in article_author">
            <div>{{ auther.author_name}}&nbsp;{{ auther.hospital_name }}</div>
            
          </div>
          </div>
          <div id="player" class="contents" ></div>
          <div class="contents" v-html="content"></div>
      </div>
      </div>
      <div class="buttomcla">
          <div style="display: flex; justify-content: center;margin-top: 10px;">  
              <div class="text3" @click="goList()">去首页</div>
          <votButton v-text="'投票'"  @vote-click="vote" ></votButton>
          </div>
      </div>
      <votView :show =show :shows =shows @onchange="handlechange"  @onchanges="handlechange" :ticket=tickets ></votView>
</template>
<script setup >
import { useRouter,useRoute } from 'vue-router';
import { WXSHARE } from '../utils/wxshare-1.6.0';
import {fromwexin}from "@/utils/request"
import {saveurl} from'../utils/authorize.js'
const router = useRouter();
const route = useRoute();
const show = ref(false);
const shows = ref(false);
const rank = ref(1)
const ticket = ref('')
const tickets = ref('')
const tiltles = ref('')
const article_author = ref([]);
const id=ref('')
const video_author_t=ref("")
import {browse,votevideo,getvideo} from '../utils/api.js'
const IMG_PATH = import.meta.env.VITE_IMAGE_URL+'/static/images/1178172634346456.png'
const players = ref([])
const playerJs=ref('//player.polyv.net/script/player.js')
const vid = ref('')
function loadPlayerScript(callback) {
 
  if (!window.polyvPlayer) {console.log("首次加载视频信息")
    const myScript = document.createElement('script');
    myScript.setAttribute('src', playerJs.value);
    myScript.onload = callback;
    document.body.appendChild(myScript);
  }else{
   
    callback()
  }
}
function loadPlayer() {
   const polyvPlayer = window.polyvPlayer;
        const player = polyvPlayer({
        wrap: '#player',
        width: "100%",
        height: 210,
        forceH5:true,
        height:'',
        df:3,
        vid: vid.value ,
      });
        players.value.push(player)
      }

     
onBeforeMount(()=>{

  //判断是否是IOS设备
 // IOS分享时的页面是首页，也就是进入页而不是当前页。所有可以采用刷新当前页，让进入页的链接改成当前页，再在页面卸载时删除缓存数据。
//  let agent = navigator.userAgent
//  alert('agent'+agent)
//  let isIOS = !!agent.match(/\(i[^;]+;( U;)? CPU.+Mac OS X/) // ios终端
//  alert('isIOS'+isIOS)

//  alert('11'+sessionStorage.getItem('isShareState'))
//  if(isIOS && !sessionStorage.getItem('isShareState')){
//   alert('777')
//    sessionStorage.setItem('isShareState',true)
//    window.location.reload();
//  }
//  else
//  {
//   alert('666')
//  }

        })

onMounted(()=>{
  console.log("ee",route.query.id)
  id.value=route.query.id
  // video_author.value=route.query.video_author
  initData(id.value)
  updatBrowse()

  saveurl('/videoDetails',route.query.id,route.query.name)
})
onUnmounted(()=>{
  sessionStorage.removeItem('isShareState');
  console.log("销毁播放器")
  if(players.value.length > 0){
    players.value.forEach((item)=>{
      item.destroy();
    })
  }
})

const content=ref('')
function goList(){
//   if(window.location.href.includes("fromwx"))
// {
  
//   router.push({ path: '/voteList'});
// }
// else
// {
//   window.history.back();
// }
router.push({ path: '/voteList'});
}
function handlechange(){
show.value = false;
shows.value = false;
}
function vote(eventData){
  if(eventData=='1')
 {
 
  votevideo(id.value).then((data) => {
    console.log("votearticle",data)
    if('200'==data.code)
    {
      shows.value=true;
     
    }
    else
    {
      showToast(data.message);
    }
   
  });  
 }
 else
 {
  tickets.value = eventData;
  show.value = true;
 }



}
function initData(id)
{
  
  getvideo(id).then((data) => {
    const Share_PATH = import.meta.env.VITE_SHARE_URL+'videoDetails?id='+route.query.id+'&name='+ encodeURIComponent(route.query.name)
    // +'&author='+ encodeURIComponent(route.query.author);
 
    console.log("getvideo",data)
    rank.value = data.data.rank
    ticket.value = data.data.vote_num
    tiltles.value = data.data.video_title
    content.value = data.data.video_content
    vid.value = data.data.video_no
console.log(vid.value)
    article_author.value.push(...data.data.video_author)
         video_author_t.value=""
        if(article_author.value!=null&&article_author.value!='')
      {
        article_author.value.forEach((auther)=>{
          video_author_t.value=video_author_t.value+ auther.author_name+"、"
    })
    video_author_t.value=video_author_t.value.slice(0, -1);
      }
     
    WXSHARE("投我1票 | "+video_author_t.value+"："+route.query.name, '2025第十届肝胆英雄榜最具影响力视频投票开始啦！', Share_PATH,"");
  }).then(()=>{
    console.log("加载视频信息")
    loadPlayerScript(loadPlayer);
  });  

}
function updatBrowse()
{
  browse().then((data) => {
    console.log("browse",data)


  });
}
</script>
<style scoped>
.bg{
  margin-top: -100px;

  margin-left: 16px;
  margin-right: 16px;
  padding: 16px 16px 90px 16px;
  min-height: 600px;
background: #FFFFFF;
border-radius: 12px 12px 0px 0px;
}
.ranking{
  background: url(../assets/rank.png) no-repeat;
  background-size: 100% 100%;
  width: 80px;
  height: 116px;
  position: relative;
  top: 8px;
  margin-right: 32px;

}
.no{
margin-top: 5px;
font-family: AlibabaPuHuiTiH;
font-size: 24px;
color: #7CEEFF;
line-height: 33px;
text-shadow: inset 1px 1px 0px rgba(255,255,255,0.5);
text-align: center;
font-style: normal;
}
.text1{

font-family: AlibabaPuHuiTiH;
font-size: 24px;
color: #FFFFFF;
line-height: 33px;
text-shadow: 0px 2px 2px #00A9E6;
text-align: center;
font-style: normal;
}
.text2{

font-family: PingFangSC, PingFang SC;
font-weight: 400;
font-size: 16px;
color: #FFFFFF;
line-height: 22px;
text-shadow: 0px 2px 2px #00A9E6;
text-align: center;
font-style: normal;
}
.tiltle{
margin-right: 120px;
font-family: AlimamaShuHeiTi, AlimamaShuHeiTi;
font-weight: bold;
font-size: 20px;
color: #06247A;
line-height: 24px;
text-align: left;
font-style: normal;
}
.name{
  margin-top: 8px;
  margin-right: 120px;
font-family: AlibabaPuHuiTiR;
font-size: 14px;
color: #06247A;
line-height: 20px;
text-align: left;
font-style: normal;
white-space: pre-wrap;
}
.contents{
margin-top: 50px;
font-family: PingFangSC, PingFang SC;
font-weight: 400;
font-size: 14px;
color: #0E3564;
line-height: 22px;
text-align: left;
font-style: normal;
word-break:break-all;
}
.buttomcla{
position: fixed;
bottom: 0;
height: 76px;
left: 16px;
right:16px;
background: #FFFFFF;
box-shadow: 0px -2px 4px rgba(0, 0, 0, 0.1);

}
.text3{
  width: 98px;
height: 56px;
background: #FFFFFF;
border-radius: 8px;
border: 1px solid #06247A;
font-family: PingFangSC, PingFang SC;
font-weight: 600;
font-size: 16px;
color: #06247A;
line-height: 56px;
margin-right: 8px;
text-align: center;
font-style: normal;
}
.contents :deep() img{
  width:100%!important
}


.contents:deep() table{
  width:100%;
}
</style>