165 lines
3.5 KiB
Vue
165 lines
3.5 KiB
Vue
<script lang="ts" setup>
|
|
import Taro from "@tarojs/taro";
|
|
import { ref } from "vue";
|
|
import { getVerifyCode, phoneLogin } from "@/api/user";
|
|
import logoImg from "../../../static/logo.jpg";
|
|
|
|
Taro.useLoad((options) => {
|
|
console.log(options);
|
|
});
|
|
|
|
const basicData = ref({
|
|
phone: "",
|
|
code: "",
|
|
});
|
|
|
|
const smsDisabled = ref(false);
|
|
|
|
const smsStr = ref("获取验证码");
|
|
|
|
// 获取验证码
|
|
const getSmsCode = async () => {
|
|
if (
|
|
!/^1(3\d|4[5-9]|5[0-35-9]|6[567]|7[0-8]|8\d|9[0-35-9])\d{8}$/.test(
|
|
basicData.value.phone
|
|
)
|
|
)
|
|
return Taro.showToast({
|
|
title: "请输入正确的手机号码",
|
|
icon: "none",
|
|
});
|
|
await getVerifyCode({
|
|
phone: basicData.value.phone.toString(),
|
|
});
|
|
smsDisabled.value = true;
|
|
let time = 60;
|
|
const timer = setInterval(() => {
|
|
time--;
|
|
smsStr.value = `${time}s`;
|
|
if (time === 0) {
|
|
clearInterval(timer);
|
|
smsDisabled.value = false;
|
|
smsStr.value = "获取验证码";
|
|
}
|
|
}, 1000);
|
|
};
|
|
|
|
const login = async () => {
|
|
if (
|
|
!/^1(3\d|4[5-9]|5[0-35-9]|6[567]|7[0-8]|8\d|9[0-35-9])\d{8}$/.test(
|
|
basicData.value.phone
|
|
)
|
|
)
|
|
return Taro.showToast({
|
|
title: "请输入正确的手机号码",
|
|
icon: "none",
|
|
});
|
|
if (!basicData.value.code)
|
|
return Taro.showToast({
|
|
title: "请输入验证码",
|
|
icon: "none",
|
|
});
|
|
|
|
const res = await phoneLogin({
|
|
Phone: basicData.value.phone,
|
|
Code: basicData.value.code,
|
|
Referee: Taro.getStorageSync("bind_id") || "",
|
|
});
|
|
Taro.showToast({
|
|
title: res.msg,
|
|
icon: "success",
|
|
duration: 2000,
|
|
});
|
|
Taro.setStorageSync("token", res.data.token);
|
|
setTimeout(() => {
|
|
Taro.removeStorageSync("bind_id");
|
|
Taro.switchTab({
|
|
url: "/pages/user/index",
|
|
});
|
|
}, 2000);
|
|
};
|
|
</script>
|
|
|
|
<template>
|
|
<view class="wrapper">
|
|
<image src="../../../static/wechat_login.jpg" />
|
|
<view class="logo">
|
|
<image :src="logoImg" />
|
|
<view>捷兑通</view>
|
|
</view>
|
|
<view class="center">
|
|
<nut-form :model-value="basicData" ref="RefForm">
|
|
<nut-form-item label="手机号码：">
|
|
<nut-input
|
|
v-model="basicData.phone"
|
|
class="nut-input-text"
|
|
placeholder="请输入手机号码"
|
|
type="text"
|
|
/>
|
|
</nut-form-item>
|
|
<nut-form-item label="验证码：">
|
|
<view style="display: flex">
|
|
<nut-input
|
|
v-model="basicData.code"
|
|
class="nut-input-text"
|
|
placeholder="请输入验证码"
|
|
type="text"
|
|
/>
|
|
<nut-button
|
|
size="mini"
|
|
style="margin-left: 10px"
|
|
@click="getSmsCode"
|
|
:disabled="smsDisabled"
|
|
>{{ smsStr }}</nut-button
|
|
>
|
|
</view>
|
|
</nut-form-item>
|
|
<nut-form-item>
|
|
<nut-button type="primary" block @click="login">登录</nut-button>
|
|
</nut-form-item>
|
|
</nut-form>
|
|
</view>
|
|
</view>
|
|
</template>
|
|
|
|
<style lang="scss">
|
|
page {
|
|
background: #fff;
|
|
}
|
|
|
|
.wrapper {
|
|
position: relative;
|
|
|
|
image {
|
|
width: 100%;
|
|
height: 838px;
|
|
}
|
|
|
|
.logo {
|
|
position: absolute;
|
|
top: 35%;
|
|
left: 50%;
|
|
transform: translate(-50%, -50%);
|
|
text-align: center;
|
|
font-size: 35px;
|
|
line-height: 70px;
|
|
|
|
image {
|
|
width: 200px;
|
|
height: 200px;
|
|
border-radius: 50%;
|
|
}
|
|
}
|
|
|
|
.center {
|
|
position: absolute;
|
|
top: 55%;
|
|
width: 100%;
|
|
display: flex;
|
|
flex-direction: column;
|
|
justify-content: flex-start;
|
|
padding: 0px 10px;
|
|
}
|
|
}
|
|
</style>
|