|
@@ -0,0 +1,78 @@
|
|
1
|
+<template>
|
|
2
|
+<div>
|
|
3
|
+ <img src="../assets/images/bg.jpg" class="centerLabel cover bg" alt>
|
|
4
|
+ <div style="position: relative;z-index: 101;color: #fff;" @click="newData(newinfo)"><span>增加新用户</span></div>
|
|
5
|
+ <div style="position: relative;z-index: 101;color: #fff;" @click="newData(vipAinfo)"><span>增加张先生</span></div>
|
|
6
|
+ <div style="position: relative;z-index: 101;color: #fff;" @click="newData(vipBinfo)"><span>增加王女士</span></div>
|
|
7
|
+ <div style="position: relative;z-index: 101;color: #fff;" @click="newData(vipCinfo)"><span>增加许女士</span></div>
|
|
8
|
+ <div v-if="users.length>0" style="position: relative;z-index: 101;">
|
|
9
|
+ <ul class="centerLabel userList">
|
|
10
|
+ <!-- <userList :user-list='users'></userList> -->
|
|
11
|
+ <div v-for="(user, k) in users" :key="k" :item="user">
|
|
12
|
+ <span>{{user.firstName}}</span>
|
|
13
|
+ <span>{{user.words}}</span>
|
|
14
|
+ </div>
|
|
15
|
+ </ul>
|
|
16
|
+ </div>
|
|
17
|
+</div>
|
|
18
|
+</template>
|
|
19
|
+
|
|
20
|
+<script>
|
|
21
|
+export default {
|
|
22
|
+ data () {
|
|
23
|
+ return {
|
|
24
|
+ users: [],
|
|
25
|
+ newinfo: {
|
|
26
|
+ firstName: '',
|
|
27
|
+ classId: '1',
|
|
28
|
+ words: '欢迎光临'
|
|
29
|
+ },
|
|
30
|
+ vipAinfo: {
|
|
31
|
+ firstName: '张先生',
|
|
32
|
+ classId: '2',
|
|
33
|
+ words: '您好'
|
|
34
|
+ },
|
|
35
|
+ vipBinfo: {
|
|
36
|
+ firstName: '王女士',
|
|
37
|
+ classId: '2',
|
|
38
|
+ words: '您好~'
|
|
39
|
+ },
|
|
40
|
+ vipCinfo: {
|
|
41
|
+ firstName: '许女士',
|
|
42
|
+ classId: '2',
|
|
43
|
+ words: 'hello'
|
|
44
|
+ }
|
|
45
|
+ }
|
|
46
|
+ },
|
|
47
|
+ methods: {
|
|
48
|
+ newData (info) {
|
|
49
|
+ if (info.classId === '1' && this.users.filter(x => x.classId === '1').length > 0) {
|
|
50
|
+ this.users = this.users.map((x) => {
|
|
51
|
+ if (x.classId === '1') {
|
|
52
|
+ return {...x, createdata: Date.parse(new Date())}
|
|
53
|
+ } else {
|
|
54
|
+ return x
|
|
55
|
+ }
|
|
56
|
+ })
|
|
57
|
+ } else {
|
|
58
|
+ if (this.users.length >= 3) {
|
|
59
|
+ this.users.splice(0, 1)
|
|
60
|
+ }
|
|
61
|
+ this.users = [...this.users, {...info, createdata: Date.parse(new Date())}]
|
|
62
|
+ }
|
|
63
|
+ }
|
|
64
|
+ },
|
|
65
|
+ created () {
|
|
66
|
+ const _that = this
|
|
67
|
+ window.setInterval(() => {
|
|
68
|
+ let dels = _that.users.filter(x => Date.parse(new Date()) - x.createdata > 5000)
|
|
69
|
+ dels.map(x => {
|
|
70
|
+ _that.users.splice(this.users.findIndex(i => i.createdata === x.createdata), 1)
|
|
71
|
+ })
|
|
72
|
+ }, 100)
|
|
73
|
+ }
|
|
74
|
+}
|
|
75
|
+</script>
|
|
76
|
+
|
|
77
|
+<style lang="scss" scoped>
|
|
78
|
+</style>
|