crm-mobile/pages_examine/components/examineStatus.vue

<template>
  <view class="examine-status">
    <view class="container-header">
      <view v-if="item.createUser" class="container-msg">
        <wk-avatar :name="item.createUser.realname" :avatar="item.createUser.img" :size="14" class="avatar" />
        <view class="container-user-msg">
          <view>{{ item.createUser.realname }}</view>
          <view class="time">
            {{ item.createTime }}
          </view>
        </view>
      </view>
      <template v-if="statusShow[item.examineStatus]">
        <view v-if="isList" class="container-header-right">
          <text class="status-icon" :class="statusShow[item.examineStatus].color" />
          <text>{{ item.categoryTitle }}-{{ statusShow[item.examineStatus].text }}</text>
        </view>
        <view v-if="!isList" class="status-img">
          <!-- 审核状态 -->
          <image
            :class="statusShow[item.examineStatus].className"
            :src="statusShow[item.examineStatus].src"
            class="pic" />
        </view>
      </template>
    </view>
  </view>
</template>

<script>
  export default {
    name: 'ExamineStatus',
    props: {
      // 列表页还是详情页
      isList: {
        type: Boolean,
        default: true
      },
      item: {
        type: Object,
        required: true
      }
    },
    data() {
      return {
        // 审核状态 0 未审核 1 审核通过 2 审核拒绝 3 审核中 4 已撤回
        statusShow: {
          0: {text: '待审', src: this.$static('images/oa/examine_await.png'), className: 'await-examine', color: 'warning'},
          1: {text: '通过', src: this.$static('images/oa/examine_pass.png'), className: 'examine-feedback', color: 'success'},
          2: {text: '拒绝', src: this.$static('images/oa/examine_refuse.png'), className: 'examine-feedback', color: 'error'},
          3: {text: '审批中', src: this.$static('images/oa/examining.png'), className: 'await-examine', color: 'warning'},
          4: {text: '撤回', src: this.$static('images/oa/examine_recall.png'), className: 'examine-feedback', color: 'error'},
        },
        status: 1
      }
    },
  }
</script>
<style lang="scss" scoped>
  .examine-status {
    background-color: white;
    padding: 10rpx 0;

    .container-header {
      position: relative;
      display: flex;
      align-items: center;
      justify-content: space-between;

      .container-msg {
        display: flex;
        align-items: center;

        .avatar {
          width: 80rpx;
          height: 80rpx;
          border-radius: 50%;
        }

        .container-user-msg {
          font-size: 30rpx;
          padding-left: 20rpx;

          .time {
            color: $light;
            font-size: 24rpx;
          }
        }
      }

      .container-header-right {
        display: flex;
        align-items: center;
        font-size: 26rpx;

        .status-icon {
          width: 18rpx;
          height: 18rpx;
          border-radius: 50%;
          margin-right: 15rpx;
        }
      }

      .status-img {
        position: absolute;
        right: 0;
        top: 0;

        .await-examine {
          margin-top: 30rpx;
          width: 138rpx;
          height: 85rpx;
        }

        .examine-feedback {
          width: 160rpx;
					height: 154rpx;
        }
      }
    }
  }

  .success {
    background-color: $success;
  }

  .warning {
    background-color: $warning;
  }

  .error {
    background-color: $error;
  }
</style>