bimwe/mini-programs
2
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

设置交易密码页面

Browse Source
This commit is contained in:
Ultrame
2025-09-27 00:22:04 +08:00
parent ca0013b37c
commit a1be43e02b
9 changed files with 361 additions and 27 deletions
Download Patch File Download Diff File Expand all files Collapse all files

2
src/app.config.ts
View File

@@ -30,6 +30,8 @@ export default defineAppConfig({
"downloadBill/index", // 下载账单
"downloadBillRecords/index", // 下载账单记录
"billDetail/index", // 账单详情
"setTransactionPassword/index", // 设置交易密码
"validPhone/index", // 验证手机号
],
},
// {

85
src/user_pages/billDetail/index.tsx
View File

@@ -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>

3
src/user_pages/setTransactionPassword/index.config.ts Normal file
View File

@@ -0,0 +1,3 @@
export default definePageConfig({
navigationBarTitleText: '设置交易密码',
})

60
src/user_pages/setTransactionPassword/index.scss Normal file
View File

@@ -0,0 +1,60 @@
.set-transaction-password-page {
min-height: 100vh;
background-color: #f5f5f5;
padding: 20px;
.form-item {
height: 50px;
display: flex;
gap: 10px;
align-items: center;
border-bottom: 1px solid #0000000D;
font-size: 14px;
.form-label {
width: 56px;
text-align: right;
}
}
.tips {
font-family: PingFang SC;
font-weight: 400;
font-style: Regular;
font-size: 12px;
line-height: 18px;
letter-spacing: 0px;
vertical-align: middle;
color: #3C3C4366;
}
.btn {
height: 24px;
border: 1px solid rgba(0, 0, 0, 0.06);
display: flex;
align-items: center;
justify-content: center;
color: #fff;
background: #000;
box-shadow: 0 8px 64px 0 rgba(0, 0, 0, 0.1);
backdrop-filter: blur(16px);
font-feature-settings: "liga" off, "clig" off;
font-family: "PingFang SC";
font-size: 9.6px;
font-style: normal;
line-height: normal;
border-radius: 8px;
margin-right: 0;
}
.bottom-btn {
position: fixed;
bottom: 40px;
height: 54px;
width: calc(100vw - 40px);
margin: 0 auto;
border-radius: 16px;
font-size: 16px;
font-weight: 600;
}
}

114
src/user_pages/setTransactionPassword/index.tsx Normal file
View File

@@ -0,0 +1,114 @@
import React, { useState, useEffect } from "react";
import Taro, { useRouter } from '@tarojs/taro';
import { View, Text, Input, Button } from "@tarojs/components";
import "./index.scss";
import httpService from "@/services/httpService";
interface FormFields {
old_password?: string;
new_password: string;
confirm_password: string;
sms_code?: string;
}
const SetTransactionPassword: React.FC = () => {
const [handleType, setHandleType] = useState("set");
const router = useRouter();
const { type } = router.params;
useEffect(() => {
if (type) {
setHandleType(type);
}
}, [type]);
const [formData, setFormData] = useState<FormFields>({
old_password: "",
new_password: "",
confirm_password: "",
sms_code: "",
});
const handleInput = (e: any, field: string) => {
setFormData({ ...formData, [field]: e.detail.value });
};
const handleConfirm = async () => {
const { new_password, confirm_password } = formData;
if (new_password !== confirm_password) {
Taro.showToast({
title: "两次密码输入不一致",
icon: "none",
});
return;
}
if (handleType === "set") {
const { sms_code } = formData;
try {
await httpService.post("/wallet/set_payment_password", { password: new_password, sms_code });
Taro.showToast({
title: "设置交易密码成功",
icon: "success",
});
Taro.navigateBack();
} catch (error) {
Taro.showToast({
title: "设置交易密码失败",
icon: "none",
});
return;
}
} else if (handleType === "reset") {
const { old_password } = formData;
try {
await httpService.post("/wallet/change_payment_password", { old_password, new_password });
Taro.showToast({
title: "修改交易密码成功",
icon: "success",
});
Taro.navigateBack();
} catch (error) {
Taro.showToast({
title: "修改交易密码失败",
icon: "none",
});
return;
}
}
};
return (
<View className="set-transaction-password-page">
{
handleType === "reset" && (
<View className="form-item">
<Text className="form-label">旧密码</Text>
<Input placeholder="请输入旧密码" password type="number" maxlength={6} onInput={(e) => { handleInput(e, "old_password") }}></Input>
</View>
)
}
<View className="form-item">
<Text className="form-label">交易密码</Text>
<Input placeholder="请输入交易密码" password type="number" maxlength={6} onInput={(e) => { handleInput(e, "new_password") }}></Input>
</View>
<View className="form-item">
<Text className="form-label">重复密码</Text>
<Input placeholder="请再次输入交易密码" password type="number" maxlength={6} onInput={(e) => { handleInput(e, "confirm_password") }}></Input>
</View>
{
handleType === "set" && (
<View className="form-item">
<Text className="form-label">手机验证</Text>
<Input placeholder="请输入验证码" type="number" onInput={(e) => { handleInput(e, "sms_code") }}></Input>
<Button className="btn" >获取验证码</Button>
</View>
)
}
<Text className="tips">* 密码由6位数字组成</Text>
<Button className="btn bottom-btn" onClick={handleConfirm}>完成</Button>
</View>
);
};
export default SetTransactionPassword;

3
src/user_pages/validPhone/index.config.ts Normal file
View File

@@ -0,0 +1,3 @@
export default definePageConfig({
navigationBarTitleText: '验证手机号',
})

49
src/user_pages/validPhone/index.scss Normal file
View File

@@ -0,0 +1,49 @@
.set-transaction-password-page {
min-height: 100vh;
background-color: #f5f5f5;
padding: 20px;
.form-item {
height: 50px;
display: flex;
gap: 10px;
align-items: center;
border-bottom: 1px solid #0000000D;
font-size: 14px;
.form-label {
width: 56px;
text-align: right;
}
}
.btn {
height: 24px;
border: 1px solid rgba(0, 0, 0, 0.06);
display: flex;
align-items: center;
justify-content: center;
color: #fff;
background: #000;
box-shadow: 0 8px 64px 0 rgba(0, 0, 0, 0.1);
backdrop-filter: blur(16px);
font-feature-settings: "liga" off, "clig" off;
font-family: "PingFang SC";
font-size: 9.6px;
font-style: normal;
line-height: normal;
border-radius: 8px;
margin-right: 0;
}
.bottom-btn {
position: fixed;
bottom: 40px;
height: 54px;
width: calc(100vw - 40px);
margin: 0 auto;
border-radius: 16px;
font-size: 16px;
font-weight: 600;
}
}

44
src/user_pages/validPhone/index.tsx Normal file
View File

@@ -0,0 +1,44 @@
import React, { useState, useEffect } from "react";
import Taro from '@tarojs/taro';
import { View, Text, Input, Button } from "@tarojs/components";
import "./index.scss";
import httpService from "@/services/httpService";
interface FormFields {
phone?: string;
sms_code?: string;
}
const ValidPhone: React.FC = () => {
const [formData, setFormData] = useState<FormFields>({
phone: "",
sms_code: "",
});
const handleInput = (e: any, field: string) => {
setFormData({ ...formData, [field]: e.detail.value });
};
const handleConfirm = async () => {
// TODO: 校验验证码
Taro.navigateTo({ url: "/user_pages/setTransactionPassword/index?type=find" });
};
return (
<View className="set-transaction-password-page">
<View className="form-item">
<Text className="form-label">手机号</Text>
<Input defaultValue={"15708469466"} type="number" disabled></Input>
</View>
<View className="form-item">
<Text className="form-label">验证码</Text>
<Input placeholder="请输入验证码" type="number" onInput={(e) => { handleInput(e, "sms_code") }}></Input>
<Button className="btn" >获取验证码</Button>
</View>
<Button className="btn bottom-btn" onClick={handleConfirm}>提交</Button>
</View>
);
};
export default ValidPhone;

26
src/user_pages/wallet/index.tsx
View File

@@ -103,6 +103,7 @@ const WalletPage: React.FC = () => {
const [show_withdraw_popup, set_show_withdraw_popup] = useState(false);
const [withdraw_amount, set_withdraw_amount] = useState("");
const [submitting, set_submitting] = useState(false);
const [password_status, set_password_status] = useState(false);
// 交易记录状态
const [transactions, set_transactions] = useState<Transaction[]>([]);
@@ -125,8 +126,18 @@ const WalletPage: React.FC = () => {
useDidShow(() => {
load_wallet_data();
load_transactions();
check_password_status();
});
const check_password_status = async () => {
try {
const res = await httpService.post("/wallet/check_password_status");
set_password_status(res.data.is_password_set);
} catch (e) {
console.error("检查交易密码状态失败:", e);
}
}
// 加载钱包数据
const load_wallet_data = async () => {
try {
@@ -216,8 +227,18 @@ const WalletPage: React.FC = () => {
}
};
const navigateToSetTransactionPassword = (type: "set" | "reset") => {
Taro.navigateTo({
url: `/user_pages/setTransactionPassword/index?type=${type}`,
});
};
// 处理提现
const handle_withdraw = () => {
if (!password_status) {
navigateToSetTransactionPassword("set");
return;
}
if (wallet_info.balance <= 0) {
Taro.showToast({
title: "余额不足",
@@ -357,7 +378,7 @@ const WalletPage: React.FC = () => {
{/* 头部信息 */}
<View className="card_header">
<Text className="header_title">我的现金</Text>
<Text className="modify_password">修改交易密码</Text>
<Text className="modify_password" onClick={() => navigateToSetTransactionPassword("reset")}>修改交易密码</Text>
</View>
{/* 余额显示 */}
@@ -420,7 +441,8 @@ const WalletPage: React.FC = () => {
/>
<Text className="function_text">下载账单</Text>
</View>
<View className="function_item">
{/* TODO 客服中心 */}
<View className="function_item" onClick={() => Taro.navigateTo({ url: "/user_pages/validPhone/index" })}>
<Image
className="function_icon"
src={require("@/static/wallet/custom-service.svg")}