NTSP弹窗

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;

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%;
+        }
+      }
+    }
+  }
+}