wx-qhb/pageB/orderinfo.vue

<template>
	<view class="back">
		<view class="top u-flex u-row-between">
			<text class="success">{{i18n.successful}}</text>
			<text class="sun">{{i18n.pickpackage}}</text>
			<text v-if="orderinfo.status=='imperfect'" class="order"
				style="color:rgba(248, 50, 36, 1) ;">待完善</text>
			<text v-if="orderinfo.status=='domestic_undelivered'" class="order"
				style="color:rgba(248, 50, 36, 1) ;">国内未发货</text>
			<text v-if="orderinfo.status=='domestic_delivered'" class="order"
				style="color:rgba(248, 50, 36, 1) ;">国内已发货</text>
			<text v-if="orderinfo.status=='domestic_received'" class="order"
				style="color:rgba(248, 50, 36, 1) ;">国内已收货</text>
			<text v-if="orderinfo.status=='unpaid'" class="order" style="color:rgba(248, 50, 36, 1) ;">待付款</text>
			<text v-if="orderinfo.status=='overseas_undelivered'" class="order"
				style="color:rgba(248, 50, 36, 1) ;">国际未发货</text>
			<text v-if="orderinfo.status=='overseas_delivered'" class="order"
				style="color:rgba(248, 50, 36, 1) ;">国际已发货</text>
			<text v-if="orderinfo.status=='overseas_received'" class="order"
				style="color:rgba(248, 50, 36, 1) ;">国际已收货</text>
			<text v-if="orderinfo.status=='finished'" class="order"
				style="color:rgba(248, 50, 36, 1) ;">已完成</text>
			<text v-if="orderinfo.status=='closed'" class="order" style="color:rgba(248, 50, 36, 1) ;">已关闭</text>
			<text v-if="orderinfo.status=='refunding'" class="order"
				style="color:rgba(248, 50, 36, 1) ;">退款中</text>
			<text v-if="orderinfo.status=='refunded'" class="order"
				style="color:rgba(248, 50, 36, 1) ;">已退款</text>
		</view>
		<view class="address">
			<view class="" style="margin-top: 44rpx;">
				<view class="u-flex">
					<image src="/static/express/ji.png" style="width: 44rpx;height: 44rpx;" mode=""></image>
					<text class="name" style="margin-left: 28rpx;">{{orderinfo.from_name}}</text>
					<text class="name" style="margin-left: 12rpx;">{{orderinfo.from_mobile}}</text>
				</view>
				<view style="margin-top: 20rpx;margin-left: 70rpx;" class="info">
					{{orderinfo.from_full_address}}
				</view>
			</view>
			<view class="" style="margin: 44rpx 0;">
				<view class="u-flex">
					<image src="/static/express/ji.png" style="width: 44rpx;height: 44rpx;" mode=""></image>
					<text class="name" style="margin-left: 28rpx;">{{orderinfo.transit_name}}</text>
					<text class="name" style="margin-left: 12rpx;">{{orderinfo.transit_mobile}}</text>
				</view>
				<view style="margin-top: 20rpx;margin-left: 70rpx;" class="info">
					{{orderinfo.transit_full_address}}
				</view>
			</view>
		</view>
		<view class="orderinfo">
			<view class="num">
				<text class='num'>{{i18n.OrderNumber}}：</text>
				<text class='num'>{{orderinfo.order_no}}</text>
			</view>
			<view class="num" style="margin-top: 50rpx;">
				<text class='num'>{{i18n.Ordertime}}：</text>
				<text class='num'>{{orderinfo.created_at}}</text>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				orderinfo: {}
			};
		},
		onLoad(options) {
			this.orderinfo = JSON.parse(decodeURIComponent(options.orderinfo));
			console.log(this.orderinfo);
		},
		computed: {
			i18n() {
				return this.$t('index')
			}
		},
	}
</script>

<style lang="scss" scoped>
	.orderinfo {
		width: 702rpx;
		height: 184rpx;
		background: #FFFFFF;
		border-radius: 16rpx;
		margin-top: 20rpx;
		padding: 36rpx 28rpx 0;
		box-sizing: border-box;

		.num {
			font-family: SFPro, SFPro;
			font-weight: 400;
			font-size: 26rpx;
			color: #555555;
			line-height: 30rpx;
			text-align: left;
			font-style: normal;
		}
	}

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

		.top {
			width: 702rpx;
			height: 100rpx;
			background: linear-gradient(291deg, #FFF4F4 0%, #FBDFDF 100%, #FBDFDF 100%);
			border-radius: 16rpx 16rpx 0 0;
			border: 1rpx solid;
			border-image: linear-gradient(270deg, rgba(255, 255, 255, 1), rgba(255, 255, 255, 0)) 1 1;
			padding: 0 24rpx;
			box-sizing: border-box;

			.success {
				font-family: PingFangSC, PingFang SC;
				font-weight: 500;
				font-size: 32rpx;
				color: #222222;
				line-height: 44rpx;
				text-align: left;
				font-style: normal;
			}

			.sun {
				font-family: PingFangSC, PingFang SC;
				font-weight: 400;
				font-size: 24rpx;
				color: #F83224;
				line-height: 34rpx;
				text-align: left;
				font-style: normal;
			}
		}

		.address {
			width: 702rpx;
			// height: 396rpx;
			background: #FFFFFF;
			border-radius: 16rpx;
			padding: 1rpx 32rpx;
			box-sizing: border-box;

			.name {
				font-family: PingFangSC, PingFang SC;
				font-weight: 500;
				font-size: 32rpx;
				color: #222222;
				line-height: 44rpx;
				text-align: left;
				font-style: normal;
			}

			.info {
				font-family: PingFangSC, PingFang SC;
				font-weight: 400;
				font-size: 26rpx;
				color: #777777;
				line-height: 36rpx;
				text-align: left;
				font-style: normal;
				margin-top: 18rpx;
			}
		}
	}
</style>