zhangqi
/
kuailelunwen_new_houtai
1
0
Fork 0
Code Issues Pull Requests Projects Releases Wiki Activity
Browse Source

证书配置

master
rainbro 3 days ago
parent
6fca48b85c
commit
d93cdaaf89
1 changed files with 117 additions and 92 deletions
Whitespace
Show all changes Ignore whitespace when comparing lines Ignore changes in amount of whitespace Ignore changes in whitespace at EOL
Split View
Diff Options
Show Stats Download Patch File Download Diff File
  1. 209
      src/views/agent/payCertSetting.vue

209
src/views/agent/payCertSetting.vue
View File

@ -3,29 +3,44 @@
<!-- page content -->
<div class="site-setting-wrap min-flex-right">
<div class="siteMessage flex-common mt12" id="siteMessage1">
<h3>管理证书</h3>
<h3 class="mb12">管理证书</h3>
<div class="beforeNotice">
<span class="flex"> <img src="@/assets/site/siteSemInfo_Icon.svg" alt="" style="margin-right: 5px;"> API证书获取：
<a href="https://pay.weixin.qq.com/" class="flex" target="_blank"><img style="margin-right: 5px;"
src="@/assets/site/form_linkActive.svg" alt="">前往微信商户平台</a>> 账户中心 > API安全，申请API证书。
</span>
</div>
<el-form>
<div class="flex-wrap">
<div class="flex-left">
<div class="uploadwrap">
<label class="flex">上传 apiclient_cert.pem 证书<img class="ml-4"
<label class="flex upload-title">上传 apiclient_cert.pem 证书<img class="ml-4"
src="@/assets/require.svg" /></label>
<el-upload class="flex mt12" accept=".jpg,.png" ref="upload"
action="https://jsonplaceholder.typicode.com/posts/" :on-preview="handlePreview"
:on-remove="handleRemove" :file-list="fileList" :auto-upload="false"
:show-file-list="true">
<el-button class="flex" slot="trigger" size="small" type="primary">选取文件</el-button>
<el-upload class="upload-demo" :on-change="handleAvatarChange" action="#" :multiple="false"
:limit="Number(1)" ref="avatorUpload"
:auto-upload="false">
<GuipButton class="upload-button" slot="trigger" type="ignore" :btnstyle="{ width: '118px' }">
<i class="bgImg"></i>选择文件</GuipButton>
</el-upload>
<p class="avatar-desc">支持 jpg、png 格式，大小不超过 2MB </p>
<p class="uploaded" v-if="payinfo.cert_uploaded">已上传</p>
</div>
</div>
<div class="flex-line"></div>
<div class="flex-right">
<p class="flex-left-desc">微信客服</p>
<div class="uploadwrap">
<label class="flex upload-title">上传 apiclient_key.pem 证书<img class="ml-4" src="@/assets/require.svg" /></label>
<el-upload class="upload-demo" :on-change="handleAvatarChange1" action="#" :multiple="false"
:limit="Number(1)" ref="avatorUpload"
:auto-upload="false">
<GuipButton class="upload-button" slot="trigger" type="ignore" :btnstyle="{ width: '118px' }">
<i class="bgImg"></i>选择文件</GuipButton>
</el-upload>
<p class="uploaded" v-if="payinfo.key_uploaded">已上传</p>
</div>
</div>
</div>
<GroupFormBtns @cancel="cancleUpdateSiteInfo()" @confirm="submitUpload" />
<GroupFormBtns @cancel="cancleUpdateSiteInfo()" @confirm="saveCert" />
</el-form>
</div>
<div class="siteMessage flex-common mt-18" id="siteMessage2">
@ -33,16 +48,14 @@
<el-form>
<div class="flex-wrap">
<div class="flex-left">
<div class="beforeNotice">
<div class="setting">
<div class="flex justify-content-space-between">
<h3 class="flex gap8" style="margin: 0 0 0 0;">功能开关</h3>
<h4 class="flex">功能开关</h4>
<!-- :active-value="1" :inactive-value="0"（关闭） 加冒号表示数字格式 -->
<!-- active-value="1" inactive-value="0"（关闭） 不加冒号表示字符串 -->
<!-- 传入的modelvalue 为数字 0 或者 1 -->
<GuipSwitch :modelValue="payIsAutoRefund" :active-value="1" :inactive-value="0"
@change="updatePayAutoRefund(payinfo)" activeText="开启" inactiveText="关闭">
</GuipSwitch>
<GuipSwitch :modelValue="payIsAutoRefund" :active-value="1" :inactive-value="0" @change="updatePayAutoRefund(payinfo)" activeText="开启" inactiveText="关闭"></GuipSwitch>
</div>
<p class="ml-23 flex gray">开启后，遇到退单的情况，平台尽量在联系您并同意的情况下操作退款</p>
</div>
@ -55,14 +68,30 @@
<el-form class="tcpr-wrap">
<el-tabs v-model="profitShareTab" @tab-click="handleClick">
<el-tab-pane label="分账设置" name="profit_share_setting">
<div class="beforeNotice">
<!-- <div class="beforeNotice">
<h4 class="flex"> <img src="@/assets/site/siteSemInfo_Icon.svg" alt=""> 前期准备事项</h4>
<a href="https://pay.weixin.qq.com/" class="flex" target="_blank"><img
src="@/assets/site/form_linkActive.svg" alt="">前往微信商户平台</a>
<p class="mt12 flex">1.开通分账功能：微信商户平台 > 产品中心 > 我的产品，支付扩展工具中开通分账产品。</p>
<p class="mt10 flex">2.分账接收设置：登录商户平台 > 交易中心 > 分账接收设置 > 分账回退设置，开启分账回退。</p>
</div>
</div> -->
<PromptText text="前期准备事项" :type="1" class="beforeNotice mt20">
<template #next_desc>
<p class="flex">
<a href="https://pay.weixin.qq.com/" class="flex" target="_blank"><img
src="@/assets/site/form_linkActive.svg" alt="">前往微信商户平台</a>
</p>
</template>
<template #desc>
<p class="mt12 flex">
1.开通分账功能：微信商户平台 > 产品中心 > 我的产品，支付扩展工具中开通分账产品。
</p>
<p class="mt10 flex">
2.分账接收设置：登录商户平台 > 交易中心 > 分账接收设置 > 分账回退设置，开启分账回退。
</p>
</template>
</PromptText>
<div class="semBidWrap">
<div class="baidu-wrap bidWrap">
@ -142,10 +171,11 @@
</div>
<GuipDialog type="normal" :dialogVisible="dialogVisibleCert" title="配置商户证书" :show-close-button="false"
:show-cancel-button="true" cancelText="取消" confirmText="确定" @confirm="saveCert(payinfo)"
:show-cancel-button="true" cancelText="取消" confirmText="确定" @confirm="saveCert()"
@cancel="handleCancelConfig" @dialogVisibleChange="dialogVisibleChange">
<div class="config-offline-wrap">
<el-form>
<p class="mb24">微信商户平台> 账户中心 > API安全，申请API证书。</p>
<!-- accept=".jpg,.png" -->
<div class="uploadwrap">
<label class="flex upload-title">1. apiclient_cert.pem 证书<img class="ml-4"
@ -159,9 +189,8 @@
</div>
<div class="uploadwrap mt-18">
<label class="flex upload-title">2. apiclient_key.pem 证书<img class="ml-4"
src="@/assets/require.svg" /></label>
<el-upload class="upload-demo" :on-change="handleAvatarChange1" action="#" :multiple="false"
<label class="flex upload-title">2. apiclient_key.pem 证书<img class="ml-4" src="@/assets/require.svg" /></label>
<el-upload class="upload-demo" :on-change="handleAvatarChange1" action="#" :multiple="false"
:limit="Number(1)" ref="avatorUpload"
:auto-upload="false">
<GuipButton class="upload-button" slot="trigger" type="ignore" :btnstyle="{ width: '118px' }">
@ -216,6 +245,7 @@ import GuipButton from '@/components/GuipButton.vue'
import GuipDialog from '@/components/GuipDialog.vue'
import GuipInput from '@/components/GuipInput.vue'
import GuipSelect from '@/components/GuipSelect.vue'
import PromptText from '@/components/PromptText.vue'
// 收款方式
const PAY_TYPE_TAOBAO = 0; // 淘宝
@ -235,6 +265,7 @@ export default {
GuipDialog,
GuipInput,
GuipSelect,
PromptText,
},
data() {
return {
@ -407,8 +438,7 @@ export default {
}
},
// 确认按钮事件
saveCert(row) {
this.formData.set('apiv3',row.apiv3)
saveCert() {
// for(let [key,value] of this.formData){
// console.log(key,value,'=====key');
// }
@ -430,7 +460,7 @@ export default {
}).catch(error => {
console.error(error, 'error')
})
this.dialogVisibleApiv3 = false;
this.dialogVisibleCert = false;
},
saveApiv3(row) {
this.$http('POST', '/agentnew/ajax_save_apiv3', {
@ -529,73 +559,12 @@ a {
.justify-content-space-between {
justify-content: space-between;
align-items: center;
}
.upload-demo{
margin-top: 12px;
}
.beforeNotice {
h4 {
margin: 0;
gap: 8px;
justify-content: space-between;
}
margin-bottom: 18px;
text-align: left;
box-sizing: border-box;
padding: 20px 14px;
border-radius: 4px;
/* middle/middle_grey_0 */
background: #FAFAFA;
div {
margin-top: 2px;
padding-left: 23px;
p {
color: #8A9099;
}
}
p {
color: #1E2226;
i {
font-style: normal;
}
&:last-child {
display: flex;
align-items: stretch;
b {
font-weight: normal;
color: #8A9099;
display: inline-flex;
img {
margin-left: 4px;
}
}
}
}
a {
text-decoration: none;
color: #006AFF;
margin-right: 10px;
img {
margin-left: 5px;
margin-right: 5px;
}
}
}
.siteMessage {
border-radius: 4px;
transition: all .5s;
@ -761,9 +730,9 @@ lable {
margin-top: 2px;
padding-left: 23px;
p {
color: #8A9099;
}
// p {
// color: #8A9099;
// }
}
@ -796,8 +765,8 @@ lable {
margin-right: 10px;
img {
margin-left: 12px;
margin-right: 12px;
margin-left: 5px;
margin-right: 5px;
}
}
}
@ -829,4 +798,60 @@ lable {
letter-spacing: 0.08em;
color: #23242B;
}
.uploaded {
color: #606266;
font-size: 12px;
margin-top:10px;
}
.setting {
h4 {
margin: 0;
gap: 8px;
justify-content: space-between;
}
margin-bottom: 18px;
text-align: left;
box-sizing: border-box;
padding: 20px 14px;
border-radius: 4px;
/* middle/middle_grey_0 */
background: #FAFAFA;
div {
margin-top: 2px;
padding-left: 23px;
p {
color: #8A9099;
}
}
p {
color: #1E2226;
i {
font-style: normal;
}
&:last-child {
display: flex;
align-items: stretch;
b {
font-weight: normal;
color: #8A9099;
display: inline-flex;
img {
margin-left: 4px;
}
}
}
}
}
</style>
Write Preview
Loading…
Cancel
Save