280 lines
6.5 KiB
Vue
280 lines
6.5 KiB
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>
|