gushidianzibao-h5/src/view/home/info.vue

<template>
  <div class="content" v-if="activeDate">
    <div style="font-size: 20px;color: #333333;font-weight: 600">{{ activeDate.new_name }}</div>
    <div class="em">{{ activeDate.reporter }}</div>
    <div :class="'font' + fontSize" style="line-height: 30px;" v-html="activeDate.content"></div>
    <div id="PageBtn">
      <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="shareList">
      <audio ref="audioPlayer" @ended="readEnd" controls
             :src="'http://csdzb.hschool.com.cn/'+activeDate.mp_url"
             @canplaythrough="onAudioLoaded"
             style='width:100%;display:none;'></audio>
    </div>
  </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 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 (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("http://csdzb.hschool.com.cn/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)
      })
      .catch(error => console.error('Error loading the JSON file:', error))
}
const openUrl = () => {
  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' // 平滑滚动
  });
}
</script>
<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>