feat: 更新消息提醒

src/components/common/layout/layout.vue

@@ -51,6 +51,12 @@
           </div>
       </div>
     </minePupop>
+    <audio ref="orderSuccessMp3" id="orderSuccessMp3" muted>
+      <source src="@/assets/audio/order_success.mp3" />
+    </audio>
+    <audio ref="orderReadyMp3" id="orderReadyMp3" muted>
+      <source src="@/assets/audio/order_ready.mp3" />
+    </audio>
   </div>
 </template>
 
@@ -79,31 +85,39 @@ export default {
   created () {
     this.getUserInfo()
 
-      console.log('开始连接...')
-      let token = this.$store.state.comVal.token || localStorage.getItem('token')
-      //申请一个WebSocket对象，参数是服务端地址，同http协议使用http://开头一样，WebSocket协议的url使用ws://开头，另外安全的WebSocket协议使用wss://开头
-      this.wsInstance = new WebSocket(`wss://ws.ijolijoli.com?access_token=${token}`);
-      this.wsInstance.onopen = () => {
-        //当WebSocket创建成功时，触发onopen事件
-        console.log("连接成功");
-        this.timer = setInterval(() => {
-          this.wsInstance.send(JSON.stringify({type:'ping'}));
-        }, 30000);
-      }
-      this.wsInstance.onmessage = (e) => {
-        //当客户端收到服务端发来的消息时，触发onmessage事件，参数e.data包含server传递过来的数据
-        console.log('收到消息',e.data)
-        let data = JSON.parse(e.data);
-        console.log(data)
-      }
-      this.wsInstance.onclose = (e) => {
-        //当客户端收到服务端发送的关闭连接请求时，触发onclose事件
-        console.log("连接已关闭");
-      }
-      this.wsInstance.onerror = (e) => {
-        //如果出现连接、处理、接收、发送数据失败的时候触发onerror事件
-        console.log(e);
+    console.log('开始连接...')
+    let token = this.$store.state.comVal.token || localStorage.getItem('token')
+    //申请一个WebSocket对象，参数是服务端地址，同http协议使用http://开头一样，WebSocket协议的url使用ws://开头，另外安全的WebSocket协议使用wss://开头
+    this.wsInstance = new WebSocket(`wss://ws.ijolijoli.com?access_token=${token}`);
+    this.wsInstance.onopen = () => {
+      //当WebSocket创建成功时，触发onopen事件
+      console.log("连接成功");
+      this.timer = setInterval(() => {
+        this.wsInstance.send(JSON.stringify({type:'ping'}));
+      }, 30000);
+    }
+    this.wsInstance.onmessage = (e) => {
+      //当客户端收到服务端发来的消息时，触发onmessage事件，参数e.data包含server传递过来的数据
+      console.log('收到消息',e.data)
+      let data = JSON.parse(e.data);
+      if (data.data.type === 'order_success') {
+        console.log('预约成功信息播报')
+        this.$refs.orderSuccessMp3.play()
+      } else if (data.data.type === 'order_ready') {
+        // TODO: 播报动态语音还是固定的语音有待产品商榷
+        console.log('项目即将开始信息播报')
+        this.$refs.orderReadyMp3.play()
       }
+      console.log(data)
+    }
+    this.wsInstance.onclose = (e) => {
+      //当客户端收到服务端发送的关闭连接请求时，触发onclose事件
+      console.log("连接已关闭");
+    }
+    this.wsInstance.onerror = (e) => {
+      //如果出现连接、处理、接收、发送数据失败的时候触发onerror事件
+      console.log(e);
+    }
   },
   components: {
     leftMenu,

src/server/home.js

@@ -157,4 +157,28 @@ export default class Home {
     return $http.get(url.reservedRecords, params)
   }
 
+  // 清除未读消息  0清除所有 1清除预约成功 2清除取消
+  static clearMessage (type) {
+    return $http.get(url.clearMessage, type)
+  }
+
+  // 根据Id清除未读消息  消息记录id
+  static clearMessageById (id) {
+    return $http.get(url.clearMessageById, id)
+  }
+
+  // 获取消息列表 （成功/失败）  1预约成功 2取消预约
+  static getMessageByType ({ type, page, limit }) {
+    return $http.get(url.getMessageByType, { type, page, limit })
+  }
+
+  // 获取消息列表
+  static getMessageList ({ page, limit }) {
+    return $http.get(url.getMessageList, { page, limit })
+  }
+
+  // 获取是否有未读消息
+  static hasUnreadMessage () {
+    return $http.get(url.hasUnreadMessage)
+  }
 }

src/server/urls.js

@@ -94,7 +94,22 @@ export default {
   // 创建标签
   schemeSave: '/v2/pad/scheme/save',
 
-    // 用户预约记录
-    reservedRecords: '/v2/pad/reserved/index'
+  // 用户预约记录
+  reservedRecords: '/v2/pad/reserved/index',
+
+  // 清除未读消息
+  clearMessage: '/v2/pad/message/batch_read',
+
+  // 根据Id清除未读消息
+  clearMessageById: '/v2/pad/message/read',
+
+  // 获取消息列表 （成功/失败）
+  getMessageByType: '/v2/pad/message/type_list',
+
+  // 获取消息列表
+  getMessageList: '/v2/pad/message/get_list',
+
+  // 获取是否有未读消息
+  hasUnreadMessage: '/v2/pad/message/get_message'
 
 }