|
|
|
@@ -0,0 +1,773 @@ |
|
|
|
<template> |
|
|
|
<!-- 手机号13797188591 --> |
|
|
|
<div :class="inPage ? 'page active' : 'page'"> |
|
|
|
<div id="top"></div> |
|
|
|
<div class="logoBox" @click="go('/')"> |
|
|
|
<img src="../../assets/img/logoh.png" alt class="logo" /> |
|
|
|
<!-- <div class="logoTitle">metavatar</div> --> |
|
|
|
</div> |
|
|
|
|
|
|
|
<!-- 首页登录 loginType=1 --> |
|
|
|
<div class="loginBox" v-if="loginType == 1"> |
|
|
|
<el-form ref="form" :rules="rules" :model="form"> |
|
|
|
<!-- 手机号 --> |
|
|
|
<el-form-item class="phone" prop="phone"> |
|
|
|
<el-input |
|
|
|
v-model="form.phone" |
|
|
|
placeholder="请输入您的手机号" |
|
|
|
></el-input> |
|
|
|
</el-form-item> |
|
|
|
<!-- 密码 --> |
|
|
|
<el-form-item class="code" prop="password"> |
|
|
|
<el-input |
|
|
|
type="password" |
|
|
|
maxlength="10" |
|
|
|
clearable |
|
|
|
v-model="form.password" |
|
|
|
placeholder="请输入密码" |
|
|
|
></el-input> |
|
|
|
</el-form-item> |
|
|
|
<!-- 随机验证码 --> |
|
|
|
<el-form-item class="yzCode" prop="yzCode"> |
|
|
|
<el-col :span="12"> |
|
|
|
<el-input |
|
|
|
v-model="form.yzCode" |
|
|
|
placeholder="请输入验证码" |
|
|
|
></el-input> |
|
|
|
</el-col> |
|
|
|
<el-col :span="9"> |
|
|
|
<!-- <div class="yzmImg" v-html="codeImg"></div> --> |
|
|
|
<img v-if="showCodeImg" class="yzmImg" :src="codeImg" alt="" /> |
|
|
|
</el-col> |
|
|
|
<el-col :span="2"> |
|
|
|
<i @click="getCodeImg" class="el-icon-refresh-right shuaxin"></i> |
|
|
|
</el-col> |
|
|
|
</el-form-item> |
|
|
|
<!-- 短信登录和忘记密码 --> |
|
|
|
<div class="morePage greenColor"> |
|
|
|
<span @click="loginType = 2">短信登录</span> |
|
|
|
<span @click="loginType = 3">忘记密码?</span> |
|
|
|
</div> |
|
|
|
<!-- 登录 --> |
|
|
|
<el-form-item> |
|
|
|
<el-button class="submitBtn" @click="loginByPhoneCode" |
|
|
|
>登录/注册</el-button |
|
|
|
> |
|
|
|
</el-form-item> |
|
|
|
<!-- 没有账号 --> |
|
|
|
<div> |
|
|
|
<span>没有账号?</span> |
|
|
|
<span class="greenColor" @click="loginType = 5">立即注册</span> |
|
|
|
</div> |
|
|
|
</el-form> |
|
|
|
</div> |
|
|
|
|
|
|
|
<!-- 短信登录 loginType=2 --> |
|
|
|
<div class="loginBox" v-if="loginType == 2"> |
|
|
|
<el-form ref="form" :rules="rules" :model="form"> |
|
|
|
<!-- 手机号 --> |
|
|
|
<el-form-item class="phone" prop="phone"> |
|
|
|
<el-input |
|
|
|
v-model="form.phone" |
|
|
|
placeholder="请输入您的手机号" |
|
|
|
></el-input> |
|
|
|
</el-form-item> |
|
|
|
<!-- 短信验证码 --> |
|
|
|
<el-form-item class="code" prop="code"> |
|
|
|
<el-input |
|
|
|
maxlength="10" |
|
|
|
clearable |
|
|
|
v-model="form.code" |
|
|
|
placeholder="请输入短信验证码" |
|
|
|
> |
|
|
|
<div |
|
|
|
v-if="!countdownState" |
|
|
|
@click="triggerCountdown" |
|
|
|
class="greenColor" |
|
|
|
slot="suffix" |
|
|
|
type="primary" |
|
|
|
> |
|
|
|
获取验证码 |
|
|
|
</div> |
|
|
|
<div v-else slot="suffix" type="primary"> |
|
|
|
验证码已发送{{ countNum }}s |
|
|
|
</div> |
|
|
|
</el-input> |
|
|
|
</el-form-item> |
|
|
|
<!-- 短信登录和忘记密码 --> |
|
|
|
<div class="morePage greenColor inBoxEnd"> |
|
|
|
<span @click="loginType = 1">账号登录</span> |
|
|
|
</div> |
|
|
|
<!-- 登录 --> |
|
|
|
<el-form-item> |
|
|
|
<el-button class="submitBtn" @click="loginByPhoneCode" |
|
|
|
>登录</el-button |
|
|
|
> |
|
|
|
</el-form-item> |
|
|
|
<!-- 没有账号 --> |
|
|
|
<div> |
|
|
|
<span>没有账号?</span> |
|
|
|
<span class="greenColor" @click="loginType = 5">立即注册</span> |
|
|
|
</div> |
|
|
|
</el-form> |
|
|
|
</div> |
|
|
|
|
|
|
|
<!-- 忘记密码 loginType=3--> |
|
|
|
<div class="loginBox" v-if="loginType == 3"> |
|
|
|
<el-form ref="form" :rules="rules" :model="form"> |
|
|
|
<!-- 手机号 --> |
|
|
|
<el-form-item class="phone" prop="phone"> |
|
|
|
<el-input |
|
|
|
v-model="form.phone" |
|
|
|
placeholder="请输入您的手机号" |
|
|
|
></el-input> |
|
|
|
</el-form-item> |
|
|
|
<!-- 随机验证码 --> |
|
|
|
<el-form-item class="code" prop="yzCode"> |
|
|
|
<el-col :span="12"> |
|
|
|
<el-input |
|
|
|
maxlength="10" |
|
|
|
clearable |
|
|
|
v-model="form.yzCode" |
|
|
|
placeholder="请输入验证码" |
|
|
|
></el-input> |
|
|
|
</el-col> |
|
|
|
<el-col :span="9"> |
|
|
|
<!-- <div class="yzmImg" v-html="codeImg"></div> --> |
|
|
|
<img class="yzmImg" :src="codeImg" alt="" /> |
|
|
|
</el-col> |
|
|
|
<el-col :span="2"> |
|
|
|
<i @click="getCodeImg" class="el-icon-refresh-right shuaxin"></i> |
|
|
|
</el-col> |
|
|
|
</el-form-item> |
|
|
|
<div class="morePage greenColor"> |
|
|
|
<span @click="loginType = 1">账户登录</span> |
|
|
|
</div> |
|
|
|
<!-- 登录 --> |
|
|
|
<el-form-item> |
|
|
|
<el-button class="submitBtn" @click="loginByPhoneCode" |
|
|
|
>获取短信验证码</el-button |
|
|
|
> |
|
|
|
</el-form-item> |
|
|
|
</el-form> |
|
|
|
</div> |
|
|
|
|
|
|
|
<!-- 重设密码 loginType=4 --> |
|
|
|
<div class="loginBox" v-if="loginType == 4"> |
|
|
|
<el-form ref="form" :rules="rules" :model="form"> |
|
|
|
<!-- 短信验证码 --> |
|
|
|
<el-form-item class="phone" prop="code1"> |
|
|
|
<el-input |
|
|
|
v-model="form.code1" |
|
|
|
placeholder="请输入短信验证码" |
|
|
|
></el-input> |
|
|
|
</el-form-item> |
|
|
|
<!-- 新密码1 --> |
|
|
|
<el-form-item class="code" prop="newPassword1"> |
|
|
|
<el-input |
|
|
|
type="password" |
|
|
|
maxlength="10" |
|
|
|
clearable |
|
|
|
v-model="form.newPassword1" |
|
|
|
placeholder="请输入您的新密码" |
|
|
|
> |
|
|
|
</el-input> |
|
|
|
</el-form-item> |
|
|
|
<!-- 新密码2 --> |
|
|
|
<el-form-item class="code" prop="newPassword2"> |
|
|
|
<el-input |
|
|
|
type="password" |
|
|
|
maxlength="10" |
|
|
|
clearable |
|
|
|
v-model="form.newPassword2" |
|
|
|
placeholder="请再次确认您的新密码" |
|
|
|
> |
|
|
|
</el-input> |
|
|
|
</el-form-item> |
|
|
|
<div class="morePage greenColor"> |
|
|
|
<span @click="loginType = 1">账户登录</span> |
|
|
|
</div> |
|
|
|
<!-- 登录 --> |
|
|
|
<el-form-item> |
|
|
|
<el-button class="submitBtn" @click="loginByPhoneCode" |
|
|
|
>保存密码</el-button |
|
|
|
> |
|
|
|
</el-form-item> |
|
|
|
</el-form> |
|
|
|
</div> |
|
|
|
|
|
|
|
<!-- 注册 loginType=5 --> |
|
|
|
<div class="loginBox" v-if="loginType == 5"> |
|
|
|
<el-form ref="form" :rules="rules" :model="form"> |
|
|
|
<!-- 短信验证码 --> |
|
|
|
<el-form-item class="phone" prop="phone"> |
|
|
|
<el-input |
|
|
|
v-model="form.phone" |
|
|
|
placeholder="请输入您的手机号" |
|
|
|
></el-input> |
|
|
|
</el-form-item> |
|
|
|
<!-- 新密码1 --> |
|
|
|
<el-form-item class="code" prop="newPassword1"> |
|
|
|
<el-input |
|
|
|
type="password" |
|
|
|
maxlength="10" |
|
|
|
clearable |
|
|
|
v-model="form.newPassword1" |
|
|
|
placeholder="请输入您的密码" |
|
|
|
> |
|
|
|
</el-input> |
|
|
|
</el-form-item> |
|
|
|
<!-- 新密码2 --> |
|
|
|
<el-form-item class="code" prop="newPassword2"> |
|
|
|
<el-input |
|
|
|
type="password" |
|
|
|
maxlength="10" |
|
|
|
clearable |
|
|
|
v-model="form.newPassword2" |
|
|
|
placeholder="请再次确认您的密码" |
|
|
|
> |
|
|
|
</el-input> |
|
|
|
</el-form-item> |
|
|
|
<div class="morePage greenColor"> |
|
|
|
<span @click="loginType = 1">账户登录</span> |
|
|
|
</div> |
|
|
|
<!-- 注册 --> |
|
|
|
<el-form-item> |
|
|
|
<el-button class="submitBtn" @click="loginByPhoneCode" |
|
|
|
>注册</el-button |
|
|
|
> |
|
|
|
</el-form-item> |
|
|
|
</el-form> |
|
|
|
</div> |
|
|
|
<!-- 弹出层 --> |
|
|
|
<van-popup v-model="showDialog">内容</van-popup> |
|
|
|
</div> |
|
|
|
</template> |
|
|
|
|
|
|
|
<script> |
|
|
|
// 组件 |
|
|
|
import Vue from 'vue' |
|
|
|
import { Toast } from 'vant' |
|
|
|
import { mapState, mapActions } from 'vuex' |
|
|
|
// 工具 |
|
|
|
import { scrollToID } from '../../utils' |
|
|
|
// 接口 |
|
|
|
import { |
|
|
|
doLogin, |
|
|
|
getCodeByPhone, |
|
|
|
doRegisterByPhone, |
|
|
|
doLoginByPhone, |
|
|
|
doSendPhoneCode, |
|
|
|
doUpdPass, |
|
|
|
getCaptcha, |
|
|
|
doFindInviteCode, |
|
|
|
doUpdateInviteCode, |
|
|
|
doCodeImg |
|
|
|
} from '../../api/login' |
|
|
|
|
|
|
|
Vue.use(Toast) |
|
|
|
export default { |
|
|
|
data() { |
|
|
|
return { |
|
|
|
showDialog: false, //弹出层状态 |
|
|
|
countNum: 60, // 倒计时 |
|
|
|
countdownState: false, //倒计时状态 |
|
|
|
codeInfo: '获取验证码', |
|
|
|
inPage: false, |
|
|
|
codeImg: '', //随机验证码图片 |
|
|
|
loginType: 1, //显示页面字符 |
|
|
|
showCodeImg: true, // 控制验证码的刷新 |
|
|
|
// 短信验证码登录 |
|
|
|
form: { |
|
|
|
phone: '', // 手机号 |
|
|
|
password: '', // 密码 |
|
|
|
newPassword1: '', // 新密码1 |
|
|
|
newPassword2: '', // 新密码2 |
|
|
|
phoneCode: '', // |
|
|
|
code: '', // 短信验证码 |
|
|
|
code1: '', // 忘记密码的短信验证码 |
|
|
|
yzCode: '' // 随机图片验证码 |
|
|
|
}, |
|
|
|
rules: { |
|
|
|
phone: [ |
|
|
|
{ |
|
|
|
required: true, |
|
|
|
trigger: 'blur', |
|
|
|
message: '请先输手机号' |
|
|
|
}, |
|
|
|
{ |
|
|
|
validator(rule, value, callback, source, options) { |
|
|
|
var errors = [] |
|
|
|
// var mobile = /^1[0|1|2|3|4|5|6|7|8|9]\d{9}$/, |
|
|
|
let phone = /^1[35789]\d{9}$/ |
|
|
|
if (value && !phone.test(value)) { |
|
|
|
callback('抱歉,请输入正确的手机号') |
|
|
|
} |
|
|
|
callback(errors) |
|
|
|
} |
|
|
|
} |
|
|
|
] |
|
|
|
}, |
|
|
|
// 账号密码登录 |
|
|
|
formII: { |
|
|
|
phone: '', |
|
|
|
pwd: '', |
|
|
|
code: '' |
|
|
|
}, |
|
|
|
rulesII: { |
|
|
|
phone: [ |
|
|
|
{ |
|
|
|
required: true, |
|
|
|
trigger: 'blur', |
|
|
|
message: '请先输手机号' |
|
|
|
}, |
|
|
|
{ |
|
|
|
validator(rule, value, callback, source, options) { |
|
|
|
var errors = [] |
|
|
|
// var mobile = /^1[0|1|2|3|4|5|6|7|8|9]\d{9}$/, |
|
|
|
let phone = /^1[35789]\d{9}$/ |
|
|
|
if (value && !phone.test(value)) { |
|
|
|
callback('抱歉,请输入正确的手机号') |
|
|
|
} |
|
|
|
callback(errors) |
|
|
|
} |
|
|
|
} |
|
|
|
] |
|
|
|
}, |
|
|
|
// 短信登录 |
|
|
|
|
|
|
|
// 忘记密码 |
|
|
|
// 重设密码 |
|
|
|
// 注册 |
|
|
|
// 邀请码 |
|
|
|
formIII: { |
|
|
|
inviteCode: '' |
|
|
|
} |
|
|
|
} |
|
|
|
}, |
|
|
|
watch: { |
|
|
|
// type值改变,清空除手机号的其他值 |
|
|
|
loginType() { |
|
|
|
this.form = { |
|
|
|
phone: this.form.phone, // 手机号 |
|
|
|
password: '', // 密码 |
|
|
|
newPassword1: '', // 新密码1 |
|
|
|
newPassword2: '', // 新密码2 |
|
|
|
phoneCode: '', // |
|
|
|
code: '', // 短信验证码 |
|
|
|
code1: '', // 忘记密码的短信验证码 |
|
|
|
yzCode: '' // 随机图片验证码 |
|
|
|
} |
|
|
|
} |
|
|
|
}, |
|
|
|
computed: { |
|
|
|
...mapState({ |
|
|
|
characters: (state) => state.publicObj.characters |
|
|
|
}) |
|
|
|
}, |
|
|
|
|
|
|
|
methods: { |
|
|
|
...mapActions(['setCharacters']), |
|
|
|
// 发送短信验证码 |
|
|
|
triggerCountdown() { |
|
|
|
//调用接口 |
|
|
|
this.getCode() |
|
|
|
// 切换文字 |
|
|
|
this.countdownState = !this.countdownState |
|
|
|
// 定时器 |
|
|
|
let intervalBtn = setInterval(() => { |
|
|
|
// 倒数自减 |
|
|
|
this.countNum-- |
|
|
|
if (this.countNum < 0) { |
|
|
|
// 清除定时器 |
|
|
|
clearInterval(intervalBtn) |
|
|
|
// 更改状态 |
|
|
|
this.countdownState = !this.countdownState |
|
|
|
// 重置倒计时状态 |
|
|
|
this.countNum = 60 |
|
|
|
} |
|
|
|
// 倒计时 |
|
|
|
}, 1000) |
|
|
|
}, |
|
|
|
go(url) { |
|
|
|
this.$router.push(url) |
|
|
|
}, |
|
|
|
|
|
|
|
// 跳过填写邀请码 |
|
|
|
skip() { |
|
|
|
this.$router.push('/myPage') |
|
|
|
}, |
|
|
|
|
|
|
|
// 获取手机短信验证码 |
|
|
|
getCode() { |
|
|
|
if (this.codeInfo != '获取验证码') { |
|
|
|
Toast.fail('请求过于频繁,请稍后再试') |
|
|
|
return |
|
|
|
} |
|
|
|
const phoneValue = this.form.phone |
|
|
|
// 将手机号置入本地存储 |
|
|
|
localStorage.setItem('phoneValue', phoneValue) |
|
|
|
let phoneReg = /^(?:(?:\+|00)86)?1[3-9]\d{9}$/ |
|
|
|
let phoneValide = phoneReg.test(phoneValue) |
|
|
|
|
|
|
|
if (!phoneValide) { |
|
|
|
Toast.fail('请输入正确的手机号!') |
|
|
|
} else { |
|
|
|
this.getPhoneCode(phoneValue) |
|
|
|
} |
|
|
|
}, |
|
|
|
// 获取随机验证码图片 |
|
|
|
async getCodeImg() { |
|
|
|
this.showCodeImg = false |
|
|
|
await this.$axios({ |
|
|
|
method: 'get', |
|
|
|
url: doCodeImg |
|
|
|
}).then((res) => { |
|
|
|
this.codeImg = doCodeImg |
|
|
|
}) |
|
|
|
this.showCodeImg = true |
|
|
|
}, |
|
|
|
|
|
|
|
// 点击登录 |
|
|
|
loginByPhoneCode() { |
|
|
|
// 密码登录 |
|
|
|
if (this.loginType == 1) { |
|
|
|
const data = { |
|
|
|
phone: this.form.phone, |
|
|
|
password: this.form.password, |
|
|
|
code: this.form.yzCode |
|
|
|
} |
|
|
|
this.LoginByPhone(data) |
|
|
|
return |
|
|
|
} |
|
|
|
// 手机验证码登录 |
|
|
|
if (this.loginType == 2) { |
|
|
|
const data = { |
|
|
|
phone: this.form.phone, |
|
|
|
code: this.form.code |
|
|
|
} |
|
|
|
this.LoginByPhone(data) |
|
|
|
return |
|
|
|
} |
|
|
|
// 忘记密码第一步 |
|
|
|
if (this.loginType == 3) { |
|
|
|
const data = { |
|
|
|
phone: this.form.phone, |
|
|
|
code: this.form.yzCode |
|
|
|
} |
|
|
|
this.sendPhoneCode(data) |
|
|
|
return |
|
|
|
} |
|
|
|
// 忘记密码之新密码 |
|
|
|
if (this.loginType == 4) { |
|
|
|
const data = { |
|
|
|
phone: this.form.phone, |
|
|
|
code: this.form.code1, |
|
|
|
pwd: this.form.newPassword1 |
|
|
|
} |
|
|
|
this.updPass(data) |
|
|
|
return |
|
|
|
} |
|
|
|
// 注册 |
|
|
|
if (this.loginType == 5) { |
|
|
|
if (this.form.newPassword1 != this.form.newPassword2) { |
|
|
|
Toast('两次输入密码不一致') |
|
|
|
return |
|
|
|
} |
|
|
|
const data = { |
|
|
|
phone: this.form.phone, |
|
|
|
password: this.form.newPassword1 |
|
|
|
} |
|
|
|
this.registerByPhone(data) |
|
|
|
return |
|
|
|
} |
|
|
|
}, |
|
|
|
// 注册 |
|
|
|
async registerByPhone(data) { |
|
|
|
try { |
|
|
|
const res = await doRegisterByPhone(data) |
|
|
|
console.log(res) |
|
|
|
this.loginType = 1 |
|
|
|
} catch (error) { |
|
|
|
console.log(error, 'error') |
|
|
|
Toast.fail(error.message) |
|
|
|
} |
|
|
|
}, |
|
|
|
// 忘记密码第一步,根据图片验证码和手机号获取短信 |
|
|
|
async sendPhoneCode(data) { |
|
|
|
try { |
|
|
|
const res = await doSendPhoneCode(data) |
|
|
|
console.log(res) |
|
|
|
this.loginType = 4 |
|
|
|
} catch (error) { |
|
|
|
console.log(error, 'error') |
|
|
|
Toast.fail(error.message) |
|
|
|
} |
|
|
|
}, |
|
|
|
// 忘记密码第二部,提交验证码和新密码 |
|
|
|
async updPass(data) { |
|
|
|
try { |
|
|
|
const res = await doUpdPass(data) |
|
|
|
console.log(res) |
|
|
|
this.loginType = 1 |
|
|
|
} catch (error) { |
|
|
|
console.log(error, 'error') |
|
|
|
Toast.fail(error.message) |
|
|
|
} |
|
|
|
}, |
|
|
|
// 提交邀请码 |
|
|
|
submitInviteCode() { |
|
|
|
const data = { |
|
|
|
inviteCode: this.formIII.inviteCode |
|
|
|
} |
|
|
|
this.updateInviteCode(data) |
|
|
|
}, |
|
|
|
|
|
|
|
/** |
|
|
|
* @description:获取手机验证码 |
|
|
|
*/ |
|
|
|
async getPhoneCode(phone) { |
|
|
|
try { |
|
|
|
const res = await getCodeByPhone(phone) |
|
|
|
Toast.success('短信验证码发送成功!') |
|
|
|
this.codeInfo = 60 |
|
|
|
const timer = setInterval(() => { |
|
|
|
if (this.codeInfo != 1) { |
|
|
|
this.codeInfo-- |
|
|
|
} else { |
|
|
|
clearInterval(timer) |
|
|
|
this.codeInfo = '获取验证码' |
|
|
|
} |
|
|
|
}, 1000) |
|
|
|
} catch (error) { |
|
|
|
console.log(error, 'error') |
|
|
|
Toast.fail(error.message) |
|
|
|
} |
|
|
|
}, |
|
|
|
|
|
|
|
/** |
|
|
|
* @description:短信验证码登录 |
|
|
|
*/ |
|
|
|
async LoginByPhone(loginParams) { |
|
|
|
try { |
|
|
|
//密码登录 |
|
|
|
if (this.loginType == 1) { |
|
|
|
const res = await doLogin(loginParams) |
|
|
|
console.log(res) |
|
|
|
} |
|
|
|
// 短信登录 |
|
|
|
if (this.loginType == 2) { |
|
|
|
const res = await doLoginByPhone(loginParams) |
|
|
|
} |
|
|
|
console.log(res, '登录数据') |
|
|
|
const token = res.data.token |
|
|
|
// 将token置入本地存储 |
|
|
|
localStorage.setItem('AccessToken', token) |
|
|
|
// 查询有无邀请码 |
|
|
|
this.checkInviteCode() |
|
|
|
} catch (error) { |
|
|
|
console.log(error, 'error') |
|
|
|
Toast.fail(error.message) |
|
|
|
} |
|
|
|
}, |
|
|
|
|
|
|
|
/** |
|
|
|
* @description:查询用户邀请码状态 |
|
|
|
*/ |
|
|
|
async checkInviteCode() { |
|
|
|
try { |
|
|
|
const res = await doFindInviteCode() |
|
|
|
console.log(res, '查询用户邀请码数据') |
|
|
|
const status = res.data.status |
|
|
|
// 当没有邀请码时,切换输入验证码页面 |
|
|
|
if (status == 0) { |
|
|
|
this.loginType = 3 |
|
|
|
// 有邀请码直接前往我的页面 |
|
|
|
} else if (status == 1) { |
|
|
|
Toast.success('登录成功!') |
|
|
|
this.$router.push('/myPage') |
|
|
|
} |
|
|
|
} catch (error) { |
|
|
|
console.log(error, 'error') |
|
|
|
Toast.fail(error.message) |
|
|
|
} |
|
|
|
}, |
|
|
|
/** |
|
|
|
* @description:查询用户邀请码状态 |
|
|
|
*/ |
|
|
|
async checkInviteCode() { |
|
|
|
this.src = '/api/captcha.jpg?t=' + Date() |
|
|
|
}, |
|
|
|
/** |
|
|
|
* @description:更新邀请码 |
|
|
|
*/ |
|
|
|
async updateInviteCode(inviteCodeData) { |
|
|
|
try { |
|
|
|
const res = await doUpdateInviteCode(inviteCodeData) |
|
|
|
console.log(res, '更新邀请码数据') |
|
|
|
Toast.success('登录成功!') |
|
|
|
this.$router.push('/myPage') |
|
|
|
} catch (error) { |
|
|
|
console.log(error, 'error') |
|
|
|
Toast.fail(error.message) |
|
|
|
} |
|
|
|
} |
|
|
|
}, |
|
|
|
created() { |
|
|
|
// 手机号记忆回填 |
|
|
|
const phoneValue = localStorage.getItem('phoneValue') |
|
|
|
this.form.phone = phoneValue ? phoneValue : '' |
|
|
|
this.getCodeImg() |
|
|
|
}, |
|
|
|
mounted() { |
|
|
|
this.inPage = true |
|
|
|
scrollToID('top') |
|
|
|
} |
|
|
|
} |
|
|
|
</script> |
|
|
|
|
|
|
|
<style lang="scss" scoped> |
|
|
|
.shuaxin { |
|
|
|
margin-left: 10px; |
|
|
|
font-size: 25px; |
|
|
|
line-height: 40px; |
|
|
|
color: rgb(96, 208, 201); |
|
|
|
} |
|
|
|
.yzmImg { |
|
|
|
margin-left: 10px; |
|
|
|
height: 40px; |
|
|
|
width: 100%; |
|
|
|
} |
|
|
|
.greenColor { |
|
|
|
color: #5ed5c8; |
|
|
|
} |
|
|
|
.page { |
|
|
|
opacity: 0; |
|
|
|
transition: all 0.5s; // global-transition |
|
|
|
&.active { |
|
|
|
opacity: 1; |
|
|
|
} |
|
|
|
.logoBox { |
|
|
|
// margin-top: 10px; |
|
|
|
margin-left: 5px; |
|
|
|
margin-top: 25px; |
|
|
|
margin-bottom: 25px; |
|
|
|
overflow: hidden; |
|
|
|
cursor: pointer; |
|
|
|
text-align: center; |
|
|
|
.logo { |
|
|
|
width: 240px; |
|
|
|
height: 70px; |
|
|
|
} |
|
|
|
} |
|
|
|
|
|
|
|
.loginBox { |
|
|
|
height: 500px; |
|
|
|
// background: linear-gradient(140deg, #6e60e9, #2867d4, #1ec2ae); |
|
|
|
margin: auto; |
|
|
|
text-align: center; |
|
|
|
padding-left: 30px; |
|
|
|
padding-right: 30px; |
|
|
|
.welcome { |
|
|
|
font-size: 18px; |
|
|
|
color: #000; |
|
|
|
font-weight: 600; |
|
|
|
margin-bottom: 40px; |
|
|
|
} |
|
|
|
.inBoxEnd { |
|
|
|
display: flex; |
|
|
|
justify-content: end !important; |
|
|
|
} |
|
|
|
.phone { |
|
|
|
position: relative; |
|
|
|
margin-bottom: 25px; |
|
|
|
|
|
|
|
.getCode { |
|
|
|
position: absolute; |
|
|
|
top: 1px; |
|
|
|
right: 10px; |
|
|
|
color: #0068b7; |
|
|
|
} |
|
|
|
} |
|
|
|
.code { |
|
|
|
position: relative; |
|
|
|
.inputCode { |
|
|
|
position: absolute; |
|
|
|
background-color: #fff; |
|
|
|
top: -5px; |
|
|
|
left: 12px; |
|
|
|
font-size: 12px; |
|
|
|
height: 10px; |
|
|
|
line-height: 10px; |
|
|
|
color: #0068b7; |
|
|
|
} |
|
|
|
} |
|
|
|
.morePage { |
|
|
|
display: flex; |
|
|
|
justify-content: space-between; |
|
|
|
margin-top: -9px; |
|
|
|
} |
|
|
|
.submitBtn { |
|
|
|
position: relative; |
|
|
|
// right: 10px; |
|
|
|
// float: right; |
|
|
|
color: #fff; |
|
|
|
font-size: 15px; |
|
|
|
line-height: 15px; |
|
|
|
border: none; |
|
|
|
margin-top: 25px; |
|
|
|
// margin-bottom: 7.5px; |
|
|
|
padding: 9px; |
|
|
|
background-color: #0068b7; |
|
|
|
border-radius: 5px; |
|
|
|
background-image: linear-gradient( |
|
|
|
316deg, |
|
|
|
rgba(110, 228, 215, 1) 0, |
|
|
|
rgba(55, 196, 241, 1) 31.975823%, |
|
|
|
rgba(164, 154, 252, 1) 100% |
|
|
|
); |
|
|
|
border-radius: 25px; |
|
|
|
width: 315px; |
|
|
|
height: 50px; |
|
|
|
// padding: 12px 138px 12px 138px; |
|
|
|
&.inside { |
|
|
|
top: 10px; |
|
|
|
} |
|
|
|
} |
|
|
|
.skipBtn { |
|
|
|
position: relative; |
|
|
|
top: 10px; |
|
|
|
left: 70px; |
|
|
|
right: 10px; |
|
|
|
width: 78px; |
|
|
|
height: 30px; |
|
|
|
color: #fff; |
|
|
|
font-size: 15px; |
|
|
|
line-height: 15px; |
|
|
|
border: none; |
|
|
|
padding: 9px; |
|
|
|
background-color: #0068b7; |
|
|
|
border-radius: 3px; |
|
|
|
margin-top: 160px; |
|
|
|
&.skip { |
|
|
|
background-color: #a0a0a0; |
|
|
|
} |
|
|
|
} |
|
|
|
.forgetPwd { |
|
|
|
position: relative; |
|
|
|
top: -10px; |
|
|
|
float: left; |
|
|
|
font-size: 12px; |
|
|
|
color: #0068b7; |
|
|
|
} |
|
|
|
} |
|
|
|
} |
|
|
|
::v-deep .el-input__inner { |
|
|
|
height: 42px; |
|
|
|
border: 0px; |
|
|
|
background-color: #f6f6f6; |
|
|
|
} |
|
|
|
::v-deep .el-form-item { |
|
|
|
margin-bottom: 25px; |
|
|
|
} |
|
|
|
</style> |