| | |
| | | <div class="overview-header"> |
| | | <div class="title"> |
| | | <!-- <i class="el-icon-lock"></i> --> |
| | | <img src="@/assets/images/fund-icon_b.png" alt="Account" /> |
| | | <img src="@/assets/images/account-icon.png" alt="Account" /> |
| | | <span>{{ $t("ao1") }}</span> |
| | | </div> |
| | | </div> |
| | | |
| | | <div class="flex-between" style="width: 100%"> |
| | | <div class="overview-content"> |
| | | <div class="overview-item"> |
| | | <div class="item-label">{{ $t("hj49") }}</div> |
| | | <div class="item-value"> |
| | | {{ moneyData.symbol }} {{ moneyData.totalMoney }} |
| | | </div> |
| | | </div> |
| | | <div class="overview-item"> |
| | | <div class="item-label">{{ $t("hj48") }}</div> |
| | | <div class="item-value"> |
| | | {{ moneyData.symbol }} {{ moneyData.availableBalance }} |
| | | </div> |
| | | </div> |
| | | <div class="overview-item"> |
| | | <div class="item-label">{{ $t("ff1") }}</div> |
| | | <div class="item-value"> |
| | | {{ moneyData.symbol }} {{ moneyData.freezeMoney }} |
| | | </div> |
| | | </div> |
| | | </div> |
| | | |
| | | <div class="action-buttons"> |
| | | <el-button |
| | | type="success" |
| | | class="deposit-btn" |
| | | @click="trasferireVisible = true" |
| | | > |
| | | <div class="flex-center"> |
| | | <img src="@/assets/images/account_hz.png" alt="Deposit" /> |
| | | {{ $t("劃轉") }} |
| | | </div> |
| | | </el-button> |
| | | <el-button |
| | | <!-- <el-button |
| | | type="success" |
| | | class="deposit-btn" |
| | | @click="depositDialogVisible = true" |
| | | @click="trasferireVisible = true" |
| | | > |
| | | <div class="flex-center"> |
| | | <img src="@/assets/images/account_hz.png" alt="Deposit" /> |
| | | {{ $t("劃轉") }} |
| | | </div> |
| | | </el-button> --> |
| | | <el-button type="primary" class="deposit-btn" @click="depositTip"> |
| | | <div class="flex-center"> |
| | | <img src="@/assets/images/account_rec.png" alt="Deposit" /> |
| | | {{ $t("dep") }} |
| | | </div> |
| | | </el-button> |
| | | <el-button class="withdraw-btn" @click="withdrawVisible = true"> |
| | | <el-button type="primary" class="withdraw-btn" @click="withdrawVisible = true"> |
| | | <div class="flex-center"> |
| | | <img src="@/assets/images/account_ret.png" alt="Withdraw" /> |
| | | {{ $t("hj177") }} |
| | |
| | | <div class="market-header"> |
| | | <h3>{{ $t("美国") }}</h3> |
| | | </div> |
| | | |
| | | <div class="overview-content" v-for="i in moneyData" :key="i.id" v-show="i.accectType == 'US'"> |
| | | <div class="overview-item"> |
| | | <div class="item-label">{{ $t("hj49") }}</div> |
| | | <div class="item-value">{{ i.symbol }} {{ i.totalMoney }}</div> |
| | | </div> |
| | | <div class="overview-item"> |
| | | <div class="item-label">{{ $t("hj48") }}</div> |
| | | <div class="item-value"> |
| | | {{ i.symbol }} {{ i.availableBalance }} |
| | | </div> |
| | | </div> |
| | | <div class="overview-item"> |
| | | <div class="item-label">{{ $t("ff1") }}</div> |
| | | <div class="item-value">{{ i.symbol }} {{ i.freezeMoney }}</div> |
| | | </div> |
| | | </div> |
| | | |
| | | <div class="market-content"> |
| | | <div class="market-row"> |
| | | <div class="market-label"> |
| | | <span class="market-tag sc_c">US</span> |
| | | <span>{{ $t("mv1") }}</span> |
| | | </div> |
| | | <div class="market-value">{{ positionData.usMarketValue }} USD</div> |
| | | </div> |
| | | <div class="market-row"> |
| | | <div class="market-label"> |
| | | <span class="market-tag sc_c">US</span> |
| | | <span>{{ $t("upl1") }}</span> |
| | | </div> |
| | | <div |
| | | class="market-value flex-center" |
| | | :class="`${positionData.usPositionEarnings < 0 ? 'r_c' : ''} ${ |
| | | positionData.usPositionEarnings > 0 ? 'lc_c' : '' |
| | | }`" |
| | | > |
| | | <img |
| | | src="@/assets/images/up.png" |
| | | alt="" |
| | | v-if="positionData.usPositionEarnings > 0" |
| | | /> |
| | | <img |
| | | src="@/assets/images/down.png" |
| | | alt="" |
| | | v-else-if="positionData.usPositionEarnings < 0" |
| | | /> |
| | | {{ positionData.usPositionEarnings }} |
| | | ({{ positionData.usPositionEarningsParent }}) |
| | | </div> |
| | | </div> |
| | | <div class="market-footer"> |
| | | <div class="position-btn sc_c" @click="positionOpen('US')"> |
| | | {{ $t("hj2") }} |
| | |
| | | </div> |
| | | </div> |
| | | </div> |
| | | |
| | | <div class="market-section sb_b"> |
| | | <div class="market-header"> |
| | | <h3>{{ $t("hk1") }}</h3> |
| | | </div> |
| | | <div class="market-content"> |
| | | <div class="market-row"> |
| | | <div class="market-label"> |
| | | <el-tag type="success" size="small" style="margin-right: 8px"> |
| | | HK |
| | | </el-tag> |
| | | <span>{{ $t("mv1") }}</span> |
| | | </div> |
| | | <div class="market-value">{{ positionData.hkMarketValue }} HKD</div> |
| | | </div> |
| | | <div class="market-row"> |
| | | <div class="market-label"> |
| | | <el-tag type="success" size="small" style="margin-right: 8px" |
| | | >HK</el-tag |
| | | > |
| | | <span>{{ $t("upl1") }}</span> |
| | | </div> |
| | | <div |
| | | class="market-value flex-center" |
| | | :class="`${positionData.hkPositionEarnings < 0 ? 'r_c' : ''} ${ |
| | | positionData.hkPositionEarnings > 0 ? 'lc_c' : '' |
| | | }`" |
| | | > |
| | | <img |
| | | src="@/assets/images/up.png" |
| | | alt="" |
| | | v-if="positionData.hkPositionEarnings > 0" |
| | | /> |
| | | <img |
| | | src="@/assets/images/down.png" |
| | | alt="" |
| | | v-else-if="positionData.hkPositionEarnings < 0" |
| | | /> |
| | | {{ positionData.hkPositionEarnings }} |
| | | ({{ positionData.hkPositionEarningsParent }}) |
| | | </div> |
| | | </div> |
| | | <div class="market-footer"> |
| | | <div class="position-btn sc_c" @click="positionOpen('HK')"> |
| | | {{ $t("hj2") }} |
| | | </div> |
| | | <div class="trade-log-btn lc_c" @click="tradeLogOpen('HK')"> |
| | | {{ $t("hj121") }} |
| | | </div> |
| | | </div> |
| | | </div> |
| | | </div> |
| | | </div> |
| | | <div class="market-data page-w a_card" style="padding-top: 0;"> |
| | | <div class="market-section sb_b"> |
| | | <div class="market-header"> |
| | | <h3>{{ $t("tw") }}</h3> |
| | | </div> |
| | | <div class="market-content"> |
| | | <div class="market-row"> |
| | | <div class="market-label"> |
| | | <el-tag type="success" size="small" style="margin-right: 8px"> |
| | | TW |
| | | </el-tag> |
| | | <span>{{ $t("mv1") }}</span> |
| | | </div> |
| | | <div class="market-value">{{ positionData.twMarketValue }} TWD</div> |
| | | </div> |
| | | <div class="market-row"> |
| | | <div class="market-label"> |
| | | <el-tag type="success" size="small" style="margin-right: 8px" |
| | | >TW</el-tag |
| | | > |
| | | <span>{{ $t("upl1") }}</span> |
| | | </div> |
| | | <div |
| | | class="market-value flex-center" |
| | | :class="`${positionData.twPositionEarnings < 0 ? 'r_c' : ''} ${ |
| | | positionData.twPositionEarnings > 0 ? 'lc_c' : '' |
| | | }`" |
| | | > |
| | | <img |
| | | src="@/assets/images/up.png" |
| | | alt="" |
| | | v-if="positionData.twPositionEarnings > 0" |
| | | /> |
| | | <img |
| | | src="@/assets/images/down.png" |
| | | alt="" |
| | | v-else-if="positionData.twPositionEarnings < 0" |
| | | /> |
| | | {{ positionData.twPositionEarnings }} |
| | | ({{ positionData.twPositionEarningsParent }}) |
| | | </div> |
| | | </div> |
| | | <div class="market-footer"> |
| | | <div class="position-btn sc_c" @click="positionOpen('TW')"> |
| | | {{ $t("hj2") }} |
| | | </div> |
| | | <div class="trade-log-btn lc_c" @click="tradeLogOpen('TW')"> |
| | | {{ $t("hj121") }} |
| | | </div> |
| | | </div> |
| | | </div> |
| | | </div> |
| | | |
| | | <div class="market-section sb_b"> |
| | | <div class="market-header"> |
| | | <h3>{{ $t("id1") }}</h3> |
| | | </div> |
| | | <div class="market-content"> |
| | | <div class="market-row"> |
| | | <div class="market-label"> |
| | | <el-tag type="success" size="small" style="margin-right: 8px"> |
| | | IN |
| | | </el-tag> |
| | | <span>{{ $t("mv1") }}</span> |
| | | </div> |
| | | <div class="market-value">{{ positionData.inMarketValue }} INR</div> |
| | | </div> |
| | | <div class="market-row"> |
| | | <div class="market-label"> |
| | | <el-tag type="success" size="small" style="margin-right: 8px" |
| | | >IN</el-tag |
| | | > |
| | | <span>{{ $t("upl1") }}</span> |
| | | </div> |
| | | <div |
| | | class="market-value flex-center" |
| | | :class="`${positionData.inPositionEarnings < 0 ? 'r_c' : ''} ${ |
| | | positionData.inPositionEarnings > 0 ? 'lc_c' : '' |
| | | }`" |
| | | > |
| | | <img |
| | | src="@/assets/images/up.png" |
| | | alt="" |
| | | v-if="positionData.inPositionEarnings > 0" |
| | | /> |
| | | <img |
| | | src="@/assets/images/down.png" |
| | | alt="" |
| | | v-else-if="positionData.inPositionEarnings < 0" |
| | | /> |
| | | {{ positionData.inPositionEarnings }} |
| | | ({{ positionData.inPositionEarningsParent }}) |
| | | </div> |
| | | </div> |
| | | <div class="market-footer"> |
| | | <div class="position-btn sc_c" @click="positionOpen('IN')"> |
| | | {{ $t("hj2") }} |
| | | </div> |
| | | <div class="trade-log-btn lc_c" @click="tradeLogOpen('IN')"> |
| | | {{ $t("hj121") }} |
| | | </div> |
| | | </div> |
| | | </div> |
| | | </div> |
| | | </div> |
| | | |
| | | <!-- 账户变更详情 --> |
| | | <div class="account-details page-w a_card"> |
| | | <div class="account-details-left"> |
| | | <div |
| | | <!-- <div |
| | | class="nav_item" |
| | | :class="`${nav == 1 ? 'active' : ''}`" |
| | | @click="navChange(1)" |
| | | > |
| | | {{ $t("账户变动记录") }} |
| | | </div> |
| | | <div |
| | | class="nav_item" |
| | | :class="`${nav == 2 ? 'active' : ''}`" |
| | | @click="navChange(2)" |
| | | > |
| | | </div> --> |
| | | <div class="nav_item" :class="`${nav == 2 ? 'active' : ''}`" @click="navChange(2)"> |
| | | {{ $t("dawr") }} |
| | | </div> |
| | | <div |
| | | <!-- <div |
| | | class="nav_item" |
| | | :class="`${nav == 3 ? 'active' : ''}`" |
| | | @click="navChange(3)" |
| | | > |
| | | {{ $t("aqt1") }} |
| | | </div> |
| | | <div |
| | | </div> --> |
| | | <!-- <div |
| | | class="nav_item" |
| | | :class="`${nav == 4 ? 'active' : ''}`" |
| | | @click="navChange(4)" |
| | | > |
| | | {{ $t("大宗交易订单") }} |
| | | </div> |
| | | <div |
| | | </div> --> |
| | | <!-- <div |
| | | class="nav_item" |
| | | :class="`${nav == 5 ? 'active' : ''}`" |
| | | @click="navChange(5)" |
| | | > |
| | | {{ $t("io1") }} |
| | | </div> |
| | | <div |
| | | </div> --> |
| | | <!-- <div |
| | | class="nav_item" |
| | | :class="`${nav == 6 ? 'active' : ''}`" |
| | | @click="navChange(6)" |
| | | > |
| | | {{ $t("基金订单") }} |
| | | </div> |
| | | <div |
| | | class="nav_item" |
| | | :class="`${nav == 7 ? 'active' : ''}`" |
| | | @click="navChange(7)" |
| | | > |
| | | </div> --> |
| | | <div class="nav_item" :class="`${nav == 7 ? 'active' : ''}`" @click="navChange(7)"> |
| | | {{ $t("fnv") }} |
| | | </div> |
| | | <div |
| | | class="nav_item" |
| | | :class="`${nav == 8 ? 'active' : ''}`" |
| | | @click="navChange(8)" |
| | | > |
| | | <div class="nav_item" :class="`${nav == 8 ? 'active' : ''}`" @click="navChange(8)"> |
| | | {{ $t("bc") }} |
| | | </div> |
| | | <div |
| | | class="nav_item" |
| | | :class="`${nav == 9 ? 'active' : ''}`" |
| | | @click="navChange(9)" |
| | | > |
| | | <div class="nav_item" :class="`${nav == 9 ? 'active' : ''}`" @click="navChange(9)"> |
| | | {{ $t("hj10") }} |
| | | </div> |
| | | </div> |
| | |
| | | </div> |
| | | </div> |
| | | |
| | | <!-- 划转弹窗 --> |
| | | <Trasferire |
| | | :dialogVisible.sync="trasferireVisible" |
| | | v-if="trasferireVisible" |
| | | @onClose="getMoney" |
| | | :maxNum="Math.floor(moneyData.availableBalance * 100) / 100" |
| | | ></Trasferire> |
| | | <!-- 划转弹窗 --> |
| | | <Trasferire :dialogVisible.sync="trasferireVisible" v-if="trasferireVisible" @onClose="getMoney" |
| | | :moneyData="moneyData"></Trasferire> |
| | | <!-- 充值弹窗 --> |
| | | <Deposit |
| | | :dialogVisible.sync="depositDialogVisible" |
| | | v-if="depositDialogVisible" |
| | | @onClose="getMoney" |
| | | ></Deposit> |
| | | |
| | | <Deposit :dialogVisible.sync="depositDialogVisible" v-if="depositDialogVisible" @onClose="getMoney"></Deposit> |
| | | |
| | | <!-- 提现弹窗 --> |
| | | <Withdraw |
| | | :dialogVisible.sync="withdrawVisible" |
| | | v-if="withdrawVisible" |
| | | @onClose="getMoney" |
| | | :maxNum="Math.floor(moneyData.availableBalance * 100) / 100" |
| | | ></Withdraw> |
| | | <Withdraw :dialogVisible.sync="withdrawVisible" v-if="withdrawVisible" @onClose="getMoney" :moneyData="moneyData"> |
| | | </Withdraw> |
| | | |
| | | <!-- 贷款申请弹窗 --> |
| | | <loan-application |
| | | :dialogVisible.sync="applicationVisible" |
| | | v-if="applicationVisible" |
| | | ></loan-application> |
| | | <loan-application :dialogVisible.sync="applicationVisible" v-if="applicationVisible"></loan-application> |
| | | |
| | | <!-- 贷款记录弹窗 --> |
| | | <loan-records |
| | | :dialogVisible.sync="recordsVisible" |
| | | v-if="recordsVisible" |
| | | ></loan-records> |
| | | <loan-records :dialogVisible.sync="recordsVisible" v-if="recordsVisible"></loan-records> |
| | | |
| | | <!-- 交易列表弹窗(包括us和mx的) --> |
| | | <Position |
| | | :dialogVisible.sync="positionVisible" |
| | | v-if="positionVisible" |
| | | :type="positionType" |
| | | ></Position> |
| | | <Position :dialogVisible.sync="positionVisible" v-if="positionVisible" :type="positionType" :moneyData="moneyData" |
| | | @pc="pc"></Position> |
| | | |
| | | <!-- 交易记录弹窗(包括us和mx的) --> |
| | | <trade-log |
| | | :dialogVisible.sync="tradelogVisible" |
| | | v-if="tradelogVisible" |
| | | :type="positionType" |
| | | ></trade-log> |
| | | <trade-log :dialogVisible.sync="tradelogVisible" v-if="tradelogVisible" :type="positionType"></trade-log> |
| | | </div> |
| | | </template> |
| | | |
| | | <script> |
| | | let teimss = null; |
| | | import * as api from "@/axios/api"; |
| | | import dawr from "./components/dawr.vue"; |
| | | import acd from "./components/acd.vue"; |
| | |
| | | lp, |
| | | bto, |
| | | Deposit, |
| | | Trasferire, |
| | | Trasferire, |
| | | Withdraw, |
| | | LoanApplication, |
| | | LoanRecords, |
| | |
| | | }, |
| | | data() { |
| | | return { |
| | | nav: 1, |
| | | moneyData: {}, // 账户金额 |
| | | nav: 2, |
| | | moneyData: [], // 账户金额 |
| | | userInfo: {}, // 用户信息 |
| | | positionData: {}, // 账户持仓数据 |
| | | depositAmount: "", // 存款金额 |
| | | depositMethod: "Bank Transfer", // 存款方式 |
| | | depositDialogVisible: false, // 存款弹窗显示状态 |
| | | trasferireVisible: false, // 存款弹窗显示状态 |
| | | trasferireVisible: false, // 存款弹窗显示状态 |
| | | withdrawVisible: false, // 存款弹窗显示状态 |
| | | applicationVisible: false, // 申请贷款弹窗显示状态 |
| | | recordsVisible: false, // 贷款记录弹窗显示状态 |
| | |
| | | |
| | | this.init(); |
| | | }, |
| | | beforeDestroy() { |
| | | clearInterval(teimss); |
| | | }, |
| | | methods: { |
| | | // 初始化 |
| | | init() { |
| | | this.getMoney(); |
| | | this.getInfo(); |
| | | this.getMyPositionProfitAndLose(); |
| | | |
| | | clearInterval(teimss); |
| | | teimss = setInterval(() => { |
| | | this.getMoney(); |
| | | }, 3000); |
| | | }, |
| | | // 获取账户金额 |
| | | async getMoney() { |
| | | let data = await api.getMoney(); |
| | | if (data.status === 0) { |
| | | this.moneyData = data.data[0]; |
| | | this.moneyData = data.data; |
| | | } |
| | | }, |
| | | // 获取用户信息 |
| | | async getInfo() { |
| | | let data = await api.getUserInfo(); |
| | | this.userInfo = data.data; |
| | | }, |
| | | // 获取账户持仓数据 |
| | | async getMyPositionProfitAndLose() { |
| | | let data = await api.getMyPositionProfitAndLose(); |
| | | if (data.data) { |
| | | this.positionData = data.data; |
| | | } |
| | | }, |
| | | // 交易列表弹窗打开 |
| | | positionOpen(type) { |
| | |
| | | this.nav = val; |
| | | } |
| | | }, |
| | | // 存款提示 |
| | | depositTip() { |
| | | this.$message({ |
| | | message: this.$t("充值提示"), |
| | | type: "warning", |
| | | }); |
| | | }, |
| | | // 持仓列表关闭,打开平仓列表 |
| | | pc() { |
| | | this.positionVisible = false; |
| | | this.tradelogVisible = true; |
| | | }, |
| | | }, |
| | | }; |
| | | </script> |
| | | |
| | | <style lang="scss" scoped> |
| | | $s_c: #c4d600; |
| | | $s_c: #287dff; |
| | | $l_c: #07c160; |
| | | |
| | | // .account-container {} |
| | | ::v-deep .el-drawer__header > :first-child { |
| | | ::v-deep .el-drawer__header> :first-child { |
| | | font-size: 18px; |
| | | font-weight: 700; |
| | | color: #333; |
| | |
| | | .overview-content { |
| | | display: flex; |
| | | justify-content: space-between; |
| | | margin-bottom: 20px; |
| | | width: 50%; |
| | | // margin-bottom: 20px; |
| | | padding: 15px 20px 0; |
| | | } |
| | | |
| | | .overview-item { |
| | |
| | | } |
| | | |
| | | .item-label { |
| | | color: #666; |
| | | color: #ccc; |
| | | font-size: 14px; |
| | | margin-bottom: 10px; |
| | | } |
| | |
| | | .item-value { |
| | | font-size: 20px; |
| | | font-weight: bold; |
| | | color: #333; |
| | | color: #eee; |
| | | } |
| | | |
| | | .action-buttons { |
| | | display: flex; |
| | | justify-content: flex-end; |
| | | justify-content: flex-start; |
| | | margin-bottom: 20px; |
| | | width: 50%; |
| | | |
| | |
| | | } |
| | | |
| | | .deposit-btn { |
| | | background-color: $l_c !important; |
| | | border-color: $l_c !important; |
| | | margin-right: 10px; |
| | | height: 40px; |
| | | padding: 0 20px; |
| | |
| | | color: #fff !important; |
| | | height: 40px; |
| | | padding: 0 20px; |
| | | } |
| | | |
| | | .deposit-btn:hover, |
| | | .withdraw-btn:hover { |
| | | opacity: 0.5; |
| | | } |
| | | |
| | | .loan-info { |
| | |
| | | |
| | | .market-section { |
| | | flex: 1; |
| | | background-color: #fff; |
| | | border-radius: 16px; |
| | | overflow: hidden; |
| | | border: 1px solid #e1e1e1; |
| | | border: 1px solid #777; |
| | | } |
| | | |
| | | .market-header { |
| | |
| | | |
| | | /* 账户变更详情样式 */ |
| | | .account-details { |
| | | background-color: #fff; |
| | | // background-color: #fff; |
| | | border-radius: 8px; |
| | | display: flex; |
| | | gap: 24px; |
| | | padding: 32px; |
| | | border-top: 1px solid #f5f5f5; |
| | | border-top: 1px solid #555; |
| | | |
| | | .account-details-right { |
| | | flex: 3; |