zcb_APP/components/messageItem.vue

<template>
  <u-swipe-action>
    <u-swipe-action-item :options="options" @click="deleteMessage">
      <view class="message_box" @click="$navTo('/pages/myMessage/chat')">
        <view class="message">
          <view class="avatar" v-if="type === 'message'">
            <image
              class="w-88 h-88 radio-circle"
              src="/static/logo.png"
              mode="scaleToFill"
            />
          </view>
          <view class="right_content">
            <view class="w flex ai_top">
              <view class="ellipsis text-32 text-400 text-303030">
                {{
                  type === "message"
                    ? "用户名称用户名称用户名称用户名称用户名称用户名称"
                    : "消息类型：接单 "
                }}
              </view>
              <view class="text-20 text-500 text-7E7E7E">2025/09/04 20:00</view>
            </view>
            <view
              class="w flex ai_center"
              :class="type === 'message' ? 'mgt-4' : 'mgt-8'"
            >
              <view class="ellipsis text-28 text-400 text-B9B9B9">
                消息内容：
                {{
                  type === "message"
                    ? "不好意思，您在提交一次不好意思，您在提交一次"
                    : "YHY "
                }}
              </view>
              <view v-if="type === 'message'" class="num">99+</view>
              <view v-else>
                <view class="task_type task_order"> 用户已接单 </view>
                <!-- <view class="task_type task_check"> 审核已通过 </view>
                <view class="task_type task_submit"> 用户已提交任务 </view>
                <view class="task_type task_end"> 距离悬赏任务结束时间还有10分钟 </view>
                <view class="task_type task_pass"> 订单审核已通过 </view>
                <view class="task_type task_not_pass"> 订单审核未通过 </view> -->
              </view>
            </view>
          </view>
        </view>
      </view>
    </u-swipe-action-item>
  </u-swipe-action>
</template>

<script>
export default {
  props: {
    type: {
      type: String,
      default: "message",
    },
  },
  data() {
    return {
      options: [
        {
          text: "删除",
          style: {
            backgroundColor: "#E02E24",
            width: "128rpx",
            marginTop: "1rpx",
            height: "126rpx",
            fontSize: "24rpx",
          },
        },
      ],
    };
  },
  onLoad() {},
  methods: {
    deleteMessage(e) {
      this.$emit('delete-msg',e)
    },
  },
};
</script>

<style scoped lang="scss">
.message_box {
  width: 100vw;
  padding: 0 48rpx;
  background-color: #ffffff;
  margin-bottom: 16rpx;

  .message {
    width: 100%;
    height: 126rpx;
    display: flex;
    align-items: center;
    justify-content: center;
    border-bottom: 2rpx solid #f2f2f7;
    .avatar {
      width: 88rpx;
      margin-right: 24rpx;
    }

    .right_content {
      height: 100%;
      flex: 1;
      display: flex;
      flex-direction: column;
      justify-content: center;

      .ellipsis {
        flex: 1;
        width: 0;
        overflow: hidden;
        white-space: nowrap;
        text-overflow: ellipsis;
      }
      .num {
        display: inline-flex;
        height: 40rpx;
        padding: 4rpx 16rpx;
        justify-content: center;
        align-items: center;
        border-radius: 64rpx;
        background: #e02e24;
        color: #ffffff;
        text-align: center;
        font-family: "Source Han Sans CN";
        font-size: 20rpx;
        font-weight: 500;
      }
    }
  }
}

.task_type {
  display: inline-flex;
  padding: 0 16rpx;
  justify-content: center;
  align-items: center;
  gap: 20rpx;
  border-radius: 16rpx 0 16rpx 16rpx;
  font-family: "MiSans VF";
  font-size: 24rpx;
  font-weight: 400;
  line-height: 40rpx;
}

// 用户已接单
.task_order {
  color: #7174f7;
  background: #7174f71a;
}
//审核已通过
.task_check {
  color: #fe6505;
  background: #fe65051a;
}
// 用户已提交任务
.task_submit {
  color: #4597f7;
  background: #4597f71a;
}
//距离悬赏任务结束
.task_end {
  color: #3f9466;
  background: #3f94661a;
}
// 订单审核已通过
.task_pass {
  color: #fe6505;
  background: #fe65051a;
}
// 订单审核未通过
.task_not_pass {
  color: #e02e24;
  background: #e02e241a;
}
</style>