414 lines
11 KiB
Vue
414 lines
11 KiB
Vue
<!--
|
||
|
||
订单列表页面， 数据渲染
|
||
业务： 进件
|
||
|
||
@author terrfly
|
||
@site https://www.jeequan.com
|
||
@date 2022/11/29 09:17
|
||
-->
|
||
<template>
|
||
<!-- 草稿 灰色 失败红色 审核中 黄色 -->
|
||
<!-- 列表卡片 -->
|
||
<view class="apply-card">
|
||
<view class="apply-title" @tap="toViewPage">
|
||
<view class="pay-img-wrapper flex-center" :style="{ backgroundColor: record.bgColor }">
|
||
<image :src="props.record.icon" mode="scaleToFill" />
|
||
</view>
|
||
<view class="apply-title-wrapper">
|
||
<view class="apply-title-info">
|
||
<text class="single-text-beyond">{{ props.record.mchShortName }}</text>
|
||
<view class="apply-state" @tap.stop="showErrorModal(props.record)">
|
||
<div class="err_icon">
|
||
<uni-icons type="info" v-if="record.state == 3" size="20"></uni-icons>
|
||
</div>
|
||
<text>{{ stateList[record.state]?.text }}</text>
|
||
<!-- <text v-if="record.state == 3" class="err_tips">{{ props.record.applyErrorInfo }}</text> -->
|
||
<view class="apply-dot" :style="{ backgroundColor: stateList[record.state]?.bgColor }"></view>
|
||
</view>
|
||
</view>
|
||
<view class="apply-time">{{ props.record.createdAt }}</view>
|
||
</view>
|
||
</view>
|
||
<view class="apply-info-title" @tap="toViewPage">
|
||
<view class="title">商户类型 </view>
|
||
<view class="info">{{ merchantTypeFilter(props.record.merchantType) }}</view>
|
||
</view>
|
||
<view class="apply-info-title" @tap="toViewPage">
|
||
<view class="title">支付通道 </view>
|
||
<view class="info">{{ props.record.ifName }}</view>
|
||
</view>
|
||
<view class="apply-info-title" @tap="toViewPage">
|
||
<view class="title">商户号  </view>
|
||
<view class="info">{{ props.record.applyId }}</view>
|
||
</view>
|
||
<view class="apply-info-title" @tap="toViewPage">
|
||
<view class="title">所属渠道 </view>
|
||
<view class="info">{{ props.record.isvNo }}</view>
|
||
</view>
|
||
<view class="apply-info-title" @tap="toViewPage">
|
||
<view class="title">支付宝认证</view>
|
||
<view class="info">{{ props.record.zfbAuthenticationState ? '已认证' : '未认证' }}</view>
|
||
</view>
|
||
<view class="apply-info-title" @tap="toViewPage">
|
||
<view class="title">微信认证 </view>
|
||
<view class="info">{{ props.record.wxAuthenticationState ? '已认证' : '未认证' }}</view>
|
||
</view>
|
||
<view class="apply-button">
|
||
<view
|
||
v-if="
|
||
ent.has('ENT_MCH_APPLYMENT_SIGN') &&
|
||
(props.record.state == 1 || props.record.state == 2 || props.record.state == 4 || props.record.state == 5 || props.record.state == 6)
|
||
"
|
||
class="sign flex-center"
|
||
hover-class="touch-hover"
|
||
@tap="toSignPage"
|
||
>
|
||
签约开通
|
||
</view>
|
||
<template v-if="props.record.state == 5 || props.record.state == 1">
|
||
<view class="sign flex-center" hover-class="touch-hover" @tap="refresh">刷新</view>
|
||
<view v-if="ent.has('ENT_MCH_APPLYMENT_ADD')" class="new-state flex-center" hover-class="touch-button" @tap="toShowSelectIfCode()">复用信息</view>
|
||
</template>
|
||
<template v-if="ent.has('ENT_MCH_APPLYMENT_SIGN') && props.record.state == 2">
|
||
<!-- <view class="new-state flex-center" hover-class="touch-button" @tap="ak.go.to('PAGES_APPLYMENT_BUSINESS')">商户管理</view> -->
|
||
<view class="new-state flex-center" hover-class="touch-button" @tap="ak.go.to('PAGES_STORE')">门店管理</view>
|
||
<view class="new-state flex-center" hover-class="touch-button" @tap="toShowSelectIfCode()">复用信息</view>
|
||
</template>
|
||
<template v-if="props.record.state == 3">
|
||
<view class="new-state flex-center" hover-class="touch-button" @tap="toShowSelectIfCode()">修改信息</view>
|
||
</template>
|
||
<template v-if="props.record.state == 0">
|
||
<view class="sign flex-center" hover-class="touch-hover" @tap="toShowSelectIfCode()">继续填写</view>
|
||
<view class="new-state flex-center" hover-class="touch-button" @tap="toShowSelectIfCode()">复用信息</view>
|
||
</template>
|
||
<!-- <template v-if="props.record.state == 1">
|
||
<view class="sign flex-center" hover-class="touch-hover" @tap="ak.go.to('PAGES_APPLYMENT')">进件管理</view>
|
||
<view
|
||
v-if="ent.has('ENT_MCH_APPLYMENT_GET_INFO') && (props.record.state == 1 || props.record.state == 4 || props.record.state == 5)"
|
||
class="new-state flex-center"
|
||
hover-class="touch-button"
|
||
>
|
||
获取最新状态
|
||
</view>
|
||
<view v-if="ent.has('ENT_MCH_APPLYMENT_ADD')" class="new-state flex-center" hover-class="touch-button" @tap="ak.go.to('PAGES_STORE')">门店管理</view>
|
||
</template> -->
|
||
</view>
|
||
|
||
<!-- 选择支付 接口 -->
|
||
<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>
|
||
</view>
|
||
</template>
|
||
|
||
<script setup>
|
||
import { reactive, ref } from 'vue';
|
||
import cal from '@/commons/utils/cal.js';
|
||
import go from '@/commons/utils/go.js';
|
||
import datamap from '@/commons/utils/datamap.js';
|
||
import ent from '@/commons/utils/ent.js';
|
||
import ak from '@/commons/utils/ak.js';
|
||
import { $getAllAllowApplymentIfCodeList } from '@/http/apiManager.js';
|
||
|
||
const emit = defineEmits(['refresh']);
|
||
|
||
const selectIfcodeRef = ref();
|
||
|
||
const vdata = reactive({
|
||
addIfCodeList: [] // 可以选择的接口集合
|
||
});
|
||
|
||
// 刷新
|
||
function refresh() {
|
||
emit('refresh');
|
||
}
|
||
|
||
// 根据type返回商户类型
|
||
function merchantTypeFilter(type) {
|
||
const m = {
|
||
1: '个人',
|
||
2: '个体工商户',
|
||
3: '企业',
|
||
4: '党政、机关级事业单位',
|
||
5: '其他组织'
|
||
};
|
||
return m[type];
|
||
}
|
||
|
||
function toH5ApplyOptionPage(applyId, configPage) {
|
||
uni.navigateTo({ url: `/pageApply/applyDetailH5ApplyOption?applyId=${applyId}&configPage=${configPage}` });
|
||
}
|
||
|
||
// 去进件详情 / 修改页
|
||
function toViewPage() {
|
||
let isView = 1;
|
||
|
||
if ([0, 3, 8].indexOf(props.record.state) >= 0) {
|
||
isView = 0;
|
||
}
|
||
go.to('PAGES_APPLYMENT_H5_DETAIL', { autoConfigMchAppId: props.record.autoConfigMchAppId, isvNo: props.record.isvNo, applyId: props.record.applyId, isView: isView });
|
||
}
|
||
|
||
// 签约开通
|
||
function toSignPage() {
|
||
go.to('PAGES_APPLYMENT_H5_OPTION', { applyId: props.record.applyId, configPage: 'NEXT_BIZS' });
|
||
}
|
||
|
||
// 定义传入属性
|
||
const props = defineProps({
|
||
record: { type: Object, default: () => {} } // 渲染对象
|
||
});
|
||
const stateList = reactive([
|
||
{
|
||
text: '草稿', //0
|
||
bgColor: '#D9D9D9'
|
||
},
|
||
{
|
||
text: '审核中', //1
|
||
bgColor: '#FFCC66'
|
||
},
|
||
{
|
||
text: '已开通', //2
|
||
bgColor: '#18BC73'
|
||
},
|
||
{
|
||
text: '申请被驳回', //3
|
||
bgColor: '#FF4D5B'
|
||
},
|
||
{
|
||
text: '待验证', //4
|
||
bgColor: '#FFCC66'
|
||
},
|
||
{
|
||
text: '待签约', //5
|
||
bgColor: '#2980FD'
|
||
},
|
||
{
|
||
text: '', //6 占位
|
||
bgColor: ''
|
||
},
|
||
{
|
||
text: '等待预审', //7
|
||
bgColor: '#FFCC66'
|
||
},
|
||
{
|
||
text: '预审拒绝', //8
|
||
bgColor: '#FF4D5B'
|
||
}
|
||
]);
|
||
|
||
// 打开选择渠道页面
|
||
function toShowSelectIfCode() {
|
||
ak.go.to('PAGES_APPLYMENT_SELECETDPAY', { applyId: props.record.applyId, ifCode: props.record.ifCode, range: props.record.range });
|
||
return;
|
||
$getAllAllowApplymentIfCodeList().then(({ bizData }) => {
|
||
vdata.addIfCodeList = bizData;
|
||
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, copyInfoSourceApplyId: props.record.applyId });
|
||
}
|
||
|
||
function showErrorModal(record) {
|
||
if (record.state == 3) {
|
||
uni.showModal({
|
||
title: stateList[record.state].text,
|
||
content: record.applyErrorInfo,
|
||
showCancel: false,
|
||
confirmText: '知道了'
|
||
});
|
||
}
|
||
}
|
||
|
||
function toCopyPage() {}
|
||
</script>
|
||
|
||
<style lang="scss" scoped>
|
||
.single-text-beyond {
|
||
width: 300rpx;
|
||
}
|
||
.err_icon {
|
||
margin-right: 12upx;
|
||
position: relative;
|
||
top: 2upx;
|
||
}
|
||
|
||
// 列表卡片样式
|
||
.apply-card {
|
||
padding: 0.1rpx 30rpx;
|
||
padding-bottom: 10rpx;
|
||
margin: 20rpx;
|
||
|
||
background-color: #fff;
|
||
border-radius: $J-b-r32;
|
||
.apply-title {
|
||
display: flex;
|
||
margin-top: 30rpx;
|
||
margin-bottom: 40rpx;
|
||
font-size: 30rpx;
|
||
.pay-img-wrapper {
|
||
flex-shrink: 0;
|
||
margin-right: 20rpx;
|
||
width: 90rpx;
|
||
height: 90rpx;
|
||
border-radius: 20rpx;
|
||
image {
|
||
width: 100%;
|
||
height: 100%;
|
||
}
|
||
}
|
||
.apply-title-wrapper {
|
||
flex: 1;
|
||
.apply-title-info {
|
||
display: flex;
|
||
justify-content: space-between;
|
||
height: 40rpx;
|
||
.apply-state {
|
||
display: flex;
|
||
justify-content: flex-end;
|
||
align-items: center;
|
||
font-size: 26rpx;
|
||
color: #999;
|
||
white-space: nowrap;
|
||
text {
|
||
transform: translateX(-10rpx);
|
||
}
|
||
.err_tips {
|
||
overflow: hidden;
|
||
text-overflow: ellipsis;
|
||
}
|
||
.apply-dot {
|
||
flex-shrink: 0;
|
||
width: 20rpx;
|
||
height: 20rpx;
|
||
border-radius: 50%;
|
||
background-color: #2980fd;
|
||
}
|
||
}
|
||
}
|
||
.apply-time {
|
||
color: #999;
|
||
margin-top: 10rpx;
|
||
font-size: 26rpx;
|
||
}
|
||
}
|
||
}
|
||
|
||
.apply-info-title {
|
||
margin: 20rpx 0;
|
||
display: flex;
|
||
font-size: 26rpx;
|
||
.title {
|
||
color: #808080;
|
||
}
|
||
.info {
|
||
text-indent: 56rpx;
|
||
}
|
||
}
|
||
.apply-button {
|
||
display: flex;
|
||
justify-content: flex-end;
|
||
margin-bottom: 20rpx;
|
||
view {
|
||
font-size: 26rpx;
|
||
font-weight: 500;
|
||
height: 62rpx;
|
||
border-radius: 12rpx;
|
||
}
|
||
.sign {
|
||
width: 164rpx;
|
||
border: 1rpx solid #d3d3d4;
|
||
}
|
||
.new-state {
|
||
margin-left: 20rpx;
|
||
width: 216rpx;
|
||
color: #fff;
|
||
background: $jeepay-bg-primary;
|
||
}
|
||
}
|
||
}
|
||
|
||
.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>
|