NTSP弹窗

2025-09-18 12:57:43 +08:00
parent b2872a5529
commit 219a3ac151
6 changed files with 163 additions and 50 deletions
--- 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<PickerOption[][]>([])
+  const [defaultValue, setDefaultValue] = useState<(string | number)[]>([]);
+  const [defaultOptions, setDefaultOptions] = useState<PickerOption[][]>([]);
  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" && (
+          <View className={`${styles["examination-btn"]}}`}>
+            <View className={`${styles["text-container"]}}`}>
+              <View className={`${styles["text-title"]}}`}>
+                不知道自己的<Text>（NTRP）</Text>水平
+              </View>
+              <View className={`${styles["text-btn"]}}`}>
+                <Text>快速测试</Text>
+                <Image src={imgs.ICON_ARROW_GREEN} className={`${styles["icon-arrow"]}`}></Image>
+              </View>
+            </View>
+            <View className={`${styles["img-container"]}}`}>
+              <View className={`${styles["img-box"]}`}>
+                <Image src={img!}></Image>
+              </View>
+              <View className={`${styles["img-box"]}`}>
+                <Image src={imgs.ICON_EXAMINATION}></Image>
+              </View>
+            </View>
+          </View>
+        )}
        <Picker
          visible={visible}
          options={defaultOptions}
@@ -102,7 +134,7 @@ const PopupPicker = ({
        />
      </CommonPopup>
    </>
-  )
-}
+  );
+};

-export default PopupPicker
+export default PopupPicker;
--- 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%;
+        }
+      }
+    }
+  }
+}
--- 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'),
+    ICON_EXAMINATION: require('@/static/userInfo/examination.svg'),
+    ICON_ARROW_GREEN: require('@/static/userInfo/arrow-green.svg'),
  }
--- a/src/static/userInfo/arrow-green.svg
+++ b/src/static/userInfo/arrow-green.svg
@@ -0,0 +1,4 @@
+<svg width="12" height="13" viewBox="0 0 12 13" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M10.5 6.5H1.5" stroke="#5CA693" stroke-linecap="round" stroke-linejoin="round"/>
+<path d="M7.5 3.5L10.5 6.5L7.5 9.5" stroke="#5CA693" stroke-linecap="round" stroke-linejoin="round"/>
+</svg>
--- a/src/static/userInfo/examination.svg
+++ b/src/static/userInfo/examination.svg
@@ -0,0 +1,12 @@
+<svg width="27" height="27" viewBox="0 0 27 27" fill="none" xmlns="http://www.w3.org/2000/svg">
+<g clip-path="url(#clip0_4605_10331)">
+<path d="M7.31284 3.60919C7.38708 3.08094 7.8755 2.71289 8.40375 2.78714L17.9686 4.13139L22.0789 9.58593L20.1969 22.9767C20.1227 23.505 19.6343 23.873 19.106 23.7988L5.71525 21.9168C5.187 21.8426 4.81895 21.3542 4.89319 20.8259L7.31284 3.60919Z" stroke="#00E6AD" stroke-width="1.93177" stroke-linejoin="round"/>
+<path d="M10.1982 10.8422L17.8501 11.9176" stroke="#00E6AD" stroke-width="1.93177" stroke-linecap="round" stroke-linejoin="round"/>
+<path d="M9.66016 14.6682L17.312 15.7436" stroke="#00E6AD" stroke-width="1.93177" stroke-linecap="round" stroke-linejoin="round"/>
+</g>
+<defs>
+<clipPath id="clip0_4605_10331">
+<rect width="23.1812" height="23.1812" fill="white" transform="translate(3.89062 0.202026) rotate(8)"/>
+</clipPath>
+</defs>
+</svg>
--- 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]}