src/components/common/layout/layout.vue

@@ -23,7 +23,7 @@
         </div>
         <div class="right">
           <div @click="onAppMessage" class="news">
-            <span class="dot"></span>
+            <span class="dot" v-show="hasUnreadMessage"></span>
             <img src="https://we-spa.oss-cn-shenzhen.aliyuncs.com/pad_clerk/home/news.png" />
           </div>
           <div class="head-img"><img :src="userInfo.avatar_url"></div>
@@ -46,16 +46,162 @@
     </div>
     <minePupop :show="msgPupopVisible">
       <div class="block">
-          <div class="delete-pupop" @click="msgPupopVisible=false">
-            <img src="https://we-spa.oss-cn-shenzhen.aliyuncs.com/pad_clerk/icon/slices/delete.png" alt />
+          <div class="title">
+            <div @click="clearUnreadMsgsByType(0)" class="clear">
+              <img src="https://we-spa.oss-cn-shenzhen.aliyuncs.com/pad_clerk/home/clearMsg.png" alt="">
+              <div class="">清除未读</div>
+            </div>
+            <div class="txt">消息</div>
+            <div class="delete-pupop" @click="closeMsgPanel">
+              <img src="https://we-spa.oss-cn-shenzhen.aliyuncs.com/pad_clerk/icon/slices/delete.png" alt />
+            </div>
           </div>
+          <div class="msg-con">
+            <van-list 
+              v-model="mainPanelMsgListLoading"
+              :finished="mainPanelMsgListFinished"
+              finished-text="没有更多了"
+              @load="getMainPanelMessageList"
+              :immediate-check="false"
+            >
+              <div class="order-msg">
+                <div class="success">
+                  <div class="flex justify-between" @click="toMsgDetail(1)">
+                    <div class="desc flex items-center">
+                      <img src="https://we-spa.oss-cn-shenzhen.aliyuncs.com/pad_clerk/home/make.png" alt="" />
+                      <div class="title">预约成功信息</div>
+                    </div>
+                    <div class="count flex flex-column justify-center items-center">
+                      <!-- <div class="time">10:23</div> -->
+                      <div class="num" v-if="orderSuccessUnreadNum">{{orderSuccessUnreadNum}}</div>
+                    </div>
+                  </div>
+                </div>
+                <div class="cancel">
+                  <div class="flex justify-between" @click="toMsgDetail(2)">
+                    <div class="desc flex items-center">
+                      <img src="https://we-spa.oss-cn-shenzhen.aliyuncs.com/pad_clerk/home/cancelOrder.png" alt="" />
+                      <div class="title">预约取消信息</div>
+                    </div>
+                    <div class="count flex flex-column justify-center items-center">
+                      <!-- <div class="time">10:23</div> -->
+                      <div class="num" v-if="orderCancelUnreadNum">{{orderCancelUnreadNum}}</div>
+                    </div>
+                  </div>
+                </div>
+              </div>
+              <div class="ready-msg flex justify-between items-center" 
+                v-for="(item, index) in msgPanelList" 
+                :key="index"
+                @click="readMsgToOrderDetails(item)"
+              >
+                <div class="content-bar flex flex-column">
+                  <div class="desc-info">{{item.sender_name}}</div>
+                  <div class="desc-time">{{item.msg | ellipsis(80)}}</div>
+                </div>
+                <div class="count flex flex-column items-center">
+                  <div class="time">{{item.create_time}}</div>
+                  <div class="dot" v-if="!item.is_read && allUnread"></div>
+                </div>
+              </div>
+            </van-list>
+          </div>
+      </div>
+    </minePupop>
+    <minePupop :show="msgSuccessDetailPupopVisible">
+      <div class="block detail">
+        <div class="title">
+          <div @click="backMsgPanel" class="back flex items-center">
+            <img src="https://we-spa.oss-cn-shenzhen.aliyuncs.com/pad_clerk/icon/slices/back.png" alt="" />
+          </div>
+          <div class="txt">消息</div>
+          <div class="delete-msg flex items-center" @click="clearUnreadMsgsByType(1)">
+            <img src="https://we-spa.oss-cn-shenzhen.aliyuncs.com/pad_clerk/home/clearMsg.png" alt />
+            <div class="">清除未读</div>
+          </div>
+        </div>
+        <div class="detail-msg-con">
+          <van-list 
+            v-model="detailSuccessMsgListLoading"
+            :finished="detailSuccessMsgListFinished"
+            finished-text="没有更多了"
+            @load="getMessageByType(orderMsgType)"
+            :immediate-check="false"
+          >
+            <div class="msg-bar flex justify-between items-center" 
+              v-for="(item, index) in msgSuccessDetailList" 
+              :key="index"
+              @click="readMsgToOrderDetails(item)"
+            >
+              <div class="info flex">
+                <!-- <div class="name">张三</div>
+                <div class="project">121212122</div> -->
+                {{item.msg | ellipsis(50)}}
+              </div>
+              <div class="flex flex-column items-center">
+                <div class="time">{{item.create_time}}</div>
+                <div class="dot" v-if="!item.is_read && successUnread"></div>
+              </div>
+            </div>
+          </van-list>
+        </div>
       </div>
     </minePupop>
+    <minePupop :show="msgCancelDetailPupopVisible">
+      <div class="block detail">
+        <div class="title">
+          <div @click="backMsgPanel" class="back flex items-center">
+            <img src="https://we-spa.oss-cn-shenzhen.aliyuncs.com/pad_clerk/icon/slices/back.png" alt="" />
+          </div>
+          <div class="txt">消息</div>
+          <div class="delete-msg flex items-center" @click="clearUnreadMsgsByType(2)">
+            <img src="https://we-spa.oss-cn-shenzhen.aliyuncs.com/pad_clerk/home/clearMsg.png" alt />
+            <div class="">清除未读</div>
+          </div>
+        </div>
+        <div class="detail-msg-con">
+          <van-list 
+            v-model="detailCancelMsgListLoading"
+            :finished="detailCancelMsgListFinished"
+            finished-text="没有更多了"
+            @load="getMessageByType(orderMsgType)"
+            :immediate-check="false"
+          >
+            <div class="msg-bar flex justify-between items-center"
+              v-for="(item, index) in msgCancelDetailList"
+              :key="index"
+              @click="readMsgToOrderDetails(item)"
+            >
+              <div class="info flex">
+                <!-- <div class="name">张三</div>
+                <div class="project">121212122</div> -->
+                {{item.msg | ellipsis(50)}}
+              </div>
+              <div class="flex flex-column items-center">
+                <div class="time">{{item.create_time}}</div>
+                <div class="dot" v-if="!item.is_read"></div>
+              </div>
+            </div>
+          </van-list>
+        </div>
+      </div>
+    </minePupop>
+    <audio ref="orderSuccessMp3" id="orderSuccessMp3" muted>
+      <source src="@/assets/audio/order_success.mp3" />
+    </audio>
+    <audio ref="orderReadyMp3_15" id="orderReadyMp3_15" muted>
+      <source src="@/assets/audio/order_ready_15.mp3" />
+    </audio>
+    <audio ref="orderReadyMp3_5" id="orderReadyMp3_5" muted>
+      <source src="@/assets/audio/order_ready_5.mp3" />
+    </audio>
   </div>
 </template>
 
 <script type="text/javascript">
 import { mapMutations } from 'vuex'
+import vanList from 'vant/lib/list';
+import 'vant/lib/list/style';
 import leftMenu from './leftMenu'
 import minePupop from "../../../components/minePupop/index.vue";
 import api from '@/server/home'
@@ -72,42 +218,92 @@ export default {
         name: '333'
       },
       msgPupopVisible: false,
+      msgSuccessDetailPupopVisible: false,
+      msgCancelDetailPupopVisible: false,
       timer: null,
-      wsInstance: null
+      timer1: null,
+      wsInstance: null,
+      hasUnreadMessage: null,
+      msgPanelList: [],
+      mainPanelMsgListLoading: false,
+      mainPanelMsgListFinished: false,
+      mainPanelMessagePage: 1,
+      mainPanelMessageLimit: 5,
+      type: 0,
+      orderSuccessUnreadNum: null,
+      orderCancelUnreadNum: null,
+      detailMessageLimit: 10,
+      detailSuccessMessagePage: 1,
+      msgSuccessDetailList: [],
+      detailSuccessMsgListLoading: false,
+      detailSuccessMsgListFinished: false,
+      detailCancelMessagePage: 1,
+      msgCancelDetailList: [],
+      detailCancelMsgListLoading: false,
+      detailCancelMsgListFinished: false,
+      MsgType: null,
+      successUnread: true,
+      cancelUnread: true,
+      allUnread: true,
     }
   },
-  created () {
+  async 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('项目即将开始信息播报')
+        if (data.data.minute == 15) {
+          this.$refs.orderReadyMp3_15.play()
+        } else if (data.data.minute == 5) {
+          this.$refs.orderReadyMp3_5.play()
+        }
       }
+      console.log(data)
+    }
+    this.wsInstance.onclose = (e) => {
+      //当客户端收到服务端发送的关闭连接请求时，触发onclose事件
+      console.log("连接已关闭");
+    }
+    this.wsInstance.onerror = (e) => {
+      //如果出现连接、处理、接收、发送数据失败的时候触发onerror事件
+      console.log(e);
+    }
+
+    await this.queryHasUnreadMessage()
+    this.timer1 = setInterval(async() => {
+      await this.queryHasUnreadMessage()
+    }, 20000)
+  },
+  mounted () {},
+  beforeDestroy () {
+    // 关闭WebSocket连接并清除定时器
+    this.wsInstance.close()
+    clearInterval(this.timer)
+    clearInterval(this.timer1)
   },
   components: {
     leftMenu,
-    minePupop
+    minePupop,
+    vanList
   },
   methods: {
     ...mapMutations(['SAVE_COMMON_VALUE']),
@@ -134,6 +330,7 @@ export default {
       // 关闭WebSocket连接并清除定时器
       this.wsInstance.close()
       clearInterval(this.timer)
+      clearInterval(this.timer1)
       
       this.$router.replace('/login')
     },
@@ -146,9 +343,166 @@ export default {
     goBack () {
       this.$router.back()
     },
+    async queryHasUnreadMessage () {
+      let resp = await api.hasUnreadMessage()
+      if (resp.code === 200) {
+        this.hasUnreadMessage =  resp.data ? true : false
+      }
+    },
+    async getMainPanelMessageList (page = this.mainPanelMessagePage) {
+      // setTimeout(async() => {
+        let resp = await api.getMessageList({ page: page, limit: this.mainPanelMessageLimit })
+        if (resp.code = 200) {
+          this.orderSuccessUnreadNum = resp.data.reserved
+          this.orderCancelUnreadNum = resp.data.cancel
+
+          if (this.mainPanelMessagePage === 1) {
+            this.msgPanelList = resp.data.list
+          } else {
+            this.msgPanelList = [...this.msgPanelList, ...resp.data.list]
+          }
+
+          this.mainPanelMessagePage++
+          this.mainPanelMsgListLoading = false;
+          if (this.msgPanelList.length >= resp.data.total) {
+            this.mainPanelMsgListFinished = true;
+          }
+        }
+      // }, 1000);
+    },
+    async getMessageByType (type, page = this.detailSuccessMessagePage) {
+      if (type === 1) {
+        let resp = await api.getMessageByType({ type: type, page: page, limit: this.detailMessageLimit })
+        if (resp.code = 200) {
+
+          if (this.detailSuccessMessagePage === 1) {
+            this.msgSuccessDetailList = resp.data.list
+          } else {
+            this.msgSuccessDetailList = [...this.msgSuccessDetailList, ...resp.data.list]
+          }
+          
+          this.detailSuccessMessagePage++
+          this.detailSuccessMsgListLoading = false;
+          if (this.msgSuccessDetailList.length >= resp.data.total) {
+            this.detailSuccessMsgListFinished = true;
+          }
+        }
+      } else if (type === 2) {
+        let resp = await api.getMessageByType({ type: type, page: page, limit: this.detailMessageLimit })
+        if (resp.code = 200) {
+          this.msgCancelDetailList = [...this.msgCancelDetailList, ...resp.data.list]
+
+          if (this.detailSuccessMessagePage === 1) {
+            this.msgCancelDetailList = resp.data.list
+          } else {
+            this.msgCancelDetailList = [...this.msgCancelDetailList, ...resp.data.list]
+          }
+
+          this.detailCancelMessagePage++
+          this.detailCancelMsgListLoading = false;
+          if (this.msgCancelDetailList.length >= resp.data.total) {
+            this.detailCancelMsgListFinished = true;
+          }
+        }
+      }
+    },
     onAppMessage () {
+      this.msgPanelList = []
+      this.mainPanelMessagePage = 1
+      this.mainPanelMsgListLoading = false
+      this.mainPanelMsgListFinished = false
+      this.getMainPanelMessageList(1)
       this.msgPupopVisible = true
-    }
+    },
+    closeMsgPanel () {
+      this.msgPupopVisible = false
+    },
+    toMsgDetail (param) {
+      this.msgPupopVisible = false
+      // this.getMessageByType(param)
+      if (param === 1) {
+      this.msgSuccessDetailList = []
+      this.detailSuccessMessagePage = 1
+      this.detailSuccessMsgListLoading = false
+      this.detailSuccessMsgListFinished = false
+      this.getMessageByType(param, 1)
+
+        this.msgSuccessDetailPupopVisible = true
+      } else {
+      this.msgCancelDetailList = []
+      this.detailCancelMessagePage = 1
+      this.detailCancelMsgListLoading = false
+      this.detailCancelMsgListFinished = false
+      
+      this.getMessageByType(param, 1)
+
+        this.msgCancelDetailPupopVisible = true
+      }
+      this.orderMsgType = param
+      console.log(this.orderMsgType)
+    },
+    backMsgPanel () {
+      this.msgSuccessDetailPupopVisible = false
+      this.msgCancelDetailPupopVisible = false
+      
+      this.getMainPanelMessageList()
+      this.msgPupopVisible = true
+    },
+    async clearUnreadMsgsByType (type) {
+      let resp = await api.clearMessage({ type: type })
+      if (resp.code === 200) {
+        if (type === 1) {
+          this.getMessageByType(this.orderMsgType)
+          this.successUnread = false
+        } else if (type === 2) {
+          this.getMessageByType(this.orderMsgType)
+          this.cancelUnread = false
+        } else if (type === 0) {
+          this.getMainPanelMessageList()
+          this.allUnread = false
+        }
+      }
+    },
+    async readMsgToOrderDetails (source) {
+      // console.log(source)
+      if (!source.is_read) {
+        let clearMsgByIdResp = await api.clearMessageById({id: source.id})
+        if (clearMsgByIdResp.code === 200) {
+          this.getMainPanelMessageList()
+        }
+      }
+      if (source.type === 'BUY' || source.type === 'BUY_CARD') return
+      // return
+      let orderInfoResp = await api.getOrderInfo({ id: source.order_id })
+      if (orderInfoResp.code === 200) {
+        if (orderInfoResp.data.order_data.status == 0) {
+          // 跳转前关闭所有弹窗
+          this.msgPupopVisible = false
+          this.msgSuccessDetailPupopVisible = false
+          this.msgCancelDetailPupopVisible = false
+
+          this.$router.push({
+            path: '/confirmOrder/details',
+            query: {
+              id: source.order_id
+            }
+          })
+        } else {
+          this.msgPupopVisible = false
+          this.msgSuccessDetailPupopVisible = false
+          this.msgCancelDetailPupopVisible = false
+          
+          this.$router.push({
+            path: "/historicalOrder/details",
+            query: {
+              id: source.order_id
+            }
+          });
+        }
+      } else {
+        this.$message.error("未查到此订单")
+      }
+    },
   },
   computed: {
     routerItems () {
@@ -168,6 +522,14 @@ export default {
         }
       }
       return resultArr;
+    },
+    orderMsgType: {
+      get () {
+        return this.MsgType
+      },
+      set (val) {
+        this.MsgType = val
+      } 
     }
   },
 }
@@ -177,6 +539,25 @@ export default {
 <style lang="less" scoped>
 @import url(../../../style/root.less);
 
+.flex {
+  display: flex;
+}
+.flex-column {
+  flex-direction: column;
+}
+.justify-center {
+  justify-content: center;
+}
+.justify-between {
+  justify-content: space-between;
+}
+.justify-around {
+  justify-content: space-around;
+}
+.items-center {
+  align-items: center;
+}
+
 .layout {
   height: 100vh;
   display: flex;
@@ -286,23 +667,145 @@ export default {
     background-color: #f7f8fa;
   }
 }
+.dot {
+  width: 9px;
+  height: 9px;
+  border-radius: 50%;
+  background-color: #FF6945;
+  margin-top: 10px;
+}
+.dot-activated {
+  background-color: #fff;
+}
 .block {
   width: 540px;
-  height: 550px;
+  height: 400px;
+  padding: 20px;
+  box-sizing: border-box;
   background: #ffffff;
   border-radius: 8px;
   position: relative;
-  .delete-pupop {
-    position: absolute;
-    width: 32px;
-    height: 32px;
-    top: 5px;
-    right: 5px;
-    img {
-      width: 100%;
-      height: 100%;
-      display: block;
+  .title {
+    display: flex;
+    justify-content: space-between;
+    font-size: 14px;
+    .clear {
+      display: flex;
+      align-items: center;
+      color: #999999;
+      img {
+        width: 32px;
+        height: 32px;
+      }
+    }
+    .txt {
+      display: flex;
+      align-items: center;
+    }
+    .delete-pupop {
+      width: 32px;
+      height: 32px;
+      img {
+        width: 100%;
+        height: 100%;
+        display: block;
+      }
     }
   }
+  .msg-con {
+    height: 290px;
+    overflow: auto;
+    margin-top: 21px;
+    .order-msg {
+      .success, .cancel {
+        .desc {
+          img {
+            width: 36px;
+            height: 36px;
+          }
+          .title {
+            margin-left: 17px;
+          }
+        }
+        .count {
+          .time {
+            color: #999999;
+            margin-bottom: 4px;
+          }
+          .num {
+            width: 25px;
+            height: 25px;
+            // line-height: 21px;
+            // text-align: center;
+            display: flex;
+            justify-content: center;
+            align-items: center;
+            padding: 8px;
+            box-sizing: border-box;
+            color: #ffffff;
+            border-radius: 50%;
+            background-color: #FF6945;
+            
+          }
+        }
+      }
+      .cancel {
+        margin-top: 23px;
+      }
+    }
+    .ready-msg {
+      margin-top: 20px;
+      .content-bar {
+        .desc-info {
+          color: #666666;
+          font-weight: 400;
+        }
+        .desc-time {
+          width: 400px;
+          margin-top: 5px;
+          font-weight: 500;
+          line-height: 18px;
+        }
+        
+      }
+      .count {
+        .time {
+          color: #999999;
+        }
+      }
+    }
+  }
+}
+.detail {
+  .title {
+    .back {
+      img {
+        width: 24px;
+        height: 24px;
+      }
+    }
+    .delete-msg {
+      img {
+        width: 32px;
+        height: 32px;
+      }
+    }
+  }
+  .msg-bar {
+    margin-top: 18px;
+    .info {
+      width: 400px;
+      line-height: 18px;
+      .name {
+        font-weight: 600;
+        margin-right: 5px;
+      }
+      .project {}
+    }
+  }
+}
+.detail-msg-con {
+  height: 330px;
+  overflow: auto;
 }
 </style>

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'
 
 }