wx-qhb/pageB/list/list.vue

<template>
	<!-- 拼包列表 -->
	<view class="back">
		<view class="label" v-for="(item,idx) in expressList" :key="idx">
			<view class="" style="display: flex;">
				<view class="left flexc">
					<text class="bourn">{{i18n.destination}}</text>
					<view class="addres">{{item.containerBase.country_name}}</view>
				</view>
				<view class="" style="flex: 1;margin-left: 20rpx;">
					<view class="u-flex u-row-between">
						<view class="">
							<text class='bigtitle'>{{item.type_name}}</text>
							<text style="margin: 0 8rpx;">|</text>
							<text class='bigtitle'>{{item.transportType.name}}</text>
						</view>
						<view class="mon">
							<text class="timeb">{{i18n.price}}</text>
							<text>￥</text>
							<text style="font-size: 32rpx;">{{item.price.slice(0,-3)}}</text>
							<text>{{item.price.slice(-3)}}</text>
						</view>
					</view>
					<view class="" style="margin-top: 34rpx;">
						<u-line-progress activeColor='rgba(255, 21, 21, 1)' :percentage="item.progress" height="6"
							:showText="false"></u-line-progress>
					</view>
					<view class="u-flex u-row-between" style="margin-top: 20rpx;">
						<view class="u-flex">
							<view class="">
								<text class='timeb'>{{i18n.already}} </text>
								<text class='timeb' style='color:rgba(255, 21, 21, 1)'>{{item.used_weight}}kg</text>
							</view>
							<text style="margin: 0 8rpx;">|</text>
							<view class="">
								<text class='timeb'>{{i18n.residue}} </text>
								<text class='timeb' style='color:rgba(255, 21, 21, 1)'>{{item.residual_weight}}kg</text>
							</view>
						</view>
						<view class="">
							<text class="timeb">{{i18n.plan}}{{item.progress}}%</text>
						</view>
					</view>
				</view>
			</view>
			<view class="u-flex u-row-between" style="margin-top: 32rpx;">
				<text class="timea">{{i18n.start}}：{{item.begin_date}}/{{i18n.cut}}：{{item.end_date}}</text>
				<view class="pinb" @click="toaccount(item)">{{i18n.goparceling}}</view>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				expressList: []
			};
		},
		onShow() {
			this.getexpress()
		},
		computed: {
			i18n() {
				return this.$t('index')
			}
		},
		methods: {
			//拼包列表
			getexpress() {
				uni.$u.http.get('/api/express-group-package', {
					params: {
						is_page: 0,
						transport_type_id: "",
						container_base_id: '',
						type: '',
					}
				}).then((res) => {
					this.expressList = res
				}).catch(() => {

				})
			},
			//拼包快递
			toaccount(info) {
				uni.navigateTo({
					url: '/pageB/ParcelExpress?expressinfo=' + encodeURIComponent(JSON.stringify(info))
				})
			},
		}
	}
</script>

<style lang="scss" scoped>
	.flexc {
		display: flex;
		flex-direction: column;
		justify-content: center;
		align-items: center;
	}

	.back {
		padding: 0rpx 24rpx 20rpx;
		box-sizing: border-box;
	}

	.pinb {
		width: 148rpx;
		height: 64rpx;
		background: #FF1515;
		border-radius: 42rpx;
		font-family: PingFangSC, PingFang SC;
		font-weight: 500;
		font-size: 28rpx;
		color: #FFFFFF;
		line-height: 64rpx;
		text-align: center;
		font-style: normal;
	}

	.mon {
		font-family: HarmonyOS_Sans_Medium;
		font-size: 20rpx;
		color: #F83224;
		line-height: 26rpx;
		text-align: left;
		font-style: normal;
		font-weight: 600;
	}

	.bigtitle {
		font-family: PingFangSC, PingFang SC;
		font-weight: 600;
		font-size: 28rpx;
		color: #222222;
		line-height: 40rpx;
		text-align: left;
		font-style: normal;
	}

	.timeb {
		font-family: PingFangSC, PingFang SC;
		font-weight: 400;
		font-size: 22rpx;
		color: #666666;
		line-height: 32rpx;
		text-align: left;
		font-style: normal;
	}

	.timea {
		font-family: PingFangSC, PingFang SC;
		font-weight: 400;
		font-size: 22rpx;
		color: #555555;
		line-height: 32rpx;
		text-align: left;
		font-style: normal;
	}

	.label {
		margin-top: 20rpx;
		width: 702rpx;
		height: 288rpx;
		background: #FFFFFF;
		border-radius: 16rpx;
		padding: 32rpx 20rpx;
		box-sizing: border-box;

		.left {
			width: 144rpx;
			height: 144rpx;
			background: #F5F5F5;
			border-radius: 8rpx;

			.bourn {
				font-family: PingFangSC, PingFang SC;
				font-weight: 400;
				font-size: 20rpx;
				color: #222222;
				line-height: 28rpx;
				text-align: left;
				font-style: normal;
			}

			.addres {
				font-family: PingFangSC, PingFang SC;
				font-weight: 500;
				font-size: 28rpx;
				color: #222222;
				line-height: 40rpx;
				text-align: left;
				font-style: normal;
			}
		}
	}
</style>