数字定制管理页面完成

src/pages/home/szrdzgl/index.vue

@@ -179,6 +179,20 @@ function del(type, row) {
     .catch(() => { });
 
 }
+const router = useRouter()
+function voiceDetail(row) {
+  router.push({
+    path: '/home/szrdzgl/voiceDetail', query: {
+      axa_id: row.axa_id
+    }
+  })
+}
+let imageVisableDialog = $ref(false)
+let videoUrl = $ref('')
+function viewImageDetail(row) {
+  videoUrl = row.axi_rxcj_spwj_v2
+  imageVisableDialog = true
+}
 </script>
 
 <template>
@@ -226,7 +240,8 @@ function del(type, row) {
           <el-table-column prop="opeation" label="操作">
             <template #default="scope">
               <div style="display: flex;">
-                <img src="../../../assets/szrdzgl-detail.png" style="cursor: pointer;" />
+                <img src="../../../assets/szrdzgl-detail.png" style="cursor: pointer;"
+                  @click="voiceDetail(scope.row)" />
                 <img src="../../../assets/szrdzgl-audit.png" style="cursor: pointer;margin-left: 10px;"
                   @click="openAuditDialog('voice', scope.row)" />
                 <img src="../../../assets/szrdzgl-delete.png" style="cursor: pointer;margin-left: 10px;"
@@ -261,7 +276,8 @@ function del(type, row) {
           <el-table-column prop="opeation" label="操作">
             <template #default="scope">
               <div style="display: flex;">
-                <img src="../../../assets/szrdzgl-detail.png" style="cursor: pointer;" />
+                <img src="../../../assets/szrdzgl-detail.png" style="cursor: pointer;"
+                  @click="viewImageDetail(scope.row)" />
                 <img src="../../../assets/szrdzgl-audit.png" style="cursor: pointer;margin-left: 10px;"
                   @click="openAuditDialog('image', scope.row)" />
                 <img src="../../../assets/szrdzgl-delete.png" style="cursor: pointer;margin-left: 10px;"
@@ -293,6 +309,9 @@ function del(type, row) {
         <el-button type="primary" class="w-full" size="large" @click="checkSubmit(ruleFormRef)">确认</el-button>
       </template>
     </el-dialog>
+    <el-dialog v-model="imageVisableDialog" width="1000px" style="height: 600px;">
+      <video v-if="imageVisableDialog" :src="videoUrl" controls style="width: 100%;height: 500px;"></video>
+    </el-dialog>
   </div>
 </template>
 

src/pages/home/szrdzgl/voiceDetail/index.vue

@@ -0,0 +1,93 @@
+<script setup>
+import { ArrowLeftBold } from '@element-plus/icons-vue'
+const router = useRouter()
+let axa_id = router.currentRoute.value.query.axa_id
+let voiceList = $ref([])
+let one_info = $ref({})
+let loading = $ref(true)
+request({ url: '/aimooc/xnszr_audio/get_demo_text' }).then(res => {
+  let demoList = res.data.data
+  request({
+    url: '/aimooc/xnszr_audio/detail', data: {
+      axa_id: axa_id
+    }
+  }).then(res => {
+    one_info = res.data.one_info
+    let audioList = res.data.one_info.axa_sycj_json_v2 ? JSON.parse(res.data.one_info.axa_sycj_json_v2) : []
+    if (audioList.length) {
+      for (let item of audioList) {
+        for (let demo of demoList) {
+          if (demo.audioId == item.audioId) {
+            demo.demoAudio = item.audio
+            break
+          }
+        }
+      }
+      voiceList = demoList
+    } else {
+      voiceList = []
+    }
+    loading = false
+  })
+})
+function handleBack() {
+  router.back()
+}
+let audio = null
+
+onMounted(() => {
+  audio = document.getElementById('myAudio');
+})
+
+function playAudio(src) {
+  // 如果音频已经在播放，则停止并重置
+  if (audio.paused === false) {
+    audio.pause();
+    audio.currentTime = 0;
+  }
+
+  // 设置音频源并播放
+  audio.src = src;
+  audio.play();
+}
+</script>
+<template>
+  <div class="h-full flex flex-col">
+    <el-scrollbar view-class="h-full flex flex-col">
+      <div class="my-15px flex items-center justify-between">
+        <div class="flex space-x-6">
+          <el-icon class="cursor-pointer" size="29" @click="handleBack">
+            <ArrowLeftBold />
+          </el-icon>
+          <h3 class="text-24px">
+            {{ one_info.axa_name }}
+          </h3>
+        </div>
+        <div class="flex items-center">
+
+        </div>
+      </div>
+      <div>
+        <el-table v-loading="loading" :data="voiceList" size="large">
+          <el-table-column prop="text" label="声音名称" />
+          <el-table-column label="播放">
+            <template #default="scope">
+              <img src="../../../../assets/szrdzgl-play.png" style="cursor: pointer;"
+                @click="playAudio(scope.row.demoAudio)" />
+            </template>
+          </el-table-column>
+        </el-table>
+      </div>
+    </el-scrollbar>
+  </div>
+  <audio id="myAudio" style="display: none;" preload="auto"></audio>
+</template>
+<route lang="json">{
+  "meta": {
+    "hidden": true
+  }
+}</route>
+
+<style lang="scss" scoped>
+@use "~/styles/page.scss";
+</style>