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.
484 lines
13 KiB
484 lines
13 KiB
<template>
|
|
<v-page
|
|
style="height:auto!important;min-height: 100%!important;background: none;background-color: #121212 !important;">
|
|
<v-header :title="$t('auth.a1')"></v-header>
|
|
<main class=" m-lg bg-panel-3 rounded-md p-x-md box-shadow">
|
|
<!-- 姓名 -->
|
|
<view class="form-item border-b p-md m-b-md">
|
|
<view class="label m-b-xs">{{$t('auth.a9')}}</view>
|
|
<view class="input color-light">
|
|
<v-input v-model="form.realname" :placeholder="$t('auth.b0')"></v-input>
|
|
</view>
|
|
</view>
|
|
<!-- 出生日期 -->
|
|
<view class="form-item border-b p-md m-b-md">
|
|
<view class="label m-b-xs">{{$t('auth.c5')}}</view>
|
|
<view class="input color-light">
|
|
<uni-datetime-picker type="date" :placeholder="$t('auth.d4')" start="1873-1-01"
|
|
:end="new Date().toLocaleDateString()" :clear-icon="false" v-model="form.birthday"
|
|
@maskClick="maskClick" />
|
|
</view>
|
|
</view>
|
|
<!-- 证件号类型 -->
|
|
<view class="form-item border-b p-md m-b-md">
|
|
<view class="label m-b-xs">{{$t('auth.c6')}}</view>
|
|
<view class="input color-light">
|
|
<uni-data-select :placeholder="$t('auth.d5')" v-model="form.identification_type"
|
|
:localdata="id_range" @change="changeID"></uni-data-select>
|
|
</view>
|
|
</view>
|
|
<!-- 证件号 -->
|
|
<view class="form-item border-b p-md m-b-md">
|
|
<view class="label m-b-xs">{{$t('auth.b1')}}</view>
|
|
<view class="input color-light">
|
|
<v-input v-model="form.id_card" :placeholder="$t('auth.b2')"></v-input>
|
|
</view>
|
|
</view>
|
|
<!-- 居住地址 -->
|
|
<view class="form-item border-b p-md m-b-md">
|
|
<view class="label m-b-xs">{{$t('auth.c7')}}</view>
|
|
<view class="input color-light">
|
|
<v-input v-model="form.address" :placeholder="$t('auth.c8')"></v-input>
|
|
</view>
|
|
</view>
|
|
<!-- 城市 -->
|
|
<!-- <view class="form-item border-b p-md m-b-md">
|
|
<view class="label m-b-xs">{{$t('auth.d7')}}</view>
|
|
<view class="input color-light">
|
|
<v-input v-model="form.city" :placeholder="$t('auth.d8')"></v-input>
|
|
</view>
|
|
</view> -->
|
|
<!-- 邮政区号 -->
|
|
<!-- <view class="form-item border-b p-md m-b-md">
|
|
<view class="label m-b-xs">{{$t('auth.d9')}}</view>
|
|
<view class="input color-light">
|
|
<v-input v-model="form.postal_code" :placeholder="$t('auth.d10')"></v-input>
|
|
</view>
|
|
</view> -->
|
|
<!-- 国籍区号 -->
|
|
<view class="form-item border-b p-md m-b-md">
|
|
<view class="label m-b-xs">{{$t('auth.a7')}}</view>
|
|
<view class="input color-light">
|
|
<v-picker :value="form.country_id" @change="selectCountry" :list="countryList" range-value="id"
|
|
range-label="name2">
|
|
<v-input disabled :value="activeCountry.name2" :placeholder="$t('auth.a8')">
|
|
<template #right>
|
|
<van-icon class="color-default" name="arrow" />
|
|
</template>
|
|
</v-input>
|
|
</v-picker>
|
|
</view>
|
|
</view>
|
|
<!-- 电话 -->
|
|
<view class="form-item border-b p-md m-b-md">
|
|
<view class="label m-b-xs">{{$t('auth.c9')}}</view>
|
|
<view class="input color-light">
|
|
<v-input v-model="form.phone" :placeholder="$t('auth.d0')"></v-input>
|
|
</view>
|
|
</view>
|
|
<div class="form-item border-b p-md" style="padding-bottom: 30px !important;position: relative;">
|
|
<div class="color-light p-b-xs">1、{{$t('auth.b5')}}</div>
|
|
<div class="d-flex justify-between m-t-md ">
|
|
<div class="examples m-r-xs bg-panel-4 p-md rounded-sm">
|
|
<img src="static/img/fill6.png" />
|
|
</div>
|
|
<div @click="getFile('front_img')"
|
|
class="upload-box d-flex justify-center align-center rounded-sm bg-panel-4">
|
|
<van-icon v-if="!form.front_img" class="color-light fn-30" name="photograph" />
|
|
<img v-else :src="form.front_img" alt />
|
|
</div>
|
|
</div>
|
|
<el-progress
|
|
v-if="boll"
|
|
:percentage="uploadProgress"
|
|
:status="uploadStatus"
|
|
:stroke-width="10"
|
|
class="my-2"
|
|
></el-progress>
|
|
</div>
|
|
<div class="form-item border-b p-md" style="padding-bottom: 30px !important;position: relative;">
|
|
<div class="color-light p-b-xs">2、{{$t('auth.b6')}}</div>
|
|
<div class="d-flex justify-between m-t-md">
|
|
<div class="examples m-r-xs bg-panel-4 p-md rounded-sm">
|
|
<img src="static/img/fill7.png" />
|
|
</div>
|
|
<div @click="getFile('back_img')"
|
|
class="upload-box d-flex justify-center align-center rounded-sm bg-panel-4">
|
|
<van-icon v-if="!form.back_img" class="color-light fn-30" name="photograph" />
|
|
<img v-else :src="form.back_img" alt />
|
|
</div>
|
|
</div>
|
|
<el-progress
|
|
v-if="boll1"
|
|
:percentage="uploadProgress1"
|
|
:status="uploadStatus1"
|
|
:stroke-width="10"
|
|
class="my-2"
|
|
></el-progress>
|
|
</div>
|
|
<view class="p-md ">
|
|
<v-button block type="white" class="w-max rounded-md" ref="btn"
|
|
@click="primaryAuth">{{$t('auth.b3')}}</v-button>
|
|
</view>
|
|
</main>
|
|
|
|
|
|
|
|
<van-toast id="van-toast" />
|
|
</v-page>
|
|
</template>
|
|
<script>
|
|
import Profile from "@/api/profile";
|
|
import Member from "@/api/member";
|
|
export default {
|
|
data() {
|
|
return {
|
|
detail: {},
|
|
countryList: [],
|
|
form: {
|
|
// area_code: "",
|
|
realname: "",
|
|
birthday: "",
|
|
identification_type: "",
|
|
id_card: "",
|
|
address: "",
|
|
// city: "",
|
|
// postal_code: "",
|
|
country_id: "",
|
|
phone: "",
|
|
country_code: "",
|
|
back_img: "",
|
|
front_img: "",
|
|
},
|
|
id_range: [{
|
|
value: 0,
|
|
text: this.$t('auth.d1')
|
|
}, {
|
|
value: 1,
|
|
text: this.$t('auth.d2')
|
|
}, {
|
|
value: 2,
|
|
text: this.$t('auth.d3')
|
|
}],
|
|
uploadProgress: 0, // 新增进度状态
|
|
uploadStatus: null,// 新增状态类型
|
|
progressInterval: null,
|
|
boll:false,
|
|
uploadProgress1: 0, // 新增进度状态
|
|
uploadStatus1: null,// 新增状态类型
|
|
boll1:false,
|
|
continueUploading:true,
|
|
continueUploading1:true
|
|
};
|
|
},
|
|
computed: {
|
|
activeCountry() {
|
|
return (
|
|
this.countryList.find((item) => item.id == this.form.country_id) || {}
|
|
);
|
|
},
|
|
activeIndex() {
|
|
return this.countryList.findIndex((item) => item.id == this.form.country_id)
|
|
},
|
|
},
|
|
methods: {
|
|
getFile(name) {
|
|
// console.log(name)
|
|
this.$getFile({count: 9}).then((res) => {
|
|
this.upLoadImg(res, name);
|
|
})
|
|
},
|
|
// 上传图片
|
|
upLoadImg(chooseImageRes, name) {
|
|
if(name=='front_img'){
|
|
this.uploadStatus = null // 重置状态
|
|
this.uploadProgress = 0 // 重置进度
|
|
this.boll = true
|
|
}else{
|
|
this.uploadStatus1 = null // 重置状态
|
|
this.uploadProgress1 = 0 // 重置进度
|
|
this.boll1 = true
|
|
}
|
|
|
|
clearInterval(this.progressInterval); // 清除之前的定时器
|
|
|
|
this.progressInterval = setInterval(() => {
|
|
if (this.uploadProgress < 100&&name=='front_img'&&this.continueUploading) {
|
|
this.uploadProgress += Math.floor(Math.random() * 3) + 1;
|
|
setTimeout(() => {
|
|
this.continueUploading = false;
|
|
// 暂停3秒后继续累加
|
|
setTimeout(() => {
|
|
this.continueUploading = true;
|
|
}, 1000); // 这里的3000毫秒表示暂停3秒后继续
|
|
}, 1000);
|
|
}else if(this.uploadProgress1 < 100&&name=='back_img'&&this.continueUploading1){
|
|
this.uploadProgress1 += Math.floor(Math.random() * 4) + 1;
|
|
setTimeout(() => {
|
|
this.continueUploading1 = false;
|
|
// 暂停3秒后继续累加
|
|
setTimeout(() => {
|
|
this.continueUploading1 = true;
|
|
}, 1600); // 这里的3000毫秒表示暂停3秒后继续
|
|
}, 1000);
|
|
}
|
|
}, 50);
|
|
|
|
Member.uploadImage(chooseImageRes).then((res) => {
|
|
this.form[name] = res.data.url;
|
|
if(res.data.url){
|
|
if(name=='front_img'){
|
|
setTimeout(() => {
|
|
this.uploadStatus = 'success'
|
|
this.uploadProgress = 100
|
|
clearInterval(this.progressInterval); // 清除之前的定时器
|
|
setTimeout(() => {
|
|
this.boll = false
|
|
},3000)
|
|
}, 2000)
|
|
}else{
|
|
setTimeout(() => {
|
|
this.uploadStatus1 = 'success'
|
|
this.uploadProgress1 = 100
|
|
clearInterval(this.progressInterval); // 清除之前的定时器
|
|
setTimeout(() => {
|
|
this.boll1 = false
|
|
},3000)
|
|
}, 2000)
|
|
}
|
|
}
|
|
// this.$toast.success(this.$t('auth.c1'));
|
|
}).catch(() => {
|
|
if(name=='front_img'){
|
|
this.uploadStatus = 'exception'
|
|
this.uploadProgress = 100
|
|
}else{
|
|
this.uploadStatus1 = 'exception'
|
|
this.uploadProgress1 = 100
|
|
}
|
|
});
|
|
},
|
|
getAuthInfo() {
|
|
Profile.getAuthInfo().then((res) => {
|
|
this.detail = res.data;
|
|
});
|
|
},
|
|
// 获取区号
|
|
getCountryCode() {
|
|
Member.getCountryCode()
|
|
.then((res) => {
|
|
// console.info(res)
|
|
// this.countryList = res.data;
|
|
this.countryList = res.data.map(item => {
|
|
return {
|
|
...item,
|
|
name2: '+' + item.country_code + '(' + item.name + ')'
|
|
}
|
|
});
|
|
this.form.country_id = this.countryList[res.data.length - 1].id;
|
|
})
|
|
.catch(() => {});
|
|
},
|
|
selectCountry(value) {
|
|
this.form.country_id = value
|
|
},
|
|
// 认证
|
|
primaryAuth() {
|
|
let data = this.form;
|
|
data.country_code = this.activeCountry.country_code;
|
|
// console.log(data);
|
|
if (!data.realname) {
|
|
uni.showToast({
|
|
title: this.$t('auth.b0'),
|
|
icon: 'none'
|
|
})
|
|
return;
|
|
}
|
|
if (!data.birthday) {
|
|
uni.showToast({
|
|
title: this.$t('auth.d4'),
|
|
icon: 'none'
|
|
})
|
|
return;
|
|
}
|
|
if (data.identification_type === "") {
|
|
uni.showToast({
|
|
title: this.$t('auth.d5') + this.$t('auth.c6'),
|
|
icon: 'none'
|
|
})
|
|
return;
|
|
}
|
|
if (!data.id_card) {
|
|
uni.showToast({
|
|
title: this.$t('auth.b2'),
|
|
icon: 'none'
|
|
})
|
|
return;
|
|
}
|
|
if (!data.address) {
|
|
uni.showToast({
|
|
title: this.$t('auth.c8'),
|
|
icon: 'none'
|
|
})
|
|
return;
|
|
}
|
|
if (!data.phone) {
|
|
uni.showToast({
|
|
title: this.$t('auth.d0'),
|
|
icon: 'none'
|
|
})
|
|
return;
|
|
}
|
|
if (!data.back_img) {
|
|
this.$toast(this.$t('auth.c2'));
|
|
return;
|
|
}
|
|
if (!data.front_img) {
|
|
this.$toast(this.$t('auth.c3'));
|
|
return;
|
|
}
|
|
|
|
Profile.newAuth(data, {btn: this.$refs.btn}).then((res) => {
|
|
// this.$toast.success(this.$t('auth.b4'));
|
|
setTimeout(() => {
|
|
this.$back();
|
|
}, 1500)
|
|
}).catch(() => {});
|
|
},
|
|
changeID(e) {
|
|
// console.log(e);
|
|
this.form.identification_type = this.id_range[e].text;
|
|
}
|
|
},
|
|
created() {
|
|
this.getAuthInfo();
|
|
this.getCountryCode();
|
|
},
|
|
options: {
|
|
styleIsolation: 'shared'
|
|
},
|
|
};
|
|
</script>
|
|
<style lang="scss" scoped>
|
|
/deep/.uni-date-x--border {
|
|
border: none;
|
|
}
|
|
|
|
/deep/.uni-date-x {
|
|
background-color: transparent;
|
|
color: $plain;
|
|
}
|
|
|
|
/deep/.uni-date__x-input {
|
|
padding-left: 0px;
|
|
// color: grey;
|
|
}
|
|
|
|
/deep/.uni-select__selector {
|
|
// background-color: $panel-3;
|
|
background-color: #242424;
|
|
}
|
|
|
|
/deep/.uni-select__input-text {
|
|
color: $plain;
|
|
}
|
|
|
|
/deep/.uni-select__input-placeholder {
|
|
color: grey;
|
|
}
|
|
|
|
// 修改uni-datetime-picker的年月列表样式
|
|
.uni-picker-view-indicator,
|
|
.uni-picker-view-mask {
|
|
background-color: rgba(255, 255, 255, 0.7) !important;
|
|
}
|
|
|
|
// 修改uni-datetime-picker的年月列表样式,以下的修改无效
|
|
/deep/.uni-picker-view-indicator,
|
|
/deep/uni-resize-sensor {
|
|
background-color: #fff;
|
|
}
|
|
|
|
/deep/.uni-picker-view-mask::before,
|
|
uni-picker-view-column::before {
|
|
content: '' !important;
|
|
width: 100% !important;
|
|
height: 34px !important;
|
|
background: rgba(255, 255, 255, 0.5) !important;
|
|
position: absolute !important;
|
|
top: calc(50% - 17px) !important;
|
|
border-top: 1px solid #c9c9c9 !important;
|
|
border-bottom: 1px solid #c9c9c9 !important;
|
|
}
|
|
|
|
::v-deep.uni-picker-view-mask::before {
|
|
content: '';
|
|
width: 100%;
|
|
height: 34px;
|
|
background: rgba(255, 255, 255, 0.5);
|
|
position: absolute;
|
|
top: calc(50% - 17px);
|
|
border-top: 1px solid #c9c9c9;
|
|
border-bottom: 1px solid #c9c9c9;
|
|
}
|
|
|
|
>>>.uni-picker-view-mask::before {
|
|
content: '';
|
|
width: 100%;
|
|
height: 34px;
|
|
background: rgba(255, 255, 255, 0.5);
|
|
position: absolute;
|
|
top: calc(50% - 17px);
|
|
border-top: 1px solid #c9c9c9;
|
|
border-bottom: 1px solid #c9c9c9;
|
|
}
|
|
|
|
.bg-panel-3 {
|
|
background-color: #242424;
|
|
}
|
|
|
|
.bg-panel-4 {
|
|
background-color: #000;
|
|
}
|
|
|
|
::v-deep uni-input {
|
|
border: 1px solid #e5e5e5;
|
|
}
|
|
.examples {
|
|
width: 122px;
|
|
height: 70px;
|
|
display: flex;
|
|
align-items: center;
|
|
|
|
img {
|
|
width: 100%;
|
|
}
|
|
}
|
|
|
|
.upload-box {
|
|
width: 150px;
|
|
height: 100px;
|
|
|
|
img {
|
|
width: 100%;
|
|
height: 100%;
|
|
// object-fit: cover;
|
|
}
|
|
}
|
|
|
|
.el-progress {
|
|
position: absolute;
|
|
bottom: 8px;
|
|
right:-15px;
|
|
width: 300rpx;
|
|
// margin-top: 10px;
|
|
|
|
&-bar {
|
|
padding-right: 45px;
|
|
}
|
|
|
|
&__text {
|
|
font-size: 12px!important;
|
|
}
|
|
}
|
|
</style>
|