<template> <view class="total-wrap" :style="{marginTop: isMainNode?'22rpx':'6rpx'}"> <view class="node-container"> <view class="node-container-left"> <view class="tag-container"> <image class="height100 width100" v-if="isMainNode" :src="nodeIconUrl"/> <view v-else class="node-tag-container"> <view class="node-tag"></view> </view> </view> <view class="line-container" :style="{height: isMainNode?'142rpx':'88rpx', paddingTop: isMainNode?'22rpx':'8rpx'}"> <view v-if="!isFirst" class="line" :style="{height: isMainNode?'120rpx':'80rpx'}"></view> </view> </view> <view class="node-container-right" :style="{paddingTop: isMainNode?'0':'8rpx'}"> <view v-if="isMainNode" class="node-title " :style="{color: isNewest?'#222':'#999'}"> <text>{{nodeData.areaName}}</text> </view> <view class="node-desc" :style="{color: isNewest?'#4b4b4b':'#999', marginTop: isMainNode?'10rpx':'0'}">{{acceptStationFixed}}</view> <view v-if="nodeData.phone" class="node-phone">{{nodeData.phone}}</view> <view class="node-time">{{nodeData.time | formatDate }}</view> </view> </view> </view> <!-- isNewest Boolean 是否是最新(时间)节点 isFirst Boolean 是否是第一项(第一项不展示竖线) isMainNode Boolean 是否是每种状态下的主节点(主节点显示图标,非主节点显示圆点) nodeData Object 每项数据 --> </template> <script> export default { props: { isNewest: { type: Boolean, default: false }, isFirst: { type: Boolean, default: false }, isMainNode: { type: Boolean, default: false }, isShowDetail:{ type: Boolean, default: false }, nodeData: { type: Object, default () { return { status: '', statusName: '', createTime: '2023-01-01 00:00:00', acceptStation: 'xxxxxx' } } } }, computed: { nodeIconUrl () { if (this.nodeData.logisticsStatus === 'WAIT_ACCEPT') { // 待揽收 return this.isNewest ? '/physical-merchants/static/img/wuliu/ic-paied.png' : '/physical-merchants/static/img/wuliu/ic-paied-G.png' } else if (this.nodeData.logisticsStatus === 'ACCEPT') { // 已揽收 return this.isNewest ? '/physical-merchants/static/img/wuliu/ic-pacakaging.png' : '/physical-merchants/static/img/wuliu/ic-pacakaging-G.png' } else if (this.nodeData.logisticsStatus === 'DELIVERING') { // 派件中 return this.isNewest ? '/physical-merchants/static/img/wuliu/ic-sending.png' : '/physical-merchants/static/img/wuliu/ic-sending-G.png' } else if (this.nodeData.logisticsStatus === 'SIGN'|| this.nodeData.logisticsStatus === 'AGENT_SIGN') { // 已签收,已待签收 return this.isNewest ? '/physical-merchants/static/img/wuliu/ic-delivering.png' : '/physical-merchants/static/img/wuliu/ic-delivering-G.png' }else if (this.nodeData.logisticsStatus === 'FAILED') { // 包裹异常 return this.isNewest ? '/physical-merchants/static/img/wuliu/ic-package-failed.png' : '/physical-merchants/static/img/wuliu/ic-package-failed-G.png' } }, acceptStationFixed () { if (!this.nodeData.desc) return '' return this.nodeData.desc } }, methods:{ }, filters:{ formatDate(value, spe = '/') { let data = new Date(value); let year = data.getFullYear(); let month = data.getMonth() + 1; let day = data.getDate(); let h = data.getHours(); let mm = data.getMinutes(); let s = data.getSeconds(); month = month >= 10 ? month : "0" + month; day = day >= 10 ? day : "0" + day; h = h >= 10 ? h : "0" + h; mm = mm >= 10 ? mm : "0" + mm; s = s >= 10 ? s : "0" + s; return `${year}${spe}${month}${spe}${day} ${h}:${mm}:${s}`; }, } } </script> <style lang="scss" scoped> .dis-fx{ display: flex; justify-content: space-between; align-items: center; } .ft{ font-size: 16px; } .total-wrap { margin-top: 22rpx; width: 100%; .node-container { width: 100%; height: auto; display: flex; &-left { width: 44rpx; height: auto; .tag-container { width: 44rpx; height: 44rpx; img { width: 44rpx; height: 44rpx; } .node-tag-container { width: 44rpx; height: 44rpx; display: flex; justify-content: center; align-items: center; .node-tag { width: 14rpx; height: 14rpx; background-color: #dcdcdc; border-radius: 50%; } } } .line-container { box-sizing: border-box; width: 44rpx; display: flex; align-items: center; justify-content: center; .line { width: 2rpx; background-color: #dcdcdc; } } } &-right { flex: 1; box-sizing: border-box; padding: 0 10rpx 0 24rpx; .node-title { width: 100%; height: 40rpx; line-height: 44rpx; color: #222; font-size: 28rpx; font-family: 'PingFangSC-Medium'; } .node-desc { margin-top: 16rpx; width: 100%; min-height: 30rpx; line-height: 30rpx; color: #222; font-size: 24rpx; font-family: 'PingFangSC-Regular'; word-wrap: break-word; word-break: normal; } .node-phone { margin-top: 8rpx; width: 100%; height: 26rpx; line-height: 26rpx; color: #FE4E2C; font-size: 26rpx; font-family: 'Avenir-Medium'; } .node-time { margin-top: 12rpx; width: 100%; height: 34rpx; line-height: 34rpx; color: #999; font-size: 24rpx; font-family: 'Avenir-Book'; } } } } </style>