suerprisePlus
2024-06-05 3ed05b2ea37c4da7b0b4923991deb1d27f415027
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
<template>
  <div class="wrapper">
    <div class="notice" style="resolve">
      <JwChat-empty v-if="!info.notice" size="8rem" />
      <P style="padding-left:0.2rem">{{info.tip}}</P>
      <p style="font-size:0.8rem;margin-top:0.5rem;padding:0 .2rem">{{info.notice}}</p>
    </div>
    <div class="userList">
      <div>{{info.listTip}} ({{info.list.length}})</div>
      <ul>
        <li v-for="item in info.list" :key="item.name">
          <JwChat-item size="25" :config="item" @click="bindClick" />
        </li>
      </ul>
    </div>
  </div>
</template>
 
<script>
export default {
  name: 'JwChat-rightbox',
  props: {
    config: Object
  },
  computed: {
    info () {
      const config = this.config
      let tip = '群公告:'
      let notice = ''
      let listTip = '组成员'
      let list = []
      if (this.config) {
        config.tip && (tip = config.tip)
        config.notice && (notice = config.notice)
        config.listTip && (listTip = config.listTip)
        config.list && (list = config.list)
      }
      return {
        tip,
        notice,
        listTip,
        list
      }
    }
  },
  methods: {
    bindClick (type) {
      this.$emit('click', type)
    }
  }
}
</script>
<style scoped>
.wrapper {
  padding: 0px;
  margin: 0px;
  height: 100%;
  width: 100%;
}
li{
  list-style: none;
}
.notice {
  height: 30%;
  text-align: left;
  position: relative;
}
.userList {
  height: 70%;
  text-align: left;
  border-top: 1px solid rgba(0, 0, 0, 0.1);
}
.userList li {
  height: 2rem;
  line-height: 2rem;
  padding: 0.2rem;
}
</style>