guanmao-wxapp/pages/mine/order/logistics.vue

<template>
	<view class="app-container">
		<view class="all-container" v-if="!isNoData">
			<view class="top-container">
				<view class="left">{{logisticsData[0].comName}}<text>{{logisticsData[0].logisticsNo}}</text></view>
				<view class="right">
					<text @tap="copy(logisticsData[0].logisticsNo)">复制单号</text>
				</view>
			</view>
			<view class="mian-container">
				<common-logistics :logisticsData="logisticsData"></common-logistics>
			</view>
		</view>
		
		<no-data v-if="isNoData" :showText="noDataText"></no-data>
	</view>
</template>

<script>
	import { setAttribute, changeAttribute } from '@/components/logistics/init-logistics.js';
	import CommonLogistics from '@/components/logistics/common-logistics.vue';
	
	export default {
		components: {
			CommonLogistics
		},
		
		data() {
			return {
				companyCode: null,
				logisticsNo: null,
				logisticsData: [],
				testStrList: [0,1,2,3,4,5,6],
				isNoData: false,
				noDataText: '',
			}
		},
		
		onLoad({companyCode, logisticsNo}) {
			this.companyCode = companyCode == 'undefined' ? 'shunfeng' : companyCode;
			this.logisticsNo = logisticsNo;
			this.getDetail();
		},
		
		methods: {
			// 获取物流详情
			getDetail() {
				this.$axios({
					url: '/common/express',
					method: 'get',
					params: {
						companyCode: this.companyCode,
						logisticsNo: this.logisticsNo,
					}
				}).then(res => {
					if(res.code == 200 && res.data.length >= 1) {
						let logisticsData = res.data;
						this.logisticsData = changeAttribute(this.testStrList, setAttribute(logisticsData));
					}else if(res.code == 1100) {
						this.isNoData = true;
						this.noDataText = res.message;
					}else if(res.data.length < 1) {
						this.isNoData = true;
						this.noDataText = '暂无物流信息';
					}
				}).catch(res => {
					this.isNoData = true;
					this.noDataText = res.message;
				})
			},
			
			// 复制
			copy(val) {
				let that = this;
				uni.setClipboardData({
				    data: val,
				    success: function () {
				        that.$successToast('复制成功');
				    }
				});
			},
		}
	}
</script>

<style lang="scss">
	.app-container {
		background: #F4F2F2;
		box-sizing: border-box;
		padding: 20rpx;
	}
	.all-container {
		padding: 20rpx;
		background: #FFFFFF;
		border-radius: 20rpx;
	}
	.top-container {
		display: flex;
		justify-content: space-between;
		align-items: flex-end;
		margin-bottom: 30rpx;
		.left {
			text {
				font-size: 24rpx;
				margin-left: 16rpx;
			}
		}
		.right {
			text {
				font-size: 24rpx;
				color: #FE781F;
			}
		}
	}
</style>