liebao-web/src/App.vue

<template>
  <div id="app">
    <router-view />
    <!-- 语音播报 -->
    <iframe id="iframeDom" allow="autoplay" style="display:none" :src="src"></iframe>
    <audio class="audio" ref="audio" :src="url" controls autoplay hidden>
    </audio>
  </div>
</template>

<script>
import { getSoundMsg } from "./api/setting.js";
import bus from "./common/bus.js";
export default {
  name: "App",
  data() {
    return {
      url: "../static/audio/test.mp3",
      audioList: [
        require("../static/audio/new-order.mp3"),
        require("../static/audio/lower-than.mp3"),
        require("../static/audio/missed-orders.mp3"),
        require("../static/audio/not-enough.mp3"),
        require("../static/audio/order-received.mp3"),
        require("../static/audio/rider-cancel.mp3"),
        require("../static/audio/user-go-cancel.mp3"),
      ],
      src: require("../static/audio/alone.mp3"),
      timer: null,
      openMsg: false,
    };
  },
  created() {
    console.log(1111);
  },
  mounted() {
    console.log(2222);
    bus.$on("closeGetSoundMsg", () => {
      console.log("进来准备关闭新订单提醒声音了");
      clearInterval(this.timer);
      this.timer = null;
    });
    bus.$on("openGetSoundMsg", () => {
      console.log("进来准备开启新订单提醒声音了");
      this.timer = setInterval(() => {
        this.getSoundMsg();
      }, 5000);
    });
    // 诱导用户出发点击动作，否则页面刷新后不会自动播放音频
    let userInfo = localStorage.getItem("userInfo");
    if (userInfo) {
      let nickname = JSON.parse(userInfo).nickname;
      this.$confirm(`当前登录账号：${nickname}`, "提示", {
        confirmButtonText: "确定",
        showCancelButton: false,
        type: "warning",
      }).then(() => {});
    }
  },
  beforeDestroy() {
    clearInterval(this.timer);
    this.timer = null;
  },
  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];
            console.log("name", name);
            console.log("url", url);
            this.url = url + "?t=" + new Date().getTime();
          }
        } else {
          this.$message({
            type: "error",
            message: res.msg,
          });
        }
      });
    },
  },
};
</script>

<style>
body {
  margin: 0;
  padding: 0;
}
#app {
  font-family: "Avenir", Helvetica, Arial, sans-serif;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  margin: 0;
  padding: 0;
}
</style>