添加上传证件正反面认证

assets/css/name_cert/name_cert.scss

@@ -1,94 +1,175 @@
-
 .main {
-    position: relative;
+  position: relative;
 }
 
 .name-cert-container {
-    position: absolute;
-    top: 50%;
-    left: 50%;
-    transform: translate(-50%, -50%);
-    display: flex;
-    justify-content: center;
-    align-items: center;
+  position: absolute;
+  top: 50%;
+  left: 50%;
+  transform: translate(-50%, -50%);
+  display: flex;
+  justify-content: center;
+  align-items: center;
 }
 
 .name-cert-main {
-    width: 328px;
+  width: 347px;
 }
 
 .name-cert-label {
-    font-size: 13px;
-    font-family: PingFangSC-Regular, PingFang SC;
-    font-weight: 400;
-    color: #0b121a;
-    line-height: 16px;
-    margin-bottom: 8px;
+  font-size: 13px;
+  font-family: PingFangSC-Regular, PingFang SC;
+  font-weight: 400;
+  color: #0b121a;
+  line-height: 16px;
+  margin-bottom: 8px;
 }
 
 .name-cert-title-area {
-    text-align: center;
-    margin-bottom: 40px;
+  text-align: center;
+  margin-bottom: 40px;
 }
 
 .name-cert-icon {
-    width: 70px;
-    height: 70px;
+  width: 70px;
+  height: 70px;
 }
 
 .name-cert-title {
-    margin-top: 4px;
-    margin-bottom: 8px;
-    font-size: 18px;
-    font-family: PingFangSC-Medium, PingFang SC;
-    font-weight: 500;
-    color: #0B121A;
-    line-height: 20px;
-    text-align: center;
+  margin-top: 4px;
+  margin-bottom: 8px;
+  font-size: 18px;
+  font-family: PingFangSC-Medium, PingFang SC;
+  font-weight: 500;
+  color: #0b121a;
+  line-height: 20px;
+  text-align: center;
 }
 
 .name-cert-tips {
-    text-align: center;
-    font-size: 13px;
-    font-family: PingFangSC-Regular, PingFang SC;
-    font-weight: 400;
-    color: #828C99;
-    line-height: 16px
+  text-align: center;
+  font-size: 13px;
+  font-family: PingFangSC-Regular, PingFang SC;
+  font-weight: 400;
+  color: #828c99;
+  line-height: 16px;
 }
 
 .qrcode-tips {
-    text-align: center;
+  text-align: center;
 }
 
 .qrcode-img {
-    text-align: center;
-    width: 300px;
-    margin-top: 20px;
-    img {
-       width: 100%;
-    }
+  text-align: center;
+  width: 300px;
+  margin-top: 20px;
+  img {
+    width: 100%;
+  }
 }
 
 .name-cert-success-btn {
-    margin-top: 80px;
+  margin-top: 80px;
 }
 
 .name-cert-fail-btn {
-    margin-top: 104px;
+  margin-top: 104px;
 }
 
 .name-cert-fail-tips {
-    margin-top: 30px;
-    font-size: 14px;
-    font-family: PingFangSC-Regular, PingFang SC;
-    font-weight: 400;
-    color: #666666;
-    line-height: 16px;
+  margin-top: 30px;
+  font-size: 14px;
+  font-family: PingFangSC-Regular, PingFang SC;
+  font-weight: 400;
+  color: #666666;
+  line-height: 16px;
 }
 
 .cert-btn {
-    width: 188px;
+  width: 188px;
 }
-.name-cert-submit{
+.name-cert-submit {
+  text-align: center;
+}
+
+.upload-main {
+  display: flex;
+  justify-content: space-between;
+}
+
+.upload-box {
+  width: 166px;
+  height: 143px;
+  overflow: hidden;
+  margin-bottom: 20px;
+}
+.upload-img {
+  width: 166px;
+  height: 143px;
+  border: 1px solid #ebf4ff;
+  border-radius: 8px;
+  overflow: hidden;
+  box-sizing: border-box;
+  position: relative;
+  &::after{
+      content: "";
+      position: absolute;
+      left: 0;
+      top: 0;
+      right: 0;
+      bottom: 0;
+      background-color: rgba(0,0,0,0.6);
+      z-index: 2;
+      opacity: 0;
+      transition:all 0.3s;
+  }
+  &:hover{
+    .el-icon-delete{
+        opacity: 1;
+    }
+    &::after{
+        opacity: 1;
+    }
+}
+  .el-icon-delete{
+      position: absolute;
+      z-index: 4;
+      left: 50%;
+      top: 50%;
+      transform: translate(-50%,-50%);
+      opacity: 0;
+      transition:all 0.3s;
+      color:#fff;
+      font-size: 20px;
+  }
+  .avatar{
+      width:100%;
+  }
+}
+.upload-area {
+  width: 166px;
+  height: 143px;
+  background-color: #ebf4ff;
+  border: 1px solid #ebf4ff;
+  background-repeat: no-repeat;
+  background-position: 50% 13px;
+  background-size: 130px 86px;
+  border-radius: 8px;
+  padding-top: 111px;
+  box-sizing: border-box;
+  p {
+    // margin-top: 111px;
+    font-size: 14px;
+    font-family: PingFangSC-Regular, PingFang SC;
+    font-weight: 400;
+    color: #308eff;
+    line-height: 20px;
     text-align: center;
-  }
+  }
+  &.z_file {
+    background-image: url("~@/assets/img/cert/z.png");
+  }
+  &.f_file {
+    background-image: url("~@/assets/img/cert/f.png");
+  }
+}

pages/frontend/name_cert/index.vue

@@ -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";
         }
     }
 };