You can not select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
380 lines
11 KiB
380 lines
11 KiB
<template>
|
|
|
|
<v-page>
|
|
<v-header class="nav-tab" :title="$t('reg.b9')">
|
|
<template #right>
|
|
<view class="per-bot p-y-md p-x-sm d-flex align-center">
|
|
<!-- <img :src="$localImgUrl('Page6.png')" alt="" class="h-20 m-r-xs" /> -->
|
|
<span class="color-light">
|
|
<v-lang
|
|
@change="clause()"
|
|
></v-lang>
|
|
<i class="iconfont m-l-xs fn-sm"></i>
|
|
</span>
|
|
</view>
|
|
</template>
|
|
</v-header>
|
|
<view class="layout-main">
|
|
<view class="form m-lg bg-panel-3 p-lg rounded-md">
|
|
<view class="d-flex justify-center">
|
|
<!-- <view
|
|
class="item transition-3 p-y-sp-r-sm p-x-xs fn-20 "
|
|
:class="{
|
|
'color-light ':form.type==1
|
|
}"
|
|
@click="form.type=1"
|
|
>{{$t('reg.a0')}}
|
|
<view class="w-5 h-5 rounded-max bg-light justify-center mauto m-y-sm"
|
|
:class="{
|
|
'disnone':form.type==2
|
|
}"
|
|
>
|
|
|
|
</view>
|
|
</view> -->
|
|
|
|
|
|
<view
|
|
class="item transition-3 p-y-sp-r-sm p-x-xs fn-20"
|
|
:class="{
|
|
'color-light':form.type==2
|
|
}"
|
|
@click="form.type=2"
|
|
>{{$t('reg.a1')}}
|
|
<view class="w-5 h-5 rounded-max bg-light justify-center mauto m-y-sm"
|
|
:class="{
|
|
'disnone':form.type==1
|
|
}"
|
|
>
|
|
|
|
</view>
|
|
</view>
|
|
</view>
|
|
<view class="form-item border-b m-b-md p-b-xs">
|
|
<template v-if="form.type==1">
|
|
<view key="1">
|
|
<view class="label m-b-xs">{{$t('reg.a2')}}</view>
|
|
<v-input v-model="form.account" class="color-light" :placeholder="$t('reg.a3')">
|
|
<template #left>
|
|
<v-country ref="country" @country_code="country_code=$event" class="m-r-xs" v-model="form.country_id" />
|
|
</template>
|
|
</v-input>
|
|
</view>
|
|
</template>
|
|
<template v-else-if="form.type==2">
|
|
<view key="2">
|
|
<view class="label m-b-xs">{{$t('reg.a4')}}</view>
|
|
<v-input v-model="form.account" class="color-light" :placeholder="$t('reg.a5')"></v-input>
|
|
</view>
|
|
</template>
|
|
</view>
|
|
<!--图形验证码-->
|
|
<view class="form-item border-b m-b-md p-b-xs" >
|
|
<view class="label m-b-xs">{{$t('homeNewText.ee6')}}</view>
|
|
<v-input class="color-light" v-model="form.gr_code" :placeholder="$t('homeNewText.ee7')">
|
|
<template #right>
|
|
<!-- 邮箱 -->
|
|
<img :src="Graph_che" @click="gett_gc_code" v-if="!hideImg">
|
|
</template>
|
|
</v-input>
|
|
</view>
|
|
<view class="form-item border-b m-b-md p-b-xs">
|
|
<view class="label m-b-xs">{{$t('reg.a6')}}</view>
|
|
<v-input class="color-light" v-model="form.code" :placeholder="$t('reg.a7')">
|
|
<template #right>
|
|
<!-- 手机 -->
|
|
<v-code
|
|
v-show="form.type==1"
|
|
url="/register/sendSmsCode"
|
|
:data="{
|
|
phone:form.account,
|
|
country_code:country_code || 86,
|
|
type:1
|
|
}"
|
|
></v-code>
|
|
<!-- 邮箱 -->
|
|
<v-code
|
|
url="/register/sendEmailCode"
|
|
:data="{
|
|
email:form.account,
|
|
type:1,
|
|
gc_code: form.gr_code,
|
|
gc_key: gc_key,
|
|
}"
|
|
v-show="form.type==2"
|
|
@reGetGraphChe="reGetGraphChe"
|
|
></v-code>
|
|
<!-- <v-code
|
|
url="/register/sendEmailCode"
|
|
:data="{
|
|
email:form.account,
|
|
type:1,
|
|
gc_key: gc_key
|
|
}"
|
|
v-show="form.type==2"
|
|
@changeSLider="changeSLider"
|
|
:sendAAA="sendAAA"
|
|
@changeSendAAA="sendAAA = false"
|
|
></v-code> -->
|
|
</template>
|
|
</v-input>
|
|
</view>
|
|
<view class="form-item border-b m-b-md p-b-xs">
|
|
<view class="label m-b-xs">{{$t('reg.a8')}}</view>
|
|
<v-input class="color-light" v-model="form.password" type="password" :placeholder="$t('reg.a9')"></v-input>
|
|
</view>
|
|
<view class="form-item border-b m-b-md p-b-xs">
|
|
<view class="label m-b-xs">{{$t('reg.b0')}}</view>
|
|
<v-input
|
|
class="color-light"
|
|
v-model="form.password_confirmation"
|
|
type="password"
|
|
:placeholder="$t('reg.b1')"
|
|
></v-input>
|
|
</view>
|
|
<!-- <view class="form-item border-b m-b-md p-b-xs">
|
|
<view class="label m-b-xs">{{$t('reg.c6')}}</view>
|
|
<v-input class="color-light" v-model="form.invitationCode" type="password" :placeholder="$t('reg.c7')"></v-input>
|
|
</view> -->
|
|
<view class="form-item border-b m-b-md p-b-xs">
|
|
<view class="label m-b-xs">{{$t('reg.c6')}}</view>
|
|
<!-- <v-input class="color-light" :disabled="query.invite_code?true:false" v-model="form.invite_code" :placeholder="`${$t('reg.c7')}（${$t('reg.b4')}）`"></v-input> -->
|
|
<v-input class="color-light" :disabled="query.invite_code?true:false" v-model="form.invite_code" :placeholder="`${$t('reg.c7')}`"></v-input>
|
|
</view>
|
|
<view class="tips d-flex m-b-md fn-sm">
|
|
<van-checkbox
|
|
:value="check"
|
|
@change="check=!check"
|
|
class="flex-shrink"
|
|
icon-size="15px"
|
|
checked-color="#f05319"
|
|
></van-checkbox>
|
|
<view class="m-l-xs">
|
|
{{$t('reg.b5')}}
|
|
<v-link class="color-sell" v-if="agreement.agreement" :to="{path:'/pages/notice/detail',query:{id:agreement.agreement.id}}">《{{agreement.agreement.title}}》</v-link>{{$t('reg.b7')}}
|
|
<v-link class="color-sell" v-if="agreement.clause" :to="{path:'/pages/notice/detail',query:{id:agreement.clause.id}}">《{{agreement.clause.title}}》</v-link>
|
|
</view>
|
|
</view>
|
|
|
|
<tf-verify-img @succeed="chenggong" @close="showVerify = false" v-if="showVerify" :verifyImgs="imgs"></tf-verify-img>
|
|
|
|
<v-button type="blue" block class="w-max m-b-md rounded-md" @click="register">{{$t('reg.b9')}}</v-button>
|
|
|
|
</view>
|
|
</view>
|
|
<view class="m-x-lg p-x-lg">
|
|
<view class="p-y-md border-t fn-center">
|
|
{{$t('reg.b9')}}，
|
|
<v-link class="color-sell" to="/pages/login/index">{{$t('reg.c1')}}</v-link>
|
|
</view>
|
|
</view>
|
|
<van-toast id="van-toast" />
|
|
</v-page>
|
|
</template>
|
|
<script>
|
|
import Member from "@/api/member";
|
|
import app from "app.js";
|
|
import tfVerifyImg from '@/components/tf-verify-img/tf-verify-img.vue';
|
|
|
|
export default {
|
|
data() {
|
|
return {
|
|
form: {
|
|
type: 2,
|
|
country_code: "",
|
|
country_id: 1,
|
|
account: "",
|
|
code: "",
|
|
password: "",
|
|
password_confirmation: "",
|
|
invite_code: "",
|
|
gr_code: "",
|
|
},
|
|
captcha: '',
|
|
Graph_che:'',
|
|
gc_key:'', // tuxiangyanzheng key
|
|
check: false,
|
|
agreement: {},
|
|
country_code:'',
|
|
|
|
showVerify:false,
|
|
imgs:[{
|
|
src:'/static/verify/0.jpeg',
|
|
color:'#38a7b7'
|
|
},{
|
|
src:'/static/verify/1.jpeg',
|
|
color:'#485967'
|
|
}],
|
|
sendAAA: false,
|
|
hideImg: false
|
|
};
|
|
|
|
},
|
|
computed: {
|
|
},
|
|
components:{tfVerifyImg},
|
|
methods: {
|
|
register() {
|
|
if (!this.form.account) {
|
|
this.$toast(this.$t('reg.a5'));
|
|
return;
|
|
}
|
|
if (!this.check) {
|
|
this.$toast(this.$t('reg.c2'));
|
|
return;
|
|
}
|
|
|
|
if (!this.form.account) {
|
|
if (this.form.type == 1) {
|
|
this.$toast(this.$t('reg.c3'));
|
|
} else if (this.form.type == 2) {
|
|
this.$toast(this.$t('reg.c4'));
|
|
}
|
|
return;
|
|
}
|
|
if (!this.form.invite_code) {
|
|
this.$toast(this.$t('reg.c7'));
|
|
return;
|
|
}
|
|
this.form.type=this.form.type
|
|
this.form.country_code = this.country_code || 86;
|
|
|
|
Member.register(this.form).then((res) => {
|
|
|
|
if(res.code != 200){
|
|
this.$toast(res.message);
|
|
this.reGetGraphChe();
|
|
return false
|
|
}
|
|
// #ifdef H5
|
|
// this.$dialog.confirm({
|
|
// title: this.$t("common.tips"),
|
|
// // message: this.$t('common.toDwon'),
|
|
// message: this.$t('common.toDwon1'),
|
|
// confirmButtonText: this.$t("common.confirm"), //改变确认按钮上显示的文字
|
|
// cancelButtonText: this.$t("common.cancel"),
|
|
// cancel:true
|
|
// })
|
|
// .then(() => {
|
|
// // window.open(app.down, "_blank ");
|
|
// this.login()
|
|
// }).catch(()=>{
|
|
// if (this.query.from) {
|
|
// this.$back();
|
|
// } else {
|
|
this._router.replace("/pages/login/index");
|
|
// }
|
|
// });
|
|
// #endif
|
|
// #ifdef APP-PLUS
|
|
if (this.query.from) {
|
|
this.$back();
|
|
} else {
|
|
this._router.replace("/pages/login/index");
|
|
}
|
|
// #endif
|
|
this.$toast(this.$t('reg.c5'));
|
|
});
|
|
},
|
|
|
|
//获取图形验证码
|
|
refreshCaptcha() {
|
|
axios.get('/register/Graph_che')
|
|
.then(response => {
|
|
// 重新加载验证码图片
|
|
})
|
|
.catch(error => {
|
|
console.log(error);
|
|
});
|
|
},
|
|
|
|
// 重新请求图形验证码
|
|
reGetGraphChe(){
|
|
this.hideImg = true;
|
|
this.gett_gc_code();
|
|
},
|
|
|
|
|
|
//
|
|
gett_gc_code(){
|
|
Member.Graph_che().then((res)=>{
|
|
if(res.code==200){
|
|
this.hideImg = false;
|
|
}
|
|
console.log("gc",res.data.img)
|
|
this.Graph_che = res.data.img;
|
|
this.gc_key= res.data.key;
|
|
});
|
|
//this.Graph_che = gc
|
|
|
|
},
|
|
|
|
//注册完成后登录
|
|
login(){
|
|
let data={type: 2,account:this.form.account,password: this.form.password}
|
|
Member.login(this.form)
|
|
.then((res) => {
|
|
this.loginSuccess(res.data);
|
|
})
|
|
.catch(() => {
|
|
});
|
|
|
|
},
|
|
// 登录成功
|
|
loginSuccess(data) {
|
|
this.setToken(data.token);
|
|
this.setUser(data.user);
|
|
this._router.replace("/pages/auth/index?type=1");
|
|
},
|
|
// 获取协议
|
|
clause() {
|
|
Member.clause().then((res) => {
|
|
this.agreement = res.data;
|
|
});
|
|
},
|
|
|
|
// 拼图滑块
|
|
changeSLider(){
|
|
this.showVerify = true;
|
|
},
|
|
open(){
|
|
console.log("open");
|
|
this.showVerify = true;
|
|
},
|
|
chenggong(){
|
|
uni.showToast({
|
|
title: this.$t('homeNewText.dd1')
|
|
});
|
|
this.showVerify = false;
|
|
this.sendAAA = true;
|
|
}
|
|
},
|
|
mounted() {
|
|
this.gett_gc_code();
|
|
},
|
|
onLoad(query){
|
|
this.query = query
|
|
this.form.invite_code = this.query.invite_code||this.form.invite_code
|
|
},
|
|
created() {
|
|
this.clause();
|
|
},
|
|
};
|
|
</script>
|
|
<style lang="scss" scoped>
|
|
.nav-tab {
|
|
background: transparent;
|
|
&::after {
|
|
border: none;
|
|
}
|
|
}
|
|
.transition-3 {
|
|
transition: all 0.2s;
|
|
}
|
|
.mauto{
|
|
margin: auto;
|
|
}
|
|
.disnone{
|
|
display: none;
|
|
}
|
|
</style>
|