crm-mobile/pages_message/messageIndex.vue

<template>
  <view class="uni-app">
    <view class="status-bar" />
    <view class="main-container">
      <!-- #ifdef MP-WEIXIN -->
      <wk-nav-bar
        :command-list="commandList"
        title="消息"
        @command="handleCommand" />
      <!-- #endif -->
      <!-- #ifndef MP-WEIXIN -->
      <wk-nav-bar title="消息">
<!--        <text
          class="read-all"
          @click="handleReadAll">
          全部已读
        </text>  -->
      </wk-nav-bar>
      <!-- #endif -->
			
      <view class="list-view">
        <message-list v-if="showList" />
      </view>
    </view>
  </view>
</template>

<script>
  import { ReadAllMessage } from '@/api/admin.js'
	
  import MessageList from './messageList.vue'
	
  export default {
    name: 'MessageIndex',
    components: {
      MessageList
    },
    data() {
      return {
        showList: false,
				
        commandList: [
          {
            label: '全部已读',
            imgIcon: 'dealStatus',
            value: 'readAll'
          }
        ]
      }
    },
    onShow() {
      this.showList = false
      this.$nextTick(() => {
        this.showList = true
      })
    },
    methods: {
      handleCommand(command) {
        console.log('command: ', command)
        if (command.value === 'readAll') {
          this.handleReadAll()
        }
      },
			
      handleReadAll() {
        ReadAllMessage().then(res => {
          this.$toast('操作成功')
					
          this.showList = false
          this.$nextTick(() => {
            this.showList = true
          })
        }).catch(() => {})
      }
    }
  }
</script>

<style scoped lang="scss">
	.list-view {
		flex: 1;
		overflow-y: hidden;
	}
	
	.read-all {
		font-size: $wk-font-base;
		margin-right: 20rpx;
	}
</style>