437 lines
11 KiB
Vue
437 lines
11 KiB
Vue
<template>
|
|
<div class="login">
|
|
<div class="box">
|
|
<div :class="stepnow != 2 ? 'left' : 'left left1'">
|
|
<div class="title">
|
|
<span class="orgname">{{lan.$t('beelink')}}</span>{{lan.$t('chongzhimima')}}
|
|
</div>
|
|
|
|
<div v-if="stepnow == 1">
|
|
<div class="nosign">
|
|
{{lan.$t('xiangqimima')}}
|
|
<span class="tosign"><router-link to="/"> {{lan.$t('qudenglu')}} </router-link></span>
|
|
</div>
|
|
|
|
<a-form :layout="formLayout">
|
|
<a-form-item :label="lan.$t('zhanghuming')" class="form-item">
|
|
<a-input class="shuru" :placeholder="lan.$t('shuruzhanghao')" v-model:value="uinfo.phone"/>
|
|
</a-form-item>
|
|
<div class="submit" @click="next(2)">{{lan.$t('xiayibu')}}</div>
|
|
|
|
</a-form>
|
|
</div>
|
|
|
|
<div v-if="stepnow == 2">
|
|
<div class="nosign">
|
|
{{lan.$t('yiyouzhanghao')}}
|
|
<span class="tosign"><router-link to="/"> {{lan.$t('qudenglu')}} </router-link></span>
|
|
</div>
|
|
<a-form :layout="formLayout">
|
|
<div class="signform">
|
|
<div style="display:flex">
|
|
<a-form-item :label="lan.$t('shoujihao')" class="shuru">
|
|
<div>{{uinfo.phone}}</div>
|
|
</a-form-item>
|
|
<a-form-item :label="lan.$t('yanzhengma')" class="form-item yzm">
|
|
|
|
<a-input-group compact>
|
|
<div class="getcode" @click="getcode">
|
|
{{lan.$t('dianjihuoquyzm')}} {{ time == 60 ? "" : "(" + time + ")" }}
|
|
</div>
|
|
|
|
<div class="line"></div>
|
|
<a-input style="width: 50%" :placeholder="lan.$t('shuruyzm')" v-model:value="uinfo.code"/>
|
|
</a-input-group>
|
|
</a-form-item>
|
|
|
|
</div>
|
|
|
|
<div style="display:flex">
|
|
<a-form-item :label="lan.$t('chongzhimima')" class="form-item">
|
|
<a-input class="shuru" :placeholder="lan.$t('chongzhishurumima')" type="password" v-model:value="uinfo.password"/>
|
|
</a-form-item>
|
|
<a-form-item :label="lan.$t('querenmima')" class="form-item">
|
|
<a-input class="shuru" :placeholder="lan.$t('shurumimatwo')" type="password" v-model:value="uinfo.repassword"/>
|
|
</a-form-item>
|
|
</div>
|
|
|
|
</div>
|
|
|
|
<div class="submit" @click="next(3)">{{lan.$t('querenchongzhi')}}</div>
|
|
<div class="orginfo">{{lan.$t('banquan')}}</div>
|
|
</a-form>
|
|
</div>
|
|
|
|
<div v-if="stepnow == 3">
|
|
<div class="nosign">{{lan.$t('wanchengchongzhi')}}</div>
|
|
<img src="@/static/images/success.png" alt="" class="success">
|
|
<div class="ale" @click="tologin">{{lan.$t('chongzhichenggong')}}</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('shibiezhanghao')}}</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('yanzhengxinxi')}}</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('chongzhiwancheng')}}</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 { checksmscode, checkuser, editpassword, sendsms } from '@/api';
|
|
import router from '@/router';
|
|
import { useI18n } from '@/utils/i18n';
|
|
import { message } from 'ant-design-vue';
|
|
import { defineComponent, ref, toRaw } from "vue";
|
|
export default defineComponent({
|
|
name: "Sign",
|
|
components: {},
|
|
setup() {
|
|
const lan: any = useI18n();
|
|
const formLayout = {
|
|
labelCol: 4,
|
|
wrapperCol: 14,
|
|
};
|
|
const uinfo=ref({
|
|
phone:"",
|
|
code:"",
|
|
quhao:"",
|
|
password:"",
|
|
repassword:"",
|
|
checkcodequhao:"",
|
|
memberid:0
|
|
})
|
|
const time = ref(60); //倒计时初始值
|
|
/**
|
|
* 点击获取验证码 触发60S倒计时
|
|
*/
|
|
let lock=false
|
|
const getcode: () => void = () => {
|
|
console.log(11111);
|
|
if (lock) {
|
|
console.log("lock")
|
|
return;
|
|
}
|
|
if (uinfo.value.phone == "") {
|
|
message.error(lan.$t('shoujihaoweikong'));
|
|
return;
|
|
}
|
|
lock = true;
|
|
sendsms(uinfo.value.quhao + uinfo.value.phone, 0);
|
|
const timestep = setInterval(() => {
|
|
console.log(11112);
|
|
time.value = time.value - 1;
|
|
if (time.value > 0) {
|
|
console.log();
|
|
} else {
|
|
time.value = 60;
|
|
clearInterval(timestep);
|
|
}
|
|
}, 1000);
|
|
};
|
|
const ifagree = ref(true); //是否同意用户协议
|
|
|
|
/**
|
|
* 用户协议前面 radio的点击效果
|
|
*/
|
|
const agree: () => void = () => {
|
|
ifagree.value = ifagree.value == true ? false : true;
|
|
console.log(ifagree.value, 600);
|
|
};
|
|
|
|
const stepnow = ref(1); //步骤条初始值 默认到某一步
|
|
|
|
|
|
/**
|
|
* @param e 跳转到步骤条的某一步
|
|
* 步骤条的当前值切换
|
|
*/
|
|
const next: (e: number) => void = async (e: number) => {
|
|
if(e==2){
|
|
console.log(uinfo)
|
|
const res=await checkuser(toRaw(uinfo.value))
|
|
console.log(res.data.memberid)
|
|
if(res.code==0){
|
|
// stepnow.value = e;
|
|
uinfo.value.quhao = res.data.code.toString()
|
|
uinfo.value.memberid=res.data.memberid
|
|
console.log(uinfo)
|
|
stepnow.value=e
|
|
}else{
|
|
message.error(lan.$t('yonghubucunzai'))
|
|
}
|
|
|
|
|
|
}else if(e==3){
|
|
if(uinfo.value.phone==""|| uinfo.value.code==""|| uinfo.value.password==""|| uinfo.value.repassword==""){
|
|
message.error(lan.$t('wanshanxinxi'))
|
|
return
|
|
}else if(uinfo.value.password!=uinfo.value.repassword){
|
|
message.error(lan.$t('mimabuyizhi'))
|
|
return
|
|
}
|
|
|
|
const checkcode=await checksmscode(uinfo.value.quhao+uinfo.value.phone,uinfo.value.code)
|
|
console.log(checkcode,"checked")
|
|
if(checkcode){
|
|
console.log(uinfo.value)
|
|
const res= await editpassword(toRaw(uinfo.value))
|
|
if(res.code==0){
|
|
stepnow.value=e
|
|
router.push("/")
|
|
}
|
|
}else{
|
|
message.error(lan.$t("yanzhengmayouwu"))
|
|
}
|
|
|
|
}
|
|
|
|
};
|
|
|
|
function tologin (){
|
|
router.push("/")
|
|
}
|
|
return {
|
|
formLayout,
|
|
getcode,
|
|
time,
|
|
agree,
|
|
ifagree,
|
|
stepnow,
|
|
next,
|
|
uinfo,
|
|
tologin,
|
|
lan
|
|
};
|
|
},
|
|
});
|
|
</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:none !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;
|
|
padding-top: 145px;
|
|
.box {
|
|
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;
|
|
a{
|
|
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;
|
|
}
|
|
.getcode {
|
|
font-size: 15px;
|
|
color: #08ae98;
|
|
width: 140px;
|
|
line-height: 30px;
|
|
cursor: pointer;
|
|
}
|
|
.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;
|
|
}
|
|
}
|
|
}
|
|
}
|
|
.yzm{
|
|
left:40px;
|
|
}
|
|
.right1 {
|
|
width: 260px !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;
|
|
margin-right:40px
|
|
}
|
|
}
|
|
.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> |