状态修正,订单卡片调整

This commit is contained in:
syruan 2025-10-13 22:27:41 +08:00
parent e470a4fc56
commit 388eb48dc1
3 changed files with 79 additions and 71 deletions

View File

@ -406,42 +406,15 @@ export default {
// //
updateStepList() { updateStepList() {
this.stepList = [ this.stepList = [
{ title: '待接单', description: '' }, { title: '待确认', description: '' },
{ title: '待出库', description: '' }, { title: '已确认', description: '' }
{ title: '待收货', description: '' },
{ title: '共享中', description: '' },
{ title: '订单完成', description: '' }
]; ];
if (this.orderStatus == 1) { if (this.orderStatus === 1) {
this.currentActive = 0; this.currentActive = 0;
} else if (this.orderStatus == 2) { } else if (this.orderStatus === 2) {
this.currentActive = 1; this.currentActive = 1;
this.stepList[0].title = '已接单'; this.stepList[0].title = '已确认';
} else if (this.orderStatus == 3) {
this.stepList[0].title = '已接单';
this.stepList[1].title = '已出库';
this.currentActive = 2;
} else if (this.orderStatus == 4) {
this.stepList[0].title = '已接单';
this.stepList[1].title = '已出库';
this.stepList[2].title = '已收货';
this.currentActive = 3;
} else if (this.orderStatus == 5) {
this.stepList[0].title = '已接单';
this.stepList[1].title = '已出库';
this.stepList[2].title = '已收货';
this.currentActive = 4;
} else if (this.orderStatus == 20) {
this.stepList[0].title = '已接单';
this.stepList[1].title = '已出库';
this.stepList[2].title = '已收货';
this.stepList[3].title = '共享结束';
this.currentActive = 4;
} else if (this.orderStatus == 99) {
this.stepList[0].title = '订单取消';
this.isReject = true;
this.currentActive = 0;
} }
this.$forceUpdate(); this.$forceUpdate();

View File

@ -50,6 +50,8 @@
maxlength="20" maxlength="20"
/> />
</el-form-item> </el-form-item>
<el-button type="primary" icon="el-icon-search" size="mini" @click="handleQuery">查询</el-button>
<el-button icon="el-icon-refresh" size="mini" @click="resetQuery">重置</el-button>
</el-row> </el-row>
<!-- <el-form-item prop="lowerBound"> <!-- <el-form-item prop="lowerBound">
<el-input <el-input
@ -72,10 +74,7 @@
style="width:100px" style="width:100px"
/> />
</el-form-item>--> </el-form-item>-->
<el-form-item>
<el-button type="primary" icon="el-icon-search" size="mini" @click="handleQuery">查询</el-button>
<el-button icon="el-icon-refresh" size="mini" @click="resetQuery">重置</el-button>
</el-form-item>
</el-form> </el-form>
<template v-if="cardList.length > 0"> <template v-if="cardList.length > 0">
<div class="cart-tbody" v-for="(item, index) in cardList" :key="index"> <div class="cart-tbody" v-for="(item, index) in cardList" :key="index">
@ -155,7 +154,7 @@
class="order-items order-info" class="order-items order-info"
:style=" :style="
j != item.detailsList.length - 1 j != item.detailsList.length - 1
? 'border-bottom:1px solid #eee' ? 'border-bottom:1px solid #f0f0f0'
: '' : ''
" "
style="min-height: 80px" style="min-height: 80px"
@ -238,7 +237,7 @@
class="order-info" class="order-info"
:style=" :style="
j != item.detailsList.length - 1 j != item.detailsList.length - 1
? 'border-bottom:1px solid #eee' ? 'border-bottom:1px solid #f0f0f0'
: '' : ''
" "
style="min-height: 80px" style="min-height: 80px"
@ -260,7 +259,7 @@
: '' : ''
" "
> >
{{ goods.rentBeginTime }}{{ goods.rentEndTime }} {{ formatDate(goods.rentBeginTime) }}{{ formatDate(goods.rentEndTime) }}
</div> </div>
<div <div
@ -285,7 +284,7 @@
" "
style="min-height: 80px; width: 95%" style="min-height: 80px; width: 95%"
> >
<el-tag effect="light">{{ item.orderStatus == '1' ? '待接单' : '已接单'}} <el-tag effect="light">{{ item.orderStatus == '1' ? '待确认' : '已确认'}}
</el-tag> </el-tag>
</div> </div>
</el-col>--> </el-col>-->
@ -366,7 +365,7 @@
<el-table-column prop="days" align="center" label="共享天数"/> <el-table-column prop="days" align="center" label="共享天数"/>
<el-table-column prop="days" align="center" label="租期"> <el-table-column prop="days" align="center" label="租期">
<template #default="{ row }"> <template #default="{ row }">
{{ `${row.preOutboundTime}${row.rentOverTime} ` }} {{ formatDate(row.preOutboundTime) + '至' + formatDate(row.rentOverTime) }}
</template> </template>
</el-table-column> </el-table-column>
<!-- <el-table-column prop="costs" align="center" label="共享费用(元)" width="160"> <!-- <el-table-column prop="costs" align="center" label="共享费用(元)" width="160">
@ -633,8 +632,8 @@ export default {
orderId: '', orderId: '',
statusList: statusList:
[ [
{ id: '1', name: '待接单' }, { id: '1', name: '待确认' },
{ id: '2', name: '已接单' } { id: '2', name: '已确认' }
], ],
ids: [], ids: [],
// //
@ -677,6 +676,12 @@ export default {
this.getList() this.getList()
}, },
methods: { methods: {
// YYYY-MM-DD
formatDate(dateStr) {
if (!dateStr) return ''
const s = String(dateStr)
return s.length >= 10 ? s.slice(0, 10) : s
},
orderText(status) { orderText(status) {
const foundStatus = this.statusList.find(e => e.id === status) const foundStatus = this.statusList.find(e => e.id === status)
return foundStatus ? foundStatus.name : '未知状态' return foundStatus ? foundStatus.name : '未知状态'
@ -827,10 +832,11 @@ export default {
.cart-tbody { .cart-tbody {
background: #fff; background: #fff;
padding: 8px 12px; padding: 16px;
margin-bottom: 6px; margin-bottom: 14px;
border-radius: 8px; border-radius: 10px;
box-shadow: 0 2px 4px rgba(0, 0, 0, 0.5); border: 1px solid #ddd;
box-shadow: 0 4px 10px rgba(0, 0, 0, 0.08);
.cart-user-info { .cart-user-info {
display: flex; display: flex;
@ -923,9 +929,20 @@ export default {
.order-title-info { .order-title-info {
position: relative; position: relative;
padding: 6px 4px; padding: 8px 0;
font-size: 14px; font-size: 14px;
color: #999; color: #666;
span:first-child {
color: #666;
}
span + span {
color: #333;
}
&:not(:last-child) {
margin-bottom: 6px;
}
.order-type-box { .order-type-box {
position: absolute; position: absolute;
@ -935,12 +952,12 @@ export default {
} }
.order-items { .order-items {
border-right: 1px solid #eee; border-right: 1px solid #f0f0f0;
} }
.order-info { .order-info {
display: flex; display: flex;
padding: 4px 0; padding: 8px 0;
align-items: center; align-items: center;
justify-content: center; justify-content: center;
} }
@ -950,7 +967,7 @@ export default {
flex-direction: column; flex-direction: column;
align-items: center; align-items: center;
justify-content: center; justify-content: center;
border-right: 1px solid #eee; border-right: 1px solid #f0f0f0;
font-size: 13px; font-size: 13px;
} }

View File

@ -61,12 +61,10 @@
maxlength="20" maxlength="20"
/> />
</el-form-item> </el-form-item>
</el-row>
<el-form-item>
<el-button type="primary" icon="el-icon-search" size="mini" @click="handleQuery">查询</el-button> <el-button type="primary" icon="el-icon-search" size="mini" @click="handleQuery">查询</el-button>
<el-button icon="el-icon-refresh" size="mini" @click="resetQuery">重置</el-button> <el-button icon="el-icon-refresh" size="mini" @click="resetQuery">重置</el-button>
</el-form-item> </el-row>
</el-form> </el-form>
<!-- 订单列表 --> <!-- 订单列表 -->
@ -129,7 +127,7 @@
v-for="(goods, j) in item.detailsList" v-for="(goods, j) in item.detailsList"
:key="j" :key="j"
class="order-items order-info" class="order-items order-info"
:style="j != item.detailsList.length - 1 ? 'border-bottom:1px solid #eee' : ''" :style="j != item.detailsList.length - 1 ? 'border-bottom:1px solid #f0f0f0' : ''"
style="min-height: 80px" style="min-height: 80px"
> >
<img :src="goods.url" style="width: 110px; height: 70px" alt="装备图片"/> <img :src="goods.url" style="width: 110px; height: 70px" alt="装备图片"/>
@ -171,7 +169,7 @@
v-for="(goods, j) in item.detailsList" v-for="(goods, j) in item.detailsList"
:key="j" :key="j"
class="order-info" class="order-info"
:style="j != item.detailsList.length - 1 ? 'border-bottom:1px solid #eee' : ''" :style="j != item.detailsList.length - 1 ? 'border-bottom:1px solid #f0f0f0' : ''"
style="min-height: 80px" style="min-height: 80px"
> >
<div style="display: flex; justify-content: center; align-items: center; flex-direction: column"> <div style="display: flex; justify-content: center; align-items: center; flex-direction: column">
@ -180,7 +178,7 @@
style="font-weight: bold; margin-top: 10px" style="font-weight: bold; margin-top: 10px"
:style="item.orderStatus == 20 ? 'text-decoration: line-through' : ''" :style="item.orderStatus == 20 ? 'text-decoration: line-through' : ''"
> >
{{ goods.rentBeginTime }}{{ goods.rentEndTime }} {{ formatDate(goods.rentBeginTime) }}{{ formatDate(goods.rentEndTime) }}
</div> </div>
<div style="font-weight: bold; margin-top: 10px" v-if="item.orderStatus == 20"> <div style="font-weight: bold; margin-top: 10px" v-if="item.orderStatus == 20">
{{ goods.takeOverTime ? goods.takeOverTime.slice(0, 10) : '' }} {{ goods.takeOverTime ? goods.takeOverTime.slice(0, 10) : '' }}
@ -273,7 +271,7 @@
<el-table-column prop="days" align="center" label="共享天数"/> <el-table-column prop="days" align="center" label="共享天数"/>
<el-table-column align="center" label="租期"> <el-table-column align="center" label="租期">
<template #default="{ row }"> <template #default="{ row }">
{{ `${row.preOutboundTime}${row.rentOverTime} ` }} {{ formatDate(row.preOutboundTime) + '至' + formatDate(row.rentOverTime) }}
</template> </template>
</el-table-column> </el-table-column>
</el-table> </el-table>
@ -474,8 +472,8 @@ export default {
orderStatus: '', orderStatus: '',
orderId: '', orderId: '',
statusList: [ statusList: [
{ id: '1', name: '待接单' }, { id: '1', name: '待确认' },
{ id: '2', name: '已接单' } { id: '2', name: '已确认' }
], ],
// //
@ -514,6 +512,13 @@ export default {
this.getList() this.getList()
}, },
methods: { methods: {
// YYYY-MM-DD
formatDate(dateStr) {
if (!dateStr) return ''
// 'YYYY-MM-DD HH:mm:ss' ISO
const s = String(dateStr)
return s.length >= 10 ? s.slice(0, 10) : s
},
// //
orderText(status) { orderText(status) {
const foundStatus = this.statusList.find(e => e.id === status) const foundStatus = this.statusList.find(e => e.id === status)
@ -606,10 +611,11 @@ export default {
<style lang="scss" scoped> <style lang="scss" scoped>
.cart-tbody { .cart-tbody {
background: #fff; background: #fff;
padding: 8px 12px; padding: 16px;
margin-bottom: 6px; margin-bottom: 14px;
border-radius: 8px; border-radius: 10px;
box-shadow: 0 2px 4px rgba(0, 0, 0, 0.5); border: 1px solid #ddd;
box-shadow: 0 4px 10px rgba(0, 0, 0, 0.08);
} }
:deep .el-form--inline .el-form-item { :deep .el-form--inline .el-form-item {
@ -619,9 +625,21 @@ export default {
.order-title-info { .order-title-info {
position: relative; position: relative;
padding: 6px 4px; padding: 8px 0;
font-size: 14px; font-size: 14px;
color: #999; color: #666;
//
span:first-child {
color: #666;
}
span + span {
color: #333;
}
&:not(:last-child) {
margin-bottom: 6px;
}
.order-type-box { .order-type-box {
position: absolute; position: absolute;
@ -631,12 +649,12 @@ export default {
} }
.order-items { .order-items {
border-right: 1px solid #eee; border-right: 1px solid #f0f0f0;
} }
.order-info { .order-info {
display: flex; display: flex;
padding: 4px 0; padding: 8px 0;
align-items: center; align-items: center;
justify-content: center; justify-content: center;
} }
@ -646,7 +664,7 @@ export default {
flex-direction: column; flex-direction: column;
align-items: center; align-items: center;
justify-content: center; justify-content: center;
border-right: 1px solid #eee; border-right: 1px solid #f0f0f0;
font-size: 13px; font-size: 13px;
} }