商户系统扫码完成授权;

This commit is contained in:
terrfly 2021-07-16 16:15:05 +08:00
parent 69ad996ed9
commit f802fa0f78
4 changed files with 91 additions and 2 deletions

View File

@ -2,7 +2,7 @@
<a-modal v-model="isShow" title="支付宝子商户扫码授权" @ok="handleOkFunc" @cancel="handleOkFunc">
<div style="text-align: center">
<p>方式1 <br/> 请商户扫码如下二维码, 按提示授权 </p>
<p>方式1 <br/> 请商家登录支付宝APP, 扫描如下二维码, 按提示授权 </p>
<img style="margin-bottom: 10px" :src="apiResData.authQrImgUrl">
<hr/>

View File

@ -235,3 +235,11 @@ export function getWebSocketPrefix () {
return 'ws://' + domain.replace('http://', '')
}
}
/** 查询支付宝授权地址URL **/
export function queryAlipayIsvsubMchAuthUrl (mchAppId) {
return request.request({
url: '/api/mch/payConfigs/alipayIsvsubMchAuthUrls/' + mchAppId,
method: 'GET'
})
}

View File

@ -0,0 +1,60 @@
<template>
<a-modal v-model="isShow" title="支付宝子商户扫码授权" @ok="handleOkFunc" @cancel="handleOkFunc">
<div style="text-align: center">
<p>方式1 <br/> 使用商家账号登录支付宝APP, 扫描如下二维码, 按提示授权 </p>
<img style="margin-bottom: 10px" :src="apiResData.authQrImgUrl">
<hr/>
<p style="margin-top: 10px">
方式2 <br/> <a-button size="small" class="copy-btn" v-clipboard:copy="apiResData.authUrl" v-clipboard:success="onCopySuccess" >点击复制</a-button>
或点击以下链接按照页面提示自主授权
</p>
<a target="_blank" :href="apiResData.authUrl">{{ apiResData.authUrl }}</a>
</div>
</a-modal>
</template>
<script>
import { queryAlipayIsvsubMchAuthUrl } from '@/api/manage'
export default {
props: {
callbackFunc: { type: Function }
},
data () {
return {
isShow: false, // /
appId: '',
apiResData: {}
}
},
created () {
},
methods: {
show: function (appId) { //
this.apiResData = {}
this.appId = appId
const that = this
queryAlipayIsvsubMchAuthUrl(appId).then(res => {
that.apiResData = res
this.isShow = true
})
},
handleOkFunc: function () { //
this.isShow = false
if (this.callbackFunc) {
this.callbackFunc()
}
},
onCopySuccess () {
this.$message.success('复制成功')
}
}
}
</script>

View File

@ -34,6 +34,8 @@
</div>
<!-- 卡片底部操作栏 -->
<div class="jeepay-card-ops">
<a v-if="record.mchType == 2 && record.ifCode == 'alipay' && $access('ENT_MCH_PAY_CONFIG_ADD')" @click="toAlipayAuthPageFunc(record)">扫码授权 <a-icon key="right" type="right" style="fontSize: 13px"></a-icon></a>
<a v-if="$access('ENT_MCH_PAY_CONFIG_ADD')" @click="editPayIfConfigFunc(record)">填写参数 <a-icon key="right" type="right" style="fontSize: 13px"></a-icon></a>
<a v-else>暂无操作</a>
</div>
@ -97,6 +99,8 @@
<WxpayPayConfig ref="wxpayPayConfig" :callbackFunc="refCardList" />
<!-- 支付通道配置页面组件 -->
<MchPayPassageAddOrEdit ref="mchPayPassageAddOrEdit" :callbackFunc="searchFunc"/>
<!-- 支付宝授权弹层 -->
<AlipayAuth ref="alipayAuthPage" :callbackFunc="refCardList"/>
</a-drawer>
</template>
@ -108,6 +112,7 @@ import { API_URL_MCH_PAYCONFIGS_LIST, API_URL_MCH_PAYPASSAGE_LIST, req, getAvail
import MchPayConfigAddOrEdit from './MchPayConfigAddOrEdit'
import MchPayPassageAddOrEdit from './MchPayPassageAddOrEdit'
import WxpayPayConfig from './custom/WxpayPayConfig'
import AlipayAuth from './AlipayAuth'
// eslint-disable-next-line no-unused-vars
const tableColumns = [
@ -124,7 +129,8 @@ export default {
JeepayTableColumns,
MchPayConfigAddOrEdit,
MchPayPassageAddOrEdit,
WxpayPayConfig
WxpayPayConfig,
AlipayAuth
},
data () {
return {
@ -202,6 +208,21 @@ export default {
//
onClose () {
this.visible = false
},
//
toAlipayAuthPageFunc (record) {
if (!record) {
return
}
if (record.subMchIsvConfig === 0) {
this.$error({
title: '提示',
content: '当前应用所属商户为特约商户,请先配置服务商支付参数!'
})
return
}
this.$refs.alipayAuthPage.show(this.appId)
}
}
}