310 lines
8.3 KiB
Vue
310 lines
8.3 KiB
Vue
<template>
|
||
<view class="page-wrapper">
|
||
<view class="title-wrapper flex-column" v-if="vdata.isIsvShow">
|
||
<view class="title">选择线上应用</view>
|
||
<view class="tips" @click="ak.go.to('PAGES_WEBVIEW', { url: 'https://shouyinbei.yuque.com/rv7pt7/xczlxt/dgxuxxgl17vsvwvl?singleDoc#' })">
|
||
(线上场景需要通过应用获取各种能力并进行开发对接（如APP支付、分账、代付等），当前进件商户需要与应用进行关联。
|
||
<text class="t">了解应用</text>
|
||
)
|
||
</view>
|
||
<!-- <JSwitch :bol="vdata.isIsvShow" :confirmTips="false" @confirm="changeShow" /> -->
|
||
</view>
|
||
<!-- <view class="selected-wrapper selected-appId" :class="{ 'hide-appId': !vdata.isShow }"> -->
|
||
<view class="selected-wrapper selected-appId" v-if="vdata.isIsvShow">
|
||
<JeepayBizsPopupView :hasTitle="false" bizType="mchApp" v-model:value="vdata.appId" :showName="vdata.bindAppName" :isIcon="false" :addUse="true" />
|
||
<image src="/static/iconImg/icon-arrow-right.svg" class="arrow" />
|
||
</view>
|
||
<view class="title-wrapper">
|
||
<view class="title">选择支付通道</view>
|
||
</view>
|
||
<view class="selected-wrapper" @tap="toAddPage">
|
||
<text v-if="!vdata.ifCode">请选择支付通道</text>
|
||
<view class="ifcode-info" v-else>
|
||
<view class="ifcode-title">{{ vdata.ifName }}</view>
|
||
<view class="ifcode-code">{{ vdata.ifCode }}</view>
|
||
</view>
|
||
<image src="/static/iconImg/icon-arrow-right.svg" class="arrow" />
|
||
</view>
|
||
<view class="title-wrapper" v-if="vdata.ifCode">
|
||
<view class="title">选择支付渠道号</view>
|
||
</view>
|
||
<view class="selected-wrapper selected-appId" v-if="vdata.ifCode">
|
||
<JeepayBizsPopupView
|
||
:hasTitle="false"
|
||
bizType="isvApp"
|
||
v-model:value="vdata.isvNo"
|
||
:range="vdata.range"
|
||
:ifCode="vdata.ifCode"
|
||
:showName="vdata.isvName"
|
||
:isIcon="false"
|
||
/>
|
||
<image src="/static/iconImg/icon-arrow-right.svg" class="arrow" />
|
||
</view>
|
||
|
||
<view class="next-but">
|
||
<Button @tap="queryMchAppPayPassage">下一步</Button>
|
||
</view>
|
||
</view>
|
||
<!-- 选择支付 接口 -->
|
||
<JeepayPopupListSelect
|
||
ref="selectIfcodeRef"
|
||
title="请选择通道"
|
||
:isCheckbox="false"
|
||
:reqTableDataFunc="reqTableDataByIfcodeFunc"
|
||
:fields="{ key: 'ifCode', left: 'ifName', right: 'ifCode' }"
|
||
@confirm="confirmIfCode"
|
||
>
|
||
<!-- 小程序， 插槽不生效， 待排查！ TODO -->
|
||
<!-- 详见： https://ask.dcloud.net.cn/question/158765 -->
|
||
<!-- JeepayPopupListSelect.js 修改 "content-" + i0, 改为： content 即可。 -->
|
||
|
||
<!-- #ifdef APP-PLUS || H5 -->
|
||
<template #content="{ record }">
|
||
<view class="pay-wrapper">
|
||
<view class="pay-info">
|
||
<view class="pay-logo flex-center" :style="{ backgroundColor: record.bgColor }">
|
||
<image :src="record.icon" mode="scaleToFill" />
|
||
</view>
|
||
<view>
|
||
<view class="pay-title">{{ record.ifName }}</view>
|
||
</view>
|
||
</view>
|
||
</view>
|
||
</template>
|
||
<!-- #endif -->
|
||
</JeepayPopupListSelect>
|
||
</template>
|
||
|
||
<script setup>
|
||
import { reactive, ref } from 'vue';
|
||
import { onLoad } from '@dcloudio/uni-app';
|
||
import ak from '@/commons/utils/ak.js';
|
||
import { reqLoad, $getMchPayPassage, $getAllAllowApplymentIfCodeList, API_URL_MCH_APP_LIST, $getAllIsvInfoList } from '@/http/apiManager.js';
|
||
onLoad((options) => {
|
||
console.log(options, 'options');
|
||
if (options.applyId) vdata.applyId = options.applyId;
|
||
if (options.range) vdata.range = options.range;
|
||
if (vdata.range != 1) {
|
||
vdata.isShow = false;
|
||
vdata.isIsvShow = false;
|
||
}
|
||
});
|
||
const vdata = reactive({
|
||
range: 0,
|
||
isShow: true,
|
||
isIsvShow: true,
|
||
appId: ''
|
||
});
|
||
const statePopup = ref(null);
|
||
const jeepayTableListRef = ref();
|
||
const selectIfcodeRef = ref();
|
||
const selectIsvRef = ref();
|
||
// 打开选择通道页面
|
||
function toAddPage() {
|
||
$getAllAllowApplymentIfCodeList().then(({ bizData }) => {
|
||
vdata.addIfCodeList = bizData.filter((v) => {
|
||
return v.isOpenApplyment == 1;
|
||
});
|
||
selectIfcodeRef.value.open();
|
||
});
|
||
}
|
||
// 查询默认 应用
|
||
const findDefaultMchApp = () => {
|
||
reqLoad.list(API_URL_MCH_APP_LIST, { defaultFlag: 1 }).then(({ bizData }) => {
|
||
vdata.bindAppName = bizData.records[0].appName;
|
||
vdata.appId = bizData.records[0].appId;
|
||
});
|
||
};
|
||
findDefaultMchApp();
|
||
// 请求可以选择的支付通道
|
||
function reqTableDataByIfcodeFunc() {
|
||
// 模拟请求数据
|
||
return Promise.resolve({ bizData: { records: vdata.addIfCodeList, hasNext: false } });
|
||
}
|
||
// 查询商户支付应用参数是否配置
|
||
function queryMchAppPayPassage() {
|
||
if (vdata.appId == undefined && vdata.range == 1) {
|
||
ak.infoBox.showToast('请选择进件应用');
|
||
return false;
|
||
}
|
||
if (vdata.ifCode == undefined) {
|
||
ak.infoBox.showToast('请选择进件通道');
|
||
return false;
|
||
}
|
||
if (vdata.isvNo == undefined) {
|
||
ak.infoBox.showToast('请选择所属渠道');
|
||
return false;
|
||
}
|
||
$getMchPayPassage(vdata.appId, vdata.ifCode).then(({ bizData }) => {
|
||
if (bizData && bizData.existMchParams && vdata.isShow) {
|
||
uni.showModal({
|
||
title: '注意',
|
||
content: `当前所选应用已在通道【${vdata.ifName}】配置参数、费率，该笔进件成功后将自动覆盖原有配置，或将导致原有支付功能失效，请谨慎提交。`,
|
||
success: (res) => {
|
||
if (res.confirm) {
|
||
ak.go.to('PAGES_APPLYMENT_H5_DETAIL', {
|
||
range: vdata.range,
|
||
isvNo: vdata.isvNo,
|
||
isView: 0,
|
||
ifCode: vdata.ifCode,
|
||
appId: vdata.isShow ? vdata.appId : '',
|
||
copyInfoSourceApplyId: vdata.applyId ? vdata.applyId : '',
|
||
autoConfigMchAppId: vdata.appId
|
||
});
|
||
}
|
||
}
|
||
});
|
||
} else {
|
||
ak.go.to('PAGES_APPLYMENT_H5_DETAIL', {
|
||
range: vdata.range,
|
||
isvNo: vdata.isvNo,
|
||
isView: 0,
|
||
ifCode: vdata.ifCode,
|
||
appId: vdata.isShow ? vdata.appId : '',
|
||
copyInfoSourceApplyId: vdata.applyId ? vdata.applyId : '',
|
||
autoConfigMchAppId: vdata.appId
|
||
});
|
||
}
|
||
});
|
||
}
|
||
const changeShow = (e) => {
|
||
console.log(e);
|
||
vdata.isShow = e;
|
||
};
|
||
const changeIsvShow = (e) => {
|
||
console.log(e);
|
||
vdata.isIsvShow = e;
|
||
};
|
||
// 选择支付通道
|
||
function confirmIfCode(selected) {
|
||
Object.assign(vdata, selected);
|
||
selectIfcodeRef.value.close();
|
||
}
|
||
|
||
// 打开选择渠道页面
|
||
function toIsvAddPage() {
|
||
if (vdata.ifCode == undefined) {
|
||
ak.infoBox.showToast('请选择进件通道');
|
||
return false;
|
||
}
|
||
console.log(vdata.ifCode, 'vdata.ifCode');
|
||
$getAllIsvInfoList(vdata.ifCode).then(({ bizData }) => {
|
||
vdata.addIsvList = bizData.filter((v) => {
|
||
return v.isOpenApplyment == 1;
|
||
});
|
||
selectIsvRef.value.open();
|
||
});
|
||
}
|
||
// 请求可以选择的支付渠道
|
||
function reqTableDataByIsvFunc() {
|
||
// 模拟请求数据
|
||
return Promise.resolve({ bizData: { records: vdata.addIsvList, hasNext: false } });
|
||
}
|
||
// 选择支付渠道
|
||
function confirmIsv(selected) {
|
||
Object.assign(vdata, selected);
|
||
selectIfcodeRef.value.close();
|
||
}
|
||
</script>
|
||
|
||
<style lang="scss" scoped>
|
||
.page-wrapper {
|
||
padding-top: 60rpx;
|
||
min-height: 100vh;
|
||
|
||
.title-wrapper {
|
||
display: flex;
|
||
justify-content: space-between;
|
||
align-items: center;
|
||
margin: 0 auto 20rpx;
|
||
padding: 0 30rpx;
|
||
box-sizing: border-box;
|
||
width: 670rpx;
|
||
&.flex-column {
|
||
padding: 0;
|
||
align-items: flex-start;
|
||
flex-direction: column;
|
||
.title {
|
||
padding: 0 30upx;
|
||
}
|
||
}
|
||
|
||
.title {
|
||
font-size: 32rpx;
|
||
}
|
||
.tips {
|
||
$bg: #ffeed8;
|
||
color: #c57000;
|
||
font-size: 20upx;
|
||
margin-top: 20upx;
|
||
background-color: #ffeed8;
|
||
padding: 12upx 16upx;
|
||
border-radius: 10upx;
|
||
position: relative;
|
||
&::after {
|
||
$size: 20upx;
|
||
content: '';
|
||
width: $size;
|
||
height: $size;
|
||
border-radius: 8upx;
|
||
background-color: $bg;
|
||
position: absolute;
|
||
top: $size * 0.5 * -1;
|
||
left: 60upx;
|
||
transform: rotate(-45deg);
|
||
}
|
||
.t {
|
||
color: $uni-primary;
|
||
font-weight: bold;
|
||
}
|
||
}
|
||
}
|
||
|
||
.selected-wrapper {
|
||
display: flex;
|
||
justify-content: space-between;
|
||
align-items: center;
|
||
margin: 0 auto 120rpx;
|
||
padding: 0 0 0 30rpx;
|
||
box-sizing: border-box;
|
||
width: 670rpx;
|
||
min-height: 120rpx;
|
||
border-radius: 20rpx;
|
||
background-color: #fff;
|
||
|
||
.arrow {
|
||
width: 100rpx;
|
||
height: 100rpx;
|
||
}
|
||
|
||
.ifcode-info {
|
||
padding-top: 20rpx;
|
||
|
||
.ifcode-code {
|
||
padding: 15rpx 0 20rpx;
|
||
font-size: 30rpx;
|
||
color: #a1a1a1;
|
||
}
|
||
}
|
||
}
|
||
|
||
.selected-appId {
|
||
padding-bottom: 25rpx;
|
||
}
|
||
|
||
.next-but {
|
||
padding-top: 80rpx;
|
||
width: 670rpx;
|
||
margin: 0 auto;
|
||
}
|
||
}
|
||
|
||
.hide-appId {
|
||
margin-bottom: 110rpx;
|
||
padding: 0 !important;
|
||
min-height: 0 !important;
|
||
height: 0 !important;
|
||
overflow: hidden;
|
||
}
|
||
</style>
|