排版

hdApp/src/admin/order/refund.vue

@@ -11,8 +11,7 @@
 						<view class="product-basic-info">
 							<text class="product-name-compact">{{res.name}}</text>
 							<view class="product-meta">
-								<text class="stock-info">数量: {{parseFloat(res.num)}}份</text>
-								<text class="price-info">¥{{parseFloat(res.unitPrice)}}/份</text>
+								<text class="stock-info">{{parseFloat(res.num)}}份 X ¥{{parseFloat(res.unitPrice)}}</text>
 								<text class="available-info">可退: {{Number(res.num)-Number(res.refundNum)}}份</text>
 							</view>
 						</view>
@@ -49,8 +48,7 @@
 						<view class="product-basic-info">
 							<text class="product-name-compact">{{res.name}}</text>
 							<view class="product-meta">
-								<text class="stock-info">数量: {{parseFloat(res.num)}}{{res.unitName}}</text>
-								<text class="price-info">¥{{parseFloat(res.unitPrice)}}/{{res.unitName}}</text>
+								<text class="stock-info">{{parseFloat(res.num)}}{{res.unitName}} X ¥{{parseFloat(res.unitPrice)}}</text>
 								<text class="available-info">可退: {{Number(res.num)-Number(res.refundNum)}}{{res.unitName}}</text>
 							</view>
 						</view>
@@ -156,15 +154,6 @@
 			</view>
 		</view>
 
-		<!-- 重要提示 -->
-		<view class="warning-notice" v-if="orderInfo.onlinePay == 1">
-			<view class="warning-icon">⚠️</view>
-			<view class="warning-text">
-				<view class="warning-title">重要提示</view>
-				<view class="warning-content">此单为线下付款，退款后钱不会原路退回，还需要线下给客户退钱。</view>
-			</view>
-		</view>
-
 		<!-- 底部操作按钮 -->
 		<view class="bottom-actions">
 			<button class="action-btn cancel-btn" @tap="cancelRefund">取消</button>
@@ -293,7 +282,7 @@ export default {
 				return;
 			}
 			if(this.refundType==0){
-				uni.showToast({title:'请选择库存退回还是不退回',icon:'none'})
+				uni.showToast({title:'请选择 库存退否退回',icon:'none'})
 				return false
 			}
 			let refundParams = {product:JSON.stringify(selectProduct),id: this.option.id,price:this.refundMoney,remark:this.remark,refundType:this.refundType,getOriginalItem:1,version:2}
@@ -424,24 +413,15 @@ export default {
 		flex-wrap: wrap;
 		
 		.stock-info {
-			font-size: 22upx;
+			font-size: 26upx;
 			color: #666;
 			background: #f5f5f5;
 			padding: 4upx 8upx;
 			border-radius: 4upx;
 		}
 		
-		.price-info {
-			font-size: 22upx;
-			color: #09c567;
-			background: rgba(9, 197, 103, 0.1);
-			padding: 4upx 8upx;
-			border-radius: 4upx;
-			font-weight: 500;
-		}
-		
 		.available-info {
-			font-size: 22upx;
+			font-size: 26upx;
 			color: #ff6b35;
 			background: rgba(255, 107, 53, 0.1);
 			padding: 4upx 8upx;

hdApp/src/admin/order/refundDetail.vue

@@ -1,40 +1,58 @@
 <template>
 	<view class="app-content">
-		<view class="flex refund-item">
-			<view class="refund-label">退款方式：</view>
-			<view class="flex list">
-				<view class="flex" >{{refundType==1?'退货并退款':'只退款'}}</view>
+		<!-- 库存变化 -->
+		<view class="info-section">
+			<view class="section-title">库存变化</view>
+			<view class="section-content">
+				<view class="status-tag" :class="refundType==1 ? 'return-stock' : 'no-return'">
+					{{refundType==1?'退回库存':'不退库存'}}
+				</view>
 			</view>
 		</view>
-		<view class="refund-item-list" v-if="refundType==1">
-			<view class="refund-label">退货商品：</view>
-			<view>
+
+		<!-- 退货商品 -->
+		<view class="info-section">
+			<view class="section-title">退货商品</view>
+			<view class="section-content">
 				<template v-if="!$util.isEmpty(itemList)">
-					<view class="list" v-for="(res,i) in itemList" :key="i">
-						<view class="flex list-title" >
-							{{res.name}} {{res.num}}{{res.unitName}} X ￥{{parseFloat(res.unitPrice)}} = ￥{{parseFloat(res.price)}}
+					<view class="goods-item" v-for="(res,i) in itemList" :key="'item-'+i">
+						<view class="goods-name">{{res.name}}</view>
+						<view class="goods-detail">
+							<text>{{res.num}}{{res.unitName}} × ￥{{parseFloat(res.unitPrice)}} = </text>
+							<text class="price">￥{{parseFloat(res.price)}}</text>
 						</view>
 					</view>
 				</template>
 				<template v-if="!$util.isEmpty(goodsList)">
-					<view class="list" v-for="(res,i) in goodsList" :key="i">
-						<view class="flex list-title" >
-							{{res.name}} {{res.num}}份 X ￥{{parseFloat(res.unitPrice)}} = ￥{{parseFloat(res.price)}}
+					<view class="goods-item" v-for="(res,i) in goodsList" :key="'goods-'+i">
+						<view class="goods-name">{{res.name}}</view>
+						<view class="goods-detail">
+							<text>{{res.num}}份 × ￥{{parseFloat(res.unitPrice)}} = </text>
+							<text class="price">￥{{parseFloat(res.price)}}</text>
 						</view>
 					</view>
 				</template>
 			</view>
 		</view>
-		<view class="flex refund-item">
-			<view class="refund-label"><text></text>退款金额：</view>
-			<view class="list">{{parseFloat(refundPrice)}}</view>
+
+		<!-- 退款金额 -->
+		<view class="info-section">
+			<view class="section-title">退款金额</view>
+			<view class="section-content">
+				<view class="amount">￥{{parseFloat(refundPrice)}}</view>
+			</view>
 		</view>
-		<view class=" refund-item">
-			<view class="refund-label">备注信息：</view>
-			<view class="list">{{remak}}</view>
+
+		<!-- 备注信息 -->
+		<view class="info-section">
+			<view class="section-title">备注信息</view>
+			<view class="section-content">
+				<view class="remark">{{remark || '无'}}</view>
+			</view>
 		</view>
 	</view>
 </template>
+
 <script>
 import { refundDetail } from "@/api/refund/index";
 export default {
@@ -62,79 +80,85 @@ export default {
 	}
 };
 </script>
+
 <style lang="scss" scoped>
-.app-content{
-	height: calc(100vh - 30upx * 2);
-	padding: 30upx;
-	background: #FFFFFF;
-	.radioBtn{
-		width: 30upx;
-		height: 30upx;
-		margin-right: 10upx;
-		border: 1upx solid #ddd;
-		border-radius: 50%;
-		&.active{
-			position: relative;
-			border: 1upx solid #3385ff;
-			&:after{
-				content: '';
-				position: absolute;
-				width: 18upx;
-				height: 18upx;
-				background: #3385ff;
-				border-radius: 50%;
-			}
-		}
-	}
-	.refund-item-list{
-		display: flex;
-		padding-bottom: 30upx;
-		border-bottom: 1upx solid #dddddd;
-		.refund-label{
-			width: 200upx;
-			text{color: red;}
+.app-content {
+	padding: 20upx;
+	background: #f8f8f8;
+	min-height: calc(100vh - 40upx);
+	
+	.info-section {
+		background: #ffffff;
+		margin-bottom: 20upx;
+		border-radius: 8upx;
+		border: 1upx solid #e8e8e8;
+		
+		.section-title {
+			padding: 24upx 30upx 16upx;
+			font-size: 30upx;
+			font-weight: 500;
+			color: #333;
+			border-bottom: 1upx solid #f0f0f0;
 		}
-		.list{
-			margin-bottom: 10upx;
-			.list-title{
-				height: 60upx;
-				padding-bottom: 20upx;
-
+		
+		.section-content {
+			padding: 24upx 30upx;
+			
+			.status-tag {
+				display: inline-block;
+				padding: 8upx 16upx;
+				border-radius: 4upx;
+				font-size: 26upx;
+				
+				&.return-stock {
+					background: #f6ffed;
+					color: #52c41a;
+					border: 1upx solid #d9f7be;
+				}
+				
+				&.no-return {
+					background: #fff7e6;
+					color: #fa8c16;
+					border: 1upx solid #ffd591;
+				}
 			}
-			.list-val{
-				input{
-					width: 150upx;
-					border: 1upx solid #ddd;
+			
+			.goods-item {
+				padding: 16upx 0;
+				border-bottom: 1upx solid #f5f5f5;
+				
+				&:last-child {
+					border-bottom: none;
 				}
-				text{
-					padding: 0 30upx;
+				
+				.goods-name {
+					font-size: 28upx;
+					color: #333;
+					margin-bottom: 8upx;
+					line-height: 1.4;
+				}
+				
+				.goods-detail {
+					font-size: 26upx;
+					color: #666;
+					
+					.price {
+						color: #ff4d4f;
+						font-weight: 500;
+					}
 				}
 			}
-		}
-	}
-	.refund-item{
-		display: flex;
-		padding: 20upx 0;
-		.refund-label{width: 200upx;text{color: red;}}
-		input{
-			border: 1upx solid #ddd;
-		}
-		textarea{
-			width: calc(100% - 210upx);
-			border: 1upx solid #ddd;
-			height:150upx;
-		}
-	}
-	.btn-box{
-		.btn{
-			width: 200upx;
-			height: 60upx;
-			border: 1upx solid #666666;
-			border-radius: 10upx;
-			&.active{
-				background: #3385ff;
-				color: #fff;
-				border: 1upx solid #3385ff;
+			
+			.amount {
+				font-size: 36upx;
+				font-weight: 600;
+				color: #ff4d4f;
+			}
+			
+			.remark {
+				font-size: 28upx;
+				color: #333;
+				line-height: 1.5;
 			}
 		}
 	}