浏览代码

Merge branch 'hcb' of SH-Arbitrate/Arbitrate-Frontend into dev

hanchaobo 2 年前
父节点
当前提交
0d75e82f0c
共有 2 个文件被更改,包括 66 次插入11 次删除
  1. 2
    2
      src/components/ImageUpload/index.vue
  2. 64
    9
      src/views/caseManagement/components/payDialog.vue

+ 2
- 2
src/components/ImageUpload/index.vue 查看文件

51
     // 图片数量限制
51
     // 图片数量限制
52
     limit: {
52
     limit: {
53
       type: Number,
53
       type: Number,
54
-      default: 5,
54
+      default: 1,
55
     },
55
     },
56
     // 大小限制(MB)
56
     // 大小限制(MB)
57
     fileSize: {
57
     fileSize: {
58
        type: Number,
58
        type: Number,
59
-      default: 5,
59
+      // default: 5,
60
     },
60
     },
61
     // 文件类型, 例如['png', 'jpg', 'jpeg']
61
     // 文件类型, 例如['png', 'jpg', 'jpeg']
62
     fileType: {
62
     fileType: {

+ 64
- 9
src/views/caseManagement/components/payDialog.vue 查看文件

1
 <template>
1
 <template>
2
   <div>
2
   <div>
3
-    <el-dialog :title="payTitle" :visible.sync="openPay" v-if="openPay" width="800px" append-to-body
3
+    <el-dialog :title="payTitle" :visible="openPay" @close="payCancel" width="800px" append-to-body
4
       :destroy-on-close="true" center>
4
       :destroy-on-close="true" center>
5
       <el-descriptions title="订单信息">
5
       <el-descriptions title="订单信息">
6
         <el-descriptions-item label="案件编号">{{
6
         <el-descriptions-item label="案件编号">{{
27
           form.arbitratClaims
27
           form.arbitratClaims
28
         }}</el-descriptions-item>
28
         }}</el-descriptions-item>
29
       </el-descriptions>
29
       </el-descriptions>
30
-      <div class="payType">
30
+      <div class="paySelectType">
31
+        <el-radio-group v-model="paySelect" @input="changPayType">
32
+          <el-radio :label="0">线上支付</el-radio>
33
+          <el-radio :label="1">线下支付</el-radio>
34
+        </el-radio-group>
35
+      </div>
36
+      <div class="payupload">
37
+        <span>上传支付凭证:</span>
38
+        <div class="uploadBtn">
39
+          <el-upload class="upload-demo" ref="upload" action="https://jsonplaceholder.typicode.com/posts/"
40
+            :on-preview="handlePreview" :on-remove="handleRemove" :on-change="beforeUpload" :file-list="fileList"
41
+            :auto-upload="false">
42
+            <el-button slot="trigger" size="small" type="primary">选取文件</el-button>
43
+            <!-- <el-button style="margin-left: 10px;" size="small" type="success" @click="submitUpload">上传到服务器</el-button> -->
44
+            <div slot="tip" class="el-upload__tip">只能上传jpg/png文件,且不超过500kb</div>
45
+          </el-upload>
46
+        </div>
47
+      </div>
48
+      <div class="payType" v-if="paySelect == 0">
31
         <span>请选择支付方式:</span>
49
         <span>请选择支付方式:</span>
32
         <i class="iconfont icon-weixinzhifu" @click="pay(0)"></i>
50
         <i class="iconfont icon-weixinzhifu" @click="pay(0)"></i>
33
         <i class="iconfont icon-zhifubao" @click="pay(1)"></i>
51
         <i class="iconfont icon-zhifubao" @click="pay(1)"></i>
38
       <div class="payTitle">{{ payMain }}</div>
56
       <div class="payTitle">{{ payMain }}</div>
39
       <div slot="footer" class="dialog-footer">
57
       <div slot="footer" class="dialog-footer">
40
         <el-button @click="payCancel" class="endbutton"><span>取 消</span></el-button>
58
         <el-button @click="payCancel" class="endbutton"><span>取 消</span></el-button>
59
+        <el-button @click="submitUpload" class="endbutton"><span>确认缴费</span></el-button>
41
       </div>
60
       </div>
42
     </el-dialog>
61
     </el-dialog>
43
   </div>
62
   </div>
46
 <script>
65
 <script>
47
 import { casePay, selectCaseApplicationConfirm } from "@/api/pay/pay";
66
 import { casePay, selectCaseApplicationConfirm } from "@/api/pay/pay";
48
 import QRCode from "qrcodejs2";
67
 import QRCode from "qrcodejs2";
68
+import { getToken } from "@/utils/auth";
49
 export default {
69
 export default {
50
   props: ["openPay", "payTitle", "form", "payForm", "queryParams"],
70
   props: ["openPay", "payTitle", "form", "payForm", "queryParams"],
51
   data() {
71
   data() {
53
       // key: value
73
       // key: value
54
       // 支付文字
74
       // 支付文字
55
       payMain: "",
75
       payMain: "",
56
-      timer:null
76
+      timer: null,
77
+      paySelect: 0,//支付线上/线下
78
+      fileList: []
57
     };
79
     };
58
   },
80
   },
59
   methods: {
81
   methods: {
82
+    //选择支付方式(线上,线下)
83
+    changPayType(data) {
84
+      console.log(data, "PPPPPPPPPPPPP");
85
+    },
86
+    beforeUpload(flie, fileList) {
87
+      console.log(flie, fileList, "PPPPPPPPPPPPPP");
88
+      this.fileList = fileList;
89
+    },
90
+    submitUpload() {
91
+      if (this.fileList.length < 1) {
92
+        this.$modal.msgError("请上传缴费凭证");
93
+        return
94
+      }
95
+      this.$refs.upload.submit();
96
+    },
97
+    handleRemove(file, fileList) {
98
+      console.log(file, fileList);
99
+    },
100
+    handlePreview(file) {
101
+      console.log(file);
102
+    },
60
     // 生成二维码
103
     // 生成二维码
61
     qrcode(url) {
104
     qrcode(url) {
62
       // 前端根据 URL 生成微信支付二维码
105
       // 前端根据 URL 生成微信支付二维码
73
     selectCaseApplicationConfirmFn(parms) {
116
     selectCaseApplicationConfirmFn(parms) {
74
       selectCaseApplicationConfirm(parms).then(res => {
117
       selectCaseApplicationConfirm(parms).then(res => {
75
         console.log(res, this.form, "KKKKKKKKKKKKKKKKKKKK");
118
         console.log(res, this.form, "KKKKKKKKKKKKKKKKKKKK");
76
-        if(res && res.data && res.data.paymentStatus == 1){
119
+        if (res && res.data && res.data.paymentStatus == 1) {
77
           clearInterval(this.timer);
120
           clearInterval(this.timer);
78
           // this.openPay = false;
121
           // this.openPay = false;
79
           this.payCancel()
122
           this.payCancel()
80
           this.$message({
123
           this.$message({
81
-          message: "缴费成功",
82
-          type: "success",
83
-        });
84
-        this.$emit("getcaseApply",this.queryParams);
124
+            message: "缴费成功",
125
+            type: "success",
126
+          });
127
+          this.$emit("getcaseApply", this.queryParams);
85
         }
128
         }
86
       })
129
       })
87
     },
130
     },
115
         }, 3000);
158
         }, 3000);
116
         setTimeout(() => {
159
         setTimeout(() => {
117
           clearInterval(this.timer);
160
           clearInterval(this.timer);
118
-        }, 1000*60);
161
+        }, 1000 * 60);
119
       });
162
       });
120
     },
163
     },
121
     payCancel() {
164
     payCancel() {
130
 .payType {
173
 .payType {
131
   height: 80px;
174
   height: 80px;
132
   line-height: 80px;
175
   line-height: 80px;
176
+  display: flex;
133
 
177
 
134
   .icon-weixinzhifu {
178
   .icon-weixinzhifu {
135
     font-size: 24px;
179
     font-size: 24px;
143
   }
187
   }
144
 }
188
 }
145
 
189
 
190
+.paySelectType {
191
+  margin-top: 20px;
192
+  margin-bottom: 20px;
193
+}
194
+
195
+.payupload {
196
+  display: flex;
197
+
198
+  .uploadBtn {}
199
+}
200
+
146
 .payImg {
201
 .payImg {
147
   width: 100%;
202
   width: 100%;
148
   display: flex;
203
   display: flex;