|
@@ -1,15 +1,243 @@
|
|
|
<template>
|
|
|
<div class="register">
|
|
|
<h3>四维账号注册</h3>
|
|
|
- <p class="tologin">已有账号,<span>直接登录</span></p>
|
|
|
- <input type="text">
|
|
|
- <input type="text">
|
|
|
- <input type="text">
|
|
|
- <input type="text">
|
|
|
- <input type="text">
|
|
|
+ <p class="tologin">已有账号,<span @click="$router.push('/login/login')">直接登录</span></p>
|
|
|
+ <!-- 手机注册 -->
|
|
|
+ <div class="phone-register" v-if="type === 'phone'">
|
|
|
+ <input placeholder="请输入昵称" type="text" v-model="form.nickname">
|
|
|
+ <div class="phone-w">
|
|
|
+ <div class="phone-area" @click.stop="showPhoneArea=!showPhoneArea">{{ `${selectArea[1]}(${selectArea[0]})` }}<span class="sanjiao"></span>
|
|
|
+ <phoneAddressSelect v-show="showPhoneArea" @select="changeArea" />
|
|
|
+ </div>
|
|
|
+ <input placeholder="请输入手机号码" class="phone" type="text" v-model="form.phone">
|
|
|
+ </div>
|
|
|
+ <div class="code-w">
|
|
|
+ <input placeholder="短信验证码" class="phone" type="text" v-model="form.authCode">
|
|
|
+ <div class="send-code-btn" :class="{'is-disabled': interTime}" @click="getAuthCode">{{ interTime ? `${interTime}s后重试` : '获取验证码'}}</div>
|
|
|
+ </div>
|
|
|
+ <input placeholder="设置密码" autocomplete="new-password" v-model="form.password" type="password">
|
|
|
+ <input placeholder="重复密码" autocomplete="new-password" v-model="form.confirmPass" type="password">
|
|
|
+ <div class="right-tips"><span @click="type = 'email'">邮箱注册</span></div>
|
|
|
+ </div>
|
|
|
+ <!-- 邮箱注册 -->
|
|
|
+ <div class="email-register" v-if="type === 'email'">
|
|
|
+ <input placeholder="请输入昵称" type="text" v-model="emailForm.nickname">
|
|
|
+ <div class="code-w">
|
|
|
+ <input placeholder="邮箱地址" class="phone" type="text" v-model="emailForm.phone">
|
|
|
+ <div class="send-code-btn" :class="{'is-disabled': interEmailTime}" @click="getEmailAuthCode">{{ interEmailTime ? `${interEmailTime}s后重试` : '获取验证码'}}</div>
|
|
|
+ </div>
|
|
|
+ <input placeholder="验证码(6位数)" type="text" v-model="emailForm.authCode">
|
|
|
+ <input placeholder="设置密码" autocomplete="new-password" v-model="emailForm.password" type="password">
|
|
|
+ <input placeholder="重复密码" autocomplete="new-password" v-model="emailForm.confirmPass" type="password">
|
|
|
+ <div class="right-tips"><span @click="type = 'phone'">手机号码注册</span></div>
|
|
|
+ </div>
|
|
|
+ <div class="xieyi-w">
|
|
|
+ <input type="checkbox" v-model="showCluse">
|
|
|
+ <span>我已阅读并同意四维看看用户协议</span>
|
|
|
+ </div>
|
|
|
+ <div class="register-btn" @click="submit">注册</div>
|
|
|
</div>
|
|
|
</template>
|
|
|
|
|
|
+<script>
|
|
|
+import phoneAddressSelect from '@/components/common/phoneAddressSelect'
|
|
|
+import { mapState } from 'vuex'
|
|
|
+import { encodeStr } from '@/util'
|
|
|
+import { Base64 } from 'js-base64'
|
|
|
+
|
|
|
+export default {
|
|
|
+ data () {
|
|
|
+ return {
|
|
|
+ type: 'phone',
|
|
|
+ showPhoneArea: false,
|
|
|
+ selectArea: ['+86', '中国'],
|
|
|
+ interTime: 0,
|
|
|
+ interEmailTime: 0,
|
|
|
+ showCluse: false,
|
|
|
+ form: {
|
|
|
+ phone: '',
|
|
|
+ authCode: '',
|
|
|
+ nickname: '',
|
|
|
+ password: '',
|
|
|
+ confirmPass: '',
|
|
|
+ },
|
|
|
+ emailForm: {
|
|
|
+ phone: '',
|
|
|
+ password: '',
|
|
|
+ confirmPass: '',
|
|
|
+ msgAuthCode: ''
|
|
|
+ }
|
|
|
+ }
|
|
|
+ },
|
|
|
+ computed : {
|
|
|
+ ...mapState({
|
|
|
+ langToast: state => state.language.home.toast
|
|
|
+ })
|
|
|
+ },
|
|
|
+ watch: {
|
|
|
+ type () {
|
|
|
+ this.form = {
|
|
|
+ phone: '',
|
|
|
+ authCode: '',
|
|
|
+ nickname: '',
|
|
|
+ password: '',
|
|
|
+ confirmPass: '',
|
|
|
+ }
|
|
|
+ this.emailForm = {
|
|
|
+ phone: '',
|
|
|
+ password: '',
|
|
|
+ confirmPass: '',
|
|
|
+ msgAuthCode: ''
|
|
|
+ }
|
|
|
+ }
|
|
|
+ },
|
|
|
+ components: {
|
|
|
+ phoneAddressSelect
|
|
|
+ },
|
|
|
+ methods: {
|
|
|
+ changeArea (item) {
|
|
|
+ this.selectArea = item
|
|
|
+ },
|
|
|
+ async getAuthCode () {
|
|
|
+ if (this.interl) {
|
|
|
+ return
|
|
|
+ }
|
|
|
+ let res = await this.$store.dispatch('getAuthCode', {
|
|
|
+ phone: this.form.phone,
|
|
|
+ code: Number(this.selectArea[0].substr(1)),
|
|
|
+ type: 'resigter',
|
|
|
+ })
|
|
|
+ if (res) {
|
|
|
+ this.interl && clearInterval(this.interl)
|
|
|
+ this.interl = null
|
|
|
+ this.jishi = true
|
|
|
+ this.interTime = 60
|
|
|
+ this.interl = setInterval(() => {
|
|
|
+ this.interTime--
|
|
|
+ if (this.interTime <= 0) {
|
|
|
+ this.jishi = false
|
|
|
+ clearInterval(this.interl)
|
|
|
+ this.interl = null
|
|
|
+ }
|
|
|
+ }, 1000)
|
|
|
+ }
|
|
|
+ },
|
|
|
+ async getEmailAuthCode () {
|
|
|
+ if (this.emailInterl) {
|
|
|
+ return
|
|
|
+ }
|
|
|
+ let res = await this.$store.dispatch('getAuthCode', {
|
|
|
+ type: 'resigter',
|
|
|
+ email: this.emailForm.phone,
|
|
|
+ qudao: 'email'
|
|
|
+ })
|
|
|
+ if (res) {
|
|
|
+ this.emailInterl && clearInterval(this.emailInterl)
|
|
|
+ this.emailInterl = null
|
|
|
+ this.interEmailTime = 60
|
|
|
+ this.emailInterl = setInterval(() => {
|
|
|
+ this.interEmailTime--
|
|
|
+ if (this.interEmailTime <= 0) {
|
|
|
+ clearInterval(this.emailInterl)
|
|
|
+ this.emailInterl = null
|
|
|
+ }
|
|
|
+ }, 1000)
|
|
|
+ }
|
|
|
+ },
|
|
|
+ async submit () {
|
|
|
+ if (!this.showCluse) {
|
|
|
+ return
|
|
|
+ }
|
|
|
+ let check = value => {
|
|
|
+ for (let i = 0, len = value.length; i < len; i++) {
|
|
|
+ if (!value[i].val && value[i].required) {
|
|
|
+ return this.$toast.show('warn', (this.language === 'en' ? value[i].En : value[i].name) + this.langToast['7'])
|
|
|
+ }
|
|
|
+ }
|
|
|
+ return true
|
|
|
+ }
|
|
|
+ let form = this.type === 'email' ? this.emailForm : this.form
|
|
|
+ let checkStr = [
|
|
|
+ {
|
|
|
+ name: '昵称',
|
|
|
+ En: 'User name',
|
|
|
+ val: form.nickname,
|
|
|
+ required: this.type === 'email' ? false : true
|
|
|
+ },
|
|
|
+ {
|
|
|
+ name: '手机',
|
|
|
+ En: 'Phone number',
|
|
|
+ val: form.phone,
|
|
|
+ required: true
|
|
|
+ },
|
|
|
+ {
|
|
|
+ name: '验证码',
|
|
|
+ En: 'Verification code',
|
|
|
+ val: form.authCode,
|
|
|
+ required: true
|
|
|
+ },
|
|
|
+ {
|
|
|
+ name: '密码',
|
|
|
+ En: 'Password',
|
|
|
+ val: form.password,
|
|
|
+ required: true
|
|
|
+ },
|
|
|
+ {
|
|
|
+ name: '确认密码',
|
|
|
+ En: 'Password',
|
|
|
+ val: form.confirmPass,
|
|
|
+ required: true
|
|
|
+ }
|
|
|
+ ]
|
|
|
+ if (!check(checkStr)) {
|
|
|
+ return
|
|
|
+ }
|
|
|
+
|
|
|
+ if (form.password.length < 8 || form.confirmPass.length < 8) {
|
|
|
+ return this.$toast.show('warn', this.langToast['31'])
|
|
|
+ }
|
|
|
+
|
|
|
+ let country = Number(this.selectArea[0].substr(1))
|
|
|
+ let temp = encodeStr(Base64.encode(form.password), Base64.encode(form.confirmPass))
|
|
|
+
|
|
|
+ let params = {
|
|
|
+ password: temp[0],
|
|
|
+ phoneNum: form.phone,
|
|
|
+ msgAuthCode: form.authCode,
|
|
|
+ nickName: form.nickname,
|
|
|
+ country,
|
|
|
+ confirmPwd: temp[1],
|
|
|
+ }
|
|
|
+ let res = await this.$http({
|
|
|
+ method: 'post',
|
|
|
+ data: params,
|
|
|
+ url: '/sso/user/register'
|
|
|
+ })
|
|
|
+ let response = res.data
|
|
|
+ if (response.code !== 0) {
|
|
|
+ return this.$toast.show('warn', this.langToast[response.code])
|
|
|
+ }
|
|
|
+ this.$toast.showConfirm('success', this.langToast['23'], async () => {
|
|
|
+ let params1 = {
|
|
|
+ phoneNum: form.phone,
|
|
|
+ password: encodeStr(Base64.encode(this.password)),
|
|
|
+ randomcode: '1234',
|
|
|
+ rememberMe: false
|
|
|
+ }
|
|
|
+ await this.$store.dispatch('login', params1)
|
|
|
+ if (this.token) {
|
|
|
+ this.$bus.$emit('hasLogin')
|
|
|
+ this.$router.push({name: 'information'})
|
|
|
+ this.$bus.$emit('hideAside')
|
|
|
+ }
|
|
|
+ }, async () => {
|
|
|
+ this.$bus.$emit('currentActive', 'ilogin')
|
|
|
+ this.$bus.$emit('hideAside')
|
|
|
+ })
|
|
|
+ }
|
|
|
+ }
|
|
|
+}
|
|
|
+</script>
|
|
|
<style lang="scss" scoped>
|
|
|
.register {
|
|
|
width: 398px;
|
|
@@ -19,10 +247,111 @@
|
|
|
font-size: 20px;
|
|
|
letter-spacing:2px;
|
|
|
}
|
|
|
+ .tologin {
|
|
|
+ text-align: right;
|
|
|
+ margin: 20px 0 10px;
|
|
|
+ font-size: 14px;
|
|
|
+ span {
|
|
|
+ font-weight: bold;
|
|
|
+ display: inline-block;
|
|
|
+ position: relative;
|
|
|
+ cursor: pointer;
|
|
|
+ &::after {
|
|
|
+ content: '';
|
|
|
+ display: block;
|
|
|
+ height: 2px;
|
|
|
+ width: 100%;
|
|
|
+ background: #1FE4DC;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
input {
|
|
|
line-height: 42px;
|
|
|
margin-bottom: 20px;
|
|
|
width: 100%;
|
|
|
+ margin-bottom: 20px;
|
|
|
+ padding-left: 10px;
|
|
|
+ font-size: 16px;
|
|
|
+ border: 1px solid #909090;
|
|
|
+ border-radius: 3px;
|
|
|
+ }
|
|
|
+ .phone-w, .code-w {
|
|
|
+ display: flex;
|
|
|
+ border: 1px solid #909090;
|
|
|
+ border-radius: 3px;
|
|
|
+ margin-bottom: 20px;
|
|
|
+ line-height: 40px;
|
|
|
+ .phone-area {
|
|
|
+ padding: 0 16px 0 10px;
|
|
|
+ position: relative;
|
|
|
+ cursor: pointer;
|
|
|
+ width: 120px;
|
|
|
+ &::after {
|
|
|
+ content: '';
|
|
|
+ display: block;
|
|
|
+ height: 28px;
|
|
|
+ width: 1px;
|
|
|
+ background: #707070;
|
|
|
+ position: absolute;
|
|
|
+ right: 0;
|
|
|
+ top: 6px
|
|
|
+ }
|
|
|
+ }
|
|
|
+ .sanjiao {
|
|
|
+ display: inline-block;
|
|
|
+ border: 7px solid #909090;
|
|
|
+ border-bottom: none;
|
|
|
+ border-left-color: transparent;
|
|
|
+ border-right-color: transparent;
|
|
|
+ margin-left: 10px;
|
|
|
+ }
|
|
|
+ input {
|
|
|
+ flex: 1;
|
|
|
+ border: none;
|
|
|
+ margin-bottom: 0;
|
|
|
+ }
|
|
|
+ .send-code-btn {
|
|
|
+ padding: 0 10px;
|
|
|
+ cursor: pointer;
|
|
|
+ &.is-disabled {
|
|
|
+ color: #909090;
|
|
|
+ cursor: default;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+ .right-tips {
|
|
|
+ text-align: right;
|
|
|
+ font-size: 14px;
|
|
|
+ color: #909090;
|
|
|
+ margin-top: -12px;
|
|
|
+ margin-bottom: 20px;
|
|
|
+ span {
|
|
|
+ cursor: pointer;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ .xieyi-w {
|
|
|
+ font-size: 14px;
|
|
|
+ margin-bottom: 15px;
|
|
|
+ input {
|
|
|
+ width: initial;
|
|
|
+ vertical-align: middle;
|
|
|
+ display: inline-block;
|
|
|
+ margin-bottom: 0;
|
|
|
+ }
|
|
|
+ span {
|
|
|
+ display: inline-block;
|
|
|
+ vertical-align: middle;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ .register-btn {
|
|
|
+ line-height: 60px;
|
|
|
+ text-align: center;
|
|
|
+ background: #1FE4DC;
|
|
|
+ width: 100%;
|
|
|
+ font-size: 20px;
|
|
|
+ font-weight: bold;
|
|
|
+ cursor: pointer;
|
|
|
+ border-radius: 3px;
|
|
|
}
|
|
|
}
|
|
|
</style>
|