dvcp_v2_wxcp_app/src/saas/AppCountryAlbum/Message.vue

<template>
  <div class="message">
    <div class="message-item" v-for="(item, index) in list" :key="index">
      <h2>{{ item.createTime }}</h2>
      <div>{{ item.msg }}</div>
    </div>
    <AiEmpty v-if="!list.length && isMore"></AiEmpty>
  </div>
</template>

<script>
  export default {
    name: 'Message',
    appName: '工作相册',

    data () {
      return {
        size: 15,
        current: 1,
        isMore: false,
        list: []
      }
    },

    onLoad () {
      this.getList()
    },

    methods: {
      mapType (type) {
        return {
          '0': '照片查看',
          '1': '照片上传',
          '2': '打卡统计'
        }[type]
      },

      getList () {
        if (this.isMore) return

        this.$loading()
        this.$http.post(`/api/sysmessage/list`, null, {
          params: {
            size: 10,
            current: this.current
          }
        }).then(res => {
          if (res.code === 0) {
            if (this.current > 1) {
              this.list = [...this.list, ...res.data.records].map(v => {
                let msg = v.content
                if (v.channel === '2') {
                  msg = ''
                  JSON.parse(v.content).forEach((item, index) => {
                    msg = msg + `${item.key}：${item.value}人` + (JSON.parse(v.content).length === index + 1 ? '' : '，')
                  })
                } else {
                  msg = ''
                  JSON.parse(v.content).forEach((item, index) => {
                    msg = msg + `${item.key}：${item.value}` + (JSON.parse(v.content).length === index + 1 ? '' : '，')
                  })
                }
                return {
                  ...v,
                  msg,
                  typeName: this.mapType(v.channel)
                }
              })
            } else {
              this.list = res.data.records.map(v => {
                let msg = v.content
                if (v.channel === '2') {
                  msg = ''
                  JSON.parse(v.content).forEach((item, index) => {
                    msg = msg + `${item.key}：${item.value}人` + (JSON.parse(v.content).length === index + 1 ? '' : '，')
                  })
                } else {
                  msg = ''
                  JSON.parse(v.content).forEach((item, index) => {
                    msg = msg + `${item.key}：${item.value}` + (JSON.parse(v.content).length === index + 1 ? '' : '，')
                  })
                }
                return {
                  ...v,
                  msg,
                  typeName: this.mapType(v.channel)
                }
              })
            }

            if (res.data.records.length < 10) {
              this.isMore = true

              return false
            }

            this.current = this.current + 1
          }
        })
      }
    },

    onReachBottom () {
      this.getList()
    }
  }
</script>

<style lang="scss" scoped>
  .message {
    padding-bottom: 60px;

    .message-item {
      h2 {
        padding: 48px 0 32px;
        color: #666666;
        font-size: 32px;
        font-weight: normal;
        text-align: center;
      }

      div {
        margin: 0 32px;
        padding: 32px;
        box-shadow: 0px 8px 16px 0px rgba(0, 0, 0, 0.02);
        font-size: 32px;
        color: #333333;
        line-height: 44px;
        text-align: justify;
        border-radius: 16px;
        background: #fff;
      }
    }
  }
</style>