crm-mobile/pages_message/messageDetail.vue

<template>
  <view class="uni-app">
    <view class="status-bar" />
    <view class="main-container">
      <wk-nav-bar
        :command-list="commandList"
        :title="typeObj.label"
        @command="handleCommand" />

      <wk-scroll-view
        :status="listStatus"
        class="list-scroll"
        @refresh="getList(true)"
        @loadmore="getList()">
        <template v-if="type === 4">
          <notice-item
            v-for="(item, index) in listData"
            :key="item.messageId"
            :item-data="item"
            @delete="deleteOne(index)" />
        </template>
        <template v-else>
          <message-item
            v-for="(item, index) in listData"
            :key="item.messageId"
            :item-data="item"
            @read="handlerRead(index)"
            @delete="deleteOne(index)" />
        </template>
      </wk-scroll-view>
    </view>

    <uni-popup ref="popup" type="dialog">
      <uni-popup-dialog
        :content="dialogMsg"
        :duration="2000"
        type="warning"
        @confirm="deleteAllRead" />
    </uni-popup>
  </view>
</template>

<script>
  import {
    QueryMessageList,
    ReadAllMessage,
    MessageClear,
    MessageDeleteById
  } from 'API/admin'

  import MessageItem from './message/messageItem.vue'
  import NoticeItem from './message/noticeItem.vue'

  import mainListMixins from '@/mixins/mainList.js'
  import config from './message.js'

  export default {
    name: 'MessageDetail',
    components: {
      MessageItem,
      NoticeItem
    },
    mixins: [mainListMixins],
    data() {
      return {
        type: null,
        listData: [],

        commandList: [
          {
            label: '全部已读',
            imgIcon: 'dealStatus',
            value: 'readAll'
          },
          {
            label: '删除已读',
            imgIcon: 'delete',
            value: 'delete'
          }
        ],

        dialogMsg: ''
      }
    },
    computed: {
      typeObj() {
        if (!this.type) return {}
        return config.typeList.find(o => o.value === this.type) || {}
      }
    },
    onLoad(options) {
      this.type = Number(options.type)
      this.getList()
    },
    methods: {
      getList(refresh = false) {
        this.listStatus = 'loading'
        if (refresh) {
          this.listParams.page = 0
        }
        this.listParams.page++

        QueryMessageList({
					...this.listParams,
					label: this.type
        }).then(res => {
          if (this.listParams.page === 1) {
            this.listData = []
          }
          this.listData = this.listData.concat(res.list)
          if (res.hasOwnProperty('lastPage')) {
            this.listStatus = res.lastPage ? 'noMore' : 'more'
          } else {
            this.listStatus = res.list.length === 0 ? 'noMore' : 'more'
          }
        }).catch(() => {
          this.listStatus = 'more'
        })
      },

      handlerRead(index) {
        this.listData[index].isRead = 1
        this.$set(this.listData, index, this.listData[index])
      },

      handleCommand(command) {
        if (command.value === 'readAll') {
          // 全部标记已读
          ReadAllMessage({
            label: this.type
          }).then(res => {
            this.$toast('操作成功')

            this.getList(true)
          }).catch(() => {})
        } else if (command.value === 'delete') {
          this.dialogMsg = '确定删除全部已读消息？'
          this.$refs.popup.open()
        }
      },

      deleteAllRead(next) {
        // 删除已读
        next()
        MessageClear({
          label: this.type
        }).then(res => {
          this.$toast('操作成功')

          this.getList(true)
        }).catch(() => {})
      },

      deleteOne(index) {
        MessageDeleteById({
          messageId: this.listData[index].messageId
        }).then(res => {
          this.$toast('操作成功')

          this.listData.splice(index, 1)
        }).catch(() => {})
      }
    }
  }
</script>

<style scoped lang="scss">
	.main-container {
		.list-scroll {
			flex: 1;
			padding-top: 20rpx;
			overflow: hidden;
		}
	}
</style>