设置交易密码页面

src/user_pages/billDetail/index.tsx

@@ -1,6 +1,10 @@
 import React, { useEffect, useState } from "react";
-import { View, Text, Input, Button, Image } from "@tarojs/components";
+import { View, Text } from "@tarojs/components";
+import { useRouter } from '@tarojs/taro';
+import dayjs from 'dayjs';
+import Taro from '@tarojs/taro';
 
+import httpService from "@/services/httpService";
 import { TransactionType, TransactionSubType } from "@/user_pages/wallet/index";
 import "./index.scss";
 
@@ -10,51 +14,84 @@ enum FreezeActions {
 }
 
 interface BillDetail {
-  id: number;
-  transaction_type: TransactionType;
-  transaction_sub_type: TransactionSubType;
-  freeze_action: FreezeActions;
-  amount: number;
-  description: string;
-  related_id: number;
-  create_time: string;
-  order_no: string;
-  game_title: string;
-  order_amount: number;
-  type_text: string;
-  sub_type_text: string;
-  amount_yuan: string;
+  id?: number;
+  transaction_type?: TransactionType;
+  transaction_sub_type?: TransactionSubType;
+  freeze_action?: FreezeActions;
+  amount?: number;
+  description?: string;
+  related_id?: number;
+  create_time?: string;
+  order_no?: string;
+  game_title?: string;
+  order_amount?: number;
+  type_text?: string;
+  sub_type_text?: string;
+  amount_yuan?: string;
 }
 
 const BillDetail: React.FC = () => {
-  const [billDetail, setBillDetail] = useState<BillDetail | null>(null);
+  const router = useRouter();
+  const { id } = router.params;
+  const [billDetail, setBillDetail] = useState<BillDetail>({});
+
+  const getBillDetail = async () => {
+    try {
+      const res = await httpService.post<BillDetail>("/wallet/transaction_detail", { transaction_id: id })
+      if (res.code === 0) {
+        setBillDetail(res.data);
+      }
+    } catch (error) {
+      console.log(error);
+    }
+
+  };
+
+  const copyText = (text: string | undefined) => {
+    if (!text) {
+      return;
+    }
+    Taro.setClipboardData({
+      data: text,
+      success: () => {
+        Taro.showToast({
+          title: '复制成功',
+          icon: 'none'
+        });
+      }
+    });
+  };
+
+  useEffect(() => {
+    getBillDetail();
+  }, [id]);
   return (
     <View className="bill-detail-page">
       <View className="title-text-box">
         <View className="title-text">现金交易 (元)</View>
         <View className="amount-text">
-          <Text>+</Text>
-          <Text>65.00</Text>
+          <Text>{billDetail.transaction_type === 'expense' ? '-' : '+'}</Text>
+          <Text>{billDetail.amount_yuan}</Text>
         </View>
       </View>
       <View className="detail-wrapper">
         <View className="detail-item">
           <Text>交易时间</Text>
-          <Text>2025-02-16 12:21:54</Text>
+          <Text>{billDetail.create_time && dayjs(billDetail.create_time).format('YYYY-MM-DD HH:mm:ss')}</Text>
         </View>
         <View className="detail-item">
           <Text>活动标题</Text>
-          <Text>女生轻松双打</Text>
+          <Text>{billDetail.game_title}</Text>
         </View>
         <View className="detail-item">
           <Text>现金余额</Text>
-          <Text>¥3890.00</Text>
+          <Text>¥{billDetail.amount}</Text>
         </View>
         <View className="detail-item">
-          <Text>交易单号</Text>
+          <Text>商户单号</Text>
           <View className="with-btn-box">
-            <Text>89172371293791273912</Text>
-            <Text className="btn">复制</Text>
+            <Text>{billDetail.order_no}</Text>
+            <Text className="btn" onClick={() => copyText(billDetail.order_no)}>复制</Text>
           </View>
         </View>
       </View>