退款

hdApp/src/admin/order/refund.vue

@@ -124,20 +124,20 @@
 		<!-- 退款方式选择卡片 -->
 		<view class="card-section">
 			<view class="section-title">
-				<text class="title-text">库存变化</text>
+				<text class="title-text">退款方式</text>
 			</view>
 			<view class="refund-type-buttons">
 				<button 
 					class="admin-button-com big" 
 					:class="refundType==1?'blue':'default'" 
 					@tap="refundType=1">
-					库存退回来
+					退货并退款
 				</button>
 				<button 
 					class="admin-button-com big" 
 					:class="refundType==2?'blue':'default'" 
 					@tap="refundType=2">
-					库存不退回
+					只退款
 				</button>
 			</view>
 		</view>
@@ -160,15 +160,43 @@
 		<!-- 底部操作按钮 -->
 		<view class="bottom-actions">
 			<button class="action-btn cancel-btn" @tap="cancelRefund">取消</button>
-			<button class="action-btn confirm-btn" @tap="confirmRefund">确认退款</button>
+			<button class="action-btn confirm-btn" @tap="confirmRefund">退款</button>
 		</view>
+
+		<!-- 退款确认弹框 -->
+		<ModalModule 
+			:show="showRefundModal" 
+			:custom="true" 
+			:button="[]" 
+			width="90%" 
+			@click="handleRefundModalClick">
+			<view class="refund-confirm-modal">
+				<view class="modal-header">
+					<text class="modal-title">提示</text>
+				</view>
+				<view class="modal-content">
+					<view class="amount-display">
+						<text class="amount-label">退款金额</text>
+						<text class="amount-value">¥{{refundMoney}}</text>
+					</view>
+					<view class="confirm-text">
+						<text>确认要退款吗？</text>
+					</view>
+				</view>
+				<view class="modal-actions">
+					<button class="modal-btn cancel-modal-btn" @tap="cancelRefundModal">取消</button>
+					<button class="modal-btn confirm-modal-btn" @tap="executeRefund">确认退款</button>
+				</view>
+			</view>
+		</ModalModule>
 	</view>
 </template>
 <script>
 import { getDetail,refund } from "@/api/order/index";
+import ModalModule from "@/components/plugin/modal";
 export default {
 	name: "orderDetail",
-	components: {},
+	components: { ModalModule },
 	data() {
 		return {
 			goodsInfoList:[],
@@ -177,7 +205,8 @@ export default {
 			refundType:0,
 			remark:'',
 			orderInfo:{},
-			coundRefundPrice:0
+			coundRefundPrice:0,
+			showRefundModal: false
 		};
 	},
 
@@ -187,7 +216,7 @@ export default {
 			if(!this.$util.isEmpty(this.goodsInfoList)){
 				for (const item of this.goodsInfoList) {
 					if(Number(item.refundCount)>0){
-						let currentPrice = Number(item.refundCount)*Number(item.perPrice || item.unitPrice)
+						let currentPrice = Number(item.refundCount)*Number(item.perPrice)
 						currentPrice.toFixed(2)
 						price = Number(price) + Number(currentPrice)
 						price.toFixed(2)
@@ -198,7 +227,7 @@ export default {
 			if(!this.$util.isEmpty(this.itemInfoList)){
 				for (const item of this.itemInfoList) {
 					if(Number(item.refundCount)>0){
-						let currentPrice = Number(item.refundCount)*Number(item.perPrice || item.unitPrice)
+						let currentPrice = Number(item.refundCount)*Number(item.perPrice)
 						currentPrice.toFixed(2)
 						price = Number(price) + Number(currentPrice)
 						price.toFixed(2)
@@ -285,18 +314,47 @@ 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}
-			that.$util.confirmModal({content:'确认退款？'},() => {
-				uni.showLoading({mask:true})
-				refund(refundParams).then(res => {
-					uni.hideLoading()
-					if(res.code == 1){
-						this.$util.pageTo({url:'/common/success',query:{titleType:1},type:2})
+			// 显示确认退款弹框
+			this.showRefundModal = true
+		},
+		// 弹框相关方法
+		handleRefundModalClick(e) {
+			// 处理弹框点击事件
+		},
+		cancelRefundModal() {
+			this.showRefundModal = false
+		},
+		executeRefund() {
+			this.showRefundModal = false
+			// 获取之前验证过的商品数据
+			let selectProduct = []
+			if(!this.$util.isEmpty(this.goodsInfoList)){
+				this.goodsInfoList.forEach(ele=>{
+					if(Number(ele.refundCount)>0){
+						selectProduct.push({"productId":ele.goodsId,"num":ele.refundCount,"unitType":ele.unitType,unitName:ele.unitName,unitPrice:ele.perPrice || ele.unitPrice,property:0})
 					}
 				})
+			}
+			if(!this.$util.isEmpty(this.itemInfoList)){
+				this.itemInfoList.forEach(ele=>{
+					if(Number(ele.refundCount)>0){
+						selectProduct.push({"productId":ele.itemId,"num":ele.refundCount,"unitType":ele.unitType,unitName:ele.unitName,unitPrice:ele.perPrice || ele.unitPrice,property:1})
+					}
+				})
+			}
+			let refundParams = {product:JSON.stringify(selectProduct),id: this.option.id,price:this.refundMoney,remark:this.remark,refundType:this.refundType,getOriginalItem:1,version:2}
+			this.doRefund(refundParams)
+		},
+		doRefund(refundParams){
+			uni.showLoading({mask:true})
+			refund(refundParams).then(res => {
+				uni.hideLoading()
+				if(res.code == 1){
+					this.$util.pageTo({url:'/common/success',query:{titleType:1},type:2})
+				}
 			})
 		},
 		async init() {
@@ -586,11 +644,9 @@ export default {
 	}
 }
 
-
-
 // 底部操作按钮
 .bottom-actions {
-	z-index:9999;
+	z-index:39;
 	position: fixed;
 	bottom: 0;
 	left: 0;
@@ -633,4 +689,90 @@ export default {
 		}
 	}
 }
+
+// 退款确认弹框样式
+.refund-confirm-modal {
+	background: #fff;
+	border-radius: 20upx;
+	overflow: hidden;
+	
+	.modal-header {
+		padding: 40upx 30upx 20upx;
+		text-align: center;
+		border-bottom: 1upx solid #f0f0f0;
+		
+		.modal-title {
+			font-size: 36upx;
+			font-weight: 600;
+			color: #333;
+		}
+	}
+	
+	.modal-content {
+		padding: 40upx 30upx;
+		text-align: center;
+		
+		.amount-display {
+			margin-bottom: 30upx;
+			
+			.amount-label {
+				display: block;
+				font-size: 28upx;
+				color: #666;
+				margin-bottom: 15upx;
+			}
+			
+			.amount-value {
+				display: block;
+				font-size: 60upx;
+				font-weight: 700;
+				color: #ff4757;
+				text-shadow: 0 2upx 4upx rgba(255, 71, 87, 0.2);
+			}
+		}
+		
+		.confirm-text {
+			font-size: 30upx;
+			color: #333;
+			line-height: 1.5;
+		}
+	}
+	
+	.modal-actions {
+		display: flex;
+		gap: 20upx;
+		padding: 0 30upx 40upx;
+		
+		.modal-btn {
+			flex: 1;
+			height: 80upx;
+			border-radius: 12upx;
+			font-size: 30upx;
+			font-weight: 600;
+			border: none;
+			transition: all 0.3s ease;
+			
+			&.cancel-modal-btn {
+				background: #f8f9fa;
+				color: #666;
+				border: 1upx solid #ddd;
+				
+				&:active {
+					background: #e9ecef;
+				}
+			}
+			
+			&.confirm-modal-btn {
+				background: linear-gradient(135deg, #ff4757 0%, #ff3742 100%);
+				color: #fff;
+				box-shadow: 0 4upx 12upx rgba(255, 71, 87, 0.3);
+				
+				&:active {
+					transform: translateY(2upx);
+					box-shadow: 0 2upx 8upx rgba(255, 71, 87, 0.3);
+				}
+			}
+		}
+	}
+}
 </style>