wk450097098
/
mrr.sj.front
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

工位订单日期时间显示修改

This commit is contained in:
丁杰 2026-05-06 13:25:33 +08:00
parent 665ca23d3b
commit 659ec0f473
1 changed files with 239 additions and 278 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

517
pages/home/components/workOrderCard.vue
View File

@ -6,7 +6,7 @@
<view class="stateText" :class="{ <view class="stateText" :class="{
stateText2: dataItem.state > 4 && dataItem.state !== 7, // 排除已取消 stateText2: dataItem.state > 4 && dataItem.state !== 7, // 排除已取消
stateText3: dataItem.state === 7 // 已取消状态单独处理 stateText3: dataItem.state === 7 // 已取消状态单独处理
}" v-if="showState"> }" v-if="showState">
{{ stateText }} {{ stateText }}
</view> </view>
</view> </view>
@ -18,8 +18,8 @@
<view class="topInfo"> <view class="topInfo">
<view class="price_title"> <view class="price_title">
<view class="service-type white-space-nowrap">{{ <view class="service-type white-space-nowrap">{{
dataItem.title dataItem.title
}}</view> }}</view>
</view> </view>
<view class="service-address">下单时间：{{ dataItem.add_time }}</view> <view class="service-address">下单时间：{{ dataItem.add_time }}</view>
@ -45,299 +45,260 @@
</template> </template>
<script> <script>
export default { export default {
name: "OrderCard", name: "OrderCard",
props: { props: {
dataItem: { dataItem: {
type: Object, type: Object,
},
typeId: {
type: Number,
},
showState: {
type: Boolean,
default: true,
}
}, },
computed: { typeId: {
photo() { type: Number,
return this.dataItem.photo? JSON.parse(this.dataItem.photo):"";
},
useTime() {
const start = this.dataItem.reserve_start_time;
const endTime = this.dataItem.reserve_end_time;
function formatTimeRange(startTimeStr, endTimeStr) {
if (!startTimeStr || !endTimeStr) return "未设置";
// 解析开始时间为Date对象
const startTime = new Date(startTimeStr.replace(/-/g, '/'));
const endTime = new Date(endTimeStr.replace(/-/g, '/'));
if (isNaN(startTime.getTime()) || isNaN(endTime.getTime())) {
console.error("无效的时间格式");
return "时间格式错误";
}
// 格式化年份：YYYY年
const formatYear = (date) => {
return date.getFullYear() + '年';
};
// 格式化月份和日期：MM月DD
const formatMonthDay = (date) => {
const month = String(date.getMonth() + 1).padStart(2, "0");
const day = String(date.getDate()).padStart(2, "0");
return `${month}月${day}`;
};
// 格式化时间部分：HH:MM
const formatTimePart = (date) => {
const hours = String(date.getHours()).padStart(2, "0");
const minutes = String(date.getMinutes()).padStart(2, "0");
return `${hours}:${minutes}`;
};
// 判断是否同一天
const isSameDay = startTime.getFullYear() === endTime.getFullYear() &&
startTime.getMonth() === endTime.getMonth() &&
startTime.getDate() === endTime.getDate();
if (isSameDay) {
// 同一天：2025年05月29 12:30-13:30
return `${formatYear(startTime)}${formatMonthDay(startTime)} ${formatTimePart(startTime)}-${formatTimePart(endTime)}`;
} else {
// 跨天：2025年05月29 12:30-2025年05月30 13:30
return `${formatYear(startTime)}${formatMonthDay(startTime)} ${formatTimePart(startTime)}-${formatYear(endTime)}${formatMonthDay(endTime)} ${formatTimePart(endTime)}`;
}
}
return formatTimeRange(start, endTime);
},
stateText() {
const textList = [
"",
"待支付",
"待接单",
"待开始",
"进行中",
"已完成",
"已评价",
"已取消",
];
return textList[this.dataItem.state];
},
}, },
methods: { showState: {
// 触发取消事件 type: Boolean,
emitCancel() { default: true,
this.$emit("cancel", this.dataItem); }
}, },
// 触发接单事件 computed: {
emitAccept() { photo() {
this.$emit("accept", this.dataItem); return this.dataItem.photo ? JSON.parse(this.dataItem.photo) : "";
},
emitStart() {
this.$emit("start", this.dataItem);
},
emitDone() {
this.$emit("done", this.dataItem);
},
goDetail() {
this.$emit("goDetail", this.dataItem);
},
emitGoPay() {
this.$emit("goPay", this.dataItem);
},
emitRefund() {
this.$emit("goRefund", this.dataItem);
}
}, },
}; useTime() {
const start = this.dataItem.reserve_start_time;
const end = this.dataItem.reserve_end_time;
if (!start || !end) return "未设置";
const startDate = new Date(start.replace(/-/g, '/'));
const endDate = new Date(end.replace(/-/g, '/'));
if (isNaN(startDate.getTime()) || isNaN(endDate.getTime())) return "时间格式错误";
const pad = (n) => String(n).padStart(2, "0");
const fmt = (d) => `${pad(d.getMonth() + 1)}.${pad(d.getDate())} ${pad(d.getHours())}:${pad(d.getMinutes())}`;
return `${fmt(startDate)}-${fmt(endDate)}`;
},
stateText() {
const textList = [
"",
"待支付",
"待接单",
"待开始",
"进行中",
"已完成",
"已评价",
"已取消",
];
return textList[this.dataItem.state];
},
},
methods: {
// 触发取消事件
emitCancel() {
this.$emit("cancel", this.dataItem);
},
// 触发接单事件
emitAccept() {
this.$emit("accept", this.dataItem);
},
emitStart() {
this.$emit("start", this.dataItem);
},
emitDone() {
this.$emit("done", this.dataItem);
},
goDetail() {
this.$emit("goDetail", this.dataItem);
},
emitGoPay() {
this.$emit("goPay", this.dataItem);
},
emitRefund() {
this.$emit("goRefund", this.dataItem);
}
},
};
</script> </script>
<style lang="less" scoped> <style lang="less" scoped>
.order-card { .order-card {
position: relative; // 必须加，确保父容器有定位 position: relative; // 必须加，确保父容器有定位
padding: 24rpx 20rpx 0rpx; padding: 24rpx 20rpx 0rpx;
margin: 0rpx 30rpx 20rpx 30rpx; margin: 0rpx 30rpx 20rpx 30rpx;
background-color: #fff; background-color: #fff;
border-radius: 12px; border-radius: 12px;
/* box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1); */ /* box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1); */
} }
.orderNumBox { .orderNumBox {
display: flex; display: flex;
align-items: center; align-items: center;
justify-content: space-between; justify-content: space-between;
margin-bottom: 40rpx; margin-bottom: 40rpx;
.stateText { .stateText {
font-weight: 400;
font-size: 26rpx;
color: #E8101E;
text-align: left;
font-style: normal;
position: absolute;
right: 0;
top: 0;
background-image: url("/static/images/icons/tabBj.png");
background-size: 100% auto;
background-position: center top;
background-repeat: no-repeat;
width: 128rpx;
height: 49rpx;
display: flex;
align-items: center;
justify-content: center;
}
.stateText2 {
background-image: url("/static/images/icons/tabBj2.png");
color: #333;
}
.stateText3 {
background-image: url("/static/images/icons/tabBj2.png");
color: #999999 !important;
}
}
/* 订单编号 */
.order-id {
width: 530rpx;
font-size: 28rpx;
color: #333333;
}
/* 服务信息容器 */
.service-container {
display: flex;
align-items: center;
padding-bottom: 24rpx;
border-bottom: 1px solid #f6f5f5;
width: 100%;
}
/* 服务图片 */
.service-img {
width: 172rpx;
height: 168rpx;
border-radius: 24rpx;
margin-right: 30rpx;
flex-shrink: 0;
}
/* 服务信息 */
.service-info {
display: flex;
flex-direction: column;
justify-content: space-between;
width: 100%;
height: 168rpx;
.topInfo {
display: flex;
flex-direction: column;
.price_title {
display: flex;
align-items: center;
justify-content: space-between;
margin-bottom: 20rpx;
.service-type {
font-weight: 500;
font-size: 30rpx;
color: #333333;
line-height: 34rpx;
max-width: 300rpx;
}
}
}
.service-price {
font-family: DINPro, DINPro;
font-weight: 500;
font-size: 36rpx;
color: #E8101E;
line-height: 34rpx;
text-align: left;
font-style: normal;
}
}
.service_subTitle {
font-size: 26rpx;
line-height: 26rpx;
color: #666666;
margin-top: 18rpx;
}
.service-address {
font-weight: 400; font-weight: 400;
font-size: 26rpx; font-size: 26rpx;
color: #999999; color: #E8101E;
line-height: 33rpx;
text-align: left; text-align: left;
font-style: normal; font-style: normal;
} position: absolute;
right: 0;
/* 时间信息 */ top: 0;
.time-info { background-image: url("/static/images/icons/tabBj.png");
font-weight: 400; background-size: 100% auto;
font-size: 26rpx; background-position: center top;
color: #333333; background-repeat: no-repeat;
line-height: 34rpx; width: 128rpx;
text-align: left; height: 49rpx;
font-style: normal;
padding-bottom: 20rpx;
margin-top: 28rpx;
}
/* 按钮组 */
.button-group {
display: flex;
justify-content: flex-end;
gap: 30rpx;
padding-bottom: 30rpx;
}
/* 通用按钮样式 */
.btn {
white-space: nowrap;
width: 100rpx;
height: 32rpx;
display: flex; display: flex;
align-items: center; align-items: center;
justify-content: center; justify-content: center;
padding: 10px 20px; }
border-radius: 64rpx;
// box-sizing: border-box; .stateText2 {
//height: 64rpx; background-image: url("/static/images/icons/tabBj2.png");
//border-radius: 32rpx; color: #333;
border: 2rpx solid #979797; }
font-weight: 400;
font-size: 26rpx; .stateText3 {
color: #333333; background-image: url("/static/images/icons/tabBj2.png");
line-height: 64rpx; color: #999999 !important;
// padding: 0 28rpx; }
}
/* 订单编号 */
.order-id {
width: 530rpx;
font-size: 28rpx;
color: #333333;
}
/* 服务信息容器 */
.service-container {
display: flex;
align-items: center;
padding-bottom: 24rpx;
border-bottom: 1px solid #f6f5f5;
width: 100%;
}
/* 服务图片 */
.service-img {
width: 172rpx;
height: 168rpx;
border-radius: 24rpx;
margin-right: 30rpx;
flex-shrink: 0;
}
/* 服务信息 */
.service-info {
display: flex;
flex-direction: column;
justify-content: space-between;
width: 100%;
height: 168rpx;
.topInfo {
display: flex;
flex-direction: column;
.price_title {
display: flex;
align-items: center;
justify-content: space-between;
margin-bottom: 20rpx;
.service-type {
font-weight: 500;
font-size: 30rpx;
color: #333333;
line-height: 34rpx;
max-width: 300rpx;
}
}
} }
/* 取消按钮 */ .service-price {
.cancel-btn { font-family: DINPro, DINPro;
border: 2rpx solid #979797; font-weight: 500;
color: #333333; font-size: 36rpx;
}
/* 接单按钮 */
.accept-btn {
border: 2rpx solid #E8101E;
color: #E8101E; color: #E8101E;
line-height: 34rpx;
text-align: left;
font-style: normal;
} }
}
.service_subTitle {
font-size: 26rpx;
line-height: 26rpx;
color: #666666;
margin-top: 18rpx;
}
.service-address {
font-weight: 400;
font-size: 26rpx;
color: #999999;
line-height: 33rpx;
text-align: left;
font-style: normal;
}
/* 时间信息 */
.time-info {
font-weight: 400;
font-size: 26rpx;
color: #333333;
line-height: 34rpx;
text-align: left;
font-style: normal;
padding-bottom: 20rpx;
margin-top: 28rpx;
}
/* 按钮组 */
.button-group {
display: flex;
justify-content: flex-end;
gap: 30rpx;
padding-bottom: 30rpx;
}
/* 通用按钮样式 */
.btn {
white-space: nowrap;
width: 100rpx;
height: 32rpx;
display: flex;
align-items: center;
justify-content: center;
padding: 10px 20px;
border-radius: 64rpx;
// box-sizing: border-box;
//height: 64rpx;
//border-radius: 32rpx;
border: 2rpx solid #979797;
font-weight: 400;
font-size: 26rpx;
color: #333333;
line-height: 64rpx;
// padding: 0 28rpx;
}
/* 取消按钮 */
.cancel-btn {
border: 2rpx solid #979797;
color: #333333;
}
/* 接单按钮 */
.accept-btn {
border: 2rpx solid #E8101E;
color: #E8101E;
}
</style> </style>