crm-mobile/pages_message/messageList.vue

<template>
  <view class="message-list">
    <view
      v-for="(item, index) in typeList"
      :key="index"
      class="list-item"
      @click="handleToDetail(item)">
      <image :src="$static(item.icon)" class="type-icon" />
      <view class="list-item-body">
        <view class="top">
          <view class="type-name">
            {{ item.label }}
          </view>
          <view
            v-if="item.firstData"
            class="type-time">
            {{ item.firstData | formatTime }}
          </view>
        </view>
        <view class="content">
          <view class="type-content">
            {{ item.desc }}
          </view>
          <view v-if="item.num && item.num > 0" class="num">
            {{ item.num > 99 ? '99+' : item.num }}
          </view>
        </view>
      </view>
    </view>
  </view>
</template>

<script>
  import { QueryUnreadCount, QueryMessageList } from 'API/admin'

  import config from './message.js'
  import { deepCopy } from '@/utils/lib.js'
  import moment from 'moment'
  import { mapActions } from 'vuex'

  export default {
    name: 'MessageList',
    filters: {
      formatTime(firstData) {
        if (!firstData.createTime) return '--'
        return moment(firstData.createTime).format('yyyy-MM-DD')
      }
    },
    data() {
      return {
        loading: false,
        typeList: deepCopy(config.typeList)
      }
    },
    mounted() {
      this.getMessage()
    },
    wkActivated() {
      this.getMessage()
    },
    methods: {
    ...mapActions({
      setBacklogNum: 'base/setBacklogNum'
    }),
    getMessage() {
      if (this.loading) return
      this.loading = true
      QueryUnreadCount().then(res => {
        this.typeList.forEach((item, index) => {
          if (res.hasOwnProperty(item.field)) {
            item.num = res[item.field] || 0
            if (item.num > 0) {
              this.getFirstMessage(index)
              this.$set(this.typeList, index, item)
            } else {
              item.desc = '暂无新消息'
              this.$set(this.typeList, index, item)
            }
          }
        })
        this.setBacklogNum(res)
        this.loading = false
      }).catch(() => {
        this.loading = false
      })
    },

    getFirstMessage(index) {
      QueryMessageList({
        label: this.typeList[index].value,
        page: 1,
        limit: 1,
        isRead: 0
      }).then(res => {
        this.typeList[index].firstData = res.list[0]
        this.typeList[index].desc = config.getMsgStr(res.list[0]).join('')
        this.$set(this.typeList, index, this.typeList[index])
      }).catch()
    },

    handleToDetail(item) {
      this.$Router.navigateTo({
        url: '/pages_message/messageDetail',
        query: {
          type: item.value
        }
      })
    }
    }
  }
</script>

<style scoped lang="scss">
	.message-list {
		width: 100%;
		height: 100%;
		overflow: auto;
		padding-top: 20rpx;

		.list-item {
			width: 100%;
			background-color: white;
			padding: 20rpx 32rpx;
			border-bottom: 1rpx solid $border-color;
			@include left;

			&:last-child {
				border-bottom: 0 none;
			}

			.type-icon {
				width: 80rpx;
				height: 80rpx;
				border-radius: 50%;
				margin-right: 20rpx;
			}
			.list-item-body {
				flex: 1;
				overflow: hidden;
				.top {
					@include left;
					.type-name {
						flex: 1;
						font-weight: 500;
						font-size: $wk-font-medium;
						margin-right: 20rpx;
						@include ellipsis;
					}
					.type-time {
						color: $light;
						font-size: $wk-font-sm;
					}
				}
				.content {
					width: 100%;
					margin-top: 10rpx;
					@include left;
					.type-content {
						flex: 1;
						font-size: $wk-font-base;
						color: $gray;
						margin-right: 20rpx;
						@include ellipsis;
					}
					.num {
						min-width: 36rpx;
						height: 36rpx;
						line-height: 36rpx;
						font-size: 24rpx;
						padding: 0 5rpx;
						color: white;
						border-radius: 36rpx;
						background-color: $error;
						@include center;
					}
				}
			}
		}
	}
</style>