<template>
|
<div class="bank_card_page">
|
<div class="content">
|
<div class="top_back">
|
<div class="left_back_icon" @click="$router.go(-1)">
|
<img src="../../assets/img/zuojiantou.png" alt />
|
</div>
|
</div>
|
<div class="titles">
|
<span>{{ $t("hj146") }}</span>
|
</div>
|
<div class="bank_name">
|
<div class="lefts">
|
<span>{{ $t("hj195") + ":" }}</span>
|
</div>
|
<div class="rights">
|
<input
|
v-if="showBtn"
|
type="text"
|
placeholder="Please enter your Name"
|
v-model="form.name"
|
/>
|
|
<input v-if="!showBtn" type="text" v-model="form.name" readonly />
|
</div>
|
</div>
|
<div class="bank_name">
|
<div class="lefts">
|
<span>{{ $t("hj196") + ":" }}</span>
|
</div>
|
<div class="rights">
|
<input
|
v-if="showBtn"
|
type="text"
|
placeholder="Please enter your ID card"
|
v-model="form.idCard"
|
/>
|
<input v-if="!showBtn" type="text" v-model="form.idCard" readonly />
|
</div>
|
</div>
|
<!-- <div class="bank_name">
|
<div class="lefts">
|
<span>{{ "Vaild Number" + ":" }}</span>
|
</div>
|
<div class="rights">
|
<input
|
v-if="showBtn"
|
type="text"
|
placeholder="Please enter your ID card"
|
v-model="form.vaildNumber"
|
/>
|
<input
|
v-if="!showBtn"
|
type="text"
|
v-model="form.vaildNumber"
|
readonly
|
/>
|
</div>
|
</div> -->
|
<div class="uploads">
|
<div class="lefts">
|
<el-upload
|
:with-credentials="true"
|
class="avatar-uploader"
|
:action="admin + '/user/upload.do'"
|
list-type="picture-card"
|
name="upload_file"
|
:show-file-list="false"
|
:on-success="handleAvatarSuccess"
|
:on-error="handleError"
|
:before-upload="beforeAvatarUpload"
|
:disabled="!showBtn"
|
>
|
<img
|
v-if="form.img1key"
|
:src="form.img1key"
|
class="id-img avatar"
|
style="width: 100%; height: 100%"
|
/>
|
<i v-else class="iconfont icon-zhaopian"></i>
|
<span v-if="!form.img1key && !imgStatus" class="btn-title">{{
|
$t("hj197")
|
}}</span>
|
<span v-if="imgStatus" class="btn-title">{{ $t("hj198") }}</span>
|
</el-upload>
|
</div>
|
<div class="rights">
|
<el-upload
|
:with-credentials="true"
|
class="avatar-uploader"
|
:action="admin + '/user/upload.do'"
|
list-type="picture-card"
|
name="upload_file"
|
:show-file-list="false"
|
:on-success="handleAvatarSuccess2"
|
:on-error="handleError2"
|
:before-upload="beforeAvatarUpload2"
|
:disabled="!showBtn"
|
>
|
<img
|
v-if="form.img2key"
|
:src="form.img2key"
|
class="id-img avatar"
|
style="width: 100%; height: 100%"
|
/>
|
<i v-else class="iconfont icon-zhaopian"></i>
|
<span v-if="!form.img2key && !imgStatus2" class="btn-title">{{
|
$t("hj199")
|
}}</span>
|
<span v-if="imgStatus2" class="btn-title">{{ $t("hj198") }}</span>
|
</el-upload>
|
</div>
|
</div>
|
<div class="bank_name bind" @click="toSure" v-if="showBtn">
|
<span>{{ $t("hj161") }}</span>
|
</div>
|
<van-notify v-model="messFlag" type="primary">
|
<div>
|
<div class="eft">
|
<span>{{ $t("hj200") }}</span>
|
</div>
|
<div class="bft">
|
<span
|
>{{ $t("hj201") }}：{{ this.$store.state.userInfo.authMsg }}</span
|
>
|
</div>
|
</div>
|
</van-notify>
|
<div class="pass">
|
<div class="top_t">
|
<img
|
v-if="this.$store.state.userInfo.isActive == 1"
|
src="../../../static/img/bd_shz.png"
|
/>
|
<span
|
v-if="this.$store.state.userInfo.isActive == 1"
|
class="ise_pass"
|
>{{ $t("hj202") }}</span
|
>
|
<img
|
v-if="!showBtn && this.$store.state.userInfo.isActive != 1"
|
src="../../../static/img/bd_suessce.png"
|
/>
|
<span v-if="!showBtn && this.$store.state.userInfo.isActive != 1">{{
|
$t("hj203")
|
}}</span>
|
<img v-if="showBtn" src="../../../static/img/bd_fail.png" />
|
<span v-if="showBtn" class="ise_pass">{{ $t("hj204") }}</span>
|
</div>
|
</div>
|
</div>
|
</div>
|
</template>
|
|
<script>
|
import * as api from "@/axios/api";
|
import { Toast } from "mint-ui";
|
import { isNull, idCardReg, isName } from "@/utils/utils";
|
import { compress } from "@/utils/imgupload";
|
import apiUrl from "@/axios/api.url.js";
|
export default {
|
name: "bankCard",
|
data() {
|
return {
|
form: {
|
phone: "",
|
name: "",
|
idCard: "",
|
vaildNumber: "",
|
img1key: "",
|
img2key: "",
|
img3key: "",
|
},
|
img1Key: "",
|
img2Key: "",
|
img3Key: "",
|
showBtn: true,
|
admin: apiUrl.baseURL,
|
imgStatus: false,
|
imgStatus2: false,
|
messFlag: this.$store.state.userInfo.isActive == 3 ? true : false,
|
};
|
},
|
created() {
|
this.getUserInfo();
|
},
|
|
beforeDestroy() {
|
if (this.$state.theme == "red") {
|
document.body.classList.remove("red-bg");
|
document.body.classList.add("black-bg");
|
}
|
},
|
mounted() {
|
if (this.$state.theme == "red") {
|
document.body.classList.remove("black-bg");
|
document.body.classList.add("red-bg");
|
}
|
},
|
methods: {
|
handleAvatarSuccess(res, file) {
|
this.imgStatus = false;
|
this.form.img1key = res.data.url;
|
},
|
beforeAvatarUpload(file) {
|
this.imgStatus = true;
|
},
|
handleError() {
|
this.imgStatus = false;
|
},
|
handleAvatarSuccess2(res, file) {
|
this.imgStatus2 = false;
|
this.form.img2key = res.data.url; // URL.createObjectURL(file.raw);
|
},
|
beforeAvatarUpload2(file) {
|
this.imgStatus2 = true;
|
const isLt10M = file.size / 1024 / 1024 < 10;
|
if (!isLt10M) {
|
this.$message.error(this.$t("hj205"));
|
return false;
|
} else {
|
this.form.img2key = URL.createObjectURL(file);
|
compress(file, function (val) {});
|
}
|
},
|
handleError2() {
|
this.imgStatus2 = false;
|
},
|
handleAvatarSuccess3(res, file) {
|
this.form.img3key = res.data.url; // URL.createObjectURL(file.raw);
|
},
|
async getUserInfo() {
|
// 获取用户信息
|
let data = await api.getUserInfodata();
|
if (data.status === 0) {
|
// 判断是否登录
|
this.$store.commit("dialogVisible", false);
|
this.$store.state.userInfo = data.data;
|
this.userInfo = data.data;
|
if (
|
this.$store.state.userInfo.isActive === 1 ||
|
this.$store.state.userInfo.isActive === 2
|
) {
|
this.form.idCard = this.$store.state.userInfo.idCard;
|
this.form.vaildNumber = this.$store.state.userInfo.vaildNumber;
|
this.form.name = this.$store.state.userInfo.realName;
|
this.form.img1key = this.$store.state.userInfo.img1Key;
|
this.form.img2key = this.$store.state.userInfo.img2Key;
|
this.showBtn = false;
|
}
|
} else {
|
//this.$store.commit('dialogVisible',true);
|
//跳转到login
|
this.$router.push({ path: "/login" });
|
}
|
},
|
beforeAvatarUpload3(file) {},
|
// 上传
|
handleFile: function (e) {
|
// var that = this
|
let $target = e.target || e.srcElement;
|
let file = $target.files[0];
|
// if(file.size > 1024 * 1024 *20){
|
console.log(file, "file");
|
let i = false;
|
if (i) {
|
Toast(this.$t("hj206"));
|
} else {
|
this.img1Key = file;
|
var reader = new FileReader();
|
reader.onload = (data) => {
|
let res = data.target || data.srcElement;
|
this.form.img1Key = res.result;
|
// Indicator.close()
|
};
|
|
reader.readAsDataURL(file);
|
}
|
},
|
toSure() {
|
// 实名认证弹框
|
if (isNull(this.form.name)) {
|
Toast(this.$t("hj207"));
|
} else if (isNull(this.form.idCard)) {
|
Toast(this.$t("hj208"));
|
} else {
|
// 显示确认弹窗
|
this.toAuthentication();
|
}
|
},
|
async toAuthentication() {
|
// console.log(this.form);
|
|
// return;
|
let opts = {
|
realName: this.form.name,
|
idCard: this.form.idCard,
|
vaildNumber: this.form.vaildNumber,
|
img1key: this.form.img1key,
|
img2key: this.form.img2key,
|
img3key: this.form.img3key,
|
};
|
let data = await api.userAuth(opts);
|
if (data.status === 0) {
|
Toast(this.$t("hj210"));
|
this.goBack();
|
} else {
|
Toast(data.msg);
|
}
|
},
|
goBack() {
|
this.$router.back(-1);
|
},
|
},
|
};
|
</script>
|
|
<style scoped lang="less">
|
.bank_card_page {
|
width: 100%;
|
// height: 100%;
|
background: #fff;
|
position: relative;
|
|
.content {
|
width: 100%;
|
height: 100%;
|
padding: 0 0.6rem;
|
|
.top_back {
|
width: 100%;
|
height: 2rem;
|
|
> div {
|
width: 10%;
|
height: 100%;
|
display: flex;
|
align-items: center;
|
}
|
|
img {
|
width: 0.6rem;
|
height: 0.6rem;
|
}
|
}
|
|
.titles {
|
width: 100%;
|
height: 1.5rem;
|
font-size: 0.641rem;
|
margin-top: 1rem;
|
|
span {
|
font-weight: 600;
|
}
|
}
|
}
|
|
.bank_name {
|
width: 100%;
|
height: 1.5rem;
|
display: flex;
|
padding: 0 0.2rem;
|
background: rgb(247, 247, 247);
|
border-radius: 0.2rem;
|
margin-top: 0.3rem;
|
|
.lefts {
|
width: 36%;
|
height: 100%;
|
display: flex;
|
align-items: center;
|
font-size: 0.3846rem;
|
|
span {
|
font-weight: 600;
|
}
|
}
|
|
.rights {
|
width: 75%;
|
height: 100%;
|
display: flex;
|
align-items: center;
|
justify-content: center;
|
|
input {
|
width: 100%;
|
height: 100%;
|
}
|
}
|
}
|
}
|
|
.bank_name.bind {
|
display: flex;
|
align-items: center;
|
justify-content: center;
|
background: #5c288c;
|
font-size: 0.4103rem;
|
color: #fff;
|
|
span {
|
font-weight: 600;
|
}
|
}
|
|
.uploads {
|
width: 100%;
|
display: flex;
|
align-items: center;
|
justify-content: space-between;
|
margin-top: 0.3rem;
|
|
> div {
|
width: 48%;
|
background: rgb(247, 247, 247);
|
}
|
}
|
|
/deep/ .el-upload--picture-card {
|
background: none;
|
width: 100%;
|
height: 1.6rem;
|
line-height: 1.6rem;
|
}
|
|
/deep/ .el-upload__input {
|
display: none;
|
}
|
|
.pass {
|
width: 100%;
|
display: flex;
|
justify-content: center;
|
align-items: center;
|
height: auto;
|
// position: absolute;
|
// top: 1.72rem;
|
// right: .2rem;
|
// opacity: 0.2;
|
|
.top_t {
|
width: 100%;
|
height: auto;
|
display: flex;
|
flex-direction: column;
|
justify-content: center;
|
font-size: 80px;
|
color: #3ac23e;
|
align-items: center;
|
img {
|
width: 64px;
|
height: 64px;
|
margin-top: 200px;
|
margin-bottom: 20px;
|
}
|
span {
|
font-size: 30px;
|
}
|
}
|
|
.ise_pass {
|
font-size: 80px;
|
}
|
}
|
</style>
|
