<template>
|
<view class="flex-col page">
|
<!-- #ifdef APP-PLUS -->
|
<view class="status_bar">
|
<view class="top_view"></view>
|
</view>
|
<!-- #endif -->
|
<u-icon name="arrow-left" class="back" color="#707070" size="40" @click="pageBack">
|
</u-icon>
|
<view class="flex-col group">
|
<text class="text">注册</text>
|
<text class="text_1">请输入手机号密码注册</text>
|
<view class="flex-col group_1">
|
<view class="flex-row section_1">
|
<u-icon name="account" color="#707070" size="30" style="margin-right: 12rpx;"></u-icon>
|
<input style="font-size: 28rpx;" type="number" v-model="form1.mobile" :maxlength="11"
|
placeholder="请输入您的手机号" placeholder-class="input-placeholder" />
|
</view>
|
<view class="justify-between section_2">
|
<view class="flex-row group_2">
|
<u-icon name="email" color="#707070" size="30" style="margin-right: 12rpx;"></u-icon>
|
<input style="font-size: 28rpx;" type="number" v-model="form1.code" placeholder="验证码"
|
placeholder-class="input-placeholder" />
|
</view>
|
<view class="flex-col text-wrapper">
|
<vk-u-verification-code seconds="60" :mobile="form1.mobile" type="register">
|
</vk-u-verification-code>
|
</view>
|
</view>
|
<view class="section_3 flex-row">
|
<u-icon name="lock" color="#707070" size="30" style="margin-right: 12rpx;"></u-icon>
|
<input style="font-size: 28rpx;" type="text" password v-model="form1.password"
|
placeholder="请输入您的登录密码" placeholder-class="input-placeholder" />
|
</view>
|
<view class="section_3 flex-row">
|
<u-icon name="lock" color="#707070" size="30" style="margin-right: 12rpx;"></u-icon>
|
<input style="font-size: 28rpx;" type="text" password v-model="form1.password2"
|
placeholder="请再次输入您的登录密码" placeholder-class="input-placeholder" />
|
</view>
|
</view>
|
<view class="flex-col items-center button" @click="loginBySms">
|
<text>注册</text>
|
</view>
|
<view class="flex-row group_3">
|
<u-checkbox v-model="form1.agreement" active-color="#FF960C" shape="circle" class="check_box">
|
<view class="group_4">
|
<text class="text_9">我已认真阅读并同意</text>
|
<text class="text_10">
|
<text @click.stop="pageTo('./privacy?type=2')">《用户须知及使用协议》</text>、
|
<text @click.stop="pageTo('./privacy?type=1')">《隐私政策》</text>
|
</text>
|
</view>
|
</u-checkbox>
|
</view>
|
</view>
|
</view>
|
</template>
|
|
<script>
|
var that; // 当前页面对象
|
var vk; // vk依赖
|
export default {
|
data() {
|
// 页面数据变量
|
return {
|
// init请求返回的数据
|
data: {
|
|
},
|
// 表单请求数据
|
form1: {
|
agreement: false,
|
mobile: "",
|
password: "",
|
password2: "",
|
code: "",
|
type: "register",
|
inviteCode: getApp().globalData.invite
|
},
|
scrollTop: 0,
|
isRotate: false,
|
logoImage: "/static/logo.png",
|
}
|
},
|
onPageScroll(e) {
|
that.scrollTop = e.scrollTop;
|
},
|
// 监听 - 页面每次【加载时】执行(如：前进)
|
onLoad(options) {
|
that = this;
|
vk = that.vk;
|
that.init(options);
|
},
|
// 监听 - 页面【首次渲染完成时】执行。注意如果渲染速度快，会在页面进入动画完成前触发
|
onReady() {
|
|
},
|
// 监听 - 页面每次【显示时】执行(如：前进和返回) (页面每次出现在屏幕上都触发，包括从下级页面点返回露出当前页面)
|
onShow() {
|
|
},
|
// 监听 - 页面每次【隐藏时】执行(如：返回)
|
onHide() {
|
|
|
},
|
// 监听 - 页面下拉刷新
|
onPullDownRefresh() {
|
setTimeout(function() {
|
uni.stopPullDownRefresh();
|
}, 1000);
|
},
|
// 监听 - 页面触底部
|
onReachBottom() {
|
|
},
|
// 监听 - 窗口尺寸变化(仅限:App、微信小程序)
|
onResize() {
|
|
},
|
// 监听 - 点击右上角转发时
|
onShareAppMessage(options) {
|
|
},
|
// 监听 - 页面创建时
|
created() {
|
|
},
|
// 函数
|
methods: {
|
// 页面数据初始化函数
|
init(options = {}) {
|
console.log("init: ", options);
|
},
|
pageBack() {
|
uni.navigateBack({
|
delta: 1
|
})
|
},
|
pageTo(path) {
|
vk.navigateTo(path);
|
},
|
// 登录(手机号+验证码) 不存在会自动注册
|
loginBySms() {
|
if (that.isRotate) {
|
//判断是否加载中，避免重复点击请求
|
return false;
|
}
|
const {
|
agreement,
|
mobile,
|
code,
|
password,
|
password2
|
} = that.form1;
|
if (!agreement) {
|
vk.toast('请阅读并同意用户服务及隐私协议', "none");
|
return;
|
}
|
if (!vk.pubfn.checkStr(mobile, 'mobile')) {
|
vk.toast('请输入正确的手机号码', "none");
|
return;
|
}
|
if (!vk.pubfn.checkStr(code, 'mobileCode')) {
|
vk.toast('验证码格式为6位数字', "none");
|
return;
|
}
|
if (!vk.pubfn.checkStr(password, 'pwd')) {
|
vk.toast('密码以字母开头，长度在6~18之间，只能包含字母、数字和下划线', "none");
|
return;
|
}
|
if (!vk.pubfn.checkStr(password2, 'pwd')) {
|
vk.toast('密码以字母开头，长度在6~18之间，只能包含字母、数字和下划线', "none");
|
return;
|
}
|
if (password != password2) {
|
vk.toast('两次密码必须相同!', "none");
|
return;
|
}
|
|
that.isRotate = true;
|
vk.userCenter.loginBySms({
|
data: that.form1,
|
success: function(data) {
|
that.isRotate = false;
|
if (data.type == "login") {
|
vk.toast("登录成功!");
|
setTimeout(function() { that.jump() }, 1000)
|
} else {
|
vk.toast("注册成功!");
|
// 第一次注册成功添加学习币参数及支付密码
|
vk.userCenter.updateUser({
|
data: { coin: '0', username: 'user' + mobile },
|
success: function(data) { that.jump() }
|
})
|
}
|
},
|
complete: function() {
|
that.isRotate = false;
|
}
|
})
|
},
|
jump() {
|
// 跳转到首页,或页面返回
|
var pages = getCurrentPages();
|
vk.switchTab("/pages/index/homePage");
|
},
|
},
|
// 过滤器
|
filters: {
|
|
},
|
// 计算属性
|
computed: {
|
|
}
|
}
|
</script>
|
<style lang="scss" scoped>
|
.page {
|
background-color: #f5f5f5;
|
width: 100%;
|
height: 100vh;
|
overflow-y: auto;
|
|
.back {
|
padding: 30rpx 20rpx 0;
|
height: 11.5vw;
|
}
|
|
.group {
|
padding: 18rpx 30rpx 0;
|
flex: 1 1 auto;
|
overflow-y: auto;
|
|
.text {
|
color: rgb(51, 51, 51);
|
font-size: 42rpx;
|
line-height: 50rpx;
|
letter-spacing: 2.1rpx;
|
white-space: nowrap;
|
font-weight: bold;
|
}
|
|
.text_1 {
|
margin-top: 47rpx;
|
color: rgb(153, 153, 153);
|
font-size: 28rpx;
|
line-height: 34rpx;
|
white-space: nowrap;
|
}
|
|
.group_1 {
|
margin-top: 60rpx;
|
|
.section_1 {
|
padding: 34rpx 60rpx 32rpx;
|
color: rgb(153, 153, 153);
|
font-size: 28rpx;
|
line-height: 34rpx;
|
white-space: nowrap;
|
background-color: rgb(255, 255, 255);
|
border-radius: 50rpx;
|
|
.image_2 {
|
margin-bottom: 3rpx;
|
width: 30rpx;
|
height: 30rpx;
|
}
|
|
.text_2 {
|
margin-left: 12rpx;
|
}
|
}
|
|
.section_2 {
|
margin-top: 40rpx;
|
padding-left: 62rpx;
|
background-color: rgb(255, 255, 255);
|
border-radius: 50rpx;
|
|
.group_2 {
|
align-self: center;
|
color: rgb(153, 153, 153);
|
font-size: 28rpx;
|
line-height: 34rpx;
|
white-space: nowrap;
|
|
.image_3 {
|
margin-bottom: 3rpx;
|
width: 26rpx;
|
height: 30rpx;
|
}
|
|
.text_3 {
|
margin-left: 14rpx;
|
}
|
}
|
|
.text-wrapper {
|
padding: 34rpx 20rpx;
|
color: rgb(255, 255, 255);
|
font-size: 28rpx;
|
line-height: 34rpx;
|
white-space: nowrap;
|
background-color: rgb(51, 51, 51);
|
border-radius: 0px 50rpx 50rpx 0px;
|
height: 100rpx;
|
}
|
}
|
|
.section_3 {
|
margin-top: 40rpx;
|
color: rgb(153, 153, 153);
|
font-size: 28rpx;
|
line-height: 34rpx;
|
white-space: nowrap;
|
padding: 34rpx 64rpx 32rpx;
|
background-color: rgb(255, 255, 255);
|
border-radius: 50rpx;
|
|
.image_4 {
|
margin-bottom: 3rpx;
|
width: 23rpx;
|
height: 30rpx;
|
}
|
|
.text_5 {
|
margin-left: 16rpx;
|
}
|
}
|
}
|
|
.button {
|
margin-top: 68rpx;
|
padding: 32rpx 0 30rpx;
|
color: rgb(255, 255, 255);
|
font-size: 32rpx;
|
line-height: 38rpx;
|
white-space: nowrap;
|
background-color: rgb(51, 51, 51);
|
border-radius: 50rpx;
|
}
|
|
.group_3 {
|
margin-top: 29rpx;
|
padding: 12rpx;
|
|
.check_box {
|
width: 100%;
|
}
|
|
/deep/ .u-checkbox__label {
|
width: 100%;
|
}
|
|
.group_4 {
|
margin-left: 10rpx;
|
line-height: 32rpx;
|
text-align: left;
|
|
.text_9 {
|
color: rgb(51, 51, 51);
|
font-size: 28rpx;
|
line-height: 33rpx;
|
}
|
|
.text_10 {
|
color: rgb(255, 150, 12);
|
font-size: 28rpx;
|
line-height: 33rpx;
|
}
|
}
|
}
|
}
|
}
|
</style>
|
