售后优化

hdApp/src/pagesPurchase/refund.vue

@@ -1,101 +1,166 @@
 <template>
-	<view class="app-content">
-		<view style="padding:30upx 30upx 140upx 30upx;">
-			<view style="border:1upx solid #CCCCCC;border-radius: 10upx;margin:0upx 5upx 10upx 5upx;padding:10upx 0 10upx 5upx;">
-				<view style="color:#3385FF;margin-bottom:10upx;font-size:29upx;">没拿货，拿货了退还了，<text style="font-weight:bold;">选退货并退款</text></view>
+	<view class="refund-page">
+		<!-- 红色提示信息 - 售后说明 -->
+		<view class="info-tip">
+			<view class="info-content">
+				<text class="info-text" style="color:#3385ff;">没拿货或拿货退还了，<text style="font-weight:bold;">选退货并退款</text></text>
 				<block v-if="orderInfo.ghsShopId && (orderInfo.ghsShopId == 26094 || orderInfo.ghsShopId == 25159)">
-					<view style="color:#3385FF;margin-bottom:10upx;font-size:29upx;">货拿了，坏几支，损耗超10%，<text style="font-weight:bold;">选只退款</text></view>
-					<view style="color:red;font-weight:bold;font-size:28upx;margin-top:15upx;">售后范围：10%以内损耗属正常运输损耗，不售后。超过10%的，可以售后。请在收货后12小时内申请售后。</view>
+					<text class="info-text">货拿了质量有问题，损耗超10%，<text style="font-weight:bold;">选只退款</text></text>
+					<text class="info-warning">售后范围：10%以内损耗属正常运输损耗，不售后。超过10%的，可以售后。请在收货后12小时内申请售后。</text>
 				</block>
 				<block v-else>
-					<view style="color:#3385FF;margin-bottom:10upx;font-size:29upx;">货拿了，坏几支，损耗超20%，<text style="font-weight:bold;">选只退款</text></view>
-					<view style="color:red;font-weight:bold;font-size:28upx;margin-top:15upx;">售后范围：20%以内损耗属正常运输损耗，不售后。超过20%的，可以售后。请在收货后12小时内申请售后。</view>
+					<text class="info-text">货拿了质量有问题，损耗超20%，<text style="font-weight:bold;">选只退款</text></text>
+					<text class="info-warning">售后范围：20%以内损耗属正常运输损耗，不售后。超过20%的，可以售后。请在收货后12小时内申请售后。</text>
 				</block>
 			</view>
-			<view class="flex refund-item">
-				<view class="refund-label">退款方式：</view>
-				<view class="flex list">
-					<view class="flex" @tap="refundType=1" >
-						<view class="flex-center radioBtn" :class="refundType==1?'active':''">
-						</view>退货并退款</view>
-					<view style="margin-left:50upx" class="flex" @tap="refundType=2">
-						<view class="flex-center radioBtn" :class="refundType==1?'':'active'">
-							</view>只退款</view>
-				</view>
+		</view>
+
+		<!-- 退款方式卡片 -->
+		<view class="card-section">
+			<view class="section-title">
+				<text class="title-text">退款方式</text>
+			</view>
+			<view class="refund-type-buttons">
+				<button 
+					class="type-button" 
+					:class="refundType==1?'active':''" 
+					@tap="refundType=1">
+					退货并退款
+				</button>
+				<button 
+					class="type-button" 
+					:class="refundType==2?'active':''" 
+					@tap="refundType=2">
+					只退款
+				</button>
+			</view>
+		</view>
+
+		<!-- 商品选择卡片 -->
+		<view class="card-section" v-if="refundType==1">
+			<view class="section-title">
+				<text class="title-text">选择商品</text>
 			</view>
-			<view class="refund-item-list" v-if="refundType==1">
-				<view class="refund-label"><text></text>选择商品：</view>
-				<view>
-					<view class="list" v-for="(res,i) in product" :key="i">
-						<view class="flex list-title" >
-							<text class="product-name">{{res.name}}</text>
-							<text class="product-num">{{ `${parseFloat(res.xhNum)}` }}{{res.xhUnitName}}</text>
-							<text class="product-price">{{`${parseFloat(res.xhUnitPrice)}`}}元/{{res.xhUnitName}}</text>
+			<view class="product-list">
+				<view class="product-row" v-for="(res,i) in product" :key="i">
+					<view class="product-basic-info">
+						<text class="product-name">{{res.name}}</text>
+						<view class="product-meta">
+							<text class="stock-info">{{parseFloat(res.xhNum)}}{{res.xhUnitName}} X ¥{{parseFloat(res.xhUnitPrice)}}</text>
+							<text class="available-info">可退 {{Number(res.xhNum)-Number(res.refundNum)}}{{res.xhUnitName}}</text>
 						</view>
-						<view class="flex list-val" style="font-size:26upx;font-weight:bold;">
-							<input type="number" placeholder="填退货数" v-model="res.refundCount" placeholder-style="color:#CCCCCC" />
-							<text style="margin-left:10upx;">{{res.xhUnitName}}</text>
-							<text style="color:green;margin-left:20upx;">可退{{Number(res.xhNum)-Number(res.refundNum)}}{{res.xhUnitName}}</text>
+					</view>
+					<view class="refund-control">
+						<view class="input-item">
+							<input 
+								class="refund-input" 
+								type="number" 
+								placeholder="0" 
+								v-model="res.refundCount" 
+								placeholder-style="color:#ccc" />
+							<text class="unit-label">{{res.xhUnitName}}</text>
 						</view>
 					</view>
 				</view>
 			</view>
-			<view class="flex refund-item">
-				<view class="refund-label">订单金额：</view>
-				<view class="list">
-					￥{{parseFloat(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>
+		</view>
+
+		<!-- 金额信息卡片 -->
+		<view class="card-section">
+			<view class="section-title">
+				<text class="title-text">金额信息</text>
+			</view>
+			<view class="amount-info">
+				<view class="amount-row">
+					<text class="amount-label">订单金额</text>
+					<view class="amount-value">
+						<text class="price-text">¥{{parseFloat(orderInfo.orderPrice)||0}}</text>
+					</view>
+				</view>
+				<view class="amount-row" v-if="Number(orderInfo.tkPrice)>0">
+					<text class="amount-label">已退金额</text>
+					<view class="amount-value">
+						<text class="refunded-text">¥{{orderInfo.tkPrice ? parseFloat(orderInfo.tkPrice) : 0}}</text>
+					</view>
+				</view>
+				<view class="amount-row">
+					<text class="amount-label">可退金额</text>
+					<text class="amount-value available-amount">¥{{couldRefundPrice}}</text>
+				</view>
+				<view class="amount-row">
+					<text class="amount-label">预计退款</text>
+					<text class="amount-value estimate-amount">¥{{refundPrice}}</text>
+				</view>
+				<view class="amount-row input-row">
+					<text class="amount-label required">实际退款</text>
+					<view class="amount-input-wrapper">
+						<text class="currency-symbol">¥</text>
+						<input 
+							class="amount-input" 
+							type="digit" 
+							v-model="refundMoney" 
+							placeholder="请输入"
+							placeholder-style="color:#999"
+							@focus="refundMoney=''" />
+					</view>
 				</view>
 			</view>
-			<view class="flex refund-item">
-				<view class="refund-label">可退金额：</view>
-				<view class="list">￥{{couldRefundPrice}}</view>
+		</view>
+
+		<!-- 备注卡片 -->
+		<view class="card-section">
+			<view class="section-title">
+				<text class="title-text">备注说明</text>
 			</view>
-			<view class="flex refund-item">
-				<view class="refund-label">预计退款：</view>
-				<view class="list">￥{{refundPrice}}</view>
+			<view class="remark-container">
+				<textarea 
+					class="remark-textarea" 
+					v-model="remark" 
+					placeholder="选填"
+					placeholder-style="color:#999" />
 			</view>
-			<view class="flex refund-item">
-				<view class="refund-label"><text></text>实际退款：</view>
-				<input type="digit" v-model="refundMoney" @focus="refundMoney=''">
+		</view>
+
+		<!-- 售后图片卡片 -->
+		<view class="card-section">
+			<view class="section-title">
+				<text class="title-text">售后图片</text>
+				<text class="rule-link" @click="getRule()">图片拍照规范</text>
 			</view>
-			<!-- #ifdef MP-WEIXIN -->
-			<view class="flex refund-item">
-				<view class="refund-label">审核通知：</view>
-				<view class="list">
-					<button class="admin-button-com middle default" @click="noticeMe()" v-if="needNotice == 0">点击开启通知</button>
-					<button class="admin-button-com middle blue" v-else>已经开启通知</button>
-				</view>
+			<view class="image-upload-section">
+				<htz-image-upload 
+					:max="9" 
+					:compress="true" 
+					v-model="refundImgData" 
+					:headers="headers"
+					@uploadSuccess="imgUploadSuccess" 
+					:quality="60" 
+					@imgDelete="imgDeleteFn" 
+					:action="getLoginInfo.imgUploadApi">
+				</htz-image-upload>
+				<view class="upload-warning">必须按拍照规范，提供图片，否则申请将被驳回</view>
 			</view>
-			<!-- #endif -->
-			<view class="refund-item">
-				<view class="refund-label">备注说明：</view>
-				<textarea v-model="remark" style="height:100upx;"></textarea>
+		</view>
+
+		<!-- 审核通知卡片 -->
+		<!-- #ifdef MP-WEIXIN -->
+		<view class="card-section">
+			<view class="section-title">
+				<text class="title-text">审核通知</text>
 			</view>
-			<view>
-				<form>
-					<div class="module-com input-line-wrap">
-						<div class="module-com input-line-wrap goods-wrap">
-							<div class="module-tit" style="padding-left:0upx;">
-								<span>售后图片：</span>
-								<text @click="getRule()" style="font-weight:bold;text-decoration: underline;float:right;color:red;">图片拍照规范</text>
-							</div>
-							<div class="module-det">
-								<htz-image-upload :max="9" :compress="true" v-model="refundImgData" :headers="headers"
-								@uploadSuccess="imgUploadSuccess" :quality="60" @imgDelete="imgDeleteFn" :action="getLoginInfo.imgUploadApi">
-								</htz-image-upload>
-								<view style="color:red;font-weight:bold;">必须按拍照规范，提供图片，否则申请将被驳回</view>
-							</div>
-						</div>
-					</div>
-				</form>
+			<view class="notice-section">
+				<button class="admin-button-com middle default" @click="noticeMe()" v-if="needNotice == 0">点击开启通知</button>
+				<button class="admin-button-com middle green-btn" v-else>已经开启通知</button>
 			</view>
-
 		</view>
-		<view class="app-footer">
-			<button class="admin-button-com big default" @click="cancelRefund()">取消</button>
-			<button class="admin-button-com big blue" formType="submit" @click="confirmRefund">提交申请</button>
+		<!-- #endif -->
+
+		<!-- 底部操作按钮 -->
+		<view class="bottom-actions">
+			<button class="action-btn cancel-btn" @tap="cancelRefund()">取消</button>
+			<button class="action-btn confirm-btn" formType="submit" @tap="confirmRefund">提交申请</button>
 		</view>
+
 	</view>
 </template>
 <script>
@@ -252,133 +317,383 @@ export default {
 };
 </script>
 <style lang="scss" scoped>
-.module-com {
-  margin-bottom: 20upx;
-  background-color: #fff;
-  color: $fontColor2;
-  .module-tit {
-    padding: 20upx 30upx;
-    font-size: 28upx;
-  }
-  .module-det {
-    padding: 0 30upx;
-  }
+.refund-page {
+	min-height: 100vh;
+	background: #f5f6f8;
+	padding: 20upx 0 200upx;
 }
-	.app-content{
-		height: calc(100vh - 30upx * 2);
-		background: #FFFFFF;
+
+// 信息提示样式
+.info-tip {
+	background: #f0f9f7;
+	border: 1upx solid #c6f6d5;
+	border-radius: 12upx;
+	margin: 20upx 20upx 20upx 20upx;
+	padding: 20upx;
+	display: flex;
+	align-items: flex-start;
+	gap: 15upx;
+	
+	.info-icon {
+		font-size: 40upx;
+		flex-shrink: 0;
+		line-height: 1;
+		min-width: 50upx;
+	}
+	
+	.info-content {
+		flex: 1;
+		display: flex;
+		flex-direction: column;
+		gap: 8upx;
+	}
+	
+	.info-text {
+		font-size: 28upx;
+		color: #049E2C;
+		line-height: 1.4;
+	}
+	
+	.info-warning {
+		font-size: 26upx;
+		color: #c41d2a;
+		font-weight: 600;
+		line-height: 1.5;
+	}
+}
+
+// 卡片样式
+.card-section {
+	background: #fff;
+	margin: 0 20upx 20upx;
+	border-radius: 16upx;
+	box-shadow: 0 2upx 12upx rgba(0, 0, 0, 0.08);
+	overflow: hidden;
+}
+
+// 节标题
+.section-title {
+	padding: 30upx 30upx 20upx;
+	border-bottom: 1upx solid #f0f0f0;
+	display: flex;
+	align-items: center;
+	justify-content: space-between;
+	
+	.title-text {
+		font-size: 32upx;
+		font-weight: 600;
+		color: #333;
+	}
+
+	.rule-link {
+		font-size: 26upx;
+		color: #049E2C;
+		font-weight: 500;
+		text-decoration: underline;
+	}
+}
+
+// 退款方式按钮
+.refund-type-buttons {
+	padding: 30upx 30upx 20upx;
+	display: flex;
+	gap: 30upx;
+	
+	.type-button {
+		flex: 1;
+		height: 80upx;
+		border-radius: 12upx;
 		font-size: 30upx;
-		.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%;
-				}
-			}
+		font-weight: 500;
+		border: 1upx solid #ddd;
+		background: #f8f9fa;
+		color: #666;
+		transition: all 0.3s ease;
+		
+		&.active {
+			background: linear-gradient(135deg, #049E2C 0%, #06C547 100%);
+			color: #fff;
+			border: none;
+			box-shadow: 0 4upx 12upx rgba(4, 158, 44, 0.3);
 		}
-		.refund-item-list{
-			display: flex;
-			padding-bottom: 30upx;
-			padding-top: 30upx;
-			border-top: 1upx solid #e6e4e4;
-			border-bottom: 1upx solid #e6e4e4;
-			.refund-label{
-				width: 200upx;
-				color:#666666;
-				font-size:26upx;
-				text{color: red;}
-			}
-			.list{
-				margin-bottom:18upx;
-				border-bottom:1upx solid #CCCCCC;
-				padding-bottom:14upx;
-				.list-title{
-					height: 60upx;
-					padding-bottom: 20upx;
-					font-size:26upx;
-					font-weight:bold;
-					.product-name{
-						overflow: hidden;
-						text-overflow:ellipsis;
-						white-space: nowrap;
-						width:190upx;
-					}
-					.product-price{
-						overflow: hidden;
-						text-overflow:ellipsis;
-						white-space: nowrap;
-						width:130upx;
-						margin-left:10upx;
-					}
-					.product-num{
-						width:90upx;
-						overflow: hidden;
-						text-overflow:ellipsis;
-						white-space: nowrap;
-						margin-left:10upx;
-					}
-				}
-				.list-val{
-					input{
-						width: 200upx;
-						border: 1upx solid #ddd;
-						text-align: center;
-						font-weight: normal;
-					}
-				}
-			}
+		
+		&:active:not(.active) {
+			background: #eff5f8;
 		}
-		.refund-item{
-			display: flex;
-			padding: 18upx 0;
-			.refund-label{
-				width: 200upx;
-				color:#666666;
-				font-size:26upx;
-				text{
-					color: red;
-				}
-			}
-			input{
-				border: 1upx solid #ddd;
-			}
-			textarea{
-				width: calc(100% - 210upx);
-				height:150upx;
-				border: 1upx solid #ddd;
-			}
+	}
+}
+
+// 商品列表
+.product-list {
+	margin-top: 15upx;
+	padding: 0 20upx 20upx;
+}
+
+.product-row {
+	display: flex;
+	align-items: center;
+	justify-content: space-between;
+	padding: 20upx;
+	margin-bottom: 8upx;
+	background: #fafbfc;
+	border-radius: 8upx;
+	border: 1upx solid #eef0f2;
+	
+	&:last-child {
+		margin-bottom: 0;
+	}
+}
+
+.product-basic-info {
+	flex: 1;
+	margin-right: 20upx;
+	
+	.product-name {
+		font-size: 32upx;
+		font-weight: 600;
+		color: #333;
+		line-height: 1.3;
+		display: block;
+		margin-bottom: 8upx;
+		overflow: hidden;
+		text-overflow: ellipsis;
+		white-space: nowrap;
+		width: 300upx;
+	}
+	
+	.product-meta {
+		display: flex;
+		gap: 12upx;
+		flex-wrap: wrap;
+		
+		.stock-info {
+			font-size: 26upx;
+			color: #666;
+			background: #f5f5f5;
+			padding: 4upx 8upx;
+			border-radius: 4upx;
 		}
-		.btn-box{
-			.btn{
-				width: 220upx;
-				height: 90upx;
-				border: 1upx solid #666666;
-				border-radius: 10upx;
-				color:#666666;
-				&.active{
-					background: #3385ff;
-					color: #fff;
-					border: 1upx solid #3385ff;
-				}
-			}
+		
+		.available-info {
+			font-size: 26upx;
+			color: #049E2C;
+			background: rgba(4, 158, 44, 0.1);
+			padding: 4upx 8upx;
+			border-radius: 4upx;
+		}
+	}
+}
+
+.refund-control {
+	display: flex;
+	align-items: center;
+	gap: 8upx;
+	
+	.input-item {
+		display: flex;
+		align-items: center;
+		gap: 8upx;
+	}
+}
+
+.refund-input {
+	width: 100upx;
+	height: 60upx;
+	background: #fff;
+	border: 1upx solid #ddd;
+	border-radius: 6upx;
+	text-align: center;
+	font-size: 26upx;
+	color: #333;
+	font-weight: 500;
+	
+	&:focus {
+		border-color: #049E2C;
+	}
+}
+
+.unit-label {
+	font-size: 24upx;
+	color: #666;
+	min-width: 40upx;
+}
+
+// 金额信息
+.amount-info {
+	padding: 30upx;
+}
+
+.amount-row {
+	display: flex;
+	justify-content: space-between;
+	align-items: center;
+	padding: 20upx 0;
+	border-bottom: 1upx solid #f0f0f0;
+	
+	&:last-child {
+		border-bottom: none;
+	}
+	
+	&.input-row {
+		align-items: flex-start;
+		padding-top: 30upx;
+	}
+	
+	.amount-label {
+		font-size: 28upx;
+		color: #666;
+		
+		&.required::after {
+			content: "*";
+			color: #ff4757;
+			margin-left: 5upx;
 		}
 	}
-.app-footer {
-  justify-content: space-evenly;
-  z-index: 9999;
-  .admin-button-com {
-    width: 46%;
-  }
+	
+	.amount-value {
+		display: flex;
+		align-items: center;
+		
+		.price-text {
+			font-size: 32upx;
+			font-weight: 600;
+			color: #333;
+		}
+		
+		.refunded-text {
+			font-size: 32upx;
+			font-weight: 600;
+			color: #999;
+		}
+		
+		&.available-amount {
+			font-size: 32upx;
+			font-weight: 600;
+			color: #049E2C;
+		}
+		
+		&.estimate-amount {
+			font-size: 32upx;
+			font-weight: 600;
+			color: #049E2C;
+		}
+	}
+}
+
+.amount-input-wrapper {
+	display: flex;
+	align-items: center;
+	background: #fafbfc;
+	border: 1upx solid #ddd;
+	border-radius: 8upx;
+	padding: 0 20upx;
+	width: 200upx;
+	height: 80upx;
+	
+	.currency-symbol {
+		font-size: 28upx;
+		color: #666;
+		margin-right: 10upx;
+	}
+	
+	.amount-input {
+		flex: 1;
+		height: 80upx;
+		font-size: 28upx;
+		color: #333;
+		font-weight: 500;
+		border: none;
+		background: transparent;
+	}
+}
+
+// 审核通知
+.notice-section {
+	padding: 30upx;
+	display: flex;
+	justify-content: center;
+}
+
+// 备注输入框
+.remark-container {
+	padding: 20upx 30upx 30upx;
+}
+
+.remark-textarea {
+	width: 100%;
+	height: 120upx;
+	background: #fafbfc;
+	border: 1upx solid #ddd;
+	border-radius: 8upx;
+	padding: 15upx;
+	font-size: 28upx;
+	color: #333;
+	line-height: 1.2;
+	box-sizing: border-box;
+	resize: none;
+}
+
+// 图片上传区域
+.image-upload-section {
+	padding: 20upx 30upx 30upx;
+	
+	.upload-warning {
+		color: #c41d2a;
+		font-weight: 600;
+		font-size: 26upx;
+		margin-top: 15upx;
+	}
+}
+
+// 底部操作按钮
+.bottom-actions {
+	z-index: 39;
+	position: fixed;
+	bottom: 0;
+	left: 0;
+	right: 0;
+	background: #fff;
+	padding: 30upx;
+	border-top: 1upx solid #eee;
+	display: flex;
+	gap: 30upx;
+	box-shadow: 0 -4upx 12upx rgba(0, 0, 0, 0.1);
+}
+
+.action-btn {
+	flex: 1;
+	height: 88upx;
+	border-radius: 12upx;
+	font-size: 32upx;
+	font-weight: 600;
+	border: none;
+	transition: all 0.3s ease;
+	
+	&.cancel-btn {
+		background: #f8f9fa;
+		color: #666;
+		border: 1upx solid #ddd;
+		
+		&:active {
+			background: #e9ecef;
+		}
+	}
+	
+	&.confirm-btn {
+		background: linear-gradient(135deg, #049E2C 0%, #06C547 100%);
+		color: #fff;
+		box-shadow: 0 4upx 12upx rgba(4, 158, 44, 0.3);
+		
+		&:active {
+			transform: translateY(2upx);
+			box-shadow: 0 2upx 8upx rgba(4, 158, 44, 0.3);
+		}
+	}
+}
+
+// 绿色按钮样式
+.green-btn {
+	background: #049E2C !important;
+	color: white !important;
 }
 </style>