first
This commit is contained in:
17
pages/applyment/addApp.vue
Normal file
17
pages/applyment/addApp.vue
Normal file
@@ -0,0 +1,17 @@
|
||||
<template>
|
||||
<view class="">
|
||||
<uni-forms :modelValue="formData">
|
||||
|
||||
</uni-forms>
|
||||
</view>
|
||||
</template>
|
||||
|
||||
<script setup>
|
||||
import { ref, reactive } from 'vue';
|
||||
|
||||
const formData = reactive({
|
||||
|
||||
})
|
||||
</script>
|
||||
|
||||
<style scoped lang="scss"></style>
|
||||
320
pages/applyment/business.vue
Normal file
320
pages/applyment/business.vue
Normal file
@@ -0,0 +1,320 @@
|
||||
<template>
|
||||
<view class="page-wrapper">
|
||||
<!-- 搜索栏头部 -->
|
||||
<view class="search-title">
|
||||
<view class="search-input">
|
||||
<!-- <view class="search-input" @tap="go.toSearchPage('mchApplyment')"> -->
|
||||
<image src="/static/iconImg/icon-search.svg" mode="scaleToFill" class="search-img" />
|
||||
<input placeholder="搜索商户号/名称" v-model="searchValue" placeholder-class="input-placeholder" @confirm="searchHandle" />
|
||||
<view class="close" v-if="searchValue" @click="clearHandle">
|
||||
<image src="/static/iconImg/icon-x.svg" mode="scaleToFill" class="del-img" />
|
||||
</view>
|
||||
</view>
|
||||
<view class="search-state" :class="{ active: searchValue }">
|
||||
<div class="btn-wrap">
|
||||
<view class="s-wrap flex-center" @tap="statePopup.open(vdata.searchData.state)" v-if="!searchValue">
|
||||
{{ vdata.selected.label || '全部状态' }}
|
||||
<image class="arrow" src="/static/iconImg/icon-arrow-black.svg" mode="scaleToFill" />
|
||||
</view>
|
||||
<view class="s-wrap flex-center" @click="searchHandle" v-else>搜索</view>
|
||||
</div>
|
||||
</view>
|
||||
</view>
|
||||
|
||||
<JeepayTableList ref="jeepayTableListRef" :reqTableDataFunc="reqTableDataFunc" :searchData="vdata.searchData">
|
||||
<template #tableBody="{ record }">
|
||||
<MchApplymentRender :record="record" />
|
||||
</template>
|
||||
</JeepayTableList>
|
||||
|
||||
<!-- 底部固定按钮 -->
|
||||
<view class="list-footer">
|
||||
<view class="button-wrapper">
|
||||
<Button @tap="toSelectIfCodePage">发起进件</Button>
|
||||
</view>
|
||||
</view>
|
||||
|
||||
<JSinglePopup :list="stateList" title="按状态筛选" ref="statePopup" @confirm="confirmState" />
|
||||
|
||||
<!-- 选择支付 接口 -->
|
||||
<JeepayPopupListSelect
|
||||
ref="selectIfcodeRef"
|
||||
title="请选择渠道"
|
||||
: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>
|
||||
|
||||
<!-- 选择支付 接口 -->
|
||||
<JeepayPopupListSelect
|
||||
ref="selectIncomingRef"
|
||||
title="请选择场景类型"
|
||||
:reqTableDataFunc="reqTableIncomingDataByIfcodeFunc"
|
||||
:fields="{ key: 'range', left: 'name' }"
|
||||
@confirm="confirmIncoming"
|
||||
></JeepayPopupListSelect>
|
||||
</view>
|
||||
</template>
|
||||
|
||||
<script setup>
|
||||
import { reactive, ref, computed, provide } from 'vue';
|
||||
import { onReachBottom, onUnload } from '@dcloudio/uni-app';
|
||||
import go from '@/commons/utils/go.js';
|
||||
import ak from '@/commons/utils/ak.js';
|
||||
import { reqLoad, API_URL_MCH_APPLYMENT_LIST, $getAllAllowApplymentIfCodeList } from '@/http/apiManager.js';
|
||||
import MchApplymentRender from '@/pages/list/render/MchApplymentRender.vue';
|
||||
|
||||
onReachBottom(() => {});
|
||||
|
||||
const statePopup = ref(null);
|
||||
const jeepayTableListRef = ref();
|
||||
const selectIfcodeRef = ref();
|
||||
const selectIncomingRef = ref();
|
||||
const searchValue = ref('');
|
||||
|
||||
// // 监听 更新事件
|
||||
onUnload(() => uni.$off(ak.emit.ENAME_REF_APPLYMENT_LIST));
|
||||
uni.$on(ak.emit.ENAME_REF_APPLYMENT_LIST, function (data) {
|
||||
jeepayTableListRef.value.refTable(true);
|
||||
});
|
||||
|
||||
const vdata = reactive({
|
||||
searchData: {
|
||||
mchApplyName: ''
|
||||
},
|
||||
selected: {}, // 当前选择对象
|
||||
addIfCodeList: [] // 可以选择的接口集合
|
||||
});
|
||||
|
||||
const stateList = reactive([
|
||||
{ label: '全部', value: '' },
|
||||
// { label: '草稿', value: '0' },
|
||||
// { label: '审核中', value: '1' },
|
||||
{ label: '进件成功', value: '2' },
|
||||
// { label: '驳回待修改', value: '3' },
|
||||
// { label: '待验证', value: '4' },
|
||||
// { label: '待签约', value: '5' },
|
||||
// { label: '等待预审', value: '7' },
|
||||
// { label: '预审拒绝', value: '8' },
|
||||
{ label: '已风控', value: '20' },
|
||||
{ label: '已冻结', value: '21' },
|
||||
{ label: '已注销', value: '22' }
|
||||
]);
|
||||
|
||||
// 清空搜索
|
||||
function clearHandle() {
|
||||
searchValue.value = '';
|
||||
vdata.searchData.mchApplyName = searchValue.value;
|
||||
jeepayTableListRef.value.refTable(true);
|
||||
}
|
||||
|
||||
// 搜索
|
||||
function searchHandle() {
|
||||
// reqTableDataFunc({ mchApplyName: searchValue });
|
||||
vdata.searchData.mchApplyName = searchValue.value;
|
||||
jeepayTableListRef.value.refTable(true);
|
||||
}
|
||||
|
||||
// 请求
|
||||
function reqTableDataFunc(params) {
|
||||
if (!params.state) {
|
||||
params.state = 99;
|
||||
}
|
||||
return reqLoad.list(API_URL_MCH_APPLYMENT_LIST, params);
|
||||
}
|
||||
|
||||
//按状态筛选
|
||||
function confirmState(r) {
|
||||
vdata.selected = r || {};
|
||||
vdata.searchData.state = r.value;
|
||||
jeepayTableListRef.value.refTable(true);
|
||||
}
|
||||
|
||||
// 打开选择渠道页面
|
||||
function toAddPage() {
|
||||
$getAllAllowApplymentIfCodeList().then(({ bizData }) => {
|
||||
vdata.addIfCodeList = bizData.filter((v) => {
|
||||
return v.isOpenApplyment == 1;
|
||||
});
|
||||
selectIfcodeRef.value.open();
|
||||
});
|
||||
}
|
||||
|
||||
// 请求可以选择的支付渠道
|
||||
function reqTableDataByIfcodeFunc() {
|
||||
// 模拟请求数据
|
||||
return Promise.resolve({ bizData: { records: vdata.addIfCodeList, hasNext: false } });
|
||||
}
|
||||
|
||||
function confirmIfCode(selected) {
|
||||
if (!selected) {
|
||||
ak.infoBox.showToast('请选择进件渠道');
|
||||
return false;
|
||||
}
|
||||
selectIfcodeRef.value.close();
|
||||
ak.go.to('PAGES_APPLYMENT_H5_DETAIL', { isView: 0, ifCode: selected.ifCode });
|
||||
}
|
||||
// 页面跳转 选择 应用渠道
|
||||
function toSelectIfCodePage() {
|
||||
selectIncomingRef.value.open();
|
||||
// ak.go.to('PAGES_APPLYMENT_SELECETDPAY')
|
||||
}
|
||||
function confirmIncoming(selected) {
|
||||
console.log(selected, 'selectedselected');
|
||||
if (!selected) {
|
||||
ak.infoBox.showToast('请选择场景类型');
|
||||
return false;
|
||||
}
|
||||
selectIncomingRef.value.close();
|
||||
ak.go.to('PAGES_APPLYMENT_SELECETDPAY', { range: selected.range });
|
||||
}
|
||||
|
||||
function reqTableIncomingDataByIfcodeFunc() {
|
||||
const incomingList = [
|
||||
{ range: 0, name: '线下场景' },
|
||||
{ range: 1, name: '线上场景' }
|
||||
];
|
||||
console.log(incomingList, 'incomingList');
|
||||
return Promise.resolve({ bizData: { records: incomingList, hasNext: false } });
|
||||
}
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
.page-wrapper {
|
||||
min-height: calc(100vh - 80rpx);
|
||||
// 搜索栏样式
|
||||
.search-title {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
padding: 0 30rpx;
|
||||
|
||||
height: 110rpx;
|
||||
.search-input {
|
||||
flex: 1;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
height: 70rpx;
|
||||
background-color: #fff;
|
||||
border-radius: 12rpx;
|
||||
position: relative;
|
||||
padding-right: 70upx;
|
||||
.search-img {
|
||||
padding: 22rpx;
|
||||
width: 26rpx;
|
||||
height: 26rpx;
|
||||
}
|
||||
.close {
|
||||
$closeSize: 70upx;
|
||||
width: $closeSize;
|
||||
height: $closeSize;
|
||||
position: absolute;
|
||||
top: 50;
|
||||
right: 0;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
.del-img {
|
||||
$size: 34upx;
|
||||
width: $size;
|
||||
height: $size;
|
||||
}
|
||||
}
|
||||
}
|
||||
.search-state {
|
||||
$height: 40upx;
|
||||
width: 200upx;
|
||||
height: $height;
|
||||
margin-left: 40rpx;
|
||||
font-size: 30rpx;
|
||||
color: #222425;
|
||||
position: relative;
|
||||
overflow: hidden;
|
||||
transition: all 0.1s ease-in-out;
|
||||
&.active {
|
||||
width: 80upx;
|
||||
}
|
||||
.arrow {
|
||||
margin-left: 10rpx;
|
||||
width: 40rpx;
|
||||
height: 40rpx;
|
||||
transform: rotate(180deg);
|
||||
}
|
||||
.btn-wrap {
|
||||
width: 100%;
|
||||
position: absolute;
|
||||
top: 0;
|
||||
left: 0;
|
||||
transition: all 0.1s ease-in-out;
|
||||
.s-wrap {
|
||||
height: $height;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.pay-wrapper {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
height: 170rpx;
|
||||
.dot {
|
||||
position: relative;
|
||||
width: 36rpx;
|
||||
height: 36rpx;
|
||||
border-radius: 50%;
|
||||
background-color: #d7d8d9;
|
||||
&::after {
|
||||
content: '';
|
||||
position: absolute;
|
||||
top: 50%;
|
||||
left: 50%;
|
||||
width: 50%;
|
||||
height: 50%;
|
||||
transform: translate(-50%, -50%);
|
||||
border-radius: 50%;
|
||||
background-color: #fff;
|
||||
}
|
||||
}
|
||||
.dot-active {
|
||||
background-color: #2980fd;
|
||||
}
|
||||
.pay-info {
|
||||
display: flex;
|
||||
|
||||
.pay-logo {
|
||||
margin: 0 20rpx 0 0rpx;
|
||||
width: 90rpx;
|
||||
height: 90rpx;
|
||||
border-radius: $v-b-r20;
|
||||
background-color: #07112d;
|
||||
image {
|
||||
width: 50rpx;
|
||||
height: 50rpx;
|
||||
}
|
||||
}
|
||||
.pay-title {
|
||||
font-size: 30rpx;
|
||||
font-weight: 400;
|
||||
}
|
||||
}
|
||||
}
|
||||
</style>
|
||||
92
pages/applyment/h5/applyDetail.vue
Normal file
92
pages/applyment/h5/applyDetail.vue
Normal file
@@ -0,0 +1,92 @@
|
||||
<template>
|
||||
<view class="page">
|
||||
<!-- 注意： App 网页向应用 postMessage 为实时消息 -->
|
||||
<web-view v-if="vdata.url" :src="vdata.url" @message="onMessageFunc"></web-view>
|
||||
</view>
|
||||
</template>
|
||||
|
||||
<script setup>
|
||||
import { ref, reactive } from 'vue';
|
||||
import { onLoad } from '@dcloudio/uni-app';
|
||||
import appConfig from '@/config/appConfig.js';
|
||||
import ak from '@/commons/utils/ak.js';
|
||||
import storageManage from '@/commons/utils/storageManage.js';
|
||||
import env from '@/env/env.development.js';
|
||||
|
||||
const vdata = reactive({
|
||||
url: null,
|
||||
isAdd: false // 是否新增， 新增将返回两个页面， 修改返回一个。
|
||||
});
|
||||
|
||||
onLoad((option) => {
|
||||
// console.log(option);
|
||||
let jeepayToken = storageManage.token();
|
||||
let mchNo = storageManage.userInfo().mchNo;
|
||||
let uploadImgSize = storageManage.uploadImgSize() || '';
|
||||
let isView = option.isView == 1 ? true : false; // 是否预览模式
|
||||
let isvNo = option.isvNo || ''; // 渠道号
|
||||
let range = option.range || 0; // 渠道号
|
||||
let autoConfigMchAppId = option.autoConfigMchAppId || ''; // 应用号
|
||||
|
||||
let baseUrl = `${env.JEEPAY_BASE_URL_H5}`;
|
||||
|
||||
let url = '';
|
||||
// 包含 记录ID
|
||||
if (option.applyId) {
|
||||
url = `${baseUrl}/h5MchApplyment?isView=${isView ? 1 : 0}&jeepayToken=${jeepayToken}&applyId=${
|
||||
option.applyId
|
||||
}&uploadImgSize=${uploadImgSize}&autoConfigMchAppId=${autoConfigMchAppId}&isvNo=${isvNo}&range=${range}`;
|
||||
} else {
|
||||
vdata.isAdd = true;
|
||||
|
||||
// 副本。
|
||||
let copyInfoSourceApplyIdParam = option.copyInfoSourceApplyId || '';
|
||||
url = `${baseUrl}/h5MchApplyment?isView=0&jeepayToken=${jeepayToken}&mchNo=${mchNo}&ifCode=${option.ifCode}©InfoSourceApplyId=${copyInfoSourceApplyIdParam}&isvNo=${isvNo}&range=${range}&autoConfigMchAppId=${autoConfigMchAppId}`;
|
||||
// url = `${baseUrl}/h5MchApplyment?isView=0&jeepayToken=${jeepayToken}&mchNo=${mchNo}&ifCode=${option.ifCode}©InfoSourceApplyId=${copyInfoSourceApplyIdParam}&uploadImgSize=${uploadImgSize}&autoConfigMchAppId=${option.appId || ''}&isvNo=${isvNo}&range=${range}`
|
||||
}
|
||||
|
||||
console.log(url, 'urlurlurl');
|
||||
vdata.url = url;
|
||||
});
|
||||
|
||||
// App 网页向应用 postMessage 为实时消息
|
||||
// 接收到 web-view事件 ,
|
||||
// 注意：放置数据， 必须在data字段下， 比如： uni.postMessage({data: {ctrl: 'TOTOTOTOTOT'}})
|
||||
function onMessageFunc(msg) {
|
||||
// 接收到响应的数据 [数组格式， 比如接收到 web-view的返回等特定事件， 将数据入栈全部返回 ]
|
||||
let postDataArray = msg.detail.data;
|
||||
|
||||
// 无数据
|
||||
if (!postDataArray || !Array.isArray(postDataArray)) {
|
||||
return false;
|
||||
}
|
||||
|
||||
for (var i = 0; i < postDataArray.length; i++) {
|
||||
if (postDataArray[i].ctrl == 'toApplymentListAndRef') {
|
||||
// 跳转到进件列表 && 刷新
|
||||
|
||||
// APP 可以实时接收到消息， 微信小程序需要在返回事件 （会关闭当前页面）时再接收到消息。
|
||||
|
||||
// #ifdef APP-PLUS
|
||||
ak.go.back(1, ak.emit.ENAME_REF_APPLYMENT_LIST); //返回上一页
|
||||
// #endif
|
||||
|
||||
// #ifdef MP-WEIXIN
|
||||
ak.emit.pageEmit(ak.emit.ENAME_REF_APPLYMENT_LIST); // 刷新页面。
|
||||
// #endif
|
||||
|
||||
break;
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
.page {
|
||||
padding: 30rpx;
|
||||
box-sizing: border-box;
|
||||
padding-bottom: 150rpx;
|
||||
background-color: #f5f6fd;
|
||||
min-height: calc(100vh - 0px);
|
||||
}
|
||||
</style>
|
||||
50
pages/applyment/h5/applyOption.vue
Normal file
50
pages/applyment/h5/applyOption.vue
Normal file
@@ -0,0 +1,50 @@
|
||||
<template>
|
||||
<view class="page">
|
||||
<!-- 注意： App 网页向应用 postMessage 为实时消息 -->
|
||||
<web-view v-if="vdata.url" :src="vdata.url" @message="onMessageFunc"></web-view>
|
||||
</view>
|
||||
</template>
|
||||
|
||||
<script setup>
|
||||
import { ref, reactive } from "vue"
|
||||
import { onLoad } from "@dcloudio/uni-app"
|
||||
import appConfig from "@/config/appConfig.js"
|
||||
import storageManage from '@/commons/utils/storageManage.js'
|
||||
|
||||
const vdata = reactive({
|
||||
url: null,
|
||||
})
|
||||
|
||||
onLoad((option) => {
|
||||
let jeepayToken = storageManage.token()
|
||||
|
||||
let isView = false // 是否预览模式
|
||||
let uploadImgSize = storageManage.uploadImgSize() || ''
|
||||
let baseUrl = `${appConfig.env.JEEPAY_BASE_URL_H5}`
|
||||
|
||||
vdata.url = `${baseUrl}/h5MchApplymentOption?configPage=${option.configPage}&jeepayToken=${jeepayToken}&applyId=${option.applyId}&uploadImgSize=${uploadImgSize}`
|
||||
})
|
||||
|
||||
// App 网页向应用 postMessage 为实时消息
|
||||
// 接收到 web-view事件 ,
|
||||
// 注意：放置数据， 必须在data字段下， 比如： uni.postMessage({data: {ctrl: 'TOTOTOTOTOT'}})
|
||||
function onMessageFunc(msg) {
|
||||
// 接收到响应的数据 [数组格式， 比如接收到 web-view的返回等特定事件， 将数据入栈全部返回 ]
|
||||
let postDataArray = msg.detail.data
|
||||
|
||||
// 无数据
|
||||
if (!postDataArray || !Array.isArray(postDataArray)) {
|
||||
return false
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
.page {
|
||||
padding: 30rpx;
|
||||
box-sizing: border-box;
|
||||
padding-bottom: 150rpx;
|
||||
background-color: #f5f6fd;
|
||||
min-height: calc(100vh - 0px);
|
||||
}
|
||||
</style>
|
||||
338
pages/applyment/list.vue
Normal file
338
pages/applyment/list.vue
Normal file
@@ -0,0 +1,338 @@
|
||||
<template>
|
||||
<view class="page-wrapper">
|
||||
<!-- 搜索栏头部 -->
|
||||
<view class="search-title">
|
||||
<view class="search-input">
|
||||
<!-- <view class="search-input" @tap="go.toSearchPage('mchApplyment')"> -->
|
||||
<image src="/static/iconImg/icon-search.svg" mode="scaleToFill" class="search-img" />
|
||||
<input placeholder="搜索商户号/名称" v-model="searchValue" placeholder-class="input-placeholder" @confirm="searchHandle" />
|
||||
<view class="close" v-if="searchValue" @click="clearHandle">
|
||||
<image src="/static/iconImg/icon-x.svg" mode="scaleToFill" class="del-img" />
|
||||
</view>
|
||||
</view>
|
||||
<view class="search-state" :class="{ active: searchValue }">
|
||||
<div class="btn-wrap">
|
||||
<view class="s-wrap flex-center" @tap="statePopup.open(vdata.searchData.state)" v-if="!searchValue">
|
||||
{{ vdata.selected.label || '全部状态' }}
|
||||
<image class="arrow" src="/static/iconImg/icon-arrow-black.svg" mode="scaleToFill" />
|
||||
</view>
|
||||
<view class="s-wrap flex-center" @click="searchHandle" v-else>搜索</view>
|
||||
</div>
|
||||
</view>
|
||||
</view>
|
||||
|
||||
<JeepayTableList ref="jeepayTableListRef" :reqTableDataFunc="reqTableDataFunc" :searchData="vdata.searchData">
|
||||
<template #tableBody="{ record }">
|
||||
<MchApplymentRender :record="record" @refresh="jeepayTableListRef.refTable(true)" />
|
||||
</template>
|
||||
</JeepayTableList>
|
||||
|
||||
<!-- 底部固定按钮 -->
|
||||
<view class="list-footer">
|
||||
<view class="button-wrapper">
|
||||
<Button @tap="toSelectIfCodePage">发起进件</Button>
|
||||
</view>
|
||||
</view>
|
||||
|
||||
<JSinglePopup :list="stateList" title="按状态筛选" ref="statePopup" @confirm="confirmState" />
|
||||
|
||||
<!-- 选择支付 接口 -->
|
||||
<JeepayPopupListSelect
|
||||
ref="selectIfcodeRef"
|
||||
title="请选择渠道"
|
||||
: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>
|
||||
|
||||
<!-- :fields="{ key: 'range', left: 'name', right: 'range' }" -->
|
||||
<!-- 选择支付 接口 -->
|
||||
<!-- <JeepayIncomingPopupListSelect
|
||||
ref="selectIncomingRef"
|
||||
title='请选择场景类型'
|
||||
:reqTableDataFunc="reqTableIncomingDataByIfcodeFunc"
|
||||
:fields="{ key: 'ifCode', left: 'ifName', right: 'ifCode' }"
|
||||
@confirm="confirmIfCode"
|
||||
>
|
||||
|
||||
|
||||
</JeepayIncomingPopupListSelect> -->
|
||||
|
||||
<!-- 选择支付 接口 -->
|
||||
<JeepayPopupListSelect
|
||||
ref="selectIncomingRef"
|
||||
title="请选择场景类型"
|
||||
:reqTableDataFunc="reqTableIncomingDataByIfcodeFunc"
|
||||
:fields="{ key: 'range', left: 'name' }"
|
||||
@confirm="confirmIncoming"
|
||||
></JeepayPopupListSelect>
|
||||
</view>
|
||||
</template>
|
||||
|
||||
<script setup>
|
||||
import { reactive, ref, computed, provide } from 'vue';
|
||||
import { onReachBottom, onUnload } from '@dcloudio/uni-app';
|
||||
import go from '@/commons/utils/go.js';
|
||||
import ak from '@/commons/utils/ak.js';
|
||||
import { reqLoad, API_URL_MCH_APPLYMENT_LIST, $getAllAllowApplymentIfCodeList } from '@/http/apiManager.js';
|
||||
import MchApplymentRender from '@/pages/list/render/MchApplymentRender.vue';
|
||||
|
||||
onReachBottom(() => {});
|
||||
|
||||
const statePopup = ref(null);
|
||||
const jeepayTableListRef = ref();
|
||||
const selectIfcodeRef = ref();
|
||||
const selectIncomingRef = ref();
|
||||
|
||||
// // 监听 更新事件
|
||||
onUnload(() => uni.$off(ak.emit.ENAME_REF_APPLYMENT_LIST));
|
||||
uni.$on(ak.emit.ENAME_REF_APPLYMENT_LIST, function (data) {
|
||||
jeepayTableListRef.value.refTable(true);
|
||||
});
|
||||
|
||||
// 清空搜索
|
||||
function clearHandle() {
|
||||
searchValue.value = '';
|
||||
vdata.searchData.mchApplyName = searchValue.value;
|
||||
jeepayTableListRef.value.refTable(true);
|
||||
}
|
||||
|
||||
// 搜索
|
||||
function searchHandle() {
|
||||
// reqTableDataFunc({ mchApplyName: searchValue });
|
||||
vdata.searchData.mchApplyName = searchValue.value;
|
||||
jeepayTableListRef.value.refTable(true);
|
||||
}
|
||||
|
||||
const vdata = reactive({
|
||||
incomingStatus: true,
|
||||
searchData: {
|
||||
mchApplyName: ''
|
||||
},
|
||||
selected: {}, // 当前选择对象
|
||||
|
||||
addIfCodeList: [] // 可以选择的接口集合
|
||||
});
|
||||
|
||||
const stateList = reactive([
|
||||
{ label: '全部', value: '' },
|
||||
{ label: '草稿', value: '0' },
|
||||
{ label: '审核中', value: '1' },
|
||||
{ label: '进件成功', value: '2' },
|
||||
{ label: '驳回待修改', value: '3' },
|
||||
{ label: '待验证', value: '4' },
|
||||
{ label: '待签约', value: '5' },
|
||||
{ label: '等待预审', value: '7' },
|
||||
{ label: '预审拒绝', value: '8' },
|
||||
{ label: '已风控', value: '20' },
|
||||
{ label: '已冻结', value: '21' },
|
||||
{ label: '进件请求中', value: '100' }
|
||||
]);
|
||||
|
||||
const searchValue = ref('');
|
||||
|
||||
// 请求
|
||||
function reqTableDataFunc(params) {
|
||||
return reqLoad.list(API_URL_MCH_APPLYMENT_LIST, params);
|
||||
}
|
||||
|
||||
//按状态筛选
|
||||
function confirmState(r) {
|
||||
vdata.selected = r || {};
|
||||
vdata.searchData.state = r.value;
|
||||
jeepayTableListRef.value.refTable(true);
|
||||
}
|
||||
|
||||
// 打开选择渠道页面
|
||||
function toAddPage() {
|
||||
$getAllAllowApplymentIfCodeList().then(({ bizData }) => {
|
||||
vdata.addIfCodeList = bizData.filter((v) => {
|
||||
return v.isOpenApplyment == 1;
|
||||
});
|
||||
selectIfcodeRef.value.open();
|
||||
});
|
||||
}
|
||||
|
||||
// 请求可以选择的支付渠道
|
||||
function reqTableDataByIfcodeFunc() {
|
||||
// 模拟请求数据
|
||||
console.log(vdata.addIfCodeList, 'incomingList');
|
||||
return Promise.resolve({ bizData: { records: vdata.addIfCodeList, hasNext: false } });
|
||||
}
|
||||
|
||||
function confirmIfCode(selected) {
|
||||
if (!selected) {
|
||||
ak.infoBox.showToast('请选择进件渠道');
|
||||
return false;
|
||||
}
|
||||
selectIfcodeRef.value.close();
|
||||
ak.go.to('PAGES_APPLYMENT_H5_DETAIL', { isView: 0, ifCode: selected.ifCode });
|
||||
}
|
||||
// 页面跳转 选择 应用渠道
|
||||
function toSelectIfCodePage() {
|
||||
selectIncomingRef.value.open();
|
||||
// ak.go.to('PAGES_APPLYMENT_SELECETDPAY')
|
||||
}
|
||||
function confirmIncoming(selected) {
|
||||
console.log(selected, 'selectedselected');
|
||||
if (!selected) {
|
||||
ak.infoBox.showToast('请选择场景类型');
|
||||
return false;
|
||||
}
|
||||
selectIncomingRef.value.close();
|
||||
ak.go.to('PAGES_APPLYMENT_SELECETDPAY', { range: selected.range });
|
||||
}
|
||||
|
||||
function reqTableIncomingDataByIfcodeFunc() {
|
||||
const incomingList = [
|
||||
{ range: 0, name: '线下场所', intro: '接入线下支付服务，获得微信、支付宝、银联二维码、POS刷卡等基础支付能力。以及多方分账、手动现取、分时结算、资金快速到账等增值服务。' },
|
||||
{
|
||||
range: 1,
|
||||
name: '线上平台',
|
||||
intro: '接入线上支付能力，获取微信、支付宝、银联二维码等在线支付能力。以及快捷支付、APP支付、H5支付、订单分账、代收代付、远程收款单等增值服务。'
|
||||
}
|
||||
];
|
||||
console.log(incomingList, 'incomingList');
|
||||
return Promise.resolve({ bizData: { records: incomingList, hasNext: false } });
|
||||
}
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
.page-wrapper {
|
||||
min-height: calc(100vh - 80rpx);
|
||||
// 搜索栏样式
|
||||
.search-title {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
padding: 0 30rpx;
|
||||
|
||||
height: 110rpx;
|
||||
.search-input {
|
||||
flex: 1;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
height: 70rpx;
|
||||
background-color: #fff;
|
||||
border-radius: 12rpx;
|
||||
position: relative;
|
||||
padding-right: 70upx;
|
||||
.search-img {
|
||||
padding: 22rpx;
|
||||
width: 26rpx;
|
||||
height: 26rpx;
|
||||
}
|
||||
.close {
|
||||
$closeSize: 70upx;
|
||||
width: $closeSize;
|
||||
height: $closeSize;
|
||||
position: absolute;
|
||||
top: 50;
|
||||
right: 0;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
.del-img {
|
||||
$size: 34upx;
|
||||
width: $size;
|
||||
height: $size;
|
||||
}
|
||||
}
|
||||
}
|
||||
.search-state {
|
||||
$height: 40upx;
|
||||
width: 200upx;
|
||||
height: $height;
|
||||
margin-left: 40rpx;
|
||||
font-size: 30rpx;
|
||||
color: #222425;
|
||||
position: relative;
|
||||
overflow: hidden;
|
||||
transition: all 0.1s ease-in-out;
|
||||
&.active {
|
||||
width: 80upx;
|
||||
}
|
||||
.arrow {
|
||||
margin-left: 10rpx;
|
||||
width: 40rpx;
|
||||
height: 40rpx;
|
||||
transform: rotate(180deg);
|
||||
}
|
||||
.btn-wrap {
|
||||
width: 100%;
|
||||
position: absolute;
|
||||
top: 0;
|
||||
left: 0;
|
||||
transition: all 0.1s ease-in-out;
|
||||
.s-wrap {
|
||||
height: $height;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.pay-wrapper {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
height: 170rpx;
|
||||
.dot {
|
||||
position: relative;
|
||||
width: 36rpx;
|
||||
height: 36rpx;
|
||||
border-radius: 50%;
|
||||
background-color: #d7d8d9;
|
||||
&::after {
|
||||
content: '';
|
||||
position: absolute;
|
||||
top: 50%;
|
||||
left: 50%;
|
||||
width: 50%;
|
||||
height: 50%;
|
||||
transform: translate(-50%, -50%);
|
||||
border-radius: 50%;
|
||||
background-color: #fff;
|
||||
}
|
||||
}
|
||||
.dot-active {
|
||||
background-color: #2980fd;
|
||||
}
|
||||
.pay-info {
|
||||
display: flex;
|
||||
|
||||
.pay-logo {
|
||||
margin: 0 20rpx 0 0rpx;
|
||||
width: 90rpx;
|
||||
height: 90rpx;
|
||||
border-radius: $v-b-r20;
|
||||
background-color: #07112d;
|
||||
image {
|
||||
width: 50rpx;
|
||||
height: 50rpx;
|
||||
}
|
||||
}
|
||||
.pay-title {
|
||||
font-size: 30rpx;
|
||||
font-weight: 400;
|
||||
}
|
||||
}
|
||||
}
|
||||
</style>
|
||||
309
pages/applyment/selectedPay.vue
Normal file
309
pages/applyment/selectedPay.vue
Normal file
@@ -0,0 +1,309 @@
|
||||
<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>
|
||||
Reference in New Issue
Block a user