Homestay_manage_app/packageShang/pages/user/order/order-express.vue

<template>
	<view class="bg-drak" :class="[empty ? '' : 'padding-tb']">
		<!-- 空白页 -->
		<use-empty v-if="empty" e-style="round" tip="无物流数据"></use-empty>
	
		<view v-if="expressData" class="padding-lr">
			<view class="border-radius padding margin-bottom-sm bg-main">
				<view class="fs-lg fwb">{{expressData.expressName}}</view>
				<view>物流单号：{{expressData.expressNo}}<text class="copy" @click="copy">复制</text></view>
				<!-- <view class="fs-lg fwb">{{expressData.detail}}</view> -->
			</view>
		</view>
		<view v-if="expressData" class="padding-lr">
			<view class="product border-radius padding margin-bottom-sm bg-main" style="padding-bottom: 15rpx;">
				<view :class="{ 'active': index == 0, 'fwb': index == 0 }" class="dflex item pos-r" v-for="(item, index) in detail" :key="index">
					<view :class="{ 'active': index == 0 }" class="circle"></view>
					<view :class="{ 'ft-dark': index > 0 }" class="margin-left-lg pos-r w-full margin-bottom">
						<view>{{item.context}}</view>
						<view class="margin-top-xs fs-xs">{{item.time}}</view>
					</view>
				</view>
			</view>
		</view>
	
		<!-- 置顶 -->
		<use-totop ref="usetop"></use-totop>
	</view>
</template>

<script>
	import {
		orderexpress
	} from '../../../utils/api_order.js'
	import useEmpty from '../../../components/use-empty/use-empty.vue'
	import useTotop from '../../../components/use-totop/use-totop.vue'
	export default {
		components:{
			useEmpty,
			useTotop,
		},
		data() {
			return {
				empty: false,
				order_id: '',
				expressData: {},
				detail:[],
			}
		},
		watch: {
			expressData(e) {
				let empty = !e;
				if (this.empty !== empty) {
					this.empty = empty;
				}
			}
		},
		onPageScroll(e) {
			//this.scrollTop = e.scrollTop;
			this.$refs.usetop.change(e.scrollTop);
		},
		onLoad(options) {
			this.order_id = options.order_id;
			
			if(!this.order_id) {
				this.$api.msg('订单号不存在');
			}
			
			this.loadData();
		},
		onShow() {
			
		},
		methods: {
			loadData() {
				var _self=this
				//根据订单id查物流信息
				var data=_self.order_id
				orderexpress(data).then((res) => {
					if(res.success){
						_self.expressData = res.data;
						return
					}
					_self.detail=JSON.parse(_self.expressData.detail)
					_self.$api.msg(res.message);
				})
			},
			// 点击复制
			copy() {
			
				uni.setClipboardData({
					data: this.expressData.expressNo,
					success: function(res) {
						uni.getClipboardData({
							success: function(res) {
								uni.showToast({
									title: '复制成功'
								});
							}
						});
					}
				});
			},
		}
	}
</script>

<style>
	@import url('/packageShang/components/iconfont/iconfont.css');
	@import url('/packageShang/common/common.scss');
.copy {
	margin-left: 30rpx;
	padding: 10rpx 40rpx;
	background-color: #f1f1f1;
	border-radius: 40rpx;
	font-size: 24rpx;
}
	
.item {
    align-items: baseline;
}

.item:not(:last-child)::before {
	content: ' ';
	border-left: 1px solid #d3d3d3;
	position: absolute;
	bottom: -14rpx;
	top: 14rpx;
	left: 10rpx;
	border-left-width: 1px;
	border-left-style: solid;
	border-left-color: rgb(211, 211, 211);
}
.item.active::before{
    border-left: 1px solid #ff6a6c;
}

.circle {
	width: 20rpx;
	height: 20rpx;
	position: absolute;
	background: #d3d3d3;
	border-radius: 50%;
	top: 14rpx;
}

.circle.active {
	background: #ff6a6c !important;
	transform: scale(1.1);
}

.circle.active::after {
	content: ' ';
	background: rgba(255, 106, 108, 0.5) !important;
	-webkit-transform: scale(1.6);
	transform: scale(1.6);
	width: 20rpx;
	height: 20rpx;
	position: absolute;
	border-radius: 50%;
}
</style>