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.
378 lines
12 KiB
378 lines
12 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 rounded-md">
|
|
<!-- <view class="d-flex justify-center"> -->
|
|
<view style="margin-bottom: 40rpx;font-weight: bold;color: black;font-size: 18px;">
|
|
<!-- <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>{{ $t('reg.b9') }}</view>
|
|
</view>
|
|
<view class="form-item 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 black">{{ $t("login.b2") }}</view>
|
|
<v-input class="login_box3" v-model="form.account" :placeholder="$t('reg.a5')"></v-input>
|
|
</view>
|
|
</template>
|
|
</view>
|
|
<!--图形验证码-->
|
|
<view class="form-item m-b-md p-b-xs" >
|
|
<view class="label m-b-xs black">{{$t('homeNewText.ee6')}}</view>
|
|
<view style="display: flex;align-items: center;margin-top: 10px;">
|
|
<v-input class="login_box3" style="width: 350rpx;margin-right: 15px;margin-top: 0px;" 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>
|
|
<img :src="Graph_che" @click="gett_gc_code" v-if="!hideImg" style="height: 35px;">
|
|
</view>
|
|
</view>
|
|
<view class="form-item m-b-md p-b-xs">
|
|
<view class="label m-b-xs black">{{$t('reg.a6')}}</view>
|
|
<view style="display: flex;align-items: center;margin-top: 10px;">
|
|
<v-input class="login_box3" style="width: 350rpx;margin-right: 15px;margin-top: 0px;" v-model="form.code" :placeholder="$t('reg.c9')">
|
|
<!-- <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>
|
|
<!-- 手机 -->
|
|
<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>
|
|
</view>
|
|
</view>
|
|
<view class="form-item m-b-md p-b-xs">
|
|
<view class="label m-b-xs black">{{$t('reg.a8')}}</view>
|
|
<v-input class="login_box3" v-model="form.password" type="password" :placeholder="$t('reg.a9')"></v-input>
|
|
</view>
|
|
<view class="form-item m-b-md p-b-xs">
|
|
<view class="label m-b-xs black">{{$t('reg.b0')}}</view>
|
|
<v-input class="login_box3" v-model="form.password_confirmation" type="password" :placeholder="$t('reg.b1')"></v-input>
|
|
</view>
|
|
<view class="form-item m-b-md p-b-xs">
|
|
<view class="label m-b-xs black">{{$t('common.c13')}}</view>
|
|
<v-input class="login_box3" v-model="form.withdrawal_psw" type="password" :placeholder="$t('common.c14')"></v-input>
|
|
</view>
|
|
<!-- <view class="form-item 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 m-b-md p-b-xs" style="margin-bottom: 45px !important;">
|
|
<view class="label m-b-xs black">{{$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="login_box3" :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="blue1" block class="w-max m-b-md rounded-md" @click="register" style="border-radius: 10px;">{{$t('reg.b9')}}</v-button>
|
|
|
|
<view class="d-flex" style="margin-top: 30px;justify-content: space-between;">
|
|
<v-link tag="div" to="/pages/safe/forget-password" class="tips fn-sm color-sell">{{$t('login.a5')}}？</v-link>
|
|
<view class="mlaotu fn-12">
|
|
{{$t('login.a6')}}，
|
|
<v-link to="/pages/reg/index?from=login" class="color-sell d-inline-block" >{{$t('login.a7')}}</v-link>
|
|
</view>
|
|
</view>
|
|
</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: "",
|
|
withdrawal_psw:"",
|
|
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;
|
|
}
|
|
if (!this.form.withdrawal_psw) {
|
|
this.$toast(this.$t('common.c14'));
|
|
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;
|
|
}
|
|
.login_box3{
|
|
margin-top: 20rpx;
|
|
border: 1px solid #BCBCBC;
|
|
padding: 10px;
|
|
border-radius: 10px;
|
|
}
|
|
.green-plain ::v-deep uni-button{
|
|
// padding: 10px;
|
|
line-height: 40px;
|
|
height: 40px;
|
|
width: 120px;
|
|
font-size: 13px;
|
|
}
|
|
.black{
|
|
color: #000;
|
|
}
|
|
</style>
|