✨ feat(添加数据):

2023-01-10 11:49:26 +08:00
parent 464746ef97
commit 23f4885111
58 changed files with 3520 additions and 326 deletions
@@ -0,0 +1,74 @@
+.popup_modal_main {
+  position: fixed;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  width: 100vw;
+  height: 100vh;
+  top: 0;
+  left: 0;
+  z-index: 1000;
+  .popup_modal_con {
+    background-color: #fff;
+    border-radius: 16px;
+    width: 606px;
+    z-index: 1000;
+    .popup_modal_title {
+      height: 112px;
+      background: #ffffff;
+      border-radius: 16px 16px 0px 0px;
+      font-size: 32px;
+      color: #333333;
+      text-align: center;
+      line-height: 112px;
+    }
+    .popup_modal_input {
+      height: 144px;
+      background: #ffffff;
+      display: flex;
+      justify-content: center;
+      .input {
+        width: 526px;
+        height: 88px;
+        background: #f5f5f5;
+        padding: 20px;
+        border: 1px solid #337fff;
+        border-radius: 16px;
+        box-sizing: border-box;
+      }
+      input {
+        background: #f5f5f5;
+      }
+    }
+    .popup_modal_btn {
+      display: flex;
+      width: 606px;
+      height: 112px;
+      background: #ffffff;
+      border-radius: 0px 0px 16px 16px;
+      border-top: 1px solid rgba(0, 0, 0, 0.1);
+      .popup_modal_btn_item {
+        flex: 1;
+        display: flex;
+        align-items: center;
+        justify-content: center;
+        &:nth-child(1) {
+          color: #333333;
+          border-right: 1px solid rgba(0, 0, 0, 0.1);
+        }
+        &:nth-child(2) {
+          color: #337fffff;
+        }
+      }
+    }
+  }
+  .mask {
+    position: absolute;
+    width: 100%;
+    height: 100%;
+    left: 0;
+    top: 0;
+    background: rgba($color: #000000, $alpha: 0.6);
+    z-index: 999;
+  }
+}
@@ -0,0 +1,59 @@
+import { Input, View } from '@tarojs/components'
+import { useEffect, useState } from 'react'
+import styles from './index.module.scss'
+
+export interface Param {
+  show: boolean
+  title: string
+  onConfirm?: (val: string) => void
+  onCancel?: () => void
+  defaultValue?: string
+  onClose?: () => void
+}
+export default (props: Param) => {
+  const { show = false, title = '', onConfirm, onCancel, defaultValue = '', onClose } = props
+  const [value, setValue] = useState('')
+  const [openStatus, setOpenStatus] = useState(false)
+  useEffect(() => {
+    if (value !== defaultValue) { setValue(() => defaultValue) }
+  }, [defaultValue])
+  useEffect(() => {
+    if (show !== openStatus) { setOpenStatus(() => show) }
+  }, [show])
+
+  const onInputEven = (e) => {
+    const res = e.detail.value
+    setValue(res)
+  }
+  const onCancelEven = () => {
+    onCancel?.()
+    onCloseEven()
+  }
+  const onCloseEven = () => {
+    onClose?.()
+    setOpenStatus(false)
+  }
+  const onConfirmEven = (val) => {
+    onClose?.()
+    onConfirm?.(val)
+  }
+  return (
+    <>
+      {openStatus && <View className={styles.popup_modal_main}>
+        <View className={styles.popup_modal_con}>
+          <View className={styles.popup_modal_title}>{title}</View>
+          <View className={styles.popup_modal_input}>
+            <View className={styles.input}>
+              <Input onInput={onInputEven} value={value} />
+            </View>
+          </View>
+          <View className={styles.popup_modal_btn}>
+            <View className={styles.popup_modal_btn_item} onClick={onCancelEven}>取消</View>
+            <View className={styles.popup_modal_btn_item} onClick={() => onConfirmEven(value)}>确认修改</View>
+          </View>
+        </View>
+        <View className={styles.mask} catchMove onClick={onCloseEven}></View>
+      </View>}
+    </>
+  )
+}