mrr.sj.front/pages/user/components/serviceCardList.vue

<template>
  <view class="service-list">
    <!-- 循环渲染列表项 -->
    <view class="service-item" v-for="(item, index) in list" :key="index" @click="goServerDetail(item)">
      <!-- 头像 -->
      <view class="avatar_box">
        <view class="tag_kind">{{
          item.server_kind == 1 ? "到家" : item.server_kind == 2 ? "到店" : item.server_kind == 3 ? "到店到家" : ""
        }}</view>
        <image class="avatar" :src="item.photo[0]" mode="aspectFill"></image>
      </view>

      <!-- 右侧信息区 -->
      <view class="item-right">
        <view class="top-info">
          <view class="name text-overflow-1">
            <image
              class="service-title-type"
              mode="widthFix"
              src="@/static/images/shop/pintuan/group.png"
              v-if="item.team_buy && Object.keys(item.team_buy).length != 0"
            ></image>
            {{ item.title }}
          </view>
          <!-- <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">
            <view class="price" style="font-family: DINPro, DINPro"
              >￥{{ item.server_price }}</view
            >
            <view class="split"></view>
            <view class="server_time" style="font-family: DINPro, DINPro"
              >{{ item.server_time }}分钟</view
            >
          </view>
        </view>

        <!-- 可预约时间 -->
        <view class="time_box">
          <view class="time"
            >销量
            <text class="num">{{ item.sales_num }}</text>
          </view>
         <!-- <view class="order-btn" >去下单</view> -->
        </view>
      </view>

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

<script>
export default {
  name: "ServiceListItem",
  // 接收父组件传入的列表数据
  props: {
    list: {
      type: Array,
      default: () => [], // 默认空数组
    },
  },
  methods: {
    formatTimeToRelative(timeStr) {
      // 解析输入时间字符串（例如："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;
      }
    },
    goServerDetail(item) {
      // if (item.team_buy && Object.keys(item.team_buy).length != 0) {
      //   uni.navigateTo({
      //     url: `/pages/groupBuy/detail?id=${item.id}`,
      //   });
      // } else {
      //   uni.navigateTo({
      //     url: `/pages/service/detail?id=${item.id}`,
      //   });
      // }
    },
  },
};
</script>

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

/* 单个列表项 */
.service-item {
  position: relative;
  display: flex;
  align-items: flex-start;
  background-color: #fff;
  border-radius: 20rpx;
  
}
.avatar_box {
  width: 172rpx;
  height: 172rpx;
  background: #935858;
  border-radius: 12rpx;

  overflow: hidden;
  margin-right: 30rpx;
  position: relative;
  .tag_kind {
    position: absolute;
    left: 0;
    top: 0;
    z-index: 100;
    text-align: center;
    padding: 0 8rpx;
    height: 38rpx;
    line-height: 38rpx;
    background: linear-gradient(124deg, #f52540 0%, #FF4767 100%);
    border-radius: 12rpx 2rpx 12rpx 2rpx;
    font-size: 22rpx;
    color: #ffffff;
  }
}
/* 头像样式 */
.avatar {
  width: 172rpx;
  height: 172rpx;
}

/* 右侧信息容器 */
.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;
  display: flex;
  align-items: center;
}

.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;
  gap: 10rpx 0;
  flex-wrap: wrap;
  margin-bottom: 26rpx;
}

.service-tag {
  font-size: 26rpx;
  color: #666666;
  display: flex;
  align-items: center;
  .price {
    font-weight: 500;
    font-size: 26rpx;
    color: #FF4767;
  }
  .service_time {
    font-size: 26rpx;
    color: #666666;
  }
  .split {
    width: 2rpx;
    height: 20rpx;
    background: #666666;
    margin: 0 10rpx;
  }
}

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

/* 可预约时间 */
.time {
  font-size: 26rpx;
  color: #999999;
  .num {
    font-family: DINPro, DINPro;
    font-weight: 400;
    font-size: 28rpx;
    color: #999999;
  }
}

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

.service-title-type {
  width: 56rpx;
  /* 图片与文字之间的间距 */
  margin-right: 4rpx;
}
</style>