细节优化

This commit is contained in:
2025-10-12 23:03:51 +08:00
parent 09c77a809b
commit 6a5191df21
14 changed files with 143 additions and 54 deletions

View File

@@ -1,6 +1,6 @@
.listContentWrapper {
padding: 0 5px;
background: #fafafa;
// padding: 0 5px;
// background: #fafafa;
display: flex;
flex-direction: column;
gap: 5px;

View File

@@ -1,7 +1,9 @@
.bill-detail-page {
min-height: 100vh;
height: 100vh;
background-color: #f5f5f5;
padding: 5px;
box-sizing: border-box;
overflow: hidden;
.title-text-box {
height: 118px;
display: flex;

View File

@@ -7,6 +7,15 @@
line-height: 24px;
letter-spacing: 0px;
padding: 20px;
height: 100vh;
overflow-y: auto;
&::-webkit-scrollbar {
display: none;
width: 0;
height: 0;
color: transparent;
}
.records-container {

View File

@@ -1,10 +1,18 @@
// 编辑资料页面样式
.edit_profile_page {
min-height: 100vh;
height: 100vh;
background: radial-gradient(circle at 50% 0%, rgba(238, 255, 220, 1) 0%, rgba(255, 255, 255, 1) 37%);
position: relative;
// overflow: hidden;
box-sizing: border-box;
overflow-y: auto;
&::-webkit-scrollbar {
display: none;
width: 0;
height: 0;
color: transparent;
}
}
.custom-navbar {
@@ -20,7 +28,6 @@
position: sticky;
top: 0;
z-index: 100;
overflow: hidden;
background-color: rgb(238, 255, 220);
}
@@ -285,10 +292,12 @@
flex: 1;
text-align: right;
background-color: unset;
&.placeholer {
font-weight: 400;
color: rgba(60, 60, 67, 0.3);
}
&:after {
border: none;
}
@@ -305,10 +314,10 @@
}
}
.divider{
.divider {
height: 1px;
background-color: rgba(0, 0, 0, 0.06) ;
margin-left:35px;
background-color: rgba(0, 0, 0, 0.06);
margin-left: 35px;
box-sizing: border-box;
}
}

View File

@@ -2,21 +2,28 @@
// 个人页面样式
.myself_page {
min-height: 100vh;
height: 100vh;
background: radial-gradient(circle at 50% 0,
/* 光晕圆心在顶部中间 */
rgba(173, 216, 230, 0.9) 0px,
/* 中间更深的浅蓝 */
rgba(173, 216, 230, 0.5) 200px,
/* 100px 处开始淡化 */
rgba(255, 255, 255, 1) 300px,
#fafafa 300px,
/* 到 200px 变成白色 */
#ffffff 100%
#fafafa 100%
/* 200px 以下全白 */
);
position: relative;
overflow: hidden;
overflow-y: auto;
box-sizing: border-box;
&::-webkit-scrollbar {
display: none;
width: 0;
height: 0;
color: transparent;
}
}
// 主要内容区域
@@ -26,7 +33,6 @@
flex: 1;
margin-top: 0;
box-sizing: border-box;
overflow-y: auto;
padding: 0px 15px 15px 15px;
// 用户信息区域

View File

@@ -170,6 +170,12 @@ const MyselfPage: React.FC = () => {
}
};
const goPublish = () => {
Taro.navigateTo({
url: "/publish_pages/publishBall/index",
});
}
// 处理球局订单
const handle_game_orders = () => {
Taro.navigateTo({
@@ -237,9 +243,8 @@ const MyselfPage: React.FC = () => {
<Text className="tab_text"></Text>
</View>
<View
className={`tab_item ${
active_tab === "participated" ? "active" : ""
}`}
className={`tab_item ${active_tab === "participated" ? "active" : ""
}`}
onClick={() => setActiveTab("participated")}
>
<Text className="tab_text"></Text>
@@ -259,8 +264,8 @@ const MyselfPage: React.FC = () => {
emptyText="暂未发布球局"
btnText="去发布"
btnImg="ICON_ADD"
reload={load_game_data}
loadMoreMatches={() => {}}
reload={goPublish}
loadMoreMatches={() => { }}
/>
</ScrollView>
</View>
@@ -283,7 +288,7 @@ const MyselfPage: React.FC = () => {
loading={loading}
error={null}
errorImg="ICON_LIST_EMPTY"
loadMoreMatches={() => {}}
loadMoreMatches={() => { }}
/>
</ScrollView>
{/* </View> */}

View File

@@ -1,6 +1,14 @@
.listSearchContainer {
padding: 0 15px;
padding-top: 16px;
height: 100vh;
box-sizing: border-box;
&::-webkit-scrollbar {
display: none;
width: 0;
height: 0;
color: transparent;
}
.icon16 {
width: 16px;
@@ -8,12 +16,11 @@
}
.topSearchWrapper {
position: fixed;
top: 0;
left: 0;
position: sticky;
top: -1px;
background-color: #fff;
width: 100vw;
padding: 5px 15px;
width: calc(100vw - 28px);
padding: 5px 0;
box-sizing: border-box;
}
@@ -36,7 +43,7 @@
}
.historySearch {
padding-top: 50px;
// padding-top: 50px;
}
.searchRight {
@@ -135,7 +142,15 @@
}
.transaction_list {
padding: 40px 0 70px;
padding: 0 0 80px;
// overflow-y: auto;
// &::-webkit-scrollbar {
// display: none;
// width: 0;
// height: 0;
// color: transparent;
// }
.loading_state,
.empty_state {

View File

@@ -46,11 +46,11 @@ const QueryTransactions = () => {
getSearchHistory();
}, []);
useEffect(() => {
if (ref?.current) {
ref.current.focus();
}
}, [ref.current]);
// useEffect(() => {
// if (ref?.current) {
// ref.current.focus();
// }
// }, [ref.current]);
useReachBottom(() => {
if (load_transactions_params.page >= totalpages) return;
@@ -99,7 +99,8 @@ const QueryTransactions = () => {
/**
* @description 点击清空输入内容
*/
const handleClear = () => {
const handleClear = (e) => {
e.stopPropagation();
setKeyword("");
setTransactions([]);
set_load_transactions_params((prev) => {
@@ -247,7 +248,7 @@ const QueryTransactions = () => {
defaultValue={keyword}
onChange={handleChange}
onClear={handleClear}
autoFocus
onBlur={() => {setKeyword(load_transactions_params.keyword)}}
clearable={false}
ref={ref}
/>

View File

@@ -1,7 +1,9 @@
.set-transaction-password-page {
min-height: 100vh;
height: 100vh;
background-color: #f5f5f5;
padding: 20px;
box-sizing: border-box;
overflow: hidden;
.form-item {
height: 50px;
@@ -29,6 +31,7 @@
}
.btn {
width: 78px;
height: 24px;
border: 1px solid rgba(0, 0, 0, 0.06);
display: flex;

View File

@@ -16,6 +16,8 @@ interface FormFields {
const SetTransactionPassword: React.FC = () => {
// 使用全局键盘状态
const { keyboardHeight, isKeyboardVisible, addListener, initializeKeyboardListener } = useKeyboardHeight()
const [smsCodeSended, setSmsCodeSended] = useState(false);
const [smsCodeText, setSmsCodeText] = useState('获取验证码');
// 使用全局键盘状态监听
useEffect(() => {
// 初始化全局键盘监听器
@@ -86,9 +88,22 @@ const SetTransactionPassword: React.FC = () => {
type: "set_password",
});
Taro.showToast({
title: "验证码发送成功",
title: "验证码发送",
icon: "none",
});
let time = 60;
setSmsCodeText(`${time}秒后重发`);
const timer = setInterval(() => {
if (time > 0) {
time--;
setSmsCodeText(`${time}秒后重发`);
} else {
setSmsCodeText('获取验证码');
setSmsCodeSended(false);
clearInterval(timer);
}
}, 1000);
setSmsCodeSended(true);
} catch (error) {
Taro.showToast({
title: "验证码发送失败",
@@ -142,9 +157,7 @@ const SetTransactionPassword: React.FC = () => {
handleInput(e, "sms_code");
}}
></Input>
<Button className="btn" onClick={getSMSCode}>
</Button>
<Button className={`btn ${smsCodeSended ? 'disabled' : ''}`} disabled={smsCodeSended} onClick={getSMSCode}>{smsCodeText}</Button>
</View>
)}
<Text className="tips">* 6</Text>

View File

@@ -1,7 +1,9 @@
.set-transaction-password-page {
min-height: 100vh;
background-color: #f5f5f5;
padding: 20px;
box-sizing: border-box;
height: 100vh;
overflow-y: hidden;
.form-item {
height: 50px;
@@ -18,6 +20,7 @@
}
.btn {
width: 78px;
height: 24px;
border: 1px solid rgba(0, 0, 0, 0.06);
display: flex;
@@ -34,6 +37,10 @@
line-height: normal;
border-radius: 8px;
margin-right: 0;
&.disabled {
color: rgba(255, 255, 255, 0.30);
}
}
.bottom-btn {
@@ -45,9 +52,5 @@
border-radius: 16px;
font-size: 16px;
font-weight: 600;
&.disabled {
color: rgba(255, 255, 255, 0.30);
}
}
}

View File

@@ -15,6 +15,8 @@ interface FormFields {
const ValidPhone: React.FC = () => {
// 使用全局键盘状态
const { keyboardHeight, isKeyboardVisible, addListener, initializeKeyboardListener } = useKeyboardHeight()
const [smsCodeSended, setSmsCodeSended] = useState(false);
const [smsCodeText, setSmsCodeText] = useState('获取验证码');
// 使用全局键盘状态监听
useEffect(() => {
// 初始化全局键盘监听器
@@ -69,6 +71,19 @@ const ValidPhone: React.FC = () => {
try {
await httpService.post("/wallet/send_reset_password_sms", { phone });
Taro.showToast({ title: "验证码已发送", icon: "none" });
let time = 60;
setSmsCodeText(`${time}秒后重发`);
const timer = setInterval(() => {
if (time > 0) {
time--;
setSmsCodeText(`${time}秒后重发`);
} else {
setSmsCodeText('获取验证码');
setSmsCodeSended(false);
clearInterval(timer);
}
}, 1000);
setSmsCodeSended(true);
} catch (error) {
console.log(error);
Taro.showToast({ title: "获取验证码失败", icon: "none" });
@@ -84,7 +99,7 @@ const ValidPhone: React.FC = () => {
<View className="form-item">
<Text className="form-label"></Text>
<Input placeholder="请输入验证码" type="number" onInput={(e) => { handleInput(e, "sms_code") }}></Input>
<Button className="btn" onClick={getSMSCode}></Button>
<Button className={`btn ${smsCodeSended ? 'disabled' : ''}`} disabled={smsCodeSended} onClick={getSMSCode}>{smsCodeText}</Button>
</View>
<Button className={`btn bottom-btn ${formData.sms_code === "" ? 'disabled' : ''}`} disabled={formData.sms_code === ""} onClick={handleConfirm} style={{ bottom: isKeyboardVisible ? `${keyboardHeight + 20}px` : undefined }}></Button>
</View>

View File

@@ -1,11 +1,16 @@
// @use '../../scss/common.scss' as *;
.wallet_page {
min-height: 100vh;
background-color: #f5f5f5;
padding: 5px;
padding: 0 5px 5px;
box-sizing: border-box;
&::-webkit-scrollbar {
display: none;
width: 0;
height: 0;
}
.wallet_main_card {
background: #000;
border-radius: 20px;
@@ -155,7 +160,7 @@
padding: 12px 20px;
border-bottom: 0.5px solid rgba(120, 120, 128, 0.12);
position: sticky;
top: 0;
top: -1px;
background-color: #fff;
.history_title {
@@ -363,6 +368,7 @@
.form_section {
.form_item {
margin-bottom: 20px;
.form_label {
display: inline-block;
font-family: PingFang SC;
@@ -376,11 +382,13 @@
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;

View File

@@ -1,5 +1,5 @@
import React, { useEffect, useState } from "react";
import { View, Text, Input, Button, Image } from "@tarojs/components";
import { View, Text, Input, Button, Image, ScrollView } from "@tarojs/components";
import Taro, { useDidShow } from "@tarojs/taro";
import "./index.scss";
import { CommonPopup } from "@/components";
@@ -430,7 +430,7 @@ const WalletPage: React.FC = () => {
};
return (
<View className="wallet_page">
<ScrollView className="wallet_page" scrollY enhanced showScrollbar={false}>
{/* 钱包主卡片 */}
<View className="wallet_main_card">
{/* 头部信息 */}
@@ -700,7 +700,7 @@ const WalletPage: React.FC = () => {
</View>
</View>
</CommonPopup>
</View>
</ScrollView>
);
};