131 lines
3.5 KiB
TypeScript
131 lines
3.5 KiB
TypeScript
// @ts-nocheck
|
|
import { Component } from "react";
|
|
import { View, Text, Image } from "@tarojs/components";
|
|
import "./index.scss";
|
|
import { AtButton, AtInput, AtTabBar } from "taro-ui";
|
|
import React, { useCallback, useEffect, useState } from "react";
|
|
import { AtGrid } from "taro-ui";
|
|
import { Swiper, SwiperItem } from "@tarojs/components";
|
|
import { AtCard } from "taro-ui";
|
|
import { AtImagePicker } from "taro-ui";
|
|
import Taro from "@tarojs/taro";
|
|
import { AtAvatar } from "taro-ui";
|
|
import { AtTag } from "taro-ui";
|
|
import { AtList, AtListItem } from "taro-ui";
|
|
import { AtForm, AtMessage } from "taro-ui";
|
|
|
|
// export default class Index extends Component {
|
|
const Group = () => {
|
|
const [current, setcurrent] = useState(2);
|
|
const [wxid, setwxid] = useState(null);
|
|
const [phoneNum, setphoneNum] = useState(null);
|
|
const [vCode, setvCode] = useState(null);
|
|
const [waitTime, setWaitTime] = useState(0); // 等待秒数
|
|
const [isButtonDisabled, setIsButtonDisabled] = useState(false); // 按钮是否禁用
|
|
|
|
useEffect(() => {}, []);
|
|
|
|
const handleClick = (value) => {
|
|
// 跳转到目的页面，在当前页面打开
|
|
Taro.navigateTo({
|
|
url: "/pages/index/index",
|
|
});
|
|
};
|
|
|
|
const startTimer = () => {
|
|
setIsButtonDisabled(true);
|
|
let localWaitTime = 60; // 使用局部变量
|
|
|
|
// 更新状态的函数
|
|
const updateTime = () => {
|
|
if (localWaitTime <= 0) {
|
|
clearInterval(timer);
|
|
setIsButtonDisabled(false);
|
|
setWaitTime(0);
|
|
} else {
|
|
setWaitTime(localWaitTime);
|
|
localWaitTime -= 1;
|
|
}
|
|
};
|
|
|
|
// 设定计时器
|
|
const timer = setInterval(updateTime, 1000);
|
|
// 初始调用
|
|
updateTime();
|
|
};
|
|
|
|
const validatePhoneNumber=(phoneNum) =>{
|
|
// 检查是否为11位数字
|
|
const phoneRegex = /^[0-9]{11}$/;
|
|
return phoneRegex.test(phoneNum);
|
|
}
|
|
|
|
|
|
return (
|
|
<View className="group">
|
|
<AtForm
|
|
onSubmit={(event) => {
|
|
console.log("onSubmit-event--", event[0]?.detail?.value);
|
|
}}
|
|
onReset={(event) => {
|
|
// 重置数据
|
|
}}
|
|
>
|
|
<AtInput
|
|
name="phoneNum"
|
|
border={false}
|
|
title="手机号"
|
|
type="phone"
|
|
placeholder="请输入"
|
|
value={phoneNum}
|
|
disabled={isButtonDisabled}
|
|
onChange={(value) => {
|
|
console.log("value", value);
|
|
setphoneNum(value);
|
|
}}
|
|
/>
|
|
<View className="formCode">
|
|
<AtInput
|
|
name="vCode"
|
|
title="验证码"
|
|
type="number"
|
|
placeholder="请输入4位数字"
|
|
|
|
value={vCode}
|
|
onChange={(value) => {
|
|
setvCode(value);
|
|
}}
|
|
/>
|
|
<AtButton
|
|
className="codeBtn"
|
|
onClick={() => {
|
|
if (!!phoneNum & !!validatePhoneNumber(phoneNum)) {
|
|
// 提交手机数据
|
|
setIsButtonDisabled(true);
|
|
startTimer(); // 开始防抖计时
|
|
} else {
|
|
Taro.atMessage({
|
|
message: "请检查手机号",
|
|
type: `warning`,
|
|
});
|
|
}
|
|
}}
|
|
// type="primary"
|
|
disabled={isButtonDisabled}
|
|
>
|
|
{isButtonDisabled ? `${waitTime} 秒` : "获取"}
|
|
</AtButton>
|
|
</View>
|
|
|
|
<AtButton formType="submit" type="primary">
|
|
{"提交"}
|
|
</AtButton>
|
|
</AtForm>
|
|
|
|
<AtMessage />
|
|
</View>
|
|
);
|
|
};
|
|
|
|
export default Group;
|