<template>
|
<div class="wrapper">
|
<!-- <div class="header">
|
<mt-header :title="$t('账户资金互转')">
|
<router-link to="/user" slot="left">
|
<mt-button icon="back"></mt-button>
|
</router-link>
|
</mt-header>
|
</div> -->
|
<!-- <van-nav-bar
|
:placeholder="true"
|
:safe-area-inset-top="true"
|
:title="$t('账户资金互转')"
|
left-arrow
|
@click-left="onClickLeft"
|
>
|
</van-nav-bar>
|
<mt-navbar v-model="selected">
|
<mt-tab-item id="1">{{ $t("沙特账户转黄金原油账户") }}</mt-tab-item>
|
<mt-tab-item id="2">{{ $t("黄金原油账户转沙特账户") }}</mt-tab-item> -->
|
<!-- <mt-tab-item v-if="this.$store.state.settingForm.futuresDisplay" id="3">融资转期货</mt-tab-item> -->
|
<!-- <mt-tab-item v-if="this.$store.state.settingForm.futuresDisplay" id="4">期货转融资</mt-tab-item> -->
|
<!-- </mt-navbar>
|
<mt-tab-container class="order-list" v-model="selected">
|
<mt-tab-container-item id="1">
|
<div class="form-block">
|
<mt-field
|
:label="$t('可转金额')"
|
:placeholder="$t('可转金额')"
|
type="text"
|
disabled
|
v-model="myMoney[0].availableBalance"
|
>
|
</mt-field>
|
</div>
|
<div class="form-block">
|
<mt-field
|
:label="$t('转账金额')"
|
name="amt"
|
v-model="form.account1"
|
:placeholder="$t('请输入转账金额')"
|
type="text"
|
>
|
<span @click="selectAll1">{{ $t("hj60") }}</span>
|
</mt-field>
|
</div>
|
<!-- <div class="form-block">
|
<mt-field label="资金密码" placeholder="资金密码" type="password" v-model="form.password"></mt-field>
|
</div>
|
<p class="prompt">资金密码默认为登录密码</p> -->
|
<!-- <div class="btnbox">
|
<span class="text-center btnok loginout" @click="tosubmit">{{
|
$t("确认转入黄金原油账户")
|
}}</span>
|
</div> -->
|
<!-- <van-button
|
class="but"
|
type="primary"
|
style="margin-top: 1.04rem; margin-bottom: 1.04rem"
|
@click="tosubmit"
|
>{{ $t("确认") }}</van-button
|
>
|
</mt-tab-container-item>
|
<mt-tab-container-item id="2">
|
<div class="form-block">
|
<mt-field
|
:label="$t('可转金额')"
|
:placeholder="$t('可转金额')"
|
type="text"
|
disabled
|
v-model="myMoney[1].availableBalance"
|
></mt-field>
|
</div> -->
|
<!-- <div class="form-block">
|
<mt-field
|
:label="$t('转账金额')"
|
v-model="form.account2"
|
:placeholder="$t('请输入转账金额')"
|
type="text"
|
>
|
<span @click="selectAll2">{{ $t("hj60") }}</span>
|
</mt-field>
|
</div> -->
|
<!-- <div class="btnbox">
|
<span class="text-center btnok loginout" @click="tosubmit">{{
|
$t("确认转入沙特账户")
|
}}</span>
|
</div> -->
|
<!-- <van-button
|
class="but"
|
type="primary"
|
style="margin-top: 1.04rem; margin-bottom: 1.04rem"
|
@click="tosubmit"
|
>{{ $t("确认") }}</van-button
|
>
|
</mt-tab-container-item> -->
|
<!-- <mt-tab-container-item id="3">
|
<div class="form-block">
|
<mt-field label="可转金额" placeholder="可转金额" type="text" disabled v-model="this.$store.state.userInfo.enableAmt">
|
</mt-field>
|
</div>
|
<div class="form-block">
|
<mt-field label="转账金额" v-model="form.account3" placeholder="请输入转账金额" type="text">
|
<span @click="selectAll3">全部</span>
|
</mt-field>
|
</div>
|
<div class="btnbox">
|
<span class="text-center btnok loginout" @click="tosubmit">确认转入黄金原油账户</span>
|
</div>
|
</mt-tab-container-item>
|
-->
|
<!-- <mt-tab-container-item id="4">
|
<div class="form-block">
|
<mt-field label="可转金额" placeholder="可转金额" type="text" disabled
|
v-model="this.$store.state.userInfo.enableFuturesAmt"></mt-field>
|
</div>
|
<div class="form-block">
|
<mt-field label="转账金额" v-model="form.account4" placeholder="请输入转账金额" type="text">
|
<span @click="selectAll4">全部</span>
|
</mt-field>
|
</div>
|
<div class="btnbox">
|
<span class="text-center btnok loginout" @click="tosubmit">确认转入沙特账户</span>
|
</div>
|
</mt-tab-container-item>
|
-->
|
<!-- </mt-tab-container> -->
|
|
<div class="exchange-wrapper">
|
<van-nav-bar
|
:title="$t('账户资金互转')"
|
left-arrow
|
@click-left="$router.go(-1)"
|
/>
|
|
<van-form @submit="onSubmit">
|
<!-- 从货币 -->
|
<van-cell-group>
|
<van-field
|
v-model="fromAmount"
|
type="number"
|
:label="$t('转出金额')"
|
:placeholder="$t('请输入转出金额')"
|
:rules="[{ required: true, message: $t('请输入转出金额') }]"
|
>
|
<template #button>
|
<van-dropdown-menu active-color="#1989fa">
|
<van-dropdown-item
|
v-model="fromCurrency"
|
:options="currencyOptions"
|
disabled
|
/>
|
</van-dropdown-menu>
|
</template>
|
</van-field>
|
<van-field
|
v-model="myMoney[my_availableBalance].availableBalance"
|
:label="$t('可用余额')"
|
disabled
|
/>
|
</van-cell-group>
|
|
<!-- 兑换箭头 -->
|
<div class="exchange-icon">
|
<van-icon name="exchange" size="24" @click="switchCurrency" />
|
</div>
|
|
<!-- 到货币 -->
|
<van-cell-group>
|
<van-field
|
v-model="toAmount"
|
type="number"
|
:label="$t('转入金额')"
|
:placeholder="$t('转入金额')"
|
disabled
|
>
|
<template #button>
|
<van-dropdown-menu active-color="#1989fa">
|
<van-dropdown-item
|
v-model="toCurrency"
|
:options="currencyOptions"
|
disabled
|
/>
|
</van-dropdown-menu>
|
</template>
|
</van-field>
|
</van-cell-group>
|
|
<!-- 汇率显示 -->
|
<!-- <van-cell title="汇率" :value="exchangeRate" /> -->
|
|
<!-- 提交按钮 -->
|
<div style="margin: 16px;">
|
<van-button
|
class="but"
|
type="primary"
|
style="margin-top: 1.04rem; margin-bottom: 1.04rem"
|
native-type="submit"
|
>
|
{{ $t("确认兑换") }}
|
</van-button>
|
</div>
|
</van-form>
|
</div>
|
</div>
|
</template>
|
|
<script>
|
// import '@/assets/style/common.less'
|
import * as api from "@/axios/api";
|
import { Toast } from "mint-ui";
|
|
export default {
|
components: {},
|
data() {
|
return {
|
selected: "1", // 选中
|
|
form: {
|
account1: "",
|
account2: "",
|
account3: "",
|
account4: "",
|
password: ""
|
},
|
userInfo: {
|
realName: ""
|
},
|
myMoney: "",
|
my_availableBalance: 0,
|
fromCurrency: "USDT",
|
toCurrency: "ST",
|
fromAmount: "",
|
toAmount: "",
|
fromBalance: "1000.00",
|
exchangeRate: "1 USDT = 100 ST",
|
currencyOptions: [
|
{ text: "USDT", value: "USDT" },
|
{ text: "ST", value: "ST" }
|
// { text: "欧元(EUR)", value: "EUR" },
|
// { text: "英镑(GBP)", value: "GBP" }
|
]
|
};
|
},
|
watch: {
|
fromAmount() {
|
this.calculateAmount();
|
},
|
fromCurrency() {
|
this.calculateAmount();
|
},
|
toCurrency() {
|
this.calculateAmount();
|
}
|
},
|
computed: {
|
toCurrencyDisabled() {
|
return this.currencyOptions.length <= 1;
|
}
|
},
|
created() {
|
this.getProductSetting();
|
this.getMoney();
|
},
|
mounted() {
|
if (this.$route.query.type) {
|
this.selected = this.$route.query.type + "";
|
}
|
this.getUserInfo();
|
},
|
methods: {
|
onSubmit() {
|
// 处理兑换逻辑
|
console.log(
|
"提交兑换:",
|
this.fromAmount,
|
this.fromCurrency,
|
"->",
|
this.toAmount,
|
this.toCurrency
|
);
|
|
this.tosubmit();
|
},
|
switchCurrency() {
|
// 切换货币方向
|
const temp = this.fromCurrency;
|
this.fromCurrency = this.toCurrency;
|
this.toCurrency = temp;
|
|
if (this.fromCurrency === "ST") {
|
this.my_availableBalance = 0;
|
} else if (this.fromCurrency === "USDT" || this.fromCurrency === "USD") {
|
this.my_availableBalance = 1;
|
}
|
console.log(this.myMoney[this.my_availableBalance].availableBalance);
|
this.calculateAmount();
|
},
|
calculateAmount() {
|
// 这里应该调用汇率API计算金额
|
// 示例简单计算
|
if (this.fromAmount && this.fromCurrency && this.toCurrency) {
|
const rate =
|
this.fromCurrency === "USDT" && this.toCurrency === "ST" ? 100 : 1;
|
this.toAmount = (this.fromAmount * rate).toFixed(2);
|
}
|
},
|
onClickLeft() {
|
this.$router.push("/user");
|
},
|
async getProductSetting() {
|
let data = await api.getProductSetting();
|
if (data.status === 0) {
|
this.$store.state.settingForm = data.data;
|
if (!this.$store.state.settingForm.indexDisplay) {
|
this.selected = "3";
|
}
|
} else {
|
this.$message.error(data.msg);
|
}
|
},
|
selectAll1() {
|
// 选择全部
|
this.form.account1 = this.myMoney[0].availableBalance;
|
},
|
selectAll2() {
|
// 选择全部
|
this.form.account2 = this.myMoney[1].availableBalance;
|
},
|
selectAll3() {
|
// 选择全部
|
this.form.account3 = this.$store.state.userInfo.enableAmt;
|
},
|
selectAll4() {
|
// 选择全部
|
this.form.account4 = this.$store.state.userInfo.enableFuturesAmt;
|
},
|
async tosubmit() {
|
// 融资转指数
|
let opt = {
|
amt: this.fromAmount,
|
// type: this.selected, // 1 融资转指数 2 指数转融资
|
userId: this.$store.state.userInfo.id, // 用户id
|
disbursementAccount: this.fromCurrency, // 划出账户
|
depositAccount: this.toCurrency // 划入账户
|
};
|
let data = await api.transfer(opt);
|
if (data.status === 0) {
|
Toast(data.msg);
|
this.$router.push("/user");
|
} else {
|
Toast(data.msg);
|
}
|
},
|
async getUserInfo() {
|
// 获取用户信息
|
let data = await api.getUserInfo();
|
if (data.status === 0) {
|
this.$store.state.userInfo = data.data;
|
} else {
|
Toast(data.msg);
|
}
|
},
|
async getMoney() {
|
let data = await api.getMoney();
|
if (data.status === 0) {
|
this.myMoney = data.data;
|
if (this.fromCurrency === "ST") {
|
this.my_availableBalance = 0;
|
} else if (
|
this.fromCurrency === "USDT" ||
|
this.fromCurrency === "USD"
|
) {
|
this.my_availableBalance = 1;
|
}
|
} else {
|
Toast(data.msg);
|
}
|
}
|
}
|
};
|
</script>
|
<style lang="less" scoped>
|
.payclass {
|
width: 150px;
|
height: 40px;
|
border-radius: 5px;
|
border: 1px solid #e5e8ed;
|
text-align: center;
|
line-height: 40px;
|
}
|
.but {
|
width: 95%;
|
color: #ffffff;
|
background-color: #1989fa;
|
border-radius: 8px;
|
height: 66px;
|
font-size: 22px;
|
margin-left: 2.5%;
|
}
|
.is-selected .mint-tab-item-label:hover {
|
text-decoration: none;
|
}
|
|
.wrapper /deep/ .mint-tab-item-label {
|
font-size: 0.264rem;
|
}
|
|
.mint-navbar .mint-tab-item.is-selected {
|
// color: #d50000;
|
// border-bottom: 2px solid #d50000;
|
text-decoration: none;
|
margin-bottom: 0;
|
}
|
|
.order-list {
|
/deep/ .mint-cell {
|
background: initial !important;
|
}
|
/deep/ .mint-cell .mint-cell-text {
|
color: #000 !important;
|
}
|
/deep/ .mint-cell-wrapper {
|
line-height: 1 !important;
|
}
|
}
|
|
.prompt {
|
padding: 0.3rem 0 0.2rem 0.7rem;
|
}
|
|
.exchange-wrapper {
|
padding-bottom: 20px;
|
}
|
|
.exchange-icon {
|
display: flex;
|
justify-content: center;
|
margin: 15px 0;
|
color: #1989fa;
|
}
|
|
.van-dropdown-menu {
|
width: 120px;
|
height: 44px;
|
}
|
</style>
|
