NTSP弹窗

src/components/Picker/PopupPicker.tsx

@@ -1,43 +1,54 @@
-import React, { useState, useEffect, useCallback } from 'react'
+import React, { useState, useEffect, useCallback } from "react";
-import CommonPopup from '@/components/CommonPopup'
+import CommonPopup from "@/components/CommonPopup";
-import Picker from './Picker'
+import { View, Text, Image } from "@tarojs/components";
-import { renderYearMonth, renderYearMonthDay, renderHourMinute } from './PickerData'
+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
+  text: string | number;
-  value: string | number
+  value: string | number;
 }
 
 interface PickerProps {
-  visible: boolean
+  visible: boolean;
-  setvisible: (visible: boolean) => void
+  setvisible: (visible: boolean) => void;
-  options?: PickerOption[][]
+  options?: PickerOption[][];
-  value?: (string | number)[]
+  value?: (string | number)[];
-  type?: 'month' | 'day' | 'hour' | null
+  type?: "month" | "day" | "hour" | "ntrp" | null;
-  onConfirm?: (options: PickerOption[], values: (string | number)[]) => void
+  img?: string;
-  onChange?: (value: (string | number)[]) => void
+  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 [defaultValue, setDefaultValue] = useState<(string | number)[]>([])
+  const [defaultOptions, setDefaultOptions] = useState<PickerOption[][]>([]);
-  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');
+    console.log(defaultValue, "defaultValue");
-    onChange(defaultValue)
+    onChange(defaultValue);
-    setvisible(false)
+    setvisible(false);
-  }
+  };
 
   const dialogClose = () => {
-    setvisible(false)
+    setvisible(false);
-  }
+  };
   useEffect(() => {
-    if (type === 'month') {
+    if (type === "month") {
-      setDefaultOptions(renderYearMonth())
+      setDefaultOptions(renderYearMonth());
-    } else if (type === 'day') {
+    } else if (type === "day") {
-      setDefaultOptions(renderYearMonthDay())
+      setDefaultOptions(renderYearMonthDay());
-    } else if (type === 'hour') {
+    } else if (type === "hour") {
-      setDefaultOptions(renderHourMinute())
+      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='取消'
+        cancelText="取消"
-        confirmText='完成'
+        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;

src/components/Picker/index.module.scss

@@ -7,7 +7,7 @@
       }
       .nut-picker {
         &::after {
-          content: '';
+          content: "";
           position: absolute;
           top: 50%;
           left: 16px;
@@ -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%;
+        }
+      }
+    }
+  }
+}

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'),
   }

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>

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>

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]}