283 lines
8.8 KiB
Vue
283 lines
8.8 KiB
Vue
<template>
|
|
<div class="content" v-if="activeDate">
|
|
<div style="font-size: 20px;color: #333333;font-weight: 600;text-align: left">{{ activeDate.new_name }}</div>
|
|
<div style="text-align: center;font-size: 17px;margin-top: 10px;">{{ activeDate.subtitle }}</div>
|
|
<div class="em">{{ activeDate.reporter }}</div>
|
|
<!-- <div style="margin: 10px 0px;" @click="openVideo()" v-if="activeDate.video != '' && activeDate.video != null">
|
|
<span style="color: #415CA2;">#视频链接</span>
|
|
</div> -->
|
|
<!-- <div style="padding: 10px 0px;" v-if="activeDate.video != '' && activeDate.video != null">
|
|
<video :src="activeDate.video" controls style="width: 100%;max-height: 300px;margin: 0px auto;"></video>
|
|
</div> -->
|
|
<div style="margin-top: 15px;" v-if="activeDate.video != '' && activeDate.video != null">
|
|
<img src="/public/static/top_video.png" @click="showModal = true" style="width: 100%;">
|
|
</div>
|
|
<div id="imgBox" :class="'font' + fontSize" style="line-height: 30px;" v-html="activeDate.content"></div>
|
|
<!-- <div style="margin: 10px 0px;" @click="openVideo()" v-if="activeDate.video != '' && activeDate.video != null">
|
|
<span style="color: #415CA2;">#视频链接</span>
|
|
</div> -->
|
|
|
|
<div id="PageBtn">
|
|
<div style="position: fixed;bottom: 290px;right: 20px;z-index: 100;">
|
|
<div id="read-btn" @click="readMp3()">
|
|
<img v-if="!isPlay" src="/public/static/voice_pause.png" style="width: 40px;height: 40px;">
|
|
<img v-if="isPlay" src="/public/static/voice_play.png" style="width: 40px;height: 40px;">
|
|
</div>
|
|
</div>
|
|
<div v-if="isPlay" style="position: fixed;bottom: 40px;left: 10px;">
|
|
<img src="/public/static/bf.gif" style="width: 80px;height: 100%;">
|
|
</div>
|
|
<div class="MenuBox">
|
|
<a id="Haibao_share" @click="copy()" href="javascript:(-1);"
|
|
style="background-image: url(/h5/public/static/share.png);background-position: center;background-repeat: repeat;"></a>
|
|
<a @click.prevent="openUrl()" href="javascript:(-1);"><img src="/public/static/home.png" alt=""
|
|
id="Menu_home"></a>
|
|
<a @click.prevent="addFontSize('da')" id="Menu_larger" href="javascript:(-1);"
|
|
style="background-image: url(/h5/public/static/font-larger.png);background-position: center;background-repeat: repeat;"></a>
|
|
<a @click="addFontSize('xiao')" id="Menu_smaller" href="javascript:(-1);"
|
|
style="background-image: url(/h5/public/static/font-smaller.png);background-position: center;background-repeat: repeat;"></a>
|
|
<!-- <a id="read-btn" @click="readMp3()" href="javascript:(-1);">
|
|
<img v-if="!isPlay" src="/public/static/voice_pause.png" alt="">
|
|
<img v-if="isPlay" src="/public/static/voice_play.png" alt="">
|
|
</a> -->
|
|
<a @click.prevent="openTop()"><img src="/public/static/goTop.png" alt="" id="Menu_Top"></a>
|
|
</div>
|
|
</div>
|
|
<div id="fullPage">
|
|
<canvas id="canvas"></canvas>
|
|
</div>
|
|
<div id="shareList">
|
|
<audio ref="audioPlayer" @ended="readEnd" controls :src="'https://jinrigushitwo.gushitv.com/' + activeDate.mp_url"
|
|
@canplaythrough="onAudioLoaded" style='width:100%;display:none;'></audio>
|
|
<!-- <audio ref="audioPlayer" @ended="readEnd" controls-->
|
|
<!-- src="https://jinrigushitwo.gushitv.com/public/uploads/mp/1214.mp3"-->
|
|
<!-- @canplaythrough="onAudioLoaded"-->
|
|
<!-- style='width:100%;display:none;'></audio>-->
|
|
</div>
|
|
<n-modal v-model:show="showModal" :mask-closable="true">
|
|
<video :src="activeDate.video" autoplay controls style="width: 90%;max-height: 300px;margin: 0px auto;"></video>
|
|
</n-modal>
|
|
</div>
|
|
</template>
|
|
<script setup>
|
|
import { ref, onMounted, nextTick } from 'vue';
|
|
import { useRoute } from 'vue-router';
|
|
import router from "@/router/routes";
|
|
import axios from "axios";
|
|
import $ from 'jquery';
|
|
|
|
const showModal = ref(false);
|
|
|
|
const route = useRoute();
|
|
const info = ref({});
|
|
const fontSize = ref(14);
|
|
const activeDate = ref();
|
|
onMounted(() => {
|
|
console.log(route.query);
|
|
getList(route.query);
|
|
})
|
|
const copy = () => {
|
|
let url = window.location.href; // 当前页面链接
|
|
fallbackCopyTextToClipboard(url);
|
|
alert('链接已复制到剪贴板');
|
|
}
|
|
const audioPlayer = ref(null);
|
|
const isPlay = ref(false);
|
|
const readMp3 = () => {
|
|
if (audioPlayer.value.error != null) {
|
|
alert('音频生成中，请稍候再试！');
|
|
return;
|
|
}
|
|
if (isPlay.value) {
|
|
audioPlayer.value.pause();
|
|
} else {
|
|
audioPlayer.value.play();
|
|
}
|
|
isPlay.value = !isPlay.value;
|
|
}
|
|
const onAudioLoaded = () => {
|
|
console.log('Audio has been loaded and is ready to play.');
|
|
}
|
|
const readEnd = () => {
|
|
isPlay.value = false;
|
|
}
|
|
const fallbackCopyTextToClipboard = (text) => {
|
|
const textArea = document.createElement('textarea');
|
|
textArea.value = text;
|
|
|
|
// Avoid scrolling to bottom
|
|
textArea.style.top = '0';
|
|
textArea.style.left = '0';
|
|
textArea.style.position = 'fixed';
|
|
|
|
document.body.appendChild(textArea);
|
|
textArea.focus();
|
|
textArea.select();
|
|
|
|
try {
|
|
const successful = document.execCommand('copy');
|
|
const msg = successful ? 'successful' : 'unsuccessful';
|
|
console.log('Fallback: Copying text command was ' + msg);
|
|
} catch (err) {
|
|
console.error('Fallback: Oops, unable to copy', err);
|
|
}
|
|
|
|
document.body.removeChild(textArea);
|
|
}
|
|
const getList = (item) => {
|
|
axios.post("https://jinrigushitwo.gushitv.com/api/h5/news/find", { id: item.id })
|
|
.then(response => {
|
|
// 使用导入的数据
|
|
//activeDate.value = response.data;
|
|
var info = response.data.data;
|
|
info.content = info.content.replace(/href="\/dist\//g, 'href="/h5/');
|
|
//console.log(item.time);
|
|
//const targetData = response.data.list.find(data => data.numberDate == item.time);
|
|
activeDate.value = info;
|
|
//console.log(activeDate.value)
|
|
loadScripts([
|
|
'/h5/public/static/js/Phototoys.js',
|
|
'/h5/public/static/js/PhototoysDsg.js',
|
|
]).then(() => {
|
|
});
|
|
})
|
|
.catch(error => console.error('Error loading the JSON file:', error))
|
|
}
|
|
const loadScripts = (urls) => {
|
|
const loadScript = (url) => {
|
|
return new Promise((resolve) => {
|
|
const script = document.createElement('script');
|
|
script.src = url;
|
|
script.type = 'text/javascript';
|
|
script.onload = resolve; // 确保脚本加载完成后再继续
|
|
document.head.appendChild(script);
|
|
});
|
|
};
|
|
// 依次加载所有脚本
|
|
// 依次加载所有脚本并返回一个 Promise
|
|
return urls.reduce((promise, url) => {
|
|
return promise.then(() => loadScript(url));
|
|
}, Promise.resolve());
|
|
}
|
|
const removeScripts = () => {
|
|
const scripts = document.querySelectorAll('script[src^="/h5/public/static/js/"]');
|
|
const styles = document.querySelectorAll('style');
|
|
styles.forEach(styles => styles.remove());
|
|
scripts.forEach(script => script.remove());
|
|
};
|
|
const openUrl = () => {
|
|
// 关闭当前页面
|
|
const year = sessionStorage.getItem('year');
|
|
const month = sessionStorage.getItem('month');
|
|
const day = sessionStorage.getItem('day');
|
|
sessionStorage.setItem('isShow', 1);
|
|
//router.push('/');
|
|
if (window.history && window.history.length === 1) {
|
|
window.location.href = 'https://jinrigushitwo.gushitv.com/h5/#/'; // 直接跳转
|
|
} else {
|
|
setTimeout(() => {
|
|
window.history.back();
|
|
}, 50)
|
|
}
|
|
|
|
// if (year && month && day) {
|
|
// window.history.back();
|
|
// } else {
|
|
// router.push('/').then(() => {
|
|
// window.location.reload();
|
|
// });
|
|
// }
|
|
}
|
|
const addFontSize = (type) => {
|
|
if (type == 'da') {
|
|
if (fontSize.value == 29) {
|
|
return;
|
|
}
|
|
fontSize.value += 3;
|
|
} else if (type == 'xiao') {
|
|
if (fontSize.value == 14) {
|
|
return;
|
|
}
|
|
fontSize.value -= 3;
|
|
} else {
|
|
fontSize.value = 14;
|
|
}
|
|
}
|
|
const openTop = () => {
|
|
window.scrollTo({
|
|
top: 0,
|
|
behavior: 'smooth' // 平滑滚动
|
|
});
|
|
}
|
|
const openVideo = () => {
|
|
window.open(activeDate.value.jump_link);
|
|
}
|
|
</script>
|
|
<style scoped src="/public/static/css/content.css"></style>
|
|
<style scoped>
|
|
.content {
|
|
height: 100%;
|
|
padding: 10px 20px;
|
|
overflow-y: auto;
|
|
background-color: #ffffff;
|
|
}
|
|
|
|
.content .em {
|
|
font-size: 14px;
|
|
color: #999999;
|
|
text-align: center;
|
|
margin-top: 10px;
|
|
}
|
|
|
|
.MenuBox {
|
|
position: fixed;
|
|
bottom: 0;
|
|
right: 20px;
|
|
z-index: 99;
|
|
/*图片轮播新增样式*/
|
|
}
|
|
|
|
.MenuBox img {
|
|
display: block;
|
|
width: 40px;
|
|
height: 40px;
|
|
margin-bottom: 16px;
|
|
cursor: pointer;
|
|
border-radius: 50%;
|
|
}
|
|
|
|
.MenuBox a {
|
|
display: block;
|
|
width: 40px;
|
|
height: 40px;
|
|
margin-bottom: 16px;
|
|
cursor: pointer;
|
|
border-radius: 50%;
|
|
background-size: cover;
|
|
}
|
|
|
|
.font14 {
|
|
font-size: 14px !important;
|
|
}
|
|
|
|
.font17 {
|
|
font-size: 17px !important;
|
|
}
|
|
|
|
.font20 {
|
|
font-size: 20px !important;
|
|
}
|
|
|
|
.font23 {
|
|
font-size: 23px !important;
|
|
}
|
|
|
|
.font26 {
|
|
font-size: 26px !important;
|
|
}
|
|
|
|
.font29 {
|
|
font-size: 29px !important;
|
|
}
|
|
</style>
|