high-mini/physical-merchants/classify/order/trackNode/trackNode.vue

<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>