sl-express/project-wl-siji-uniapp-vue3/pages/login/index.vue

138 lines
3.4 KiB
Vue
Raw Normal View History

2023-09-04 16:40:17 +08:00
<!-- 手机号登录页面 -->
<template>
<!-- 公用nav -->
<view class="navBox"><uni-nav-bar title="神领物流" :border="false" /></view>
<!-- end -->
<view class="loginBox">
<view class="tit">
<text>手机号登录</text>
<text class="text" @click="goLogin">
账号登录
<icon></icon>
</text>
</view>
<!-- 登录表单 手机号验证码 -->
<view class="loginMain">
<uni-forms ref="customForm" :rules="customRules" :modelValue="fromInfo">
<uni-forms-item name="phone"><uni-easyinput class="item" v-model="fromInfo.phone" placeholder="请输入手机号" /></uni-forms-item>
<uni-forms-item name="verifyCode">
<uni-easyinput class="item inputW" v-model="fromInfo.verifyCode" placeholder="请输入验证码" />
<view class="codeBox">
<text class="code" v-show="codeInfo.show" @click="getCode">获取验证码</text>
<text class="code fontCol" v-show="!codeInfo.show">{{ codeInfo.times }}s后重新获取</text>
</view>
</uni-forms-item>
</uni-forms>
<!-- 按钮 -->
<view class="btnBox" style="padding-top:100rpx;">
<text class="button"
:class="fromInfo.phone.length === 0 || fromInfo.verifyCode.length === 0 ? 'buttonDis1' : 'button'"
@click="handleSubmit"
> </text>
</view>
<!-- end -->
</view>
<!-- end -->
</view>
</template>
<script setup>
import { ref, reactive, onMounted } from 'vue';
import { useStore } from 'vuex';
// 接口
import { phoneLogins, getUserInfo, getsmsCode } from '../api/user.js';
// 验证
import { validatePhone, timeCountdown, isPhone } from '@/utils/validate';
// ------定义变量------
const store = useStore(); //vuex获取储存数据
const customForm = ref();
const isVerifySuccess = ref(false);
// 表单数据
const fromInfo = reactive({
phone: '', //手机号
verifyCode: '' // 验证码
});
// 验证码倒计时数据
const codeInfo = reactive({
show: true,
timer: null,
times: 60
});
// 表单校验
const customRules = reactive({
phone: {
rules: [
{
required: true,
validateFunction: validatePhone,
errorMessage: '请输入手机号'
}
]
},
verifyCode: {
rules: [
{
required: true,
errorMessage: '请输入验证码'
}
]
}
});
// ------生命周期------
onMounted(() => {});
// ------定义方法------
// 获取验证码
const getCode = async () => {
let p = fromInfo.phone;
isVerifySuccess.value = isPhone(p);
if (isVerifySuccess.value) {
timeCountdown(codeInfo);
const parent = {
phone: phone.value
};
} else {
return uni.showToast({
title: '手机号输入错误!请重新输入',
duration: 1000,
icon: 'none'
});
}
};
// 登录
const handleSubmit = async() => {
// 表单校验
const valid = await customForm.value.validate();
if (valid) {
// 登录接口
await phoneLogins(fromInfo)
.then(res => {
if (res.code === 200) {
store.commit('user/setToken', res.token);
// 通过vuex获取用户信息
store.dispatch('user/GetUsersInfo')
// 跳转到首页
uni.redirectTo({
url: '/pages/index/index'
});
} else {
return uni.showToast({
title: res.data.msg,
duration: 1000,
icon: 'none'
});
// 密码输入错误!请重新输入
// 账号输入错误!请重新输入
}
})
.catch(err => {});
}
};
// 去手机登录页面
const goLogin = () => {
uni.redirectTo({
url: '/pages/login/user'
});
};
</script>
<style src="./index.scss" lang="scss" scoped></style>