feat 订单音频自动播放

src/App.vue

@@ -1,22 +1,61 @@
 <template>
   <div id="app">
-    <router-view/>
+    <router-view />
+    <!-- 语音播报 -->
+    <iframe id="iframeDom" allow="autoplay" style="display:none" src="../static/audio/alone.mp3"></iframe>
+    <audio class="audio" ref="audio" :src="url" controls autoplay hidden>
+    </audio>
   </div>
 </template>
 
 <script>
+import { getSoundMsg } from "./api/setting.js";
+import audio1 from "../static/audio/new-order.mp3";
+import audio2 from "../static/audio/alone.mp3";
 export default {
-  name: 'App'
-}
+  name: "App",
+  data() {
+    return {
+      url: "../static/audio/test.mp3",
+      audioList: [audio1, audio2],
+    };
+  },
+  mounted() {
+    console.log(this.audioList);
+    setInterval(() => {
+      this.getSoundMsg();
+    }, 5000);
+  },
+  methods: {
+    getSoundMsg() {
+      getSoundMsg().then((res) => {
+        if (res.code === 200) {
+          if (res.data) {
+            let name = res.data.slice(0, res.data.indexOf("."));
+            let url = this.audioList.filter((v) => {
+              return v.includes(name);
+            })[0];
+            this.url = url + "?t=" + new Date().getTime();
+          }
+        } else {
+          this.$message({
+            type: "error",
+            message: res.msg,
+          });
+        }
+      });
+    },
+  },
+};
 </script>
 
 <style>
-  body{
-    margin: 0;
-    padding: 0;
-  }
+body {
+  margin: 0;
+  padding: 0;
+}
 #app {
-  font-family: 'Avenir', Helvetica, Arial, sans-serif;
+  font-family: "Avenir", Helvetica, Arial, sans-serif;
   -webkit-font-smoothing: antialiased;
   -moz-osx-font-smoothing: grayscale;
   margin: 0;

src/api/setting.js

@@ -0,0 +1,5 @@
+import { get, post, postJson } from './http.js';
+
+export const getSoundMsg = (params) => {
+  return get('app/message/getSoundMsg', params)
+}

src/components/Home.vue

@@ -39,8 +39,6 @@ import bus from "../common/bus.js";
 import sendOrderPopup from "./orderComponents/sendOrderPopup.vue";
 import OrderList from "./orderComponents/orderList.vue";
 import { getOrderList, getOrderMarker, getRefreshOrder } from "../api/order.js";
-import qs from "qs";
-import { setInterval } from "timers";
 export default {
   data() {
     return {
@@ -198,7 +196,7 @@ export default {
           this.params.pageNum = res.data.pageNum;
           res.data.data.forEach((element) => {
             element.takeTimeTxt = this.$tool.timeago(
-              new Date(element.takeTime).getTime()
+              new Date(element.sendTime).getTime()
             );
             if (_this.tabNum == 1) {
               if (element.exceptTime) {

src/components/orderComponents/orderDetail.vue

@@ -56,7 +56,7 @@
       <div class="detail_title2">订单金额</div>
       <div class="info2 info4">
         <div class="title">商品金额：</div>
-        <div class="cont">¥{{orderDetail.payAmount}}</div>
+        <div class="cont">¥{{orderDetail.productAmount}}</div>
       </div>
       <div class="detail_ine"></div>
       <div class="detail_title2">订单信息</div>

src/components/orderComponents/orderTrack.vue

@@ -49,15 +49,15 @@
       <div class="send-info">
         <div class="send-tlt">发单信息</div>
         <div class="label">
-          <div class="label-tlt">下单金额：</div>
+          <div class="label-tlt">配送费用：</div>
           <div class="label-right">
-            <span>¥{{trackOrder.deliveryFee}}</span>
+            <span>¥{{trackOrder.payAmount}}</span>
           </div>
         </div>
         <div class="label">
           <div class="label-tlt">发单时间：</div>
           <div class="label-right">
-            <span>{{trackOrder.takeTime}}</span>
+            <span>{{trackOrder.sendTime}}</span>
           </div>
         </div>
       </div>

src/views/home.vue

@@ -28,7 +28,10 @@ import headerVue from "../common/header.vue";
 import { mapState } from "vuex";
 export default {
   data() {
-    return {};
+    return {
+      audio: null,
+      
+    };
   },
   computed: {
     ...mapState(["userInfo"]),
@@ -38,6 +41,7 @@ export default {
     headerVue,
   },
   created() {},
+  
   methods: {
     loginOut() {
       this.$confirm("此操作将退出当前登录用户, 是否继续?", "提示", {