crm-mobile/pages_message/message/noticeItem.vue

<template>
  <uni-swipe-action>
    <uni-swipe-action-item>
      <view class="notice-item" @click="handleToDetail">
        <view class="content">
          <view class="left">
            {{ itemData.title }}
          </view>
          <view v-if="itemData.isRead === 0" class="right dot" />
        </view>
        <view class="time">
          {{ itemData.createTime }}
        </view>
      </view>
			
      <view
        slot="right"
        class="control-box"
        @click="handleDelete">
        删除
      </view>
    </uni-swipe-action-item>
  </uni-swipe-action>
</template>

<script>
  import { ReadMessage } from 'API/admin'
	
  export default {
    name: 'NoticeItem',
    props: {
      itemData: {
        type: Object,
        required: true
      }
    },
    data() {
      return {}
    },
    methods: {
      async handleToDetail() {
        try {
          await this.readMessage()
        } catch {
          return
        }
				
        this.$Router.navigateTo({
          url: '/pages_oa/notice/detail',
          query: {
            id: this.itemData.typeId
          }
        })
      },
			
      readMessage() {
        return new Promise((resolve, reject) => {
          ReadMessage({
            messageId: this.itemData.messageId
          }).then(() => {
            resolve(true)
          }).catch(() => {
            reject(false)
          })
        })
      },
			
      handleDelete(evt) {
        this.$emit('delete', evt)
      }
    }
  }
</script>

<style scoped lang="scss">
	.notice-item {
		width: 100%;
		padding: 15rpx 32rpx;
		background-color: white;
		border-bottom: 1rpx solid $border-color;
		overflow: hidden;
		.content {
			width: 100%;
			margin: 5px 0;
			@include left;
			.left {
				flex: 1;
				font-size: $wk-font-medium;
				color: $dark;
				text-overflow: ellipsis;
				white-space: nowrap;
				overflow: hidden;
			}
			.dot {
				width: 15rpx;
				height: 15rpx;
				background-color: red;
				border-radius: 50%;
				margin-left: 15rpx;
			}
		}
		.time {
			width: 100%;
			color: $light;
			font-size: $wk-font-sm;
			text-align: right;
		}
	}
	
	.control-box {
		width: 150rpx;
		color: white;
		font-size: $wk-font-base;
		background-color: #E60000;
		@include center;
	}
</style>