121 lines
2.9 KiB
Vue
121 lines
2.9 KiB
Vue
<template>
|
|
<view class="login">
|
|
<view class="title">手机号登录</view>
|
|
|
|
<view>
|
|
<u-form :model="form" ref="form">
|
|
<u-form-item label="+86" class="mobile">
|
|
<u-input v-model="form.mobile" placeholder="请输入电话"/>
|
|
</u-form-item>
|
|
<u-form-item>
|
|
<u-input v-model="form.code" placeholder="请输入验证码"></u-input>
|
|
<view slot="right">
|
|
<u-verification-code :seconds="seconds" @end="end" @start="start" ref="uCode"
|
|
@change="codeChange"></u-verification-code>
|
|
<u-button size="mini" shape="circle" hover-class="none" @tap="getCode">{{tips}}</u-button>
|
|
</view>
|
|
</u-form-item>
|
|
</u-form>
|
|
</view>
|
|
|
|
<view class="u-margin-top-32">
|
|
<u-button @click="handleLogin" hover-class="none" :customStyle="{backgroundColor: themeColor, color: '#fff', border: 'none', padding: '16rpx 0'}" :hair-line="false" shape="circle">登录/注册</u-button>
|
|
</view>
|
|
|
|
<view class="u-margin-top-32 u-flex u-row-center">
|
|
<u-checkbox v-model="form.checked" @change="allowProtocol" shape="circle" :active-color="themeColor">
|
|
<view class="sm row-start">
|
|
已阅读并同意
|
|
<navigator :style="{color: themeColor}" hover-class="none" url="/pages/server_explan/server_explan?type=0">
|
|
《服务协议》
|
|
</navigator>
|
|
和
|
|
<navigator :style="{color: themeColor}" hover-class="none" url="/pages/server_explan/server_explan?type=1">
|
|
《隐私政策》
|
|
</navigator>
|
|
</view>
|
|
</u-checkbox>
|
|
</view>
|
|
</view>
|
|
</template>
|
|
|
|
<script>
|
|
export default {
|
|
data() {
|
|
return {
|
|
form: {
|
|
mobile: '',
|
|
code: '',
|
|
checked: false
|
|
},
|
|
seconds: 60,
|
|
tips: ''
|
|
}
|
|
},
|
|
methods: {
|
|
// 更改验证码按钮提示语
|
|
codeChange(text) {
|
|
this.tips = text;
|
|
},
|
|
|
|
// 获取验证码
|
|
getCode() {
|
|
if(this.$refs.uCode.canGetCode) {
|
|
// 模拟向后端请求验证码
|
|
uni.showLoading({
|
|
title: '正在获取验证码'
|
|
})
|
|
setTimeout(() => {
|
|
uni.hideLoading();
|
|
// 这里此提示会被this.start()方法中的提示覆盖
|
|
this.$u.toast('验证码已发送');
|
|
// 通知验证码组件内部开始倒计时
|
|
this.$refs.uCode.start();
|
|
}, 2000);
|
|
} else {
|
|
this.$u.toast('倒计时结束后再发送');
|
|
}
|
|
},
|
|
|
|
// 是否同意登录协议
|
|
allowProtocol() {
|
|
|
|
},
|
|
|
|
handleLogin() {
|
|
const {mobile, code, checked} = this.form
|
|
if (!this.$u.test.mobile(mobile)) {
|
|
return this.$u.toast('请检查手机号码格式！')
|
|
}
|
|
|
|
if (!code) {
|
|
return this.$u.toast('请输入验证码！')
|
|
}
|
|
|
|
if (!checked) {
|
|
return this.$u.toast('请输入验证码！')
|
|
}
|
|
console.log(123123)
|
|
}
|
|
}
|
|
}
|
|
</script>
|
|
|
|
<style lang="scss" scoped>
|
|
page {
|
|
background-color: #fff;
|
|
}
|
|
|
|
.login {
|
|
margin: 0 64rpx;
|
|
|
|
.title {
|
|
font-size: 56rpx;
|
|
margin-top: 190rpx;
|
|
}
|
|
|
|
.mobile {
|
|
margin-top: 96rpx;
|
|
}
|
|
}
|
|
</style> |