272 lines
7.8 KiB
Vue
272 lines
7.8 KiB
Vue
<template>
|
||
<page-meta>
|
||
<navigation-bar :title="$tt('register.userRegister')" title-align="center" background-color="#007AFF" />
|
||
</page-meta>
|
||
<view class="container">
|
||
<view class="main">
|
||
<u--form :model="registerForm" :rules="rules" ref="form">
|
||
<u-form-item prop="username" borderBottom>
|
||
<u--input v-model="registerForm.username" clearable border="none"
|
||
:placeholder="$tt('register.inputUserName')" prefixIcon="account-fill"
|
||
prefixIconStyle="font-size: 44rpx; color: #3c9cff; margin-right: 10rpx"></u--input>
|
||
</u-form-item>
|
||
<u-form-item prop="phonenumber" borderBottom>
|
||
<u--input v-model="registerForm.phonenumber" clearable border="none"
|
||
:placeholder="$tt('register.inputPhone')" prefixIcon="phone-fill"
|
||
prefixIconStyle="font-size: 44rpx; color: #3c9cff; margin-right: 10rpx"></u--input>
|
||
</u-form-item>
|
||
<u-form-item prop="password" borderBottom>
|
||
<u--input v-model="registerForm.password" type="password" clearable border="none"
|
||
:placeholder="$tt('register.inputPassword')" prefixIcon="lock-fill"
|
||
prefixIconStyle="font-size: 44rpx; color: #3c9cff; margin-right: 10rpx"></u--input>
|
||
</u-form-item>
|
||
<u-form-item prop="confirmPassword" borderBottom>
|
||
<u--input v-model="registerForm.confirmPassword" type="password" clearable border="none"
|
||
:placeholder="$tt('register.inputPasswordAgain')" prefixIcon="lock-fill"
|
||
prefixIconStyle="font-size: 44rpx; color: #3c9cff; margin-right: 10rpx"></u--input>
|
||
</u-form-item>
|
||
<u-form-item prop="code" borderBottom>
|
||
<!-- 注意：由于兼容性差异，如果需要使用前后插槽，nvue下需使用u--input，非nvue下需使用u-input -->
|
||
<u-input :placeholder="$tt('register.inputCode')" v-model="registerForm.code" border="none"
|
||
prefixIcon="integral-fill"
|
||
prefixIconStyle="font-size: 44rpx; color: #3c9cff; margin-right: 10rpx">
|
||
<template slot="suffix">
|
||
<u--image :src="codeUrl" width="120px" height="30px" @click="getCode"></u--image>
|
||
</template>
|
||
</u-input>
|
||
</u-form-item>
|
||
<view class="clause-wrap">
|
||
<view class="clause">
|
||
<u-checkbox-group @change="handleClauseCheckbox">
|
||
<label>
|
||
<u-checkbox :checked="isClause" style="transform:scale(0.8)" />
|
||
</label>
|
||
<text class="check_text">
|
||
<text>{{$tt('bindRegister.policy0')}}</text>
|
||
<text class="link" @click="handleGoToPrivacy">{{$tt('bindRegister.policy1')}}</text>
|
||
<text class="link" @click="handleGoToService">{{$tt('bindRegister.policy2')}}</text>
|
||
<text class="link" @click="handleGoToStatement">{{$tt('bindRegister.policy3')}}</text>
|
||
<text class="link" @click="handleGoToCommonBill">{{$tt('bindRegister.policy4')}}</text>
|
||
</text>
|
||
</u-checkbox-group>
|
||
</view>
|
||
</view>
|
||
<view class="register-btn">
|
||
<u-button class="register-btn-item" shape="circle" type="primary"
|
||
:text="$tt('register.registration')" @click="handleRegister()"></u-button>
|
||
</view>
|
||
</u--form>
|
||
</view>
|
||
<u-modal :show="show" :content="content" @confirm="confirm"></u-modal>
|
||
</view>
|
||
</template>
|
||
|
||
<script>
|
||
import projectConfig from '@/env.config.js';
|
||
import { captchaImage, register } from '@/apis/modules/common.js';
|
||
|
||
export default {
|
||
data () {
|
||
return {
|
||
isClause: false,
|
||
// 提示窗
|
||
show: false,
|
||
content: '',
|
||
resultCode: 500,
|
||
codeUrl: '',
|
||
registerForm: {
|
||
username: '',
|
||
phonenumber: '',
|
||
password: '',
|
||
confirmPassword: '',
|
||
code: '',
|
||
uuid: '',
|
||
bindId: '',
|
||
},
|
||
rules: {
|
||
username: {
|
||
type: 'string',
|
||
min: 4,
|
||
max: 20,
|
||
required: true,
|
||
message: this.$tt('register.inputUserNameSize'),
|
||
trigger: ['blur', 'change']
|
||
},
|
||
phonenumber: [{
|
||
type: 'integer',
|
||
min: 11,
|
||
max: 11,
|
||
required: true,
|
||
message: this.$tt('register.inputPhone'),
|
||
trigger: ['blur', 'change']
|
||
},
|
||
{
|
||
validator: (rule, value, callback) => {
|
||
return uni.$u.test.mobile(value);
|
||
},
|
||
message: this.$tt('bindRegister.incorrectPhone'),
|
||
// 触发器可以同时用blur和change
|
||
trigger: ['change', 'blur']
|
||
}
|
||
],
|
||
password: {
|
||
type: 'string',
|
||
required: true,
|
||
min: 5,
|
||
max: 20,
|
||
message: this.$tt('register.inputPassword'),
|
||
trigger: ['blur', 'change']
|
||
},
|
||
confirmPassword: [{
|
||
type: 'string',
|
||
required: true,
|
||
message: this.$tt('register.inputPasswordAgain'),
|
||
trigger: ['blur', 'change']
|
||
},
|
||
{
|
||
validator: (rule, value, callback) => {
|
||
if (this.registerForm.password !== value) {
|
||
// uni.$u.test.mobile()就是返回true或者false的
|
||
return false;
|
||
} else {
|
||
return true;
|
||
}
|
||
},
|
||
message: this.$tt('bindRegister.enterPasswordsDiffer'),
|
||
// 触发器可以同时用blur和change
|
||
trigger: ['change', 'blur']
|
||
}
|
||
],
|
||
code: {
|
||
type: 'integer',
|
||
required: true,
|
||
message: this.$tt('register.inputCode'),
|
||
trigger: ['blur', 'change']
|
||
}
|
||
}
|
||
};
|
||
},
|
||
created () {
|
||
this.getCode();
|
||
},
|
||
methods: {
|
||
// 用户注册
|
||
handleRegister () {
|
||
this.$refs.form.validate().then(res => {
|
||
if (!this.isClause) {
|
||
uni.showToast({
|
||
icon: 'none',
|
||
title: this.$tt('login.readAndCheckTheAgreement'),
|
||
});
|
||
return;
|
||
}
|
||
register(this.registerForm)
|
||
.then(res => {
|
||
this.innerRegister(res);
|
||
}).catch(err => {
|
||
console.log("err catch", err);
|
||
})
|
||
})
|
||
},
|
||
// 注册
|
||
innerRegister (res) {
|
||
this.resultCode = res.code;
|
||
if (res.code == 200) {
|
||
this.content = this.$tt('register.congratulations') + this.registerForm.username + this.$tt(
|
||
'register.registeredSuccessfully');
|
||
} else {
|
||
this.content = res.msg;
|
||
}
|
||
this.show = true;
|
||
},
|
||
// 提示框确认
|
||
confirm () {
|
||
this.show = false;
|
||
if (this.resultCode == 200) {
|
||
uni.$u.route({
|
||
url: '/pages/login/index',
|
||
type: 'redirect'
|
||
});
|
||
} else {
|
||
this.getCode();
|
||
}
|
||
},
|
||
// 获取验证码
|
||
getCode () {
|
||
this.$api.common.captchaImage(true).then(res => {
|
||
this.codeUrl = 'data:image/gif;base64,' + res.img;
|
||
this.registerForm.uuid = res.uuid;
|
||
this.registerForm.code = "";
|
||
})
|
||
},
|
||
// 隐私政策
|
||
handleGoToPrivacy () {
|
||
let title = this.$tt('login.privacyPolicy');
|
||
let url = projectConfig.officialWebUrl + 'privacy-policy.html';
|
||
uni.navigateTo({
|
||
url: `/pagesA/common/webview/index?title=${title}&url=${url}`
|
||
});
|
||
},
|
||
// 服务协议
|
||
handleGoToService () {
|
||
let title = this.$tt('login.serviceAgreement');
|
||
let url = projectConfig.officialWebUrl + 'service-agreement.html';
|
||
uni.navigateTo({
|
||
url: `/pagesA/common/webview/index?title=${title}&url=${url}`
|
||
});
|
||
},
|
||
// 儿童隐私保护声明
|
||
handleGoToStatement () {
|
||
let title = this.$tt('login.childProtectionStatement');
|
||
let url = projectConfig.officialWebUrl + 'child-protection-statement.html';
|
||
uni.navigateTo({
|
||
url: `/pagesA/common/webview/index?title=${title}&url=${url}`
|
||
});
|
||
},
|
||
// 第三方信息共享清单
|
||
handleGoToCommonBill () {
|
||
let title = this.$tt('login.commonBill');
|
||
let url = projectConfig.officialWebUrl + 'common-bill.html';
|
||
uni.navigateTo({
|
||
url: `/pagesA/common/webview/index?title=${title}&url=${url}`
|
||
});
|
||
},
|
||
// 勾选协议
|
||
handleClauseCheckbox (e) {
|
||
this.isClause = !this.isClause;
|
||
}
|
||
}
|
||
};
|
||
</script>
|
||
|
||
<style lang="scss" scoped>
|
||
.main {
|
||
padding: 20px;
|
||
background: #ffffff;
|
||
border-top-left-radius: 0px;
|
||
border-top-right-radius: 0px;
|
||
|
||
.clause-wrap {
|
||
margin: 40rpx 0;
|
||
|
||
.clause {
|
||
font-size: 28rpx;
|
||
|
||
.check_text {}
|
||
|
||
.link {
|
||
color: #3c9cff;
|
||
}
|
||
}
|
||
}
|
||
|
||
.register-btn {
|
||
margin-top: 40px;
|
||
|
||
.register-btn-item {
|
||
height: 90rpx;
|
||
width: 650rpx;
|
||
}
|
||
}
|
||
}
|
||
</style> |