|
|
@@ -28,11 +28,33 @@
|
|
|
<el-input v-model="modalFormData.cert_no" placeholder="请输入证件号" clearable :style="{ width: '100%' }">
|
|
|
</el-input>
|
|
|
</el-form-item>
|
|
|
- <el-form-item >
|
|
|
+ <div class="upload-main">
|
|
|
+ <el-upload class="upload-box" action="#" :show-file-list="false" :multiple="false" accept="image/png, image/jpeg" :before-upload="file => handleFileChange(file,'z_file')">
|
|
|
+
|
|
|
+ <div class="upload-img" v-if="z_file" @click.stop="handleDeleteFile('z_file')">
|
|
|
+ <i class="el-icon-delete avatar-uploader-icon"></i>
|
|
|
+ <img :src="z_file" class="avatar" />
|
|
|
+ </div>
|
|
|
+ <div v-else class="upload-area z_file">
|
|
|
+ <p>+点击上传正面</p>
|
|
|
+ <div class="upload-"></div>
|
|
|
+ </div>
|
|
|
+
|
|
|
+ </el-upload>
|
|
|
+
|
|
|
+ <el-upload class="upload-box" action="#" :show-file-list="false" :multiple="false" accept="image/png, image/jpeg" :before-upload="file => handleFileChange(file,'f_file')">
|
|
|
+ <div class="upload-img" v-if="f_file" @click.stop="handleDeleteFile('f_file')">
|
|
|
+ <i class="el-icon-delete avatar-uploader-icon"></i>
|
|
|
+ <img :src="f_file" class="avatar" />
|
|
|
+ </div>
|
|
|
+ <div v-else class="upload-area f_file">
|
|
|
+ <p>+点击上传反面</p>
|
|
|
+ </div>
|
|
|
+ </el-upload>
|
|
|
+ </div>
|
|
|
|
|
|
- </el-form-item>
|
|
|
<div class="name-cert-submit">
|
|
|
- <el-button type="primary" class='cert-btn' size="medium" @click="submitForm">支付宝实名认证</el-button>
|
|
|
+ <el-button type="primary" class="cert-btn" size="medium" @click="submitForm">支付宝实名认证</el-button>
|
|
|
</div>
|
|
|
</el-form>
|
|
|
</div>
|
|
|
@@ -44,7 +66,6 @@
|
|
|
<img :src="qrcodeBase64" />
|
|
|
</div>
|
|
|
</el-dialog>
|
|
|
-
|
|
|
</div>
|
|
|
</template>
|
|
|
|
|
|
@@ -53,15 +74,20 @@ import {
|
|
|
mapState
|
|
|
} from "vuex";
|
|
|
import qs from "qs";
|
|
|
-import icon from "@/assets/img/account/certicon@3x.png"
|
|
|
-import iconSuccess from "@/assets/img/account/cert_success_icon@3x.png"
|
|
|
-import iconFail from "@/assets/img/account/cert_fail_icon@3x.png"
|
|
|
-import QRCode from "qrcode"
|
|
|
+import icon from "@/assets/img/account/certicon@3x.png";
|
|
|
+import iconSuccess from "@/assets/img/account/cert_success_icon@3x.png";
|
|
|
+import iconFail from "@/assets/img/account/cert_fail_icon@3x.png";
|
|
|
+import QRCode from "qrcode";
|
|
|
+import uploader from "@/components/uploader";
|
|
|
|
|
|
export default {
|
|
|
name: "SeoLearnList",
|
|
|
+ components: {
|
|
|
+ uploader
|
|
|
+ },
|
|
|
data() {
|
|
|
return {
|
|
|
+ diploma_photo: "",
|
|
|
baseUrl: "",
|
|
|
mobile: false,
|
|
|
isWeixinApp: true,
|
|
|
@@ -73,7 +99,7 @@ export default {
|
|
|
url: "",
|
|
|
certifyId: "",
|
|
|
|
|
|
- qrcodeBase64: '',
|
|
|
+ qrcodeBase64: "",
|
|
|
timer: null,
|
|
|
// normal 待实名 success 认证成功 fail 认证失败
|
|
|
state: "normal",
|
|
|
@@ -84,6 +110,8 @@ export default {
|
|
|
cert_type: 1,
|
|
|
cert_no: ""
|
|
|
},
|
|
|
+ z_file: "",
|
|
|
+ f_file: "",
|
|
|
rules: {
|
|
|
cert_name: [{
|
|
|
required: true,
|
|
|
@@ -190,14 +218,67 @@ export default {
|
|
|
this.baseUrl = this.$store.state.domainConfig.siteUrl;
|
|
|
this.isWeixinApp = navigator.userAgent.indexOf("miniProgram") > -1;
|
|
|
|
|
|
- this.checkNameIsCerted()
|
|
|
- document.body.style.background = "#fff"
|
|
|
+ this.checkNameIsCerted();
|
|
|
+ document.body.style.background = "#fff";
|
|
|
},
|
|
|
methods: {
|
|
|
+ handleDeleteFile(type) {
|
|
|
+ if (type == 'z_file') {
|
|
|
+ this.z_file = ""
|
|
|
+ }
|
|
|
+ if (type == 'f_file') {
|
|
|
+ this.f_file = ""
|
|
|
+ }
|
|
|
+ },
|
|
|
+ handleFileChange(file, type) {
|
|
|
+
|
|
|
+ if (this.limitFileSize && this.limitFileSize > 0) {
|
|
|
+ if (file.size / (1024 * 1024) > this.limitFileSize) {
|
|
|
+ this.$message.error(`图片大小不得超过${this.limitFileSize}M，请重新选择`);
|
|
|
+ return false;
|
|
|
+ }
|
|
|
+ } else if (file.size / 1024 > 2048) {
|
|
|
+ this.$message.error("图片大小不得超过2M，请重新选择");
|
|
|
+ return false;
|
|
|
+ }
|
|
|
+ const formData = new FormData();
|
|
|
+ formData.append("file", file);
|
|
|
+ formData.append("original_filename", file.name);
|
|
|
+ this.uploading = true;
|
|
|
+ this.$axios
|
|
|
+ .$post(`/upload_image`, formData, {
|
|
|
+ headers: {
|
|
|
+ "Content-Type": "multipart/form-data"
|
|
|
+ }
|
|
|
+ })
|
|
|
+ .then(res => {
|
|
|
+ this.$emit("change", res.filename);
|
|
|
+ if (type == 'z_file') {
|
|
|
+ this.z_file = res.filename
|
|
|
+ }
|
|
|
+ if (type == 'f_file') {
|
|
|
+ this.f_file = res.filename
|
|
|
+ }
|
|
|
+
|
|
|
+ })
|
|
|
+ .finally(() => {
|
|
|
+ this.uploading = false;
|
|
|
+ });
|
|
|
+ return false
|
|
|
+ },
|
|
|
submitForm() {
|
|
|
this.$refs["modalForm"].validate(valid => {
|
|
|
if (!valid) return;
|
|
|
- this.submit()
|
|
|
+
|
|
|
+ if (!this.z_file) {
|
|
|
+ this.$message.error("请上传证件正面")
|
|
|
+ return
|
|
|
+ }
|
|
|
+ if (!this.f_file) {
|
|
|
+ this.$message.error("请上传证件反面")
|
|
|
+ return
|
|
|
+ }
|
|
|
+ this.submit();
|
|
|
// TODO 提交表单
|
|
|
});
|
|
|
},
|
|
|
@@ -209,7 +290,7 @@ export default {
|
|
|
cert_name,
|
|
|
cert_no,
|
|
|
cert_type
|
|
|
- } = this.modalFormData
|
|
|
+ } = this.modalFormData;
|
|
|
// 测试用
|
|
|
// let res = {
|
|
|
// status:1,
|
|
|
@@ -222,58 +303,60 @@ export default {
|
|
|
cert_name,
|
|
|
cert_no,
|
|
|
cert_type,
|
|
|
+ z_file:this.z_file,
|
|
|
+ f_file:this.f_file,
|
|
|
from_type: 3
|
|
|
});
|
|
|
|
|
|
if (Number(res.status) !== 1) {
|
|
|
this.$message.error(res.info);
|
|
|
- return
|
|
|
+ return;
|
|
|
}
|
|
|
|
|
|
const {
|
|
|
url,
|
|
|
certifyId
|
|
|
- } = res.data
|
|
|
+ } = res.data;
|
|
|
|
|
|
- this.url = url
|
|
|
- this.certifyId = certifyId
|
|
|
+ this.url = url;
|
|
|
+ this.certifyId = certifyId;
|
|
|
this.centerDialogVisible = true;
|
|
|
- this.createQrCode()
|
|
|
- this.startTimer()
|
|
|
+ this.createQrCode();
|
|
|
+ this.startTimer();
|
|
|
},
|
|
|
createQrCode() {
|
|
|
this.$nextTick(() => {
|
|
|
- const text = this.url
|
|
|
+ const text = this.url;
|
|
|
let that = this;
|
|
|
- QRCode.toDataURL(text, {
|
|
|
- errorCorrectionLevel: 'H',
|
|
|
- margin:1,
|
|
|
- width:300
|
|
|
- }, function (err, url) {
|
|
|
- that.qrcodeBase64 = url
|
|
|
- })
|
|
|
- })
|
|
|
+ QRCode.toDataURL(
|
|
|
+ text, {
|
|
|
+ errorCorrectionLevel: "H",
|
|
|
+ margin: 1,
|
|
|
+ width: 300
|
|
|
+ },
|
|
|
+ function (err, url) {
|
|
|
+ that.qrcodeBase64 = url;
|
|
|
+ }
|
|
|
+ );
|
|
|
+ });
|
|
|
},
|
|
|
startTimer() {
|
|
|
// 启动定时器查询
|
|
|
if (this.timer) {
|
|
|
- clearInterval(this.timer)
|
|
|
- this.timer = null
|
|
|
+ clearInterval(this.timer);
|
|
|
+ this.timer = null;
|
|
|
}
|
|
|
|
|
|
this.timer = setInterval(async () => {
|
|
|
- let res = await this.$axios.$post("/uapi/zfb/return", {
|
|
|
-
|
|
|
- });
|
|
|
+ let res = await this.$axios.$post("/uapi/zfb/return", {});
|
|
|
if (Number(res.status) !== 1) {
|
|
|
this.$message.error(res.info);
|
|
|
- return
|
|
|
+ return;
|
|
|
}
|
|
|
let {
|
|
|
type
|
|
|
- } = res.data.type
|
|
|
+ } = res.data.type;
|
|
|
if (type == 1 || type == 4) {
|
|
|
-
|
|
|
// 关闭弹层
|
|
|
this.centerDialogVisible = false;
|
|
|
clearInterval(this.timer);
|
|
|
@@ -281,14 +364,13 @@ export default {
|
|
|
|
|
|
if (type == 1) {
|
|
|
// 显示成功态
|
|
|
- this.toSuccess()
|
|
|
+ this.toSuccess();
|
|
|
} else if (type == 4) {
|
|
|
// 显示失败态
|
|
|
- this.toFail()
|
|
|
+ this.toFail();
|
|
|
}
|
|
|
-
|
|
|
}
|
|
|
- }, 5000)
|
|
|
+ }, 5000);
|
|
|
},
|
|
|
checkNameIsCerted() {
|
|
|
if (this.userInfo && this.userInfo.realname_verify_status == 2) {
|
|
|
@@ -296,10 +378,10 @@ export default {
|
|
|
}
|
|
|
},
|
|
|
toSuccess() {
|
|
|
- location.href = "/frontend/name_cert_success"
|
|
|
+ location.href = "/frontend/name_cert_success";
|
|
|
},
|
|
|
toFail() {
|
|
|
- location.href = "/frontend/name_cert_fail"
|
|
|
+ location.href = "/frontend/name_cert_fail";
|
|
|
}
|
|
|
}
|
|
|
};
|
