shop-app/pages/order/detail/components/OrderInfo.vue

<!--
 * @Author: ch
 * @Date: 2022-04-15 16:04:28
 * @LastEditors: ch
 * @LastEditTime: 2022-04-21 17:45:16
 * @Description: file content
-->
<template>
	<view>
		<UiWhiteBox class="cell-box">
			<view class="cell">
				<text class="cell--title">订单编号:</text>
				<view class="cell--value">
					<text class="cell--orderNo">{{orderInfo.orderNo}}</text>
					<UiCopy :value="orderInfo.orderNo"/>
				</view>
			</view>
			<view class="cell">
				<text class="cell--title">订单时间:</text>
				<text class="cell--value">{{orderInfo.submitTime}}</text>
			</view>
			<view class="cell">
				<text class="cell--title">支付方式:</text>
				<text class="cell--value">{{orderInfo.payTypeDesc}}</text>
			</view>
			<view class="cell">
				<text class="cell--title">买家留言:</text>
				<text class="cell--value">{{orderInfo.userMessage}}</text>
			</view>
		</UiWhiteBox>

		<UiWhiteBox class="cell-box">
			<view class="cell">
				<text class="cell--title">商品总额:</text>
				<text class="cell--value">￥{{orderInfo.totalAmount}}</text>
			</view>
			<view class="cell">
				<text class="cell--title">运费:</text>
				<text class="cell--value">{{orderInfo.shippingAmount}}</text>
			</view>
			<view class="amount-box">
				<text class="amount-label">实付款：</text>
				<UiMoney :money="orderInfo.payAmount" flaot prefix suffix/>
				<!-- <text class="amount">￥{{orderInfo.payAmount}}</text> -->
			</view>
			
		</UiWhiteBox>
	</view>
</template>
<script>
import UiWhiteBox from '@/components/UiWhiteBox.vue';
import UiCopy from '../../../../components/UiCopy.vue';
import UiMoney from '../../../../components/UiMoney.vue';
export default {
	components : {UiWhiteBox, UiCopy, UiMoney},
	props: {
		orderInfo : {
			type : Object,
			default : () => ({})
		}
	}
}
</script>
<style lang="scss" scoped>

.cell-box{
	padding: 30rpx;
}
.cell{
	height: 56rpx;
	line-height: 56rpx;
	display: flex;
	justify-content: space-between;
	&--value{
		font-size: $font-size-sm;
	}
	&--orderNo{
		margin-right: 20rpx;
		font-size: $font-size-sm;
	}
	&--title{
		color: $color-grey4;
		font-size: $font-size-sm;
	}
}
.amount-box{
	text-align: right;
	margin-top: 30rpx;
	display: flex;
	align-items: center;
	justify-content: flex-end;
}

.amount-label{
	font-size: $font-size-sm;
}
.amount{
	color: $color-yellow4;
	font-size: $font-size-lg;
}
/deep/ {
	.ui-money--price{
		font-size: 36rpx;
		color: $color-yellow4;
	}
	.ui-money--prefix{
		font-size: $font-size-sm;
		color: $color-yellow4;
	}
	.ui-money--suffix{
		font-size: $font-size-base;
		color: $color-yellow4;
	}
}
</style>