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;