339 lines
9.0 KiB
Vue
339 lines
9.0 KiB
Vue
<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>
|