App.vue 2.7 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899
  1. <template>
  2. <div id="app">
  3. <router-view />
  4. <!-- 语音播报 -->
  5. <iframe id="iframeDom" allow="autoplay" style="display:none" :src="src" sandbox=""></iframe>
  6. <audio class="audio" ref="audio" :src="url" controlsList="nodownload" controls autoplay hidden>
  7. </audio>
  8. </div>
  9. </template>
  10. <script>
  11. import { getSoundMsg } from "./api/setting.js";
  12. import bus from "./common/bus.js";
  13. export default {
  14. name: "App",
  15. data() {
  16. return {
  17. url: "../static/audio/test.mp3",
  18. audioList: [
  19. require("../static/audio/new-order.mp3"),
  20. require("../static/audio/lower-than.mp3"),
  21. require("../static/audio/missed-orders.mp3"),
  22. require("../static/audio/not-enough.mp3"),
  23. require("../static/audio/order-received.mp3"),
  24. require("../static/audio/rider-cancel.mp3"),
  25. require("../static/audio/rider-go-cancel.mp3"),
  26. require("../static/audio/user-go-cancel.mp3"),
  27. require("../static/audio/over-time.mp3"),
  28. ],
  29. src: require("../static/audio/alone.mp3"),
  30. timer: null,
  31. openMsg: false,
  32. };
  33. },
  34. created() {},
  35. mounted() {
  36. bus.$on("closeGetSoundMsg", () => {
  37. console.log("进来准备关闭新订单提醒声音了");
  38. clearInterval(this.timer);
  39. this.timer = null;
  40. });
  41. bus.$on("openGetSoundMsg", () => {
  42. console.log("进来准备开启新订单提醒声音了");
  43. this.timer = setInterval(() => {
  44. this.getSoundMsg();
  45. }, 5000);
  46. });
  47. // 诱导用户触发点击动作,否则页面刷新后不会自动播放音频
  48. let userInfo = localStorage.getItem("userInfo");
  49. if (userInfo) {
  50. let nickname = JSON.parse(userInfo).nickname;
  51. this.$confirm(`当前登录账号:${nickname}`, "提示", {
  52. confirmButtonText: "确定",
  53. showCancelButton: false,
  54. type: "warning",
  55. }).then(() => {});
  56. }
  57. },
  58. beforeDestroy() {
  59. clearInterval(this.timer);
  60. this.timer = null;
  61. },
  62. destroyed() {},
  63. methods: {
  64. getSoundMsg() {
  65. getSoundMsg().then((res) => {
  66. if (res.code === 200) {
  67. if (res.data) {
  68. let name = res.data.slice(0, res.data.indexOf("."));
  69. let url = this.audioList.filter((v) => {
  70. return v.includes(name);
  71. })[0];
  72. this.url = url + "?t=" + new Date().getTime();
  73. }
  74. } else {
  75. this.$message({
  76. type: "error",
  77. message: res.msg,
  78. });
  79. }
  80. });
  81. },
  82. },
  83. };
  84. </script>
  85. <style>
  86. body {
  87. margin: 0;
  88. padding: 0;
  89. }
  90. #app {
  91. font-family: "Avenir", Helvetica, Arial, sans-serif;
  92. -webkit-font-smoothing: antialiased;
  93. -moz-osx-font-smoothing: grayscale;
  94. margin: 0;
  95. padding: 0;
  96. }
  97. </style>