diff --git a/src/components/CommonPopup/CommonPopup.tsx b/src/components/CommonPopup/CommonPopup.tsx index d7b95da..36cacd6 100644 --- a/src/components/CommonPopup/CommonPopup.tsx +++ b/src/components/CommonPopup/CommonPopup.tsx @@ -55,17 +55,17 @@ const CommonPopup: React.FC = ({ const handleTouchStart = (e: any) => { if (!enableDragToClose) return - + touchStartY.current = e.touches[0].clientY setIsDragging(true) } const handleTouchMove = (e: any) => { if (!enableDragToClose || !isDragging) return - + const currentY = e.touches[0].clientY const deltaY = currentY - touchStartY.current - + // 只允许向下拖动,限制最大拖动距离 if (deltaY > 0) { setDragOffset(Math.min(deltaY, 200)) @@ -74,14 +74,14 @@ const CommonPopup: React.FC = ({ const handleTouchEnd = () => { if (!enableDragToClose || !isDragging) return - + setIsDragging(false) - + // 如果拖动距离超过阈值,关闭弹窗 if (dragOffset > 100) { onClose() } - + // 重置拖动偏移 setDragOffset(0) } @@ -94,14 +94,14 @@ const CommonPopup: React.FC = ({ closeable={false} onClose={onClose} className={`${styles['common-popup']} ${className ? className : ''}`} - style={{ - zIndex: zIndex ? zIndex : undefined, - ...style + style={{ + zIndex: zIndex ? zIndex : undefined, + ...style }} > {enableDragToClose && ( - = ({ {showHeader && ( {typeof title === 'string' ? {title} : title} + + + + + + )} diff --git a/src/components/CommonPopup/index.module.scss b/src/components/CommonPopup/index.module.scss index a51cb08..7784154 100644 --- a/src/components/CommonPopup/index.module.scss +++ b/src/components/CommonPopup/index.module.scss @@ -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__title { - display: inline-block; + // .common-popup__header { + // padding: 12px 16px; + // font-size: 16px; + // font-weight: 600; + // color: #1f2329; + // border-bottom: 1px solid #f0f1f5; + // } + + .common-popup__header { + 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 { + 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 { @@ -83,4 +134,4 @@ border-radius: 12px !important; padding: 4px 10px; } -} +} \ No newline at end of file diff --git a/src/components/EditModal/EditModal.scss b/src/components/EditModal/EditModal.scss index 759f8e5..8fe4fab 100644 --- a/src/components/EditModal/EditModal.scss +++ b/src/components/EditModal/EditModal.scss @@ -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 { diff --git a/src/components/EditModal/index.tsx b/src/components/EditModal/index.tsx index 6f7f211..eefd0c4 100644 --- a/src/components/EditModal/index.tsx +++ b/src/components/EditModal/index.tsx @@ -49,6 +49,8 @@ const EditModal: React.FC = ({ 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 = ({ }); return; } - onSave(value); }; @@ -85,7 +86,7 @@ const EditModal: React.FC = ({ return ( - + {/* 标题栏 */} {title} @@ -144,7 +145,7 @@ const EditModal: React.FC = ({ {/* 底部按钮 */} - + 保存 diff --git a/src/components/Picker/PopupPicker.tsx b/src/components/Picker/PopupPicker.tsx index 225099f..94359fa 100644 --- a/src/components/Picker/PopupPicker.tsx +++ b/src/components/Picker/PopupPicker.tsx @@ -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 = ({ = ({ // 表单状态 const [form_data, setFormData] = useState({ ...user_info }); + // 职业数据 + const [professions, setProfessions] = useState([]); + + // 城市数据 + const [cities, setCities] = useState([]); + + // 页面加载时初始化数据 + 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 = ({ {/* 性别选择弹窗 */} {gender_picker_visible && ( = ({ {/* 地区选择弹窗 */} {location_picker_visible && ( = ({ {/* NTRP水平选择弹窗 */} {ntrp_picker_visible && ( = ({ {/* 职业选择弹窗 */} {occupation_picker_visible && ( = ({ {hosted_text} on_tab_change("participated")} > {participated_text} diff --git a/src/user_pages/downloadBill/index.scss b/src/user_pages/downloadBill/index.scss index 96a7fe2..3e2774e 100644 --- a/src/user_pages/downloadBill/index.scss +++ b/src/user_pages/downloadBill/index.scss @@ -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 { diff --git a/src/user_pages/downloadBill/index.tsx b/src/user_pages/downloadBill/index.tsx index ed58d4b..c9c1e3c 100644 --- a/src/user_pages/downloadBill/index.tsx +++ b/src/user_pages/downloadBill/index.tsx @@ -314,6 +314,7 @@ const DownloadBill: React.FC = () => { {/* 下载账单输入密码弹窗 */} set_show_download_popup(false)} title="提现" @@ -344,6 +345,7 @@ const DownloadBill: React.FC = () => { {/* 筛选账单弹窗 */} { {/* 性别选择弹窗 */} {gender_picker_visible && ( { {/* 生日选择弹窗 */} {birthday_picker_visible && ( { {/* 地区选择弹窗 */} {location_picker_visible && ( { {/* NTRP水平选择弹窗 */} {ntrp_picker_visible && ( { {/* 职业选择弹窗 */} {occupation_picker_visible && ( { {/* 提现弹窗 */} set_show_withdraw_popup(false)} onConfirm={submit_withdraw} @@ -619,6 +620,8 @@ const WalletPage: React.FC = () => { {/* 选择月份弹窗 */} {showMonthPicker && ( { )} {/* 筛选账单弹窗 */} { {/* 提现输入密码弹窗 */} set_show_withdraw_popup(false)} title="提现" @@ -310,7 +311,7 @@ const Withdrawal: React.FC = () => { )) } - item !== "").join("")} maxlength={6} onInput={handlePasswordInput} onBlur={() => {set_show_withdraw_popup(false)}} /> + item !== "").join("")} maxlength={6} onInput={handlePasswordInput} onBlur={() => { set_show_withdraw_popup(false) }} />