347 lines
9.6 KiB
Vue
347 lines
9.6 KiB
Vue
<template>
|
|
<view class="register-wrap">
|
|
<view class="top-wrap">
|
|
<view class="back-btn">
|
|
<u-icon name="arrow-left" color="#333333" size="18" @click="handleBack()"></u-icon>
|
|
</view>
|
|
<image class="img" src="https://iot-xcwl.cn/app/fastbee1_blue.png" mode="widthFix"></image>
|
|
</view>
|
|
<view class="main-wrap">
|
|
<view>
|
|
<text class="title">{{$tt('register.userRegister')}}</text>
|
|
</view>
|
|
<view class="form">
|
|
<u--form :model="registerForm" :rules="rules" ref="form">
|
|
<u-form-item prop="username">
|
|
<uni-easyinput v-model="registerForm.username" clearable :inputBorder="false"
|
|
:placeholder="$tt('register.inputUserName')" prefixIcon="person"
|
|
prefixIconStyle="font-size: 44rpx; margin-right: 10rpx;"
|
|
style="height: 88rpx; background-color: #fff; display: flex; align-items: center; justify-content: center; border-radius: 18rpx;"></uni-easyinput>
|
|
</u-form-item>
|
|
<u-form-item prop="phonenumber">
|
|
<uni-easyinput v-model="registerForm.phonenumber" clearable :inputBorder="false"
|
|
:placeholder="$tt('register.inputPhone')" prefixIcon="phone"
|
|
prefixIconStyle="font-size: 44rpx; margin-right: 10rpx;"
|
|
style="height: 88rpx; background-color: #fff; display: flex; align-items: center; justify-content: center; border-radius: 18rpx;"></uni-easyinput>
|
|
</u-form-item>
|
|
<u-form-item prop="password">
|
|
<uni-easyinput prefixIcon="locked" prefixIconStyle="font-size: 44rpx; margin-right: 10rpx"
|
|
type="password" :inputBorder="false" v-model="registerForm.password"
|
|
:placeholder="$tt('register.inputPassword')"
|
|
style="height: 88rpx; background-color: #fff; display: flex; align-items: center; justify-content: center; border-radius: 18rpx;"></uni-easyinput>
|
|
</u-form-item>
|
|
<u-form-item prop="confirmPassword">
|
|
<uni-easyinput prefixIcon="locked" prefixIconStyle="font-size: 44rpx; margin-right: 10rpx"
|
|
type="password" :inputBorder="false" v-model="registerForm.confirmPassword"
|
|
:placeholder="$tt('register.inputPasswordAgain')"
|
|
style="height: 88rpx; background-color: #fff; display: flex; align-items: center; justify-content: center; border-radius: 18rpx;"></uni-easyinput>
|
|
</u-form-item>
|
|
<u-form-item prop="code" v-if="captchaOnOff">
|
|
<uni-easyinput :placeholder="$tt('register.inputCode')" v-model="registerForm.code"
|
|
:inputBorder="false" prefixIcon="checkbox"
|
|
prefixIconStyle="font-size: 44rpx; margin-right: 10rpx;"
|
|
style="height: 88rpx; background-color: #fff; display: flex; align-items: center; justify-content: center; border-radius: 18rpx; padding-right: 12rpx;">
|
|
<template slot="right">
|
|
<u--image :src="codeUrl" width="166rpx" height="64rpx" radius="12rpx"
|
|
@click="getCode"></u--image>
|
|
</template>
|
|
</uni-easyinput>
|
|
</u-form-item>
|
|
<view style="margin-top: 74rpx;">
|
|
<button class="register-btn-item"
|
|
@click="handleRegister()">{{$tt('register.registration')}}</button>
|
|
</view>
|
|
<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 class="ordinary">{{$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>
|
|
</u--form>
|
|
</view>
|
|
</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: '',
|
|
},
|
|
captchaOnOff: true, // 验证码开关
|
|
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);
|
|
})
|
|
})
|
|
},
|
|
handleBack() {
|
|
uni.navigateBack()
|
|
},
|
|
// 注册
|
|
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.captchaOnOff = res.captchaEnabled;
|
|
if (this.captchaOnOff) {
|
|
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: `/pages/common/webview/index?title=${title}&url=${url}`
|
|
});
|
|
},
|
|
// 服务协议
|
|
handleGoToService() {
|
|
let title = this.$tt('login.serviceAgreement');
|
|
let url = projectConfig.officialWebUrl + 'service-agreement.html';
|
|
uni.navigateTo({
|
|
url: `/pages/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: `/pages/common/webview/index?title=${title}&url=${url}`
|
|
});
|
|
},
|
|
// 第三方信息共享清单
|
|
handleGoToCommonBill() {
|
|
let title = this.$tt('login.commonBill');
|
|
let url = projectConfig.officialWebUrl + 'common-bill.html';
|
|
uni.navigateTo({
|
|
url: `/pages/common/webview/index?title=${title}&url=${url}`
|
|
});
|
|
},
|
|
// 勾选协议
|
|
handleClauseCheckbox(e) {
|
|
this.isClause = !this.isClause;
|
|
}
|
|
}
|
|
};
|
|
</script>
|
|
|
|
<style lang="scss" scoped>
|
|
.register-wrap {
|
|
display: flex;
|
|
flex-direction: column;
|
|
padding-top: var(--status-bar-height);
|
|
height: 100vh;
|
|
background-image: linear-gradient(45deg,
|
|
rgba(216, 216, 216, 0.3) 0,
|
|
rgba(225, 225, 225, 0) 100%);
|
|
|
|
.top-wrap {
|
|
position: relative;
|
|
display: flex;
|
|
|
|
.back-btn {
|
|
position: absolute;
|
|
top: 70rpx;
|
|
left: 46rpx;
|
|
}
|
|
|
|
.img {
|
|
margin: 0 auto;
|
|
width: 338rpx;
|
|
margin-top: 236rpx;
|
|
}
|
|
|
|
}
|
|
|
|
.main-wrap {
|
|
flex: 1 auto;
|
|
padding-left: 80rpx;
|
|
padding-right: 80rpx;
|
|
margin-top: 112rpx;
|
|
overflow-y: auto;
|
|
|
|
.title {
|
|
font-size: 40rpx;
|
|
letter-spacing: 0.6rpx;
|
|
font-weight: 400;
|
|
}
|
|
|
|
.form {
|
|
margin-top: 34rpx;
|
|
}
|
|
|
|
.clause-wrap {
|
|
margin: 150rpx 0 38rpx 0;
|
|
|
|
.clause {
|
|
font-size: 20rpx;
|
|
letter-spacing: 0.6rpx;
|
|
|
|
.ordinary {
|
|
color: #999999;
|
|
}
|
|
|
|
.check_text {}
|
|
|
|
.link {
|
|
color: #486FF2;
|
|
}
|
|
}
|
|
}
|
|
|
|
.register-btn-item {
|
|
display: flex;
|
|
justify-content: center;
|
|
align-items: center;
|
|
height: 98rpx;
|
|
border-radius: 18rpx;
|
|
color: #fff;
|
|
background-color: #486FF2;
|
|
font-weight: 400;
|
|
font-size: 32rpx;
|
|
letter-spacing: 0.6rpx;
|
|
}
|
|
}
|
|
}
|
|
</style> |