mrr.sj.front/pages/syr/manHour/components/orderCard.vue

<template>
  <view class="order-card" @click="goDetail">
    <!-- 订单编号 -->
    <view class="orderNumBox">
      <view class="order-id white-space-nowrap"
        >订单编号：{{ dataItem.number }}</view
      >
      <view class="stateText" v-if="showState">{{ stateText }}</view>
    </view>

    <!-- 服务信息区域 -->
    <view
      class="service-container"
      @click="$emit('goOrderDetail', dataItem)"
    >
      <image class="service-img" :src="photo[0]" mode="aspectFill"></image>
      <view class="service-info">
        <view class="topInfo">
          <view class="price_title">
            <view class="service-type white-space-nowrap">{{
              dataItem.title
            }}</view>
            <view class="service-price"
              >￥{{ Number(dataItem.order_money) }}</view
            >
          </view>
          <view class="service_subTitle white-space-nowrap"
            >服务范围：{{
              dataItem.first_class_title +
              " " +
              dataItem.second_class_title.join("、")
            }}</view
          >
        </view>
        <view class="service-address">下单时间：{{ dataItem.add_time }}</view>
      </view>
    </view>

    <!-- 时间信息 -->
    <view class="time-info">使用时段：{{ useTime }}</view>

    <!-- 操作按钮 -->
    <view class="button-group" v-if="dataItem.state > 1 && dataItem.state < 5">
      <view
        class="btn cancel-btn"
        v-if="dataItem.state == 2 || dataItem.state == 3"
        @click.stop="emitCancel"
        >取消订单</view
      >
      <view
        class="btn accept-btn"
        @click.stop="emitAccept"
        v-if="dataItem.state == 2"
        >接单</view
      >
      <view
        class="btn accept-btn"
        @click.stop="emitStart"
        v-if="dataItem.state == 3"
        >开始服务</view
      >
      <view
        class="btn accept-btn"
        @click.stop="emitDone"
        v-if="dataItem.state == 4"
        >服务完成</view
      >
    </view>
  </view>
</template>

<script>
export default {
  name: "OrderCard",
  props: {
    dataItem: {
      type: Object,
    },
    typeId: {
      type: Number,
    },
     showState: {
      type: Boolean,
      default:true,
    }
  },
  computed: {
    photo() {
      return JSON.parse(this.dataItem.photo);
    },
    useTime() {
      const start = this.dataItem.reserve_start_time;
      const endTime = this.dataItem.reserve_end_time;
      function formatTimeRange(startTimeStr, endTimeStr) {
        // 解析开始时间为Date对象
        const startTime = new Date(startTimeStr.replace(/-/g,'/'));
        const endTime = new Date(endTimeStr.replace(/-/g,'/'));
        if (isNaN(startTime.getTime())) {
          throw new Error(
            "无效的开始时间格式，请使用类似'2025-08-04 14:00:00'的格式"
          );
        }
        // 格式化单个时间为 MM.DD HH:MM 格式
        const formatTime = (date) => {
          const month = String(date.getMonth() + 1).padStart(2, "0");
          const day = String(date.getDate()).padStart(2, "0");
          const hours = String(date.getHours()).padStart(2, "0");
          const minutes = String(date.getMinutes()).padStart(2, "0");
          return `${month}.${day} ${hours}:${minutes}`;
        };

        // 格式化开始时间和结束时间并拼接
        return `${formatTime(startTime)} —— ${formatTime(endTime)}`;
      }
      return formatTimeRange(start, endTime);
    },
    stateText() {
      const textList = [
        "",
        "待支付",
        "待接单",
        "待服务",
        "开始服务",
        "已完成",
        "已评价",
        "已取消",
      ];
      return textList[this.dataItem.state];
    },
  },
  methods: {
    // 触发取消事件
    emitCancel() {
      this.$emit("cancel",this.dataItem);
    },
    // 触发接单事件
    emitAccept() {
      this.$emit("accept",this.dataItem);
    },
    emitStart() {
      this.$emit("start",this.dataItem);
    },
    goDetail(){
      this.$emit("goDetail",this.dataItem);
    },
    emitDone() {
      this.$emit("done",this.dataItem);
    },
  },
};
</script>

<style lang="less" scoped>
.order-card {
  padding: 34rpx 20rpx 0rpx;
  margin: 20rpx 30rpx 20rpx 30rpx;
  background-color: #fff;
  border-radius: 12px;
  /* box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1); */
}

.orderNumBox {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 40rpx;
  .stateText {
    font-size: 28rpx;
    color: #FF4767;
    line-height: 39rpx;
  }
}

/* 订单编号 */
.order-id {
	width: 530rpx;
  font-size: 28rpx;
  color: #333333;
}

/* 服务信息容器 */
.service-container {
  display: flex;
  align-items: center;
  padding-bottom: 24rpx;
  border-bottom: 1px solid #f6f5f5;
  width: 100%;
}

/* 服务图片 */
.service-img {
  width: 172rpx;
  height: 168rpx;
  border-radius: 24rpx;
  margin-right: 30rpx;
  flex-shrink: 0;
}

/* 服务信息 */
.service-info {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  width: 100%;
  height: 168rpx;
  .topInfo {
    display: flex;
    flex-direction: column;
    .price_title {
      display: flex;
      align-items: center;
      justify-content: space-between;
      .service-price {
        font-weight: 500;
        font-size: 30rpx;
        color: #FF4767;
        line-height: 34rpx;
      }
    }
  }
}
.service_subTitle {
  font-size: 26rpx;
  line-height: 26rpx;
  color: #666666;
  margin-top: 18rpx;
}
.service-type {
  font-weight: 500;
  font-size: 30rpx;
  line-height: 30rpx;
  color: #333333;
}
.service-address {
  font-weight: 400;
font-size: 26rpx;
color: #999999;
line-height: 34rpx;
text-align: left;
font-style: normal;
}


/* 时间信息 */
.time-info {
  font-size: 30rpx;
  color: #333;
  padding-bottom: 40rpx;
  margin-top: 28rpx;
}

/* 按钮组 */
.button-group {
  display: flex;
  justify-content: flex-end;
  gap: 30rpx;
  padding-bottom: 40rpx;
}

/* 通用按钮样式 */
.btn {
  width: 80rpx;
  height: 32rpx;
  border-radius: 64rpx;
  font-size: 26rpx;
  background-color: #fff;
  white-space: nowrap;
}

/* 取消按钮 */
.cancel-btn {
  border: 2rpx solid #979797;
  color: #333333;
}

/* 接单按钮 */
.accept-btn {
  border: 2rpx solid #FF4767;
  color: #FF4767;
}
</style>