设置交易密码页面
This commit is contained in:
3
src/user_pages/setTransactionPassword/index.config.ts
Normal file
3
src/user_pages/setTransactionPassword/index.config.ts
Normal file
@@ -0,0 +1,3 @@
|
||||
export default definePageConfig({
|
||||
navigationBarTitleText: '设置交易密码',
|
||||
})
|
||||
60
src/user_pages/setTransactionPassword/index.scss
Normal file
60
src/user_pages/setTransactionPassword/index.scss
Normal 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
114
src/user_pages/setTransactionPassword/index.tsx
Normal 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;
|
||||
Reference in New Issue
Block a user