ec.uniapp-master/pages/order/newdetail/logistics.vue

<template>
	<view v-if="$isRight(logistics_data)">
		<lf-nav title="物流详情" :showIcon="true"></lf-nav>
		<view class="top">
			<image class="img" :src="order_details.items[0].item_meta.image" mode="aspectFill"></image>
			<view>{{logistics_data.state_text}}</view>
		</view>
		<view class="head">
			<view class="lf-flex">
				<image class="avatar" src="https://picsum.photos/200/300" mode="aspectFill"></image>
				<view class="name">{{logistics_data.com}} {{order_no}}</view>
			</view>
			<view class="copy" @click="copy">复制</view>
		</view>
		<view>
			<uni-steps :options="logistics_data.data" active-color="#15716E" direction="column" :active="0"></uni-steps>
		</view>
		<view style="height: 90rpx;"></view>
	</view>
</template>

<script>
	import uniSteps from '@/components/uni-steps/uni-steps.vue';
	export default {
		components: {
			uniSteps
		},
		data(){
			return {
				logistics_data: {},
				order_no: '',
				order_details: {}
			}
		},
		onLoad(e){
			this.order_no = e.order_no;
			if(this.order_no) {
				this.searchLogistics();
				this.getOrderDetails();
			}
		},
		methods: {
			getOrderDetails() {
				this.$http.get({
					api: 'api/order/' + this.order_no,
					header: {
						Authorization: this.$cookieStorage.get('user_token')
					}
				}).then(res => {
					this.order_details = res.data.data;
				})
			},
			searchLogistics() {
				this.$http.get({
					api: 'api/express/query',
					data: {
						no: this.order_no
					},
					header: {
						Authorization: this.$cookieStorage.get('user_token')
					}
				}).then(res => {
					this.logistics_data = res.data.data;
				})
			},
			copy(){
				uni.setClipboardData({
					data: this.order_no
				})
			}
		}
	}
</script>

<style lang="scss" scoped="scoped">
	.top{
		width: 750rpx;
		height: 100rpx;
		background: #15716E;
		display: flex;
		align-items: center;
		padding: 0 32rpx;
		font-size: 36rpx;
		color: #FFFFFF;
		.img{
			border-radius: 5rpx;
			width: 70rpx;
			height: 70rpx;
			margin-right: 20rpx;
		}
	}
	.head{
		width: 750rpx;
		height: 130rpx;
		display: flex;
		align-items: center;
		justify-content: space-between;
		padding: 0 32rpx;
		.avatar{
			width: 70rpx;
			height: 70rpx;
			border-radius: 50%;
			margin-right: 20rpx;
		}
		.name{
			font-size: 28rpx;
			color: #222222;
		}
		.copy{
			font-size: 28rpx;
			color: #777;
		}
	}
</style>