135 lines
3.5 KiB
Vue
135 lines
3.5 KiB
Vue
<template>
|
|
<uni-popup ref="popup" type="bottom" mask-background-color="rgba(0,0,0,.5)" :safe-area="false">
|
|
<!-- 通用弹窗 -->
|
|
<view class="card-wrapper">
|
|
<view class="card-title disFlexCenter">选择支付渠道</view>
|
|
<view class="card-main">
|
|
<block v-for="v in payConfigList" :key="v.ifCode">
|
|
<payCard :ifName="v.ifName" :paywayFee="v.paywayFee" :bgColor="v.bgColor" :icon="v.icon">
|
|
<template #right>
|
|
<view class="state"> <switch :checked="v.configState == 1" style="margin: 0; transform: scale(1.2)" color="#7737fe" @change="stateChange($event, v)" /> </view>
|
|
</template>
|
|
</payCard>
|
|
</block>
|
|
</view>
|
|
</view>
|
|
</uni-popup>
|
|
<jeepayConfirm ref="refConfirm" />
|
|
</template>
|
|
|
|
<script setup>
|
|
import { onMounted, reactive, ref } from 'vue'
|
|
import { $getPayChannelList, $savePayConfig } from '@/http/apiManager.js'
|
|
import payCard from './payCard.vue'
|
|
|
|
const emits = defineEmits(['upDataList'])
|
|
// 支付应用的列表
|
|
const payConfigList = reactive([])
|
|
const refConfirm = ref(null)
|
|
const popup = ref(null)
|
|
const params = {
|
|
appId: undefined,
|
|
wayCode: undefined,
|
|
}
|
|
let index = undefined
|
|
const open = (appId, wayCode, i) => {
|
|
index = i
|
|
params.appId = appId
|
|
params.wayCode = wayCode
|
|
getConfigList(appId, wayCode)
|
|
}
|
|
|
|
const stateChange = (e, val) => {
|
|
val.configState = Number(e.detail.value)
|
|
refConfirm.value.comfirmOpen(
|
|
() => {
|
|
$savePayConfig({
|
|
appId: params.appId,
|
|
wayCode: params.wayCode,
|
|
ifCode: val.ifCode,
|
|
state: val.configState,
|
|
}).then((res) => {
|
|
uni.showToast({
|
|
title: '保存成功',
|
|
icon: 'success|none',
|
|
mask: true,
|
|
})
|
|
getConfigList(params.appId, params.wayCode, true)
|
|
emits('upDataList', { index, state: val.configState })
|
|
})
|
|
},
|
|
`${val.configState == 1 ? '确认启用该通道？开启后将会将其他通道关闭' : '确认关闭该渠道？'}`,
|
|
() => {
|
|
val.configState = Number(!e.detail.value)
|
|
}
|
|
)
|
|
}
|
|
// 获取可配置渠道
|
|
const getConfigList = (appId, wayCode, ifOpen) => {
|
|
$getPayChannelList(appId, wayCode).then(({ bizData }) => {
|
|
if (bizData.records.length != 0) {
|
|
payConfigList.length = 0
|
|
Object.assign(payConfigList, bizData.records)
|
|
if (ifOpen) return
|
|
popup.value.open()
|
|
} else {
|
|
uni.showToast({ title: '暂无可配置渠道', icon: 'none' })
|
|
}
|
|
})
|
|
}
|
|
defineExpose({ open })
|
|
</script>
|
|
|
|
<style lang="scss" scoped>
|
|
.card-wrapper {
|
|
max-height: 70vh;
|
|
|
|
border-radius: 32rpx 32rpx 0 0;
|
|
background-color: #fff;
|
|
.card-main {
|
|
height: calc(70vh - 110rpx - 170rpx);
|
|
padding-bottom: 60rpx;
|
|
overflow-y: auto;
|
|
}
|
|
.card-title {
|
|
margin-bottom: 10rpx;
|
|
height: 110rpx;
|
|
font-size: 30rpx;
|
|
font-weight: 400;
|
|
border-bottom: 1rpx solid rgba(0, 0, 0, 0.07);
|
|
}
|
|
.card-button {
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: space-between;
|
|
padding: 0 30rpx;
|
|
height: 170rpx;
|
|
border-top: 1rpx solid #ededed;
|
|
button {
|
|
flex: 1;
|
|
height: 110rpx;
|
|
border-radius: 20rpx;
|
|
font-size: 33rpx;
|
|
font-weight: 500;
|
|
&::after {
|
|
border: none;
|
|
}
|
|
}
|
|
.cancel {
|
|
margin-right: 30rpx;
|
|
color: rgba(0, 0, 0, 0.5);
|
|
background-color: #f7f7f7;
|
|
}
|
|
.confirm {
|
|
color: #fff;
|
|
background: linear-gradient(270deg, rgba(35, 143, 252, 1) 0%, rgba(26, 102, 255, 1) 100%);
|
|
}
|
|
}
|
|
}
|
|
.disFlexCenter {
|
|
display: flex;
|
|
justify-content: center;
|
|
align-items: center;
|
|
}
|
|
</style>
|