From 219a3ac15108ff54b692086b9d4b3c347d8a8130 Mon Sep 17 00:00:00 2001 From: Ultrame <1019265060@qq.com> Date: Thu, 18 Sep 2025 12:57:43 +0800 Subject: [PATCH] =?UTF-8?q?NTSP=E5=BC=B9=E7=AA=97?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- src/components/Picker/PopupPicker.tsx | 114 +++++++++++++++--------- src/components/Picker/index.module.scss | 77 ++++++++++++++-- src/config/images.js | 4 +- src/static/userInfo/arrow-green.svg | 4 + src/static/userInfo/examination.svg | 12 +++ src/user_pages/edit/index.tsx | 2 + 6 files changed, 163 insertions(+), 50 deletions(-) create mode 100644 src/static/userInfo/arrow-green.svg create mode 100644 src/static/userInfo/examination.svg diff --git a/src/components/Picker/PopupPicker.tsx b/src/components/Picker/PopupPicker.tsx index 8cddc93..c1c58cb 100644 --- a/src/components/Picker/PopupPicker.tsx +++ b/src/components/Picker/PopupPicker.tsx @@ -1,43 +1,54 @@ -import React, { useState, useEffect, useCallback } from 'react' -import CommonPopup from '@/components/CommonPopup' -import Picker from './Picker' -import { renderYearMonth, renderYearMonthDay, renderHourMinute } from './PickerData' +import React, { useState, useEffect, useCallback } from "react"; +import CommonPopup from "@/components/CommonPopup"; +import { View, Text, Image } from "@tarojs/components"; +import Picker from "./Picker"; +import { + renderYearMonth, + renderYearMonthDay, + renderHourMinute, +} from "./PickerData"; +import imgs from "@/config/images"; +import styles from "./index.module.scss"; interface PickerOption { - text: string | number - value: string | number + text: string | number; + value: string | number; } interface PickerProps { - visible: boolean - setvisible: (visible: boolean) => void - options?: PickerOption[][] - value?: (string | number)[] - type?: 'month' | 'day' | 'hour' | null - onConfirm?: (options: PickerOption[], values: (string | number)[]) => void - onChange?: (value: (string | number)[]) => void + visible: boolean; + setvisible: (visible: boolean) => void; + options?: PickerOption[][]; + value?: (string | number)[]; + type?: "month" | "day" | "hour" | "ntrp" | null; + img?: string; + onConfirm?: (options: PickerOption[], values: (string | number)[]) => void; + onChange?: (value: (string | number)[]) => void; } const PopupPicker = ({ visible, setvisible, value = [], + img, onConfirm, onChange, options = [], - type = null + type = null, }: PickerProps) => { - - const [defaultValue, setDefaultValue] = useState<(string | number)[]>([]) - const [defaultOptions, setDefaultOptions] = useState([]) + const [defaultValue, setDefaultValue] = useState<(string | number)[]>([]); + const [defaultOptions, setDefaultOptions] = useState([]); const changePicker = (options: any[], values: any, columnIndex: number) => { if (onChange) { - console.log('picker onChange', columnIndex, values, options); + console.log("picker onChange", columnIndex, values, options); - if (type === 'day' && JSON.stringify(defaultValue) !== JSON.stringify(values)) { + if ( + type === "day" && + JSON.stringify(defaultValue) !== JSON.stringify(values) + ) { const [year, month] = values; const daysInMonth = new Date(Number(year), Number(month), 0).getDate(); const dayOptions = Array.from({ length: daysInMonth }, (_, i) => ({ - text: i + 1 + '日', + text: i + 1 + "日", value: i + 1, })); const newOptions = [...defaultOptions]; @@ -51,28 +62,28 @@ const PopupPicker = ({ setDefaultValue(values); } } - } + }; const handleConfirm = () => { - console.log(defaultValue, 'defaultValue'); - onChange(defaultValue) - setvisible(false) - } + console.log(defaultValue, "defaultValue"); + onChange(defaultValue); + setvisible(false); + }; const dialogClose = () => { - setvisible(false) - } + setvisible(false); + }; useEffect(() => { - if (type === 'month') { - setDefaultOptions(renderYearMonth()) - } else if (type === 'day') { - setDefaultOptions(renderYearMonthDay()) - } else if (type === 'hour') { - setDefaultOptions(renderHourMinute()) + if (type === "month") { + setDefaultOptions(renderYearMonth()); + } else if (type === "day") { + setDefaultOptions(renderYearMonthDay()); + } else if (type === "hour") { + setDefaultOptions(renderHourMinute()); } else { - setDefaultOptions(options) + setDefaultOptions(options); } - }, [type]) + }, [type]); // useEffect(() => { // if (value.length > 0 && defaultOptions.length > 0) { @@ -87,13 +98,34 @@ const PopupPicker = ({ showHeader={false} title={null} hideFooter={false} - cancelText='取消' - confirmText='完成' + cancelText="取消" + confirmText="完成" onConfirm={handleConfirm} - position='bottom' + position="bottom" round zIndex={1000} > + {type === "ntrp" && ( + + + + 不知道自己的（NTRP）水平 + + + 快速测试 + + + + + + + + + + + + + )} - ) -} + ); +}; -export default PopupPicker +export default PopupPicker; diff --git a/src/components/Picker/index.module.scss b/src/components/Picker/index.module.scss index 841cdee..63019ec 100644 --- a/src/components/Picker/index.module.scss +++ b/src/components/Picker/index.module.scss @@ -1,17 +1,17 @@ .picker-container { - :global{ - .nut-popup-round{ - position: relative!important; + :global { + .nut-popup-round { + position: relative !important; .nut-picker-control { - display: none!important; + display: none !important; } - .nut-picker{ - &::after{ - content: ''; + .nut-picker { + &::after { + content: ""; position: absolute; top: 50%; left: 16px; - right: 16px!important; + right: 16px !important; width: calc(100% - 32px); height: 48px; background: rgba(22, 24, 35, 0.05); @@ -23,3 +23,64 @@ } } } + +.examination-btn { + padding: 8px 16px; + margin: 16px; + border-radius: 12px; + border: 1px solid rgba(0, 0, 0, 0.08); + display: flex; + justify-content: space-between; + align-items: center; + box-sizing: border-box; + background: linear-gradient(to bottom, #ccfff2, #f7fffd); + .text-container { + .text-title { + font-family: Noto Sans SC; + font-weight: 900; + color: #2a4d44; + font-size: 16px; + margin-bottom: 4px; + Text { + color: #00e5ad; + } + } + .text-btn { + font-size: 12px; + color: #5ca693; + display: flex; + align-items: center; + gap: 6px; + .icon-arrow { + width: 12px; + height: 12px; + } + } + } + .img-container { + display: flex; + .img-box { + width: 47px; + height: 47px; + border: 3px solid #fff; + border-radius: 50%; + overflow: hidden; + display: flex; + justify-content: center; + align-items: center; + Image { + width: 100%; + height: 100%; + } + &:nth-child(2) { + border-radius: 8px; + background-color: #ccfff2; + transform: scale(0.88) rotate(15deg) translateX(-10px); + Image { + width: 66%; + height: 66%; + } + } + } + } +} diff --git a/src/config/images.js b/src/config/images.js index f9ae115..4e1ac7f 100644 --- a/src/config/images.js +++ b/src/config/images.js @@ -59,4 +59,6 @@ export default { ICON_IMPORTANT_BTN: require('@/static/publishBall/icon-important-btn.svg'), ICON_ARROW_RIGHT_WHITE: require('@/static/publishBall/icon-arrow-right-white.svg'), ICON_ARROW_RIGHT_BLACK: require('@/static/publishBall/icon-arrow-right-black.svg'), - } \ No newline at end of file + ICON_EXAMINATION: require('@/static/userInfo/examination.svg'), + ICON_ARROW_GREEN: require('@/static/userInfo/arrow-green.svg'), + } diff --git a/src/static/userInfo/arrow-green.svg b/src/static/userInfo/arrow-green.svg new file mode 100644 index 0000000..3a26ba0 --- /dev/null +++ b/src/static/userInfo/arrow-green.svg @@ -0,0 +1,4 @@ + + + + diff --git a/src/static/userInfo/examination.svg b/src/static/userInfo/examination.svg new file mode 100644 index 0000000..063ea38 --- /dev/null +++ b/src/static/userInfo/examination.svg @@ -0,0 +1,12 @@ + + + + + + + + + + + + diff --git a/src/user_pages/edit/index.tsx b/src/user_pages/edit/index.tsx index d4ec969..49b0f60 100644 --- a/src/user_pages/edit/index.tsx +++ b/src/user_pages/edit/index.tsx @@ -521,6 +521,8 @@ const EditProfilePage: React.FC = () => { { text: '4.0', value: '4.0' }, { text: '4.5', value: '4.5' }, ]]} + type="ntrp" + img={user_info.avatar} visible={ntrp_picker_visible} setvisible={setNtrpPickerVisible} value={[form_data.ntrp_level]}