peihaoyu/linfeng-community
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

login

Browse Source
This commit is contained in:
HJ 2023-03-04 23:16:29 +08:00
parent 2bcde7f232
commit ab33328874
1 changed files with 99 additions and 99 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

198
src/main/resources/static/linfeng-community-uniapp-ky/pages/login/login.vue
View File

@ -1,100 +1,100 @@
<template> <template>
<view class="login-register"> <view class="login-register">
<view class="title">请先登录/注册</view> <view class="title">请先登录/注册</view>
<u-form :model="form" ref="uForm"> <u-form :model="form" ref="uForm">
<u-form-item> <u-form-item>
<u-input v-model="form.mobile" placeholder="请输入手机号" /> <u-input v-model="form.mobile" placeholder="请输入手机号" />
</u-form-item> </u-form-item>
<u-form-item> <u-form-item>
<u-input v-model="form.code" placeholder="请输入验证码" /> <u-input v-model="form.code" placeholder="请输入验证码" />
<u-button slot="right" size="mini" @click="getCode">{{tips}}</u-button> <u-button slot="right" size="mini" @click="getCode">{{tips}}</u-button>
<u-verification-code :seconds="60" @end="end" @start="start" ref="uCode" @change="codeChange"> <u-verification-code :seconds="60" @end="end" @start="start" ref="uCode" @change="codeChange">
</u-verification-code> </u-verification-code>
</u-form-item> </u-form-item>
</u-form> </u-form>
<view class="button-login"> <view class="button-login">
<u-button v-show="form.mobile && form.code" type="success" @click="phoneLogin" shape="circle">登录</u-button> <u-button v-show="form.mobile && form.code" type="success" @click="phoneLogin" shape="circle">登录</u-button>
<u-button v-show="!form.mobile || !form.code" type="default" shape="circle">登录</u-button> <u-button v-show="!form.mobile || !form.code" type="default" shape="circle">登录</u-button>
</view> </view>
</view> </view>
</template> </template>
<script> <script>
export default { export default {
data() { data() {
return { return {
form: { form: {
mobile: "", mobile: "",
code: "" code: ""
}, },
tips: '验证码' tips: '验证码'
}; };
}, },
methods: { methods: {
phoneLogin() { phoneLogin() {
uni.showLoading({ uni.showLoading({
mask: true, mask: true,
title: '登录中' title: '登录中'
}); });
this.$H.post("user/smsLogin", this.form).then(res => { this.$H.post("user/smsLogin", this.form).then(res => {
if (res.code == 0) { if (res.code == 0) {
uni.setStorageSync("hasLogin", true); uni.setStorageSync("hasLogin", true);
uni.setStorageSync("token", res.token); uni.setStorageSync("token", res.token);
uni.switchTab({ uni.switchTab({
url: '/pages/index/index' url: '/pages/index/index'
}); });
} }
uni.hideLoading(); uni.hideLoading();
}) })
}, },
codeChange(text) { codeChange(text) {
this.tips = text; this.tips = text;
}, },
getCode() { getCode() {
let phoneCodeVerification = /^[1][3-9][0-9]{9}$/; let phoneCodeVerification = /^[1][3-9][0-9]{9}$/;
if (this.form.mobile == '') { if (this.form.mobile == '') {
this.$u.toast('请输入手机号'); this.$u.toast('请输入手机号');
} else if (!phoneCodeVerification.test(this.form.mobile)) { } else if (!phoneCodeVerification.test(this.form.mobile)) {
this.$u.toast('请输入规范的手机号'); this.$u.toast('请输入规范的手机号');
} else { } else {
if (this.$refs.uCode.canGetCode) { if (this.$refs.uCode.canGetCode) {
uni.showLoading({ uni.showLoading({
title: '正在获取验证码' title: '正在获取验证码'
}) })
this.$H.post("user/sendSmsCode", { this.$H.post("user/sendSmsCode", {
mobile: this.form.mobile mobile: this.form.mobile
}).then(res => { }).then(res => {
if (res.code == 0) { if (res.code == 0) {
uni.hideLoading(); uni.hideLoading();
this.$refs.uCode.start(); this.$refs.uCode.start();
this.$u.toast(res.msg); this.$u.toast(res.msg);
} }
}) })
} else { } else {
this.$u.toast('倒计时结束后再发送'); this.$u.toast('倒计时结束后再发送');
} }
} }
}, },
end() {}, end() {},
start() {} start() {}
} }
} }
</script> </script>
<style lang="scss" scoped> <style lang="scss" scoped>
.login-register { .login-register {
padding: 20rpx 50rpx; padding: 20rpx 50rpx;
} }
.button-login { .button-login {
margin-top: 100rpx; margin-top: 100rpx;
} }
.title { .title {
font-size: 40rpx; font-size: 40rpx;
font-weight: 600; font-weight: 600;
margin-bottom: 50rpx; margin-bottom: 50rpx;
} }
</style> </style>