<template>
	<view class="content">
		<view class="topTitle">
			<view class="leftImg" @click="goBack">
				<image src="../../static/ic_21_1@2x.png" mode=""></image>
			</view>
			<view class="detailText">
				订单详情
			</view>
			<view class="">

			</view>
		</view>
		<view class="addressOuterBox">
			<view class="statusTtext">
				已发货
			</view>
			<view class="addressBox">
				<view class="addImg">
					<image src="../../static/ic_38@2x.png" mode=""></image>
				</view>
				<view class="addInfo">
					<view class="addName">
						张下雨
						<text>12345678945</text>
					</view>
					<view class="detail">
						广东省广州市大华区明理路科 技园808号
					</view>
				</view>
			</view>
		</view>
		<view class="logicbox">
			<view class="logicName">
				<view class="">
					韵达快递
					<text style="padding-left: 32rpx;font-size:26rpx;color:#646566;font-weight: 500;">12345678945</text>
				</view>
				<view class="" style="font-size: 26rpx;color:#ff2f2f;font-weight: 500;">
					复制
				</view>

			</view>
			<!-- 物流 -->
			<view class="" style=" padding: 32rpx; box-sizing: border-box;">
				<u-time-line>
					<u-time-line-item nodeTop="2" >
						<template v-slot:node >
							<view class="u-node" style="background: #19be6b;">
								<u-icon name="pushpin-fill" color="#fff" :size="24"></u-icon>
							</view>
						</template>
						<template v-slot:content>
							<view>
								<view class="u-order-title">{{list[0].status}}</view>
								<view class="u-order-desc">
									{{list[0].desc}}</view>
								<view class="u-order-time">{{list[0].time}}</view>
							</view>
						</template>
					</u-time-line-item>
					<u-time-line-item v-for="(item,index) in list1" :key='idnex'>
							<template v-slot:content>
								<view>
									<view class="u-order-title">{{item.status}}</view>
									<view class="u-order-desc">{{item.desc}}</view>
									<view class="u-order-time">{{item.time}}</view>
								</view>
							</template>
						
					</u-time-line-item>
				</u-time-line>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				list1:[{
					time: '2019-05-08 12:12',
					status: '待揽收',
					desc: '【广州市】日照香炉生紫烟，遥看瀑布挂前川，飞流直下三千尺，疑是银河落九天'
				}, {
					time: '2019-05-08 12:12',
					status: '待发货',
					desc: '【上海市】日照香炉生紫烟，遥看瀑布挂前川，飞流直下三千尺，疑是银河落九天'
				}],
				list: [{
					time: '2019-05-08 12:12',
					status: '待取件',
					desc: '【深圳市】日照香炉生紫烟，遥看瀑布挂前川，飞流直下三千尺，疑是银河落九天'
				} ]
			}
		},
		methods:{
			goBack(){
				uni.navigateBack({
					delta:1
				})
			}
		}
	}
</script>

<style>
	.content {
		min-height: 100vh;
		background-color: #F7F8FA;
		position: absolute;
		width: 100%;
	}

	.topTitle {
		position: fixed;
		width: 100%;
		height: 176rpx;
		background: #ff2f2f;
		padding: 106rpx 32rpx 0;
		display: flex;
		justify-content: space-between;
		box-sizing: border-box;
	}

	.leftImg image {
		width: 30rpx;
		height: 38rpx;
	}

	.detailText {
		color: #ffffff;
		font-size: 34rpx;
	}

	.addressOuterBox {
		padding: 32rpx;
		width: 100%;
		background: #ff2f2f;
		margin-top: 176rpx;
		box-sizing: border-box;
	}

	.statusTtext {
		color: #ffffff;
		font-size: 36rpx;
		padding-bottom: 32rpx;
	}

	.addImg {
		margin-right: 20rpx;
	}

	.addImg image {
		width: 80rpx;
		height: 80rpx;
	}

	.addressBox {
		display: flex;
		background-color: #fff;
		width: 100%;
		border-radius: 16rpx;
		padding: 32rpx;
		box-sizing: border-box;
	}

	.addInfo {
		flex: 1;
	}

	.addName {
		color: #323233;
		font-size: 32rpx;
	}

	.addName>text {
		color: #646566;
		font-size: 26rpx;
		padding-left: 32rpx;
	}

	.detail {
		color: #646566;
		font-size: 26rpx;
		margin-top: 12rpx;
	}

	.logicbox {
		margin-top: 24rpx;
		background-color: #fff;
	}

	.logicName {
		padding: 32rpx;
		box-sizing: border-box;
		border-bottom: 2rpx solid #ebedf0;
		color: #323233;
		font-size: 32rpx;
		display: flex;
		align-items: center;
		font-weight: 600;
		justify-content: space-between;
	}

	.u-node {
		width: 44rpx;
		height: 44rpx;
		border-radius: 100rpx;
		display: flex;
		justify-content: center;
		align-items: center;
		background: #d0d0d0;
	}

	.u-order-title {
		color: #333333;
		font-weight: bold;
		font-size: 32rpx;
	}

	.u-order-desc {
		color: rgb(150, 150, 150);
		font-size: 28rpx;
		margin-bottom: 6rpx;
	}

	.u-order-time {
		color: rgb(200, 200, 200);
		font-size: 26rpx;
	}
	.u-order-title{
		font-size: 28rpx;
	}
	.u-order-desc{
		font-size: 24rpx;
	}
	.u-order-time{
		font-size: 24rpx;
	}
</style>