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

<template>
	<view class="info-card">
		<!-- <view class="card-header">
			<image src="/static/images/verification/icon-fee.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">￥{{orderDetail.shopOrderAmount}}</text>
			</view>
			<view class="info-row">
				<text class="info-label">保价{{orderDetail.platformShopCommissionPercent}}%：</text>
				<text class="info-value">{{orderDetail.platformServiceFee}}</text>
			</view>
			<view class="info-row">
				<text class="info-label">全额保：</text>
				<text class="info-value price">{{commission}}</text>
			</view>
			<view class="info-row">
				<text class="info-label">签单返还：</text>
				<text class="info-value">{{orderDetail.memberPromotionFee}}</text>
			</view>
			<view class="info-row">
				<text class="info-label">包装服务:</text>
				<text class="info-value">{{orderDetail.actualIncomeAmount}}</text>
			</view>
			<view class="info-row">
				<text class="info-label">预约派送:</text>
				<text class="info-value">{{orderDetail.actualIncomeAmount}}</text>
			</view>
			<view class="info-row">
				<text class="info-label">指定签收:</text>
				<text class="info-value">{{orderDetail.actualIncomeAmount}}</text>
			</view>
		</view>
	</view>

</template>

<script setup>
	import {
		ref,
		computed,
		defineProps
	} from 'vue'
	import { onShow } from '@dcloudio/uni-app'

	const props = defineProps({
		isGrab: {
			type: Boolean,
			default: false
		},
		orderDetail: {
			type: Object,
			default: () => ({
				dispatchInfo: null,
				platformServiceFee:0, //平台服务费
				memberPromotionFee:0, //会员推广费
				actualIncomeAmount:0, //实际收入金额
				goodsCommission: null,
				goodsInfo: {},
				grabInfo: {},
				id: 22,
				orderCreateTime: "2025-11-19 15:20:18",
				refundReason: null,
				serviceProviderInfo: null,
				serviceTaskInfo: {},
				shopConfirmStatus: null,
				shopDesc: null,
				shopDispatchVerifyStatus: "3",
				shopEvaluateStatus: "1",
				shopGoodsId: 10,
				shopOrderAmount: 101,
				shopOrderId: "6234567",
				shopOrderNum: 1,
				shopOrderStatus: "5",
				shopPrice: 101,
				shopRefundReviewStatus: null,
				shopServiceStatus: "2",
				shopUserTime: null,
				userId: "",
				platformShopCommissionPercent:'5'
			})
		}
	})

	// 计算属性 - 佣金单位
	const commissionUnit = ref('元')
	const percent = ref('5')
	
	// formData.commissionType === '0' ? '%' : '元'
	const commission = computed(() => {
		//bs_service_user_task.serivce_commission > bs_service_user_grab.service_commission > bs_shop_goods.service_commission
		// if(props.orderDetail.serviceTaskInfo && props.orderDetail.serviceTaskInfo.serviceCommission){
		// 	return props.orderDetail.serviceTaskInfo.serviceCommission
		// }
		// if(props.orderDetail.grabInfo && props.orderDetail.grabInfo.serviceCommission){
		// 	return props.orderDetail.grabInfo.serviceCommission
		// }
		// // if(props.orderDetail.goodsInfo && props.orderDetail.goodsInfo.serviceCommission){
		// // 	// commissionUnit.value =  props.orderDetail.goodsInfo.serviceCommission === '0' ? '%' : '元'
		// // 	return props.orderDetail.goodsInfo.serviceCommission
		// // }
		// // platformPercent()
		// return props.orderDetail.serviceCommission || props.orderDetail.goodsCommission || ''
		return ''
	})
	
	// onShow(()=>{
	// 	platformPercent()
	// })
	
	const platformPercent = ()=>{
		getPlatformPerentApi().then(res=>{
			if(res.code == 200){
				percent.value = res.data.platformShopCommissionPercent
			}
		})
	}
</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>