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

694
src/views/capital/payChannel/goldIn.vue Normal file
View File

@ -0,0 +1,694 @@
<template>
<el-row v-show="step == 1" >
<el-col :span="18">
<el-row>
<!-- apply -->
<div class="goldin-form">
<el-form autocapitalize="off" :inline="true" label-position="top" size="large" :model="form" :rules="rules" ref="formRef"
:disabled="ioPowerMap!=null && !isEmpty(ioPowerMap.gold_in) && ioPowerMap.gold_in==1" >
<el-col :md="24" :lg="12" >
<el-form-item :label="t('capital.mt4_server')" prop="mt4_server" >
<el-select
v-model="form.mt4_server"
:placeholder="t('common.selectChoose')"
:clearable="false"
style="width: 100%"
@change="getMt4Login"
>
<el-option v-for="(item, index) in mtServerList" :key="index" :label="item.server_name" :value="item.id" ></el-option>
</el-select>
</el-form-item>
</el-col>
<el-col :md="24" :lg="12" >
<el-form-item :label="t('capital.mt4_login')" prop="mt4_login" >
<el-select
v-model="form.mt4_login"
:placeholder="t('common.selectChoose')"
:clearable="false"
style="width: 100%"
@change="mt4LoginChange"
>
<el-option v-for="(item, index) in mtLoginList" :key="index" :label="item.mt4_login" :value="item.mt4_login" ></el-option>
</el-select>
</el-form-item>
</el-col>
<el-col :md="24" :lg="12" >
<el-form-item :label="t('capital.currency_type')" prop="currency_type" >
<el-select
v-model="form.currency_type"
:placeholder="t('common.selectChoose')"
:clearable="false"
style="width: 100%"
@change="handleCurrencyTypeChange"
>
<template #label="{ label, value }">
<div style="width: 100%;display: flex;justify-content: space-between;">
<span>{{ label }} </span>
<span style="color:rgba(153, 153, 153, 1)">{{ t('capital.exchangeRate')+ ':' + (exchangeRate ? exchangeRate : '-') }}</span>
</div>
</template>
<template #empty>
<div style="min-height: 40px;padding: 1px 15px;line-height: 40px;font-size: 14px;" >{{ t('capital.payNotCurrencyPleaseOther') }}</div>
</template>
<el-option v-for="(item, index) in currencyList" :key="index" :label="item.currency" :value="item.currency" ></el-option>
</el-select>
</el-form-item>
</el-col>
<el-col :md="24" :lg="12" >
<el-form-item :label="t('capital.agencyMtLogin')" prop="pay_agency" v-if="channel && channel.pay_code.indexOf('LDAgency')>=0" >
<el-select
v-model="form.pay_agency"
:placeholder="t('common.selectChoose')"
:clearable="false"
style="width: 100%"
value-key="id"
@change="handlePayAgencyChange"
>
<template #empty>
<div style="min-height: 40px;padding: 1px 15px;line-height: 40px;font-size: 14px;" >{{ t('capital.payNotCurrencyPleaseOther') }}</div>
</template>
<el-option v-for="(item, index) in payAgencyList" :key="index" :label="item.user_code+'('+item.ib_id+')'+' '+item.mt_server_name+' '+item.mt_login" :value="item" ></el-option>
</el-select>
</el-form-item>
</el-col>
<el-col :md="24" :lg="12" >
<el-form-item :label="t('capital.usdAmount')" prop="usd_amount" >
<el-input type="number" v-model="form.usd_amount" min="0" @input="handleAmount" @mousewheel.native.prevent style="width: 100%" />
<div class="el-form-item__error" style="color: #14CC9E;" >{{ inAmountPlaceholder }}</div>
</el-form-item>
</el-col>
<el-col :md="24" :lg="12" v-if="channel && channel.pay_code.indexOf('LDAgency')>=0" >
<el-form-item :label="t('capital.subsidy')" >
<div v-if="subsidy_amount" >{{ subsidy_amount }}</div>
</el-form-item>
</el-col>
<el-col :md="24" :lg="12" v-if="channel && channel.pay_subsidy>=0 && channel.pay_subsidy">
<el-form-item :label="t('capital.paySubsidy')" >
<div v-if="pay_subsidy_amount" >{{ pay_subsidy_amount }}</div>
</el-form-item>
</el-col>
<el-col :md="24" :lg="12" v-if="!isEmpty(actId)" >
<el-form-item :label="t('capital.residuePresentedCredit')" >
<div v-if="presented_amount_residue" >{{ presented_amount_residue }}</div>
</el-form-item>
</el-col>
<el-col :md="24" :lg="12" v-if="!isEmpty(actId)" >
<el-form-item :label="t('capital.presentedCredit')" >
<div v-if="presented_credit" style="color: rgb(41, 187, 228);" >{{ presented_credit }}</div>
</el-form-item>
</el-col>
<el-col :md="24" :lg="12" >
<div style="display: flex;align-items: baseline;margin-top: 30px;">
<span style="font-size: 16px;margin-right: 10px;">{{ t('capital.currencyAmount') }}</span>
<div class="currency-amount">{{ '' + currencyAmount }}</div>
</div>
</el-col>
<el-form-item style="width: 100%;">
<el-button :loading="payLoading" :disabled="!form.usd_amount || form.usd_amount < 0 || (ioPowerMap!=null && !isEmpty(ioPowerMap.gold_in) && ioPowerMap.gold_in==1)"
class="sub-btn" type="primary" @click="doGoldIn" >{{ t('form.next') }}
<template #loading>
<l-ring-2 size="20" stroke="2" stroke-length="0.25" bg-opacity="0.1" speed="0.8" color="white" style="margin-right: 17px;" ></l-ring-2>
</template>
</el-button>
</el-form-item>
</el-form>
</div>
</el-row>
</el-col>
<el-col :span="6">
<div class="template-content">
<div v-if="templateContent" v-html="templateContent"></div>
</div>
</el-col>
</el-row>
<!-- remittance -->
<div v-show="step == 3" style="padding: 0 150px;" >
<remittance :data="remittanceInfo" @last-step="handleLastStep" @submit="handleSubmit" />
</div>
<!-- remittance2 -->
<div v-show="step == 2">
<remittance2 :data="remittanceInfo" @last-step="handleLastStep" @submit="handleSubmit" />
</div>
<!-- remittance3 -->
<div v-show="step == 6">
<remittance3 :data="remittanceInfo" @last-step="handleLastStep" @submit="handleSubmit" />
</div>
<!-- LDAgency -->
<div v-show="step == 4" style="padding: 0 150px;">
<remittance-ld-agency :data="remittanceInfo" @last-step="handleLastStep" @submit="handleSubmit" />
</div>
<!-- success -->
<div v-show="step == 5" style="padding: 0 300px;height: 100%;display: flex;flex-direction: column;justify-content: center;align-items: center">
<div style="margin-bottom: 16px;line-height: 55px;display: flex;align-items: center;">
<svg-icon icon-class="success" style="width: 55px;height: 55px;margin-right: 24px;" />
<div style="font-size: 36px;font-weight: 700;" >{{ t('capital.goldin-success') }}</div>
</div>
<div style="font-size: 18px;font-weight: 400;color: rgba(102, 102, 102, 1);margin-bottom: 80px;" >{{ t('capital.success-desc') }}</div>
<div style="width: 100%;display: flex;justify-content: space-between;">
<el-button class="sub-btn dark-btn" type="primary" @click="closeChannel" >{{ t('capital.close') }}</el-button>
<el-button class="sub-btn" type="primary" @click="reset" >{{ t('capital.goldin-continue') }}</el-button>
</div>
</div>
</template>
<script setup>
import { useLocale } from 'element-plus'
import { getIbMtLoginBankAsGoldInPage, goldInSave, getSubsidyById, calculatePresentedCredit } from '@/api/goldin'
import { remittanceSign } from '@/api/remittance'
import { mtServer as getMtServer, getCustomerMtLoginList, queryByMt4Login, getCurrencyByPay, getExchangeRate } from '@/api/common'
import { isEmpty, returnFloat, returnFloat3, round } from '@/utils/htfx'
import { serverLang } from '@/utils/i18n'
import { computed, onMounted, ref, watch } from 'vue'
import Remittance from './remittance'
import Remittance2 from './remittance2'
import Remittance3 from './remittance3'
import RemittanceLdAgency from './remittanceLDAgency'
const emit = defineEmits(['close-channel'])
const { proxy } = getCurrentInstance();
const { t } = useLocale()
const step = ref(1)
const payLoading = ref(false)
const mtServerList = ref([])
const mtLoginList = ref([])
const payAgencyList = ref([])
const currencyList = ref([])
const exchangeRate = ref(null)
let exchange_rate_sign = null
const subsidy = ref(null)
const subsidy_amount = computed(() => {
if (form.value.usd_amount && subsidy.value) {
return '$'+(Number(parseFloat(subsidy.value).toFixed(2)) / 100 * Number(form.value.usd_amount)).toFixed(2)
}
return null
})
const pay_subsidy_amount = computed(() => {
if (form.value.usd_amount && props.channel.pay_subsidy) {
return '$'+(Number(parseFloat(props.channel.pay_subsidy).toFixed(2)) / 100 * Number(form.value.usd_amount)).toFixed(2)
}
return null
})
const props = defineProps({
actId: String,
mtServer: String,
mtLogin: String,
actMtServer: String,
actMtLogin: String,
actMtServerName: String,
templateContent: String,
ioPowerMap: {
type: Object,
default: {}
},
channel: Object
})
const checkUsdAmount = (rule, value, callback) => {
if (value <= 0) {
callback(new Error(''))
} else {
let ioThreshold = ioGoldConf[form.value.mt4_server+':'+form.value.mt4_login];
if(isEmpty(ioThreshold)) ioThreshold = {};
//跟系统配置对比
let min_in = parseFloat(returnFloat(ioThreshold.in_min));
if(isEmpty(min_in)) min_in=0.00;
if(value<min_in){
callback(new Error(''))
} else {
callback()
}
}
}
const form = ref({
act_id: props.actId,
pay_agency: null,
currency_type: null,
usd_amount: null,
mt4_server: null,
mt4_login: null
})
const rules = ref({
mt4_server: [{ required: true, message: "", trigger: "blur" }],
mt4_login: [{ required: true, message: "", trigger: "blur" }],
usd_amount: [
{ required: true, message: "", trigger: "blur" },
{ type: "number", validator: checkUsdAmount, trigger: "blur" }
],
currency_type: [{ required: true, message: "", trigger: "blur" }],
pay_agency: [{ required: true, message: "", trigger: "blur" }],
})
let ioGoldConf = {}
const inAmountPlaceholder = ref(null)
watch(() => props.channel, (n, o) => {
if (n) {
form.value.pay_channel = n.pay_code
init()
} else {
form.value.pay_channel = null
presented_credit.value = null
presented_amount_residue.value = null
}
step.value = 1
loadPayCurrency()
}, {
immediate: true,
deep: true
})
const remittanceInfo = ref(null)
function init() {
if (!isEmpty(props.actId) && !isEmpty(props.actMtServer) && !isEmpty(props.actMtLogin)) {
mtServerList.value = [{
server_name: props.actMtServerName,
id: props.actMtServer
}]
form.value.mt4_server = props.actMtServer
mtLoginList.value = [{
mt4_login: props.actMtLogin
}]
form.value.mt4_login = props.actMtLogin
mt4LoginChange()
} else {
if (props.mtLogin) {
form.value.mt4_login = props.mtLogin - 0
}
getCheckedMt4Server()
}
}
function getIoGoldConfig() {
if (isEmpty(form.value.mt4_login)) {
return
}
if (!isEmpty(form.value.mt4_server) && !isEmpty(form.value.mt4_login) && !isEmpty(ioGoldConf[form.value.mt4_server+':'+form.value.mt4_login])) {
let ioThreshold = ioGoldConf[form.value.mt4_server+':'+form.value.mt4_login]
if(isEmpty(ioThreshold)) {
inAmountPlaceholder.value = ''
return
}
let min_in = parseFloat(returnFloat(ioThreshold.in_min));
let max_in = parseFloat(returnFloat(ioThreshold.in_max));
if(max_in==0) max_in=99999999.00;
if (min_in) {
inAmountPlaceholder.value = t('common.error.minimumAmount', {min: min_in})
} else {
inAmountPlaceholder.value = ''
}
return
}
queryByMt4Login({
mt4_server: form.value.mt4_server,
mt4_login: form.value.mt4_login
}).then(resp => {
ioGoldConf[form.value.mt4_server + ':' + form.value.mt4_login] = resp.data
let ioThreshold = resp.data
if(isEmpty(ioThreshold)) {
inAmountPlaceholder.value = ''
return
}
let min_in = parseFloat(returnFloat(ioThreshold.in_min));
let max_in = parseFloat(returnFloat(ioThreshold.in_max));
if(max_in==0) max_in=99999999.00;
if (min_in) {
inAmountPlaceholder.value = t('common.error.minimumAmount', {min: min_in})
} else {
inAmountPlaceholder.value = ''
}
})
}
function mt4LoginChange() {
getIoGoldConfig()
currencyTypeChange()
}
function handleCurrencyTypeChange() {
currencyTypeChange()
}
function currencyTypeChange() {
let payChannel = props.channel
if (payChannel && payChannel.pay_code.indexOf('LDAgency')>=0) {
let pay_id = payChannel.id
getIbMtLoginBankAsGoldInPage({
qcc_language: serverLang(),
id: pay_id,
currency_type: form.value.currency_type
}).then(resp => {
payAgencyList.value = resp.data
if (resp.data && resp.data.length) {
form.value.pay_agency = resp.data[0]
} else {
form.value.pay_agency = null
}
getSubsidy(form.value.pay_agency?form.value.pay_agency.id:null)
})
}
if (isEmpty(form.value.currency_type)) {
exchangeRate.value = null
} else {
if (!isEmpty(form.value.mt4_server) && !isEmpty(form.value.mt4_login)) {
getExchangeRateByMT4()
}
}
}
function getExchangeRateByMT4() {
getExchangeRate({
mt4_server: form.value.mt4_server,
mt4_login: form.value.mt4_login,
exchange_currency: form.value.currency_type,
type: 'mt4',
io: 'i'
}).then(resp => {
let rs = resp.data
let exchange_rate = rs.exchange_rate;
if(parseFloat(exchange_rate)<=0) {
window.showTip({
titleCode: 'capital.noSetExchangeRate',
status: 'error'
})
exchangeRate.value = null
} else {
exchangeRate.value = exchange_rate
exchange_rate_sign = rs.exchange_rate_sign
}
})
}
const presented_credit = ref(null)
const presented_amount_residue = ref(null)
function handleAmount(v) {
if (v < 0) {
form.value.usd_amount = 0
}
if (form.value.usd_amount != null && form.value.usd_amount != '' && props.actId) {
calculatePresentedCredit({
act_id: props.actId,
usd_amount: form.value.usd_amount
}).then(resp => {
const presentedCredit = returnFloat(resp.data)
presented_credit.value = presentedCredit
const jstr = resp.msg
if(!isEmpty(jstr)) {
const json = JSON.parse(jstr);
if(!isEmpty(json) && !isEmpty(json.presented_amount_residue)) {
presented_amount_residue.value = returnFloat(json.presented_amount_residue)
}
}
})
} else {
presented_credit.value = null
presented_amount_residue.value = null
}
}
const currencyAmount = computed(() => {
if (!exchangeRate.value || isNaN(exchangeRate.value) || exchangeRate.value <= 0) {
return 0
}
if (isEmpty(form.value.usd_amount)) {
return 0
}
let usd_amount = parseFloat(form.value.usd_amount)
let currency_amount = returnFloat3(exchangeRate.value * usd_amount)
let service_charge = props.channel.service_charge ? props.channel.service_charge : 0
//手续费 单位美元
let usd_service_charge = returnFloat(parseFloat(usd_amount)*parseFloat(service_charge)/100)
currency_amount = round((parseFloat(usd_amount)+parseFloat(usd_service_charge))*exchangeRate.value , 2)
return currency_amount
})
function getCheckedMt4Server() {
getMtServer({
qcc_language: serverLang(),
server_type: 'live'
}).then(resp => {
mtServerList.value = resp.data
if (resp.data && resp.data.length) {
if (props.mtServer) {
for (let index = 0; index < resp.data.length; index++) {
const element = resp.data[index];
if (element.id == props.mtServer) {
form.value.mt4_server = element.id
break
}
}
}
if (!form.value.mt4_server) {
form.value.mt4_server = resp.data[0].id
}
}
if (form.value.mt4_server) {
getMt4Login()
}
})
}
function getMt4Login() {
getCustomerMtLoginList({
qcc_language: serverLang(),
mt4_server: form.value.mt4_server,
activity_id: props.actId
}).then(resp => {
mtLoginList.value = resp.data
if (resp.data && resp.data.length) {
let login = null;
for (let index = 0; index < resp.data.length; index++) {
const element = resp.data[index];
if (element.mt4_login == form.value.mt4_login) {
login = element.mt4_login;
break
}
}
if (!login) {
form.value.mt4_login = resp.data[0].mt4_login
}
} else {
form.value.mt4_login = null
}
mt4LoginChange()
})
}
function loadPayCurrency() {
form.value.currency_type = null
currencyList.value = []
getCurrencyByPay({
pay_id: props.channel.id
}).then(resp => {
currencyList.value = resp.data
if (resp.data && resp.data.length) {
form.value.currency_type = resp.data[0].currency
} else {
form.value.currency_type = null
}
handleCurrencyTypeChange()
})
}
function handlePayAgencyChange() {
getSubsidy(form.value.pay_agency?form.value.pay_agency.id:null)
}
function getSubsidy(id) {
subsidy.value = null
getSubsidyById({id}).then(resp => {
let subsidy_value = resp.data;
if (subsidy_value && !isNaN(parseFloat(subsidy_value)) && parseFloat(subsidy_value) > 0) {
subsidy.value = parseFloat(subsidy_value).toFixed(2)
}
})
}
function doGoldIn() {
proxy.$refs["formRef"].validate(valid => {
if (valid) {
payLoading.value = true
const { act_id, pay_channel, mt4_server, mt4_login, usd_amount, currency_type, pay_agency } = form.value
goldInSave({
act_id, pay_channel, mt4_server, mt4_login, usd_amount, currency_type,
pay_agency: pay_agency ? pay_agency.id : null,
bank_desc: pay_agency ? pay_agency.pay_config_bank_id : null,
exchange_rate: exchangeRate.value,
currency_amount: currencyAmount.value,
usd_service_charge: 0,
language: serverLang(),
exchange_rate_sign: exchange_rate_sign
}).then(resp => {
toOpenPay(resp)
}).catch(() => {
payLoading.value = false
})
}
})
}
function toOpenPay(json) {
let pay_channel = json.msg;
let patams = json.data;
if (pay_channel=='htfxcashier' || pay_channel=='htfxcashier2' || pay_channel=='htfxcashier3') {
let domain = window.location.hostname
let index = domain.lastIndexOf(".");
let index2 = domain.indexOf(".");
let suffix = "uk"
let infix = "htfx"
if(index>0){
suffix = domain.substring(index+1);
}
if(index>0 && index2>0) {
infix = domain.substring(index2+1,index);
}
let formatUrl = patams.replace('{suffix}',suffix);
formatUrl = formatUrl.replace('{infix}',infix);
if(formatUrl.indexOf("{suffix}")!=-1){
formatUrl = patams.replace('{suffix}',"uk");
}
if(formatUrl.indexOf("{infix}")!=-1){
formatUrl = patams.replace('{infix}',"htfx");
}
// 打开外部收银台
// window.open(formatUrl)
window.location.href = formatUrl
payLoading.value = false
} else if (pay_channel=='remittance') {
remittanceSign({
qcc_language: serverLang(),
goldInId: patams.goldInId,
sign: patams.sign,
times: patams.times,
code: patams.code
}).then(resp => {
remittanceInfo.value = resp.data
// 显示remittance收银台
step.value = 3
payLoading.value = false
}).catch(() => {
payLoading.value = false
})
} else if (pay_channel=='remittance2') {
remittanceSign({
qcc_language: serverLang(),
goldInId: patams.goldInId,
sign: patams.sign,
times: patams.times,
code: patams.code
}).then(resp => {
remittanceInfo.value = resp.data
// 显示remittance2收银台
step.value = 2
payLoading.value = false
}).catch(() => {
payLoading.value = false
})
} else if (pay_channel=='remittance3') {
remittanceSign({
qcc_language: serverLang(),
goldInId: patams.goldInId,
sign: patams.sign,
times: patams.times,
code: patams.code
}).then(resp => {
remittanceInfo.value = resp.data
// 显示remittance3收银台
step.value = 6
payLoading.value = false
}).catch(() => {
payLoading.value = false
})
} else if (pay_channel.indexOf('LDAgency')>=0) {
remittanceSign({
qcc_language: serverLang(),
goldInId: patams.goldInId,
sign: patams.sign,
times: patams.times,
code: patams.code
}).then(resp => {
remittanceInfo.value = resp.data
// 显示LDAgency收银台
step.value = 4
payLoading.value = false
}).catch(() => {
payLoading.value = false
})
}
}
function handleLastStep() {
step.value = 1
remittanceInfo.value = null
}
function handleSubmit() {
step.value = 5
remittanceInfo.value = null
}
function closeChannel() {
step.value = 1
remittanceInfo.value = null
emit('close-channel')
}
function reset() {
step.value = 1
remittanceInfo.value = null
}
</script>
<style lang="scss" scoped>
.goldin-form {
width: 100%;
position: relative;
}
.goldin-form::after {
position: absolute;
right: 0;
top: 50px;
bottom: 50px;
content: '';
width: 1px;
background-color: rgba(204, 204, 204, 1);
}
.currency-amount {
font-size: 36px;
font-weight: 700;
letter-spacing: 0px;
line-height: 55.02px;
color: rgba(41, 187, 228, 1);
}
.sub-btn {
width: 100%;
height: 40px;
margin-top: 50px;
}
.template-content {
padding: 50px 50px;
}
.template-content > div {
font-size: 14px;
font-weight: 400;
letter-spacing: 0px;
line-height: 27px;
color: rgba(170, 170, 170, 1);
text-align: left;
}
</style>

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>

236
src/views/capital/payChannel/remittance.vue Normal file
View File

@ -0,0 +1,236 @@
<template>
<el-row>
<el-form :inline="true" label-position="top" size="large" style="width: 100%;" >
<el-col :span="8" v-if="order && order.bank_account" >
<el-form-item :label="t('capital.bankNo')" >
<span class="info-text">{{ order.bank_account }}</span>
</el-form-item>
</el-col>
<el-col :span="8" v-if="order && order.bank_name" >
<el-form-item :label="t('capital.bankName')" >
<span class="info-text">{{ order.bank_name }}</span>
</el-form-item>
</el-col>
<el-col :span="8" v-if="order && order.sub_branch" >
<el-form-item :label="t('capital.bankSubName')" >
<span class="info-text">{{ order.sub_branch }}</span>
</el-form-item>
</el-col>
<el-col :span="8" v-if="order && order.phone" >
<el-form-item :label="t('capital.phone')" >
<span class="info-text">{{ order.phone }}</span>
</el-form-item>
</el-col>
<el-col :span="8" v-if="order && order.account_holder">
<el-form-item :label="t('capital.bankCards')" >
<span class="info-text">{{ order.account_holder }}</span>
</el-form-item>
</el-col>
<el-col :span="8" v-if="order && order.currency_type" >
<el-form-item :label="t('capital.currency_type')" >
<span class="info-text">{{ order.currency_type }}</span>
</el-form-item>
</el-col>
<el-col :span="8" v-if="order && order.field1" >
<el-form-item :label="t('capital.bankField1')" >
<span class="info-text">{{ order.field1 }}</span>
</el-form-item>
</el-col>
<el-col :span="8" v-if="order && order.field2" >
<el-form-item :label="t('capital.bankField2')" >
<span class="info-text">{{ order.field2 }}</span>
</el-form-item>
</el-col>
<el-col :span="8" v-if="order && order.field3" >
<el-form-item :label="t('capital.bankField3')" >
<span class="info-text">{{ order.field3 }}</span>
</el-form-item>
</el-col>
<el-col :span="8" v-if="order && order.field4" >
<el-form-item :label="t('capital.bankField4')" >
<span class="info-text">{{ order.field4 }}</span>
</el-form-item>
</el-col>
</el-form>
</el-row>
<el-row>
<el-form autocapitalize="off" :inline="true" label-position="top" size="large" :model="form" ref="formRef" style="width: 100%;" >
<el-col :span="8" >
<el-form-item :label="t('capital.remittanceOrderNo')" prop="pay_ordid" >
<el-input v-model="form.pay_ordid" ></el-input>
</el-form-item>
</el-col>
<el-col :span="8" >
<el-form-item :label="t('capital.remittanceOrderImg')" prop="remittance_img" >
<remittance-upload v-model="form.remittance_img" :baseUrl="baseUrl" />
</el-form-item>
</el-col>
<el-col :span="8" v-if="order && order.currency_amount" >
<el-form-item :label="t('capital.currencyAmount')" >
<span class="currency-amount">{{ '' + order.currency_amount }}</span>
</el-form-item>
</el-col>
<el-col :span="24" v-if="countdown" >
<div style="width: 100%;padding: 50px 0;font-size: 24px;font-weight: 700;display: flex;justify-content: center;align-items: center;">
<span>{{ t('capital.d1') }}</span>
<span class="countdown-text">{{ countdown }}</span>
<span>{{ t('capital.d2') }}</span>
</div>
</el-col>
<el-col :span="24">
<div style="width: 100%;display: flex;justify-content: space-between;">
<el-button class="sub-btn dark-btn" type="primary" @click="lastStep" >{{ t('form.last') }}</el-button>
<el-button :loading="loading" class="sub-btn" type="primary" @click="handleSubmit" >{{ t('capital.sub') }}
<template #loading>
<l-ring-2 size="20" stroke="2" stroke-length="0.25" bg-opacity="0.1" speed="0.8" color="white" style="margin-right: 17px;" ></l-ring-2>
</template>
</el-button>
</div>
</el-col>
</el-form>
</el-row>
</template>
<script setup>
import { useLocale } from 'element-plus'
import { remittanceSave, remittanceQuery } from '@/api/remittance'
import { getImgPath } from '@/api/common'
import { isEmpty } from '@/utils/htfx'
import { onMounted, watch } from 'vue';
import RemittanceUpload from '@/components/RemittanceUpload'
const { proxy } = getCurrentInstance();
const { t } = useLocale()
const emit = defineEmits(['last-step', 'submit'])
const props = defineProps({
data: Object
})
const baseUrl = ref(null)
const order = ref(null)
const form = ref({
remittance_img: undefined,
pay_ordid: undefined
})
const countdown = ref(null)
const loading = ref(false)
watch(() => props.data, (n, o) => {
if (n && n.obj && n.obj.goldInId) {
remittanceQuery({
id: n.obj.goldInId
}).then(resp => {
order.value = resp.data
})
loadCountdown()
}
}, {
immediate: true,
deep: true
})
function loadCountdown() {
if (!props.data) {
return false
}
const cur_times = new Date().getTime()
const { pay_time } = props.data
const { times } = props.data.obj
let lefttime = parseInt((parseInt(pay_time)+parseInt(times)-parseInt(cur_times))/1000);//秒数
var h = parseInt(lefttime / (60 * 60) % 24);
var m = parseInt(lefttime / 60 % 60);
var s = parseInt(lefttime % 60);
h = addZero(h);
m = addZero(m);
s = addZero(s);
countdown.value = `${h}:${m}:${s}`
if (lefttime <= 0) {
countdown.value = "00:00:00"
return;
}
setTimeout(() => {
loadCountdown()
}, 1000);
}
function addZero(i) {
return i < 10 ? "0" + i: i + "";
}
function lastStep() {
remittanceSave({
id : props.data.obj.goldInId,
status: -2,
remark: 'manualCancel'
})
emit('last-step')
}
function handleSubmit() {
console.log(form.value)
if (isEmpty(form.value.remittance_img) && isEmpty(form.value.pay_ordid)) {
window.showTip({
title: `${t('capital.remittanceOrderNo')},${t('capital.remittanceOrderImg')} ${t('capital.oneIsNotEmpty')}`,
status: 'error'
})
return
}
loading.value = true
remittanceSave({
id : props.data.obj.goldInId,
status: 0,
remittance_img: form.value.remittance_img,
pay_ordid: form.value.pay_ordid
}).then(resp => {
emit('submit')
loading.value = false
}).catch(() => {
loading.value = false
})
}
onMounted(()=> {
getImgPath().then(resp => {
baseUrl.value = resp.data
})
})
</script>
<style lang="scss" scoped>
:deep(.el-form-item__label) {
font-size: 16px !important;
font-weight: 400 !important;
color: rgba(51, 51, 51, 1);
}
.info-text {
font-size: 20px;
font-weight: 700;
color: rgba(51, 51, 51, 1);
}
.countdown-text {
font-weight: 700;
font-size: 36px;
color: rgba(41, 187, 228, 1);
margin: 0 10px;
}
.sub-btn {
width: 40%;
}
.currency-amount {
font-size: 36px;
font-weight: 700;
letter-spacing: 0px;
line-height: 55.02px;
color: rgba(41, 187, 228, 1);
}
</style>

260
src/views/capital/payChannel/remittance2.vue Normal file
View File

@ -0,0 +1,260 @@
<template>
<el-row>
<el-col :span="14">
<el-row>
<el-form :inline="true" label-position="top" size="large" style="width: 100%;" >
<el-col :span="12" v-if="order && order.field2" >
<el-form-item :label="t('form.walletType.label')" >
<span class="info-text">{{ order.field2 }}</span>
</el-form-item>
</el-col>
<el-col :span="12" v-if="order && order.currency_type" >
<el-form-item :label="t('capital.currency_type')" >
<span class="info-text">{{ order.currency_type }}</span>
</el-form-item>
</el-col>
<el-col :span="24" v-if="order && order.field3" >
<el-form-item :label="t('finance.bank_addr')" >
<span class="info-text">{{ order.field3 }}</span>
<el-button style="margin-left: 14px;" size="small" :icon="copySuccess?'Check':'CopyDocument'" type="primary" plain @click="copy" >{{ t('form.copy') }}</el-button>
</el-form-item>
</el-col>
</el-form>
</el-row>
<el-row>
<el-form autocapitalize="off" :inline="true" label-position="top" size="large" :model="form" ref="formRef" style="width: 100%;" >
<el-col :xl="8" :lg="12" :sm="24" >
<el-form-item :label="t('capital.remittanceOrderNo')" prop="pay_ordid" >
<el-input v-model="form.pay_ordid" ></el-input>
</el-form-item>
</el-col>
<el-col :xl="8" :lg="12" :sm="24" >
<el-form-item :label="t('capital.remittanceOrderImg')" prop="remittance_img" >
<remittance-upload v-model="form.remittance_img" :baseUrl="baseUrl" />
</el-form-item>
</el-col>
<el-col :xl="8" :lg="12" :sm="24" v-if="order && order.currency_amount" >
<el-form-item :label="t('capital.currencyAmount')" >
<span class="currency-amount">{{ '' + order.currency_amount }}</span>
</el-form-item>
</el-col>
<el-col :span="24" v-if="countdown" >
<div style="width: 100%;padding: 50px 0;font-size: 24px;font-weight: 700;display: flex;justify-content: center;align-items: center;">
<span>{{ t('capital.d1') }}</span>
<span class="countdown-text">{{ countdown }}</span>
<span>{{ t('capital.d2') }}</span>
</div>
</el-col>
<el-col :span="24">
<div style="width: 100%;display: flex;justify-content: space-between;">
<el-button class="sub-btn dark-btn" type="primary" @click="lastStep" >{{ t('form.last') }}</el-button>
<el-button :loading="loading" class="sub-btn" type="primary" @click="handleSubmit" >{{ t('capital.sub') }}
<template #loading>
<l-ring-2 size="20" stroke="2" stroke-length="0.25" bg-opacity="0.1" speed="0.8" color="white" style="margin-right: 17px;" ></l-ring-2>
</template>
</el-button>
</div>
</el-col>
</el-form>
</el-row>
</el-col>
<el-col :span="10">
<div style="text-align: center;">
<div class="template-content">
<div class="qr-bg">
<div class="img-wrap">
<vue-qrcode v-if="order" :value="order.field3" :width="180" :margin="1" />
</div>
</div>
</div>
<div style="color: rgba(51, 51, 51, 1);font-size: 20px;font-weight: 700;">{{ t('capital.qrcode') }}</div>
</div>
</el-col>
</el-row>
</template>
<script setup>
import useClipboard from "vue-clipboard3"
import VueQrcode from 'vue-qrcode'
import { useLocale } from 'element-plus'
import { remittanceSave, remittanceQuery } from '@/api/remittance'
import { getImgPath } from '@/api/common'
import { isEmpty } from '@/utils/htfx'
import { onMounted, watch } from 'vue';
import RemittanceUpload from '@/components/RemittanceUpload'
const { proxy } = getCurrentInstance();
const { t } = useLocale()
const { toClipboard } = useClipboard()
const emit = defineEmits(['last-step', 'submit'])
const props = defineProps({
data: Object
})
const copySuccess = ref(false)
const baseUrl = ref(null)
const order = ref(null)
const form = ref({
remittance_img: undefined,
pay_ordid: undefined
})
const countdown = ref(null)
const loading = ref(false)
watch(() => props.data, (n, o) => {
if (n && n.obj && n.obj.goldInId) {
remittanceQuery({
id: n.obj.goldInId
}).then(resp => {
order.value = resp.data
})
loadCountdown()
}
}, {
immediate: true,
deep: true
})
function loadCountdown() {
if (!props.data) {
return false
}
const cur_times = new Date().getTime()
const { pay_time } = props.data
const { times } = props.data.obj
let lefttime = parseInt((parseInt(pay_time)+parseInt(times)-parseInt(cur_times))/1000);//秒数
var h = parseInt(lefttime / (60 * 60) % 24);
var m = parseInt(lefttime / 60 % 60);
var s = parseInt(lefttime % 60);
h = addZero(h);
m = addZero(m);
s = addZero(s);
countdown.value = `${h}:${m}:${s}`
if (lefttime <= 0) {
countdown.value = "00:00:00"
return;
}
setTimeout(() => {
loadCountdown()
}, 1000);
}
function addZero(i) {
return i < 10 ? "0" + i: i + "";
}
function lastStep() {
remittanceSave({
id : props.data.obj.goldInId,
status: -2,
remark: 'manualCancel'
})
emit('last-step')
}
function handleSubmit() {
console.log(form.value)
if (isEmpty(form.value.remittance_img) && isEmpty(form.value.pay_ordid)) {
window.showTip({
title: `${t('capital.remittanceOrderNo')},${t('capital.remittanceOrderImg')} ${t('capital.oneIsNotEmpty')}`,
status: 'error'
})
return
}
loading.value = true
remittanceSave({
id : props.data.obj.goldInId,
status: 0,
remittance_img: form.value.remittance_img,
pay_ordid: form.value.pay_ordid
}).then(resp => {
emit('submit')
loading.value = false
}).catch(() => {
loading.value = false
})
}
const copy = async () => {
try {
await toClipboard(order.value.field3);
copySuccess.value = true
setTimeout(() => {
copySuccess.value = false
}, 2000)
} catch (e) {
console.error(e);
}
}
onMounted(()=> {
getImgPath().then(resp => {
baseUrl.value = resp.data
})
})
</script>
<style lang="scss" scoped>
:deep(.el-form-item__label) {
font-size: 16px !important;
font-weight: 400 !important;
color: rgba(51, 51, 51, 1);
}
.info-text {
font-size: 20px;
font-weight: 700;
color: rgba(51, 51, 51, 1);
}
.countdown-text {
font-weight: 700;
font-size: 36px;
color: rgba(41, 187, 228, 1);
margin: 0 10px;
}
.sub-btn {
width: 40%;
}
.currency-amount {
font-size: 36px;
font-weight: 700;
letter-spacing: 0px;
line-height: 55.02px;
color: rgba(41, 187, 228, 1);
}
.template-content {
padding: 50px 80px;
.qr-bg {
margin: auto;
width: 192px;
height: 192px;
background: linear-gradient(90deg, rgba(16, 55, 118, 1) 0%, rgba(146, 219, 237, 1) 100%);
padding: 6px;
.img-wrap {
width: 100%;
height: 100%;
background-color: #fff;
}
}
}
.template-content > div {
font-size: 14px;
font-weight: 400;
letter-spacing: 0px;
line-height: 27px;
color: rgba(170, 170, 170, 1);
text-align: left;
}
</style>

257
src/views/capital/payChannel/remittance3.vue Normal file
View File

@ -0,0 +1,257 @@
<template>
<el-row>
<el-col :span="14">
<el-row>
<el-form :inline="true" label-position="top" size="large" style="width: 100%;" >
<el-col :span="12" >
<el-form-item :label="t('capital.remittance3_label')" >
<span class="info-text">{{ t('capital.remittance3_text') }}</span>
</el-form-item>
</el-col>
</el-form>
</el-row>
<el-row>
<el-form autocapitalize="off" :inline="true" label-position="top" size="large" :model="form" ref="formRef" style="width: 100%;" >
<el-col :xl="8" :lg="12" :sm="24" >
<el-form-item :label="t('capital.remittanceOrderNo')" prop="pay_ordid" >
<el-input v-model="form.pay_ordid" ></el-input>
</el-form-item>
</el-col>
<el-col :xl="8" :lg="12" :sm="24" >
<el-form-item :label="t('capital.remittanceOrderImg')" prop="remittance_img" >
<remittance-upload v-model="form.remittance_img" :baseUrl="baseUrl" />
</el-form-item>
</el-col>
<el-col :xl="8" :lg="12" :sm="24" v-if="order && order.currency_amount" >
<el-form-item :label="t('capital.currencyAmount')" >
<span class="currency-amount">{{ '' + order.currency_amount }}</span>
</el-form-item>
</el-col>
<el-col :span="24" v-if="countdown" >
<div style="width: 100%;padding: 50px 0;font-size: 24px;font-weight: 700;display: flex;justify-content: center;align-items: center;">
<span>{{ t('capital.d1') }}</span>
<span class="countdown-text">{{ countdown }}</span>
<span>{{ t('capital.d2') }}</span>
</div>
</el-col>
<el-col :span="24">
<div style="width: 100%;display: flex;justify-content: space-between;">
<el-button class="sub-btn dark-btn" type="primary" @click="lastStep" >{{ t('form.last') }}</el-button>
<el-button :loading="loading" class="sub-btn" type="primary" @click="handleSubmit" >{{ t('capital.sub') }}
<template #loading>
<l-ring-2 size="20" stroke="2" stroke-length="0.25" bg-opacity="0.1" speed="0.8" color="white" style="margin-right: 17px;" ></l-ring-2>
</template>
</el-button>
</div>
</el-col>
</el-form>
</el-row>
</el-col>
<el-col :span="10">
<div style="text-align: center;">
<div class="template-content">
<div class="qr-bg">
<div class="img-wrap" v-if="order && order.bank_img">
<el-image style="width: 180px; height: 180px" :src="baseUrl + order.bank_img" fit="contain" />
</div>
</div>
</div>
<div style="display: flex;align-items: center;justify-content: space-evenly;max-width: 310px;margin: 0 auto;">
<!-- <svg-icon icon-class="wxpay" class="payIcon" /> -->
<svg-icon icon-class="alipay" class="payIcon" />
<!-- <svg-icon icon-class="unionpay" class="payIcon" /> -->
<!-- <svg-icon icon-class="huabei" class="payIcon" /> -->
</div>
</div>
</el-col>
</el-row>
</template>
<script setup>
import useClipboard from "vue-clipboard3"
import { useLocale } from 'element-plus'
import { remittanceSave, remittanceQuery } from '@/api/remittance'
import { getImgPath } from '@/api/common'
import { isEmpty } from '@/utils/htfx'
import { onMounted, watch } from 'vue';
import RemittanceUpload from '@/components/RemittanceUpload'
const { proxy } = getCurrentInstance();
const { t } = useLocale()
const { toClipboard } = useClipboard()
const emit = defineEmits(['last-step', 'submit'])
const props = defineProps({
data: Object
})
const copySuccess = ref(false)
const baseUrl = ref(null)
const order = ref(null)
const form = ref({
remittance_img: undefined,
pay_ordid: undefined
})
const countdown = ref(null)
const loading = ref(false)
watch(() => props.data, (n, o) => {
if (n && n.obj && n.obj.goldInId) {
remittanceQuery({
id: n.obj.goldInId
}).then(resp => {
order.value = resp.data
})
loadCountdown()
}
}, {
immediate: true,
deep: true
})
function loadCountdown() {
if (!props.data) {
return false
}
const cur_times = new Date().getTime()
const { pay_time } = props.data
const { times } = props.data.obj
let lefttime = parseInt((parseInt(pay_time)+parseInt(times)-parseInt(cur_times))/1000);//秒数
var h = parseInt(lefttime / (60 * 60) % 24);
var m = parseInt(lefttime / 60 % 60);
var s = parseInt(lefttime % 60);
h = addZero(h);
m = addZero(m);
s = addZero(s);
countdown.value = `${h}:${m}:${s}`
if (lefttime <= 0) {
countdown.value = "00:00:00"
return;
}
setTimeout(() => {
loadCountdown()
}, 1000);
}
function addZero(i) {
return i < 10 ? "0" + i: i + "";
}
function lastStep() {
remittanceSave({
id : props.data.obj.goldInId,
status: -2,
remark: 'manualCancel'
})
emit('last-step')
}
function handleSubmit() {
if (isEmpty(form.value.remittance_img)) {
window.showTip({
title: `${t('capital.remittance3check')}`,
status: 'error'
})
return
}
loading.value = true
remittanceSave({
id : props.data.obj.goldInId,
status: 0,
remittance_img: form.value.remittance_img,
pay_ordid: form.value.pay_ordid
}).then(resp => {
emit('submit')
loading.value = false
}).catch(() => {
loading.value = false
})
}
const copy = async () => {
try {
await toClipboard(order.value.field3);
copySuccess.value = true
setTimeout(() => {
copySuccess.value = false
}, 2000)
} catch (e) {
console.error(e);
}
}
onMounted(()=> {
getImgPath().then(resp => {
baseUrl.value = resp.data
})
})
</script>
<style lang="scss" scoped>
:deep(.el-form-item__label) {
font-size: 16px !important;
font-weight: 400 !important;
color: rgba(51, 51, 51, 1);
}
.info-text {
font-size: 20px;
font-weight: 700;
color: rgba(51, 51, 51, 1);
}
.countdown-text {
font-weight: 700;
font-size: 36px;
color: rgba(41, 187, 228, 1);
margin: 0 10px;
}
.sub-btn {
width: 40%;
}
.currency-amount {
font-size: 36px;
font-weight: 700;
letter-spacing: 0px;
line-height: 55.02px;
color: rgba(41, 187, 228, 1);
}
.template-content {
padding: 50px 80px;
.qr-bg {
margin: auto;
width: 192px;
height: 192px;
background: linear-gradient(90deg, rgba(16, 55, 118, 1) 0%, rgba(146, 219, 237, 1) 100%);
padding: 6px;
.img-wrap {
width: 100%;
height: 100%;
background-color: #fff;
}
}
}
.template-content > div {
font-size: 14px;
font-weight: 400;
letter-spacing: 0px;
line-height: 27px;
color: rgba(170, 170, 170, 1);
text-align: left;
}
.payIcon {
width: 43px;
height: 43px;
}
</style>

179
src/views/capital/payChannel/remittanceLDAgency.vue Normal file
View File

@ -0,0 +1,179 @@
<template>
<el-row>
<el-form autocapitalize="off" :inline="true" label-position="top" size="large" :model="form" ref="formRef">
<el-col :span="8" v-if="order && order.bank_account" >
<el-form-item :label="t('capital.bankNo')" >
<span class="info-text">{{ order.bank_account }}</span>
</el-form-item>
</el-col>
<el-col :span="8" v-if="order && order.bank_name" >
<el-form-item :label="t('capital.bankName')" >
<span class="info-text">{{ order.bank_name }}</span>
</el-form-item>
</el-col>
<el-col :span="8" v-if="order && order.sub_branch" >
<el-form-item :label="t('capital.bankSubName')" >
<span class="info-text">{{ order.sub_branch }}</span>
</el-form-item>
</el-col>
<el-col :span="8" v-if="order && order.phone" >
<el-form-item :label="t('capital.phone')" >
<span class="info-text">{{ order.phone }}</span>
</el-form-item>
</el-col>
<el-col :span="8" v-if="order && order.account_holder">
<el-form-item :label="t('capital.bankCards')" >
<span class="info-text">{{ order.account_holder }}</span>
</el-form-item>
</el-col>
<el-col :span="8" v-if="order && order.currency_type" >
<el-form-item :label="t('capital.currency_type')" >
<span class="info-text">{{ order.currency_type }}</span>
</el-form-item>
</el-col>
<el-col :span="8" v-if="order && order.currency_amount" >
<el-form-item :label="t('capital.currencyAmount')" >
<span class="currency-amount">{{ '' + order.currency_amount }}</span>
</el-form-item>
</el-col>
<el-col :span="24" v-if="countdown" >
<div style="width: 100%;padding: 50px 0;font-size: 24px;font-weight: 700;display: flex;justify-content: center;align-items: center;">
<span>{{ t('capital.d1') }}</span>
<span class="countdown-text">{{ countdown }}</span>
<span>{{ t('capital.d2') }}</span>
</div>
</el-col>
<el-col :span="24">
<div style="width: 100%;display: flex;justify-content: space-between;">
<el-button class="sub-btn dark-btn" type="primary" @click="lastStep" >{{ t('form.last') }}</el-button>
<el-button :loading="loading" class="sub-btn" type="primary" @click="handleSubmit" >{{ t('capital.sub') }}
<template #loading>
<l-ring-2 size="20" stroke="2" stroke-length="0.25" bg-opacity="0.1" speed="0.8" color="white" style="margin-right: 17px;" ></l-ring-2>
</template>
</el-button>
</div>
</el-col>
</el-form>
</el-row>
</template>
<script setup>
import { useLocale } from 'element-plus'
import { remittanceSave, remittanceQuery } from '@/api/remittance'
import { watch } from 'vue';
const { proxy } = getCurrentInstance();
const { t } = useLocale()
const emit = defineEmits(['last-step', 'submit'])
const props = defineProps({
data: Object
})
const order = ref(null)
const form = ref({
})
const countdown = ref(null)
const loading = ref(false)
watch(() => props.data, (n, o) => {
if (n && n.obj && n.obj.goldInId) {
remittanceQuery({
id: n.obj.goldInId
}).then(resp => {
order.value = resp.data
})
loadCountdown()
}
}, {
immediate: true,
deep: true
})
function loadCountdown() {
if (!props.data) {
return false
}
const cur_times = new Date().getTime()
const { pay_time } = props.data
const { times } = props.data.obj
let lefttime = parseInt((parseInt(pay_time)+parseInt(times)-parseInt(cur_times))/1000);//秒数
var h = parseInt(lefttime / (60 * 60) % 24);
var m = parseInt(lefttime / 60 % 60);
var s = parseInt(lefttime % 60);
h = addZero(h);
m = addZero(m);
s = addZero(s);
countdown.value = `${h}:${m}:${s}`
if (lefttime <= 0) {
countdown.value = "00:00:00"
return;
}
setTimeout(() => {
loadCountdown()
}, 1000);
}
function addZero(i) {
return i < 10 ? "0" + i: i + "";
}
function lastStep() {
remittanceSave({
id : props.data.obj.goldInId,
status: -2,
remark: 'manualCancel'
})
emit('last-step')
}
function handleSubmit() {
loading.value = true
remittanceSave({
id : props.data.obj.goldInId,
status: 0,
}).then(resp => {
emit('submit')
loading.value = false
}).catch(() => {
loading.value = false
})
}
</script>
<style lang="scss" scoped>
:deep(.el-form-item__label) {
font-size: 16px !important;
font-weight: 400 !important;
color: rgba(51, 51, 51, 1);
}
.info-text {
font-size: 20px;
font-weight: 700;
color: rgba(51, 51, 51, 1);
}
.countdown-text {
font-weight: 700;
font-size: 36px;
color: rgba(41, 187, 228, 1);
margin: 0 10px;
}
.sub-btn {
width: 40%;
}
.currency-amount {
font-size: 36px;
font-weight: 700;
letter-spacing: 0px;
line-height: 55.02px;
color: rgba(41, 187, 228, 1);
}
</style>