✨ feat(ID1000840): 【临】游客信息换回获取用户的微信昵称（首次修改名字）

【【临】游客信息换回获取用户的微信昵称（首次修改名字）】 https://www.tapd.cn/53459131/prong/stories/view/1153459131001000840
2022-12-26 19:25:11 +08:00
parent f91e014db5
commit 27d75eb3eb
8 changed files with 341 additions and 145 deletions
@@ -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;
+  }
+}
@@ -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<string>('')
+
+  const handleCancel = () => {
+    onCancel?.()
+    handleClose()
+  }
+  const handleConfirm = () => {
+    onConfirm?.(text)
+  }
+  const handleIntput: CommonEventFunction<InputProps.inputEventDetail> = (e) => {
+    setText(e.detail.value)
+  }
+
+  return <Dialog show={showModal} onClose={handleClose} onChange={onShowModalChange}>
+    <View className={styles.organizationNameModal}>
+      <View className={styles.organizationNameModal_title}>请设置您的组织昵称</View>
+      <View className={styles.organizationNameModal_content}>
+        <View className={styles.tips}>公司名称是辨识您身份的重要依据，请谨慎修改。（仅支持修改一次）</View>
+        <InputX customClassName={styles.input} onInput={handleIntput} value={text} type="text" placeholder="请输入 组织/公司/码单昵称" />
+      </View>
+      <View className={styles.organizationNameModal_bottomBar}>
+        <View hoverClass="hoverClass" className={classNames(styles.button, styles.organizationNameModal_bottomBar_left)} onClick={handleCancel}>下次更改</View>
+        <View hoverClass="hoverClass" className={classNames(styles.button, styles.organizationNameModal_bottomBar_right)} onClick={handleConfirm}>确认</View>
+      </View>
+    </View>
+  </Dialog>
+}
+export default OrganizationNameModal