parent
8aa7beb948
commit
6caf55b914
@ -0,0 +1,3 @@ |
||||
export default definePageConfig({ |
||||
navigationBarTitleText: '登记', |
||||
}) |
@ -0,0 +1,176 @@ |
||||
import {FC, useCallback, useEffect, useState} from "react"; |
||||
import {Form, Input, View} from "@tarojs/components"; |
||||
import Taro, {useRouter} from "@tarojs/taro"; |
||||
import {userApi, loginApi, LoginParams, meetingAPi, Meeting} from "@/api"; |
||||
import {Profile} from '@/store' |
||||
import {regexTel} from "@/utils/regu"; |
||||
import MyButton from "@/components/button/MyButton"; |
||||
|
||||
interface Params { |
||||
meeting_id: string |
||||
phone_number?: string |
||||
user_name?: string |
||||
} |
||||
|
||||
const MeetingLogin: FC = () => { |
||||
const {setUser, setToken, setCompany} = Profile.useContainer() |
||||
const [codeTime, setCodeTime] = useState(0) |
||||
const [phone_number, setPhone_number] = useState<number | null>() |
||||
const [userName, setUserName] = useState('') |
||||
const [code, setCode] = useState('') |
||||
const [h5params, setH5Params] = useState<LoginParams | null>(null) |
||||
const [meeting, setMeeting] = useState<Meeting | null>(null) |
||||
const params = useRouter().params as unknown as Params |
||||
|
||||
useEffect(() => { |
||||
loginApi.getMeetingParams().then((res) => { |
||||
setH5Params(res) |
||||
}) |
||||
if (params.user_name && params.phone_number) { |
||||
setPhone_number(Number(params.phone_number)) |
||||
setUserName(params.user_name) |
||||
Taro.showToast({title: '验证码错误', icon: 'error'}) |
||||
} |
||||
}, []) |
||||
|
||||
|
||||
useEffect(() => { |
||||
if (codeTime > 0) { |
||||
setTimeout(() => { |
||||
setCodeTime(codeTime - 1) |
||||
}, 1000) |
||||
} |
||||
}, [codeTime]) |
||||
|
||||
Taro.useLoad(() => { |
||||
meetingAPi.meetingInfo(params.meeting_id).then(res => { |
||||
if (res.type !== 1) { |
||||
Taro.showModal({ |
||||
title: res.type === 0 ? '暂未开始' : '二维码已过期', |
||||
success() { |
||||
Taro.reLaunch({url: '/pages/login/login'}) |
||||
} |
||||
}) |
||||
return |
||||
} |
||||
setMeeting(res.data) |
||||
}) |
||||
}) |
||||
|
||||
function submit(e) { |
||||
const value = e.detail.value |
||||
if (!value.user_name) { |
||||
Taro.showToast({title: '请写用户名', icon: "error"}) |
||||
return |
||||
} |
||||
|
||||
if (!regexTel.exec(value.phone_number)) { |
||||
Taro.showToast({title: '手机号错误', icon: 'error'}) |
||||
return |
||||
} |
||||
|
||||
if (!value.phone_code) { |
||||
Taro.showToast({title: '请获取手机验证码', icon: 'error'}) |
||||
return; |
||||
} |
||||
|
||||
if (process.env.TARO_ENV === 'h5') { |
||||
if (h5params == null) { |
||||
Taro.showToast({title: '页面参数错误,请刷新页面!', icon: 'error'}) |
||||
return; |
||||
} |
||||
location.href = "https://open.weixin.qq.com/connect/oauth2/authorize?" + |
||||
"appid=" + h5params!.appid + |
||||
"&redirect_uri=" + |
||||
encodeURIComponent( |
||||
h5params!.route + |
||||
`?dep_id=${meeting?.dep_id}&company_id=${meeting?.companyId}&phone_number=${value.phone_number}&user_name=${value.user_name}&meeting_id=${params.meeting_id}&phone_code=${value.phone_code}` |
||||
) + |
||||
"&response_type=code" + |
||||
"&scope=snsapi_userinfo" + |
||||
"#wechat_redirect"; |
||||
} else { |
||||
Taro.login({ |
||||
success: async (res) => { |
||||
const data = await userApi.meetingSave({ |
||||
...value, |
||||
code: res.code, |
||||
meeting_id: params.meeting_id |
||||
}) |
||||
setCompany(data.company) |
||||
setUser(data.user) |
||||
setToken(data.token) |
||||
Taro.switchTab({url: '/pages/index/index'}) |
||||
}, |
||||
fail: () => { |
||||
Taro.showToast({title: '获取微信登录失败', icon: "error"}) |
||||
} |
||||
}) |
||||
} |
||||
} |
||||
|
||||
const getCode = useCallback(async () => { |
||||
if (codeTime > 0) return; |
||||
if (!phone_number || !regexTel.exec(String(phone_number))) { |
||||
Taro.showToast({title: '请输入正确的手机号', icon: 'error'}) |
||||
return |
||||
} |
||||
|
||||
try { |
||||
await userApi.getCode(phone_number) |
||||
Taro.showToast({title: '请注意查收', icon: "none"}) |
||||
setCodeTime(60) |
||||
} catch (e) { |
||||
Taro.showToast({title: '获取短信验证码失败', icon: "error"}) |
||||
} |
||||
}, [codeTime, phone_number]) |
||||
|
||||
return ( |
||||
<View style={{position: 'fixed', top: 0, left: 0, bottom: 0, right: 0, padding: "0 15px", background: '#fff'}}> |
||||
<Form className='form' onSubmit={submit}> |
||||
|
||||
<View className='item'> |
||||
<View>用户名</View> |
||||
<Input |
||||
placeholder='请输入用户名' |
||||
focus |
||||
name='user_name' |
||||
value={userName} |
||||
onInput={(e) => setUserName(e.detail.value)}/> |
||||
</View> |
||||
|
||||
<View className='item'> |
||||
<View>手机号</View> |
||||
<Input |
||||
type='number' |
||||
name='phone_number' |
||||
placeholder={'请输入手机号'} |
||||
value={phone_number as unknown as string} |
||||
onInput={(e) => setPhone_number(Number(e.detail.value))}/> |
||||
</View> |
||||
|
||||
|
||||
<View className='item'> |
||||
<View>验证码</View> |
||||
<View className='flex flex-1'> |
||||
<Input |
||||
type='number' |
||||
name='phone_code' |
||||
className='flex-1 mr-2' |
||||
value={code} |
||||
onInput={(e) => setCode(e.detail.value)} |
||||
placeholder='输入验证码'/> |
||||
<View onClick={getCode}> |
||||
{codeTime > 0 ? `${codeTime}` : '获取验证码'} |
||||
</View> |
||||
</View> |
||||
</View> |
||||
|
||||
<MyButton className='mt-3' formType='submit'>登记</MyButton> |
||||
</Form> |
||||
</View> |
||||
) |
||||
} |
||||
|
||||
|
||||
export default MeetingLogin |
Loading…
Reference in new issue