wx-qhb/pageC/myPackage/myPackage.vue

<template>
	<view>
		<view class="top-search">
			<u--input placeholder="请输入订单编号搜索" prefixIcon="search" shape="circle"
				prefixIconStyle="font-size: 22px;color: #909399;background: #f4f4f4;"></u--input>
			<view class="top-tab">
				<view :class="{commodity:follow==1}" class="tab" @click="tabSwitch(1)">
					发往中转点
				</view>
				<view :class="{commodity:follow==2}" class="tab" @click="tabSwitch(2)">
					中转已签收
				</view>
				<view :class="{commodity:follow==3}" class="tab" @click="tabSwitch(3)">
					正发往海外
				</view>
			</view>

		</view>

		<view class="content">
			<view class="prompt" v-if="weights >=300">
				<image class="prompt-icon" src="../../static/mine/336.png" mode=""></image>
				当前页面加载的订单总重量300kg
			</view>
			<view v-for="item in orderList" :key="item.orderStatus">
				<PackageCard :itemInfo="item" @toInformation="toInformation"/>
			</view>
		</view>
	</view>
</template>

<script>
	import PackageCard from './component/packageCard.vue';
	export default {
		components:{
			PackageCard
		},
		data() {
			return {
				follow: 1,
				weights: 300,
				orderList:[
					{
						labelStatus:0,
						orderStatus:0,
					},
					{
						labelStatus:1,
						orderStatus:1,
					},
					{
						labelStatus:1,
						orderStatus:2,
					},
					{
						labelStatus:0,
						orderStatus:3,
					},
					{
						labelStatus:0,
						orderStatus:4,
					},
				]
			};
		},
		computed: {
			i18n() {
				return this.$t('index')
			}
		},
		methods: {
			tabSwitch(num) {
				this.follow = num
			},
			toInformation(id){
				uni.navigateTo({
					url:`/pageD/orderInformation/orderInformation?orderStatus=${id}`,
					
				})
			}
		},
		created() {
			uni.setNavigationBarTitle({
				title: this.i18n.myPackage
			})
		},
	}
</script>

<style lang="scss" scoped>
	.top-search {
		background-color: #fff;
		padding: 20rpx 24rpx;
	}

	/deep/.u-input {
		background-color: #f4f4f4;
	}

	.top-tab {
		margin-top: 10rpx;
		display: flex;
		justify-content: space-between;
		overflow-y: auto;
		// flex-shrink: 1;
		width: 100vw;

		.tab {
			margin-right: 40rpx;
			font-size: 26rpx;
			color: #555;
			flex-shrink: 0;
			height: 44rpx;
			display: flex;
			align-items: flex-end;
			font-size: 32rpx;
		}

		.commodity {
			position: relative;
			font-weight: 600;
			color: #222;
		}

		.commodity::before {
			content: '';
			display: block;
			height: 8rpx;
			width: 100%;
			background: linear-gradient(to right, #f83224, #fff);
			position: absolute;
			bottom: 5rpx;
			opacity: 0.8;
		}
	}

	.content {
		padding: 20rpx 24rpx;

		.prompt {
			background-color: #FBE8E6;
			border-radius: 10rpx;
			padding: 16rpx 22rpx;
			font-size: 24rpx;
			display: flex;
			align-items: center;
			color: #f83224;

			.prompt-icon {
				width: 36rpx;
				height: 36rpx;
				margin-right: 20rpx;
			}
		}
	}
</style>