lipin/pages/users/order/detail.vue

<template>
	<view>
		<view class="total">此订单共计{{total}}个包裹</view>
		<view class="list">
			<view class='item' v-for="(item,index) in subOrder" :key="index">
				<view v-if="item.shop_name">店  铺：{{item.shop_name}}</view>
				<view v-if="item.out_order_id">订单号：{{item.out_order_id}}</view>
				<view>{{item.name}} {{item.mobile}}</view>
				<view>{{item.address}}</view>
				<view v-if="item.exp_number">{{item.exp_name}} {{item.exp_number}}<text class='copy' @tap='copy(item.exp_number)'>复制</text></view>
				<view v-if="item.send_time">发货时间：{{item._send_time}}</view>
			</view>
		</view>
	</view>
</template>

<script>
	import {
		mapGetters
	} from "vuex";
	import {
		toLogin
	} from '@/libs/login.js';
	import {
		orderSubItem
	} from '@/api/api.js';
	import H5Api from '@/utils/ican-H5Api.js'
	export default {
		data() {
			return {
				id: '',
				total: '',
				subOrder: []
			};
		},
		computed: mapGetters(['isLogin']),
		onLoad(options) {
			if (this.isLogin) {
				this.id = options.id || '';
				this.getSubOrder();
			} else {
				toLogin();
			}
		},
		methods: {
			getSubOrder: function() {
				orderSubItem({'id':this.id}).then(res => {
					this.total = res.data.pageCount;
					this.subOrder = res.data.list;
				});
			},
			copy: function(text) {
				uni.setClipboardData({
					data: text,
					success:function(){
						uni.showToast({
							title: '复制成功'
						})
					}
				});
			}
		}
	}
</script>

<style scoped lang="scss">
	.total{
		background: #fff;
		text-align: center;
		padding: 20rpx 0;
		margin-bottom: 20rpx;
	}
	.list{
		background: #fff;
		.item{
			padding: 20rpx;
			border-bottom: 1px solid #eee;
			view{
				margin-bottom: 8rpx;
			}
			.copy {
				font-size: 20rpx;
				border-radius: 3rpx;
				border: 1rpx solid #eee;
				padding: 3rpx 15rpx;
				margin-left: 30rpx;
			}
		}
	}
</style>