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