1

src/pages/client/order/components/OrderItem.vue

@@ -77,10 +77,21 @@
         >
           申请售后
         </view> -->
-					<view class="flex-center fs-24 app-fc-main status-btn" @click.stop="$emit('refund', data)">
+            <!-- <view class="flex-center fs-24 app-fc-main status-btn" @click.stop="$emit('refund', data)">
 						退款
-					</view>
-					<view class="flex-center fs-24 app-fc-white status-btn confirm"
+					</view> -->
+						<refund-button
+							mode="2"
+							order-status="1"
+							:order-id="data.order_no"
+							:refund-total-amount="(data.actual_price || 0) * 100"
+							:compact="true"
+							@refund="handleRefund"
+							@error="handleError"
+							style="width:140rpx;height:68rpx;"
+
+						/>
+	               				<view class="flex-center fs-24 app-fc-white status-btn confirm"
 						@click.stop="jumpToReservation">
 						立即预约
 					</view>
@@ -92,6 +103,7 @@
 		<!-- 		<view class="flex-center fs-24 app-fc-main status-btn" @click.stop="$emit('concactService', data)">
 					联系客服
 				</view> -->
+			
 				<view class="flex-center fs-24 app-fc-main status-btn" @click.stop="$emit('afterSale', data)">
 					申请售后
 				</view>
@@ -143,6 +155,7 @@
 <script>
 	import PopUpModal from "@/components/PopUpModal.vue";
 	import GoodInfo from "./GoodInfo.vue";
+	import RefundButton from "@/components/RefundButton.vue";
 	import {
 		SHOP_ORDER_STATUS,
 		SHOP_ORDER_UNPAY,
@@ -190,6 +203,7 @@
 		components: {
 			GoodInfo,
 			PopUpModal,
+			RefundButton
 		},
 		options: {
 			styleIsolation: "shared",
@@ -244,6 +258,20 @@
 			this.stopCountDown();
 		},
 		methods: {
+			handleRefund(e) {
+				console.log('退款结果:', e.detail)
+				if (e.detail.status === 'success') {
+					uni.showToast({ title: '退款申请已提交', icon: 'success' })
+					this.$emit('refund', this.data)
+				} else {
+					uni.showToast({ title: '退款失败', icon: 'none' })
+				}
+			},
+			
+			handleError(e) {
+				console.error('组件错误:', e.detail)
+			},
+			
 			startCountDown() {
 				this.stopCountDown();
 				if (this.countDownTime > 0) {
@@ -394,6 +422,7 @@
 			.good-info-multi {
 				padding-top: 20rpx;
 			}
+			
 		}
 	}
-</style>
+</style>