账单详情页面

src/user_pages/billDetail/index.config.ts

@@ -0,0 +1,3 @@
+export default definePageConfig({
+  navigationBarTitleText: '明细详情',
+})

src/user_pages/billDetail/index.scss

@@ -0,0 +1,56 @@
+.bill-detail-page {
+  min-height: 100vh;
+  background-color: #f5f5f5;
+  padding: 5px;
+  .title-text-box {
+    height: 118px;
+    display: flex;
+    flex-direction: column;
+    justify-content: center;
+    align-items: center;
+    gap: 16px;
+    .title-text {
+      font-family: PingFang SC;
+      font-weight: 400;
+      font-style: Regular;
+      font-size: 12px;
+      text-align: center;
+    }
+    .amount-text {
+      font-family: DingTalk JinBuTi;
+      font-weight: 400;
+      font-style: Regular;
+      font-size: 32px;
+      vertical-align: middle;
+      text-align: center;
+    }
+  }
+  .detail-wrapper {
+    padding: 12px 20px 16px;
+    border: 0.5px solid #ebebeb;
+    box-shadow: 0px 4px 36px 0px #0000000d;
+    .detail-item {
+      display: flex;
+      justify-content: space-between;
+      font-family: PingFang SC;
+      font-weight: 400;
+      font-style: Regular;
+      font-size: 12px;
+      line-height: 18px;
+      color: #000;
+      margin-bottom: 8px;
+      & > Text {
+        &:first-child {
+          color: #3c3c4399;
+        }
+      }
+      .with-btn-box {
+        display: flex;
+        gap: 8px;
+        .btn {
+          color: #007aff;
+        }
+      }
+    }
+  }
+}

src/user_pages/billDetail/index.tsx

@@ -0,0 +1,65 @@
+import React, { useEffect, useState } from "react";
+import { View, Text, Input, Button, Image } from "@tarojs/components";
+
+import { TransactionType, TransactionSubType } from "@/user_pages/wallet/index";
+import "./index.scss";
+
+enum FreezeActions {
+  Unfreeze = "unfreeze",
+  Freeze = "freeze",
+}
+
+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;
+}
+
+const BillDetail: React.FC = () => {
+  const [billDetail, setBillDetail] = useState<BillDetail | null>(null);
+  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>
+        </View>
+      </View>
+      <View className="detail-wrapper">
+        <View className="detail-item">
+          <Text>交易时间</Text>
+          <Text>2025-02-16 12:21:54</Text>
+        </View>
+        <View className="detail-item">
+          <Text>活动标题</Text>
+          <Text>女生轻松双打</Text>
+        </View>
+        <View className="detail-item">
+          <Text>现金余额</Text>
+          <Text>¥3890.00</Text>
+        </View>
+        <View className="detail-item">
+          <Text>交易单号</Text>
+          <View className="with-btn-box">
+            <Text>89172371293791273912</Text>
+            <Text className="btn">复制</Text>
+          </View>
+        </View>
+      </View>
+    </View>
+  );
+};
+
+export default BillDetail;