Bläddra i källkod

Merge branch 'zhp' of http://code.qutaovip.com/lihai/pad_spa into feat/lihai

黎海 2 år sedan
förälder
incheckning
130229dfbb

+ 1 - 2
src/App.vue

@@ -15,10 +15,9 @@ export default {
15 15
         
16 16
     },
17 17
     created: function () {
18
-        
18
+
19 19
     },
20 20
     methods: {
21
-        
22 21
     }
23 22
 }
24 23
 </script>

BIN
src/assets/audio/order_ready.mp3


BIN
src/assets/audio/order_ready_15.mp3


BIN
src/assets/audio/order_ready_5.mp3


BIN
src/assets/audio/order_success.mp3


+ 595 - 4
src/components/common/layout/layout.vue

@@ -22,7 +22,10 @@
22 22
           {{$route.name}}
23 23
         </div>
24 24
         <div class="right">
25
-          <div class="news"><img src="https://we-spa.oss-cn-shenzhen.aliyuncs.com/pad_clerk/home/news.png"></div>
25
+          <div @click="onAppMessage" class="news">
26
+            <span class="dot" v-show="hasUnreadMessage"></span>
27
+            <img src="https://we-spa.oss-cn-shenzhen.aliyuncs.com/pad_clerk/home/news.png" />
28
+          </div>
26 29
           <div class="head-img"><img :src="userInfo.avatar_url"></div>
27 30
           <el-dropdown trigger="click"
28 31
                        placement="top"
@@ -41,11 +44,166 @@
41 44
         <router-view></router-view>
42 45
       </div>
43 46
     </div>
47
+    <minePupop :show="msgPupopVisible">
48
+      <div class="block">
49
+          <div class="title">
50
+            <div @click="clearUnreadMsgsByType(0)" class="clear">
51
+              <img src="https://we-spa.oss-cn-shenzhen.aliyuncs.com/pad_clerk/home/clearMsg.png" alt="">
52
+              <div class="">清除未读</div>
53
+            </div>
54
+            <div class="txt">消息</div>
55
+            <div class="delete-pupop" @click="closeMsgPanel">
56
+              <img src="https://we-spa.oss-cn-shenzhen.aliyuncs.com/pad_clerk/icon/slices/delete.png" alt />
57
+            </div>
58
+          </div>
59
+          <div class="msg-con">
60
+            <van-list 
61
+              v-model="mainPanelMsgListLoading"
62
+              :finished="mainPanelMsgListFinished"
63
+              finished-text="没有更多了"
64
+              @load="getMainPanelMessageList"
65
+              :immediate-check="false"
66
+            >
67
+              <div class="order-msg">
68
+                <div class="success">
69
+                  <div class="flex justify-between" @click="toMsgDetail(1)">
70
+                    <div class="desc flex items-center">
71
+                      <img src="https://we-spa.oss-cn-shenzhen.aliyuncs.com/pad_clerk/home/make.png" alt="" />
72
+                      <div class="title">预约成功信息</div>
73
+                    </div>
74
+                    <div class="count flex flex-column justify-center items-center">
75
+                      <!-- <div class="time">10:23</div> -->
76
+                      <div class="num" v-if="orderSuccessUnreadNum">{{orderSuccessUnreadNum}}</div>
77
+                    </div>
78
+                  </div>
79
+                </div>
80
+                <div class="cancel">
81
+                  <div class="flex justify-between" @click="toMsgDetail(2)">
82
+                    <div class="desc flex items-center">
83
+                      <img src="https://we-spa.oss-cn-shenzhen.aliyuncs.com/pad_clerk/home/cancelOrder.png" alt="" />
84
+                      <div class="title">预约取消信息</div>
85
+                    </div>
86
+                    <div class="count flex flex-column justify-center items-center">
87
+                      <!-- <div class="time">10:23</div> -->
88
+                      <div class="num" v-if="orderCancelUnreadNum">{{orderCancelUnreadNum}}</div>
89
+                    </div>
90
+                  </div>
91
+                </div>
92
+              </div>
93
+              <div class="ready-msg flex justify-between items-center" 
94
+                v-for="(item, index) in msgPanelList" 
95
+                :key="index"
96
+                @click="readMsgToOrderDetails(item)"
97
+              >
98
+                <div class="content-bar flex flex-column">
99
+                  <div class="desc-info">{{item.sender_name}}</div>
100
+                  <div class="desc-time">{{item.msg | ellipsis(80)}}</div>
101
+                </div>
102
+                <div class="count flex flex-column items-center">
103
+                  <div class="time">{{item.create_time}}</div>
104
+                  <div class="dot" v-if="!item.is_read && allUnread"></div>
105
+                </div>
106
+              </div>
107
+            </van-list>
108
+          </div>
109
+      </div>
110
+    </minePupop>
111
+    <minePupop :show="msgSuccessDetailPupopVisible">
112
+      <div class="block detail">
113
+        <div class="title">
114
+          <div @click="backMsgPanel" class="back flex items-center">
115
+            <img src="https://we-spa.oss-cn-shenzhen.aliyuncs.com/pad_clerk/icon/slices/back.png" alt="" />
116
+          </div>
117
+          <div class="txt">消息</div>
118
+          <div class="delete-msg flex items-center" @click="clearUnreadMsgsByType(1)">
119
+            <img src="https://we-spa.oss-cn-shenzhen.aliyuncs.com/pad_clerk/home/clearMsg.png" alt />
120
+            <div class="">清除未读</div>
121
+          </div>
122
+        </div>
123
+        <div class="detail-msg-con">
124
+          <van-list 
125
+            v-model="detailSuccessMsgListLoading"
126
+            :finished="detailSuccessMsgListFinished"
127
+            finished-text="没有更多了"
128
+            @load="getMessageByType(orderMsgType)"
129
+            :immediate-check="false"
130
+          >
131
+            <div class="msg-bar flex justify-between items-center" 
132
+              v-for="(item, index) in msgSuccessDetailList" 
133
+              :key="index"
134
+              @click="readMsgToOrderDetails(item)"
135
+            >
136
+              <div class="info flex">
137
+                <!-- <div class="name">张三</div>
138
+                <div class="project">121212122</div> -->
139
+                {{item.msg | ellipsis(50)}}
140
+              </div>
141
+              <div class="flex flex-column items-center">
142
+                <div class="time">{{item.create_time}}</div>
143
+                <div class="dot" v-if="!item.is_read && successUnread"></div>
144
+              </div>
145
+            </div>
146
+          </van-list>
147
+        </div>
148
+      </div>
149
+    </minePupop>
150
+    <minePupop :show="msgCancelDetailPupopVisible">
151
+      <div class="block detail">
152
+        <div class="title">
153
+          <div @click="backMsgPanel" class="back flex items-center">
154
+            <img src="https://we-spa.oss-cn-shenzhen.aliyuncs.com/pad_clerk/icon/slices/back.png" alt="" />
155
+          </div>
156
+          <div class="txt">消息</div>
157
+          <div class="delete-msg flex items-center" @click="clearUnreadMsgsByType(2)">
158
+            <img src="https://we-spa.oss-cn-shenzhen.aliyuncs.com/pad_clerk/home/clearMsg.png" alt />
159
+            <div class="">清除未读</div>
160
+          </div>
161
+        </div>
162
+        <div class="detail-msg-con">
163
+          <van-list 
164
+            v-model="detailCancelMsgListLoading"
165
+            :finished="detailCancelMsgListFinished"
166
+            finished-text="没有更多了"
167
+            @load="getMessageByType(orderMsgType)"
168
+            :immediate-check="false"
169
+          >
170
+            <div class="msg-bar flex justify-between items-center"
171
+              v-for="(item, index) in msgCancelDetailList"
172
+              :key="index"
173
+              @click="readMsgToOrderDetails(item)"
174
+            >
175
+              <div class="info flex">
176
+                <!-- <div class="name">张三</div>
177
+                <div class="project">121212122</div> -->
178
+                {{item.msg | ellipsis(50)}}
179
+              </div>
180
+              <div class="flex flex-column items-center">
181
+                <div class="time">{{item.create_time}}</div>
182
+                <div class="dot" v-if="!item.is_read"></div>
183
+              </div>
184
+            </div>
185
+          </van-list>
186
+        </div>
187
+      </div>
188
+    </minePupop>
189
+    <audio ref="orderSuccessMp3" id="orderSuccessMp3" muted>
190
+      <source src="@/assets/audio/order_success.mp3" />
191
+    </audio>
192
+    <audio ref="orderReadyMp3_15" id="orderReadyMp3_15" muted>
193
+      <source src="@/assets/audio/order_ready_15.mp3" />
194
+    </audio>
195
+    <audio ref="orderReadyMp3_5" id="orderReadyMp3_5" muted>
196
+      <source src="@/assets/audio/order_ready_5.mp3" />
197
+    </audio>
44 198
   </div>
45 199
 </template>
46 200
 
47 201
 <script type="text/javascript">
202
+import { mapMutations } from 'vuex'
203
+import vanList from 'vant/lib/list';
204
+import 'vant/lib/list/style';
48 205
 import leftMenu from './leftMenu'
206
+import minePupop from "../../../components/minePupop/index.vue";
49 207
 import api from '@/server/home'
50 208
 
51 209
 
@@ -58,16 +216,97 @@ export default {
58 216
       isback: false,
59 217
       userInfo: {
60 218
         name: '333'
61
-      }
219
+      },
220
+      msgPupopVisible: false,
221
+      msgSuccessDetailPupopVisible: false,
222
+      msgCancelDetailPupopVisible: false,
223
+      timer: null,
224
+      timer1: null,
225
+      wsInstance: null,
226
+      hasUnreadMessage: null,
227
+      msgPanelList: [],
228
+      mainPanelMsgListLoading: false,
229
+      mainPanelMsgListFinished: false,
230
+      mainPanelMessagePage: 1,
231
+      mainPanelMessageLimit: 5,
232
+      type: 0,
233
+      orderSuccessUnreadNum: null,
234
+      orderCancelUnreadNum: null,
235
+      detailMessageLimit: 10,
236
+      detailSuccessMessagePage: 1,
237
+      msgSuccessDetailList: [],
238
+      detailSuccessMsgListLoading: false,
239
+      detailSuccessMsgListFinished: false,
240
+      detailCancelMessagePage: 1,
241
+      msgCancelDetailList: [],
242
+      detailCancelMsgListLoading: false,
243
+      detailCancelMsgListFinished: false,
244
+      MsgType: null,
245
+      successUnread: true,
246
+      cancelUnread: true,
247
+      allUnread: true,
62 248
     }
63 249
   },
64
-  created () {
250
+  async created () {
65 251
     this.getUserInfo()
252
+
253
+    console.log('开始连接...')
254
+    let token = this.$store.state.comVal.token || localStorage.getItem('token')
255
+    //申请一个WebSocket对象,参数是服务端地址,同http协议使用http://开头一样,WebSocket协议的url使用ws://开头,另外安全的WebSocket协议使用wss://开头
256
+    this.wsInstance = new WebSocket(`wss://ws.ijolijoli.com?access_token=${token}`);
257
+    this.wsInstance.onopen = () => {
258
+      //当WebSocket创建成功时,触发onopen事件
259
+      console.log("连接成功");
260
+      this.timer = setInterval(() => {
261
+        this.wsInstance.send(JSON.stringify({type:'ping'}));
262
+      }, 30000);
263
+    }
264
+    this.wsInstance.onmessage = (e) => {
265
+      //当客户端收到服务端发来的消息时,触发onmessage事件,参数e.data包含server传递过来的数据
266
+      console.log('收到消息',e.data)
267
+      let data = JSON.parse(e.data);
268
+      if (data.data.type === 'order_success') {
269
+        console.log('预约成功信息播报')
270
+        this.$refs.orderSuccessMp3.play()
271
+      } else if (data.data.type === 'order_ready') {
272
+        // TODO: 播报动态语音还是固定的语音有待产品商榷
273
+        console.log('项目即将开始信息播报')
274
+        if (data.data.minute == 15) {
275
+          this.$refs.orderReadyMp3_15.play()
276
+        } else if (data.data.minute == 5) {
277
+          this.$refs.orderReadyMp3_5.play()
278
+        }
279
+      }
280
+      console.log(data)
281
+    }
282
+    this.wsInstance.onclose = (e) => {
283
+      //当客户端收到服务端发送的关闭连接请求时,触发onclose事件
284
+      console.log("连接已关闭");
285
+    }
286
+    this.wsInstance.onerror = (e) => {
287
+      //如果出现连接、处理、接收、发送数据失败的时候触发onerror事件
288
+      console.log(e);
289
+    }
290
+
291
+    await this.queryHasUnreadMessage()
292
+    this.timer1 = setInterval(async() => {
293
+      await this.queryHasUnreadMessage()
294
+    }, 20000)
295
+  },
296
+  mounted () {},
297
+  beforeDestroy () {
298
+    // 关闭WebSocket连接并清除定时器
299
+    this.wsInstance.close()
300
+    clearInterval(this.timer)
301
+    clearInterval(this.timer1)
66 302
   },
67 303
   components: {
68 304
     leftMenu,
305
+    minePupop,
306
+    vanList
69 307
   },
70 308
   methods: {
309
+    ...mapMutations(['SAVE_COMMON_VALUE']),
71 310
     getUserInfo () {
72 311
       let that = this
73 312
       api.getUserInfo().then(res => {
@@ -77,7 +316,21 @@ export default {
77 316
       })
78 317
     },
79 318
     loginOut () {
319
+      this.SAVE_COMMON_VALUE({
320
+        'key': 'token',
321
+        'value': null
322
+      })
323
+      this.SAVE_COMMON_VALUE({
324
+        'key': 'isLogin',
325
+        'value': false
326
+      })
80 327
       localStorage.removeItem('token');
328
+
329
+      // 关闭WebSocket连接并清除定时器
330
+      this.wsInstance.close()
331
+      clearInterval(this.timer)
332
+      clearInterval(this.timer1)
333
+      
81 334
       this.$router.replace('/login')
82 335
     },
83 336
     changeMenu (index) {
@@ -88,7 +341,167 @@ export default {
88 341
     },
89 342
     goBack () {
90 343
       this.$router.back()
91
-    }
344
+    },
345
+    async queryHasUnreadMessage () {
346
+      let resp = await api.hasUnreadMessage()
347
+      if (resp.code === 200) {
348
+        this.hasUnreadMessage =  resp.data ? true : false
349
+      }
350
+    },
351
+    async getMainPanelMessageList (page = this.mainPanelMessagePage) {
352
+      // setTimeout(async() => {
353
+        let resp = await api.getMessageList({ page: page, limit: this.mainPanelMessageLimit })
354
+        if (resp.code = 200) {
355
+          this.orderSuccessUnreadNum = resp.data.reserved
356
+          this.orderCancelUnreadNum = resp.data.cancel
357
+
358
+          if (this.mainPanelMessagePage === 1) {
359
+            this.msgPanelList = resp.data.list
360
+          } else {
361
+            this.msgPanelList = [...this.msgPanelList, ...resp.data.list]
362
+          }
363
+
364
+          this.mainPanelMessagePage++
365
+          this.mainPanelMsgListLoading = false;
366
+          if (this.msgPanelList.length >= resp.data.total) {
367
+            this.mainPanelMsgListFinished = true;
368
+          }
369
+        }
370
+      // }, 1000);
371
+    },
372
+    async getMessageByType (type, page = this.detailSuccessMessagePage) {
373
+      if (type === 1) {
374
+        let resp = await api.getMessageByType({ type: type, page: page, limit: this.detailMessageLimit })
375
+        if (resp.code = 200) {
376
+
377
+          if (this.detailSuccessMessagePage === 1) {
378
+            this.msgSuccessDetailList = resp.data.list
379
+          } else {
380
+            this.msgSuccessDetailList = [...this.msgSuccessDetailList, ...resp.data.list]
381
+          }
382
+          
383
+          this.detailSuccessMessagePage++
384
+          this.detailSuccessMsgListLoading = false;
385
+          if (this.msgSuccessDetailList.length >= resp.data.total) {
386
+            this.detailSuccessMsgListFinished = true;
387
+          }
388
+        }
389
+      } else if (type === 2) {
390
+        let resp = await api.getMessageByType({ type: type, page: page, limit: this.detailMessageLimit })
391
+        if (resp.code = 200) {
392
+          this.msgCancelDetailList = [...this.msgCancelDetailList, ...resp.data.list]
393
+
394
+          if (this.detailSuccessMessagePage === 1) {
395
+            this.msgCancelDetailList = resp.data.list
396
+          } else {
397
+            this.msgCancelDetailList = [...this.msgCancelDetailList, ...resp.data.list]
398
+          }
399
+
400
+          this.detailCancelMessagePage++
401
+          this.detailCancelMsgListLoading = false;
402
+          if (this.msgCancelDetailList.length >= resp.data.total) {
403
+            this.detailCancelMsgListFinished = true;
404
+          }
405
+        }
406
+      }
407
+    },
408
+    onAppMessage () {
409
+      this.msgPanelList = []
410
+      this.mainPanelMessagePage = 1
411
+      this.mainPanelMsgListLoading = false
412
+      this.mainPanelMsgListFinished = false
413
+      this.getMainPanelMessageList(1)
414
+      this.msgPupopVisible = true
415
+    },
416
+    closeMsgPanel () {
417
+      this.msgPupopVisible = false
418
+    },
419
+    toMsgDetail (param) {
420
+      this.msgPupopVisible = false
421
+      // this.getMessageByType(param)
422
+      if (param === 1) {
423
+      this.msgSuccessDetailList = []
424
+      this.detailSuccessMessagePage = 1
425
+      this.detailSuccessMsgListLoading = false
426
+      this.detailSuccessMsgListFinished = false
427
+      this.getMessageByType(param, 1)
428
+
429
+        this.msgSuccessDetailPupopVisible = true
430
+      } else {
431
+      this.msgCancelDetailList = []
432
+      this.detailCancelMessagePage = 1
433
+      this.detailCancelMsgListLoading = false
434
+      this.detailCancelMsgListFinished = false
435
+      
436
+      this.getMessageByType(param, 1)
437
+
438
+        this.msgCancelDetailPupopVisible = true
439
+      }
440
+      this.orderMsgType = param
441
+      console.log(this.orderMsgType)
442
+    },
443
+    backMsgPanel () {
444
+      this.msgSuccessDetailPupopVisible = false
445
+      this.msgCancelDetailPupopVisible = false
446
+      
447
+      this.getMainPanelMessageList()
448
+      this.msgPupopVisible = true
449
+    },
450
+    async clearUnreadMsgsByType (type) {
451
+      let resp = await api.clearMessage({ type: type })
452
+      if (resp.code === 200) {
453
+        if (type === 1) {
454
+          this.getMessageByType(this.orderMsgType)
455
+          this.successUnread = false
456
+        } else if (type === 2) {
457
+          this.getMessageByType(this.orderMsgType)
458
+          this.cancelUnread = false
459
+        } else if (type === 0) {
460
+          this.getMainPanelMessageList()
461
+          this.allUnread = false
462
+        }
463
+      }
464
+    },
465
+    async readMsgToOrderDetails (source) {
466
+      // console.log(source)
467
+      if (!source.is_read) {
468
+        let clearMsgByIdResp = await api.clearMessageById({id: source.id})
469
+        if (clearMsgByIdResp.code === 200) {
470
+          this.getMainPanelMessageList()
471
+        }
472
+      }
473
+      if (source.type === 'BUY' || source.type === 'BUY_CARD') return
474
+      // return
475
+      let orderInfoResp = await api.getOrderInfo({ id: source.order_id })
476
+      if (orderInfoResp.code === 200) {
477
+        if (orderInfoResp.data.order_data.status == 0) {
478
+          // 跳转前关闭所有弹窗
479
+          this.msgPupopVisible = false
480
+          this.msgSuccessDetailPupopVisible = false
481
+          this.msgCancelDetailPupopVisible = false
482
+
483
+          this.$router.push({
484
+            path: '/confirmOrder/details',
485
+            query: {
486
+              id: source.order_id
487
+            }
488
+          })
489
+        } else {
490
+          this.msgPupopVisible = false
491
+          this.msgSuccessDetailPupopVisible = false
492
+          this.msgCancelDetailPupopVisible = false
493
+          
494
+          this.$router.push({
495
+            path: "/historicalOrder/details",
496
+            query: {
497
+              id: source.order_id
498
+            }
499
+          });
500
+        }
501
+      } else {
502
+        this.$message.error("未查到此订单")
503
+      }
504
+    },
92 505
   },
93 506
   computed: {
94 507
     routerItems () {
@@ -108,6 +521,14 @@ export default {
108 521
         }
109 522
       }
110 523
       return resultArr;
524
+    },
525
+    orderMsgType: {
526
+      get () {
527
+        return this.MsgType
528
+      },
529
+      set (val) {
530
+        this.MsgType = val
531
+      } 
111 532
     }
112 533
   },
113 534
 }
@@ -117,6 +538,25 @@ export default {
117 538
 <style lang="less" scoped>
118 539
 @import url(../../../style/root.less);
119 540
 
541
+.flex {
542
+  display: flex;
543
+}
544
+.flex-column {
545
+  flex-direction: column;
546
+}
547
+.justify-center {
548
+  justify-content: center;
549
+}
550
+.justify-between {
551
+  justify-content: space-between;
552
+}
553
+.justify-around {
554
+  justify-content: space-around;
555
+}
556
+.items-center {
557
+  align-items: center;
558
+}
559
+
120 560
 .layout {
121 561
   height: 100vh;
122 562
   display: flex;
@@ -181,6 +621,16 @@ export default {
181 621
       .news {
182 622
         width: 24px;
183 623
         height: 24px;
624
+        position: relative;
625
+        .dot {
626
+          width: 8px;
627
+          height: 8px;
628
+          border-radius: 50%;
629
+          background-color: #e54635;
630
+          position: absolute;
631
+          right: 2px;
632
+          top: 2px;
633
+        }
184 634
 
185 635
         img {
186 636
           width: 100%;
@@ -217,4 +667,145 @@ export default {
217 667
     background-color: #f7f8fa;
218 668
   }
219 669
 }
670
+.dot {
671
+  width: 9px;
672
+  height: 9px;
673
+  border-radius: 50%;
674
+  background-color: #FF6945;
675
+  margin-top: 10px;
676
+}
677
+.dot-activated {
678
+  background-color: #fff;
679
+}
680
+.block {
681
+  width: 540px;
682
+  height: 400px;
683
+  padding: 20px;
684
+  box-sizing: border-box;
685
+  background: #ffffff;
686
+  border-radius: 8px;
687
+  position: relative;
688
+  .title {
689
+    display: flex;
690
+    justify-content: space-between;
691
+    font-size: 14px;
692
+    .clear {
693
+      display: flex;
694
+      align-items: center;
695
+      color: #999999;
696
+      img {
697
+        width: 32px;
698
+        height: 32px;
699
+      }
700
+    }
701
+    .txt {
702
+      display: flex;
703
+      align-items: center;
704
+    }
705
+    .delete-pupop {
706
+      width: 32px;
707
+      height: 32px;
708
+      img {
709
+        width: 100%;
710
+        height: 100%;
711
+        display: block;
712
+      }
713
+    }
714
+  }
715
+  .msg-con {
716
+    height: 290px;
717
+    overflow: auto;
718
+    margin-top: 21px;
719
+    .order-msg {
720
+      .success, .cancel {
721
+        .desc {
722
+          img {
723
+            width: 36px;
724
+            height: 36px;
725
+          }
726
+          .title {
727
+            margin-left: 17px;
728
+          }
729
+        }
730
+        .count {
731
+          .time {
732
+            color: #999999;
733
+            margin-bottom: 4px;
734
+          }
735
+          .num {
736
+            width: 25px;
737
+            height: 25px;
738
+            // line-height: 21px;
739
+            // text-align: center;
740
+            display: flex;
741
+            justify-content: center;
742
+            align-items: center;
743
+            padding: 8px;
744
+            box-sizing: border-box;
745
+            color: #ffffff;
746
+            border-radius: 50%;
747
+            background-color: #FF6945;
748
+            
749
+          }
750
+        }
751
+      }
752
+      .cancel {
753
+        margin-top: 23px;
754
+      }
755
+    }
756
+    .ready-msg {
757
+      margin-top: 20px;
758
+      .content-bar {
759
+        .desc-info {
760
+          color: #666666;
761
+          font-weight: 400;
762
+        }
763
+        .desc-time {
764
+          width: 400px;
765
+          margin-top: 5px;
766
+          font-weight: 500;
767
+          line-height: 18px;
768
+        }
769
+        
770
+      }
771
+      .count {
772
+        .time {
773
+          color: #999999;
774
+        }
775
+      }
776
+    }
777
+  }
778
+}
779
+.detail {
780
+  .title {
781
+    .back {
782
+      img {
783
+        width: 24px;
784
+        height: 24px;
785
+      }
786
+    }
787
+    .delete-msg {
788
+      img {
789
+        width: 32px;
790
+        height: 32px;
791
+      }
792
+    }
793
+  }
794
+  .msg-bar {
795
+    margin-top: 18px;
796
+    .info {
797
+      width: 400px;
798
+      line-height: 18px;
799
+      .name {
800
+        font-weight: 600;
801
+        margin-right: 5px;
802
+      }
803
+      .project {}
804
+    }
805
+  }
806
+}
807
+.detail-msg-con {
808
+  height: 330px;
809
+  overflow: auto;
810
+}
220 811
 </style>

+ 10 - 0
src/pages/login/login.vue

@@ -30,6 +30,7 @@
30 30
 </template>
31 31
 
32 32
 <script>
33
+import { mapMutations } from 'vuex'
33 34
 import api from '../../server/home'
34 35
 import axios from 'axios';
35 36
 // import Cookies from "js-cookie"
@@ -46,6 +47,7 @@ export default {
46 47
   watch: {},
47 48
 
48 49
   methods: {
50
+    ...mapMutations(['SAVE_COMMON_VALUE']),
49 51
     onLogin () {
50 52
       let params = {
51 53
         username: this.account,
@@ -54,6 +56,14 @@ export default {
54 56
       api.getToken(params).then(res => {
55 57
         if (res.code == 200) {
56 58
           localStorage.setItem("token", res.data.token)
59
+          this.SAVE_COMMON_VALUE({
60
+            'key': 'token',
61
+            'value': res.data.token
62
+          })
63
+          this.SAVE_COMMON_VALUE({
64
+            'key': 'isLogin',
65
+            'value': true
66
+          })
57 67
           axios.defaults.headers.token = res.data.token
58 68
           this.$router.push({
59 69
             path: '/home'

+ 24 - 0
src/server/home.js

@@ -157,4 +157,28 @@ export default class Home {
157 157
     return $http.get(url.reservedRecords, params)
158 158
   }
159 159
 
160
+  // 清除未读消息  0清除所有 1清除预约成功 2清除取消
161
+  static clearMessage (type) {
162
+    return $http.get(url.clearMessage, type)
163
+  }
164
+
165
+  // 根据Id清除未读消息  消息记录id
166
+  static clearMessageById (id) {
167
+    return $http.get(url.clearMessageById, id)
168
+  }
169
+
170
+  // 获取消息列表 (成功/失败)  1预约成功 2取消预约
171
+  static getMessageByType ({ type, page, limit }) {
172
+    return $http.get(url.getMessageByType, { type, page, limit })
173
+  }
174
+
175
+  // 获取消息列表
176
+  static getMessageList ({ page, limit }) {
177
+    return $http.get(url.getMessageList, { page, limit })
178
+  }
179
+
180
+  // 获取是否有未读消息
181
+  static hasUnreadMessage () {
182
+    return $http.get(url.hasUnreadMessage)
183
+  }
160 184
 }

+ 17 - 2
src/server/urls.js

@@ -94,7 +94,22 @@ export default {
94 94
   // 创建标签
95 95
   schemeSave: '/v2/pad/scheme/save',
96 96
 
97
-    // 用户预约记录
98
-    reservedRecords: '/v2/pad/reserved/index'
97
+  // 用户预约记录
98
+  reservedRecords: '/v2/pad/reserved/index',
99
+
100
+  // 清除未读消息
101
+  clearMessage: '/v2/pad/message/batch_read',
102
+
103
+  // 根据Id清除未读消息
104
+  clearMessageById: '/v2/pad/message/read',
105
+
106
+  // 获取消息列表 (成功/失败)
107
+  getMessageByType: '/v2/pad/message/type_list',
108
+
109
+  // 获取消息列表
110
+  getMessageList: '/v2/pad/message/get_list',
111
+
112
+  // 获取是否有未读消息
113
+  hasUnreadMessage: '/v2/pad/message/get_message'
99 114
 
100 115
 }

+ 2 - 1
src/store/modules/comVal.js

@@ -1,6 +1,7 @@
1 1
 const state = {
2 2
   name: 666,
3
-  token: null
3
+  token: null,
4
+  isLogin: false
4 5
 }
5 6
 
6 7
 const actions = {

+ 0 - 12
vue.config.js

@@ -40,18 +40,6 @@ module.exports = {
40 40
     // ]
41 41
   },
42 42
   css: {
43
-    // loaderOptions: {
44
-    //   postcss: {
45
-    //     plugins: [
46
-    //       require('postcss-pxtorem')({
47
-    //           // TODO:这个值该怎么算
48
-    //         rootValue: 32, //结果为:设计稿元素尺寸/16,比如元素宽320px,最终页面会换算成 20rem
49
-    //         selectorBlackList: ['van'], // 忽略转换正则匹配项
50
-    //         propList: ['*'],  //要转换的匹配项
51
-    //       })
52
-    //     ]
53
-    //   }
54
-    // }
55 43
     loaderOptions: {
56 44
       postcss: {
57 45
           plugins: [