3 changed files with 642 additions and 1 deletions
@ -0,0 +1,629 @@ |
|||
<template> |
|||
<div class="main-content12"> |
|||
<!-- page content --> |
|||
<div class="site-setting-wrap min-flex-right"> |
|||
<div class="siteMessage flex-common mt12" id="siteMessage1"> |
|||
<h3>管理证书</h3> |
|||
<el-form> |
|||
<div class="flex-wrap"> |
|||
<div class="flex-left"> |
|||
<div class="uploadwrap"> |
|||
<label class="flex">上传 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> |
|||
<p class="avatar-desc">支持 jpg、png 格式，大小不超过 2MB </p> |
|||
</div> |
|||
</div> |
|||
<div class="flex-line"></div> |
|||
<div class="flex-right"> |
|||
<p class="flex-left-desc">微信客服</p> |
|||
</div> |
|||
</div> |
|||
<GroupFormBtns @cancel="cancleUpdateSiteInfo()" @confirm="submitUpload" /> |
|||
</el-form> |
|||
</div> |
|||
<div class="siteMessage flex-common mt-18" id="siteMessage2"> |
|||
<h3>平台退款</h3> |
|||
<el-form> |
|||
<div class="flex-wrap"> |
|||
<div class="flex-left"> |
|||
<div class="beforeNotice"> |
|||
<div class="flex justify-content-space-between"> |
|||
<h3 class="flex gap8" style="margin: 0 0 0 0;">功能开关</h3> |
|||
|
|||
<!-- :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> |
|||
</div> |
|||
<p class="ml-23 flex gray">开启后，遇到退单的情况，平台尽量在联系您并同意的情况下操作退款</p> |
|||
</div> |
|||
</div> |
|||
</div> |
|||
</el-form> |
|||
</div> |
|||
<div class="siteMessage flex-common mt-18" id="siteMessage3"> |
|||
<h3>分账管理</h3> |
|||
<el-form class="tcpr-wrap"> |
|||
<el-tabs v-model="profitShareTab" @tab-click="handleClick"> |
|||
<el-tab-pane label="分账设置" name="profit_share_setting"> |
|||
<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 class="semBidWrap"> |
|||
<div class="baidu-wrap bidWrap"> |
|||
|
|||
<div class="bidwrap-item"> |
|||
<div class="biditemMast mb12 flex-between"> |
|||
<div class="bidwrap-item-top flex"> |
|||
<img class="bid-item-img" src="@/assets/site/step_1.png" alt=""> |
|||
<div class="top-right column"> |
|||
<b>配置商户证书</b> |
|||
<p>微信商户平台> 账户中心 > API安全，申请API证书。</p> |
|||
</div> |
|||
</div> |
|||
<!-- <div class="flex" v-if="siteInfo.bing_client_id&&siteInfo.bing_developer_token"> |
|||
<span :class="'yesSet'">已设置</span> |
|||
<GuipButton type="normal" :btnstyle="{ width: '126px', height: '38px' }" |
|||
@click="manageDialog('configAppInfo')">管理设置</GuipButton> |
|||
</div> |
|||
<div class="flex" v-else> |
|||
<span :class="'notSet'">未设置</span> |
|||
<GuipButton type="normal" :btnstyle="{ width: '126px', height: '38px' }" |
|||
@click="manageDialog('configAppInfo')">立即设置</GuipButton> |
|||
</div> --> |
|||
</div> |
|||
<div class="biditemMast mb12 flex-between"> |
|||
<div class="bidwrap-item-top flex"> |
|||
<img class="bid-item-img" src="@/assets/site/step_2.png" alt=""> |
|||
<div class="top-right column"> |
|||
<b>设置 APIv3 密钥</b> |
|||
<p class="flex">请在微信商户平台的"账户中心 > API安全"中设置APIv3秘钥。</p> |
|||
</div> |
|||
</div> |
|||
<div class="flex" v-if="payinfo.apiv3"> |
|||
<span :class="'yesSet'">已设置</span> |
|||
<GuipButton type="primary" :btnstyle="{ width: '126px', height: '38px' }" |
|||
@click="showDialog('apiv3')">管理设置</GuipButton> |
|||
</div> |
|||
<div class="flex" v-else> |
|||
<span :class="'notSet'">未设置</span> |
|||
<GuipButton type="primary" :btnstyle="{ width: '126px', height: '38px' }" |
|||
@click="showDialog('apiv3')">立即设置</GuipButton> |
|||
</div> |
|||
</div> |
|||
<div class="biditemMast mb12 flex-between"> |
|||
<div class="bidwrap-item-top flex"> |
|||
<img class="bid-item-img" src="@/assets/site/step_3.png" alt=""> |
|||
<div class="top-right column"> |
|||
<b>添加分账接收方</b> |
|||
<p>接收方比例：30%（当前仅支持给一个商户分账，最大30%） </p> |
|||
</div> |
|||
</div> |
|||
<div class="flex" v-if="profitShareInfo.receiver_name"> |
|||
<span :class="'yesSet'">已设置</span> |
|||
<GuipButton type="primary" :btnstyle="{ width: '126px', height: '38px' }" |
|||
@click="showDialog('profit_share_receivers')">立即设置</GuipButton> |
|||
</div> |
|||
<div class="flex" v-else> |
|||
<span :class="'notSet'">未设置</span> |
|||
<GuipButton type="primary" :btnstyle="{ width: '126px', height: '38px' }" |
|||
@click="showDialog('profit_share_receivers')">立即设置</GuipButton> |
|||
</div> |
|||
</div> |
|||
</div> |
|||
</div> |
|||
</div> |
|||
</el-tab-pane> |
|||
<el-tab-pane label="分账记录" name="profit_share_list">分账记录</el-tab-pane> |
|||
</el-tabs> |
|||
</el-form> |
|||
</div> |
|||
</div> |
|||
<GuipDialog type="normal" :dialogVisible="dialogVisibleApiv3" title="配置应用信息" :show-close-button="false" |
|||
:show-cancel-button="true" cancelText="取消" confirmText="确定" @confirm="saveApiv3(payinfo)" |
|||
@cancel="handleCancelConfig" @dialogVisibleChange="dialogVisibleChange"> |
|||
<div class="config-offline-wrap"> |
|||
<el-form> |
|||
<p class="flex mb-24">请在微信商户平台的"账户中心 > API安全"中设置APIv3秘钥。</p> |
|||
<GuipInput ref="GuipInput" v-model="payinfo.apiv3" placeholder="请输入APIv3秘钥" /> |
|||
</el-form> |
|||
</div> |
|||
</GuipDialog> |
|||
<GuipDialog type="normal" :dialogVisible="dialogVisibleProfitShare" title="添加分账接收方" :show-close-button="false" |
|||
:show-cancel-button="true" cancelText="取消" confirmText="确定" @confirm="saveProfitShareReceivers(payinfo)" |
|||
@cancel="handleCancelConfig" @dialogVisibleChange="dialogVisibleChange"> |
|||
<div class="config-offline-wrap"> |
|||
<el-form> |
|||
<p class="flex mb-24">接收方比例：30%（当前仅支持给一个商户分账，最大30%） </p> |
|||
<GuipInput ref="GuipInput" column="column" required label="1.接收方名称" desc="商户全称，小微商户或个体户，填开户人姓名" |
|||
v-model="profitShareInfo.receiver_name" prop="receiver_name" placeholder="请输入分账接收方名称" /> |
|||
<GuipInput ref="GuipInput" column="column" required label="2.接收方账号" desc="商户号" |
|||
v-model="profitShareInfo.receiver_account" prop="receiver_account" placeholder="请输入分账接收方账号" /> |
|||
<GuipSelect v-model="profitShareInfo.relation_type" clearable label="3.接收方关系" :default-value="profitShareInfo.relation_type" |
|||
prop="card" :options="profitShareReceiversRelationType" valueKey="id1" labelKey="id2" /> |
|||
</el-form> |
|||
</div> |
|||
</GuipDialog> |
|||
</div> |
|||
|
|||
</template> |
|||
<script> |
|||
import store from '@/store'; |
|||
import { mapState } from 'vuex'; |
|||
import GuipSwitch from '@/components/GuipSwitch.vue'; |
|||
import GroupFormBtns from '@/components/GroupFormBtns.vue' |
|||
import GuipButton from '@/components/GuipButton.vue' |
|||
import GuipDialog from '@/components/GuipDialog.vue' |
|||
import GuipInput from '@/components/GuipInput.vue' |
|||
import GuipSelect from '@/components/GuipSelect.vue' |
|||
|
|||
// 收款方式 |
|||
const PAY_TYPE_TAOBAO = 0; // 淘宝 |
|||
const PAY_TYPE_WEIXIN = 2; // 微信 |
|||
const PAY_TYPE_ALIPAY = 3; // 支付宝 |
|||
const PAY_TYPE_JINGDONG = 4; // 京东 |
|||
const PAY_TYPE_PDD = 11; // 拼多多 |
|||
|
|||
export default { |
|||
// 收款方式设置 |
|||
name: '', |
|||
props: [''], |
|||
components: { |
|||
GuipSwitch, |
|||
GroupFormBtns, |
|||
GuipButton, |
|||
GuipDialog, |
|||
GuipInput, |
|||
GuipSelect, |
|||
}, |
|||
data() { |
|||
return { |
|||
// AUTH |
|||
token: 'eyJ0eXAiOiJKV1QiLCJhbGciOiJIUzI1NiJ9.eyJpYXQiOjE3NTAwNTM3MjQsIm5iZiI6MTc1MDA1MzcyNCwiZXhwIjoxNzUyNjQ1NzI0LCJ1c2VyIjoic3VidXNlciIsImxvZ2luX3R5cGUiOjAsImFpZCI6IjEifQ.xyIqBLelB-k6jCifgRevBJTyg_Qrm6m1e4OcHhOpepU', |
|||
payinfo: [], |
|||
payType: -1, |
|||
payIsAutoRefund: -1, |
|||
paySvg: '', |
|||
// 收款方式 |
|||
payTypeTaoBao: PAY_TYPE_TAOBAO, |
|||
payTypeWeixin: PAY_TYPE_WEIXIN, |
|||
payTypeAlipay: PAY_TYPE_ALIPAY, |
|||
payTypeJingdong: PAY_TYPE_JINGDONG, |
|||
payTypePdd: PAY_TYPE_PDD, |
|||
confirmText: '保存', |
|||
|
|||
fileList: [], |
|||
|
|||
profitShareTab: 'profit_share_setting', |
|||
dialogVisibleApiv3: false, |
|||
dialogVisibleProfitShare: false, |
|||
|
|||
profitShareInfo: [], |
|||
profitShareReceiversRelationType: [], |
|||
} |
|||
}, |
|||
computed: { |
|||
...mapState(['pageTitle']) // 从Vuex映射showSidebar状态到组件的计算属性中 |
|||
}, |
|||
created() { |
|||
store.commit('SET_CUSTOMIZE', true); |
|||
store.commit('SET_SLIDER_MENU', 'paySettingData'); |
|||
}, |
|||
mounted() { |
|||
store.commit('SET_PAGETITLE', '支付授权'); |
|||
|
|||
this.getPayment(); |
|||
this.getProfitShareInfo(); |
|||
}, |
|||
methods: { |
|||
getPayment() { |
|||
this.$http('POST', '/agentnew/ajax_get_payinfo', { |
|||
payid: this.$route.query.payid, |
|||
},{ |
|||
headers:{ |
|||
'Auth': this.token |
|||
} |
|||
}).then(response => { |
|||
this.$nextTick(() => { |
|||
this.payinfo = response.data |
|||
this.payType = response.data.type |
|||
this.payIsAutoRefund = Number(response.data.is_auto_refund) |
|||
this.paySvg = require('@/assets/pay/pay_'+this.payType+'.svg') |
|||
if (this.payType == PAY_TYPE_TAOBAO || this.payType == PAY_TYPE_JINGDONG) { |
|||
this.confirmText = '去授权'; |
|||
} else if (this.payType == PAY_TYPE_PDD) { |
|||
this.confirmText = '同步授权'; |
|||
} |
|||
}) |
|||
}).catch(error => { |
|||
console.error(error, 'error') |
|||
}) |
|||
}, |
|||
getProfitShareInfo() { |
|||
this.$http('POST', '/agentnew/ajax_get_profit_share_info', { |
|||
pid: this.$route.query.payid, |
|||
},{ |
|||
headers:{ |
|||
'Auth': this.token |
|||
} |
|||
}).then(response => { |
|||
this.$nextTick(() => { |
|||
this.profitShareReceiversRelationType = response.data.receivers_relation_type |
|||
if (response.status) { |
|||
this.profitShareStatus = response.data |
|||
|
|||
} |
|||
}) |
|||
}).catch(error => { |
|||
console.error(error, 'error') |
|||
}) |
|||
}, |
|||
updatePayAutoRefund(row) { |
|||
this.$http('POST', '/agentnew/ajax_setting_auto_refund', { |
|||
payid: this.$route.query.payid, |
|||
status: row.is_auto_refund==1 ? 0 : 1, |
|||
}, { |
|||
headers: { |
|||
'Auth': this.token |
|||
} |
|||
}).then(response => { |
|||
this.$nextTick(() => { |
|||
if (response.status) { |
|||
this.$Message.success(response.info); |
|||
this.getPayment() |
|||
} else { |
|||
this.$Message.error(response.info); |
|||
} |
|||
}) |
|||
}).catch(error => { |
|||
console.error(error, 'error') |
|||
}) |
|||
}, |
|||
cancle() { |
|||
this.getPayment(); |
|||
}, |
|||
submitUpload() { |
|||
this.$refs.upload.submit(); |
|||
}, |
|||
handleRemove(file, fileList) { |
|||
console.log(file, fileList); |
|||
}, |
|||
handlePreview(file) { |
|||
console.log(file); |
|||
}, |
|||
handleClick(tab, event) { |
|||
console.log(tab, event); |
|||
}, |
|||
showDialog(type) { |
|||
if (type == 'apiv3') { |
|||
this.dialogVisibleApiv3 = true; |
|||
this.dialogVisibleProfitShare = false; |
|||
} else if (type == 'profit_share_receivers') { |
|||
this.dialogVisibleProfitShare = true; |
|||
this.dialogVisibleApiv3 = false; |
|||
} |
|||
}, |
|||
// 确认按钮事件 |
|||
saveApiv3(row) { |
|||
this.$http('POST', '/agentnew/ajax_save_apiv3', { |
|||
pid: this.$route.query.payid, |
|||
apiv3: row.apiv3 |
|||
}, { |
|||
headers: { |
|||
'Auth': this.token |
|||
} |
|||
}).then(response => { |
|||
this.$nextTick(() => { |
|||
if (response.status) { |
|||
this.$Message.success(response.info); |
|||
} else { |
|||
this.$Message.error(response.info); |
|||
} |
|||
}) |
|||
}).catch(error => { |
|||
console.error(error, 'error') |
|||
}) |
|||
|
|||
this.dialogVisibleApiv3 = false; |
|||
}, |
|||
// 取消按钮事件 |
|||
handleCancelConfig() { |
|||
this.dialogVisibleApiv3 = false; |
|||
}, |
|||
dialogVisibleChange(data) { |
|||
console.log(data, 'data098908090'); |
|||
}, |
|||
} |
|||
} |
|||
</script> |
|||
<style lang="scss" scoped> |
|||
a { |
|||
text-decoration: none; |
|||
color: #006AFF; |
|||
} |
|||
|
|||
.gray { |
|||
color: #626573 !important; |
|||
} |
|||
|
|||
.mt-18 { |
|||
margin-top: 18px; |
|||
} |
|||
.ml-23 { |
|||
margin-left: 23px; |
|||
} |
|||
|
|||
.justify-content-space-between { |
|||
justify-content: space-between; |
|||
} |
|||
|
|||
.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; |
|||
border: 1px solid transparent; |
|||
} |
|||
|
|||
.siteMessage h3 { |
|||
font-size: 14px; |
|||
font-weight: bold; |
|||
line-height: normal; |
|||
letter-spacing: 0.08em; |
|||
color: #1E2226; |
|||
} |
|||
|
|||
.site-setting-wrap { |
|||
width: 100%; |
|||
} |
|||
|
|||
|
|||
.upload-wrap { |
|||
display: grid; |
|||
justify-items: start; |
|||
} |
|||
|
|||
.uploadwrap { |
|||
text-align: left; |
|||
} |
|||
|
|||
lable { |
|||
font-size: 14px; |
|||
font-weight: normal; |
|||
line-height: normal; |
|||
letter-spacing: 0.08em; |
|||
color: #1E2226; |
|||
} |
|||
.ml-4 { |
|||
margin-left: 4px; |
|||
} |
|||
.mb-24 { |
|||
margin-bottom: 24px; |
|||
} |
|||
.mb-30 { |
|||
margin-bottom: 30px; |
|||
} |
|||
|
|||
.tcpr-wrap { |
|||
.bidwrap-item { |
|||
padding: 0 !important; |
|||
background: transparent !important; |
|||
|
|||
.biditemMast { |
|||
background: #fff; |
|||
padding: 24px 16px; |
|||
} |
|||
} |
|||
|
|||
.semBidWrap { |
|||
padding-bottom: 24rpx; |
|||
} |
|||
} |
|||
.semBidWrap { |
|||
background: #FAFAFA; |
|||
padding: 18px 14px; |
|||
box-sizing: border-box; |
|||
|
|||
.el-form-item { |
|||
margin-bottom: 0; |
|||
} |
|||
|
|||
.close-bid { |
|||
color: #626573; |
|||
font-size: 14px; |
|||
font-weight: normal; |
|||
transition: all .3s; |
|||
|
|||
&:hover { |
|||
opacity: 0.7; |
|||
} |
|||
|
|||
img { |
|||
width: 16px; |
|||
height: 16px; |
|||
margin-left: 6px; |
|||
} |
|||
} |
|||
|
|||
|
|||
.bidWrap { |
|||
.bidwrap-item { |
|||
padding: 24px 16px; |
|||
box-sizing: border-box; |
|||
border-radius: 8px; |
|||
background: #FFFFFF; |
|||
|
|||
|
|||
.bid-item-img { |
|||
width: 32px; |
|||
height: 32px; |
|||
margin-right: 22px; |
|||
} |
|||
|
|||
.bidwrap-item-top { |
|||
.top-right { |
|||
p { |
|||
margin-top: 10px; |
|||
} |
|||
|
|||
a { |
|||
text-decoration: none; |
|||
color: #006AFF; |
|||
|
|||
img { |
|||
margin-right: 10px; |
|||
} |
|||
} |
|||
} |
|||
} |
|||
|
|||
.bidwrap-item-bot { |
|||
padding-left: 54px; |
|||
justify-content: flex-end; |
|||
|
|||
} |
|||
|
|||
} |
|||
} |
|||
|
|||
} |
|||
.notSet, |
|||
.yesSet { |
|||
margin-right: 12px; |
|||
color: #FF4D4F; |
|||
} |
|||
|
|||
.yesSet { |
|||
color: #00C261; |
|||
} |
|||
|
|||
|
|||
.beforeNotice { |
|||
h4 { |
|||
margin: 0; |
|||
gap: 8px; |
|||
justify-content: flex-start; |
|||
} |
|||
|
|||
margin-bottom: 18px; |
|||
text-align: left; |
|||
box-sizing: border-box; |
|||
padding: 20px 14px; |
|||
border-radius: 4px; |
|||
/* middle/middle_blue_1 */ |
|||
background: #F2F7FF; |
|||
/* middle/middle_blue_3 */ |
|||
border: 1px solid #BFDAFF; |
|||
|
|||
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: 12px; |
|||
margin-right: 12px; |
|||
} |
|||
} |
|||
} |
|||
</style> |
|||
Loading…
Reference in new issue