修改了缩进
This commit is contained in:
parent
13dc309bb9
commit
d20986da78
GPG Key ID:
A7972FD973317FF3
@ -1,291 +1,330 @@
|
||||
<template>
|
||||
<div class="login">
|
||||
<NavTop :type="0" style="flex-shrink: 0"></NavTop>
|
||||
<div class="box">
|
||||
<div :class="stepnow != 2 ? 'left' : 'left left1'">
|
||||
<div class="title">
|
||||
您好，欢迎来到 <span class="orgname">Beelink</span>
|
||||
</div>
|
||||
<div class="login">
|
||||
<NavTop :type="0" style="flex-shrink: 0"></NavTop>
|
||||
<div class="box">
|
||||
<div :class="stepnow != 2 ? 'left' : 'left left1'">
|
||||
<div class="title">
|
||||
您好，欢迎来到 <span class="orgname">Beelink</span>
|
||||
</div>
|
||||
|
||||
<div v-if="stepnow == 1">
|
||||
<div class="nosign">
|
||||
已有账号？
|
||||
<span class="tosign"> 去登录 </span>
|
||||
</div>
|
||||
<div v-if="stepnow == 1">
|
||||
<div class="nosign">
|
||||
已有账号？
|
||||
<span class="tosign" @click="navto('/')"> 去登录 </span>
|
||||
</div>
|
||||
|
||||
<a-form :layout="formLayout">
|
||||
<a-form-item label="手机号" class="form-item">
|
||||
<a-input-group compact>
|
||||
<a-select
|
||||
class="getcode"
|
||||
style="width: 50%"
|
||||
v-model:value="phone.quhao"
|
||||
>
|
||||
<a-select-option value="86">
|
||||
中国+0086
|
||||
</a-select-option>
|
||||
<a-select-option value="Jiangsu"> Jiangsu </a-select-option>
|
||||
</a-select>
|
||||
<div class="line"></div>
|
||||
<a-input v-model:value="phone.phone" style="width: 50%" placeholder="请输入您的手机号" />
|
||||
</a-input-group>
|
||||
</a-form-item>
|
||||
<a-form-item label="验证码" class="form-item">
|
||||
<a-input-group compact>
|
||||
<div class="getcode" style="width: 50%" @click="getcode">
|
||||
点击获取验证码{{ time == 60 ? "" : "(" + time + ")" }}
|
||||
<a-form :layout="formLayout">
|
||||
<a-form-item label="手机号" class="form-item">
|
||||
<a-input-group compact>
|
||||
<a-select
|
||||
class="getcode"
|
||||
style="width: 50%"
|
||||
v-model:value="phone.quhao"
|
||||
>
|
||||
<a-select-option value="86"> 中国+0086 </a-select-option>
|
||||
<a-select-option value="Jiangsu"> Jiangsu </a-select-option>
|
||||
</a-select>
|
||||
<div class="line"></div>
|
||||
<a-input
|
||||
v-model:value="phone.phone"
|
||||
style="width: 50%"
|
||||
placeholder="请输入您的手机号"
|
||||
/>
|
||||
</a-input-group>
|
||||
</a-form-item>
|
||||
<a-form-item label="验证码" class="form-item">
|
||||
<a-input-group compact>
|
||||
<div class="getcode" style="width: 50%" @click="getcode">
|
||||
点击获取验证码{{ time == 60 ? "" : "(" + time + ")" }}
|
||||
</div>
|
||||
<div class="line"></div>
|
||||
<a-input
|
||||
v-model:value="phone.code"
|
||||
style="width: 50%"
|
||||
placeholder="请输入您的验证码"
|
||||
/>
|
||||
</a-input-group>
|
||||
</a-form-item>
|
||||
<div class="submit" @click="next(2)">下一步</div>
|
||||
<div class="agreement" @click="agree">
|
||||
<div class="ifagree">
|
||||
<img
|
||||
src="@/static/images/agree.png"
|
||||
alt=""
|
||||
class="agree"
|
||||
v-if="ifagree"
|
||||
/>
|
||||
</div>
|
||||
<div class="line"></div>
|
||||
<a-input v-model:value="phone.code" style="width: 50%" placeholder="请输入您的验证码" />
|
||||
</a-input-group>
|
||||
</a-form-item>
|
||||
<div class="submit" @click="next(2)">下一步</div>
|
||||
<div class="agreement" @click="agree">
|
||||
<div class="ifagree">
|
||||
<img
|
||||
src="@/static/images/agree.png"
|
||||
alt=""
|
||||
class="agree"
|
||||
v-if="ifagree"
|
||||
/>
|
||||
</div>
|
||||
勾选表示同意 《用户注册协议和隐私政策》
|
||||
</div>
|
||||
</a-form>
|
||||
</div>
|
||||
|
||||
<div v-if="stepnow == 2">
|
||||
<div class="nosign">
|
||||
已有账号？
|
||||
<span class="tosign"> 去登录 </span>
|
||||
</div>
|
||||
<a-form :layout="formLayout">
|
||||
<div class="signform">
|
||||
<a-form-item label="设置密码" class="form-item">
|
||||
<a-input
|
||||
class="shuru"
|
||||
placeholder="请输入您的密码"
|
||||
type="password"
|
||||
v-model:value="userinfo.pass"
|
||||
/>
|
||||
</a-form-item>
|
||||
<a-form-item label="设置密码" class="form-item">
|
||||
<a-input
|
||||
class="shuru"
|
||||
placeholder="请再次输入您的密码"
|
||||
type="password"
|
||||
v-model:value="userinfo.passtow"
|
||||
/>
|
||||
</a-form-item>
|
||||
<a-form-item label="姓名" class="form-item">
|
||||
<a-input class="shuru" placeholder="请输入您的姓名" v-model:value="userinfo.name" />
|
||||
</a-form-item>
|
||||
<a-form-item label="邮箱" class="form-item">
|
||||
<a-input class="shuru" placeholder="请输入您的邮箱" v-model:value="userinfo.emil" />
|
||||
</a-form-item>
|
||||
<a-form-item label="母语" class="form-item">
|
||||
<a-input class="shuru" placeholder="请输入您的母语" v-model:value="userinfo.muyu" />
|
||||
</a-form-item>
|
||||
<a-form-item label="教授" class="form-item">
|
||||
<a-select v-model:value="userinfo.jiaoshou" class="getcode" style="color: #111;" placeholder="请选择您的教授">
|
||||
<a-select-option v-for="(item, index) in willsay" :key="index" :value="item.languageid" >
|
||||
{{ item.name }}
|
||||
</a-select-option>
|
||||
</a-select>
|
||||
</a-form-item>
|
||||
勾选表示同意 《用户注册协议和隐私政策》
|
||||
</div>
|
||||
</a-form>
|
||||
</div>
|
||||
|
||||
<div class="submit" @click="next(3)">立刻注册</div>
|
||||
<div class="orginfo">Beelink公司版权所有 2019—2022</div>
|
||||
</a-form>
|
||||
</div>
|
||||
|
||||
<div v-if="stepnow == 3">
|
||||
<div class="nosign">您已完成注册</div>
|
||||
<img src="@/static/images/success.png" alt="" class="success" />
|
||||
<div class="ale" @click="navto()">恭喜您注册成功，点击跳转到我的档案页面</div>
|
||||
</div>
|
||||
</div>
|
||||
<div :class="stepnow != 2 ? 'right' : 'right right1'">
|
||||
<div class="steps">
|
||||
<div class="step">
|
||||
<div :class="stepnow == 1 ? 'circle step1' : 'circle'">01</div>
|
||||
<div :class="stepnow == 1 ? 'stepnow' : ''">验证手机号</div>
|
||||
</div>
|
||||
<div class="stepline"></div>
|
||||
<div class="step">
|
||||
<div :class="stepnow == 2 ? 'circle step1' : 'circle'">02</div>
|
||||
<div :class="stepnow == 2 ? 'stepnow' : ''">填写帐号信息</div>
|
||||
<div class="back" @click="next(1)" v-if="stepnow == 2">
|
||||
返回上一步
|
||||
<div v-if="stepnow == 2">
|
||||
<div class="nosign">
|
||||
已有账号？
|
||||
<span class="tosign" @click="navto('/')"> 去登录 </span>
|
||||
</div>
|
||||
<a-form :layout="formLayout">
|
||||
<div class="signform">
|
||||
<a-form-item label="设置密码" class="form-item">
|
||||
<a-input
|
||||
class="shuru"
|
||||
placeholder="请输入您的密码"
|
||||
type="password"
|
||||
v-model:value="userinfo.pass"
|
||||
/>
|
||||
</a-form-item>
|
||||
<a-form-item label="设置密码" class="form-item">
|
||||
<a-input
|
||||
class="shuru"
|
||||
placeholder="请再次输入您的密码"
|
||||
type="password"
|
||||
v-model:value="userinfo.passtow"
|
||||
/>
|
||||
</a-form-item>
|
||||
<a-form-item label="姓名" class="form-item">
|
||||
<a-input
|
||||
class="shuru"
|
||||
placeholder="请输入您的姓名"
|
||||
v-model:value="userinfo.name"
|
||||
/>
|
||||
</a-form-item>
|
||||
<a-form-item label="邮箱" class="form-item">
|
||||
<a-input
|
||||
class="shuru"
|
||||
placeholder="请输入您的邮箱"
|
||||
v-model:value="userinfo.emil"
|
||||
/>
|
||||
</a-form-item>
|
||||
<a-form-item label="母语" class="form-item">
|
||||
<a-input
|
||||
class="shuru"
|
||||
placeholder="请输入您的母语"
|
||||
v-model:value="userinfo.muyu"
|
||||
/>
|
||||
</a-form-item>
|
||||
<a-form-item label="教授" class="form-item">
|
||||
<a-select
|
||||
v-model:value="userinfo.jiaoshou"
|
||||
class="getcode"
|
||||
style="color: #111"
|
||||
placeholder="请选择您的教授"
|
||||
>
|
||||
<a-select-option
|
||||
v-for="(item, index) in willsay"
|
||||
:key="index"
|
||||
:value="item.languageid"
|
||||
>
|
||||
{{ item.name }}
|
||||
</a-select-option>
|
||||
</a-select>
|
||||
</a-form-item>
|
||||
</div>
|
||||
|
||||
<div class="submit" @click="next(3)">立刻注册</div>
|
||||
<div class="orginfo">Beelink公司版权所有 2019—2022</div>
|
||||
</a-form>
|
||||
</div>
|
||||
|
||||
<div v-if="stepnow == 3">
|
||||
<div class="nosign">您已完成注册</div>
|
||||
<img src="@/static/images/success.png" alt="" class="success" />
|
||||
<div class="ale" @click="navto('/mine/archives')">
|
||||
恭喜您注册成功，点击跳转到我的档案页面
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div :class="stepnow != 2 ? 'right' : 'right right1'">
|
||||
<div class="steps">
|
||||
<div class="step">
|
||||
<div :class="stepnow == 1 ? 'circle step1' : 'circle'">01</div>
|
||||
<div :class="stepnow == 1 ? 'stepnow' : ''">验证手机号</div>
|
||||
</div>
|
||||
<div class="stepline"></div>
|
||||
<div class="step">
|
||||
<div :class="stepnow == 2 ? 'circle step1' : 'circle'">02</div>
|
||||
<div :class="stepnow == 2 ? 'stepnow' : ''">填写帐号信息</div>
|
||||
<div class="back" @click="next(1)" v-if="stepnow == 2">
|
||||
返回上一步
|
||||
</div>
|
||||
</div>
|
||||
<div class="stepline"></div>
|
||||
<div class="step">
|
||||
<div :class="stepnow == 3 ? 'circle step1' : 'circle'">03</div>
|
||||
<div :class="stepnow == 3 ? 'stepnow' : ''">帐号注册完成</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="icons" v-if="stepnow == 2">
|
||||
<img src="@/static/images/weixin.png" alt="" class="icon" />
|
||||
<img src="@/static/images/weibo.png" alt="" class="icon" />
|
||||
<img src="@/static/images/facebook.png" alt="" class="icon" />
|
||||
</div>
|
||||
</div>
|
||||
<div class="stepline"></div>
|
||||
<div class="step">
|
||||
<div :class="stepnow == 3 ? 'circle step1' : 'circle'">03</div>
|
||||
<div :class="stepnow == 3 ? 'stepnow' : ''">帐号注册完成</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="icons" v-if="stepnow == 2">
|
||||
<img src="@/static/images/weixin.png" alt="" class="icon" />
|
||||
<img src="@/static/images/weibo.png" alt="" class="icon" />
|
||||
<img src="@/static/images/facebook.png" alt="" class="icon" />
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script lang="ts">
|
||||
import { defineComponent, reactive, ref, toRaw } from "vue";
|
||||
import NavTop from "@/components/NavTop.vue";
|
||||
import { checksmscode, getwillsay, register, sendsms } from '@/api';
|
||||
import { message } from 'ant-design-vue';
|
||||
import router from '@/router';
|
||||
import { checksmscode, getwillsay, register, sendsms } from "@/api";
|
||||
import { message } from "ant-design-vue";
|
||||
import router from "@/router";
|
||||
|
||||
export default defineComponent({
|
||||
name: "Sign",
|
||||
components: { NavTop },
|
||||
setup() {
|
||||
const formLayout = {
|
||||
labelCol: 4,
|
||||
wrapperCol: 14,
|
||||
};
|
||||
const time = ref(60); //倒计时初始化
|
||||
const phone = ref({
|
||||
quhao:"86",
|
||||
phone: "",
|
||||
code: ""
|
||||
});
|
||||
const userinfo = ref({
|
||||
pass: "",
|
||||
passtow: "",
|
||||
name: "",
|
||||
emil: "",
|
||||
muyu: "",
|
||||
jiaoshou: ""
|
||||
})
|
||||
const willsay = ref<any>();
|
||||
getwillsay().then((res) => {
|
||||
willsay.value = res;
|
||||
})
|
||||
/**
|
||||
* @param
|
||||
* 点击获取验证码 触发60S倒计时
|
||||
*/
|
||||
let lock = false;
|
||||
const getcode: () => void = () => {
|
||||
console.log(11111);
|
||||
if (lock) {
|
||||
return;
|
||||
}
|
||||
if(phone.value.phone == ""){
|
||||
message.error("手机号不能为空");
|
||||
return ;
|
||||
}
|
||||
lock = true;
|
||||
sendsms(phone.value.quhao + phone.value.phone, 0);
|
||||
const timestep = setInterval(() => {
|
||||
console.log(phone);
|
||||
time.value = time.value - 1;
|
||||
if (time.value <= 0) {
|
||||
time.value = 60;
|
||||
clearInterval(timestep);
|
||||
lock = false;
|
||||
}
|
||||
}, 1000);
|
||||
};
|
||||
const ifagree = ref(true); //是否同意用户协议
|
||||
|
||||
/**
|
||||
*@param
|
||||
* 用户协议前面radio 的点击效果
|
||||
*/
|
||||
const agree: () => void = () => {
|
||||
ifagree.value = ifagree.value == true ? false : true;
|
||||
console.log(ifagree.value, 600);
|
||||
};
|
||||
|
||||
const stepnow = ref(1); // 步骤条初始
|
||||
|
||||
function yanzheng(){
|
||||
if(userinfo.value.pass == ""){
|
||||
message.error("密码不能为空")
|
||||
return false
|
||||
}
|
||||
if(userinfo.value.passtow == ""){
|
||||
message.error("密码不能为空")
|
||||
return false
|
||||
}
|
||||
if(userinfo.value.name == ""){
|
||||
message.error("姓名不能为空")
|
||||
return false
|
||||
}
|
||||
if(userinfo.value.emil == ""){
|
||||
message.error("邮箱不能为空")
|
||||
return false
|
||||
}
|
||||
if(userinfo.value.muyu == ""){
|
||||
message.error("母语不能为空")
|
||||
return false
|
||||
}
|
||||
if(userinfo.value.jiaoshou == ""){
|
||||
message.error("请选择教授语言")
|
||||
return false
|
||||
}
|
||||
return true;
|
||||
}
|
||||
/**
|
||||
*@param e 跳到哪一步
|
||||
* 步骤条跳到某一步
|
||||
*/
|
||||
|
||||
async function next (e: number) {
|
||||
switch (e) {
|
||||
case 2:{
|
||||
console.log(e)
|
||||
if(phone.value.phone == ""){
|
||||
message.error("手机号不能为空")
|
||||
return ;
|
||||
}else if(phone.value.code == ""){
|
||||
message.error("验证码不能为空")
|
||||
return ;
|
||||
}
|
||||
const res = await checksmscode(phone.value.quhao + phone.value.phone, phone.value.code);
|
||||
if(res){
|
||||
stepnow.value = e;
|
||||
}
|
||||
break;
|
||||
}
|
||||
case 3: {
|
||||
console.log(userinfo.value)
|
||||
const yz = yanzheng();
|
||||
if(yz){
|
||||
const res = await register({...toRaw(phone.value), ...toRaw(userinfo.value)});
|
||||
if(res){
|
||||
stepnow.value = e;
|
||||
name: "Sign",
|
||||
components: { NavTop },
|
||||
setup() {
|
||||
const formLayout = {
|
||||
labelCol: 4,
|
||||
wrapperCol: 14,
|
||||
};
|
||||
const time = ref(60); //倒计时初始化
|
||||
const phone = ref({
|
||||
quhao: "86",
|
||||
phone: "",
|
||||
code: "",
|
||||
});
|
||||
const userinfo = ref({
|
||||
pass: "",
|
||||
passtow: "",
|
||||
name: "",
|
||||
emil: "",
|
||||
muyu: "",
|
||||
jiaoshou: "",
|
||||
});
|
||||
const willsay = ref<any>();
|
||||
getwillsay().then((res) => {
|
||||
willsay.value = res;
|
||||
});
|
||||
/**
|
||||
* @param
|
||||
* 点击获取验证码 触发60S倒计时
|
||||
*/
|
||||
let lock = false;
|
||||
const getcode: () => void = () => {
|
||||
console.log(11111);
|
||||
if (lock) {
|
||||
return;
|
||||
}
|
||||
}
|
||||
if (phone.value.phone == "") {
|
||||
message.error("手机号不能为空");
|
||||
return;
|
||||
}
|
||||
lock = true;
|
||||
sendsms(phone.value.quhao + phone.value.phone, 0);
|
||||
const timestep = setInterval(() => {
|
||||
console.log(phone);
|
||||
time.value = time.value - 1;
|
||||
if (time.value <= 0) {
|
||||
time.value = 60;
|
||||
clearInterval(timestep);
|
||||
lock = false;
|
||||
}
|
||||
}, 1000);
|
||||
};
|
||||
const ifagree = ref(true); //是否同意用户协议
|
||||
|
||||
/**
|
||||
*@param
|
||||
* 用户协议前面radio 的点击效果
|
||||
*/
|
||||
const agree: () => void = () => {
|
||||
ifagree.value = ifagree.value == true ? false : true;
|
||||
console.log(ifagree.value, 600);
|
||||
};
|
||||
|
||||
const stepnow = ref(1); // 步骤条初始
|
||||
|
||||
function yanzheng() {
|
||||
if (userinfo.value.pass == "") {
|
||||
message.error("密码不能为空");
|
||||
return false;
|
||||
}
|
||||
if (userinfo.value.passtow == "") {
|
||||
message.error("密码不能为空");
|
||||
return false;
|
||||
}
|
||||
if (userinfo.value.name == "") {
|
||||
message.error("姓名不能为空");
|
||||
return false;
|
||||
}
|
||||
if (userinfo.value.emil == "") {
|
||||
message.error("邮箱不能为空");
|
||||
return false;
|
||||
}
|
||||
if (userinfo.value.muyu == "") {
|
||||
message.error("母语不能为空");
|
||||
return false;
|
||||
}
|
||||
if (userinfo.value.jiaoshou == "") {
|
||||
message.error("请选择教授语言");
|
||||
return false;
|
||||
}
|
||||
return true;
|
||||
}
|
||||
}
|
||||
}
|
||||
function navto(){
|
||||
router.push("/mine/archives");
|
||||
}
|
||||
return {
|
||||
formLayout,
|
||||
getcode,
|
||||
time,
|
||||
agree,
|
||||
ifagree,
|
||||
stepnow,
|
||||
next,
|
||||
phone,
|
||||
userinfo,
|
||||
willsay,
|
||||
navto
|
||||
};
|
||||
},
|
||||
/**
|
||||
*@param e 跳到哪一步
|
||||
* 步骤条跳到某一步
|
||||
*/
|
||||
|
||||
async function next(e: number) {
|
||||
if (stepnow.value > e) {
|
||||
stepnow.value = e;
|
||||
return;
|
||||
}
|
||||
switch (e) {
|
||||
case 2: {
|
||||
console.log(e);
|
||||
if (phone.value.phone == "") {
|
||||
message.error("手机号不能为空");
|
||||
return;
|
||||
} else if (phone.value.code == "") {
|
||||
message.error("验证码不能为空");
|
||||
return;
|
||||
}
|
||||
const res = await checksmscode(
|
||||
phone.value.quhao + phone.value.phone,
|
||||
phone.value.code
|
||||
);
|
||||
if (res) {
|
||||
stepnow.value = e;
|
||||
}
|
||||
break;
|
||||
}
|
||||
case 3: {
|
||||
console.log(userinfo.value);
|
||||
const yz = yanzheng();
|
||||
if (yz) {
|
||||
const res = await register({
|
||||
...toRaw(phone.value),
|
||||
...toRaw(userinfo.value),
|
||||
});
|
||||
if (res) {
|
||||
stepnow.value = e;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
function navto(url: string) {
|
||||
router.push(url);
|
||||
}
|
||||
return {
|
||||
formLayout,
|
||||
getcode,
|
||||
time,
|
||||
agree,
|
||||
ifagree,
|
||||
stepnow,
|
||||
next,
|
||||
phone,
|
||||
userinfo,
|
||||
willsay,
|
||||
navto,
|
||||
};
|
||||
},
|
||||
});
|
||||
</script>
|
||||
<style lang="scss" scoped>
|
||||
|
||||
Loading…
Reference in New Issue
Block a user