挂账优化

ghsApp/src/pagesArrears/detailsItem.vue

@@ -5,6 +5,8 @@
 			<text class="iconfont iconweixuanzhong" v-else> </text>
 		</view>
 		<view class="details-main">
+			<!-- 右上角脱离文档流，不挤占价格行宽 -->
+			<view class="detail-btn" @click.stop="goToDetai(info)">查看明细</view>
 			<view class="item-header">
 				<text class="name">单号 {{info.orderSn}} </text>
 			</view>
@@ -13,7 +15,6 @@
 			</view>
 			<view class="item-row">
 				<view :class="[Number(info.debtPrice)>Number(info.remainDebtPrice) ? 'price-del' : 'price']">¥{{ parseFloat(info.debtPrice || info.remainDebtPrice) }}</view>
-				<view class="price" style="border:1upx solid #67a0f7;border-radius:10upx;font-weight:normal;color:#3385FF;font-size:32upx;width:180upx;height:80upx;justify-content:center;" @click.stop="goToDetai(info)">查看明细</view>
 			</view>
 			<view class="item-row" v-if="!$util.isEmpty(info.remark)">
 				<view class="remark">{{ info.remark }}</view>
@@ -74,6 +75,25 @@ export default {
 	}
 	.details-main {
 		flex: 1;
+		position: relative;
+		// 给右上角「查看明细」留空，避免单号被挡住
+		padding-right: 200upx;
+	}
+	.detail-btn {
+		position: absolute;
+		top: 0;
+		right: 0;
+		z-index: 2;
+		width: 180upx;
+		height: 80upx;
+		border: 1upx solid #67a0f7;
+		border-radius: 10upx;
+		font-size: 32upx;
+		font-weight: normal;
+		color: #3385FF;
+		display: flex;
+		align-items: center;
+		justify-content: center;
 	}
 	.item-header {
 		display: flex;

ghsApp/src/pagesGys/detailsItem.vue

@@ -5,6 +5,8 @@
 			<text class="iconfont iconweixuanzhong" v-else> </text>
 		</view>
 		<view class="details-main">
+			<!-- 右上角脱离文档流，不挤占价格/售后文案行宽 -->
+			<view class="detail-btn" @click.stop="goToDetai(info)">查看明细</view>
 			<view class="item-header">
 				<text class="name">
 					{{info.orderSn}}
@@ -20,13 +22,16 @@
 				<view class="mark" style="color:red;font-weight:bold;">{{ info.remark }}</view>
 			</view>
 			<view class="item-row">
-				<!-- 仅原欠金额划线；当天/隔天已退文案不带中划线 -->
 				<view class="price" style="color:#3385FF;">
 					<text :class="[hasPartialClear ? 'price-del' : '']">¥{{ parseFloat(displayDebtPrice) }}</text>
-					<text v-if="Number(info.tkPrice)>0" style="margin-left:30upx;color:red;font-weight: normal;">当天已退¥{{info.tkPrice?parseFloat(info.tkPrice):0}}</text>
-					<text v-if="Number(info.nextDayTkPrice)>0" style="margin-left:20upx;color:#e67e22;font-weight: normal;">隔天已退¥{{parseFloat(info.nextDayTkPrice)}}</text>
 				</view>
-				<view class="price" style="border:1upx solid #67a0f7;border-radius:10upx;font-weight:normal;color:#3385FF;font-size:32upx;width:180upx;height:80upx;justify-content:center;" @click.stop="goToDetai(info)">查看明细</view>
+			</view>
+			<!-- 售后退款单独成行，不与挂账价格挤在同一行 -->
+			<view class="item-row" v-if="Number(info.tkPrice)>0">
+				<view class="refund-tip refund-tip-same">当天售后已退¥{{info.tkPrice?parseFloat(info.tkPrice):0}}</view>
+			</view>
+			<view class="item-row" v-if="Number(info.nextDayTkPrice)>0">
+				<view class="refund-tip refund-tip-next">隔天售后已退¥{{parseFloat(info.nextDayTkPrice)}}</view>
 			</view>
 			<view class="item-row" v-if="hasPartialClear">
 				<view class="price" style="color:red;">已清 ¥{{ hasPayDebt }}，剩余待结 ¥{{ parseFloat(remainDebtPrice) }}</view>
@@ -113,6 +118,25 @@ export default {
 	}
 	.details-main {
 		flex: 1;
+		position: relative;
+		// 给右上角「查看明细」留空，避免单号被挡住
+		padding-right: 200upx;
+	}
+	.detail-btn {
+		position: absolute;
+		top: 0;
+		right: 0;
+		z-index: 2;
+		width: 180upx;
+		height: 80upx;
+		border: 1upx solid #67a0f7;
+		border-radius: 10upx;
+		font-size: 32upx;
+		font-weight: normal;
+		color: #3385FF;
+		display: flex;
+		align-items: center;
+		justify-content: center;
 	}
 	.item-header {
 		display: flex;
@@ -150,6 +174,16 @@ export default {
 			color: #999 !important;
 			font-weight: 600;
 		}
+		.refund-tip {
+			font-size: 26upx;
+			font-weight: normal;
+		}
+		.refund-tip-same {
+			color: red;
+		}
+		.refund-tip-next {
+			color: #e67e22;
+		}
 	}
 }
 </style>

ghsApp/src/pagesPurchase/refund.vue

@@ -45,8 +45,8 @@
 			<view class="refund-label">订单金额：</view>
 			<view class="list">
 				￥{{parseFloat(orderInfo.actPrice || orderInfo.orderPrice)||0}}
-				<text style="margin-left:25upx;font-size:25upx;color:green;" v-if="Number(orderInfo.tkPrice)>0">当天已退￥{{orderInfo.tkPrice ? parseFloat(orderInfo.tkPrice) : 0}}</text>
-				<text style="margin-left:15upx;font-size:25upx;color:#e6a23c;" v-if="Number(orderInfo.nextDayTkPrice)>0">隔天已退￥{{parseFloat(orderInfo.nextDayTkPrice)}}</text>
+				<text style="margin-left:25upx;font-size:25upx;color:green;" v-if="Number(orderInfo.tkPrice)>0">当天售后已退￥{{orderInfo.tkPrice ? parseFloat(orderInfo.tkPrice) : 0}}</text>
+				<text style="margin-left:15upx;font-size:25upx;color:#e6a23c;" v-if="Number(orderInfo.nextDayTkPrice)>0">隔天售后已退￥{{parseFloat(orderInfo.nextDayTkPrice)}}</text>
 			</view>
 		</view>
 		<view class="flex refund-item">