theluyuan/beelink
1
0
Fork 0
Code Issues Pull Requests Releases Wiki Activity

修改了缩进

Browse Source
This commit is contained in:
luyuan 2020-10-19 17:28:13 +08:00
parent 13dc309bb9
commit d20986da78
Signed by: theluyuan
GPG Key ID: A7972FD973317FF3
1 changed files with 308 additions and 269 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

577
src/views/login/Sign.vue
View File

@ -1,291 +1,330 @@
<template> <template>
<div class="login"> <div class="login">
<NavTop :type="0" style="flex-shrink: 0"></NavTop> <NavTop :type="0" style="flex-shrink: 0"></NavTop>
<div class="box"> <div class="box">
<div :class="stepnow != 2 ? 'left' : 'left left1'"> <div :class="stepnow != 2 ? 'left' : 'left left1'">
<div class="title"> <div class="title">
您好，欢迎来到 <span class="orgname">Beelink</span> 您好，欢迎来到 <span class="orgname">Beelink</span>
</div> </div>
<div v-if="stepnow == 1"> <div v-if="stepnow == 1">
<div class="nosign"> <div class="nosign">
已有账号？ 已有账号？
<span class="tosign"> 去登录 </span> <span class="tosign" @click="navto('/')"> 去登录 </span>
</div> </div>
<a-form :layout="formLayout"> <a-form :layout="formLayout">
<a-form-item label="手机号" class="form-item"> <a-form-item label="手机号" class="form-item">
<a-input-group compact> <a-input-group compact>
<a-select <a-select
class="getcode" class="getcode"
style="width: 50%" style="width: 50%"
v-model:value="phone.quhao" v-model:value="phone.quhao"
> >
<a-select-option value="86"> <a-select-option value="86"> 中国+0086 </a-select-option>
中国+0086 <a-select-option value="Jiangsu"> Jiangsu </a-select-option>
</a-select-option> </a-select>
<a-select-option value="Jiangsu"> Jiangsu </a-select-option> <div class="line"></div>
</a-select> <a-input
<div class="line"></div> v-model:value="phone.phone"
<a-input v-model:value="phone.phone" style="width: 50%" placeholder="请输入您的手机号" /> style="width: 50%"
</a-input-group> placeholder="请输入您的手机号"
</a-form-item> />
<a-form-item label="验证码" class="form-item"> </a-input-group>
<a-input-group compact> </a-form-item>
<div class="getcode" style="width: 50%" @click="getcode"> <a-form-item label="验证码" class="form-item">
点击获取验证码{{ time == 60 ? "" : "(" + time + ")" }} <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>
<div class="line"></div> 勾选表示同意 《用户注册协议和隐私政策》
<a-input v-model:value="phone.code" style="width: 50%" placeholder="请输入您的验证码" /> </div>
</a-input-group> </a-form>
</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> </div>
<div class="submit" @click="next(3)">立刻注册</div> <div v-if="stepnow == 2">
<div class="orginfo">Beelink公司版权所有 2019—2022</div> <div class="nosign">
</a-form> 已有账号？
</div> <span class="tosign" @click="navto('/')"> 去登录 </span>
</div>
<div v-if="stepnow == 3"> <a-form :layout="formLayout">
<div class="nosign">您已完成注册</div> <div class="signform">
<img src="@/static/images/success.png" alt="" class="success" /> <a-form-item label="设置密码" class="form-item">
<div class="ale" @click="navto()">恭喜您注册成功，点击跳转到我的档案页面</div> <a-input
</div> class="shuru"
</div> placeholder="请输入您的密码"
<div :class="stepnow != 2 ? 'right' : 'right right1'"> type="password"
<div class="steps"> v-model:value="userinfo.pass"
<div class="step"> />
<div :class="stepnow == 1 ? 'circle step1' : 'circle'">01</div> </a-form-item>
<div :class="stepnow == 1 ? 'stepnow' : ''">验证手机号</div> <a-form-item label="设置密码" class="form-item">
</div> <a-input
<div class="stepline"></div> class="shuru"
<div class="step"> placeholder="请再次输入您的密码"
<div :class="stepnow == 2 ? 'circle step1' : 'circle'">02</div> type="password"
<div :class="stepnow == 2 ? 'stepnow' : ''">填写帐号信息</div> v-model:value="userinfo.passtow"
<div class="back" @click="next(1)" v-if="stepnow == 2"> />
返回上一步 </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>
<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>
<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> </div>
</div>
</template> </template>
<script lang="ts"> <script lang="ts">
import { defineComponent, reactive, ref, toRaw } from "vue"; import { defineComponent, reactive, ref, toRaw } from "vue";
import NavTop from "@/components/NavTop.vue"; import NavTop from "@/components/NavTop.vue";
import { checksmscode, getwillsay, register, sendsms } from '@/api'; import { checksmscode, getwillsay, register, sendsms } from "@/api";
import { message } from 'ant-design-vue'; import { message } from "ant-design-vue";
import router from '@/router'; import router from "@/router";
export default defineComponent({ export default defineComponent({
name: "Sign", name: "Sign",
components: { NavTop }, components: { NavTop },
setup() { setup() {
const formLayout = { const formLayout = {
labelCol: 4, labelCol: 4,
wrapperCol: 14, wrapperCol: 14,
}; };
const time = ref(60); //倒计时初始化 const time = ref(60); //倒计时初始化
const phone = ref({ const phone = ref({
quhao:"86", quhao: "86",
phone: "", phone: "",
code: "" code: "",
}); });
const userinfo = ref({ const userinfo = ref({
pass: "", pass: "",
passtow: "", passtow: "",
name: "", name: "",
emil: "", emil: "",
muyu: "", muyu: "",
jiaoshou: "" jiaoshou: "",
}) });
const willsay = ref<any>(); const willsay = ref<any>();
getwillsay().then((res) => { getwillsay().then((res) => {
willsay.value = res; willsay.value = res;
}) });
/** /**
* @param * @param
* 点击获取验证码 触发60S倒计时 * 点击获取验证码 触发60S倒计时
*/ */
let lock = false; let lock = false;
const getcode: () => void = () => { const getcode: () => void = () => {
console.log(11111); console.log(11111);
if (lock) { if (lock) {
return; 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;
} }
} 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 跳到哪一步
function navto(){ * 步骤条跳到某一步
router.push("/mine/archives"); */
}
return { async function next(e: number) {
formLayout, if (stepnow.value > e) {
getcode, stepnow.value = e;
time, return;
agree, }
ifagree, switch (e) {
stepnow, case 2: {
next, console.log(e);
phone, if (phone.value.phone == "") {
userinfo, message.error("手机号不能为空");
willsay, return;
navto } 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> </script>
<style lang="scss" scoped> <style lang="scss" scoped>