jsh_erp_app/pages/index/components/notice-item.vue

<template>
  <view class="notice-item">
    <view class="item-head">
      <view class="item-head-msg">
        <view class="image-box">
          <u-badge
            type="error"
            :isDot="true"
            :show="!item.isRead"
            :absolute="true"
            :offset="[-2, -2]"
          ></u-badge>
          <image :src="img" mode=""></image>
        </view>
        <view>{{ item.type }}</view>
      </view>
      <view class="time-box">
        {{ $u.timeFormat(item.time, "hh:MM:ss") }}
      </view>
    </view>
    <view class="item-cont">
      您有1条新的{{ item.type }}（单号：{{
        item.content
      }}），请点击查看并及时处理！
    </view>
    <view class="item-footer" @click="toDetail">
      <view>查看详情</view>
      <u-icon name="arrow-right" color="#7E838D"></u-icon>
    </view>
  </view>
</template>

<script>
export default {
  props: {
    item: {
      type: Object,
      default: () => {},
    },
  },
  computed: {
    img() {
      const type = this.item.type;
      let src = "";
      switch (type) {
        case "拣货任务":
          src = require("@/static/image/home/icon-jhrw.png");
          break;
        case "采购入库":
          src = require("@/static/image/home/icon-cgrk.png");
          break;
        case "盘点任务":
          src = require("@/static/image/home/icon-pdrw.png");
          break;
        case "复核任务":
          src = require("@/static/image/home/icon-fhrw.png");
          break;

        default:
          break;
      }
      return src;
    },
  },
  methods: {
    toDetail() {
      this.$emit("toDetail", { ...this.item });
    },
  },
};
</script>

<style lang="scss" scoped>
.notice-item {
  border-radius: 16px;
  background: #fff;
  padding: 24rpx 24rpx 0;
  margin-bottom: 24rpx;
  .item-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    &-msg {
      display: flex;
      align-items: center;
      color: #333;
      font-family: "PingFang SC";
      font-size: 32rpx;
      font-weight: bold;
      .image-box {
        position: relative;
        margin-right: 24rpx;
        image {
          width: 48rpx;
          height: 48rpx;
          z-index: 2;
        }
        ::v-deep .u-badge {
          z-index: 3;
        }
      }
    }
  }

  .item-cont {
    color: #666;
    font-family: "PingFang SC";
    font-size: 28rpx;
    font-weight: 400;
    padding: 17rpx 0 24rpx;
    border-bottom: 1px solid #f4f4f4;
  }
  .item-footer {
    height: 88rpx;
    display: flex;
    align-items: center;
    justify-content: space-between;
    color: #333;
    font-family: "PingFang SC";
    font-size: 28rpx;
    font-weight: 400;
  }
}
</style>