195 lines
4.5 KiB
Vue
195 lines
4.5 KiB
Vue
<template>
|
||
<view class="order-card">
|
||
<!-- 订单编号 -->
|
||
<view class="order-id">订单编号：{{ dataItem.number }}</view>
|
||
|
||
<!-- 服务信息区域 -->
|
||
<view class="service-container" @click="$emit('goOrderDetail', dataItem)">
|
||
<image class="service-img" :src="dataItem.order_photo[0]" mode="aspectFill"></image>
|
||
<view class="service-info">
|
||
<view class="service-type">{{ dataItem.server_title }}</view>
|
||
<view class="service-address" v-if="
|
||
dataItem.order_kind == 1 &&
|
||
dataItem.reservation_address_arr &&
|
||
typeId == 0 || typeId == 3
|
||
">地址：{{ dataItem.reservation_address_arr.server_address }}</view>
|
||
<view class="service-address" v-if="
|
||
dataItem.order_kind == 1 &&
|
||
dataItem.reservation_address_arr &&
|
||
typeId == 1
|
||
">地址：{{ dataItem.reservation_address_arr.dependency
|
||
}}{{ dataItem.reservation_address_arr.address }}</view>
|
||
</view>
|
||
</view>
|
||
|
||
<!-- 时间信息 -->
|
||
<view class="time-info">使用时段：{{ useTime }}</view>
|
||
|
||
<!-- 操作按钮 -->
|
||
<view class="button-group">
|
||
<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,
|
||
},
|
||
},
|
||
created() {
|
||
|
||
},
|
||
computed: {
|
||
useTime() {
|
||
const start = this.dataItem.reservation_time;
|
||
const server_time = this.dataItem.server_time || 0
|
||
|
||
function formatTimeRange(startTimeStr, serviceMinutes) {
|
||
// 解析开始时间为Date对象
|
||
const startTime = new Date(startTimeStr.replace(/-/g, '/'));
|
||
|
||
if (isNaN(startTime.getTime())) {
|
||
throw new Error(
|
||
"无效的开始时间格式，请使用类似'2025-08-04 14:00:00'的格式"
|
||
);
|
||
}
|
||
|
||
// 计算结束时间（开始时间 + 服务分钟数）
|
||
const endTime = new Date(
|
||
startTime.getTime() + serviceMinutes * 60 * 1000
|
||
);
|
||
|
||
// 格式化单个时间为 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, server_time)
|
||
},
|
||
},
|
||
methods: {
|
||
// 触发取消事件
|
||
emitCancel() {
|
||
this.$emit("cancel");
|
||
},
|
||
// 触发接单事件
|
||
emitAccept() {
|
||
this.$emit("accept");
|
||
},
|
||
emitStart() {
|
||
this.$emit("start");
|
||
},
|
||
emitDone() {
|
||
this.$emit("done");
|
||
},
|
||
},
|
||
};
|
||
</script>
|
||
|
||
<style scoped>
|
||
.order-card {
|
||
padding: 34rpx 20rpx;
|
||
margin: 0rpx 30rpx 20rpx 30rpx;
|
||
background-color: #fff;
|
||
border-radius: 12px;
|
||
/* box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1); */
|
||
}
|
||
|
||
/* 订单编号 */
|
||
.order-id {
|
||
font-size: 28rpx;
|
||
color: #333333;
|
||
margin-bottom: 40rpx;
|
||
}
|
||
|
||
/* 服务信息容器 */
|
||
.service-container {
|
||
display: flex;
|
||
align-items: center;
|
||
padding-bottom: 24rpx;
|
||
border-bottom: 1px solid #f6f5f5;
|
||
}
|
||
|
||
/* 服务图片 */
|
||
.service-img {
|
||
width: 172rpx;
|
||
height: 168rpx;
|
||
border-radius: 24rpx;
|
||
margin-right: 30rpx;
|
||
flex-shrink: 0;
|
||
}
|
||
|
||
/* 服务信息 */
|
||
.service-info {
|
||
display: flex;
|
||
flex-direction: column;
|
||
}
|
||
|
||
.service-type {
|
||
font-size: 16px;
|
||
font-weight: 500;
|
||
margin-bottom: 48rpx;
|
||
}
|
||
|
||
.service-address {
|
||
font-size: 26rpx;
|
||
color: #666666;
|
||
line-height: 1.4;
|
||
}
|
||
|
||
/* 时间信息 */
|
||
.time-info {
|
||
font-size: 30rpx;
|
||
color: #333;
|
||
|
||
margin-top: 28rpx;
|
||
}
|
||
|
||
/* 按钮组 */
|
||
.button-group {
|
||
display: flex;
|
||
justify-content: flex-end;
|
||
gap: 30rpx;
|
||
}
|
||
|
||
/* 通用按钮样式 */
|
||
.btn {
|
||
width: 80rpx;
|
||
height: 32rpx;
|
||
border-radius: 64rpx;
|
||
font-size: 26rpx;
|
||
background-color: #fff;
|
||
white-space: nowrap;
|
||
margin-top: 40rpx;
|
||
}
|
||
|
||
/* 取消按钮 */
|
||
.cancel-btn {
|
||
border: 2rpx solid #979797;
|
||
color: #333333;
|
||
}
|
||
|
||
/* 接单按钮 */
|
||
.accept-btn {
|
||
border: 2rpx solid #E8101E;
|
||
color: #E8101E;
|
||
}
|
||
</style> |