crm-mobile/pages_examine/components/examineItem.vue

<template>
  <view
    class="examine-item"
    @click="handleToDetail">
    <view class="content">
      {{ item.content || '' }}
    </view>
    <view class="time">
      {{ item.createTime }}
    </view>
    <view v-if="item.createUser" class="info">
      <wk-avatar
        :name="item.createUser.realname"
        :avatar="item.createUser.img"
        :size="12"
        class="avatar" />
      <view class="info-text">
        由{{ item.createUser.realname }}提交的{{ item.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: '',
    props: {
      item: {
        type: Object,
        required: true
      },
      type: {
        type: String,
        default: 'examine'
      }
    },
    data() {
      return {}
    },
    computed: {
			...mapGetters({
				calcStatus: 'base/calcStatus'
			}),
			statusObj() {
				return this.calcStatus(this.item.examineStatus)
			}
    },
    methods: {
      handleToDetail() {
        this.$Router.navigateTo({
          url: '/pages_examine/detail',
          query: {
            id: this.item.examineId,
            examineId: this.item.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>