71
71
>
72
72
<el-input
73
73
v-model =" formData.config.keyContent"
74
- :autosize =" { minRows: 8 , maxRows: 8 }"
74
+ :autosize =" { minRows: 2 , maxRows: 4 }"
75
75
:style =" { width: '100%' }"
76
76
placeholder =" 请上传 apiclient_cert.p12 证书"
77
77
readonly
78
78
type =" textarea"
79
+ :rows =" 2"
79
80
/>
80
81
</el-form-item >
81
82
<el-form-item label =" " label-width =" 180px" >
108
109
>
109
110
<el-input
110
111
v-model =" formData.config.privateKeyContent"
111
- :autosize =" { minRows: 8 , maxRows: 8 }"
112
+ :autosize =" { minRows: 2 , maxRows: 4 }"
112
113
:style =" { width: '100%' }"
113
114
placeholder =" 请上传 apiclient_key.pem 证书"
114
115
readonly
115
116
type =" textarea"
117
+ :rows =" 2"
116
118
/>
117
119
</el-form-item >
118
120
<el-form-item label =" " label-width =" 180px" prop =" privateKeyContentFile" >
145
147
前往微信商户平台查看证书序列号
146
148
</a >
147
149
</el-form-item >
150
+ <el-form-item label =" public_key.pem 证书" label-width =" 180px" prop =" config.publicKeyContent" >
151
+ <el-input
152
+ v-model =" formData.config.publicKeyContent"
153
+ :autosize =" { minRows: 2, maxRows: 4 }"
154
+ :style =" { width: '100%' }"
155
+ placeholder =" 请上传 public_key.pem 证书"
156
+ readonly
157
+ type =" textarea"
158
+ :rows =" 2"
159
+ />
160
+ </el-form-item >
161
+ <el-form-item label =" " label-width =" 180px" prop =" publicKeyContentFile" >
162
+ <el-upload
163
+ ref =" publicKeyContentFile"
164
+ :before-upload =" pemFileBeforeUpload"
165
+ :http-request =" publicKeyContentUpload"
166
+ :limit =" 1"
167
+ accept =" .pem"
168
+ action =" "
169
+ >
170
+ <el-button type =" primary" >
171
+ <Icon class =" mr-5px" icon =" ep:upload" />
172
+ 点击上传
173
+ </el-button >
174
+ </el-upload >
175
+ </el-form-item >
176
+ <el-form-item label =" 公钥 ID" label-width =" 180px" prop =" config.publicKeyId" >
177
+ <el-input
178
+ v-model =" formData.config.publicKeyId"
179
+ clearable
180
+ placeholder =" 请输入公钥 ID"
181
+ />
182
+ </el-form-item >
183
+ <el-form-item label-width =" 180px" >
184
+ <a
185
+ href =" https://pay.weixin.qq.com/doc/v3/merchant/4012153196"
186
+ target =" _blank"
187
+ >
188
+ 微信支付公钥产品简介及使用说明
189
+ </a >
190
+ </el-form-item >
148
191
</div >
149
192
<el-form-item label =" 备注" label-width =" 180px" prop =" remark" >
150
193
<el-input v-model =" formData.remark" :style =" { width: '100%' }" />
@@ -184,7 +227,9 @@ const formData = ref<any>({
184
227
keyContent: ' ' ,
185
228
privateKeyContent: ' ' ,
186
229
certSerialNo: ' ' ,
187
- apiV3Key: ' '
230
+ apiV3Key: ' ' ,
231
+ publicKeyContent: ' ' ,
232
+ publicKeyId: ' '
188
233
}
189
234
})
190
235
const formRules = {
@@ -201,6 +246,8 @@ const formRules = {
201
246
{ required: true , message: ' 请上传 apiclient_key.pem 证书' , trigger: ' blur' }
202
247
],
203
248
' config.certSerialNo' : [{ required: true , message: ' 请输入证书序列号' , trigger: ' blur' }],
249
+ ' config.publicKeyContent' : [{ required: true , message: ' 请上传 public_key.pem 证书' , trigger: ' blur' }],
250
+ ' config.publicKeyId' : [{ required: true , message: ' 请输入公钥 ID' , trigger: ' blur' }],
204
251
' config.apiV3Key' : [{ required: true , message: ' 请上传 api V3 密钥值' , trigger: ' blur' }]
205
252
}
206
253
const formRef = ref () // 表单 Ref
@@ -267,7 +314,9 @@ const resetForm = (appId, code) => {
267
314
keyContent: ' ' ,
268
315
privateKeyContent: ' ' ,
269
316
certSerialNo: ' ' ,
270
- apiV3Key: ' '
317
+ apiV3Key: ' ' ,
318
+ publicKeyContent: ' ' ,
319
+ publicKeyId: ' '
271
320
}
272
321
}
273
322
formRef .value ?.resetFields ()
@@ -318,4 +367,15 @@ const keyContentUpload = async (event) => {
318
367
}
319
368
readFile .readAsDataURL (event .file ) // 读成 base64
320
369
}
370
+
371
+ /**
372
+ * 读取 public_key.pem 到 publicKeyContent 字段
373
+ */
374
+ const publicKeyContentUpload = async (event ) => {
375
+ const readFile = new FileReader ()
376
+ readFile .onload = (e : any ) => {
377
+ formData .value .config .publicKeyContent = e .target .result
378
+ }
379
+ readFile .readAsText (event .file )
380
+ }
321
381
</script >
0 commit comments