修改音频播放功能

src/views/agent/checkOrderList.vue

@@ -5,15 +5,16 @@
             <span class="pagetitle">{{ pageTitle }}</span>
             <GuipButton size="table" type="ignore" @click="showPddSetting">拼多多发货</GuipButton>
 
-            <GuipDialog :dialogVisible="dialogVisiblePddSetting" title="" :confirmText="pddSettingConfirmText" cancelText="取消"
+            <GuipDialog :dialogVisible="dialogVisiblePddSetting" title="" :confirmText="pddSettingConfirmText"
-                :show-close-button="false" :show-cancel-button="true" @confirm="pddSetting" @cancel="closePddSetting"
+                cancelText="取消" :show-close-button="false" :show-cancel-button="true" @confirm="pddSetting"
-                @close="closePddSetting" @dialogVisibleChange="dialogVisibleChange">
+                @cancel="closePddSetting" @close="closePddSetting" @dialogVisibleChange="dialogVisibleChange">
                 <!-- 自定义内容 -->
                 <el-form>
                     <el-tabs v-model="pddSettingActiveName" @tab-click="handleClick">
                         <el-tab-pane label="拼多多手工发货" name="1">
                             <PromptText text='导出待发货订单excel，到拼多多导入该excel进行发货' :type="1" />
-                            <GuipSelect class="mt-16" label="选择站点" v-model="pddExportUid" @change="selectPddExportSite()" :options="searchSiteList" valueKey="uid" labelKey="name"
+                            <GuipSelect class="mt-16" label="选择站点" v-model="pddExportUid"
+                                @change="selectPddExportSite()" :options="searchSiteList" valueKey="uid" labelKey="name"
                                 :extraItem="{ label: '请选择站点', value: '0' }" placeholder="" clearable width="300px" />
 
                         </el-tab-pane>
@@ -25,10 +26,13 @@
                                 </div>
                                 <div class="mt-16">
                                     <div>
-                                        <el-checkbox checked disabled><span class="fontblue">允许未发货的有效订单提交检测（不可取消）</span></el-checkbox>
+                                        <el-checkbox checked disabled><span
+                                                class="fontblue">允许未发货的有效订单提交检测（不可取消）</span></el-checkbox>
                                     </div>
                                     <div class="mt-16">
-                                        <el-checkbox v-model="selectAllowPddDeliveredDelayedSubmit">允许已发货<el-input v-model="pddDeliveredDelayedSubmitHour" style="width:50px;height:30px"></el-input>小时订单提交论文检测</el-checkbox>
+                                        <el-checkbox v-model="selectAllowPddDeliveredDelayedSubmit">允许已发货<el-input
+                                                v-model="pddDeliveredDelayedSubmitHour"
+                                                style="width:50px;height:30px"></el-input>小时订单提交论文检测</el-checkbox>
                                     </div>
                                 </div>
                             </div>
@@ -54,14 +58,16 @@
                         start-placeholder="开始日期" end-placeholder="结束日期" format="yyyy-MM-dd" value-format="yyyy-MM-dd">
                     </el-date-picker>
 
-                    <GuipSelect class="mr-32" label="服务类型" v-model="searchType" @change="changeSearchType()" :options="searchTypeList" 
+                    <GuipSelect class="mr-32" label="服务类型" v-model="searchType" @change="changeSearchType()"
-                        :extraItem="{label:'全部',value:'0'}" placeholder="" clearable />
+                        :options="searchTypeList" :extraItem="{ label: '全部', value: '0' }" placeholder="" clearable />
 
-                    <GuipSelect class="mr-32" label="站点" v-model="searchUid" @change="changeSearchSite()" :options="searchSiteList" valueKey="uid" labelKey="name"
+                    <GuipSelect class="mr-32" label="站点" v-model="searchUid" @change="changeSearchSite()"
-                        :extraItem="{label:'全部',value:'0'}" placeholder="" clearable />
+                        :options="searchSiteList" valueKey="uid" labelKey="name" :extraItem="{ label: '全部', value: '0' }"
+                        placeholder="" clearable />
 
-                    <GuipSelect class="mr-32" width="100px" label="报告状态" v-model="searchStatus" @change="changeSearchStatus()"
+                    <GuipSelect class="mr-32" width="100px" label="报告状态" v-model="searchStatus"
-                        :options="searchStatusList" :extraItem="{ label: '全部', value: 'all' }"  placeholder="不限" clearable />
+                        @change="changeSearchStatus()" :options="searchStatusList"
+                        :extraItem="{ label: '全部', value: 'all' }" placeholder="不限" clearable />
                 </div>
             </el-form>
         </div>
@@ -73,10 +79,12 @@
                     <div class="flex" style="justify-content: space-between;">
                         <div class="flex">
                             <h3 class="checktitle mr-24">{{ pageTitle }}列表</h3>
-                            <GuipSelect class="mr-32" label="报告格式" v-model="reportNameFormat" :options="donwReportNameFormat"
+                            <GuipSelect class="mr-32" label="报告格式" v-model="reportNameFormat"
-                                @change="changeReportNameFormat()" clearable v-if="pageTab=='check'" />
+                                :options="donwReportNameFormat" @change="changeReportNameFormat()" clearable
+                                v-if="pageTab == 'check'" />
                         </div>
-                        <GuipInput label="订单号" v-model="searchTid" @blur="changeSearchTid()" placeholder="请输入订单号" ref="GuipInput" />
+                        <GuipInput label="订单号" v-model="searchTid" @blur="changeSearchTid()" placeholder="请输入订单号"
+                            ref="GuipInput" />
 
                     </div>
 
@@ -237,6 +245,9 @@
                 <!-- 自定义内容 -->
                 <p class="mx-24 mt12 flex">是否删除 ID:{{ delReportId }} 报告？删除后无法恢复</p>
             </GuipDialog>
+            <audio id="notice-sound" ref="audioPlayer" :src="audioSrc" hidden v-if="!isIE"></audio>
+            <!-- IE浏览器使用的embed元素 -->
+            <embed v-if="isIE" name="embedPlay" :src="audioSrc" autostart="true" hidden="true" loop="false" />
         </div>
     </div>
 </template>
@@ -308,6 +319,9 @@ export default {
 
             intervalId: null,
 
+            isMuted: true,
+            audioSrc: require('@/assets/msg.wav'), // 音频文件路径
+            isIE: false // 是否是IE浏览器
         }
     },
     mounted() {
@@ -315,14 +329,58 @@ export default {
         this.getOrderList()
         this.getConfig()
         this.startTimer();
+
+        this.checkBrowser();
+        if (!this.isIE) {
+            this.$refs.audioPlayer.load(); // 预加载音频
+        }
+    },
+    beforeUpdate() {
     },
     beforeDestroy() {
         this.stopTimer();
     },
     methods: {
+        unmute() {
+            this.isMuted = false;
+            if (this.$refs.audioPlayer) {
+                this.$refs.audioPlayer.muted = false;
+            }
+        },
+        checkBrowser() {
+            const userAgent = window.navigator.userAgent.toLowerCase();
+            this.isIE = userAgent.indexOf("ie") >= 0 || userAgent.indexOf("trident") >= 0;
+        },
+
+        // 播放声音
+        playSound() {
+            this.$nextTick(() => {
+                if (this.isIE) {
+                    // IE浏览器使用embed播放
+                    console.log('ienotice');
+                } else {
+                    // 现代浏览器使用audio播放
+                    try {
+                        const audio = this.$refs.audioPlayer;
+                        this.unmute()
+                        if (audio) {
+                            audio.play().then(() => {
+                                console.log('notice');
+                            }).catch(e => {
+                                console.error('音频播放失败:', e);
+                            });
+                        }
+                    } catch (e) {
+                        console.error('播放出错:', e);
+                    }
+                }
+            });
+        },
         startTimer() {
             this.intervalId = setInterval(() => {
                 this.getOrderList()
+                // // 测试重复播放 -- is okk
+                // this.playSound()
                 // 每隔5秒执行的代码
                 console.log('这个操作每隔5秒执行一次');
             }, 10000);
@@ -332,11 +390,6 @@ export default {
                 clearInterval(this.intervalId);
             }
         },
-        playSound() {
-            //const audio = new Audio('/assets/msg.wav'); // 确保路径正确
-            //audio.play();
-            console.log('播放声音');
-        },
         getFilterParams() {
             var stime = '';
             var etime = '';
@@ -438,7 +491,6 @@ export default {
                             // this.end_page = 1;
                         }
                         // console.log(this.isHasNextPage, 'isHasNextPage')
-                        
                     })
                 }).catch(error => {
                     console.error(error, 'error')
@@ -750,6 +802,7 @@ export default {
 .mt-16 {
     margin-top: 16px;
 }
+
 .mb-10 {
     margin-bottom: 10px;
 }