crm-mobile/pages_message/message/messageItem.vue

<template>
  <uni-swipe-action>
    <uni-swipe-action-item>
      <view class="message-item" @click="handleToDetail">
        <wk-avatar
          :name="itemData.realname"
          :avatar="itemData.img"
          :size="14"
          class="avatar" />
        <view class="wrapper">
          <view class="cell">
            <view class="left info">
              {{ itemData.realname || '' }}{{ infoTxt }}
            </view>
            <view v-if="itemData.isRead === 0" class="right dot" />
          </view>

          <view class="cell">
            <view class="left centent">
              {{ itemData.title }}
            </view>
          </view>

          <view class="cell">
            <view class="left info">
              {{ itemData.createTime }}
            </view>
          </view>
        </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: 'MessageItem',
    props: {
      itemData: {
        type: Object,
        required: true
      }
    },
    data() {
      return {}
    },
    computed: {
      infoTxt() {
        return {
          1: '将任务分配给您',
          2: '邀请您参与任务',
          3: '将任务标记结束',
          4: '回复了您的日志',
          5: '将日志发送给您',
          6: '拒绝您的审批',
          7: '已经审核通过您的审批',
          8: '您有一个新公告',
          9: '邀请您参与日程',
          10: '拒绝您的合同审批',
          11: '已经审核通过您的合同',
          12: '拒绝您的回款审批',
          13: '已经审核通过您的回款',
          14: '导入客户数据',
          15: '取消导入客户数据',
          16: '导入联系人数据',
          17: '取消导入联系人数据',
          18: '导入线索数据',
          19: '取消导入线索数据',
          20: '导入产品数据',
          21: '取消导入产品数据',
          22: '将您添加为商机的成员',
          23: '将您添加为客户的成员',
          24: '将您添加为合同的成员',
          25: '提交了审批',
          26: '提交了合同审批',
          27: '提交了回款审批',
          28: '退出了您商机的团队',
          29: '退出了您客户的团队',
          30: '退出了您合同的团队',
          31: '将您移出了商机的团队',
          32: '将您移出了客户的团队',
          33: '将您移出了合同的团队',
          34: '回复了您评论的日志',
          35: '拒绝了您的审批',
          36: '已经审核通过您的发票',
          37: '提交了发票审批',
          41: '将文档分享给您',
          77: '点赞了你的日志'
        }[this.itemData.type] || ''
      }
    },
    methods: {
      async handleToDetail() {
        console.log(this.itemData)
        try {
          await this.readMessage()
          this.$emit('read')
        } catch {
          return
        }
        const type = this.itemData.type
        const id = this.itemData.typeId
        let url = ''
        let query = { id: id }

        if ([1, 2, 3].includes(type)) {
          url = '/pages_task/detail'
        } else if ([4, 5, 34, 77].includes(type)) {
          url = '/pages_log/detail'
        } else if ([6, 7, 25, 35].includes(type)) {
          url = '/pages_examine/detail'
        } else if ([8].includes(type)) {
          url = '/pages_oa/notice/detail'
        } else if ([10, 11, 26].includes(type)) {
          url = '/pages_crm/contract/detail'
        } else if ([12, 13, 27].includes(type)) {
          url = '/pages_crm/receivables/detail'
        } else if ([22, 28, 31].includes(type)) {
          url = '/pages_crm/business/detail'
        } else if ([23, 29, 32].includes(type)) {
          url = '/pages_crm/customer/detail'
        } else if ([24, 30, 33].includes(type)) {
          url = '/pages_crm/contract/detail'
        }

        if (url) {
          this.$Router.navigateTo({
            url,
            query
          })
        }
      },

      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">
	.message-item {
		width: 100%;
		padding: 15rpx 32rpx;
		background-color: white;
		border-bottom: 1rpx solid $border-color;
		@include left;
		.avatar {
			width: 80rpx;
			height: 80rpx;
			margin-right: 20rpx;
		}
		.wrapper {
			flex: 1;
			overflow: hidden;
			.cell {
				width: 100%;
				font-size: $wk-font-sm;
				@include left;
				.left {
					flex: 1;
					@include ellipsis;
				}
				.info {
					color: $light;
				}
				.dot {
					width: 15rpx;
					height: 15rpx;
					background-color: red;
					border-radius: 50%;
					margin-left: 15rpx;
				}
				.centent {
					width: 100%;
					font-size: $wk-font-base;
					color: $dark;
					margin: 5px 0;
					@include ellipsis;
				}
			}
		}
	}

	.control-box {
		width: 150rpx;
		color: white;
		font-size: $wk-font-base;
		background-color: #E60000;
		@include center;
	}
</style>