644 lines
22 KiB
Vue
644 lines
22 KiB
Vue
<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">
|
|
{{ lan.$t("huanying") }}
|
|
<span class="orgname">{{ lan.$t("beelink") }}</span>
|
|
</div>
|
|
|
|
<div v-if="stepnow == 1">
|
|
<div class="nosign">
|
|
{{ lan.$t("yiyouzhanghao") }}
|
|
<span class="tosign" @click="navto('/')">
|
|
{{ lan.$t("qudenglu") }}
|
|
</span>
|
|
</div>
|
|
|
|
<a-form :layout="formLayout">
|
|
<a-form-item
|
|
:label="lan.$t('shoujihao')"
|
|
class="form-item"
|
|
>
|
|
<a-input-group compact>
|
|
<a-select
|
|
:default-value="mrqh.name + '+' + mrqh.code"
|
|
size="small"
|
|
@change="getquhao"
|
|
class="getcode"
|
|
style="width: 50%"
|
|
option-label-prop="label"
|
|
show-search
|
|
>
|
|
<a-select-option
|
|
v-for="(i, j) in quhaolist"
|
|
:key="j"
|
|
:value="i.name + '+' + i.code"
|
|
:label="'+' + i.code"
|
|
>
|
|
{{ i.name }}+{{ i.code }}
|
|
</a-select-option>
|
|
<!-- <a-select-option value="Jiangsu"> Jiangsu </a-select-option> -->
|
|
</a-select>
|
|
<!-- <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="lan.$t('shurushouji')"
|
|
/>
|
|
</a-input-group>
|
|
</a-form-item>
|
|
<a-form-item :label="lan.$t('yanzhengma')" class="form-item">
|
|
<a-input-group compact>
|
|
<div
|
|
class="getcode"
|
|
style="width: 50%"
|
|
@click="getcode"
|
|
>
|
|
{{lan.$t('dianjihuoquyzm')}} {{
|
|
time == 60 ? "" : "(" + time + ")"
|
|
}}
|
|
</div>
|
|
<div class="line"></div>
|
|
<a-input
|
|
v-model:value="phone.code"
|
|
style="width: 50%"
|
|
:placeholder="lan.$t('shuruyzm')"
|
|
/>
|
|
</a-input-group>
|
|
</a-form-item>
|
|
<div class="submit" @click="next(2)">{{lan.$t('xiayibu')}}</div>
|
|
<div class="agreement" @click="agree">
|
|
<div class="ifagree">
|
|
<img
|
|
src="@/static/images/agree.png"
|
|
alt=""
|
|
class="agree"
|
|
v-if="ifagree"
|
|
/>
|
|
</div>
|
|
{{lan.$t('tongyixieyi')}}
|
|
</div>
|
|
</a-form>
|
|
</div>
|
|
|
|
<div v-if="stepnow == 2">
|
|
<div class="nosign">
|
|
{{lan.$t('yiyouzhanghao')}}
|
|
<span class="tosign" @click="navto('/')"> {{lan.$t('qudenglu')}} </span>
|
|
</div>
|
|
<a-form :layout="formLayout">
|
|
<div class="signform">
|
|
<a-form-item :label="lan.$t('shezhimima')" class="form-item">
|
|
<a-input
|
|
class="shuru"
|
|
:placeholder="lan.$t('shurumima')"
|
|
type="password"
|
|
v-model:value="userinfo.pass"
|
|
/>
|
|
</a-form-item>
|
|
<a-form-item :label="lan.$t('shezhimima')" class="form-item">
|
|
<a-input
|
|
class="shuru"
|
|
:placeholder="lan.$t('shurumimatwo')"
|
|
type="password"
|
|
v-model:value="userinfo.passtow"
|
|
/>
|
|
</a-form-item>
|
|
<a-form-item :label="lan.$t('xingming')" class="form-item">
|
|
<a-input
|
|
class="shuru"
|
|
:placeholder="lan.$t('shuruxingming')"
|
|
v-model:value="userinfo.name"
|
|
/>
|
|
</a-form-item>
|
|
<a-form-item :label="lan.$t('youxiang')" class="form-item">
|
|
<a-input
|
|
class="shuru"
|
|
:placeholder="lan.$t('shuruyouxiang')"
|
|
v-model:value="userinfo.emil"
|
|
/>
|
|
</a-form-item>
|
|
<a-form-item :label="lan.$t('muyu')" class="form-item">
|
|
<a-input
|
|
class="shuru"
|
|
:placeholder="lan.$t('shurumuyu')"
|
|
v-model:value="userinfo.muyu"
|
|
/>
|
|
</a-form-item>
|
|
<a-form-item :label="lan.$t('jiaoshou')" class="form-item">
|
|
<a-select
|
|
v-model:value="userinfo.jiaoshou"
|
|
class="getcode"
|
|
style="color: #111"
|
|
:placeholder="lan.$t('xuanzejiaoshou')"
|
|
>
|
|
<a-select-option
|
|
v-for="(item, index) in willsay"
|
|
:key="index"
|
|
:value="item.value"
|
|
>
|
|
{{ item.name }}
|
|
</a-select-option>
|
|
</a-select>
|
|
</a-form-item>
|
|
</div>
|
|
|
|
<div class="submit" @click="next(3)">{{lan.$t('lijizhuce')}}</div>
|
|
<div class="orginfo">{{lan.$t('banquan')}}</div>
|
|
</a-form>
|
|
</div>
|
|
|
|
<div v-if="stepnow == 3">
|
|
<div class="nosign">{{lan.$t('您已完成注册')}}</div>
|
|
<img
|
|
src="@/static/images/success.png"
|
|
alt=""
|
|
class="success"
|
|
/>
|
|
<div class="ale" @click="navto('/mine/archives')">
|
|
{{lan.$t('qudangan')}}
|
|
</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' : ''">
|
|
{{lan.$t('yanzhengshouji')}}
|
|
</div>
|
|
</div>
|
|
<div class="stepline"></div>
|
|
<div class="step">
|
|
<div :class="stepnow == 2 ? 'circle step1' : 'circle'">
|
|
02
|
|
</div>
|
|
<div :class="stepnow == 2 ? 'stepnow' : ''">
|
|
{{lan.$t('tianxiexinxi')}}
|
|
</div>
|
|
<div class="back" @click="next(1)" v-if="stepnow == 2">
|
|
{{lan.$t('fanhuishangyibu')}}
|
|
</div>
|
|
</div>
|
|
<div class="stepline"></div>
|
|
<div class="step">
|
|
<div :class="stepnow == 3 ? 'circle step1' : 'circle'">
|
|
03
|
|
</div>
|
|
<div :class="stepnow == 3 ? 'stepnow' : ''">
|
|
{{lan.$t('zhucewancheng')}}
|
|
</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 { computed, defineComponent, onMounted, reactive, ref, toRaw } from "vue";
|
|
import NavTop from "@/components/NavTop.vue";
|
|
import {
|
|
checksmscode,
|
|
checkuser,
|
|
getquhaolist,
|
|
getwillsay,
|
|
interests,
|
|
register,
|
|
sendsms,
|
|
} from "@/api";
|
|
import { message } from "ant-design-vue";
|
|
import router from "@/router";
|
|
import { useI18n } from "@/utils/i18n";
|
|
import store from '@/store';
|
|
|
|
export default defineComponent({
|
|
name: "Sign",
|
|
components: { NavTop },
|
|
setup() {
|
|
const lan: any = useI18n();
|
|
const formLayout = {
|
|
labelCol: 4,
|
|
wrapperCol: 14,
|
|
};
|
|
const time = ref(60); //倒计时初始化
|
|
|
|
const userinfo = ref({
|
|
pass: "",
|
|
passtow: "",
|
|
name: "",
|
|
emil: "",
|
|
muyu: "",
|
|
jiaoshou: "",
|
|
});
|
|
const willsay = ref<any>();
|
|
const mrqh = computed(() => store.state.qh)
|
|
const phone = ref({
|
|
quhao: mrqh.value.code,
|
|
phone: "",
|
|
code: "",
|
|
});
|
|
const quhaolist = ref<any>([
|
|
{
|
|
code: "86",
|
|
id: 214,
|
|
name: "中国",
|
|
},
|
|
]);
|
|
interests().then((res) => {
|
|
willsay.value = res;
|
|
});
|
|
onMounted(async () => {
|
|
quhaolist.value = await getquhaolist();
|
|
});
|
|
|
|
/**
|
|
* @param
|
|
* 点击获取验证码 触发60S倒计时
|
|
*/
|
|
let lock = false;
|
|
const getcode = async () => {
|
|
console.log(11111);
|
|
|
|
if (lock) {
|
|
return;
|
|
}
|
|
if (phone.value.phone == "") {
|
|
message.error(lan.$t('shoujihaoweikong'));
|
|
return;
|
|
}
|
|
const iszc = await checkuser({phone: phone.value.phone})
|
|
if(sessionStorage.getItem("mid") == undefined && iszc.data){
|
|
message.error(iszc.msg)
|
|
return ;
|
|
}
|
|
lock = true;
|
|
sendsms(phone.value.quhao, phone.value.phone);
|
|
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(lan.$t("mimaweikong"));
|
|
return false;
|
|
}
|
|
if (userinfo.value.passtow == "") {
|
|
message.error(lan.$t("mimaweikong"));
|
|
return false;
|
|
}
|
|
if (userinfo.value.pass != userinfo.value.passtow) {
|
|
message.error(lan.$t('mimabuyizhi'));
|
|
return;
|
|
}
|
|
if (userinfo.value.name == "") {
|
|
message.error(lan.$t("xingmingweikong"));
|
|
return false;
|
|
}
|
|
if (userinfo.value.emil == "") {
|
|
message.error(lan.$t('youxiangweikong'));
|
|
return false;
|
|
}else if(!(/^\w+((.\w+)|(-\w+))@[A-Za-z0-9]+((.|-)[A-Za-z0-9]+).[A-Za-z0-9]+$/.test(userinfo.value.emil))){
|
|
message.error(lan.$t('youxiangcuowu'));
|
|
return false;
|
|
}
|
|
if (userinfo.value.muyu == "") {
|
|
message.error(lan.$t('muyuweikong'));
|
|
return false;
|
|
}
|
|
if (userinfo.value.jiaoshou == "") {
|
|
message.error(lan.$t('jiaoshouweikong'));
|
|
return false;
|
|
}
|
|
return true;
|
|
}
|
|
/**
|
|
*@param e 跳到哪一步
|
|
* 步骤条跳到某一步
|
|
*/
|
|
|
|
async function next(e: number) {
|
|
if (!ifagree.value) {
|
|
message.error(lan.$t('weitongyixieyi'));
|
|
return;
|
|
}
|
|
if (stepnow.value > e) {
|
|
stepnow.value = e;
|
|
return;
|
|
}
|
|
switch (e) {
|
|
case 2: {
|
|
console.log(e);
|
|
if (phone.value.phone == "") {
|
|
message.error(lan.$t('shoujihaoweikong'));
|
|
return;
|
|
} else if (phone.value.code == "") {
|
|
message.error(lan.$t('yanzhengmaweikong'));
|
|
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);
|
|
}
|
|
|
|
function getquhao(e?: any){
|
|
console.log(e)
|
|
phone.value.quhao = e.toString()
|
|
phone.value.quhao = phone.value.quhao.split("+")[1];
|
|
}
|
|
|
|
return {
|
|
formLayout,
|
|
getcode,
|
|
time,
|
|
agree,
|
|
ifagree,
|
|
stepnow,
|
|
next,
|
|
phone,
|
|
userinfo,
|
|
willsay,
|
|
navto,
|
|
lan,
|
|
quhaolist,
|
|
getquhao,
|
|
mrqh
|
|
};
|
|
},
|
|
});
|
|
</script>
|
|
<style lang="scss" scoped>
|
|
.login ::v-deep(.ant-select-selection) {
|
|
border: none;
|
|
}
|
|
.login ::v-deep(.ant-input) {
|
|
border: none;
|
|
}
|
|
.ant-input:focus {
|
|
border: none;
|
|
border-bottom: 1px solid white !important;
|
|
box-shadow: none;
|
|
}
|
|
.login ::v-deep(.ant-form-item-label) {
|
|
line-height: 14px;
|
|
}
|
|
.login ::v-deep(.ant-form-item) ::v-deep(label) {
|
|
color: #0dbba4;
|
|
font-size: 11px;
|
|
left: 1px;
|
|
}
|
|
.login {
|
|
min-width: 100%;
|
|
height: 100vh;
|
|
background: url("../../static/images/loginbg.png");
|
|
background-size: 100% 130%;
|
|
background-repeat: no-repeat;
|
|
.box {
|
|
padding-top: 145px;
|
|
|
|
display: flex;
|
|
justify-content: space-around;
|
|
.left1 {
|
|
width: 710px !important;
|
|
}
|
|
.left {
|
|
width: 314px;
|
|
.title {
|
|
font-size: 17px;
|
|
font-weight: bold;
|
|
}
|
|
.orgname {
|
|
font-size: 29px;
|
|
color: #0dbba4;
|
|
cursor: pointer;
|
|
}
|
|
.nosign {
|
|
font-size: 12px;
|
|
color: #666666;
|
|
margin-top: 17px;
|
|
margin-bottom: 35px;
|
|
}
|
|
.tosign {
|
|
color: #0dbba4;
|
|
cursor: pointer;
|
|
}
|
|
.tab {
|
|
margin-bottom: 30px;
|
|
}
|
|
|
|
.form-item {
|
|
border-bottom: 1px solid #e5e5e5;
|
|
font-size: 15px;
|
|
margin-right: 40px;
|
|
}
|
|
.line {
|
|
width: 1px;
|
|
height: 14px;
|
|
background: #e5e5e5;
|
|
margin-top: 10px;
|
|
position: relative;
|
|
z-index: 999;
|
|
}
|
|
::v-deep(.getcode) {
|
|
font-size: 15px;
|
|
color: #08ae98;
|
|
width: 313px;
|
|
// width: 50%;
|
|
line-height: 30px;
|
|
cursor: pointer;
|
|
}
|
|
::v-deep(.ant-select-selection){
|
|
background-color: unset;
|
|
}
|
|
.orginfo {
|
|
margin-top: 178px;
|
|
}
|
|
.submit {
|
|
width: 143px;
|
|
height: 35px;
|
|
background: linear-gradient(
|
|
90deg,
|
|
#00dac2,
|
|
#42de9e,
|
|
#88e062,
|
|
#d0eb3e,
|
|
#fffa18
|
|
);
|
|
border-radius: 18px;
|
|
font-size: 15px;
|
|
color: white;
|
|
font-weight: 800;
|
|
text-align: center;
|
|
line-height: 35px;
|
|
margin-top: 45px;
|
|
}
|
|
.agreement {
|
|
font-size: 12px;
|
|
display: flex;
|
|
margin-top: 23px;
|
|
cursor: default;
|
|
.ifagree {
|
|
width: 12px;
|
|
height: 12px;
|
|
border-radius: 3px;
|
|
border: 1px solid #0ebca4;
|
|
margin: auto 0;
|
|
margin-right: 7px;
|
|
.agree {
|
|
width: 8px;
|
|
height: 6px;
|
|
position: relative;
|
|
top: -4px;
|
|
left: 2.5px;
|
|
}
|
|
}
|
|
}
|
|
}
|
|
.right1 {
|
|
width: 230px !important;
|
|
}
|
|
.right {
|
|
width: 690px;
|
|
.steps {
|
|
padding-top: 112px;
|
|
.stepline {
|
|
width: 1px;
|
|
height: 50px;
|
|
border: 1px dashed #eeeeee;
|
|
position: relative;
|
|
left: 13px;
|
|
}
|
|
.step {
|
|
display: flex;
|
|
color: #999999;
|
|
font-size: 11px;
|
|
line-height: 28px;
|
|
font-weight: bold;
|
|
.back {
|
|
color: #0dbba4;
|
|
margin-left: 23px;
|
|
}
|
|
.circle {
|
|
width: 29px;
|
|
height: 29px;
|
|
border-radius: 15px;
|
|
background: #eeeeee;
|
|
font-size: 12px;
|
|
color: #999999;
|
|
text-align: center;
|
|
line-height: 29px;
|
|
font-weight: 800;
|
|
margin-right: 17px;
|
|
}
|
|
}
|
|
.step1 {
|
|
background: #08ae98 !important;
|
|
color: white !important;
|
|
}
|
|
.stepnow {
|
|
color: #111111;
|
|
}
|
|
}
|
|
}
|
|
}
|
|
.signform {
|
|
display: flex;
|
|
flex-wrap: wrap;
|
|
.shuru {
|
|
width: 313px;
|
|
}
|
|
}
|
|
.icons {
|
|
margin-right: 41px;
|
|
margin-top: 227px;
|
|
.icon {
|
|
width: 28px;
|
|
height: 28px;
|
|
margin-right: 18px;
|
|
float: right;
|
|
}
|
|
}
|
|
.success {
|
|
width: 250px;
|
|
height: 233px;
|
|
}
|
|
.ale {
|
|
color: #08ae98;
|
|
font-size: 14px;
|
|
font-weight: 800;
|
|
margin-top: 34px;
|
|
cursor: pointer;
|
|
}
|
|
}
|
|
</style> |