首次完整推送，
V：1.20240808.006
This commit is contained in:
fm453
347
pages/ctms/login/reg.vue
Normal file
347
pages/ctms/login/reg.vue
Normal file
@ -0,0 +1,347 @@
|
||||
<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">昵称</view>
|
||||
<input class="uni-input" name="username" v-model="FormData.username" placeholder="您的姓名或昵称"
|
||||
type="text" />
|
||||
</view>
|
||||
|
||||
<view class="uni-form-item ">
|
||||
<view class="title">邮箱</view>
|
||||
<input class="uni-input" name="email" v-model="FormData.email" placeholder="邮箱号,可用于登陆"
|
||||
type="text" />
|
||||
</view>
|
||||
|
||||
<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>
|
||||
|
||||
<uni-section title="短信验证码" type="circle" :subTitle="mobileErr" v-show="FormData.mobile">
|
||||
<view class="example-body">
|
||||
<uni-row v-show="!captchaPassed" 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="12">
|
||||
<view class="demo-uni-col ">
|
||||
<view class="help-block">人机验证,输入左侧数字</view>
|
||||
</view>
|
||||
</uni-col>
|
||||
<uni-col :span="6">
|
||||
<view class="demo-uni-col light">
|
||||
<view class="uni-form-item ">
|
||||
<input class="uni-col-input" @input="captchaInput" placeholder=" " type="text"
|
||||
autocomplete="off" />
|
||||
</view>
|
||||
</view>
|
||||
</uni-col>
|
||||
</uni-row>
|
||||
|
||||
<uni-row v-show="captchaPassed" class="demo-uni-row" width="100%">
|
||||
<uni-col :span="14">
|
||||
<view class="demo-uni-col light">
|
||||
<view class="uni-form-item ">
|
||||
<input class="uni-col-input" placeholder="请输入验证码" v-model="FormData.vcode"
|
||||
type="text" />
|
||||
</view>
|
||||
</view>
|
||||
</uni-col>
|
||||
<uni-col :span="10">
|
||||
<view class="demo-uni-col 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>
|
||||
<input class="uni-input" name="passwd" type="password" v-model="FormData.passwd" placeholder="" />
|
||||
</view>
|
||||
|
||||
<view class="uni-form-item ">
|
||||
<view class="title">记住我</view>
|
||||
<radio-group name="isKeep" class="radio">
|
||||
<label>
|
||||
<radio value="1" :checked="isKeep==1?true:false" /><text>是</text>
|
||||
</label>
|
||||
<label>
|
||||
<radio value="-1" :checked="isKeep==-1?true:false" /><text>否</text>
|
||||
</label>
|
||||
</radio-group>
|
||||
</view>
|
||||
|
||||
<view class="uni-form-item ">
|
||||
<view class="title">持久登陆</view>
|
||||
<view>
|
||||
<switch name="isLong" :checked="isLong==1?true:false" />
|
||||
</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>
|
||||
</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 {
|
||||
logoImage: '@/static/logo.png',
|
||||
FormData: {
|
||||
username: '',
|
||||
passwd: '',
|
||||
mobile: '',
|
||||
email: '',
|
||||
vcode: ''
|
||||
},
|
||||
ls: 'fansRegFormData',
|
||||
isKeep: -1,
|
||||
isLong: 1,
|
||||
vcode_again: false,
|
||||
vcode_time: 90,
|
||||
leftSecond: 90,
|
||||
captcha: '8888',
|
||||
captchaPassed: true,
|
||||
mobileErr: '填写手机号后获取验证码并输入',
|
||||
timer: null
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
formSubmit: function(e) {
|
||||
var _that = this;
|
||||
//定义表单规则
|
||||
var rule = [{
|
||||
name: "passwd",
|
||||
checkType: "string",
|
||||
checkRule: "8,32",
|
||||
errorMsg: "密码要求8~32位"
|
||||
},
|
||||
{
|
||||
name: "mobile",
|
||||
checkType: "phoneno",
|
||||
checkRule: "",
|
||||
errorMsg: "手机号必填"
|
||||
},
|
||||
{
|
||||
name: "vcode",
|
||||
checkType: "notnull",
|
||||
checkRule: "",
|
||||
errorMsg: "验证码必填"
|
||||
},
|
||||
{
|
||||
name: "isKeep",
|
||||
checkType: "in",
|
||||
checkRule: "1,-1",
|
||||
errorMsg: "是否记住密码"
|
||||
},
|
||||
];
|
||||
//进行表单检查
|
||||
var formData = e.detail.value;
|
||||
var checkRes = graceChecker.check(formData, rule);
|
||||
if (!checkRes) {
|
||||
uni.showToast({
|
||||
title: graceChecker.error,
|
||||
icon: "error"
|
||||
});
|
||||
return false;
|
||||
}
|
||||
//验证通过，缓存表单、请求登陆
|
||||
if (formData.isKeep == 1) {
|
||||
var lsIndex = _that.ls;
|
||||
var data = {
|
||||
username: formData.username,
|
||||
mobile: formData.mobile,
|
||||
email: formData.email,
|
||||
passwd: formData.passwd,
|
||||
};
|
||||
uni.setStorageSync(lsIndex, data);
|
||||
} else {
|
||||
uni.removeStorageSync(lsIndex);
|
||||
}
|
||||
|
||||
//请求封装
|
||||
ctms.user.reg(formData).then((res) => {
|
||||
if (res) {
|
||||
uni.showToast({
|
||||
title: "注册成功!",
|
||||
icon: "success"
|
||||
});
|
||||
uni.navigateBack()
|
||||
}
|
||||
});
|
||||
},
|
||||
formReset: function(e) {
|
||||
// utils.debug('清空登陆表单数据')
|
||||
},
|
||||
captchaGet: function() {
|
||||
var code = hi.captcha.get('reg');
|
||||
this.captcha = code;
|
||||
},
|
||||
captchaInput: function(e) {
|
||||
if (e.detail.value === this.captcha) this.captchaPassed = true;
|
||||
},
|
||||
// captchaCheck: function() {
|
||||
// var res = hi.captcha.check('reg', this.captcha);
|
||||
// },
|
||||
checkMobile: function() {
|
||||
var res = hi.isPhone(this.FormData.mobile);
|
||||
if (!res) {
|
||||
this.mobileErr = '请输入正确的手机号码';
|
||||
} else {
|
||||
this.FormData.mobile = res;
|
||||
this.mobileErr = '您的手机号码是：' + res;
|
||||
}
|
||||
},
|
||||
getVcode: function() {
|
||||
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('reg', 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
|
||||
})
|
||||
}
|
||||
},
|
||||
|
||||
onShow: function() {
|
||||
var code = hi.captcha.get('reg');
|
||||
this.captcha = code;
|
||||
},
|
||||
onLoad: function() {
|
||||
// ctms.user.checkLogin();
|
||||
}
|
||||
}
|
||||
</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: 0 1rem;
|
||||
}
|
||||
|
||||
.dark_deep {
|
||||
background-color: #99a9bf;
|
||||
}
|
||||
|
||||
.dark {
|
||||
background-color: #d3dce6;
|
||||
}
|
||||
|
||||
.light {
|
||||
background-color: #e5e9f2;
|
||||
}
|
||||
|
||||
.uni-section {
|
||||
padding-top: 1rem;
|
||||
}
|
||||
|
||||
.example-body {
|
||||
/* #ifndef APP-NVUE */
|
||||
display: block;
|
||||
/* #endif */
|
||||
padding: 5rpx 10rpx 0;
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
/* 验证码区域 */
|
||||
.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>
|
||||
Reference in New Issue
Block a user