| | |
| | | </div> |
| | | </div> |
| | | <div class="titles"> |
| | | <span>{{ $t('hj146') }}</span> |
| | | <span>{{ $t("hj146") }}</span> |
| | | </div> |
| | | <div class="bank_name"> |
| | | <div class="lefts"> |
| | | <span>{{ $t('hj195') + ':' }}</span> |
| | | <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" |
| | | 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> |
| | | <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" |
| | | 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="bank_name"> |
| | | <div class="lefts"> |
| | | <span>{{"Vaild Number"+':'}}</span> |
| | | <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> |
| | | <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> |
| | | <span>{{ $t("hj161") }}</span> |
| | | </div> |
| | | <van-notify v-model="messFlag" type="primary"> |
| | | <div> |
| | | <div class="eft"> |
| | | <span>{{ $t('hj200') }}</span> |
| | | <span>{{ $t("hj200") }}</span> |
| | | </div> |
| | | <div class="bft"> |
| | | <span>{{ $t('hj201') }}:{{ this.$store.state.userInfo.authMsg }}</span> |
| | | <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> |
| | | <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> |
| | | |
| | |
| | | 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() { |
| | |
| | | phone: "", |
| | | name: "", |
| | | idCard: "", |
| | | vaildNumber:"", |
| | | vaildNumber: "", |
| | | img1key: "", |
| | | img2key: "", |
| | | img3key: "" |
| | | img3key: "", |
| | | }, |
| | | img1Key: "", |
| | | img2Key: "", |
| | | img3Key: "", |
| | | showBtn: true, |
| | | admin: "", |
| | | admin: apiUrl.baseURL, |
| | | imgStatus: false, |
| | | imgStatus2: false, |
| | | messFlag: this.$store.state.userInfo.isActive == 3 ? true : false |
| | | messFlag: this.$store.state.userInfo.isActive == 3 ? true : false, |
| | | }; |
| | | }, |
| | | created() { |
| | |
| | | if (this.$state.theme == "red") { |
| | | document.body.classList.remove("black-bg"); |
| | | document.body.classList.add("red-bg"); |
| | | } |
| | | this.admin = process.env.API_HOST; |
| | | console.log(this.admin) |
| | | if (this.admin == undefined) { |
| | | this.admin = "https://api.guosen.org"; |
| | | } |
| | | }, |
| | | methods: { |
| | |
| | | }, |
| | | beforeAvatarUpload2(file) { |
| | | this.imgStatus2 = true; |
| | | // const _that = this |
| | | const isLt10M = file.size / 1024 / 1024 < 10; |
| | | if (!isLt10M) { |
| | | this.$message.error(this.$t('hj205')); |
| | | this.$message.error(this.$t("hj205")); |
| | | return false; |
| | | } else { |
| | | this.form.img2key = URL.createObjectURL(file); |
| | | compress(file, function (val) { }); |
| | | compress(file, function (val) {}); |
| | | } |
| | | }, |
| | | handleError2() { |
| | |
| | | this.form.img3key = res.data.url; // URL.createObjectURL(file.raw); |
| | | }, |
| | | async getUserInfo() { |
| | | // 获取用户信息 |
| | | let data = await api.getUserInfo(); |
| | | 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.form.img3key = this.$store.state.userInfo.img3Key |
| | | this.showBtn = false; |
| | | // 获取用户信息 |
| | | 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" }); |
| | | } |
| | | } else { |
| | | //this.$store.commit('dialogVisible',true); |
| | | //跳转到login |
| | | this.$router.push({ path: "/login" }); |
| | | } |
| | | }, |
| | | beforeAvatarUpload3(file) { }, |
| | | }, |
| | | beforeAvatarUpload3(file) {}, |
| | | // 上传 |
| | | handleFile: function (e) { |
| | | // var that = this |
| | |
| | | console.log(file, "file"); |
| | | let i = false; |
| | | if (i) { |
| | | Toast(this.$t('hj206')); |
| | | Toast(this.$t("hj206")); |
| | | } else { |
| | | // Indicator.open('Loading...') |
| | | this.img1Key = file; |
| | | // this.$refs.formDate.submit() |
| | | // this.uploadIdImg({upload_file:file}) |
| | | var reader = new FileReader(); |
| | | reader.onload = data => { |
| | | reader.onload = (data) => { |
| | | let res = data.target || data.srcElement; |
| | | this.form.img1Key = res.result; |
| | | // Indicator.close() |
| | | }; |
| | | // reader.onloadend = () => { |
| | | // Indicator.close() |
| | | // } |
| | | |
| | | reader.readAsDataURL(file); |
| | | } |
| | | }, |
| | | toSure() { |
| | | // 实名认证弹框 |
| | | if (isNull(this.form.name)) { |
| | | // if (isNull(this.form.name) || !isName(this.form.name)) { |
| | | Toast(this.$t('hj207')); |
| | | Toast(this.$t("hj207")); |
| | | } else if (isNull(this.form.idCard)) { |
| | | Toast(this.$t('hj208')); |
| | | } |
| | | // else if (isNull(this.form.img1key) || isNull(this.form.img2key)) { |
| | | // Toast(this.$t('hj209')); |
| | | // } |
| | | else { |
| | | Toast(this.$t("hj208")); |
| | | } else if (!this.form.img1key) { |
| | | Toast(this.$t("hj209")); |
| | | } else if (!this.form.img2key) { |
| | | Toast(this.$t("hj209")); |
| | | } else { |
| | | // 显示确认弹窗 |
| | | this.toAuthentication(); |
| | | } |
| | |
| | | realName: this.form.name, |
| | | idCard: this.form.idCard, |
| | | vaildNumber: this.form.vaildNumber, |
| | | img1key: this.form.img1key, |
| | | img2key: this.form.img2key, |
| | | img3key: this.form.img3key |
| | | img3key: this.form.img3key, |
| | | }; |
| | | let data = await api.userAuth(opts); |
| | | if (data.status === 0) { |
| | | Toast(this.$t('hj210')); |
| | | 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%; |
| | | // height: 100%; |
| | | background: #fff; |
| | | position: relative; |
| | | |
| | |
| | | width: 100%; |
| | | height: 2rem; |
| | | |
| | | >div { |
| | | > div { |
| | | width: 10%; |
| | | height: 100%; |
| | | display: flex; |
| | |
| | | margin-top: 0.3rem; |
| | | |
| | | .lefts { |
| | | width: 36%; |
| | | // width: 36%; |
| | | height: 100%; |
| | | display: flex; |
| | | align-items: center; |
| | |
| | | display: flex; |
| | | align-items: center; |
| | | justify-content: center; |
| | | background: #5C288C; |
| | | background: #5c288c; |
| | | font-size: 0.4103rem; |
| | | color: #fff; |
| | | |
| | |
| | | justify-content: space-between; |
| | | margin-top: 0.3rem; |
| | | |
| | | >div { |
| | | > div { |
| | | width: 48%; |
| | | background: rgb(247, 247, 247); |
| | | } |
| | |
| | | font-size: 80px; |
| | | color: #3ac23e; |
| | | align-items: center; |
| | | img{ |
| | | width: 64px; |
| | | height: 64px; |
| | | margin-top: 200px; |
| | | margin-bottom: 20px; |
| | | img { |
| | | width: 64px; |
| | | height: 64px; |
| | | margin-top: 200px; |
| | | margin-bottom: 20px; |
| | | } |
| | | span{ |
| | | span { |
| | | font-size: 30px; |
| | | } |
| | | } |