开发钱包相关页面，调试提现接口
This commit is contained in:
@@ -132,3 +132,39 @@
|
||||
}
|
||||
}
|
||||
}
|
||||
// 过滤弹窗
|
||||
.filter_popup {
|
||||
padding: 20px;
|
||||
|
||||
.popup_content {
|
||||
.form_section {
|
||||
.form_item {
|
||||
margin-bottom: 20px;
|
||||
.form_label {
|
||||
display: inline-block;
|
||||
font-family: PingFang SC;
|
||||
font-weight: 600;
|
||||
font-style: Semibold;
|
||||
font-size: 16px;
|
||||
margin-bottom: 20px;
|
||||
}
|
||||
|
||||
.options_wrapper {
|
||||
display: grid;
|
||||
grid-template-columns: repeat(3, 1fr);
|
||||
gap: 8px;
|
||||
.option_item {
|
||||
background-color: #0000000D;
|
||||
text-align: center;
|
||||
padding: 8px;
|
||||
border-radius: 4px;
|
||||
&.active {
|
||||
background-color: #000000;
|
||||
color: #fff;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
@@ -1,20 +1,48 @@
|
||||
import React, { useState, useEffect } from "react";
|
||||
import { View, Text, Button } from "@tarojs/components";
|
||||
import { View, Text, Button, Input } from "@tarojs/components";
|
||||
import Taro, { useDidShow } from "@tarojs/taro";
|
||||
import dayjs from "dayjs";
|
||||
|
||||
import "./index.scss";
|
||||
import { DialogCalendarCard } from "@/components/index";
|
||||
// import { CalendarUI } from "@/components";
|
||||
import { CommonPopup } from "@/components";
|
||||
|
||||
export enum TransactionSubType {
|
||||
All = "",
|
||||
GameActivity = "game_activity",
|
||||
Withdrawal = "withdrawal",
|
||||
Refund = "refund",
|
||||
Compensation = "compensation",
|
||||
}
|
||||
export enum TransactionType {
|
||||
All = "",
|
||||
Income = "income",
|
||||
Expense = "expense",
|
||||
}
|
||||
interface Option<T> {
|
||||
label: string;
|
||||
value: T;
|
||||
}
|
||||
interface TransactionLoadParams {
|
||||
page: number;
|
||||
limit: number;
|
||||
type: TransactionType;
|
||||
transaction_sub_type: TransactionSubType;
|
||||
keyword?: string;
|
||||
date?: string;
|
||||
}
|
||||
const DownloadBill: React.FC = () => {
|
||||
const [dateRange, setDateRange] = useState({ start: "", end: "" });
|
||||
const [dateType, setDateType] = useState("week");
|
||||
const [visible, setVisible] = useState(false);
|
||||
const [show_download_popup, set_show_download_popup] = useState(false);
|
||||
const [isFocus, setIsFocus] = useState(false);
|
||||
const [password, setPassword] = useState<string[]>(new Array(6).fill(""));
|
||||
useEffect(() => {
|
||||
culculateDateRange(dateType);
|
||||
}, []);
|
||||
|
||||
const [showFilterPopup, setShowFilterPopup] = useState(false);
|
||||
const culculateDateRange = (dateType: string) => {
|
||||
const today = new Date();
|
||||
const year = today.getFullYear();
|
||||
@@ -59,7 +87,6 @@ const DownloadBill: React.FC = () => {
|
||||
case "custom":
|
||||
setDateType("custom");
|
||||
setDateRange({ start: "", end: "" });
|
||||
setVisible(true);
|
||||
break;
|
||||
}
|
||||
};
|
||||
@@ -74,6 +101,69 @@ const DownloadBill: React.FC = () => {
|
||||
end: dayjs(end).format("YYYY-MM-DD"),
|
||||
});
|
||||
};
|
||||
const handlePasswordInput = (e: any) => {
|
||||
const value = e.detail.value;
|
||||
const [one = "", two = "", three = "", four = "", five = "", six = ""] = value.split("");
|
||||
setPassword([one, two, three, four, five, six]);
|
||||
if (value.length === 6) {
|
||||
// const timer = setTimeout(() => {
|
||||
// // TODO 校验密码
|
||||
// if (false) {
|
||||
// set_show_download_popup(false);
|
||||
// Taro.showModal({
|
||||
// content: "支付密码错误，请重试",
|
||||
// cancelText: "忘记密码",
|
||||
// confirmText: "重试",
|
||||
// cancelColor: "#000",
|
||||
// confirmColor: "#fff",
|
||||
// }).then((res) => {
|
||||
// if (res.confirm) {
|
||||
// set_show_download_popup(true);
|
||||
// } else if (res.cancel) {
|
||||
// Taro.navigateTo({
|
||||
// url: "/user_pages/validPhone/index"
|
||||
// });
|
||||
// }
|
||||
// }).finally(() => {
|
||||
// clearTimeout(timer);
|
||||
// });
|
||||
// } else {
|
||||
// // TODO 下载账单
|
||||
// }
|
||||
// }, 100);
|
||||
}
|
||||
}
|
||||
const transaction_type_options: Option<TransactionSubType>[] = [
|
||||
{
|
||||
label: "全部",
|
||||
value: TransactionSubType.All,
|
||||
},
|
||||
{
|
||||
label: "组织活动",
|
||||
value: TransactionSubType.GameActivity,
|
||||
},
|
||||
{
|
||||
label: "提现",
|
||||
value: TransactionSubType.Withdrawal,
|
||||
},
|
||||
{
|
||||
label: "退款",
|
||||
value: TransactionSubType.Refund,
|
||||
},
|
||||
{
|
||||
label: "企业赔付",
|
||||
value: TransactionSubType.Compensation,
|
||||
},
|
||||
];
|
||||
const [load_transactions_params, set_load_transactions_params] =
|
||||
useState<TransactionLoadParams>({
|
||||
page: 1,
|
||||
limit: 20,
|
||||
type: TransactionType.All,
|
||||
transaction_sub_type: TransactionSubType.All,
|
||||
keyword: "",
|
||||
date: "",
|
||||
});
|
||||
return (
|
||||
<View className="download_bill_page">
|
||||
<View className="hint_content">
|
||||
@@ -81,13 +171,13 @@ const DownloadBill: React.FC = () => {
|
||||
<Text className="button_text">示例文件</Text>
|
||||
</View>
|
||||
<View className="form_container">
|
||||
<View className="form_item">
|
||||
{/* <View className="form_item">
|
||||
<Text className="title_text">接收方式</Text>
|
||||
<View className="value_content arrow">
|
||||
<Text>小程序消息</Text>
|
||||
</View>
|
||||
</View>
|
||||
<View className="form_item">
|
||||
</View> */}
|
||||
<View className="form_item" onClick={() => { setShowFilterPopup(true) }}>
|
||||
<Text className="title_text">交易类型</Text>
|
||||
<View className="value_content arrow">
|
||||
<Text>全部</Text>
|
||||
@@ -105,9 +195,8 @@ const DownloadBill: React.FC = () => {
|
||||
近一周
|
||||
</View>
|
||||
<View
|
||||
className={`option_button ${
|
||||
dateType === "month" ? "active" : ""
|
||||
}`}
|
||||
className={`option_button ${dateType === "month" ? "active" : ""
|
||||
}`}
|
||||
onClick={() => {
|
||||
selectDateRange("month");
|
||||
}}
|
||||
@@ -115,9 +204,8 @@ const DownloadBill: React.FC = () => {
|
||||
近一月
|
||||
</View>
|
||||
<View
|
||||
className={`option_button ${
|
||||
dateType === "custom" ? "active" : ""
|
||||
}`}
|
||||
className={`option_button ${dateType === "custom" ? "active" : ""
|
||||
}`}
|
||||
onClick={() => {
|
||||
selectDateRange("custom");
|
||||
}}
|
||||
@@ -126,11 +214,21 @@ const DownloadBill: React.FC = () => {
|
||||
</View>
|
||||
</View>
|
||||
</View>
|
||||
{dateRange.start && dateRange.end && (
|
||||
{dateRange.start && dateRange.end && dateType !== "custom" && (
|
||||
<View className="time_box">
|
||||
<Text>{dateRange.start}</Text> 至 <Text>{dateRange.end}</Text>
|
||||
</View>
|
||||
)}
|
||||
{
|
||||
dateType === "custom" && (
|
||||
<View className="form_item" onClick={() => { setVisible(true); }}>
|
||||
<Text className="title_text">时间范围</Text>
|
||||
<View className="value_content arrow">
|
||||
<Text>{dateRange.start && dateRange.end ? `${dateRange.start} 至 ${dateRange.end}` : "请选择账单时间"}</Text>
|
||||
</View>
|
||||
</View>
|
||||
)
|
||||
}
|
||||
</View>
|
||||
<View className="button_container">
|
||||
<Text
|
||||
@@ -152,6 +250,71 @@ const DownloadBill: React.FC = () => {
|
||||
onClose={() => setVisible(false)}
|
||||
/>
|
||||
)}
|
||||
|
||||
{/* 下载账单输入密码弹窗 */}
|
||||
<CommonPopup
|
||||
visible={show_download_popup}
|
||||
onClose={() => set_show_download_popup(false)}
|
||||
title="提现"
|
||||
className="withdraw_popup"
|
||||
hideFooter={true}
|
||||
>
|
||||
<View className="popup_content">
|
||||
<View className="popup_text">{`支付账单流水文件（文件名）.xlsx`}</View>
|
||||
<View className="popup_text">{`文件大小：7KB`}</View>
|
||||
<View className="popup_text">{`请输入交易密码`}</View>
|
||||
<View className="password_container">
|
||||
{
|
||||
password.map((item, index) => (
|
||||
<View key={index} className="password_item">
|
||||
<Text className="password_text">{item}</Text>
|
||||
</View>
|
||||
))
|
||||
}
|
||||
</View>
|
||||
<Input focus={isFocus} type="number" style={{ width: "0", height: "0", opacity: "0" }} value={password.filter(item => item !== "").join("")} maxlength={6} onInput={handlePasswordInput} />
|
||||
</View>
|
||||
</CommonPopup>
|
||||
|
||||
{/* 筛选账单弹窗 */}
|
||||
<CommonPopup
|
||||
visible={showFilterPopup}
|
||||
onClose={() => setShowFilterPopup(false)}
|
||||
onConfirm={() => { }}
|
||||
title="选择筛选项"
|
||||
className="filter_popup"
|
||||
>
|
||||
<View className="popup_content">
|
||||
<View className="form_section">
|
||||
<View className="form_item">
|
||||
<Text className="form_label">交易类型</Text>
|
||||
<View className="options_wrapper">
|
||||
{transaction_type_options.map(
|
||||
(option: Option<TransactionSubType>) => (
|
||||
<View
|
||||
className={
|
||||
load_transactions_params.transaction_sub_type ===
|
||||
option.value
|
||||
? "option_item active"
|
||||
: "option_item"
|
||||
}
|
||||
key={option.value}
|
||||
onClick={() => {
|
||||
set_load_transactions_params({
|
||||
...load_transactions_params,
|
||||
transaction_sub_type: option.value,
|
||||
});
|
||||
}}
|
||||
>
|
||||
{option.label}
|
||||
</View>
|
||||
)
|
||||
)}
|
||||
</View>
|
||||
</View>
|
||||
</View>
|
||||
</View>
|
||||
</CommonPopup>
|
||||
</View>
|
||||
);
|
||||
};
|
||||
|
||||
Reference in New Issue
Block a user