crm-mobile/pages_message/backlog/detailExaminationItem.vue

<template>
  <view
    class="examine-item"
    @click="handleToDetail">
    <view class="content">
      {{ itemData.content || '' }}
    </view>
    <view class="time">
      {{ itemData.createTime }}
    </view>
    <view v-if="itemData.createUser" class="info">
      <wk-avatar
        :name="itemData.createUser.realname"
        :avatar="itemData.createUser.img"
        :size="12"
        class="avatar" />
      <view class="info-text">
        由{{ itemData.createUser.realname }}提交的{{ itemData.categoryTitle }}
      </view>
      <view
        v-if="statusObj"
        :style="{
          backgroundColor: statusObj.bg,
          color: statusObj.color
        }"
        class="status">
        {{ statusObj.label }}
      </view>
    </view>
  </view>
</template>

<script>
  import { mapGetters } from 'vuex'

  export default {
    name: 'DetailExaminationItem',
    props: {
      itemData: {
        type: Object,
        required: true
      }
    },
    computed: {
			...mapGetters({
				calcStatus: 'base/calcStatus'
			}),
			statusObj() {
				return this.calcStatus(this.itemData.examineStatus)
			}
    },
    methods: {
      handleToDetail() {
        this.$Router.navigateTo({
          url: '/pages_examine/detail',
          query: {
            id: this.itemData.examineId,
            examineId: this.itemData.categoryId
          }
        })
      }
    }
  }
</script>

<style scoped lang="scss">
	.examine-item {
		width: 100%;
		padding: 20rpx 32rpx;
		background-color: white;
		border-bottom: 1rpx solid $border-color;

		.content {
			font-size: $wk-font-large;
			color: $dark;
		}
		.time {
			font-size: $wk-font-sm;
			color: $light;
			margin-top: 10rpx;
		}
		.info {
			margin-top: 10rpx;
			@include left;
			.avatar {
				width: 60rpx;
				height: 60rpx;
				margin-right: 15rpx;
			}
			.info-text {
				font-size: $wk-font-sm;
				color: $gray;
				flex: 1;
			}
			.status {
				width: 130rpx;
				height: 40rpx;
				font-size: 26rpx;
				font-weight: 500;
				line-height: normal;
				border-radius: 4rpx;
				margin-left: 10rpx;
				@include center;
			}
		}
	}
</style>