7 changed files with 356 additions and 15 deletions
@ -0,0 +1,315 @@ |
|||
<template> |
|||
<div class="profile-page"> |
|||
<secondary-nav></secondary-nav> |
|||
<div class="container"> |
|||
<div class="w-100 d-flex justify-content-center mb-3 mt-4"> |
|||
<div class="h3">{{$t('profile.realName')}}</div> |
|||
</div> |
|||
<div class="row"> |
|||
<div class="col-12 mt-4"> |
|||
<el-steps :active="setp+1" align-center> |
|||
<el-step :title="$t('profile.certificationapplication')"></el-step> |
|||
<el-step :title="$t('profile.toExamine')"></el-step> |
|||
</el-steps> |
|||
</div> |
|||
</div> |
|||
<div class="row"> |
|||
<div class="mx-auto mt-4 panel-box shadow-sm bg-panel" id="auth" style="flex: 0 0 75%;"> |
|||
<!-- 第一步 --> |
|||
<div class="tab-content" v-if="setp==0"> |
|||
<div class="form-row"> |
|||
<div class="form-group col-md-6"> |
|||
<label>{{$t('profile.fullName')}}（{{$t('profile.legal')}}）*</label> |
|||
<input type="text" required v-model="form.realname" class="form-control" |
|||
:placeholder="$t('profile.pleaseEnterName')" /> |
|||
</div> |
|||
<div class="form-group col-md-6"> |
|||
<label>{{$t('profile.dateOfBirth')}}（YYYY-MM-DD）*</label> |
|||
<el-date-picker required v-model="form.birthday" type="date" |
|||
:placeholder="$t('profile.selectDate')" |
|||
:picker-options="pickerOptions"></el-date-picker> |
|||
</div> |
|||
</div> |
|||
<div class="form-row"> |
|||
<div class="form-group col-md-3"> |
|||
<label>{{$t('profile.documentType')}}*</label> |
|||
<el-select v-model="form.type" :placeholder="$t('profile.pelaseSelect')"> |
|||
<el-option v-for="item in cardType" :key="item.value" :label="item.label" |
|||
:value="item.value"></el-option> |
|||
</el-select> |
|||
</div> |
|||
<div class="form-group col-md-9"> |
|||
<label>{{$t('profile.certificateNumber')}}*</label> |
|||
<input type="text" required v-model="form.id_card" class="form-control" |
|||
:placeholder="$t('profile.endterIDNumber')" /> |
|||
</div> |
|||
</div> |
|||
<div class="label my-2">{{$t('profile.addressInfo')}}</div> |
|||
<div class="form-group"> |
|||
<label class="text9">{{$t('profile.residentialAddress')}}*</label> |
|||
<input type="text" required v-model="form.address" class="form-control" |
|||
:placeholder="$t('profile.residentialAddress1')" /> |
|||
</div> |
|||
<div class="label my-2">{{$t('profile.contactInformation')}}</div> |
|||
<div class="form-row"> |
|||
<div class="form-group col-md-3"> |
|||
<label class="text9">{{$t('profile.SelectAreaCode')}}*</label> |
|||
<el-select v-model="form.country_id" filterable |
|||
:placeholder="$t('profile.pelaseSelect')"> |
|||
<el-option v-for="item in countryList" :key="item.id" |
|||
:label="'+'+item.country_code +'('+item.name+')'" :value="item.id"> |
|||
</el-option> |
|||
</el-select> |
|||
</div> |
|||
<div class="form-group col-md-9"> |
|||
<label class="text9">{{$t('profile.phoneNumber')}}*</label> |
|||
<input type="text" required v-model="form.phone" class="form-control" |
|||
:placeholder="$t('profile.enterPhoneNumber')" /> |
|||
</div> |
|||
</div> |
|||
|
|||
<!-- 第二步 --> |
|||
<div class="tab-content"> |
|||
<p>{{$t('profile.clickUpload1')}}</p> |
|||
<p> |
|||
{{$t('profile.pelaseDownload')}} |
|||
<span class="red" v-if="detail.type==3">{{$t('profile.passport')}}</span> |
|||
<span class="red" v-if="detail.type==2">{{$t('profile.drivingLicense')}}</span> |
|||
<span class="red" v-if="detail.type==1">{{$t('profile.iD')}}</span> |
|||
{{$t('profile.upload')}}： |
|||
</p> |
|||
|
|||
<p>{{$t('profile.explain')}}：</p> |
|||
<ul class="mb-2"> |
|||
<li class="mb-2">1. {{$t('profile.unexpired')}}{{lang=='zh-TW'||lang=='jp'?'。':'.'}} |
|||
</li> |
|||
<li class="mb-2">2.{{$t('profile.pleaseConfirm')}}{{lang=='zh-TW'||lang=='jp'?'。':'.'}} |
|||
</li> |
|||
<li class="mb-2">3. {{$t('profile.fileFormat')}}：pdf./ gif./ jpeg./jpg./png.</li> |
|||
<li class="mb-2">4. {{$t('profile.maximumFileSize')}}：5 MB</li> |
|||
</ul> |
|||
<div style="display: flex;"> |
|||
<upload-img class="mb-3" v-model="form.front_img" required |
|||
:placeholder="$t('profile.uploadPhoto')" style="margin-right: 30px;"> |
|||
<template #text> |
|||
<div class="el-upload__text"> |
|||
{{$t('profile.positive')}}-{{$t('profile.dragHere')}} |
|||
<em>{{$t('profile.clickUpload')}}</em> |
|||
</div> |
|||
</template> |
|||
</upload-img> |
|||
<upload-img class="mb-3" v-model="form.back_img" required |
|||
:placeholder="$t('profile.reversePhoto')"> |
|||
<template #text> |
|||
<div class="el-upload__text"> |
|||
{{$t('profile.theOtherSide')}}-{{$t('profile.dragHere')}} |
|||
<em>{{$t('profile.clickUpload')}}</em> |
|||
</div> |
|||
</template> |
|||
</upload-img> |
|||
</div> |
|||
</div> |
|||
|
|||
<div class="text-center" style="margin-top: 50px;margin-bottom: 50px;"> |
|||
<button type="button" class="btn w-25 btn-primary rounded-pill" |
|||
@click="primaryAuth">{{$t('profile.submitcertification')}}</button> |
|||
</div> |
|||
</div> |
|||
<!-- 第三步 --> |
|||
<div class="tab-ceontent p-5 text-center" v-if="setp==1"> |
|||
<!-- 待审核 --> |
|||
<div v-if="detail.status==1"> |
|||
<p class="mt-3 mb-4">{{$t('profile.inSubmit')}}</p> |
|||
<i class="el-icon-s-order my-4 text-warning" style="font-size:70px"></i> |
|||
<div class="text-center"> |
|||
<button type="button" class="btn w-25 btn-primary rounded-pill" |
|||
@click="$router.go(-1)">{{$t('profile.gotIt')}}</button> |
|||
</div> |
|||
</div> |
|||
<div v-else-if="detail.status==2"> |
|||
<p class="mt-3 mb-4" style="font-size:18px">{{$t('profile.certificationpassed')}}</p> |
|||
<i class="el-icon-circle-check my-4 increace" style="font-size:60px"></i> |
|||
<div class="text-center"> |
|||
<button type="button" class="btn w-25 btn-primary rounded-pill" |
|||
@click="$router.go(-1)">{{$t('profile.back')}}</button> |
|||
</div> |
|||
</div> |
|||
<div v-else-if="detail.status==3"> |
|||
<p class="mt-3 mb-4">{{detail.status_text_lang}}！{{$t('profile.resetApply')}}</p> |
|||
<i class="el-icon-s-release my-4 decreace" style="font-size:60px"></i> |
|||
<div class="text-center"> |
|||
<button type="button" class="btn w-25 btn-outline-danger" |
|||
@click="setp=0">{{$t('profile.recertification')}}</button> |
|||
</div> |
|||
</div> |
|||
</div> |
|||
</div> |
|||
</div> |
|||
</div> |
|||
</div> |
|||
</template> |
|||
|
|||
<script> |
|||
import Profile from "@/api/profile"; |
|||
import Member from "@/api/member"; |
|||
import server from "@/api/server"; |
|||
export default { |
|||
data() { |
|||
return { |
|||
setp: 0, |
|||
detail: {}, |
|||
imgURL: server.defaults.baseURL, |
|||
countryList: [], |
|||
|
|||
form: { |
|||
country_code: "", |
|||
country_id: "", |
|||
realname: "", |
|||
id_card: "", |
|||
type: 1, |
|||
birthday: "", |
|||
address: "", |
|||
city: "", |
|||
postal_code: "", |
|||
phone: "", |
|||
extra: "", |
|||
front_img: "", |
|||
back_img: "" |
|||
}, |
|||
// 高级认证 |
|||
topForm: { |
|||
front_img: "", |
|||
back_img: "", |
|||
hand_img: "" |
|||
}, |
|||
pickerOptions: { |
|||
disabledDate(time) { |
|||
return time.getTime() > Date.now(); |
|||
}, |
|||
}, |
|||
lang: localStorage.getItem('lang') |
|||
}; |
|||
}, |
|||
computed: { |
|||
country() { |
|||
return ( |
|||
this.countryList.find(item => item.id == this.form.country_id) || {} |
|||
); |
|||
}, |
|||
cardType() { |
|||
return [{ |
|||
label: this.$t("profile.driverLicense"), |
|||
value: 1, |
|||
}, |
|||
{ |
|||
label: this.$t("profile.passport"), |
|||
value: 2, |
|||
}, |
|||
{ |
|||
label: this.$t("profile.iD"), |
|||
value: 3, |
|||
}, |
|||
|
|||
]; |
|||
} |
|||
}, |
|||
methods: { |
|||
// 获取实名信息 |
|||
getAuthInfo() { |
|||
Profile.getAuthInfo() |
|||
.then(res => { |
|||
this.detail = res; |
|||
// 展示页面 |
|||
// if (res.primary_status == 0) { |
|||
// this.setp = 0; |
|||
// return; |
|||
// } else if (res.status == 0) { |
|||
// this.setp = 1; |
|||
// } else { |
|||
// this.setp = 2; |
|||
// } |
|||
if (res.status == 0) { |
|||
this.setp = 0; |
|||
} else { |
|||
this.setp = 1; |
|||
} |
|||
}) |
|||
.catch(res => {}); |
|||
}, |
|||
// 获取区号列表 |
|||
getCountryCode() { |
|||
Member.getCountryCode().then(res => { |
|||
this.countryList = res; |
|||
for (let i = 0; i < this.countryList.length; i++) { |
|||
let item = this.countryList[i]; |
|||
if (item.id == 195) { |
|||
this.form.country_id = item.id; |
|||
break; |
|||
} |
|||
} |
|||
|
|||
}).catch(res => {}); |
|||
}, |
|||
// 提交认证 |
|||
primaryAuth() { |
|||
let data = this.form; |
|||
data.country_code = this.country.country_code; |
|||
if (utils.validate("#auth")) { |
|||
if (!data.birthday) { |
|||
this.$message.error(this.$t("profile.dateofbirth")); |
|||
return; |
|||
} |
|||
Profile.newAuth(data).then(res => { |
|||
this.$message.success(this.$t("profile.submittedforcertification")); |
|||
this.getAuthInfo(); |
|||
// this.setp++; |
|||
// this.$router.push("/wallet/assets/exchange") |
|||
}).catch(err => {}); |
|||
} |
|||
} |
|||
}, |
|||
created() { |
|||
this.getCountryCode(); |
|||
this.getAuthInfo(); |
|||
} |
|||
}; |
|||
</script> |
|||
|
|||
<style scoped lang="scss"> |
|||
.profile-page { |
|||
padding-bottom: 50px; |
|||
} |
|||
|
|||
.profile-page .btn-primary { |
|||
color: #101010; |
|||
background-color: #fff; |
|||
background-image: none; |
|||
} |
|||
|
|||
.text9 { |
|||
color: #999; |
|||
} |
|||
|
|||
.upload-demo { |
|||
::v-deep .el-upload-dragger { |
|||
width: 300px; |
|||
height: 150px; |
|||
} |
|||
|
|||
img { |
|||
width: 100%; |
|||
height: 100%; |
|||
object-fit: cover; |
|||
} |
|||
} |
|||
|
|||
::v-deep { |
|||
.el-step__title.is-process { |
|||
color: white; |
|||
} |
|||
|
|||
.el-upload-dragger { |
|||
background-color: #1e2834; |
|||
} |
|||
} |
|||
</style> |
|||
Loading…
Reference in new issue