68 lines
2.2 KiB
TypeScript
68 lines
2.2 KiB
TypeScript
import React, { useCallback, useState } from 'react'
|
||
import { View, Text, Input } from '@tarojs/components'
|
||
import { Checkbox } from '@nutui/nutui-react-taro'
|
||
import styles from './index.module.scss'
|
||
interface FormSwitchProps {
|
||
value: boolean
|
||
onChange: (checked: boolean) => void
|
||
subTitle: string
|
||
wechatId?: string
|
||
}
|
||
|
||
const FormSwitch: React.FC<FormSwitchProps> = ({ value, onChange, subTitle, wechatId }) => {
|
||
const [editWechat, setEditWechat] = useState(false)
|
||
const [wechatIdValue, setWechatIdValue] = useState('')
|
||
const [wechat, setWechat] = useState(wechatId)
|
||
const editWechatId = () => {
|
||
setEditWechat(true)
|
||
}
|
||
const setWechatId = useCallback((e: any) => {
|
||
const value = e.target.value
|
||
onChange && onChange(value)
|
||
setWechatIdValue(value)
|
||
}, [onChange])
|
||
|
||
const fillWithPhone = () => {
|
||
if (wechat) {
|
||
setWechatIdValue(wechat)
|
||
}
|
||
}
|
||
|
||
return (
|
||
<>
|
||
<View className={styles['wechat-contact-section']}>
|
||
<View className={styles['wechat-contact-item']}>
|
||
<Checkbox
|
||
className={styles['wechat-contact-checkbox']}
|
||
checked={value}
|
||
onChange={onChange}
|
||
/>
|
||
<View className={styles['wechat-contact-content']}>
|
||
<Text className={styles['wechat-contact-text']}>{subTitle}</Text>
|
||
</View>
|
||
</View>
|
||
{
|
||
!editWechat && wechatId && (
|
||
<View className={styles['wechat-contact-id']}>
|
||
<Text className={styles['wechat-contact-text']}>微信号: {wechatId.replace(/(\d{3})(\d{4})(\d{4})/, '$1 $2 $3')}</Text>
|
||
<View className={styles['wechat-contact-edit']} onClick={editWechatId}>修改</View>
|
||
</View>
|
||
)
|
||
}
|
||
{
|
||
editWechat && (
|
||
<View className={styles['wechat-contact-id']}>
|
||
<View className={styles['wechat-contact-edit-input']}>
|
||
<Input value={wechatIdValue} onInput={setWechatId} placeholder='请输入正确微信号' />
|
||
</View>
|
||
<View className={styles['wechat-contact-edit']} onClick={fillWithPhone}>手机号填入：{wechat}</View>
|
||
</View>
|
||
)
|
||
}
|
||
|
||
</View>
|
||
</>
|
||
)
|
||
}
|
||
|
||
export default FormSwitch
|