392 lines
14 KiB
Vue
392 lines
14 KiB
Vue
<template>
|
||
<view class="content">
|
||
<uni-notice-bar text="手机号及验证码是必填的;为了防止机器恶意注册,获取手机短信前前您需要先进行人机验证。" />
|
||
<view class="uni-common-mt uni-form">
|
||
<form @submit="formSubmit" @reset="formReset">
|
||
<view class="uni-form-item ">
|
||
<view class="title"><code>*</code>手机号</view>
|
||
<input class="uni-input" name="mobile" v-model="FormData.mobile" placeholder="您的手机号" type="text"
|
||
@blur="checkMobile" @input="checkMobile" />
|
||
</view>
|
||
|
||
<view class="uni-form-item ">
|
||
<uni-row class="demo-uni-row" width="100%">
|
||
<uni-col :span="6">
|
||
<view class="demo-uni-col dark">
|
||
<view @tap="captchaGet" class="captcha">{{captcha}}
|
||
</view>
|
||
</view>
|
||
</uni-col>
|
||
<uni-col :span="18">
|
||
<view class="demo-uni-col">
|
||
<input class="uni-col-input" @input="captchaInput" placeholder="人机验证,输入左侧数字" type="text"
|
||
autocomplete="off" />
|
||
</view>
|
||
</uni-col>
|
||
</uni-row>
|
||
</view>
|
||
|
||
<uni-section title="短信验证码" type="circle" :subTitle="mobileErr">
|
||
<view class="example-body">
|
||
<uni-row v-show="FormData.mobile" class="demo-uni-row" width="100%">
|
||
<uni-col :span="14">
|
||
<view class="demo-uni-col">
|
||
<view class="uni-form-item ">
|
||
<input class="uni-col-input" placeholder="请输入验证码" v-model="FormData.vcode"
|
||
name="vcode" type="text" />
|
||
</view>
|
||
</view>
|
||
</uni-col>
|
||
<uni-col :span="10">
|
||
<view :class='"demo-uni-col vcode-button "+ (captchaPassed?"primary":"dark")'>
|
||
<view @tap="getVcode" v-show="!vcode_again">获取验证码
|
||
</view>
|
||
<view v-show="vcode_again">重新获取 {{leftSecond}}</view>
|
||
</view>
|
||
</uni-col>
|
||
</uni-row>
|
||
</view>
|
||
</uni-section>
|
||
|
||
<view class="uni-form-item ">
|
||
<view class="title">持久登陆</view>
|
||
<view>
|
||
<switch name="isLong" :checked="isLong===1" />
|
||
</view>
|
||
</view>
|
||
<view class="uni-form-item">
|
||
<view class="help-block">
|
||
启用后，只有您主动点击退出按钮后，你的登陆状态才会被取消。
|
||
</view>
|
||
</view>
|
||
|
||
<view class="uni-button-group">
|
||
<uni-row class="demo-uni-row" width="100%">
|
||
<uni-col :span="12">
|
||
<button class="btn btn-success" form-type="submit">确认</button>
|
||
</uni-col>
|
||
<uni-col :span="12">
|
||
<button class="btn btn-default" type="default" form-type="reset">取消</button>
|
||
</uni-col>
|
||
</uni-row>
|
||
</view>
|
||
</form>
|
||
</view>
|
||
|
||
<uni-fab ref="fab" :pattern="fabs.pattern" :content="fabs.content" :horizontal="fabs.horizontal"
|
||
:vertical="fabs.vertical" :direction="fabs.direction" @trigger="fabTrigger" @fabClick="fabClick" />
|
||
</view>
|
||
</template>
|
||
|
||
<script>
|
||
import graceChecker from "@/common/graceChecker.js";
|
||
import config from "@/config/ctms.config.js";
|
||
import utils from "@/utils/common.js";
|
||
import ctms from '@/apis/ctms/index.js';
|
||
import hi from "@/common/util.js";
|
||
|
||
export default {
|
||
data() {
|
||
return {
|
||
FormData: {
|
||
mobile: '',
|
||
vcode: ''
|
||
},
|
||
isLong: 1,
|
||
vcode_again: false,
|
||
vcode_time: 90,
|
||
leftSecond: 90,
|
||
captcha: '8888',
|
||
captchaPassed: false,
|
||
mobileErr: '填写手机号后获取验证码并输入',
|
||
timer: null,
|
||
|
||
//悬浮按钮
|
||
fabs: {
|
||
horizontal: 'left',
|
||
vertical: 'bottom',
|
||
direction: 'horizontal', //horizontal水平展开；vertical垂直展开
|
||
pattern: {
|
||
color: '#7A7E83',
|
||
backgroundColor: '#fff',
|
||
selectedColor: '#007AFF',
|
||
buttonColor: '#fff',
|
||
iconColor: '#aaa'
|
||
},
|
||
content: [{
|
||
iconPath: '/static/fab/home.png',
|
||
selectedIconPath: '/static/fab/homeactive.png',
|
||
text: '首页',
|
||
active: false,
|
||
diyfn: 'home'
|
||
},
|
||
{
|
||
iconPath: '/static/fab/guanzhu.png',
|
||
selectedIconPath: '/static/fab/guanzhuactive.png',
|
||
text: '关注',
|
||
active: false,
|
||
diyfn: 'news'
|
||
},
|
||
{
|
||
iconPath: '/static/fab/me.png',
|
||
selectedIconPath: '/static/fab/meactive.png',
|
||
text: '用户',
|
||
active: false,
|
||
diyfn: 'user'
|
||
},
|
||
|
||
{
|
||
iconPath: '/static/fab/news.png',
|
||
selectedIconPath: '/static/fab/newsactive.png',
|
||
text: '公告',
|
||
active: false,
|
||
diyfn: 'notice'
|
||
}
|
||
]
|
||
}
|
||
}
|
||
},
|
||
methods: {
|
||
formSubmit: function(e) {
|
||
var _that = this;
|
||
//定义表单规则
|
||
var rule = [{
|
||
name: "mobile",
|
||
checkType: "phoneno",
|
||
checkRule: "",
|
||
errorMsg: "手机号必填"
|
||
},
|
||
{
|
||
name: "vcode",
|
||
checkType: "notnull",
|
||
checkRule: "",
|
||
errorMsg: "验证码必填"
|
||
}
|
||
];
|
||
//进行表单检查
|
||
var formData = e.detail.value;
|
||
var checkRes = graceChecker.check(formData, rule);
|
||
if (!checkRes) {
|
||
uni.showToast({
|
||
title: graceChecker.error,
|
||
icon: "error"
|
||
});
|
||
return false;
|
||
}
|
||
|
||
//请求封装
|
||
ctms.user.smsLogin(formData).then((res) => {
|
||
if (res) {
|
||
uni.showToast({
|
||
title: "登陆成功!",
|
||
icon: "success"
|
||
});
|
||
if (_that.uniIdRedirectUrl) {
|
||
uni.reLaunch({
|
||
url: _that.uniIdRedirectUrl
|
||
})
|
||
} else {
|
||
uni.navigateBack()
|
||
}
|
||
}
|
||
});
|
||
},
|
||
formReset: function(e) {
|
||
// utils.debug('清空登陆表单数据')
|
||
},
|
||
captchaGet: function() {
|
||
var code = hi.captcha.get('login');
|
||
this.captcha = code;
|
||
},
|
||
captchaInput: function(e) {
|
||
if (e.detail.value === this.captcha) this.captchaPassed = true;
|
||
},
|
||
checkMobile: function() {
|
||
var res = hi.isPhone(this.FormData.mobile);
|
||
if (!res) {
|
||
this.mobileErr = '请输入正确的手机号码';
|
||
} else {
|
||
this.FormData.mobile = res;
|
||
this.mobileErr = '您的手机号码是：' + res;
|
||
}
|
||
},
|
||
getVcode: function() {
|
||
if (!this.captchaPassed) {
|
||
uni.showToast({
|
||
title: "请先通过人机验证",
|
||
icon: "none"
|
||
})
|
||
return false;
|
||
}
|
||
let timer = setInterval(() => {
|
||
if (this.leftSecond === 0) {
|
||
clearInterval(this.timer)
|
||
this.leftSecond = this.vcode_time;
|
||
this.vcode_again = false;
|
||
} else {
|
||
this.leftSecond--;
|
||
}
|
||
}, 1000);
|
||
this.timer = timer;
|
||
this.vcode_again = true;
|
||
this.requestVcode();
|
||
},
|
||
requestVcode: function() {
|
||
ctms.vcode.get('login', this.FormData.mobile).then(function(res) {
|
||
if (res) {
|
||
switch (res.errorcode) {
|
||
case 0:
|
||
utils.toast('短信已发送');
|
||
break;
|
||
default:
|
||
var msg = res.msg || '短信发送失败';
|
||
utils.toast(msg);
|
||
break;
|
||
}
|
||
}
|
||
});
|
||
},
|
||
callMe: function(e) {
|
||
var phone = config.kfPhone;
|
||
uni.makePhoneCall({
|
||
phoneNumber: phone
|
||
})
|
||
},
|
||
//浮窗按钮相关操作
|
||
fabClick(e) {
|
||
// utils.debug('点击了悬浮按钮')
|
||
},
|
||
fabTrigger(e) {
|
||
var eindex = e.index;
|
||
this.fabs.content[e.index].active = !e.item.active;
|
||
|
||
if (!e.item.diyfn) {
|
||
//未设置这个difyfn字段的，无操作
|
||
return false;
|
||
}
|
||
var diyfn = e.item.diyfn,
|
||
dir = config.pageDir,
|
||
page;
|
||
switch (diyfn) {
|
||
case 'home':
|
||
page = 'tabbar/index/index';
|
||
return uni.reLaunch({
|
||
url: dir + page
|
||
})
|
||
break;
|
||
case 'news':
|
||
page = 'news/list/list';
|
||
break;
|
||
case 'user':
|
||
page = 'me/index';
|
||
break;
|
||
case 'notice':
|
||
page = 'tabbar/notice/index';
|
||
return uni.reLaunch({
|
||
url: dir + page
|
||
})
|
||
break;
|
||
}
|
||
return uni.navigateTo({
|
||
url: dir + page
|
||
})
|
||
}
|
||
},
|
||
|
||
onShow: function() {
|
||
var code = hi.captcha.get('login');
|
||
this.captcha = code;
|
||
},
|
||
onLoad: function(o) {
|
||
// 自动跳转到登录页面时会携带uniIdRedirectUrl参数
|
||
if (o.uniIdRedirectUrl) {
|
||
this.uniIdRedirectUrl = decodeURIComponent(o.uniIdRedirectUrl)
|
||
}
|
||
}
|
||
}
|
||
</script>
|
||
|
||
<style>
|
||
@import url("login.css");
|
||
|
||
/* 以下是组合输入框 */
|
||
.demo-uni-row {
|
||
margin-bottom: 10px;
|
||
|
||
/* 组件在小程序端display为inline */
|
||
/* QQ、抖音小程序文档写有 :host，但实测不生效 */
|
||
/* 百度小程序没有 :host */
|
||
/* #ifdef MP-TOUTIAO || MP-QQ || MP-BAIDU */
|
||
display: block;
|
||
/* #endif */
|
||
}
|
||
|
||
/* 支付宝小程序没有 demo-uni-row 层级 */
|
||
/* 微信小程序使用了虚拟化节点，没有 demo-uni-row 层级 */
|
||
/* #ifdef MP-ALIPAY || MP-WEIXIN */
|
||
::v-deep .uni-row {
|
||
margin-bottom: 10px;
|
||
}
|
||
|
||
/* #endif */
|
||
|
||
.demo-uni-col {
|
||
height: 36px;
|
||
line-height: 36px;
|
||
border-radius: 5px;
|
||
}
|
||
|
||
.uni-col-input {
|
||
margin: 1rem 1rem;
|
||
width: 100%;
|
||
}
|
||
|
||
.dark_deep {
|
||
background-color: #99a9bf;
|
||
}
|
||
|
||
.dark {
|
||
background-color: #d3dce6;
|
||
}
|
||
|
||
.primary {
|
||
background-color: #0095F6;
|
||
color: #fff;
|
||
}
|
||
|
||
.light {
|
||
background-color: #e5e9f2;
|
||
}
|
||
|
||
.uni-section {
|
||
padding-top: 1rem;
|
||
}
|
||
|
||
.example-body {
|
||
/* #ifndef APP-NVUE */
|
||
display: block;
|
||
/* #endif */
|
||
padding: 5rpx 10rpx 0;
|
||
overflow: hidden;
|
||
}
|
||
|
||
.vcode-button {
|
||
text-align: center;
|
||
}
|
||
|
||
/* 验证码区域 */
|
||
.captcha {
|
||
color: #fd8208;
|
||
font-size: 1.5rem;
|
||
font-weight: bolder;
|
||
text-align: center;
|
||
text-align-last: justify;
|
||
}
|
||
|
||
.captcha:after {
|
||
content: '';
|
||
display: inline-block;
|
||
width: 100%;
|
||
}
|
||
</style>
|