feat:增加扫码跳转参数

src/components/AudioBox.vue

@@ -4,6 +4,8 @@ import { kill } from "process";
 import { showToast } from "vant";
 import wx from "weixin-js-sdk";
 
+const route = useRoute()
+
 // 播放状态
 const state = ref(false);
 const stateChange = (stateNew: boolean) => {
@@ -28,8 +30,9 @@ const props = defineProps({
 });
 
 const allTime = ref("");
+const durationRef = ref(null);
 
-// 拖拽(鼠标按下)
+// 拖拽进度条
 const handleMousedown = (e: any) => {
   const progressBg = document.getElementById("progressBg");
 
@@ -42,7 +45,6 @@ const handleMousedown = (e: any) => {
     progressBg?.offsetLeft +
     progressBg?.clientWidth;
 
-  console.log(document, e);
   if (e.targetTouches[0].pageX >= moveMax) {
     return;
   } else if (e.targetTouches[0].pageX <= moveMin) {
@@ -54,15 +56,14 @@ const handleMousedown = (e: any) => {
 
 // 更新进度条（拖动进度条）
 const updateProgress2 = (moveX: number) => {
-  console.log(moveX);
   const progressBg = document.getElementById("progressBg");
   const progressBar = document.getElementById("progressBar");
-
   var audio = document.getElementById("music1");
   //当前移动的位置 = 当前移动的位置 / 当前进度条的可视长度    //this.$refs.progress.clientWidth 注意一定要拿总长度 否则会拿进度条已经走过的长度
   let clickProgress = moveX / progressBg!.clientWidth;
   //设置播放的时间 = 总时长 * 当前点击的长度
   audio!.currentTime = audio!.duration * clickProgress;
+
   //设置移动的位置
   progressBar!.style.width = moveX + "px";
 
@@ -75,8 +76,9 @@ const updateProgress2 = (moveX: number) => {
 
 // 更新进度条（播放中）
 const updateProgress = (e: any) => {
-  e.target.autoplay = true
+  e.target.autoplay = true;
   const progressBar = document.getElementById("progressBar");
+
   var value = e.target.currentTime / e.target.duration;
   if (progressBar) {
     progressBar!.style.width = value * 100 + "%";
@@ -86,10 +88,12 @@ const updateProgress = (e: any) => {
   } else {
     state.value = true;
   }
+  durationRef.value =
+    e.target.duration - e.target.currentTime <= 1
+      ? timeToMinute(e.target.duration - e.target.currentTime)
+      : "-" + timeToMinute(e.target.duration - e.target.currentTime);
 };
 
-const durationRef = ref(null);
-
 const formatePlayerDuration = (node: any) => {
   node.onloadedmetadata = (e: any) => {
     const audio = e.target;
@@ -118,20 +122,15 @@ const countAudioTime = async () => {
     await new Promise((resolve) => setTimeout(resolve, 200));
     // 设置随机播放时间，模拟调进度条
     // audio!.currentTime = 10000000 * Math.random();
-    durationRef.value = timeToMinute(audio!.duration);
+    durationRef.value = "-" + timeToMinute(audio!.duration);
   }
   // showToast(audio!.duration);
   // console.log("音频的总时长:", audio.duration);
 };
 
 const getDuration = () => {
-  var audio = document.getElementById("music1");
   countAudioTime();
   // formatePlayerDuration(audio)
-  setTimeout(() => {
-    durationRef.value = timeToMinute(audio!.duration);
-    // showToast(isNaN(audio!.duration), audio!.duration);
-  }, 100);
 };
 const timeToMinute = (times: any) => {
   var t = "";
@@ -184,10 +183,12 @@ const autoPlayFn = () => {
   }
 };
 
+
+
 onMounted(() => {
   getDuration();
   clear();
-  autoPlayFn()
+  autoPlayFn();
 });
 </script>
 
@@ -198,7 +199,7 @@ onMounted(() => {
     @timeupdate="updateProgress"
     controls
     ref="audioRef"
-    style="display:none"
+    style="display: none"
     @canplay="getDuration"
     preload="meta"
   ></audio>
@@ -274,6 +275,7 @@ onMounted(() => {
     display: flex;
     align-items: center;
     justify-content: center;
+    margin-left: 5px;
   }
 }
 </style>

src/data/data.ts

@@ -1,12 +1,12 @@
 const dataList = [
   {
     id: 0,
-    name: "洞庭长歌-岳阳古代文明陈列",
+    name: "洞庭长歌一一岳阳古代文明陈列",
     coverImg: "0.png",
     parts: [
       // 陈列
       {
-        partName: "洞庭长歌-岳阳古代文明陈列",
+        partName: "洞庭长歌一一岳阳古代文明陈列",
         // 段落
         paragraphs: [
           {

src/view/audioDetail/index.vue

@@ -97,8 +97,31 @@ watch(currentP, (newValue: any) => {
 });
 
 onMounted(() => {
+  // 跳转进入(传入段落名和段落编号)
+  const sName = route.query.sName;
+  const pNumb = route.query.pNum;
+  console.log(route.query.sName, route.query.pNum);
+  if (sName != "" && pNumb) {
+    const s = dataList.find((item: any) => {
+      // return item.name == sName;
+      return item.name.indexOf(sName) != -1 || sName.indexOf(item.name) != -1;
+    });
+    // console.log(dataList);
+    // console.log(s);
+    // 遍历所有的part
+    s?.parts.forEach((item: any) => {
+      const res = item.paragraphs.find((p: any) => {
+        return p.paragraphName.indexOf(pNumb) != -1;
+      });
+      if (res) {
+        store.currentParagraph = res;
+        store.currentPart = item;
+        store.currentScene = s;
+        return;
+      }
+    });
+  }
   currentP.value = store.currentParagraph;
-  console.log(currentP.value.contentText);
 });
 </script>