提交后的详情页设计，查看自己提交的音频和视频

package.json

@@ -29,6 +29,7 @@
     "unplugin-auto-import": "^0.16.7",
     "unplugin-vue-components": "^0.25.2",
     "unplugin-vue-macros": "^2.6.2",
+    "video.js": "^8.10.0",
     "vite": "^5.0.8",
     "vite-plugin-top-level-await": "^1.4.1",
     "vue-tsc": "^1.8.25"

src/pages/home/wode/wdsy.vue

@@ -11,7 +11,7 @@
     <div class="p-20px flex-1 overflow-auto">
       <van-list v-model:loading="loading" :finished="finished" finished-text="没有更多数据了" @load="onLoad">
         <div class="grid grid-cols-2 gap-12px">
-          <div v-for="(item, index) in listData" :key="index" @click="handleListen(item.axa_file)">
+          <div v-for="(item, index) in listData" :key="index" @click="handleListen(item)">
             <div v-if="item.axa_img" class="h-110px rounded-14px text-center">
               <img class="max-w-full max-h-full rounded-14px" :src="item.axa_img" alt="图片" />
             </div>
@@ -84,13 +84,14 @@ function reGetList() {
 }
 
 
-const handleListen = (url) => {
+const handleListen = (item) => {
   if (activeType != 0) {
     return false
   }
-  if (url) {
-    let mp3 = new Audio(url);
-    mp3.play();
+  if (item.axa_file) {
+    // let mp3 = new Audio(url);
+    // mp3.play();
+    router.push({ name: 'myVoice-id', params: { id: item.axa_id } })
   } else {
     showFailToast("暂无音频！")
   }

src/pages/home/wode/wdxx.vue

@@ -82,8 +82,8 @@ function reGetList() {
 }
 
 
-function handleClick() {
-
+function handleClick(item) {
+  router.push({ name: 'myImage-id', params: { id: item.axi_id } })
 }
 </script>
 

src/pages/myImage/[id].vue

@@ -0,0 +1,50 @@
+<template>
+  <div>
+    <van-nav-bar
+      :title="detailData.axi_name"
+      left-arrow
+      @click-left="onClickLeft"
+    ></van-nav-bar>
+    <van-loading class="w-full text-center" v-if="loading" color="#FFFFFF" />
+    <div v-else class="flex flex-col justify-center h-80vh">
+        <video-player
+        :key="detailData.axi_rxcj_spwj_v2" :src="https+'/'+(detailData.axi_rxcj_spwj_v2)"
+        :poster="(detailData.axi_img)" class="w-full"
+        />
+    </div>
+  </div>
+</template>
+<script setup lang='ts'>
+import videoPlayer from './comp/video-player.vue'
+import img1 from "~/assets/voice1.png";
+import img2 from "~/assets/voice2.png";
+const props = defineProps<{
+  id: string;
+}>();
+console.log(props.id);
+let https = window.GLOBAL_CONFIG.api
+const router = useRouter();
+function onClickLeft() {
+  router.back();
+}
+
+let detailData = $ref({});
+let loading = $ref(true);
+
+getDetail()
+function getDetail() {
+  request({
+    url: "/aimooc/xnszr_img/detail",
+    data: {
+      axi_id: props.id,
+    },
+  }).then((res) => {
+    if (res.code == "1") {
+      const { one_info } = res.data;
+      detailData = one_info;
+      loading = false;
+    }
+  });
+}
+
+</script>

src/pages/myImage/comp/video-player.vue

@@ -0,0 +1,94 @@
+<script setup lang='ts'>
+import videojs from "video.js";
+import "video.js/dist/video-js.css";
+import { nextTick } from 'vue';
+const props = defineProps({
+  src: {
+    type: String,
+    required: true,
+  },
+  poster: {
+    type: String,
+    required: false,
+  },
+});
+
+const emits = defineEmits(["scoreAtTarget"]);
+
+const videoPlayerRef = shallowRef();
+const player = ref();
+
+function getSourceType(src: string) {
+  const ext = src.split(".").pop();
+  console.log(src);
+
+  // if (ext?.includes('/'))
+  //   return 'application/x-mpegURL'
+  // else
+  if (ext === "m3u8") return "application/x-mpegURL";
+  else return `video/${ext}`;
+}
+
+onMounted(() => {
+  if (!videoPlayerRef.value) return;
+  nextTick(() => {
+    player.value = videojs(
+      videoPlayerRef.value as HTMLVideoElement,
+      {
+        autoplay: false,
+        controls: true,
+        lang: "zh-CN",
+        playbackRates: [0.5, 1, 1.25, 1.5, 2], // 倍速数组
+        controlBar: {
+          children: [
+            "PlayToggle", // 播放
+            "NextBtn", // 下一个
+            "CurrentTimeDisplay", // 当前时间
+            'ProgressControl', // 进度条
+            "DurationDisplay", // 时长
+            "VolumePanel", // 音量
+            "PlaybackRateMenuButton", // 倍速
+            "FullscreenToggle", // 全屏
+          ],
+        },
+        poster: props.poster,
+        sources: [
+          {
+            src: props.src,
+            type: getSourceType(props.src),
+          },
+        ],
+      },
+      () => {
+        console.log("player is ready");
+        const p = player.value;
+        let callbackExecuted = false;
+        p.on("timeupdate", () => {
+          // 计算视频已经播放的百分比
+          const percentagePlayed = p.currentTime() / p.duration();
+
+          if (percentagePlayed >= 0.9 && !callbackExecuted) {
+            // 执行回调函数
+            console.log("达到目标时间");
+            emits("scoreAtTarget");
+            p.off("timeupdate");
+            callbackExecuted = true;
+          }
+        });
+      }
+    );
+  });
+});
+
+onUnmounted(() => {
+  if (player.value) player.value?.dispose?.();
+});
+</script>
+
+<template>
+  <video
+    ref="videoPlayerRef"
+    :poster="props.poster"
+    class="video-js w-100vw h-56.25vw"
+  />
+</template>

src/pages/myVoice/[id].vue

@@ -0,0 +1,129 @@
+<template>
+  <div>
+    <van-nav-bar
+      :title="detailData.axa_name"
+      left-arrow
+      @click-left="onClickLeft"
+    ></van-nav-bar>
+    <van-loading class="w-full text-center" v-if="loading" color="#FFFFFF" />
+    <van-list :finished="finished" finished-text="没有更多了">
+      <van-cell
+        :border="false"
+        center
+        v-for="item in voiceList"
+        :key="item.audioId"
+        :title="item.text"
+      >
+        <template #title>
+          <van-text-ellipsis class="w-250px" :content="item.text" dots="......">
+            <template #action="{ expanded }">
+              {{ expanded }}1111
+              <van-icon color="#1989fa" v-if="expanded" name="arrow" />
+              <van-icon color="#1989fa" v-else name="arrow-up" /> </template
+          ></van-text-ellipsis>
+        </template>
+        <template #right-icon>
+          <img
+            @click="handlePlay(item)"
+            class="w-25px h-25px"
+            :src="!item.play ? img1 : img2"
+            alt=""
+          />
+        </template>
+      </van-cell>
+    </van-list>
+  </div>
+</template>
+<script setup lang='ts'>
+import img1 from "~/assets/voice1.png";
+import img2 from "~/assets/voice2.png";
+const props = defineProps<{
+  id: string;
+}>();
+console.log(props.id);
+
+const router = useRouter();
+function onClickLeft() {
+  router.back();
+}
+
+let voiceList = $ref([]);
+let detailData = $ref({});
+let voiceJson = $ref([]);
+let arr = $ref([]);
+let loading = $ref(true);
+request({
+  url: "/aimooc/xnszr_audio/get_demo_text",
+  data: {},
+}).then((res) => {
+  if (res.code == "1") {
+    arr = res.data.data;
+    getDetail();
+  }
+});
+function getDetail() {
+  request({
+    url: "/aimooc/xnszr_audio/detail",
+    data: {
+      axa_id: props.id,
+    },
+  }).then((res) => {
+    if (res.code == "1") {
+      const { one_info } = res.data;
+      detailData = one_info;
+      voiceJson = one_info.axa_sycj_json_v2
+        ? JSON.parse(one_info.axa_sycj_json_v2)
+        : "";
+      loading = false;
+      if (voiceJson.length > 0) {
+        arr.map((item) => {
+          voiceJson.map((el) => {
+            if (el.audioId == item.audioId) {
+              voiceList.push({
+                audioId: el.audioId,
+                text: item.text,
+                audio: el.audio,
+                play: false,
+              });
+            }
+          });
+        });
+      }
+    }
+  });
+}
+
+let playShow = $ref(true);
+function handlePlay(item) {
+  console.log(item);
+  let mp3 = new Audio(item.audio);
+
+  if (!item.play) {
+    console.log(1111);
+    item.play = true;
+    mp3.play();
+    mp3.addEventListener("ended", () => {
+      item.play = false;
+    });
+  } else {
+    console.log(4444);
+    item.play = false;
+    mp3.pause();
+  }
+}
+</script>
+
+<style lang="scss" scoped>
+:deep(.van-cell) {
+  padding: 25px 37px 10px 26px;
+  .custom-title {
+    display: block;
+    width: 240px;
+    overflow: hidden;
+    text-overflow: ellipsis;
+    white-space: nowrap;
+    font-size: 13px;
+    letter-spacing: 0.01px;
+  }
+}
+</style>

src/pages/syxd/index.vue

@@ -0,0 +1,37 @@
+<template>
+  <div>
+    <van-nav-bar title="声音采集" left-arrow @click-left="onClickLeft"></van-nav-bar>
+    <van-swipe ref="swipeRef" class="my-swipe" :autoplay="false" :duration="100" indicator-color="white" :show-indicators="false" :touchable="true" @change="handleChange">
+      <van-swipe-item @click="handleNext(index)" v-for="(item, index) in imageList" :key="index"
+        ><img class="w-full -mt-50px" :src="item" alt=""
+      /></van-swipe-item>
+    </van-swipe>
+  </div>
+</template>
+<script setup>
+import img1 from "~/assets/1.png";
+import img2 from "~/assets/2.png";
+import img3 from "~/assets/3.png";
+import img4 from "~/assets/4.png";
+import img5 from "~/assets/5.png";
+import img6 from "~/assets/6.png";
+let imageList = $ref([img1, img2, img3, img4, img5, img6]);
+const router = useRouter()
+function onClickLeft() {
+  router.back()
+}
+const swipeRef = ref();
+function handleNext(el){
+ if(el!==5){
+    swipeRef.value?.next();
+ }else{
+    router.push({ name: 'caiji-sy-read' })
+ }
+}
+function handleChange(index){
+ if(index===0){
+    router.push({ name: 'caiji-sy-read' })
+    // swipeRef.value?.swipeTo(5);
+ }
+}
+</script>