czg_team/shangfutong-ui
7
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

源文件

Browse Source
This commit is contained in:
gyq
2024-05-23 14:39:33 +08:00
commit a1128dd791
2997 changed files with 500069 additions and 0 deletions
Download Patch File Download Diff File Expand all files Collapse all files

428
jeepay-ui-uapp-agent/pageApply/components/defaultRate.vue Normal file
View File

@@ -0,0 +1,428 @@
<template>
<!-- 板块标题 -->
<view class="rate-title" @click="rateHeightHandle" v-if="vdata.isShowRate">
<view style="font-size: 28rpx; font-weight: 700;">{{ props.title }}</view>
<text class="svg" :class="{trans:(rateheight != '0px')}"></text>
</view>
<!-- 父元素 ，用于展开和收起 -->
<view class="rate-list" ref="rateListRef" :style="{height: rateheight}" v-if="vdata.isShowRate">
<!-- 一键全开全关 -->
<JeePayForm :start="false" text="全部开启" backColor="#fff" border="bottom-border">
<switch @change="allOnHandle" :checked="vdata.allOn" class="name" />
</JeePayForm>
<view class="list-item" v-for="(item, index) in paramsList" :key="index">
<view class="title">
<view class="name">{{ item.wayName }} {{ item.wayCode }}</view>
<switch :checked="item.state == 1" @change="switchHandle($event, index)" class="name" />
</view>
<!-- 是否为银联模式 有bug 待后台优化 -->
<!-- <view class="title" v-if="item.feeType == 'LEVEL'">
<view class="name">银联模式</view>
<switch :checked="item.creditCardPaywayFee" @change="isUpMode($event, index)" class="name" />
</view> -->
<view class="line" v-if="item.feeType == 'SINGLE'">单笔费率: <input type="text" v-model="item.feeRate" /> %</view>
<view v-if="item.feeType == 'LEVEL'">
<template v-if="item.creditCardPaywayFee">
<view>借记卡（储蓄卡）:</view>
<view class="line">保底费用：<input type="text" v-model="item.minFee" /> 元,</view>
<view class="line">封顶费用：<input type="text" v-model="item.maxFee" />元</view>
<template v-for="(levelItem, i) in item.levelList" :key="i">
<view style="margin: 10rpx 0;"></view>
{{ levelItem.minFee }} 元 ~ {{ levelItem.maxFee }}元，
<view class="line">费率：<input type="text" v-model='levelItem.feeRate' /> %</view>
</template>
<view style="margin-top: 20rpx">贷记卡（信用卡）:</view>
<view class="line">保底费用：<input type="text" v-model="item.creditCardPaywayFee.minFee" /> 元,</view>
<view class="line">封顶费用：<input type="text" v-model="item.creditCardPaywayFee.maxFee" />元</view>
<template v-for="(levelItem, i) in item.creditCardPaywayFee.levelList" :key="i">
<view style="margin: 10rpx 0;"></view>
{{ levelItem.minFee }} 元 ~ {{ levelItem.maxFee }}元，
<view class="line">费率：<input type="text" v-model='levelItem.feeRate' /> %</view>
</template>
</template>
<template v-else>
阶梯费率:
<view class="line">保底费用：<input type="text" v-model="item.minFee" /> 元,</view>
<view class="line">封顶费用：<input type="text" v-model="item.maxFee" />元</view>
<template v-for="(levelItem, i) in item.levelList" :key="i">
<view style="margin: 10rpx 0;"></view>
{{ levelItem.minFee }} 元 ~ {{ levelItem.maxFee }}元，
<view class="line">费率：<input type="text" v-model='levelItem.feeRate' /> %</view>
</template>
</template>
</view>
</view>
</view>
</template>
<script setup>
import { ref, inject, reactive } from 'vue'
import {$getRateConfigPayways, $getRateConfigSavedMapData} from '@/http/apiManager.js'
import JeePayForm from "@/components/applyComponents/JeePayForm.vue"; // 通用左右结构布局
/*
* 核心逻辑
* 1. 从可配置接口中，获取费率列表 （payways 接口）
* 2. 从已配置接口中，获取具体的费率值 （savedMapData接口）
MCHRATE 进件时自己配置的费率，如果存在进件信息，费率值和状态以此为准
READONLYPARENTDEFRATE 代理商给商户配置的费率，不存在进件信息以此为准，费率组件展示几条数据，以此为准
READONLYPARENTAGENT 代理商自己配置的费率，只读即可，目前用不到
* 3. 将上面两个接口中的相关字段存入一个新数组
* 4. 切换与修改费率值时，都在修改这个新数组
* 5. 点击提交按钮后，父组件调用子组件的方法，将该数组传递至父组件，提交前删除渠道名字段（wayName）
* 6. 遍历该数组，将状态为1（开通）的费率对象保存至用于提交的参数数组中
* 7. 获取费率时要整乘100，提交前费率要整除100
* 8. 针对'支付宝产品和微信产品'的费率值，要确保所有的费率值一致
* 9. 针对微信进件'渠道'，选择参与费率活动时，才展开费率板块
*/
const props = defineProps({
// 是否对费率值进行校验 all:全部校验 separate:支付宝 微信分开校验 默认不校验
// 目前只有微信 支付宝 和 富友会进行校验
isCheck: {type: String, default: ''},
title: {type: String, default: '签约产品费率'},
isUtmpay: {type: Boolean, default: false },
})
const emits = defineEmits(['autoPos'])
const channelInfo = inject('channelInfo')
let rateheight = ref('0px') // 费率板块的高度
// 如果是银联前置渠道 则rateheight的高度 变为auto 让其自动展开
if (props.isUtmpay) rateheight.value = 'auto'
function rateHeightHandle () {
rateheight.value == '0px' ? rateheight.value = 'auto' : rateheight.value = '0px'
}
let rateListRef = ref(null)
let infoId = `_${channelInfo.mchNo}` // 用于传参
const vdata = reactive({
isShowRate: true, // 是否展示签约产品费率列表，READONLYPARENTDEFRATE为空不展示
allOn: false, // 是否全部展开
})
// 存在进件信息时，存入以下信息
if (channelInfo.applyId) {
infoId = `${channelInfo.applyId}_${channelInfo.mchNo}`
}
let paramsList = ref([]) // 用于传值
// 可配置费率列表
$getRateConfigPayways(infoId,'agentApplyment', channelInfo.code).then( ({bizData}) => {
bizData.records.forEach(item => {
// 从可配置列表中，获取并保存以下信息
paramsList.value.push({
wayCode: item.wayCode, // 渠道code
wayName: item.wayName // 渠道名
})
})
// 请求已配置费率列表
return $getRateConfigSavedMapData(infoId, 'agentApplyment', channelInfo.code)
}).then(({bizData}) => {
// 如果可配置列表中内容为空，则不可进选择费率
if (Object.keys(paramsList.value).length === 0) {
vdata.isShowRate = false
return false
}
// 从此处获取 费率类型 费率值等信息，以READONLYPARENTDEFRATE为准，READONLYPARENTAGENT 只读, 并且将其状态设置为 未开启 0
Object.keys(bizData.READONLYPARENTAGENT).forEach(item => {
bizData.READONLYPARENTAGENT[item].state = 0
})
let rateConfigList = Object.assign(bizData.READONLYPARENTAGENT, bizData.READONLYPARENTDEFRATE)
// 组装数据（rateConfigList，paramsList）， 用于渲染与传参
Object.keys(rateConfigList).forEach(item => {
for (let i = 0; i < paramsList.value.length; i++) {
if (item === paramsList.value[i].wayCode) {
Object.assign(paramsList.value[i], rateConfigList[item])
break
}
}
})
paramsList.value.forEach(item => {
// 如果某一项没有 费率类型，则代表未匹配到费率, 未其添加默认值
if (!item.feeType) {
item['state'] = '0'
item['feeType'] = 'SINGLE'
item['feeRate'] = '0'
}
})
// 判断是否存在进件信息,若存在则用进件信息的费率再匹配一次
if (channelInfo.applyId) {
Object.keys(bizData.MCHRATE).forEach(item => {
for (let i = 0; i < paramsList.value.length; i++) {
if (item === paramsList.value[i].wayCode) {
Object.assign(paramsList.value[i], bizData.MCHRATE[item])
break
}
}
})
}
// 合并之后调用遍历数据方法，费率百分比值 乘100 金额分转元 除100
rateEach(paramsList.value)
})
// 遍历费率的方法
const rateEach = data => {
data.forEach(item => {
// 如果某一项的state为0，则代表未全部开启费率
if(item.state == 0) vdata.allOn = false
if (item['feeRate']) item['feeRate'] = (item['feeRate'] * 100).toFixed(2)
if (item['levelList']) {
for (let i = 0; i< item['levelList'].length; i++) {
item['levelList'][i].feeRate = (item['levelList'][i].feeRate * 100).toFixed(2)
}
}
if (item['creditCardPaywayFee']) {
item['creditCardPaywayFee'].maxFee = (item['creditCardPaywayFee'].maxFee / 100).toFixed(2)
item['creditCardPaywayFee'].minFee = (item['creditCardPaywayFee'].minFee / 100).toFixed(2)
for (let i = 0; i< item['creditCardPaywayFee']['levelList'].length; i++) {
item['creditCardPaywayFee']['levelList'][i].feeRate = (item['creditCardPaywayFee']['levelList'][i].feeRate * 100).toFixed(2)
}
}
if (item['maxFee']) item['maxFee'] = (item['maxFee'] / 100).toFixed(2)
if (item['minFee']) item['minFee'] = (item['minFee'] / 100).toFixed(2)
})
}
// 全部开启的开关
const allOnHandle = e => {
let flag = e.detail.value
flag ? paramsList.value.forEach(item => item.state = 1)
: paramsList.value.forEach(item => item.state = 0)
}
// 切换事件
const switchHandle = (e, index) => {
let flag = e.detail.value
flag ? paramsList.value[index].state = 1
: paramsList.value[index].state = 0
for (let i = 0; i < paramsList.value.length; i++) {
if (paramsList.value[i].state == 0) {
vdata.allOn = false
} else {
vdata.allOn = true
}
}
// 如果开启了 auto-pos 则向父组件传递信息
if (paramsList.value[index].wayCode === 'AUTO_POS') {
emits('autoPos', e.detail.value)
}
}
// 银联模式切换事件
const isUpMode = (e, index) => {
// 打开银联模式
if (e.detail.value) {
paramsList.value[index].creditCardPaywayFee = {
levelList: [{
maxFee: 0,
feeRate: 0,
minFee: 0
}, {
maxFee: 0,
feeRate: 0,
minFee: 0
}],
maxFee: 0,
minFee: 0
}
} else {
delete paramsList.value[index].creditCardPaywayFee
}
}
// 父组件调用此方法，传值回去
const getList = isTempData => {
// 深拷贝,因为要整除100，防止页面中的值受到影响
let data = JSON.parse(JSON.stringify(paramsList.value)),
rateList = [], // 传给父组件的费率信息
errInfo = '' // 错误信息
// 费率值校验，判断是否相等 全部判断模式 适用于 支付宝官方和微信官方
if ((props.isCheck == 'all') && !isTempData) {
for(let i = 0; i < data.length; i++) {
if (data[i].state != 1) continue
if (data[0].feeRate != data[i].feeRate) {
errInfo = '设置了不同的费率值，请确保一致'
break
}
}
}
// 支付宝和微信分开 验证 适用于 富友进件
if ((props.isCheck == 'separate') && !isTempData) {
let wxList = []
let aliList = []
data.forEach(item => {
if ((item.wayCode.indexOf('ALI') != -1) && item.state == 1) aliList.push(item)
if ((item.wayCode.indexOf('WX') != -1) && item.state == 1) wxList.push(item)
})
for (let j = 0; j < aliList.length; j++) {
if (aliList[0].feeRate != aliList[j].feeRate) {
errInfo = '支付宝费率设置了不同的费率值，请确保一致'
break
}
}
for (let i = 0; i < wxList.length; i++) {
if (wxList[0].feeRate != wxList[i].feeRate) {
errInfo = '微信费率设置了不同的费率值，请确保一致'
break
}
}
}
// 如果存在保存信息往下不执行
if (errInfo) return errInfo
// 要把费率都除100
data.forEach(item => {
delete item.wayName // 删除渠道名字
// 金额元转分
if (item.feeType === 'SINGLE' ) {
item.feeRate = (item.feeRate / 100).toFixed(4)
} else {
item.levelList.forEach(item => item.feeRate = (item.feeRate / 100).toFixed(4))
item.maxFee *= 100
item.minFee *= 100
if (item.creditCardPaywayFee) {
item.creditCardPaywayFee.levelList.forEach(item => item.feeRate = (item.feeRate / 100).toFixed(4))
item.creditCardPaywayFee.maxFee *= 100
item.creditCardPaywayFee.minFee *= 100
}
}
// 传值时只传已开通的
if(item.state == 1) {
rateList.push(item)
}
})
return rateList
}
// 向父元素导出方法
defineExpose({ getList })
</script>
<style scoped lang="scss">
.rate-title {
display: flex;
justify-content: space-between;
align-items: center;
padding: 30rpx;
color:#000;
font-weight: 550;
border-bottom: 1px solid #ebeef5;
image {
width: 28rpx;
height: 28rpx;
}
.svg {
font-family: uniicons;
text-decoration: none;
text-align: center;
color: rgb(187, 187, 187);
font-size: 14px;
&::before {
content: "\e6b8";
}
}
}
.trans{
transform: rotate(180deg);
}
.rate-list {
// height: 600rpx;
overflow: hidden;
display: flex;
flex-direction: column;
.list-item {
border-bottom: 1px solid #ebeef5;
padding: 35rpx 30rpx;
display: flex;
flex-direction: column;
font-size: 28rpx;
input {
border: 1px solid #ebeef5;
display: inline-block;
width: 180rpx;
margin: 0 10rpx;
padding: 0 10rpx;
}
.title {
display: flex;
justify-content: space-between;
align-items: center;
margin-bottom: 30rpx;
}
}
}
// 不存咋费率值时设置的属性
.none {
padding: 0 !important;
border: none !important;
height: 0;
overflow: hidden;
}
.line {
display: flex;
align-items: center;
}
.submit{
display: flex;
justify-content: center;
margin: 0 auto ;
width: 380rpx;
height: 90rpx;
line-height: 90rpx;
border-radius: 10rpx;
background: #3981FF;
font-weight: 500;
font-size: 30rpx;
color: #fff;
}
</style>