update:个人ca申请界面更新

src/views/CA/UserApply.vue

@@ -30,6 +30,7 @@
       <a-form-item label="身份证号码" name="idCardNo">
         <a-input v-model:value="form.idCardNo" :disabled="disableEdit" />
       </a-form-item>
+
       <a-form-item label="所在单位名称" name="unitName">
         <a-select v-model:value="form.unitName" :disabled="disableEdit">
           <a-select-option
@@ -43,12 +44,49 @@
       <a-form-item label="手机号码" name="phone">
         <a-input v-model:value="form.phone" :disabled="disableEdit" />
       </a-form-item>
+      <a-form-item label="手机验证码" name="phoneCode">
+        <a-row :gutter="8">
+          <a-col :span="12">
+            <a-input v-model:value="form.phoneCode" :disabled="disableEdit" />
+          </a-col>
+          <a-col :span="12">
+            <a-button :disabled="disableEdit || countDown > 0" @click="getCode">
+              获取验证码{{ countDown > 0 ? `(${countDown})` : "" }}
+            </a-button>
+          </a-col>
+        </a-row>
+      </a-form-item>
+      <a-form-item label="收件人名称" name="receiverName">
+        <a-input v-model:value="form.receiverName" :disabled="disableEdit" />
+      </a-form-item>
+      <a-form-item label="收件人号码" name="receiverPhone">
+        <a-input v-model:value="form.receiverPhone" :disabled="disableEdit" />
+      </a-form-item>
+      <a-form-item label="收件地址" name="receiverAddress">
+        <a-input v-model:value="form.receiverAddress" :disabled="disableEdit" />
+      </a-form-item>
+      <a-form-item label="身份证照片">
+        <input v-model="form.idCardPicId" hidden />
+        <a-upload
+          accept="image/*"
+          action="/api2/upload/uploadfile"
+          v-model:fileList="pifFilelist"
+          :beforeUpload="beforeUpload"
+          @change="info => handleChange(info, 'idCardPicId')"
+          :disabled="disableEdit"
+        >
+          <a-button block :disabled="disableEdit">
+            <UploadOutlined />
+            点击{{ form.idCardPicId ? "替换" : "上传" }}
+          </a-button>
+        </a-upload>
+      </a-form-item>
       <a-form-item :wrapperCol="{ span: 10, offset: 8 }">
         <a-button type="primary" @click="onSubmit" v-if="!disableEdit"
           >前往申领</a-button
         >
         <a-button type="primary" @click="getStatus" v-if="disableEdit"
-          >继续申领流程</a-button
+          >查询结果</a-button
         >
         <a-button style="margin-left: 10px" @click="showDrawer"
           >历史申领记录</a-button
@@ -79,9 +117,6 @@
           }}</a-tag
         >
       </template>
-      <template #extra>
-        <a-button type="link" @click="goCertUrl(userApply.id)">前往</a-button>
-      </template>
       <p>身份证号:{{ userApply.idCardNo }}</p>
       <p>手机号码:{{ userApply.phone }}</p>
       <p v-if="userApply.dealReason">拒绝理由:{{ userApply.dealReason }}</p>
@@ -95,18 +130,26 @@
 </style>
 <script>
 import { message } from "ant-design-vue";
+import { UploadOutlined } from "@ant-design/icons-vue";
 import { get, post } from "@/services/http";
 import regex from "@/services/regex";
 export default {
   data() {
     return {
+      pifFilelist: [],
+      countDown: 0,
       labelCol: { span: 8 },
       wrapperCol: { span: 10 },
       form: {
         idCardNo: "",
         idCardName: "",
+        idCardPicId: "",
         unitName: "",
-        phone: ""
+        phone: "",
+        phoneCode: "",
+        receiverName: "",
+        receiverPhone: "",
+        receiverAddress: ""
       },
       rules: {
         idCardNo: [
@@ -121,7 +164,7 @@ export default {
           { required: true, message: "请输入真实姓名", trigger: "blur" }
         ],
         unitName: [
-          { required: true, message: "请选择你的单位名称", trigger: "change" }
+          { required: true, message: "请选择你的单位名称", trigger: "blur" }
         ],
         phone: [
           { required: true, message: "请输入你的手机号码", trigger: "blur" },
@@ -130,6 +173,20 @@ export default {
             message: "请输入正确的11位手机号码",
             trigger: "blur"
           }
+        ],
+        receiverName: [
+          { required: true, message: "请输入收件人姓名", trigger: "blur" }
+        ],
+        receiverPhone: [
+          { required: true, message: "请输入收件人手机号码", trigger: "blur" },
+          {
+            pattern: regex.Phone,
+            message: "请输入正确的11位手机号码",
+            trigger: "blur"
+          }
+        ],
+        receiverAddress: [
+          { required: true, message: "请输入收件地址", trigger: "blur" }
         ]
       },
       userApplyList: [],
@@ -145,6 +202,58 @@ export default {
     showDrawer() {
       this.drawVisible = true;
     },
+    async getCode() {
+      if (!regex.Phone.test(this.form.phone)) {
+        message.error("请输入正确的手机号码");
+        return;
+      }
+      var res = await get("/api2/CA/GetPhoneCode", {
+        type: 1,
+        phone: this.form.phone
+      });
+      if (res.errorCode !== 0) {
+        message.error(res.errorMsg);
+        return;
+      }
+      this.countDown = 60;
+      var handle = setInterval(() => {
+        this.countDown--;
+        this.countDown < 0 && clearInterval(handle);
+      }, 1000);
+    },
+    beforeUpload(file, isPdf) {
+      console.log(file, isPdf);
+      const isValid =
+        isPdf === true
+          ? file.type === "application/pdf"
+          : file.type === "image/jpeg" || file.type === "image/png";
+      if (!isValid) {
+        message.error("只能上传受支持格式的文件");
+      }
+      const isLt2M = file.size / 1024 / 1024 < 2;
+      if (!isLt2M) {
+        message.error("文件大小超过2MB!");
+      }
+      return isValid && isLt2M;
+    },
+    handleChange(info, name) {
+      console.log(info.file.status, info.file, info.fileList);
+      // if (info.file.status !== "uploading") {
+      // }
+      if (info.file.status === "done") {
+        message.success(`${info.file.name} 文件上传成功`);
+        this.form[name] = info.file.response.id;
+        if (info.fileList.length > 1) {
+          info.fileList.shift();
+        }
+      } else if (info.file.status === "error") {
+        message.error(`${info.file.name} 文件上传失败`);
+        info.fileList.pop();
+      }
+      if (info.file.status === "removed") {
+        this.form[name] = null;
+      }
+    },
     async onSubmit() {
       try {
         await this.$refs.ruleForm.validate();
@@ -159,17 +268,16 @@ export default {
         this.currentApplyId = resp.data;
         message.success(
           "录入完成即将进入申请页面",
-          (onclose = () => this.goCertUrl())
+          (onclose = () => this.sendUserApply())
         );
       }
     },
-    async goCertUrl(id) {
-      const res = await get("/api2/CA/GetRedirectUrl", {
+    async sendUserApply(id) {
+      const res = await post("/api2/CA/SendCreateApply", {
         applyId: id || this.currentApplyId
       });
       if (res.errorCode == 0) {
-        // window.open(res.data);
-        location.href = res.data;
+        message.success("申请成功");
       } else {
         message.error(res.errorMsg);
       }
@@ -188,21 +296,16 @@ export default {
               "已授权，请等待证书发放",
               "已发放，申领已完成",
               "已拒绝，请重新申请或联系管理员"
-            ][status],
-          (onclose = this.goCertUrl)
-          // (onclose = async () => {
-          //   if (status === 1 || status === 2 || status === 3)
-          //     this.isSuccess = true;
-          //   else if (status === 4) location.reload();
-          //   else await this.goCertUrl();
-          // })
+            ][status]
         );
       } else {
-        await this.goCertUrl();
+        await this.sendUserApply();
       }
     }
   },
-  components: {},
+  components: {
+    UploadOutlined
+  },
   created: async function() {
     //获取所在组织信息和个人数字认证信息
     const organizeInfo = await get("/api2/UserInfo/Organize");
@@ -228,6 +331,18 @@ export default {
       this.form.unitName = current.unitName;
       this.form.phone = current.phone;
       this.currentApplyId = current.id;
+      this.form.receiverName = current.receiverName;
+      this.form.receiverPhone = current.receiverPhone;
+      this.form.receiverAddress = current.receiverAddress;
+      this.form.receiverName = current.receiverName;
+      this.pifFilelist = [
+        {
+          uid: "-1",
+          status: "done",
+          url: current.idCardPicPath,
+          name: "身份证照片"
+        }
+      ];
     } else {
       this.disableEdit = false;
     }