diff --git a/src/components/organizationNameModal/index.module.scss b/src/components/organizationNameModal/index.module.scss new file mode 100644 index 0000000..bf89b8e --- /dev/null +++ b/src/components/organizationNameModal/index.module.scss @@ -0,0 +1,57 @@ +.organizationNameModal { + width: 75vw; + background-color: #fff; + border-radius: 20px; + padding-top: 20px; + overflow: hidden; + .input { + border: 1px solid #eee; + margin: 20px 40px; + padding: 8px; + border-radius: 8px; + font-size: 26px; + } + &_title { + padding: 10px; + text-align: center; + } + &_content { + margin-bottom: 20px; + display: flex; + flex-flow: column nowrap; + justify-content: center; + } + &_bottomBar { + display: flex; + flex-flow: row nowrap; + align-items: center; + justify-content: space-between; + border-top: 1px solid #eee; + .button { + display: flex; + align-items: center; + justify-content: center; + text-align: center; + box-sizing: border-box; + width: 50%; + font-size: 30px; + font-weight: 550; + padding: 30px 0; + background-color: #fff; + } + &_left { + border-right: 1px solid #eee; + color: #333; + } + &_right { + color: #606f97; + } + } + .tips { + background-color: #fef9f4; + font-size: 24px; + color: #ff9b33; + line-height: 1.5; + padding: 20px; + } +} diff --git a/src/components/organizationNameModal/index.tsx b/src/components/organizationNameModal/index.tsx new file mode 100644 index 0000000..ad01b78 --- /dev/null +++ b/src/components/organizationNameModal/index.tsx @@ -0,0 +1,66 @@ +import type { CommonEventFunction, InputProps } from '@tarojs/components' +import { Input, View } from '@tarojs/components' +import { useState } from 'react' +import classNames from 'classnames' +import Dialog from '../Dialog' +import InputX from '../InputX' +import styles from './index.module.scss' +import { usePropsValue } from '@/use/useCommon' + +interface PropsType { + showModal: boolean + onClose?: () => void + onShowModalChange?: (val: boolean) => void + onCancel?: () => void + onConfirm?: (val: string) => void +} +const OrganizationNameModal = (props: PropsType) => { + const { + showModal = false, + onClose, + onShowModalChange, + onCancel, + onConfirm, + } = props + + const [_show, setShow] = usePropsValue({ + value: showModal, + defaultValue: false, + onChange: (value) => { + onShowModalChange?.(value) + }, + }) + + const handleClose = () => { + setShow(false) + onClose?.() + } + + const [text, setText] = useState('') + + const handleCancel = () => { + onCancel?.() + handleClose() + } + const handleConfirm = () => { + onConfirm?.(text) + } + const handleIntput: CommonEventFunction = (e) => { + setText(e.detail.value) + } + + return + + 请设置您的组织昵称 + + 公司名称是辨识您身份的重要依据,请谨慎修改。(仅支持修改一次) + + + + 下次更改 + 确认 + + + +} +export default OrganizationNameModal diff --git a/src/pages/userEdit/components/ModifyModal.scss b/src/pages/userEdit/components/ModifyModal.scss deleted file mode 100644 index fe370e9..0000000 --- a/src/pages/userEdit/components/ModifyModal.scss +++ /dev/null @@ -1,76 +0,0 @@ - .modify-ickname-content { - margin: 0 auto; - width: 658px; - padding-bottom: 50px; - - .modify-ickname-input { - width: 658px; - height: 182px; - background: #f3f3f3; - border: 2px solid #e6e6e6; - border-radius: 10px; - padding: 15px; - box-sizing: border-box; - font-size: 22px; - font-weight: 400; - color: #ababab; - display: flex; - flex-direction: column; - align-items: flex-end; - } - - .modify-ickname-input textarea { - width: 100%; - height: 80%; - font-size: 26px; - font-weight: 400; - color: #3c3c3c; - } - - .modify-ickname-tips { - font-size: 22px; - font-weight: 400; - color: #ababab; - margin-top: 30px; - } - - .modify-ickname-operation { - width: 658px; - height: 82px; - background: #ffffff; - border: 2px solid #cde5ff; - border-radius: 40px; - display: flex; - overflow: hidden; - margin-top: 105px; - display: flex; - } - - .modify-ickname-operation button { - height: 100%; - width: 50%; - font-size: 32px; - font-weight: 400; - color: #007aff; - background-color: white; - border: none; - outline: none; - padding: 0; - border-radius: 0; - } - - .modify-ickname-operation button::after, - .user-edit-logout::after { - border-radius: 0; - border: none; - } - - .modify-ickname-operation .modify-ickname-operation-save { - background: #007aff; - color: #ffffff; - } - - .modify-ickname-operation button::after { - border-radius: 0; - } - } \ No newline at end of file diff --git a/src/pages/userEdit/components/ModifyModal.tsx b/src/pages/userEdit/components/ModifyModal.tsx deleted file mode 100644 index 540ca1c..0000000 --- a/src/pages/userEdit/components/ModifyModal.tsx +++ /dev/null @@ -1,49 +0,0 @@ - -import { Button, Image, Text, Textarea, View } from '@tarojs/components' -import { forwardRef, memo, useCallback, useEffect, useImperativeHandle, useState } from 'react' -import Popup from '@/components/popup' -import './ModifyModal.scss' - -interface Params{ - title?: string - save: (value: any) => void // 确定保存 -} -export default memo(forwardRef((props: any, ref) => { - const { title = '修改昵称' } = props - const [value, setValue] = useState('') - useEffect(() => { - setValue(props.value) - }, [props.value]) - // popup输入长度 - const handleTextareaInput = (ev: any) => { - setValue(ev.detail.value.slice(0, 20)) - } - // 重置 - const handleTextareaReset = () => { - setValue('') - } - const [textareaBottom, setTextareaBottom] = useState(0) - const handleBlur = () => { - setTextareaBottom(0) - } - const handleFocus = (ev) => { - setTextareaBottom(ev.detail.height) - } - const [modalShow, setModalShow] = useState(false) - useImperativeHandle(ref, () => ({ setModalShow })) - return ( - setModalShow(false)} title={title} show={modalShow}> - - -