yuebeilian-b/src/packages/order/logistics.vue

<template>
	<view class="container">
		<Navbar title="物流详情" background-color="#ffffff" color="#333333"></Navbar>
		<view class="pad" :class="{ theme }">
			<view class="top">
				<image class="log-img" :src="staticImg ? staticImg + 'logistics.png' : ''"></image>
				<view class="text flex-y">
					<text>快递公司：{{ company }}</text>
					<text>快递编号：{{ code }}</text>
				</view>
			</view>
			<view class="body flex-space-top" v-if="logList.length > 0">
				<view v-for="(item, index) in logList" :key="index">
					<view v-if="index == 0" class="step-item">
						<view class="active"></view>
						<view class="step">
							<view class="word14">{{ item.context }}</view>
							<text class="tips">{{ item.time }}</text>
						</view>
					</view>
					<view v-else class="step-item">
						<view class="circle"></view>
						<view class="step">
							<text class="word14-gray9">{{ item.context }}</text>
							<text class="tips-gray9">{{ item.time }}</text>
						</view>
					</view>
				</view>
			</view>
		</view>
	</view>
</template>

<script lang="ts">
	import {
		Component,
		Prop,
		Vue,
		Emit
	} from 'vue-property-decorator';
	@Component({})
	export default class logistics extends Vue {
		staticImg: string = this.$oss_url;
		code: string = '';
		company: string = '';
		logList: any = [];
		oid: number | null = null; // 订单id
		id: number | null = null; // 订单id
		active: number = 0;
		onShow() {
			let query = this.$Route.query;
			if (query.oid) {
				this.oid = +query.oid;
				this.id = +query.id;
				this.getLogistics();
			}
		}

		getLogistics(): void {
			uni.showLoading({
				title: '加载中',
			});
			this.$http
				.get({
					url: this.$api.logistics,
					data: {
						oid: this.oid,
						id: this.id
					}
				})
				.then((res: any) => {
					this.code = res.code;
					this.company = res.company;
					this.logList = res.data;
					uni.hideLoading();
				})
				.catch((err: any) => {
					console.log(err);
					uni.hideLoading();
				});
	
	}
}
</script>

<style lang="scss" scoped>
	.icon {
		@include icon();
	}

	.flex-right {
		@include flex-x(flex-end);
	}

	.flex-space {
		width: 100%;
		margin-bottom: vw(10);
		@include flex-x();
	}

	.flex-space-top {
		@include flex-x(space-between, flex-start);
	}

	.flex-left {
		@include flex-x();
	}

	.flex-y {
		width: 100%;
		padding: 0 vw(5) vw(10);
		@include flex-y(flex-start, flex-start);
	}

	.word14 {
		@include word-vw(14);
	}

	.word14-gray9 {
		@include word-vw(14, $gray9);
	}

	.pad {
		width: 100vw;
		min-height: 100vh;
		background: border-color;
		background: #F6F6F6;

		.top {
			height: vw(80);
			@include flex-x(flex-start);
			background: white;
			padding: 0 vw(15);
			position: relative;

			.log-img {
				width: vw(48);
				height: vw(48);
				border-radius: 50%;
				background: #f5f5f5;
				margin-right: vw(5);
				@include flex-y();

				.icon {
					@include icon(24, gray9);
				}
			}

			.avatar {
				width: vw(60);
				height: vw(60);
				border-radius: 50%;
				background-color: #f5f5f5;
				@include flex-y();
				overflow: hidden;

				image {
					width: vw(60);
					height: vw(60);
				}

				.icon {
					@include icon(30, #d8d8d8);
				}
			}

			.text {
				padding: vw(15);
				flex: 1;

				text {
					line-height: 1.5;
					color: $gray3;
					font-size: vw(14);
				}
			}
		}

		.body {
			background-color: white;
			margin-top: vw(10);
			padding: 0 vw(15) vw(15);
			@include flex-y(flex-start);

			.step-item {
				@include flex-x(flex-start, flex-start);
				margin-top: 27px;
			}

			.active {
				width: vw(14);
				height: vw(14);
				background: $main-color;
				border-radius: 50%;
				margin: vw(8);
				flex-shrink: 0;
				position: relative;
				z-index: 1;

				&::after {
					content: '';
					position: absolute;
					top: vw(14);
					left: vw(6);
					width: 1px;
					height: 100px;
					background-color: $grayEF;
					z-index: 0;
				}
			}

			.circle {
				width: vw(8);
				height: vw(8);
				background: $grayEF;
				border-radius: 50%;
				margin: vw(8) vw(11) vw(10);
				flex-shrink: 0;
				position: relative;
				z-index: 1;

				&::after {
					content: '';
					position: absolute;
					top: vw(-50);
					left: vw(3);
					width: 1px;
					height: vw(110);
					background-color: $grayEF;
					z-index: 0;
				}
			}

			.tips {
				font-size: vw(12);
				color: $gray3;
			}

			.tips-gray9 {
				font-size: vw(12);
				color: $gray9;
			}

			.circle-empty {
				width: vw(20);
			}

			.step {
				@include flex-y(flex-start, flex-start);
			}
		}
	}
</style>