<template>
|
<div class="account">
|
<div class="tui-userInfo flex-between">
|
<div class="userinfo-box flex-center">
|
<img src="@/assets/img/avatar_.png" alt="" />
|
<div>{{ userInfo.phone }}</div>
|
</div>
|
<div class="tui-rightsetting flex-center">
|
<img
|
src="@/assets/img/services.png"
|
alt=""
|
@click="$store.dispatch('CustomerService')"
|
/>
|
<img src="@/assets/img/setting.png" alt="" />
|
</div>
|
</div>
|
|
<div class="tui-money">
|
<div class="normal flex-between">
|
<div>
|
<div class="text-xs">{{ $t("hometips") }}</div>
|
<div class="price">
|
{{ moneyData.symbol }} {{ moneyData.totalMoney }}
|
</div>
|
</div>
|
</div>
|
<div class="all-assets flex-between">
|
<div class="assets-item flex-center">
|
<div class="all-size">{{ $t("hj48") }}</div>
|
<div class="big-size">{{ moneyData.availableBalance }}</div>
|
</div>
|
<div class="assets-item flex-center">
|
<div class="all-size">{{ $t("账户盈亏") }}</div>
|
<div class="big-size">{{ moneyData.cumulativeProfitAndLoss }}</div>
|
</div>
|
<!-- <div class="assets-item flex-center">
|
<div class="all-size">{{ $t("今日盈亏") }}</div>
|
<div class="big-size">0.00</div>
|
</div> -->
|
</div>
|
</div>
|
|
<div class="tui-spendMoney flex-between">
|
<div class="tui-rightItem flex-center" v-for="i in tabs" :key="i.name">
|
<img :src="i.img" />
|
<div class="text">{{ i.name }}</div>
|
</div>
|
</div>
|
|
<my-order></my-order>
|
</div>
|
</template>
|
|
<script>
|
import tabHead from "@/components/tabHead.vue";
|
import myOrder from "@/page/user/myOrder.vue";
|
import * as api from "@/axios/api";
|
export default {
|
name: "account",
|
components: {
|
tabHead,
|
myOrder
|
},
|
data() {
|
return {
|
userInfo: {}, // 用户信息
|
moneyData: {}, // 账户金额
|
positionData: {}, // 账户持仓数据
|
tabs: [
|
{ name: this.$t("hj172"), img: require("@/assets/img/account_1.png") },
|
{ name: this.$t("hj177"), img: require("@/assets/img/account_2.png") },
|
{ name: this.$t("hj168"), img: require("@/assets/img/account_3.png") },
|
{ name: this.$t("hj162"), img: require("@/assets/img/account_4.png") },
|
{ name: this.$t("hj247"), img: require("@/assets/img/account_5.png") }
|
]
|
};
|
},
|
methods: {
|
// 获取账户金额
|
async getMoney() {
|
let data = await api.getMoney();
|
if (data.status === 0) {
|
this.moneyData = data.data[0];
|
}
|
},
|
// 获取账户持仓数据
|
async getMyPositionProfitAndLose() {
|
let data = await api.getMyPositionProfitAndLose();
|
if (data.status === 0) {
|
this.positionData = data.data;
|
}
|
},
|
// 获取用户信息
|
async getUserInfo() {
|
let data = await api.getUserInfodata();
|
if (data.status === 0) {
|
// 判断是否登录
|
this.$store.commit("dialogVisible", false);
|
this.$store.state.userInfo = data.data;
|
this.userInfo = data.data;
|
} else {
|
this.$store.commit("dialogVisible", true);
|
}
|
},
|
// 跳转
|
toPage(url) {
|
if (!url) return;
|
this.$router.push(url);
|
}
|
},
|
created() {
|
this.getUserInfo();
|
this.getMoney();
|
// this.getMyPositionProfitAndLose();
|
}
|
};
|
</script>
|
|
<style lang="less" scoped>
|
.account {
|
width: 100%;
|
min-height: 100vh;
|
padding: 0 0.475rem;
|
.tui-spendMoney {
|
font-size: 0.375rem;
|
margin-top: 0.3rem;
|
.tui-rightItem {
|
padding: 0.4rem 0;
|
width: 20%;
|
border-radius: 0.325rem;
|
flex-direction: column;
|
.text {
|
width: 100%;
|
font-size: 0.35rem;
|
font-weight: 500;
|
padding-top: 0.15rem;
|
text-align: center;
|
color: #b1b2b3;
|
}
|
img {
|
width: 0.825rem;
|
height: 0.825rem;
|
}
|
}
|
}
|
.tui-money {
|
margin-top: 0.65rem;
|
background: linear-gradient(90deg, #585fb4, #48529e);
|
border-radius: 0.175rem;
|
.all-assets {
|
width: 100%;
|
padding: 0.225rem 0 0.35rem;
|
justify-content: space-evenly;
|
.assets-item {
|
width: 33.33%;
|
flex-shrink: 0;
|
flex-direction: column;
|
.big-size {
|
font-size: 0.4rem;
|
color: #fff;
|
padding-top: 0.15rem;
|
}
|
.all-size {
|
font-size: 0.35rem;
|
color: #c4c7e4;
|
}
|
}
|
}
|
.normal {
|
padding: 0.375rem 0;
|
margin: 0 0.375rem;
|
position: relative;
|
.price {
|
font-size: 0.825rem;
|
line-height: 0.825rem;
|
font-weight: 500;
|
padding-top: 0.3rem;
|
color: #fff;
|
}
|
.text-xs {
|
font-size: 0.3rem;
|
color: #c7c9e6;
|
}
|
}
|
}
|
.tui-userInfo {
|
box-sizing: border-box;
|
padding-top: 0.95rem;
|
height: 2.1rem;
|
.tui-rightsetting {
|
img {
|
display: block;
|
width: 0.675rem;
|
height: 0.675rem;
|
margin: 0 0.175rem;
|
}
|
}
|
.userinfo-box {
|
font-size: 0.65rem;
|
font-weight: 700;
|
color: #fff;
|
img {
|
width: 1.2rem;
|
height: 1.2rem;
|
margin-right: 0.35rem;
|
}
|
}
|
}
|
}
|
</style>
|
