商户订单列表显示分成金额、手续费、实际收益

agentApp/pages/merchant-index/index.vue

@@ -2,9 +2,10 @@
 	<view class="app-container">
 		<view class="agent-content">
 			<view class="avatar-information">
-				<image v-if="accountInfo.logo" style="width: 110rpx;height: 110rpx; border-radius: 50%;" :src="accountInfo.logo"
-					alt="" />
-				<image v-else style="width: 110rpx;height: 110rpx;" src="/static/index/head-sculpture.png" alt="" />
+				<view class="avatar-container">
+					<image class="avatar-img" v-if="accountInfo.logo" :src="accountInfo.logo" alt="" />
+					<image class="avatar-img" v-else src="/static/index/head-sculpture.png" alt="" />
+				</view>
 				<view class="information-content">
 					<view class="information-name">{{accountInfo.name}}</view>
 					<view class="address-text">地址：{{accountInfo.address || '未填写地址'}}</view>
@@ -68,7 +69,14 @@
 						</view>
 						<view class="ordering-text">
 							<view class="ordering-text-title">{{accountInfo.name}}</view>
-							<view class="amount-of-money">金额：<span class="price-style">￥{{order.amount}}</span></view>
+							<view class="amount-list">
+								<view class="amount-of-money">订单金额：<span class="price-style">￥{{order.amount}}</span></view>
+								<view class="amount-of-money">分成金额：<span class="price-style">￥{{share_amount(order)}}</span></view>
+							</view>
+							<view class="amount-list">
+								<view class="amount-of-money">扣手续费：<span class="price-style">￥{{order.merchant_fee}}</span></view>
+								<view class="amount-of-money">实际收益：<span class="price-style">￥{{order.merchant_income}}</span></view>
+							</view>
 							<view class="order-time">订单时间：{{order.paid_at}}</view>
 						</view>
 					</view>
@@ -153,6 +161,9 @@
 				// uni.navigateTo({
 				// 	url: '/pages/user-orders/user-orders'
 				// });
+			},
+			share_amount: function(order) {
+				return (parseFloat(order.merchant_income) + parseFloat(order.merchant_fee)).toFixed(2)
 			}
 		}
 	}
@@ -170,12 +181,25 @@
 		box-sizing: border-box;
 
 		.avatar-information {
-			display: flex;
-			justify-content: left;
-			align-items: center;
+			//display: flex;
+			//justify-content: left;
+			//align-items: center;
 			padding: 30rpx 0;
+			
+			.avatar-container {
+				display: inline-block;
+				width: 120rpx;
+				
+				.avatar-img {
+					width: 110rpx;
+					height: 110rpx;
+					border-radius: 50%;
+				}
+			}
 
 			.information-content {
+				display: inline-block;
+				width: calc(100% - 120rpx - 30rpx);
 				margin-left: 30rpx;
 
 				.information-name {
@@ -347,18 +371,25 @@
 
 					.ordering-text {
 						margin-left: 30rpx;
+						width: 100%;
+						line-height: 110%;
 
 						.ordering-text-title {
 							font-family: PingFangSC-Regular, sans-serif;
 							font-size: 30rpx;
 							color: #454545;
 						}
+						
+						.amount-list {
+							display: flex;
+							justify-content: flex-start;
+						}
 
 						.amount-of-money {
 							font-family: PingFangSC-Regular, sans-serif;
 							font-size: 24rpx;
 							color: #999;
-							padding: 10rpx 0;
+							width: 50%;
 
 							span.price-style {
 								font-family: PingFangSC-Regular, sans-serif;