<template>
|
<view class="pages-login-register">
|
<view class="uni-panel-content items-center">
|
<view class="login-content">
|
<view class="justify-center">
|
<image class="title-img" src="/images/earth.svg" alt="svg 图片" />
|
</view>
|
<view class="login-form">
|
<view class="login-form-item ">
|
<image class="icon" src="/images/mobile.svg" alt="svg 图片" />
|
<input class="input" :focus="formData.accountFocus" name="account" comfirm-type="done"
|
type="text" v-model="form.account" placeholder="输入手机号码" />
|
</view>
|
<view class="login-form-item ">
|
<image class="icon" src="/images/chat.svg" alt="svg 图片" />
|
<input class="input" comfirm-type="done" v-model="form.mobileCode" placeholder="短信验证码" />
|
<view v-if="disabledSendCode" class="disabled">{{sendCodeCountdown}}秒后重新发送</view>
|
<a v-else @click="clickSendVerifyCode">发送验证码</a>
|
|
</view>
|
<view class="login-form-item ">
|
<image class="icon" src="/images/lock.svg" alt="svg 图片" />
|
<input class="input" :focus="formData.passwordFocus" name="password" password
|
comfirm-type="done" v-model="form.password" placeholder="设置登录密码" />
|
|
</view>
|
<view class=" login-form-item ">
|
<checkbox :value="checkedAgree" @change="handleAgreeChange" />已阅读并同意《<a
|
@click="clickUserAgreement">用户协议</a>》
|
</view>
|
<view class="button-group">
|
<a-button :disabled="disabledOk" type="primary" class="button" @click="clickOK">确认</a-button>
|
</view>
|
</view>
|
|
</view>
|
</view>
|
</view>
|
</template>
|
|
<script>
|
import {
|
showToast,
|
showModal
|
} from "@/comm/utils.js"
|
import {
|
Button
|
} from 'antd-mobile-vue-next'
|
export default {
|
name: "PagesLoginRegister",
|
components: {
|
'a-button': Button
|
},
|
data() {
|
return {
|
form: {
|
account: '',
|
password: '',
|
mobileCode: "",
|
},
|
formData: {
|
accountFocus: true,
|
passwordFocus: false
|
},
|
disabledSendCode: false,
|
sendCodeCountdown: 0,
|
checkedAgree: false
|
}
|
},
|
computed: {
|
disabledOk() {
|
let text = this.form.account.trim()
|
if (!text) {
|
return true
|
}
|
text = this.form.password.trim()
|
if (!text) {
|
return true
|
}
|
text = this.form.mobileCode.trim()
|
if (!text) {
|
return true
|
}
|
return false
|
}
|
},
|
methods: {
|
setData(obj) {
|
let that = this;
|
let keys = [];
|
let val, data;
|
|
Object.keys(obj).forEach(function(key) {
|
keys = key.split(".");
|
val = obj[key];
|
data = that.$data;
|
keys.forEach(function(key2, index) {
|
if (index + 1 == keys.length) {
|
that.$set(data, key2, val);
|
} else {
|
if (!data[key2]) {
|
that.$set(data, key2, {});
|
}
|
}
|
data = data[key2];
|
});
|
});
|
},
|
handleAgreeChange(e) {
|
|
console.log(e)
|
this.checkedAgree = e.detail.value;
|
},
|
clickOK() {
|
if (!this.checkedAgree) {
|
showToast("请阅读并同意用户协议")
|
return
|
}
|
uni.reLaunch({
|
url: "/pages/login/index"
|
})
|
},
|
clickSendVerifyCode() {
|
|
if (this.disabledSendCode) {
|
return
|
}
|
let text = this.form.account.trim()
|
if (!text) {
|
showToast("请输入手机号")
|
return
|
}
|
|
this.sendCodeCountdown = 60
|
this.disabledSendCode = true
|
const idInterval = setInterval(() => {
|
if (this.sendCodeCountdown > 0) {
|
this.sendCodeCountdown--
|
} else {
|
this.sendCodeCountdown = 0
|
clearInterval(idInterval);
|
this.disabledSendCode = false
|
}
|
}, 1000)
|
},
|
clickUserAgreement() {},
|
|
|
}
|
}
|
</script>
|
|
<style lang="scss" scoped>
|
.pages-login-register {
|
display: flex;
|
width: 750rpx;
|
height: 100vh;
|
flex-direction: column;
|
|
.uni-panel-content {
|
display: flex;
|
flex: 1;
|
width: 750rpx;
|
}
|
|
.login-content {
|
width: 750rpx;
|
}
|
|
.justify-center {
|
justify-content: center;
|
}
|
|
.items-center {
|
align-items: center
|
}
|
|
.title-img {
|
display: block;
|
margin: auto;
|
width: 300rpx;
|
height: 300rpx;
|
}
|
|
.login-form {
|
display: flex;
|
padding: 20rpx 40rpx;
|
flex-direction: column;
|
}
|
|
.login-form-item {
|
padding: 10rpx;
|
display: flex;
|
margin: 10rpx;
|
font-size: 30rpx !important;
|
flex-direction: row;
|
border-bottom: 2rpx solid #ddd;
|
|
.icon {
|
opacity: 0.3;
|
margin: 12rpx 20rpx;
|
width: 40rpx;
|
height: 40rpx;
|
}
|
|
.input {
|
flex: 1;
|
padding: 12rpx 16rpx;
|
background-color: transparent;
|
}
|
|
}
|
|
.button-group {
|
display: flex;
|
justify-content: center;
|
align-items: center;
|
flex-direction: column;
|
font-size: 30rpx !important;
|
}
|
|
.disabled {
|
color: #888;
|
}
|
|
.button {
|
margin: auto;
|
margin-top: 20rpx;
|
width: 300rpx;
|
|
}
|
|
}
|
</style>
|
