mrr.sj.front/pages/search/components/syrCardList.vue

<template>
  <view class="service-list">
    <!-- 循环渲染列表项 -->
    <view class="service-item" v-for="(item, index) in list" :key="index" @click="goSyrHome(item)">
      <!-- 头像 -->
      <image class="avatar" :src="item.head_photo" mode="aspectFill"></image>

      <!-- 右侧信息区 -->
      <view class="item-right">
        <view class="top-info">
          <text class="name text-overflow-1">{{ item.name }}</text>
          <view class="distance">
            <image
              class="position"
              src="https://mrrplus.oss-cn-beijing.aliyuncs.com/photo/system/e37b3bd7-841f-4d57-a11a-2365c81f740e"
            />
            <text>{{ item.distance.toFixed(2) }}km</text>
          </view>
        </view>

        <!-- 服务标签 -->
        <view class="services">
          <view
            class="service-tag"
            v-for="(service, sIndex) in item.servers_kill_arr"
            :key="sIndex"
          >
            <view>{{ service }}</view>
            <view v-if="item.servers_kill_arr[sIndex + 1]" class="split"></view>
          </view>
        </view>

        <!-- 可预约时间 -->
        <view
          class="time_box"
        >
          <view class="time" v-if="item.earliest_reserve_time"
            >最早可约：{{
              formatTimeToRelative(item.earliest_reserve_time)
            }}</view
          >
		  <view class="no-time1" v-else
		    >已约满</view
		  >
          <view class="order-btn" :class="{ orderBtnNo: !item.earliest_reserve_time }" >{{
            btnText
          }}</view>
        </view>
      </view>

      <!-- 下单按钮 -->
    </view>
  </view>
</template>

<script>
export default {
  name: "ServiceListItem",
  // 接收父组件传入的列表数据
  props: {
    list: {
      type: Array,
      default: () => [], // 默认空数组
    },
    btnText: {
      type: String,
      default: "去下单", // 默认空数组
    },
  },
  methods: {
    formatTimeToRelative(timeStr) {
      if (!timeStr) {
        return "";
      }
      // 解析输入时间字符串（例如："2025-10-09 15:10:00"）
      const [datePart, timePart] = timeStr.split(" ");
      const [year, month, day] = datePart.split("-").map(Number);
      const [hours, minutes] = timePart.split(":").map(Number);

      // 构造输入时间的 Date 对象（注意月份要减1）
      const inputDate = new Date(year, month - 1, day, hours, minutes);

      // 获取今天的日期（仅年-月-日，时间设为 00:00:00）
      const today = new Date();
      today.setHours(0, 0, 0, 0);

      // 获取明天的日期（仅年-月-日，时间设为 00:00:00）
      const tomorrow = new Date(today);
      tomorrow.setDate(tomorrow.getDate() + 1);

      // 构造输入日期的“仅日期”版本（时间设为 00:00:00）
      const inputDateOnly = new Date(inputDate);
      inputDateOnly.setHours(0, 0, 0, 0);

      // 提取时间部分（HH:MM）
      const timeFormat = `${hours.toString().padStart(2, "0")}:${minutes
        .toString()
        .padStart(2, "0")}`;

      // 比较日期并返回结果
      if (inputDateOnly.getTime() === today.getTime()) {
        return `今${timeFormat}`;
      } else if (inputDateOnly.getTime() === tomorrow.getTime()) {
        return `明${timeFormat}`;
      } else {
        // 若既不是今天也不是明天，可返回原始时间或其他格式
        return timeStr;
      }
    },
    goSyrHome(item) {
		if(!item.earliest_reserve_time){
			return
		}
      uni.navigateTo({
        url: "/pages/user/syr-detail?id=" + item.id,
      });
    },
  },
};
</script>

<style lang="less" scoped>
/* 列表容器 */
.service-list {
  // margin: 20rpx;
  padding: 18rpx 20rpx;
  display: flex;
  flex-direction: column;
  gap: 20rpx;
}

/* 单个列表项 */
.service-item {
  padding: 20rpx;
	box-sizing: border-box;
  position: relative;
  display: flex;
  align-items: flex-start;
  padding: 20rpx;
  background-color: #fff;
  border-radius: 20rpx;
}

/* 头像样式 */
.avatar {
  flex-shrink: 0;
  width: 155rpx;
  height: 154rpx;
  border-radius: 50%;
  margin-right: 20rpx;
}

/* 右侧信息容器 */
.item-right {
  flex: 1;
  width: 100%;
  display: flex;
  flex-direction: column;
  justify-content: center;
}

/* 姓名 + 距离 行 */
.top-info {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 7rpx;
  gap: 61rpx;
}

.name {
  font-weight: 500;
  font-size: 32rpx;
  color: #333333;
}

.distance {
  display: flex;
  align-items: center;
  gap: 6rpx;
  font-family: DINPro, DINPro;
  font-weight: 500;
  font-size: 24rpx;
  color: #666666;
}
.position {
  width: 19rpx;
  height: 21rpx;
}

/* 服务标签容器 */
.services {
  display: flex;
  width: 100%;
  gap: 10rpx 0;
  max-width: 420rpx;
  overflow-x: auto;
  margin-bottom: 7rpx;
}

.service-tag {
  white-space: nowrap;
  font-size: 26rpx;
  color: #999999;
  display: flex;
  align-items: center;
  .split {
    width: 1rpx;
    height: 24rpx;
    background: #d8d8d8;
    margin: 0 10rpx;
  }
}

.time_box {
  width: 100%;
  display: flex;
  justify-content: space-between;
  align-items: flex-end;
  padding-bottom: 10rpx;
}

.flexEnd {
  justify-content: flex-end;
}

/* 可预约时间 */
.time {
  background: #fdf3f5;
  border-radius: 20rpx;
  font-size: 22rpx;
  color: #FF4767;
  padding: 2rpx 12rpx;
}

.no-time1{
	background: rgba(0,0,0,0.1);
	border-radius: 20rpx;
	font-size: 22rpx;
	color: #666;
	padding: 2rpx 12rpx;
}

/* 下单按钮 */
.order-btn {
  padding: 0rpx 30rpx;
  height: 60rpx;
  line-height: 60rpx;
  background: linear-gradient(107deg, #f84c63 0%, #FF4767 100%);
  border-radius: 30rpx;
  text-align: center;
  color: #fff;
  font-size: 28rpx;
}
.orderBtnNo{
	background: rgba(0,0,0,0.1);
		color: #666;
	
}
</style>