291 lines
12 KiB
Vue
291 lines
12 KiB
Vue
<template>
|
|
<div class="channel-wrap">
|
|
<div class="channel-tab-line">
|
|
<div class="channel-tab"
|
|
:class="[
|
|
{'tab-active': item.active},
|
|
{'channel-tab-light': (item.pay_code=='LDAgency' || item.pay_code=='htfxcashier' || item.pay_code=='htfxcashier3')},
|
|
{'channel-tab-dark': (item.pay_code=='remittance' || item.pay_code=='remittance2' || item.pay_code=='remittance3' || item.pay_code=='remittance4' || item.pay_code=='htfxcashier2')}
|
|
]"
|
|
style=""
|
|
v-for="(item, index) in channelList" :key="index" @click="selectChannel(index)" >
|
|
<div style="height: 100%;overflow: hidden;position: relative;display: flex;align-items: center;padding: 0 20px;">
|
|
<template v-if="item.pay_code=='remittance'">
|
|
<svg-icon icon-class="remittanceIcon3" class="channel-icon" v-if="item.active && (index%2)!=0" />
|
|
<svg-icon icon-class="remittanceIcon2" class="channel-icon" v-if="item.active && (index%2)==0" />
|
|
<svg-icon icon-class="remittanceIcon1" class="channel-icon" v-if="!item.active" />
|
|
</template>
|
|
<template v-if="item.pay_code=='remittance2'">
|
|
<svg-icon icon-class="remittance2Icon3" class="channel-icon" v-if="item.active && (index%2)!=0" style="left: -10px;bottom: -10px;" />
|
|
<svg-icon icon-class="remittance2Icon2" class="channel-icon" v-if="item.active && (index%2)==0" style="left: -10px;bottom: -10px;" />
|
|
<svg-icon icon-class="remittance2Icon1" class="channel-icon" v-if="!item.active" style="left: -0.5vw;bottom: -10px;" />
|
|
</template>
|
|
<template v-if="item.pay_code=='remittance4'">
|
|
<svg-icon icon-class="remittance2Icon3" class="channel-icon" v-if="item.active && (index%2)!=0" style="left: -10px;bottom: -10px;" />
|
|
<svg-icon icon-class="remittance2Icon2" class="channel-icon" v-if="item.active && (index%2)==0" style="left: -10px;bottom: -10px;" />
|
|
<svg-icon icon-class="remittance2Icon1" class="channel-icon" v-if="!item.active" style="left: -0.5vw;bottom: -10px;" />
|
|
</template>
|
|
<template v-if="item.pay_code=='remittance3'">
|
|
<svg-icon icon-class="remittance3Icon3" class="channel-icon" v-if="item.active && (index%2)!=0" />
|
|
<svg-icon icon-class="remittance3Icon2" class="channel-icon" v-if="item.active && (index%2)==0" />
|
|
<svg-icon icon-class="remittance3Icon1" class="channel-icon" v-if="!item.active" />
|
|
</template>
|
|
<template v-if="item.pay_code=='LDAgency'">
|
|
<svg-icon icon-class="LDAgencyIcon3" class="channel-icon" v-if="item.active && (index%2)!=0" />
|
|
<svg-icon icon-class="LDAgencyIcon2" class="channel-icon" v-if="item.active && (index%2)==0" />
|
|
<svg-icon icon-class="LDAgencyIcon1" class="channel-icon" v-if="!item.active" />
|
|
</template>
|
|
<template v-if="item.pay_code=='htfxcashier' || item.pay_code=='ForcePay' || item.pay_code=='AbaPay' || item.pay_code=='PayOK'
|
|
|| item.pay_code=='DidaPay' || item.pay_code=='PaySpec' || item.pay_code=='RediPay' || item.pay_code=='CCPay' || item.pay_code=='EBitPay' || item.pay_code=='Help2Pay'">
|
|
<svg-icon icon-class="htfxcashierIcon3" class="channel-icon" v-if="item.active && (index%2)!=0" />
|
|
<svg-icon icon-class="htfxcashierIcon2" class="channel-icon" v-if="item.active && (index%2)==0" />
|
|
<svg-icon icon-class="htfxcashierIcon1" class="channel-icon" v-if="!item.active" />
|
|
</template>
|
|
<template v-if="item.pay_code=='htfxcashier2'">
|
|
<svg-icon icon-class="htfxcashier2Icon3" class="channel-icon" v-if="item.active && (index%2)!=0" />
|
|
<svg-icon icon-class="htfxcashier2Icon2" class="channel-icon" v-if="item.active && (index%2)==0" />
|
|
<svg-icon icon-class="htfxcashier2Icon1" class="channel-icon" v-if="!item.active" />
|
|
<!-- <div style="position: absolute;top: 0;right: 0;max-width: 100%;display: flex;align-items: center;padding: 3px 0.6vw;background-image: linear-gradient(90deg, #DBBC95 0%, #FBEAC7 99%, #FBEAC7 100%);border-radius: 0 8px 0 0.8vw;">
|
|
<el-text style="font-size: 0.8vw;font-weight: 500;color: rgba(14, 48, 102, 1);">{{ t('capital.subsidyTips') }}</el-text>
|
|
</div> -->
|
|
</template>
|
|
<template v-if="item.pay_code=='htfxcashier3' || item.pay_code=='One2Pay'">
|
|
<!-- <svg-icon icon-class="htfxcashier3Icon3" class="channel-icon" v-if="item.active && (index%2)!=0" style="left: -12px;bottom: -12px;" />
|
|
<svg-icon icon-class="htfxcashier3Icon2" class="channel-icon" v-if="item.active && (index%2)==0" style="left: -12px;bottom: -12px;" />
|
|
<svg-icon icon-class="htfxcashier3Icon1" class="channel-icon" v-if="!item.active" style="left: -12px;bottom: -12px;" /> -->
|
|
<svg-icon icon-class="remittance2Icon3" class="channel-icon" v-if="item.active && (index%2)!=0" style="left: -10px;bottom: -10px;" />
|
|
<svg-icon icon-class="remittance2Icon2" class="channel-icon" v-if="item.active && (index%2)==0" style="left: -10px;bottom: -10px;" />
|
|
<svg-icon icon-class="remittance2Icon1" class="channel-icon" v-if="!item.active" style="left: -0.5vw;bottom: -10px;" />
|
|
</template>
|
|
<div class="channel_name">{{ item.pay_name }}</div>
|
|
<el-icon style="font-size: 19px;" v-if="item.active" ><ArrowDown /></el-icon>
|
|
<el-icon style="font-size: 19px;" v-else ><ArrowRight /></el-icon>
|
|
</div>
|
|
<div v-if="item.active" class="active-overlay" ></div>
|
|
</div>
|
|
</div>
|
|
<el-collapse-transition>
|
|
<div class="channel-pannel" v-show="activeChannel" >
|
|
<div class="pay-form">
|
|
<gold-in v-if="type == 'goldIn' && activeChannel"
|
|
:templateContent="templateContent"
|
|
:channel="activeChannel"
|
|
:actId="actId"
|
|
:actMtServer="actMtServer"
|
|
:actMtServerName="actMtServerName"
|
|
:actMtLogin="actMtLogin"
|
|
:mtServer="mtServer"
|
|
:mtLogin="mtLogin"
|
|
:ioPowerMap="ioPowerMap"
|
|
@close-channel="handleCloseChannel"
|
|
/>
|
|
</div>
|
|
</div>
|
|
</el-collapse-transition>
|
|
</div>
|
|
</template>
|
|
|
|
<script setup>
|
|
import { defineModel, watch } from "vue"
|
|
import pay_local from '@/assets/img/pay_local.png'
|
|
import pay_online from '@/assets/img/pay_online.png'
|
|
import pay_usdt from '@/assets/img/pay_usdt.png'
|
|
import { serverLang } from '@/utils/i18n'
|
|
import { getTemplateDetailByCode } from '@/api/common'
|
|
import { useLocale } from 'element-plus'
|
|
import GoldIn from "./goldIn"
|
|
|
|
const { t } = useLocale()
|
|
const channelList = defineModel('channelList')
|
|
const activeChannel = ref(null)
|
|
|
|
const props = defineProps({
|
|
type: String,
|
|
mtServer: String,
|
|
mtLogin: String,
|
|
actId: String,
|
|
actMtServer: String,
|
|
actMtLogin: String,
|
|
actMtServerName: String,
|
|
ioPowerMap: {
|
|
type: Object,
|
|
default: {}
|
|
}
|
|
})
|
|
|
|
const templateContent = ref(null)
|
|
|
|
watch(() => props.type, (n, o) => {
|
|
if (n == 'goldIn') {
|
|
getTemplateDetailByCode({
|
|
qcc_language: serverLang(),
|
|
templateCode: 'MONEY_IN'
|
|
}).then(resp => {
|
|
templateContent.value = resp.data.content
|
|
})
|
|
// } else if (n == 'goldOut') {
|
|
// getTemplateDetailByCode({
|
|
// qcc_language: serverLang(),
|
|
// templateCode: 'MONEY_OUT'
|
|
// }).then(resp => {
|
|
// templateContent.value = resp.data.content
|
|
// })
|
|
}
|
|
}, {
|
|
immediate: true
|
|
})
|
|
|
|
function getIcon(item) {
|
|
if (item.icon == '/img/pay_local.png') {
|
|
return pay_local
|
|
}
|
|
if (item.icon == '/img/pay_online.png') {
|
|
return pay_online
|
|
}
|
|
if (item.icon == '/img/pay_usdt.png') {
|
|
return pay_usdt
|
|
}
|
|
}
|
|
|
|
function selectChannel(index) {
|
|
activeChannel.value = null
|
|
if (channelList.value && channelList.value.length > index) {
|
|
for (let i = 0; i < channelList.value.length; i++) {
|
|
if (i == index) {
|
|
activeChannel.value = channelList.value[i].active ? null : channelList.value[i]
|
|
channelList.value[i].active = channelList.value[i].active ? false : true
|
|
} else {
|
|
channelList.value[i].active = false
|
|
}
|
|
}
|
|
}
|
|
}
|
|
|
|
function handleCloseChannel() {
|
|
activeChannel.value = null
|
|
for (let i = 0; i < channelList.value.length; i++) {
|
|
channelList.value[i].active = false
|
|
}
|
|
}
|
|
</script>
|
|
|
|
<style lang="scss" scoped>
|
|
.channel-wrap {
|
|
width: 100%;
|
|
margin-bottom: 10px;
|
|
margin-left: -12px;
|
|
|
|
.channel-tab-line {
|
|
width: 100%;
|
|
overflow-x: auto;
|
|
white-space: nowrap;
|
|
padding-left: 12px;
|
|
padding-right: 12px;
|
|
box-sizing: content-box;
|
|
display: flex;
|
|
}
|
|
|
|
.channel-tab {
|
|
flex-shrink: 0;
|
|
width: 312px;
|
|
height: 105px;
|
|
display: inline-block;
|
|
border-radius: 8px 8px 8px 8px;
|
|
background-color: #fff;
|
|
margin-top: 12px;
|
|
margin-bottom: 12px;
|
|
margin-right: 18px;
|
|
user-select: none;
|
|
cursor: pointer;
|
|
position: relative;
|
|
color: #fff;
|
|
background: linear-gradient(90deg, rgba(37, 192, 229, 1) 0%, rgba(187, 229, 240, 1) 100%);
|
|
&:nth-child(2n) {
|
|
background: linear-gradient(90deg, rgba(15, 54, 117, 1) 0%, rgba(102, 118, 176, 1) 100%);
|
|
}
|
|
.channel-icon {
|
|
position: absolute;
|
|
bottom: -10px;
|
|
left: -4px;
|
|
font-size: 99px;
|
|
}
|
|
|
|
.channel_name {
|
|
margin-left: 97px;
|
|
width: 51%;
|
|
font-size: 22px;
|
|
font-weight: 700;
|
|
letter-spacing: 0px;
|
|
color: rgba(51, 51, 51, 1);
|
|
white-space: pre-wrap;
|
|
}
|
|
}
|
|
|
|
|
|
.channel-tab-light {
|
|
//color: #fff;
|
|
//background: linear-gradient(90deg, rgba(37, 192, 229, 1) 0%, rgba(187, 229, 240, 1) 100%);
|
|
}
|
|
|
|
.channel-tab-dark {
|
|
//color: #fff;
|
|
//background: linear-gradient(90deg, rgba(15, 54, 117, 1) 0%, rgba(102, 118, 176, 1) 100%);
|
|
}
|
|
|
|
.channel-tab-light .channel_name {
|
|
color: #fff;
|
|
}
|
|
|
|
.channel-tab-dark .channel_name {
|
|
color: #fff;
|
|
}
|
|
|
|
.tab-active {
|
|
border-radius: 8px 8px 0 0;
|
|
color: #333333;
|
|
background: #fff !important;
|
|
}
|
|
|
|
.tab-active .channel_name {
|
|
color: #333333;
|
|
}
|
|
|
|
.active-overlay {
|
|
position: absolute;
|
|
top: 0;
|
|
width: 100%;
|
|
bottom: -20px;
|
|
left: 0;
|
|
box-shadow: 0px 2px 9px rgba(0, 0, 0, 0.1);
|
|
background-color: transparent;
|
|
border-radius: 8px 8px 0 0;
|
|
z-index: 2;
|
|
}
|
|
|
|
.active-overlay::after {
|
|
content: '';
|
|
position: absolute;
|
|
bottom: 0;
|
|
width: 100%;
|
|
background: #fff;
|
|
left: 0;
|
|
height: 20px;
|
|
}
|
|
|
|
.channel-pannel {
|
|
width: 100%;
|
|
min-height: 500px;
|
|
margin-left: 12px;
|
|
margin-bottom: 40px;
|
|
box-shadow: 0px 2px 9px rgba(0, 0, 0, 0.1);
|
|
|
|
.pay-form {
|
|
// background-color: #d64a4a;
|
|
min-height: 500px;
|
|
width: 100%;
|
|
padding: 50px 80px;
|
|
position: relative;
|
|
}
|
|
}
|
|
}
|
|
</style> |