细节优化
This commit is contained in:
@@ -1,6 +1,6 @@
|
||||
.listContentWrapper {
|
||||
padding: 0 5px;
|
||||
background: #fafafa;
|
||||
// padding: 0 5px;
|
||||
// background: #fafafa;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 5px;
|
||||
|
||||
@@ -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;
|
||||
|
||||
@@ -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 {
|
||||
|
||||
@@ -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;
|
||||
}
|
||||
}
|
||||
|
||||
@@ -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;
|
||||
|
||||
// 用户信息区域
|
||||
|
||||
@@ -170,6 +170,12 @@ const MyselfPage: React.FC = () => {
|
||||
}
|
||||
};
|
||||
|
||||
const goPublish = () => {
|
||||
Taro.navigateTo({
|
||||
url: "/publish_pages/publishBall/index",
|
||||
});
|
||||
}
|
||||
|
||||
// 处理球局订单
|
||||
const handle_game_orders = () => {
|
||||
Taro.navigateTo({
|
||||
@@ -237,8 +243,7 @@ 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")}
|
||||
>
|
||||
@@ -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> */}
|
||||
|
||||
@@ -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 {
|
||||
|
||||
@@ -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}
|
||||
/>
|
||||
|
||||
@@ -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;
|
||||
|
||||
@@ -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>
|
||||
|
||||
@@ -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);
|
||||
}
|
||||
}
|
||||
}
|
||||
@@ -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>
|
||||
|
||||
@@ -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;
|
||||
|
||||
@@ -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>
|
||||
);
|
||||
};
|
||||
|
||||
|
||||
Reference in New Issue
Block a user