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.
236 lines
8.0 KiB
236 lines
8.0 KiB
<template>
|
|
|
|
<div class="layout-page" :style="themeStyle">
|
|
<v-header :title="$t('auth.a4')"></v-header>
|
|
<main class="layout-main">
|
|
|
|
<view class="form-item border-b p-md m-b-md" v-if="0">
|
|
<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="name">
|
|
<v-input disabled :value="activeCountry.name" :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" v-if="0">
|
|
<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" v-if="0">
|
|
<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>
|
|
|
|
<div class="form-item p-md m-md">
|
|
<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-3 p-md rounded-sm box-shadow">
|
|
<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-3 box-shadow"
|
|
>
|
|
<van-icon v-if="!form.front_img" class="color-light fn-30" name="photograph"/>
|
|
<img v-else :src="form.front_img" alt/>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div class="form-item p-md m-md">
|
|
<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-3 p-md rounded-sm box-shadow">
|
|
<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-3 box-shadow"
|
|
>
|
|
<van-icon v-if="!form.back_img" class="color-light fn-30" name="photograph"/>
|
|
<img v-else :src="form.back_img" alt/>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<!-- <div class="form-item p-md m-md ">
|
|
<div class="color-light p-b-xs">3、{{$t('auth.b7')}}</div>
|
|
<div class="fn-sm ">{{$t('auth.b8')}}。</div>
|
|
<div class="d-flex justify-between m-t-md">
|
|
<div class="examples m-r-xs bg-panel-3 p-md rounded-sm box-shadow">
|
|
<img src="static/img/fill6.png" />
|
|
</div>
|
|
<div
|
|
@click="getFile('hand_img')"
|
|
class="upload-box d-flex justify-center align-center rounded-sm bg-panel-3 box-shadow"
|
|
>
|
|
<van-icon v-if="!form.hand_img" class="color-light fn-30" name="photograph" />
|
|
<img v-else :src="form.hand_img" alt />
|
|
</div>
|
|
</div>
|
|
</div> -->
|
|
</main>
|
|
<div class="p-md">
|
|
<v-button block type="green" class="w-max rounded-lg" @click="topAuth" ref="btn">{{$t('common.submit')}}
|
|
</v-button>
|
|
</div>
|
|
<van-toast id="van-toast"/>
|
|
</div>
|
|
</template>
|
|
<script>
|
|
import utils from "@/utils";
|
|
import Profile from "@/api/profile";
|
|
import Member from "@/api/member";
|
|
import {mapGetters} from "vuex";
|
|
|
|
export default {
|
|
data() {
|
|
return {
|
|
detail: {},
|
|
countryList: [],
|
|
imgBase: undefined,
|
|
form: {
|
|
// id_card: "",
|
|
// realname: "",
|
|
// country_id: "",
|
|
country_code: "",
|
|
hand_img: "",
|
|
back_img: "",
|
|
front_img: "",
|
|
},
|
|
};
|
|
},
|
|
computed: {
|
|
...mapGetters(['themeStyle']),
|
|
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: {
|
|
getAuthInfo() {
|
|
Profile.getAuthInfo().then((res) => {
|
|
this.detail = res.data;
|
|
|
|
});
|
|
},
|
|
// 获取区号
|
|
getCountryCode() {
|
|
Member.getCountryCode()
|
|
.then((res) => {
|
|
// console.info(res)
|
|
this.countryList = res.data;
|
|
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;
|
|
Profile.primaryAuth(data, {btn: this.$refs.btn}).then(() => {
|
|
this.$toast.success(this.$t('auth.b4'));
|
|
this.$back();
|
|
}).catch(() => {
|
|
});
|
|
},
|
|
getFile(name) {
|
|
// console.log(name)
|
|
this.$getFile({count: 9}).then((res) => {
|
|
this.upLoadImg(res, name);
|
|
})
|
|
},
|
|
// 上传图片
|
|
upLoadImg(chooseImageRes, name) {
|
|
Member.uploadImage(chooseImageRes).then((res) => {
|
|
this.form[name] = res.data.url;
|
|
this.$toast.success(this.$t('auth.c1'));
|
|
});
|
|
},
|
|
// 提交审核
|
|
topAuth() {
|
|
let data = this.form;
|
|
// if (!data.hand_img) {
|
|
// this.$toast(this.$t('auth.b7'));
|
|
// return;
|
|
// }
|
|
if (!data.back_img) {
|
|
this.$toast(this.$t('auth.c2'));
|
|
return;
|
|
}
|
|
if (!data.front_img) {
|
|
this.$toast(this.$t('auth.c3'));
|
|
return;
|
|
}
|
|
Profile.topAuth(data, {btn: this.$refs.btn})
|
|
.then(() => {
|
|
// alert($t('auth.c4') );
|
|
|
|
|
|
this.$toast.success(this.$t('auth.c4') + "。");
|
|
clearTimeout(this.timer); //清除延迟执行
|
|
this.timer = setTimeout(()=>{ //设置延迟执行
|
|
this.$router.push("/pages/base/index");
|
|
},1000);
|
|
// this.$back();
|
|
})
|
|
.catch(() => {
|
|
});
|
|
},
|
|
},
|
|
created() {
|
|
// this.$router.push("/pages/base/index");
|
|
// this.$toast.success(this.$t('auth.c4') + "。");
|
|
// alert(this.$t('auth.c4'));
|
|
|
|
|
|
this.getAuthInfo();
|
|
this.getCountryCode();
|
|
},
|
|
};
|
|
</script>
|
|
<style lang="scss" scoped>
|
|
.layout-page{
|
|
background-color: #121212 !important;
|
|
background: none;
|
|
}
|
|
.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;
|
|
}
|
|
}
|
|
.bg-panel-3{
|
|
background-color: #242424;
|
|
}
|
|
</style>
|
|
|