188 lines
4.1 KiB
Vue
188 lines
4.1 KiB
Vue
<script lang="ts" setup>
|
|
import Taro from '@tarojs/taro';
|
|
import {ref} from 'vue';
|
|
import {getVerifyCode, phoneLogin, getPersonalInfo} from '@/api/user';
|
|
import logoImg from '../../../static/logo.jpg';
|
|
|
|
const optData = ref<any>({});
|
|
|
|
Taro.useLoad(options => {
|
|
optData.value = 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);
|
|
if (optData.value.isBack !== 'undefined' && optData.value.isBack) {
|
|
await getUserInfo();
|
|
Taro.navigateBack({
|
|
delta: 2,
|
|
});
|
|
} else {
|
|
setTimeout(() => {
|
|
Taro.removeStorageSync('wx_code');
|
|
Taro.removeStorageSync('bind_id');
|
|
Taro.switchTab({
|
|
url: '/pages/user/index',
|
|
});
|
|
}, 2000);
|
|
}
|
|
};
|
|
|
|
const getUserInfo = async () => {
|
|
const res = await getPersonalInfo();
|
|
const userInfo = {
|
|
...res.data,
|
|
data: {
|
|
...res.data.data,
|
|
permission: res.data.data.permission
|
|
? JSON.parse(res.data.data.permission)
|
|
: {},
|
|
},
|
|
};
|
|
Taro.setStorageSync('userInfo', userInfo);
|
|
};
|
|
</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>
|