George/HTFX-CRM-IB-PC
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

feat: 初始化

Browse Source
This commit is contained in:
George
2025-07-07 16:00:31 +08:00
commit e94478ac2d
502 changed files with 58925 additions and 0 deletions
Download Patch File Download Diff File Expand all files Collapse all files

285
src/views/capital/payChannel/index.vue Normal file
View File

@ -0,0 +1,285 @@
<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=='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=='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'">
<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'">
<!-- <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>