<template>
|
<view class="content">
|
<view class=""></view>
|
<view class="form-group">
|
<view class="form-row">
|
<text class="form-label">手机号：</text>
|
<input class="form-input" type="text" auto-focus="true" v-model="mobile" placeholder="请输入手机号码" />
|
</view>
|
<view class="form-row">
|
<text class="form-label">验证码：</text>
|
<input class="form-input" type="form-input" v-model="code" placeholder="请输入验证码" />
|
<view class="send-code-btn" @click="sendSmsCode">{{codeDuration ? codeDuration + 's' : '发送验证码' }}</view>
|
</view>
|
<view class="form-row">
|
<text class="form-label">邀请码：</text>
|
<input class="form-input" type="text" v-model="inviteCode" placeholder="邀请码(选填)" />
|
</view>
|
<view class="form-row">
|
<text class="form-label">密码：</text>
|
<input class="form-input" type="password" displayable v-model="password" placeholder="请输入密码" />
|
</view>
|
<view class="form-row">
|
<text class="form-label">确认密码：</text>
|
<input class="form-input" type="password" displayable v-model="confirmPassword" placeholder="请确认密码" />
|
</view>
|
<view class="form-submit">
|
<button type="primary" class="primary" @tap="register">注册</button>
|
</view>
|
</view>
|
<view class="download-app">
|
<text @click="download">已有账号下载APP登录</text>
|
</view>
|
</view>
|
</template>
|
|
<script>
|
// 为方便演示，此邀请注册页面放在项目内，实际可以单独做一个项目放置邀请注册页面
|
|
export default {
|
data() {
|
return {
|
mobile: '',
|
code: '',
|
password: '',
|
confirmPassword: '',
|
codeDuration: 0,
|
inviteCode: ''
|
}
|
},
|
onLoad(options) {
|
this.inviteCode = options.invite_code
|
},
|
methods: {
|
sendSmsCode() {
|
if (this.codeDuration) {
|
uni.showModal({
|
content: `请在${this.codeDuration}秒后重试`,
|
showCancel: false
|
})
|
}
|
if (!/^1\d{10}$/.test(this.mobile)) {
|
uni.showModal({
|
content: '手机号码填写错误',
|
showCancel: false
|
})
|
return
|
}
|
uni.showLoading({
|
title: '请稍等...',
|
mask: true
|
})
|
uniCloud.callFunction({
|
name: 'user-center',
|
data: {
|
action: 'sendSmsCode',
|
params: {
|
mobile: this.mobile,
|
type: 'register'
|
}
|
},
|
success: (e) => {
|
if (e.result.code == 0) {
|
uni.showModal({
|
content: '验证码发送成功，请注意查收',
|
showCancel: false
|
})
|
this.codeDuration = 60
|
this.codeInterVal = setInterval(() => {
|
this.codeDuration--
|
if (this.codeDuration === 0) {
|
if (this.codeInterVal) {
|
clearInterval(this.codeInterVal)
|
this.codeInterVal = null
|
}
|
}
|
}, 1000)
|
} else {
|
uni.showModal({
|
content: '验证码发送失败：' + e.result.msg,
|
showCancel: false
|
})
|
}
|
|
},
|
fail(e) {
|
uni.showModal({
|
content: '验证码发送失败',
|
showCancel: false
|
})
|
},
|
complete() {
|
uni.hideLoading()
|
}
|
})
|
},
|
register() {
|
/**
|
* 客户端对账号信息进行一些必要的校验。
|
* 实际开发中，根据业务需要进行处理，这里仅做示例。
|
*/
|
if (!/^1\d{10}$/.test(this.mobile)) {
|
uni.showModal({
|
content: '手机号码填写错误',
|
showCancel: false
|
})
|
return
|
}
|
if (this.password.length < 6) {
|
uni.showToast({
|
icon: 'none',
|
title: '密码最短为 6 个字符'
|
});
|
return;
|
}
|
if (this.password !== this.confirmPassword) {
|
uni.showToast({
|
icon: 'none',
|
title: '两次密码输入不一致'
|
});
|
return;
|
}
|
if (this.code === '') {
|
uni.showToast({
|
icon: 'none',
|
title: '请输入正确的验证码'
|
});
|
return;
|
}
|
uni.showLoading({
|
title: '请稍后...'
|
})
|
uniCloud.callFunction({
|
name: 'user-center',
|
data: {
|
action: 'inviteLogin',
|
params: {
|
mobile: this.mobile,
|
code: this.code,
|
inviteCode: this.inviteCode,
|
password: this.password
|
}
|
},
|
success: (e) => {
|
console.log("注册成功", e);
|
|
if (e.result.code === 0) {
|
uni.showModal({
|
content: '注册成功，是否立即下载APP登录',
|
success: (res) => {
|
if (res.confirm) {
|
this.download()
|
}
|
}
|
})
|
} else {
|
uni.showModal({
|
content: '注册失败：' + e.result.msg,
|
showCancel: false
|
})
|
}
|
},
|
fail(e) {
|
uni.showModal({
|
content: JSON.stringify(e),
|
showCancel: false
|
})
|
},
|
complete() {
|
uni.hideLoading()
|
}
|
})
|
},
|
download() {
|
location.href = 'https://login.tpl.dcloud.net.cn/package/android-latest.apk'
|
}
|
}
|
}
|
</script>
|
|
<style>
|
.content {
|
padding: 20px;
|
}
|
|
.form-row {
|
display: flex;
|
flex-direction: row;
|
align-items: center;
|
justify-content: left;
|
height: 40px;
|
background-color: #FFFFFF;
|
border: solid 1px #DDDDDD;
|
border-radius: 20px;
|
overflow: hidden;
|
margin-bottom: 10px;
|
}
|
|
.form-row .form-label {
|
width: 80px;
|
padding-left: 15px;
|
}
|
|
.form-row .form-input {
|
flex: 1;
|
margin: 0px 10px;
|
}
|
|
.send-code-btn {
|
width: 120px;
|
height: 40px;
|
line-height: 40px;
|
text-align: center;
|
background-color: #0FAEFF;
|
color: #FFFFFF;
|
}
|
|
.form-submit {
|
display: flex;
|
flex-direction: row;
|
margin-bottom: 10px;
|
}
|
|
.form-submit button {
|
flex: 1;
|
height: 40px;
|
line-height: 40px;
|
border-radius: 40px;
|
}
|
|
.download-app {
|
text-align: center;
|
color: #007AFF;
|
text-decoration: underline;
|
}
|
</style>
|
