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

UI优化

Browse Source
This commit is contained in:
Ultrame
2025-10-16 21:16:57 +08:00
parent 363630cdb5
commit 9e2fa335aa
13 changed files with 172 additions and 57 deletions
Download Patch File Download Diff File Expand all files Collapse all files

6
src/components/CommonPopup/CommonPopup.tsx
View File

@@ -118,6 +118,12 @@ const CommonPopup: React.FC<CommonPopupProps> = ({
{showHeader && (
<View className={styles['common-popup__header']}>
{typeof title === 'string' ? <Text className={styles['common-popup__title']}>{title}</Text> : title}
<View className={styles["close_button"]} onClick={onClose}>
<View className={styles["close_icon"]}>
<View className={styles["close_line"]}></View>
<View className={styles["close_line"]}></View>
</View>
</View>
</View>
)}

65
src/components/CommonPopup/index.module.scss
View File

@@ -3,9 +3,11 @@
.common-popup {
position: fixed;
z-index: 9999 !important;
.common-popup__drag-handle-container {
position: position;
}
.common-popup__drag-handle {
position: absolute;
top: 6px;
@@ -22,22 +24,71 @@
background-color: #9ca3af;
}
}
padding: 0;
box-sizing: border-box;
max-height: calc(100vh - 10px);
display: flex;
flex-direction: column;
background-color: theme.$page-background-color;
// .common-popup__header {
// padding: 12px 16px;
// font-size: 16px;
// font-weight: 600;
// color: #1f2329;
// border-bottom: 1px solid #f0f1f5;
// }
.common-popup__header {
padding: 12px 16px;
font-size: 16px;
font-weight: 600;
color: #1f2329;
border-bottom: 1px solid #f0f1f5;
}
display: flex;
align-items: center;
justify-content: space-between;
padding: 16px 20px;
border-bottom: 1px solid rgba(0, 0, 0, 0.06);
.common-popup__title {
display: inline-block;
font-family: 'PingFang SC';
font-weight: 600;
font-size: 22px;
line-height: 1.27em;
color: #000000;
text-align: center;
}
.close_button {
width: 40px;
height: 40px;
display: flex;
align-items: center;
justify-content: center;
background: #FFFFFF;
border: 1px solid rgba(0, 0, 0, 0.06);
border-radius: 50%;
cursor: pointer;
box-shadow: 0px 4px 36px 0px rgba(0, 0, 0, 0.06);
.close_icon {
position: relative;
width: 24px;
height: 24px;
.close_line {
position: absolute;
top: 50%;
left: 50%;
width: 17px;
height: 3px;
border-radius: 3px;
background: #000000;
transform: translate(-50%, -50%) rotate(45deg);
&:nth-child(2) {
transform: translate(-50%, -50%) rotate(-45deg);
}
}
}
}
}
.common-popup__body {

16
src/components/EditModal/EditModal.scss
View File

@@ -34,7 +34,7 @@
display: flex;
align-items: center;
justify-content: space-between;
padding: 16px;
padding: 16px 20px;
border-bottom: 1px solid rgba(0, 0, 0, 0.06);
.modal_title {
@@ -43,7 +43,6 @@
font-size: 22px;
line-height: 1.27em;
color: #000000;
flex: 1;
text-align: center;
}
@@ -68,8 +67,9 @@
position: absolute;
top: 50%;
left: 50%;
width: 10px;
height: 2px;
width: 17px;
height: 3px;
border-radius: 3px;
background: #000000;
transform: translate(-50%, -50%) rotate(45deg);
@@ -176,12 +176,18 @@
box-shadow: 0px 8px 64px 0px rgba(0, 0, 0, 0.1);
backdrop-filter: blur(32px);
&.disabled {
.save_text {
color: rgba(255, 255, 255, 0.3) !important;
}
}
.save_text {
font-family: 'PingFang SC';
font-weight: 600;
font-size: 16px;
line-height: 1.4em;
color: rgba(255, 255, 255, 0.3);
color: #fff
}
&:active {

7
src/components/EditModal/index.tsx
View File

@@ -49,6 +49,8 @@ const EditModal: React.FC<EditModalProps> = ({
useEffect(() => {
if (visible) {
setValue(initialValue);
const valid = initialValue.length >= 2 && initialValue.length <= maxLength;
setIsValid(valid);
}
}, [visible, initialValue]);
@@ -70,7 +72,6 @@ const EditModal: React.FC<EditModalProps> = ({
});
return;
}
onSave(value);
};
@@ -85,7 +86,7 @@ const EditModal: React.FC<EditModalProps> = ({
return (
<View className="edit_modal_overlay">
<View className="edit_modal_container" style={{ paddingBottom: isKeyboardVisible ? (type === 'nickname' ? `${keyboardHeight + 60}px` : `${keyboardHeight }px`) : undefined }}>
<View className="edit_modal_container" style={{ paddingBottom: isKeyboardVisible ? (type === 'nickname' ? `${keyboardHeight + 60}px` : `${keyboardHeight}px`) : undefined }}>
{/* 标题栏 */}
<View className="modal_header">
<Text className="modal_title">{title}</Text>
@@ -144,7 +145,7 @@ const EditModal: React.FC<EditModalProps> = ({
{/* 底部按钮 */}
<View className="modal_footer">
<View className="save_button" onClick={handle_save}>
<View className={`save_button ${!isValid ? "disabled" : ""}`} onClick={handle_save}>
<Text className="save_text">保存</Text>
</View>
</View>

12
src/components/Picker/PopupPicker.tsx
View File

@@ -17,6 +17,9 @@ interface PickerOption {
}
interface PickerProps {
title?: string;
showHeader?: boolean;
confirmText?: string;
visible: boolean;
setvisible: (visible: boolean) => void;
options?: PickerOption[][] | PickerOption[];
@@ -29,6 +32,9 @@ interface PickerProps {
}
const PopupPicker = ({
confirmText,
title,
showHeader,
visible,
setvisible,
value = [],
@@ -99,11 +105,11 @@ const PopupPicker = ({
<CommonPopup
visible={visible}
onClose={dialogClose}
showHeader={false}
title={null}
showHeader={showHeader || false}
title={title || null}
hideFooter={false}
cancelText="取消"
confirmText="完成"
confirmText={confirmText || "完成"}
onConfirm={handleConfirm}
position="bottom"
round

60
src/components/UserInfo/index.tsx
View File

@@ -1,10 +1,10 @@
import React, { useState } from "react";
import React, { useState, useEffect } from "react";
import Taro from "@tarojs/taro";
import { View, Text, Image, Button } from "@tarojs/components";
import "./index.scss";
import { EditModal } from "@/components";
import { UserService } from "@/services/userService";
import { UserService, PickerOption } from "@/services/userService";
import { PopupPicker } from "@/components/Picker/index";
// 用户信息接口
@@ -76,6 +76,34 @@ export const UserInfoCard: React.FC<UserInfoCardProps> = ({
// 表单状态
const [form_data, setFormData] = useState<UserInfo>({ ...user_info });
// 职业数据
const [professions, setProfessions] = useState<PickerOption[]>([]);
// 城市数据
const [cities, setCities] = useState<PickerOption[]>([]);
// 页面加载时初始化数据
useEffect(() => {
getProfessions();
getCities();
}, []);
const getProfessions = async () => {
try {
const res = await UserService.getProfessions();
setProfessions(res);
} catch (e) {
console.log("获取职业失败：", e);
}
};
const getCities = async () => {
try {
const res = await UserService.getCities();
setCities(res);
} catch (e) {
console.log("获取职业失败：", e);
}
};
// 处理编辑弹窗
const handle_open_edit_modal = (field: string) => {
if (field === "gender") {
@@ -416,6 +444,8 @@ export const UserInfoCard: React.FC<UserInfoCardProps> = ({
{/* 性别选择弹窗 */}
{gender_picker_visible && (
<PopupPicker
showHeader={true}
title="选择性别"
options={[
[
{ text: "男", value: "0" },
@@ -432,14 +462,9 @@ export const UserInfoCard: React.FC<UserInfoCardProps> = ({
{/* 地区选择弹窗 */}
{location_picker_visible && (
<PopupPicker
options={[
[{ text: "中国", value: "中国" }],
[{ text: "上海", value: "上海" }],
[
{ text: "浦东新区", value: "浦东新区" },
{ text: "静安区", value: "静安区" },
],
]}
showHeader={true}
title="选择地区"
options={cities}
visible={location_picker_visible}
setvisible={setLocationPickerVisible}
value={[form_data.country, form_data.province, form_data.city]}
@@ -449,6 +474,8 @@ export const UserInfoCard: React.FC<UserInfoCardProps> = ({
{/* NTRP水平选择弹窗 */}
{ntrp_picker_visible && (
<PopupPicker
showHeader={true}
title="选择 NTRP 自评水平"
options={[
[
{ text: "1.5", value: "1.5" },
@@ -471,13 +498,9 @@ export const UserInfoCard: React.FC<UserInfoCardProps> = ({
{/* 职业选择弹窗 */}
{occupation_picker_visible && (
<PopupPicker
options={[
[{ text: "时尚", value: "时尚" }],
[
{ text: "美妆博主", value: "美妆博主" },
{ text: "设计师", value: "设计师" },
],
]}
showHeader={true}
title="选择职业"
options={professions}
visible={occupation_picker_visible}
setvisible={setOccupationPickerVisible}
value={[...form_data.occupation.split(" ")]}
@@ -621,8 +644,7 @@ export const GameTabs: React.FC<GameTabsProps> = ({
<Text className="tab_text">{hosted_text}</Text>
</View>
<View
className={`tab_item ${
active_tab === "participated" ? "active" : ""
className={`tab_item ${active_tab === "participated" ? "active" : ""
}`}
onClick={() => on_tab_change("participated")}
>

4
src/user_pages/downloadBill/index.scss
View File

@@ -144,9 +144,9 @@
// 过滤弹窗
.filter_popup {
padding: 20px;
.popup_content {
padding: 16px 20px;
.form_section {
.form_item {
margin-bottom: 20px;
@@ -157,7 +157,7 @@
font-weight: 600;
font-style: Semibold;
font-size: 16px;
margin-bottom: 20px;
margin-bottom: 12px;
}
.options_wrapper {

2
src/user_pages/downloadBill/index.tsx
View File

@@ -314,6 +314,7 @@ const DownloadBill: React.FC = () => {
{/* 下载账单输入密码弹窗 */}
<CommonPopup
showHeader={true}
visible={show_download_popup}
onClose={() => set_show_download_popup(false)}
title="提现"
@@ -344,6 +345,7 @@ const DownloadBill: React.FC = () => {
{/* 筛选账单弹窗 */}
<CommonPopup
showHeader={true}
visible={showFilterPopup}
onClose={handleClose}
onConfirm={handleTypeConfirm}

15
src/user_pages/edit/index.tsx
View File

@@ -629,6 +629,9 @@ const EditProfilePage: React.FC = () => {
{/* 性别选择弹窗 */}
{gender_picker_visible && (
<PopupPicker
showHeader={true}
title="选择性别"
confirmText="保存"
options={[
[
{ text: "男", value: "0" },
@@ -645,6 +648,9 @@ const EditProfilePage: React.FC = () => {
{/* 生日选择弹窗 */}
{birthday_picker_visible && (
<PopupPicker
showHeader={true}
title="选择生日"
confirmText="保存"
visible={birthday_picker_visible}
setvisible={setBirthdayPickerVisible}
value={[
@@ -659,6 +665,9 @@ const EditProfilePage: React.FC = () => {
{/* 地区选择弹窗 */}
{location_picker_visible && (
<PopupPicker
showHeader={true}
title="选择地区"
confirmText="保存"
options={cities}
visible={location_picker_visible}
setvisible={setLocationPickerVisible}
@@ -669,6 +678,9 @@ const EditProfilePage: React.FC = () => {
{/* NTRP水平选择弹窗 */}
{ntrp_picker_visible && (
<PopupPicker
showHeader={true}
title="选择 NTRP 自评水平"
confirmText="保存"
options={[
[
{ text: "1.5", value: "1.5" },
@@ -691,6 +703,9 @@ const EditProfilePage: React.FC = () => {
{/* 职业选择弹窗 */}
{occupation_picker_visible && (
<PopupPicker
showHeader={true}
title="选择职业"
confirmText="保存"
options={professions}
visible={occupation_picker_visible}
setvisible={setOccupationPickerVisible}

2
src/user_pages/wallet/index.config.ts
View File

@@ -1,3 +1,3 @@
export default definePageConfig({
navigationBarTitleText: "我的钱包",
navigationBarTitleText: "钱包",
});

5
src/user_pages/wallet/index.scss
View File

@@ -4,6 +4,7 @@
background-color: #f5f5f5;
padding-bottom: 5px;
box-sizing: border-box;
padding: 100px 0 40px;
&::-webkit-scrollbar {
display: none;
@@ -364,9 +365,9 @@
// 过滤弹窗
.filter_popup {
padding: 20px;
.popup_content {
padding: 16px 20px;
.form_section {
.form_item {
margin-bottom: 20px;
@@ -377,7 +378,7 @@
font-weight: 600;
font-style: Semibold;
font-size: 16px;
margin-bottom: 20px;
margin-bottom: 12px;
}
.options_wrapper {

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

@@ -578,6 +578,7 @@ const WalletPage: React.FC = () => {
{/* 提现弹窗 */}
<CommonPopup
showHeader={true}
visible={show_withdraw_popup}
onClose={() => set_show_withdraw_popup(false)}
onConfirm={submit_withdraw}
@@ -619,6 +620,8 @@ const WalletPage: React.FC = () => {
{/* 选择月份弹窗 */}
{showMonthPicker && (
<PopupPicker
showHeader={true}
title="选择月份"
visible={showMonthPicker}
setvisible={setShowMonthPicker}
value={[
@@ -639,6 +642,7 @@ const WalletPage: React.FC = () => {
)}
{/* 筛选账单弹窗 */}
<CommonPopup
showHeader={true}
visible={showFilterPopup}
onClose={handleFilterCancel}
onConfirm={modify_load_transactions_params}

3
src/user_pages/withdrawal/index.tsx
View File

@@ -292,6 +292,7 @@ const Withdrawal: React.FC = () => {
{/* 提现输入密码弹窗 */}
<CommonPopup
showHeader={true}
visible={show_withdraw_popup}
onClose={() => set_show_withdraw_popup(false)}
title="提现"
@@ -310,7 +311,7 @@ const Withdrawal: React.FC = () => {
))
}
</View>
<Input holdKeyboard={true} ref={inputRef} focus={isFocus} type="number" adjustPosition={false} style={{ width: "0", height: "0", opacity: "0" }} value={password.filter(item => item !== "").join("")} maxlength={6} onInput={handlePasswordInput} onBlur={() => {set_show_withdraw_popup(false)}} />
<Input holdKeyboard={true} ref={inputRef} focus={isFocus} type="number" adjustPosition={false} style={{ width: "0", height: "0", opacity: "0" }} value={password.filter(item => item !== "").join("")} maxlength={6} onInput={handlePasswordInput} onBlur={() => { set_show_withdraw_popup(false) }} />
</View>
</CommonPopup>
</View >