zsw-farm-bxg/pages/order/Logistics/index.vue

<template>
  <view class="logistics">
		<view class="header">
			<cu-custom :isBack="true" :isCenter="true">
				<block slot="backText">
					<view class="backImg">
						<image src="@/static/images/back-btn.png" mode=""></image>
					</view>
				</block>
				<block slot="content">
					<view class="tab-title">物流详情</view>
				</block>
			</cu-custom>
		</view>
		
		<view class="info-box acea-row row-between">
			<view class="image-box">
				<image :src="cartInfo[0].productInfo.image" mode="aspectFill"></image>
				<view class="image-num" v-if="cartInfo.length > 1">等{{cartInfo.length}}件商品</view>
			</view>
			<view class="info-text">
				<view class="item">配送快递：{{ orderInfo.deliveryName }}</view>
				<view class="item">快递单号：{{ orderInfo.deliveryId }}</view>
				<view class="item" @click="cellPhone">联系电话：{{95338}}</view>
			</view>
		</view>
		
		<view class="state-box">
			<view class="state-progress acea-row row-between">
				<view class="acea-row row-column row-middle" v-for="(item,index) in stateList" :key="index">
					<view class="state-tip">
						<view v-if="index != stateActive" class="tip">{{item.tip}}</view>
						<view v-else class="active-tip acea-row row-column row-middle">
							<view class="box">{{item.tip}}</view>
							<view class="jiantou"></view>
						</view>
					</view>
					<view :class="'state-item ' + (index == stateActive?'active':'')">
						<view class=""></view>
					</view>
				</view>
				<view class="state-line"></view>
			</view>
			<!-- <view class="acea-row row-between">
				<view class="place">上海市</view>
				<view class="place line1">武汉市</view>
			</view> -->
		</view>
		
    <!-- <view class="header acea-row row-between row-top" v-for="cart in cartInfo" :key="cart.id">
      <view class="pictrue">
        <image :src="cart.productInfo.image" />
      </view>
      <view class="text acea-row row-between">
        <view class="name line2">{{ cart.productInfo.store_name }}</view>
        <view class="money">
          <view>￥{{ cart.truePrice }}</view>
          <view>x{{ cart.cart_num }}</view>
        </view>
      </view>
    </view> -->
		
    <!-- <view class="logisticsCon" style="margin-bottom: 5px">
      <view class="company acea-row row-between-wrapper">
        <view class="picTxt acea-row row-between-wrapper">
          <view class="iconfont icon-wuliu"></view>
          <view class="text">
            <view>
              <text class="name line1">物流公司：</text>
              {{ orderInfo.deliveryName }}
            </view>
            <view class="express line1">
              <text class="name">快递单号：</text>
              {{ orderInfo.deliveryId }}
            </view>
          </view>
        </view>
        #ifndef H5
        <view class="copy acea-row row-center-wrapper copy-data" @click="copyClipboard(orderInfo.deliveryId)">复制单号</view>
        #endif
      </view>
      <view class="item" v-for="(express, expressListIndex) in expressList" :key="expressListIndex">
        <view class="circular" :class="expressListIndex === 0 ? 'on' : ''"></view>
        <view class="text">
          <view :class="expressListIndex === 0 ? 'font-color-red' : ''">{{ express.status }}</view>
          <view class="data">{{ express.time }}</view>
        </view>
      </view>
    </view> -->
		
		<view class="logistics-progress">
			<view class="title">物流详情</view>
			<view>
			  <view class="track-rcol">
			    <view class="track-list">
			      <view>
			        <view class="track-list-item" v-for="(item, logisticsListindex) in logisticsList" :key="logisticsListindex">
			          <view class="active acea-row" v-if="logisticsListindex === 0">
			            <view class="node-icon-box"><i class="node-icon"></i></view>
									<view class="">
										<view class="txt">{{ item.acceptStation }}</view>
										<view class="time">{{ item.acceptTime }}</view>
									</view>
			            
			          </view>
			          <view class="acea-row" v-if="logisticsListindex > 0 && logisticsListindex !== logisticsList.length - 1">
			            <i class="node-icon"></i>
									<view class="">
										<view class="txt">{{ item.acceptStation }}</view>
										<view class="time">{{ item.acceptTime }}</view>
									</view>
			            
			          </view>
			          <view v-if="logisticsList.length != 1 && logisticsListindex === logisticsList.length - 1" class="finall acea-row">
			            <!-- <i class="div-spilander"></i> -->
			            <i class="node-icon"></i>
									<view class="">
										<view class="txt">{{ item.acceptStation }}</view>
										<view class="time">{{ item.acceptTime }}</view>
									</view>
			            
			          </view>
			        </view>
			      </view>
			    </view>
			  </view>
			</view>
		</view>

    <!-- 物流进度条 物流跟踪 -->
    <!-- <view class="div-bg bg-white" style="font-size:12px; background:#fff;">
      <view style="margin-bottom:5px;">
        <view class="bg-white" style="width: 92%; margin-left: 4%;margin: auto;padding-left: 15px;padding-right: 15px;padding-top: 10px">
          <view style="font-size: 26rpx;color: #111111; margin: 5px 0">
            物流跟踪
          </view>
          <view>
            <view class="track-rcol">
              <view class="track-list">
                <view>
                  <view class="track-list-item" v-for="(item, logisticsListindex) in logisticsList" :key="logisticsListindex">
                    <view class="active" v-if="logisticsListindex === 0">
                      <view></view>
                      <i class="node-icon"></i>
                      <text class="txt">{{ item.acceptStation }}</text>
                      <text class="time">{{ item.acceptTime }}</text>
                    </view>
                    <view v-if="logisticsListindex > 0 && logisticsListindex !== logisticsList.length - 1">
                      <i class="node-icon"></i>
                      <text class="txt">{{ item.acceptStation }}</text>
                      <text class="time">{{ item.acceptTime }}</text>
                    </view>
                    <view v-if="logisticsListindex === logisticsList.length - 1" class="finall">
                      <i class="div-spilander"></i>
                      <i class="node-icon"></i>
                      <text class="txt">{{ item.acceptStation }}</text>
                      <text class="time">{{ item.acceptTime }}</text>
                    </view>
                  </view>
                </view>
              </view>
            </view>
          </view>
        </view>
      </view>
    </view> -->

    <view class="no-express" v-if="loaded && !expressList.length">
      <image :src="`${$VUE_APP_RESOURCES_URL}/images/noExpress.png`" />
    </view>
    <!-- <Recommend></Recommend> -->
  </view>
</template>
<script>
// import Recommend from '@/components/Recommend'
import { express, orderDetail } from '@/api/order'
import { copyClipboard } from '@/utils'

const NAME = 'Logistics'

export default {
  name: NAME,
  components: {
    // Recommend,
  },
  data: function() {
    return {
      id: '',
      cartInfo: [],
      orderInfo: {},
			stateList: [
				{
					state: '',
					tip: '已发货'
				},
				{
					state: '',
					tip: '运输中'
				},
				{
					state: '',
					tip: '派件中'
				},
				{
					state: '',
					tip: '已签收'
				},
			],
			stateActive: 0,
      expressList: [],
      loaded: false,
      logisticsList: [
        {
          acceptStation: '暂无数据',
          acceptTime: '',
        },
      ],
    }
  },
  watch: {
    $yroute(n) {
      if (n.name === NAME && this.$yroute.query.id !== this.id) {
        this.id = this.$yroute.query.id
        this.getExpress()
      }
    },
  },
  mounted: function() {
    this.id = this.$yroute.query.id
    this.getExpress()
  },
  methods: {
    copyClipboard,
    getExpressInfo() {
      let params = {
        shipperCode: this.orderInfo.deliverySn,
        logisticCode: this.orderInfo.deliveryId,
      }
      express(params)
        .then(res => {
					if(res.data.Traces) {
						this.logisticsList = res.data.Traces;
						// this.logisticsList = res.data.Traces.reverse();
						if(this.logisticsList.length > 0) {
							let acceptStation = this.logisticsList[0].acceptStation;
							let isDelivery = false,
									delivery = ['投递员','派件员','正在派件','配送员','正为您派送','正在第1次派件','派件中','派件人'];
							let isignFor = false,
									signFor = ['已取走', '已签收','代签收'];
							isDelivery = delivery.some(val => {
								return acceptStation.includes(val);
							})
							isignFor = signFor.some(val => {
								return acceptStation.includes(val);
							})
							this.stateActive = 1;
							if(isDelivery) {
								this.stateActive = 2;
							}
							if (isignFor) {
								this.stateActive = 3;
								if(acceptStation.includes('准备分配派送员')) {
									this.stateActive = 2;
								}
							}
						} else {
							this.stateActive = 0;
							this.logisticsList = [{
								acceptStation: '包裹正在等待揽收',
								acceptTime: ''
							}]
						}
					}
          
        })
        .catch(err => {
          uni.showToast({
            title: err.msg || err.response.data.msg || err.response.data.message,
            icon: 'none',
            duration: 2000,
          })
        })
    },
    getExpress() {
      if (!this.id) {
        uni.showToast({
          title: err.msg || err.response.data.msg || err.response.data.message,
          icon: 'none',
          duration: 2000,
        })
        return
      }
      this.loaded = false
      orderDetail(this.id)
        .then(res => {
          this.orderInfo = {
            deliveryId: res.data.deliveryId,
            deliveryName: res.data.deliveryName,
            deliverySn: res.data.deliverySn,
          }
          this.getExpressInfo()
          // const result = res.data.express.result || {};
          this.cartInfo = res.data.cartInfo;
          // this.expressList = result.list || [];
          // this.loaded = true;
        })
        .catch(err => {
          uni.showToast({
            title: err.msg || err.response.data.msg || err.response.data.message,
            icon: 'none',
            duration: 2000,
          })
        })
    },
		cellPhone() {
			uni.makePhoneCall({
			  phoneNumber: '18062552948',
			  fail: function () {
			    console.log('取消');
			  }
			});
		}
  },
}
</script>

<style scoped lang="less">
	.header {
		.tab-title {
			font-size: 32rpx;
			font-family: PingFang SC;
			font-weight: 600;
			color: #2DB5AE;
			line-height: 42rpx;
		}
		.backImg {
			width: 88rpx;
			height: 62rpx;
			padding-left: 26rpx;
			image {
				width: 100%;
				height: 100%;
			}
		}
	}
	
	.info-box {
		margin: 20rpx 32rpx;
		width: 686rpx;
		padding: 20rpx;
		background: linear-gradient(135deg, #39D396 0%, #2DB7AD 43%, #1B8DCC 100%);
		box-shadow: 0rpx 10rpx 16rpx 0rpx rgba(0, 0, 0, 0.06);
		border-radius: 16rpx;
		.image-box {
			width: 164rpx;
			height: 164rpx;
			border-radius: 16rpx;
			position: relative;
			image {
				width: 100%;
				height: 100%;
				border-radius: 16rpx;
			}
			.image-num {
				width: 144rpx;
				height: 40rpx;
				background: rgba(0, 0, 0, 0.5);
				border-radius: 12rpx;
				font-size: 24rpx;
				font-family: PingFang SC;
				font-weight: 600;
				color: #FFFFFF;
				line-height: 40rpx;
				text-align: center;
				position: absolute;
				left: 10rpx;
				bottom: 10rpx;
			}
		}
		.info-text {
			width: 442rpx;
			font-size: 24rpx;
			font-family: PingFang SC;
			font-weight: 600;
			color: #FFFFFF;
			line-height: 32rpx;
			.item {
				padding-top: 16rpx;
			}
		}
	}
	
	.state-box {
		margin: 0rpx 32rpx 20rpx;
		width: 686rpx;
		height: 208rpx;
		background: #F5F6F8;
		box-shadow: 0rpx 10rpx 16rpx 0rpx rgba(0, 0, 0, 0.06);
		border-radius: 16rpx;
		.state-progress {
			padding: 26rpx 23rpx 16rpx;
			position: relative;
			.state-tip {
				width: 100rpx;
				height: 60rpx;
				margin-bottom: 16rpx;
				font-family: PingFang SC;
				font-weight: 600;
				text-align: center;
				.tip {
					padding-top: 34rpx;
					font-size: 18rpx;
					color: #2DB5AE;
					line-height: 26rpx;
				}
				.box {
					width: 100rpx;
					height: 44rpx;
					background-color: #2DB5AE;
					border-radius: 16rpx;
					font-size: 24rpx;
					color: #FFFFFF;
					line-height: 46rpx;
					text-align: center;
				}
				.jiantou {
					width: 0;
					height: 0;
					border-top: 16rpx solid #2DB5AE;
					border-bottom: 0rpx;
					border-left: 8rpx solid transparent;
					border-right: 8rpx solid transparent;
				}
			}
			.state-item {
				width: 32rpx;
				height: 32rpx;
				padding: 4rpx;
				border-radius: 50%;
				position: relative;
				z-index: 1;
				view {
					width: 24rpx;
					height: 24rpx;
					background: linear-gradient(135deg, #39D396 0%, #2DB7AD 43%, #1B8DCC 100%);
					border-radius: 50%;
				}
			}
			.active {
				background: linear-gradient(rgba(27, 141, 204, 1), rgba(45, 183, 173, 1), rgba(57, 211, 150, 1));
			}
			.state-line {
				width: 538rpx;
				height: 4rpx;
				background: linear-gradient(135deg, #39D396 0%, #2DB7AD 43%, #1B8DCC 100%);
				position: absolute;
				left: 74rpx;
				top: 118rpx;
				z-index: 0;
			}
		}
		.place {
			margin: 0rpx 6rpx;
			width: 134rpx;
			font-size: 24rpx;
			font-family: PingFang SC;
			font-weight: 600;
			color: #3A3A3C;
			line-height: 32rpx;
			text-align: center;
		}
	}
	
	.logistics-progress {
		margin: 0rpx 32rpx 40rpx;
		padding: 20rpx;
		width: 686rpx;
		background: #F5F6F8;
		box-shadow: 0rpx 10rpx 16rpx 0rpx rgba(0, 0, 0, 0.06);
		border-radius: 16rpx;
		.title {
			font-size: 30rpx;
			font-family: PingFang SC;
			font-weight: 600;
			color: #3A3A3C;
			line-height: 42rpx;
			padding-bottom: 34rpx;
		}
	}
	
	
.no-express {
  margin: 1.5 * 100rpx 0;
}

.no-express image {
  width: 6 * 100rpx;
  margin: 0 auto;
  display: block;
}

.message-text {
  font-family: MicrosoftYaHei;
  font-size: 1 * 100rpx;
  font-weight: normal;
  font-stretch: normal;
  line-height: 3 * 100rpx;
  letter-spacing: 0 * 100rpx;
  color: #333333;
  width: 50%;
}

.fontblack {
  color: #999999;
}

.img2 {
  width: 0.81 * 100rpx;
  height: 0.8 * 100rpx;
  float: right;
}

.addressshow2 {
  height: auto;
  overflow: hidden;
  text-overflow: ellipsis;
  display: -webkit-box;
  width: 75%;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  white-space: normal;
  word-wrap: break-word;
  word-break: break-all;
  font-size: 1 * 100rpx;
}

.addressshow1 {
  height: auto;
  overflow: hidden;
  text-overflow: ellipsis;
  display: -webkit-box;
  width: 75%;
  -webkit-line-clamp: 1;
  -webkit-box-orient: vertical;
  white-space: normal;
  word-wrap: break-word;
  word-break: break-all;
  font-size: 1 * 100rpx;
}

.orderTitle {
  font-size: 1 * 100rpx;
  color: #333333;
  height: auto;
  overflow: hidden;
  text-overflow: ellipsis;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  white-space: normal;
  word-wrap: break-word;
  word-break: break-all;
  height: 2.5 * 100rpx;
}

.orderDetail {
  font-size: 0.26 * 100rpx;
  color: #666666;
  text-align: left;
}

.border-ceter {
  width: 92%;
  padding-left: 15px;
  padding-right: 15px;
}

.pay-button {
  width: 88%;
  height: 2.6 * 100rpx;
  position: relative;
  background-color: red;
  color: white;

  margin-left: 6%;
}

ul view {
  list-style: none;
  font-size: 0.24 * 100rpx;
}

ul {
}

.track-rcol {
}

.track-list {
  position: relative;
}

.track-list > view {
  position: relative;
	padding-left: 52rpx;
	padding-right: 40rpx;
  // padding: 0 0 0.5 * 100rpx 20rpx;
  // padding: 0 0 0.5 * 100rpx 20rpx;
}
.track-list .track-list-item {
  position: relative;
  padding: 0 0 46rpx 40rpx;
  // padding: 0 0 0.5 * 100rpx 20rpx;
  line-height: 0.3 * 100rpx;
  border-left: 4rpx solid #2DB7AD;
  // border-left: 1px solid #d9d9d9;
  color: #999;
}
.track-list .track-list-item:last-child {
	border-left: 4rpx solid #F5F6F8;
}

// .track-list view.first {
//   color: red;
//   padding-top: 0;
//   width: 100%;
//   text-align: left;
//   border-left: 1px solid #d9d9d9;
// }

.track-list .active .node-icon-box {
	position: absolute;
	top: 0;
	left: -17rpx;
	width: 30rpx;
	height: 30rpx;
	padding: 4rpx;
	background: radial-gradient(circle, rgba(27, 141, 204, 1), rgba(45, 183, 173, 1), rgba(57, 211, 150, 1));
	border-radius: 50%;
	.node-icon {
		width: 100%;
		height: 100%;
		background: linear-gradient(135deg, #39D396 0%, #2DB7AD 43%, #1B8DCC 100%);
		position: relative;
		top: 0rpx;
		left: 0rpx;
		border-radius: 50%;
	}
}

.track-list view.node-icon {
  position: absolute;
  left: -14rpx;
  top: 0rpx;
  border-radius: 50%;
	width: 24rpx;
	height: 24rpx;
	background: linear-gradient(135deg, #39D396 0%, #2DB7AD 43%, #1B8DCC 100%);
  // width: 0.2 * 100rpx;
  // height: 0.2 * 100rpx;
  // background-color: #b2b2b2;
  padding: 0 !important;
}

// .track-list view.active .node-icon {
//   background-position: 0 -72px;
//   background-color: #ea7c0a;
//   width: 0.3 * 100rpx;
//   z-index: 2;
//   height: 0.3 * 100rpx;
//   position: absolute;
//   left: -0.19 * 100rpx;
//   top: 0;
//   border-radius: 50%;
// }

.track-list view.time {
	font-size: 20rpx;
	font-family: PingFang SC;
	font-weight: 500;
	color: #999999;
	line-height: 24rpx;
	padding-top: 10rpx;
	
  // margin-right: 20px;
  // position: relative;
  // top: 4px;
  // display: inline-block;
  // vertical-align: middle;
  // color: #999;
  // width: 100%;
  // text-align: left;
}

.track-list view.txt {
  position: relative;
	font-size: 24rpx;
	font-family: PingFang SC;
	font-weight: 500;
	color: #3A3A3C;
	line-height: 26rpx;
	
  // display: inline-block;
  // vertical-align: top;
  // color: #999;
  // left: 0.2 * 100rpx;
  // top: 0.04 * 100rpx;
}

// .track-list view.first .time {
//   text-align: left;
//   width: 94%;
//   color: red;
// }

// .track-list view.first .txt {
//   color: red;
//   text-align: left;
//   width: 94%;
// }

// .track-list view.finall {
//   padding: 0px 0 0.5 * 100rpx 5px;
//   line-height: 18px;
//   border-color: white;
//   border-left: 1px solid #ffffff;
//   color: #999;
// }

.track-list view.finall .div-spilander {
  width: 4rpx;
  position: absolute;
  left: -2rpx;
  height: 0.5 * 100rpx;
  background-color: #2DB7AD;
}
</style>