<template>
|
<div class="wrapper">
|
<div class="funds-info">
|
<div class="money-info">
|
<div class="money-info_left">
|
<div class="money-info_total">
|
<img
|
class="ino-ico"
|
v-show="$state.theme != 'red'"
|
src="../../assets/ico/zongzichan.png"
|
/>
|
<img
|
class="ino-ico"
|
v-show="$state.theme == 'red'"
|
src="../../assets/ico/zongzichan-red.png"
|
/>
|
<span class="ino-title">沪深资产总计</span>
|
<span class="ino-money">
|
<span style="font-size: .3rem"> </span>
|
{{
|
Number(
|
$store.state.userInfo.enableAmt +
|
$store.state.userInfo.allFreezAmt
|
).toFixed(2)
|
}}</span
|
>
|
</div>
|
<div class="money-info_progress">
|
<div
|
class="money-info_progress__inner"
|
style="width: `${progress}`%"
|
></div>
|
</div>
|
</div>
|
<div class="money-info_right">
|
<div class="money-info_botton redBtn" @click="toRecharge">充值</div>
|
<div class="money-info_botton blueBtn" @click="toCash">提现</div>
|
</div>
|
</div>
|
<div class="money-detail">
|
<div class="money-detail_title">
|
<span
|
style="font-size: .24rem; font-weight:bold;color:#fff"
|
:style="{ color: $state.theme == 'red' && '#000' }"
|
>沪深账户
|
<span
|
>(￥{{
|
Number(
|
$store.state.userInfo.enableAmt +
|
$store.state.userInfo.allFreezAmt
|
).toFixed(2)
|
}})</span
|
>
|
</span>
|
<span
|
style="font-size: .2rem"
|
:style="{ color: $state.theme == 'red' && '#000' }"
|
>资金互转
|
<i style="font-size: .2rem" class="iconfont icon-you"></i>
|
</span>
|
</div>
|
<div class="money-detail_acc">
|
<div class=" acc">
|
<img
|
src="../../assets/ico/hszzj.png"
|
style="width:.25rem;height:.3rem"
|
/>
|
<div class="acc-item">
|
<div class="acc-item_title">沪深总资金</div>
|
<div class="acc-item_num">
|
￥{{
|
Number(
|
$store.state.userInfo.enableAmt +
|
$store.state.userInfo.allFreezAmt
|
).toFixed(2)
|
}}
|
</div>
|
</div>
|
</div>
|
<div class=" acc">
|
<img
|
src="../../assets/ico/hsdjbzj.png"
|
style="width:.29rem;height:.25rem"
|
/>
|
<div class="acc-item">
|
<div class="acc-item_title">沪深冻结保证金</div>
|
<div class="acc-item_num">
|
￥{{
|
$store.state.hide ? "****" : $store.state.userInfo.allFreezAmt
|
}}
|
</div>
|
</div>
|
</div>
|
<div class=" acc">
|
<img
|
src="../../assets/ico/hskyzj.png"
|
style="width:.28rem;height:.28rem"
|
/>
|
<div class="acc-item">
|
<div class="acc-item_title">沪深可用资金</div>
|
<div class="acc-item_num">
|
￥{{
|
$store.state.hide ? "****" : $store.state.userInfo.enableAmt
|
}}
|
</div>
|
</div>
|
</div>
|
<div class=" acc">
|
<img
|
src="../../assets/ico/zyk.png"
|
style="width:.28rem;height:.28rem"
|
/>
|
<div class="acc-item">
|
<div class="acc-item_title">沪深持仓总盈亏</div>
|
<div class="acc-item_num">
|
￥{{
|
$store.state.hide
|
? "****"
|
: $store.state.userInfo.tradingAmount
|
}}
|
</div>
|
</div>
|
</div>
|
</div>
|
</div>
|
</div>
|
<div class="funds-list">
|
<div class="funds-list-title">
|
我的配资
|
</div>
|
<div class="funds-list-item" v-for="(i, k) in list.list" :key="k">
|
<div class="funds-list-item__title">
|
<span class="funds-list-item__title-left">
|
<!-- <span class="zhishu">
|
|
</span> -->
|
总操盘资金：
|
<span class="green">{{ i.totalTradingAmount }}</span>
|
</span>
|
<span class="funds-list-item__title-right"> </span>
|
</div>
|
<div class="funds-list-item__account clearfix">
|
<div class="col-xs-4 account">
|
<!-- 配资资金：17.63 股票可用金额：17.63 配资管理费：已结束 -->
|
<div class="order-title">配资资金</div>
|
<div class="order-money">{{ i.fundsAmount || 0 }}</div>
|
<div class="order-title">股票可用金额</div>
|
<div class="order-money">{{ i.totalTradingAmount || 0 }}</div>
|
<div class="order-title">配资管理费</div>
|
<div class="order-money">{{ i.manageFee || 0 }}</div>
|
</div>
|
<div class="col-xs-4 account">
|
<!-- 保证金：100 股票市值：0 股票盈亏：0 -->
|
<div class="order-title">保证金</div>
|
<div class="order-money">{{ i.margin || 0 }}</div>
|
<div class="order-title">股票市值</div>
|
<div class="order-money">{{ i.orderTotalPrice || 0 }}</div>
|
<div class="order-title">股票盈亏</div>
|
<div class="order-money">{{ i.allProfitAndLose || 0 }}</div>
|
</div>
|
<div class="col-xs-4 account">
|
<div class="order-title">状态</div>
|
<div class="order-money">
|
<span v-if="i.status == 0">待审核</span>
|
<span v-if="i.status == 1">操盘中</span>
|
<span v-if="i.status == 2">未通过</span>
|
<span v-if="i.status == 3">已到期</span>
|
<span v-if="i.status == 4">已结束</span>
|
</div>
|
<div class="peizi">
|
配资
|
</div>
|
</div>
|
</div>
|
</div>
|
<div class="funds-list-loadmore">
|
点击加载更多内容
|
</div>
|
</div>
|
</div>
|
</template>
|
|
<script>
|
import * as api from "../../axios/api";
|
|
export default {
|
data() {
|
return {
|
list: {
|
list: []
|
}
|
};
|
},
|
computed: {
|
progress() {
|
let per =
|
(this.$store.state.userInfo.userAmt /
|
(this.$store.state.userInfo.userAmt +
|
this.$store.state.userInfo.userIndexAmt)) *
|
100 >
|
100
|
? 100
|
: (this.$store.state.userInfo.userAmt /
|
(this.$store.state.userInfo.userAmt +
|
this.$store.state.userInfo.userIndexAmt)) *
|
100 >
|
100
|
? (this.$store.state.userInfo.userAmt /
|
(this.$store.state.userInfo.userAmt +
|
this.$store.state.userInfo.userIndexAmt)) *
|
100 >
|
100
|
? 100
|
: (this.$store.state.userInfo.userAmt /
|
(this.$store.state.userInfo.userAmt +
|
this.$store.state.userInfo.userIndexAmt)) *
|
100
|
: 100;
|
return per;
|
}
|
},
|
created() {
|
this.getlist();
|
},
|
methods: {
|
toRecharge() {
|
// 充值
|
this.$router.push("/recharge");
|
},
|
toCash() {
|
// 提现
|
this.$router.push("/cash");
|
},
|
async getlist() {
|
// 获取持仓列表
|
let opt = {
|
userId: 0,
|
pageNum: this.pageNum,
|
pageSize: this.pageSize
|
};
|
console.log(opt);
|
let data = await api.getUserApplyList(opt);
|
if (data.status === 0) {
|
this.list = data.data;
|
}
|
// else {
|
// this.$message.error(data.msg)
|
// }
|
}
|
}
|
};
|
</script>
|
|
<style lang="less" scoped>
|
body {
|
background-color: #16171d;
|
}
|
.wrapper {
|
padding-bottom: 0;
|
}
|
.funds-info {
|
display: block;
|
width: 6.9rem;
|
margin: 0.3rem;
|
padding: 0.6rem 0.2rem 0.12rem 0.2rem;
|
background-color: #1f2636;
|
border-radius: 0.1rem;
|
.money-info {
|
padding-bottom: 0.42rem;
|
display: flex;
|
justify-content: space-between;
|
border-bottom: 1px solid #fff2;
|
&_left {
|
flex: 1;
|
position: relative;
|
display: flex;
|
flex-direction: column;
|
justify-content: space-between;
|
.money-info_total {
|
height: 0.4rem;
|
display: flex;
|
align-items: center;
|
.ino-ico {
|
width: 0.38rem;
|
height: 0.38rem;
|
margin-right: 0.15rem;
|
}
|
.ino-title {
|
font-size: 0.24rem;
|
margin-right: 0.15rem;
|
}
|
.ino-money {
|
font-size: 0.4rem;
|
color: #009c46;
|
letter-spacing: 0;
|
font-family: lightnumber;
|
}
|
}
|
.money-info_progress {
|
width: 100%;
|
height: 0.1rem;
|
border-radius: 0.05rem;
|
background-color: #4e5a73;
|
&__inner {
|
background-color: #e6003e;
|
height: 0.1rem;
|
border-radius: 0.05rem;
|
}
|
}
|
}
|
&_right {
|
margin-left: 0.3rem;
|
width: 1.4rem;
|
height: 1.14rem;
|
display: flex;
|
flex-direction: column;
|
justify-content: space-between;
|
.money-info_botton {
|
width: 1.4rem;
|
height: 0.42rem;
|
line-height: 0.42rem;
|
font-size: 0.24rem;
|
color: #fff;
|
text-align: center;
|
&.redBtn {
|
background-color: #e6003e;
|
border-radius: 0.21rem;
|
}
|
&.blueBtn {
|
background-color: #024da1;
|
border-radius: 0.21rem;
|
}
|
}
|
}
|
}
|
.money-detail {
|
position: relative;
|
&_title {
|
padding: 0.3rem 0;
|
display: flex;
|
justify-content: space-between;
|
}
|
&_acc {
|
display: flex;
|
flex-wrap: wrap;
|
.acc {
|
padding: 0;
|
display: flex;
|
width: 50%;
|
.acc-item {
|
margin-left: 0.2rem;
|
margin-bottom: 0.3rem;
|
}
|
.acc-item_title {
|
font-size: 0.24rem;
|
color: #fff;
|
line-height: 0.3rem;
|
margin-bottom: 0.2rem;
|
}
|
.acc-item_num {
|
font-size: 0.3rem;
|
color: #e6003e;
|
font-family: lightnumber;
|
}
|
}
|
}
|
}
|
}
|
.funds-list {
|
display: block;
|
width: 6.9rem;
|
margin: 0.3rem;
|
padding: 0.12rem 0.2rem 0.12rem 0.2rem;
|
background-color: #1f2636;
|
border-radius: 0.1rem;
|
&-title {
|
text-align: center;
|
padding: 0.26rem 0;
|
color: #fff;
|
font-size: 0.25rem;
|
font-weight: bold;
|
}
|
&-item {
|
padding: 0.45rem 0.16rem;
|
border-top: 1px solid #fff2;
|
&__title {
|
display: flex;
|
justify-content: space-between;
|
margin-bottom: 0.35rem;
|
&-left {
|
font-size: 0.3rem;
|
.zhishu {
|
font-size: 0.2rem;
|
color: #fff;
|
padding: 0.05rem 0.15rem;
|
background-image: url(../../assets/ico/zhishu.png);
|
background-size: 100% 100%;
|
}
|
}
|
&-right {
|
font-size: 0.24rem;
|
}
|
}
|
.account {
|
padding: 0;
|
.order-title {
|
color: #aaaaaa;
|
font-size: 0.24rem;
|
margin-bottom: 0.1rem;
|
}
|
.order-money {
|
color: #fff;
|
font-size: 0.24rem;
|
margin-bottom: 0.13rem;
|
}
|
.peizi {
|
height: 0.34rem;
|
background-color: #138eb4;
|
border-radius: 0.17rem;
|
text-align: center;
|
width: 1.26rem;
|
line-height: 0.35rem;
|
}
|
}
|
}
|
&-loadmore {
|
height: 0.67rem;
|
line-height: 0.67rem;
|
text-align: center;
|
font-size: 0.27rem;
|
color: #fff;
|
background-color: #494951;
|
border-radius: 3px;
|
margin-bottom: 0.4rem;
|
}
|
}
|
.red-theme {
|
.funds-info {
|
background-color: #fff;
|
.ino-title {
|
color: #000;
|
}
|
.acc-item_title {
|
color: #000 !important;
|
}
|
}
|
.funds-list {
|
background-color: #fff;
|
&-title {
|
color: #000;
|
}
|
&-item {
|
border-top-color: #2222;
|
&__title-left {
|
color: #222;
|
}
|
.account .order-title {
|
color: #666666;
|
}
|
.account .order-money {
|
color: #000;
|
}
|
.account .peizi {
|
background-color: #bc1816;
|
color: #fff;
|
}
|
}
|
}
|
|
.funds-list-loadmore {
|
background-color: #bc1816;
|
}
|
}
|
</style>
|
