jd_logistics/jd_logistics-app/pages/order/components/OrderInfo.vue

<template>
	<view class="info-card">
		<!-- <view class="card-header">
			<image src="/static/images/verification/icon-order.png"></image>
			<text class="card-title">订单信息</text>
		</view> -->
		<view class="card-body">
			<!-- 			<view class="info-row">
				<text class="info-label">订单类型：</text>
				<text class="info-value">普通订单</text>
			</view> -->
			<view class="info-row">
				<text class="info-label">运单单号：</text>
				<text class="info-value">{{orderDetail.shopOrderId}}</text>
			</view>
			<view class="info-row">
				<text class="info-label">物品信息：</text>
				<text class="info-value">{{orderDetail.userInfo.nickName}}</text>
			</view>
			<view class="info-row">
				<text class="info-label">件数：</text>
				<text class="info-value">{{orderDetail.userInfo.nickName}}</text>
			</view>
			<view class="info-row">
				<text class="info-label">付款方式：</text>
				<!-- <text class="duration">{{ ValidationUtils.encryptPhone(orderDetail.userInfo.userPhone) }}</text> -->
				<text class="info-value">{{orderDetail.userInfo.userPhone}}</text>
			</view>
			<view class="info-row">
				<text class="info-label">计费重量：</text>
				<text class="info-value">{{orderDetail.shopUserTime}}</text>
			</view>
			<view class="info-row">
				<text class="info-label">实际重量：</text>
				<text class="info-value">{{orderDetail.orderCreateTime}}</text>
			</view>
			<view class="info-row">
				<text class="info-label">实际体积：</text>
				<text class="info-value price">¥{{orderDetail.shopOrderAmount}}</text>
			</view>
			<view class="info-row">
				<text class="info-label">下单时间：</text>
				<text class="info-value price">¥{{orderDetail.shopOrderAmount}}</text>
			</view>
		</view>
	</view>

</template>

<script setup>
	import {
		defineProps
	} from 'vue'
	
	const props = defineProps({
		orderDetail: {
			userInfo:{
				userPhone:"",
				nickName:''
			},
			shopOrderId:'',
			orderCreateTime:'',
			shopUserTime:'',
			shopOrderAmount:''
		}
	})
</script>

<style scoped lang="scss">
	.info-card {
		background-color: #ffffff;
		border-radius: 16rpx;
		overflow: hidden;
		padding: 20rpx;

		.card-header {
			display: flex;
			align-items: center;

			image {
				width: 35rpx;
				height: 35rpx;
			}

			.card-title {
				height: 48rpx;
				line-height: 48rpx;
				font-weight: 400;
				font-size: 32rpx;
				font-weight: bold;
				color: #333;
				margin-left: 10rpx;
			}
		}

	}

	.info-row {
		height: 44rpx;
		line-height: 44rpx;
		display: flex;
		justify-content: space-between;
		align-items: center;
		margin-top: 16rpx;

		&:last-child {
			border-bottom: none;
		}

		.info-label {
			font-size: 28rpx;
			color: #666666;
		}

		.info-value {
			font-size: 28rpx;
			color: #333;

			&.price {
				color: #FD5F3C;
				font-weight: bold;
			}
		}
	}
</style>