点击退款功能

src/pagesUser/goodsOrderDetail/index.scss

@@ -136,3 +136,102 @@
     }
   }
 }
+
+// 退款申请弹窗
+.refund_popup {
+  background-color: #FFFFFF;
+  border-radius: 24px 24px 0 0;
+  padding: 0 30px 30px;
+  max-height: 80vh;
+  overflow-y: auto;
+
+  // 标题栏
+  .popup_header {
+    display: flex;
+    align-items: center;
+    justify-content: space-between;
+    height: 100px;
+    border-bottom: 1PX solid #EBEDF0;
+    margin-bottom: 30px;
+
+    .cancel_btn {
+      font-size: 30px;
+      color: #646566;
+    }
+
+    .popup_title {
+      font-size: 33px;
+      color: #323233;
+      font-weight: 500;
+    }
+
+    .submit_btn {
+      font-size: 30px;
+      color: #03C175;
+      font-weight: 500;
+    }
+  }
+
+  // 商品信息
+  .popup_goods_info {
+    display: flex;
+    align-items: center;
+    padding: 30px;
+    background-color: #F7F8FA;
+    border-radius: 12px;
+    margin-bottom: 30px;
+
+    .popup_goods_image {
+      width: 160px;
+      height: 160px;
+      border-radius: 8px;
+      flex-shrink: 0;
+    }
+
+    .popup_goods_detail {
+      flex: 1;
+      margin-left: 30px;
+      display: flex;
+      flex-direction: column;
+      gap: 20px;
+
+      .popup_goods_name {
+        font-size: 28px;
+        color: #323233;
+        line-height: 1.4;
+      }
+
+      .popup_goods_price {
+        font-size: 28px;
+        color: #323233;
+        font-weight: 500;
+      }
+    }
+  }
+
+  // 退款原因
+  .refund_reason_section {
+    .reason_label {
+      display: block;
+      font-size: 28px;
+      color: #323233;
+      margin-bottom: 20px;
+    }
+
+    .reason_input {
+      width: 100%;
+      min-height: 200px;
+      padding: 20px;
+      background-color: #F7F8FA;
+      border-radius: 8px;
+      font-size: 28px;
+      color: #323233;
+      line-height: 1.5;
+      box-sizing: border-box;
+    }
+
+    .reason_placeholder {
+      color: #C8C9CC;
+    }
+  }
+}

src/pagesUser/goodsOrderDetail/index.tsx

@@ -1,10 +1,10 @@
 /**
  * 订单详情页（商品消费详情）
  */
-import { View, Text, Button } from '@tarojs/components'
+import { View, Text, Button, Textarea } from '@tarojs/components'
 import { useState } from 'react'
 import Taro, { useLoad } from '@tarojs/taro'
-import { Image } from '@taroify/core'
+import { Image, Popup } from '@taroify/core'
 import './index.scss'
 
 // 商品信息接口
@@ -35,6 +35,9 @@ interface OrderDetail {
 
 const OrderDetail = () => {
   const [pageType, setPageType] = useState<'unpaid' | 'paid'>('unpaid')
+  const [refundPopupOpen, setRefundPopupOpen] = useState(false)
+  const [currentRefundGoods, setCurrentRefundGoods] = useState<GoodsItem | null>(null)
+  const [refundReason, setRefundReason] = useState('')
   
   // 模拟订单详情数据
   const [orderDetail] = useState<OrderDetail>({
@@ -81,10 +84,44 @@ const OrderDetail = () => {
   // 申请退款
   const handleRefund = (goodsId: string) => {
     console.log('申请退款', goodsId)
+    // 查找商品
+    const goods = orderDetail.goods.find(item => item.id === goodsId)
+    if (goods) {
+      setCurrentRefundGoods(goods)
+      setRefundReason('')
+      setRefundPopupOpen(true)
+    }
+  }
+
+  // 提交退款申请
+  const handleSubmitRefund = () => {
+    if (!refundReason.trim()) {
       Taro.showToast({
-      title: '申请退款',
+        title: '请输入退款原因',
         icon: 'none'
       })
+      return
+    }
+
+    console.log('提交退款申请', {
+      goodsId: currentRefundGoods?.id,
+      reason: refundReason
+    })
+
+    Taro.showToast({
+      title: '退款申请已提交',
+      icon: 'success'
+    })
+
+    // 关闭弹窗
+    setRefundPopupOpen(false)
+    setRefundReason('')
+  }
+
+  // 取消退款
+  const handleCancelRefund = () => {
+    setRefundPopupOpen(false)
+    setRefundReason('')
   }
 
   // 立即支付
@@ -192,6 +229,54 @@ const OrderDetail = () => {
           </Button>
         </View>
       )}
+
+      {/* 退款申请弹窗 */}
+      <Popup 
+        open={refundPopupOpen} 
+        placement="bottom"
+        rounded
+        onClose={handleCancelRefund}
+      >
+        <View className="refund_popup">
+          {/* 标题栏 */}
+          <View className="popup_header">
+            <Text className="cancel_btn" onClick={handleCancelRefund}>取消</Text>
+            <Text className="popup_title">申请退款</Text>
+            <Text className="submit_btn" onClick={handleSubmitRefund}>提交</Text>
+          </View>
+
+          {/* 商品信息 */}
+          {currentRefundGoods && (
+            <View className="popup_goods_info">
+              <Image
+                className="popup_goods_image"
+                src={currentRefundGoods.image}
+                mode="aspectFill"
+                width={160}
+                height={160}
+              />
+              <View className="popup_goods_detail">
+                <Text className="popup_goods_name">{currentRefundGoods.name}</Text>
+                <Text className="popup_goods_price">¥ {currentRefundGoods.price.toFixed(2)}</Text>
+              </View>
+            </View>
+          )}
+
+          {/* 退款原因 */}
+          <View className="refund_reason_section">
+            <Text className="reason_label">退款原因：</Text>
+            <Textarea
+              className="reason_input"
+              placeholder="请输入退款原因"
+              placeholderClass="reason_placeholder"
+              value={refundReason}
+              onInput={(e) => setRefundReason(e.detail.value)}
+              maxlength={200}
+              autoHeight
+            />
+          </View>
+        </View>
+      </Popup>
     </View>
   )
 }