缴费凭证界面

src/components/ImageUpload/index.vue

@@ -51,12 +51,12 @@ export default {
     // 图片数量限制
     limit: {
       type: Number,
-      default: 5,
+      default: 1,
     },
     // 大小限制(MB)
     fileSize: {
        type: Number,
-      default: 5,
+      // default: 5,
     },
     // 文件类型, 例如['png', 'jpg', 'jpeg']
     fileType: {

src/views/caseManagement/components/payDialog.vue

@@ -1,6 +1,6 @@
 <template>
   <div>
-    <el-dialog :title="payTitle" :visible.sync="openPay" v-if="openPay" width="800px" append-to-body
+    <el-dialog :title="payTitle" :visible="openPay" @close="payCancel" width="800px" append-to-body
       :destroy-on-close="true" center>
       <el-descriptions title="订单信息">
         <el-descriptions-item label="案件编号">{{
@@ -27,7 +27,25 @@
           form.arbitratClaims
         }}</el-descriptions-item>
       </el-descriptions>
-      <div class="payType">
+      <div class="paySelectType">
+        <el-radio-group v-model="paySelect" @input="changPayType">
+          <el-radio :label="0">线上支付</el-radio>
+          <el-radio :label="1">线下支付</el-radio>
+        </el-radio-group>
+      </div>
+      <div class="payupload">
+        <span>上传支付凭证：</span>
+        <div class="uploadBtn">
+          <el-upload class="upload-demo" ref="upload" action="https://jsonplaceholder.typicode.com/posts/"
+            :on-preview="handlePreview" :on-remove="handleRemove" :on-change="beforeUpload" :file-list="fileList"
+            :auto-upload="false">
+            <el-button slot="trigger" size="small" type="primary">选取文件</el-button>
+            <!-- <el-button style="margin-left: 10px;" size="small" type="success" @click="submitUpload">上传到服务器</el-button> -->
+            <div slot="tip" class="el-upload__tip">只能上传jpg/png文件，且不超过500kb</div>
+          </el-upload>
+        </div>
+      </div>
+      <div class="payType" v-if="paySelect == 0">
         <span>请选择支付方式：</span>
         <i class="iconfont icon-weixinzhifu" @click="pay(0)"></i>
         <i class="iconfont icon-zhifubao" @click="pay(1)"></i>
@@ -38,6 +56,7 @@
       <div class="payTitle">{{ payMain }}</div>
       <div slot="footer" class="dialog-footer">
         <el-button @click="payCancel" class="endbutton"><span>取 消</span></el-button>
+        <el-button @click="submitUpload" class="endbutton"><span>确认缴费</span></el-button>
       </div>
     </el-dialog>
   </div>
@@ -46,6 +65,7 @@
 <script>
 import { casePay, selectCaseApplicationConfirm } from "@/api/pay/pay";
 import QRCode from "qrcodejs2";
+import { getToken } from "@/utils/auth";
 export default {
   props: ["openPay", "payTitle", "form", "payForm", "queryParams"],
   data() {
@@ -53,10 +73,33 @@ export default {
       // key: value
       // 支付文字
       payMain: "",
-      timer:null
+      timer: null,
+      paySelect: 0,//支付线上/线下
+      fileList: []
     };
   },
   methods: {
+    //选择支付方式(线上,线下)
+    changPayType(data) {
+      console.log(data, "PPPPPPPPPPPPP");
+    },
+    beforeUpload(flie, fileList) {
+      console.log(flie, fileList, "PPPPPPPPPPPPPP");
+      this.fileList = fileList;
+    },
+    submitUpload() {
+      if (this.fileList.length < 1) {
+        this.$modal.msgError("请上传缴费凭证");
+        return
+      }
+      this.$refs.upload.submit();
+    },
+    handleRemove(file, fileList) {
+      console.log(file, fileList);
+    },
+    handlePreview(file) {
+      console.log(file);
+    },
     // 生成二维码
     qrcode(url) {
       // 前端根据 URL 生成微信支付二维码
@@ -73,15 +116,15 @@ export default {
     selectCaseApplicationConfirmFn(parms) {
       selectCaseApplicationConfirm(parms).then(res => {
         console.log(res, this.form, "KKKKKKKKKKKKKKKKKKKK");
-        if(res && res.data && res.data.paymentStatus == 1){
+        if (res && res.data && res.data.paymentStatus == 1) {
           clearInterval(this.timer);
           // this.openPay = false;
           this.payCancel()
           this.$message({
-          message: "缴费成功",
-          type: "success",
-        });
-        this.$emit("getcaseApply",this.queryParams);
+            message: "缴费成功",
+            type: "success",
+          });
+          this.$emit("getcaseApply", this.queryParams);
         }
       })
     },
@@ -115,7 +158,7 @@ export default {
         }, 3000);
         setTimeout(() => {
           clearInterval(this.timer);
-        }, 1000*60);
+        }, 1000 * 60);
       });
     },
     payCancel() {
@@ -130,6 +173,7 @@ export default {
 .payType {
   height: 80px;
   line-height: 80px;
+  display: flex;
 
   .icon-weixinzhifu {
     font-size: 24px;
@@ -143,6 +187,17 @@ export default {
   }
 }
 
+.paySelectType {
+  margin-top: 20px;
+  margin-bottom: 20px;
+}
+
+.payupload {
+  display: flex;
+
+  .uploadBtn {}
+}
+
 .payImg {
   width: 100%;
   display: flex;