261 lines
5.7 KiB
Vue
261 lines
5.7 KiB
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: #e8101e;
|
||
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%, #e8101e 100%);
|
||
border-radius: 30rpx;
|
||
text-align: center;
|
||
color: #fff;
|
||
font-size: 28rpx;
|
||
}
|
||
.orderBtnNo{
|
||
background: rgba(0,0,0,0.1);
|
||
color: #666;
|
||
|
||
}
|
||
</style>
|