qjd-shell-uniapp/pagesMain/logisticsDeatil.vue

<template>
	<view class="container">
		<view class="express-info">
			<view class="express-text">物流公司：{{expressData.company}}</view>
			<view class="express-text">物流单号：{{expressData.logisticCode ? expressData.logisticCode : ''}}</view>
		</view>
		<view class="express-list">
			<uni-steps :options="expressList" active-color="#008AFF" direction="column" :active="0"></uni-steps>
		</view>
	</view>
</template>

<script>
	const NET = require('@/utils/request')
	const API = require('@/config/api')
	export default {
		data() {
			return {
				expressData: {
					company: '',
					logisticCode: '',
				},
				expressList: []
			}
		},
		onLoad(options) {
			NET.request(API.getLogisticsDeatil + 'shunfeng/' + options.logisticCode, {}, 'GET').then(res => {
				this.expressData = {
					company: '顺丰',
					logisticCode: res.data.logisticCode,
				}
				if (res.data.traces.length) {
			      this.expressList = res.data.traces && res.data.traces.map(site => {
			      	return {
			      		title: site.acceptStation,
			      		desc: site.acceptTime
			      	}
			      })
				} else {
				    this.expressList = [{title: ' ', desc: '暂无物流信息'}]
				}
			}).catch(error => {
				console.log('物流追踪',error)
				this.$refs.uTips.show({
					title: error.data.msg,
					type: 'warning',
				})
			})
		},
		methods: {}
	}
</script>

<style lang="less" scoped>
	page {
		width: 100%;
		height: 100%;
	}

	.container {
		width: 100%;
		height: 100%;
		float: left;
		background-color: #f7f7f7;

		.express-info {
			width: 100%;
			height: 120px;
			float: left;
			background: #52A63A;
			box-sizing: border-box;
			padding: 34px 0 0 80px;
			background-size: 50px;
			background-position: 15px 30px;
			background-repeat: no-repeat;
			background-image: url(@/static/images/logisticsIcon.png);

			.express-text {
				width: 100%;
				height: 20px;
				float: left;
				line-height: 20px;
				font-size: 15px;
				font-family: PingFang SC;
				color: #FFFFFF;
			}
		}

		.express-list {
			width: 100%;
			height: calc(100% - 105px);
			float: left;
			background: #FFFFFF;
			box-sizing: border-box;
			padding: 10px 15px;
			box-shadow: 0px 1px 5px 0px rgba(102, 102, 102, 0.43);
			border-radius: 15px 15px 0px 0px;
			margin-top: -15px;
			overflow-y: auto;

			/deep/.uni-steps__column-line-item:first-child {
				.uni-steps__column-line--before {
					visibility: hidden;
				}
			}

			/deep/.uni-steps__column-text:first-child {
				.uni-steps__column-title {
					color: #333333 !important;
					margin-bottom: 4px;
				}
			}

			/deep/.uni-steps__column-line-item:last-child {
				.uni-steps__column-line--after {
					visibility: hidden;
				}
			}

			/deep/.uni-steps__column-text {
				border: none;
			}

			/deep/.uni-steps__column-check {
				.uni-icons {
					font-size: 22px !important;
				}
			}

			/deep/.uni-steps__column-circle {
				width: 8px;
				height: 8px;
				background: #DCDEE0 !important;
			}

			/deep/.uni-steps__column-line {
				background: #F2F3F5 !important;
			}

			/deep/.uni-steps__column-line--before {
				height: 14px;
			}

			/deep/.uni-steps__column-title {
				color: #666666 !important;
				margin-bottom: 4px;
			}

			/deep/.uni-steps__column-desc {
				color: #666666 !important;
			}

			/deep/.uni-steps__column-container {
				margin-right: 6px;
			}
		}
	}
</style>