187 lines
4.3 KiB
Vue
187 lines
4.3 KiB
Vue
<!--
|
||
|
||
订单列表页面， 数据渲染
|
||
业务： 应用配置信息
|
||
|
||
@author terrfly
|
||
@site https://www.jeequan.com
|
||
@date 2022/12/02 16:57
|
||
-->
|
||
<template>
|
||
|
||
<JeepayTableListItem :title="props.record.wayName" :subtitle="props.record.wayCode" @tap="openConfig">
|
||
<template #titleRight>
|
||
<view v-if="props.record.isConfig" class="state-dot state-dot-enable">已配置</view>
|
||
<view v-else class="state-dot state-dot-disable">未配置</view>
|
||
</template>
|
||
</JeepayTableListItem>
|
||
|
||
<!-- 选择支付 接口 -->
|
||
<JeepayPopupListSelect
|
||
ref="selectIfcodeRef"
|
||
title='请选择支付渠道'
|
||
:reqTableDataFunc="reqTableDataByIfcodeFunc"
|
||
:fields="{ key: 'ifCode', left: 'ifName', right: 'ifCode' }"
|
||
@confirm="confirmFunc"
|
||
>
|
||
|
||
<!-- 小程序， 插槽不生效， 待排查！ 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 class="pay-rate">{{getRateStr(record.paywayFee)}}</view>
|
||
</view>
|
||
</view>
|
||
</view>
|
||
</template>
|
||
<!-- #endif -->
|
||
|
||
</JeepayPopupListSelect>
|
||
</template>
|
||
|
||
<script setup>
|
||
import { reactive, ref } from 'vue'
|
||
import { onLoad } from '@dcloudio/uni-app'
|
||
import { reqLoad, API_URL_PAY_PASSAGE_LIST, $getAvailablePayInterface, $wayCodeConfigIfCode } from '@/http/apiManager.js'
|
||
import go from '@/commons/utils/go.js'
|
||
import emit from '@/commons/utils/emit.js'
|
||
import infoBox from '@/commons/utils/infoBox.js'
|
||
import cal from '@/commons/utils/cal.js'
|
||
|
||
const selectIfcodeRef = ref()
|
||
|
||
// 定义传入属性
|
||
const props = defineProps({
|
||
|
||
record: {type:Object, default: () => {}}, // 渲染对象
|
||
|
||
configAppId: { type: String }, // 配置的appId
|
||
|
||
})
|
||
|
||
const vdata = reactive({
|
||
|
||
configedIfCode: '', // 已配置的ifCode
|
||
|
||
apiRes: { }, //接口返回数据缓存
|
||
})
|
||
|
||
// 请求
|
||
function reqTableDataByIfcodeFunc (params) {
|
||
return Promise.resolve(vdata.apiRes)
|
||
}
|
||
|
||
|
||
// 打开面板 ( 先查询过滤下。 )
|
||
function openConfig(wayCode){
|
||
|
||
vdata.configedIfCode = '';
|
||
|
||
$getAvailablePayInterface(props.configAppId, props.record.wayCode).then(res => {
|
||
vdata.apiRes = res
|
||
if(!res.bizData.records.length) return infoBox.showToast('暂无可配置的渠道')
|
||
res.bizData.records.forEach(r => {
|
||
if(r.configState == 1){
|
||
vdata.configedIfCode = r.ifCode
|
||
}
|
||
})
|
||
|
||
if(vdata.configedIfCode){
|
||
selectIfcodeRef.value.open({ifCode: vdata.configedIfCode})
|
||
}else{
|
||
selectIfcodeRef.value.open()
|
||
}
|
||
|
||
})
|
||
}
|
||
|
||
function confirmFunc(v){
|
||
|
||
if(!v){
|
||
return infoBox.showToast('请选择接口')
|
||
}
|
||
|
||
$wayCodeConfigIfCode(props.configAppId, props.record.wayCode, v.ifCode).then(() => {
|
||
infoBox.showSuccessToast("配置完成")
|
||
|
||
emit.refPageAndSearchEmit(emit.ENAME_REF_PAY_PASSAGE_LIST)
|
||
|
||
selectIfcodeRef.value.close();
|
||
})
|
||
}
|
||
|
||
|
||
function getRateStr(paywayFee){
|
||
|
||
if(paywayFee.feeType == 'SINGLE'){
|
||
return '单笔费率:' + cal.cert2Dollar(paywayFee.feeRate * 10000) + "%"
|
||
}else{
|
||
return '阶梯费率'
|
||
}
|
||
}
|
||
|
||
|
||
</script>
|
||
|
||
<style lang="scss" scoped>
|
||
.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;
|
||
}
|
||
.pay-rate {
|
||
margin-top: 16rpx;
|
||
font-size: 26rpx;
|
||
font-weight: 400;
|
||
color: $J-color-t99;
|
||
}
|
||
}
|
||
}
|
||
</style> |