From 0f6b38dfdfe93a1d630d984417af2fbb03c7e0ff Mon Sep 17 00:00:00 2001
From: PC-20250623MANY\Administrator <344137771@qq.com>
Date: Mon, 15 Sep 2025 15:29:26 +0800
Subject: [PATCH] 2
---
src/page/user/account.vue | 492 +++++++++++++++++++++++------------------------------
1 files changed, 214 insertions(+), 278 deletions(-)
diff --git a/src/page/user/account.vue b/src/page/user/account.vue
index b140d42..8d49f1c 100644
--- a/src/page/user/account.vue
+++ b/src/page/user/account.vue
@@ -1,127 +1,154 @@
<template>
<div class="account">
- <tab-head :leftShow="false">
- <template slot="left">
- <div class="user flex-start">
- <img src="@/assets/img/img_log_home.png" alt="" />
- <div>
- <p class="real_name">{{ userInfo.realName }}</p>
- <p class="phone">ID:{{ userInfo.phone }}</p>
+ <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=""
+ @click="$router.push('/setting')"
+ />
+ </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>
- </template>
- </tab-head>
-
- <div class="wallet">
- <div class="wallet_title flex-start">
- <img src="@/assets/img/钱袋.png" alt="" />
- <span>{{ $t("hj244") }}</span>
</div>
-
- <div class="wallet_price flex-between">
- <span>MX$ 16,407,946.28</span>
- <span>MX$ 3,247,918.14</span>
+ <div class="normal flex-between">
+ <div>
+ <div class="text-xs">{{ $t("每週盈利") }}</div>
+ <div class="price" style="font-size: .6rem;">
+ {{ moneyData.symbol }} {{ weeklyProfit }}
+ </div>
+ </div>
</div>
-
- <div class="wallet_price_name flex-between">
- <span>{{ $t("hometips") }}</span>
- <span>{{ $t("hj48") }}</span>
+ <div class="normal flex-between">
+ <div>
+ <div class="text-xs">{{ $t("hj48") }}</div>
+ <div class="price" style="font-size: .3rem;">
+ {{ moneyData.symbol }} {{ moneyData.availableBalance }}
+ </div>
+ </div>
</div>
+ <div class="normal flex-between">
+ <div>
+ <div class="text-xs">{{ $t("平仓盈亏") }}</div>
+ <div class="price" style="font-size: .3rem;">
+ {{ moneyData.symbol }} {{ moneyData.cumulativeProfitAndLoss }}
+ </div>
+ </div>
+ </div>
+ <!-- <div class="all-assets flex-center">
+ <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" style="align-items: end;">
+ <div class="all-size">{{ $t("平仓盈亏") }}</div>
+ <div class="big-size">{{ moneyData.cumulativeProfitAndLoss }}</div>
+ </div>
+ </div> -->
+ </div>
- <div class="wallet_record flex-center">
- <span>{{ $t("账户变动记录") }}</span>
- <van-icon name="play" size=".5em" />
+ <div class="tui-spendMoney flex-between-start">
+ <div class="tui-rightItem flex-center" @click="czts">
+ <img src="@/assets/img/account_1.png" />
+ <div class="text">{{ this.$t("hj172") }}</div>
+ </div>
+ <div
+ class="tui-rightItem flex-center"
+ v-for="i in tabs"
+ :key="i.name"
+ @click="toPage(i.path)"
+ >
+ <img :src="i.img" />
+ <div class="text">{{ i.name }}</div>
</div>
</div>
- <div class="account_tabs flex-between">
- <div class="tab flex-center ">
- <img src="@/assets/img/cz.png" alt="" />
- <span>{{ $t("hj172") }}</span>
- </div>
- <div class="tab flex-center ">
- <img src="@/assets/img/tx.png" alt="" />
- <span>{{ $t("subdka") }}</span>
- </div>
- <div class="tab flex-center ">
- <img src="@/assets/img/jl.png" alt="" />
- <span>{{ $t("jl") }}</span>
- </div>
- </div>
-
- <div class="account_card">
- <div class="held_head flex-between">
- <div class="flex-center head_left">
- <span>{{ $t("hj2") }}</span>
- <img src="@/assets/img/cc_ss.png" alt="" />
- </div>
- <div class="flex-center head_right">
- <span>{{ $t("jl") }}</span>
- <img src="@/assets/img/cc_jl.png" alt="" />
- </div>
- </div>
-
- <div class="held_item flex-between">
- <div class="item_left flex-start">
- <span class="held_icon">MEX</span>
- <p>{{ $t("Worth") }}</p>
- </div>
- <div class="item_right flex-end">
- 3,010 MXN
- </div>
- </div>
-
- <div class="held_item flex-between">
- <div class="item_left flex-start">
- <span class="held_icon">MEX</span>
- <p>{{ $t("持仓收益") }}</p>
- </div>
- <div class="item_right flex-end" :class="'rise'">
- <img src="@/assets/img/rise.png" alt="" />
- 2,010 (201%)
- </div>
- </div>
-
- <div class="held_item flex-between">
- <div class="item_left flex-start">
- <span class="held_icon2">US</span>
- <p>{{ $t("Worth") }}</p>
- </div>
- <div class="item_right flex-end">
- 685,059.11 USD
- </div>
- </div>
-
- <div class="held_item flex-between">
- <div class="item_left flex-start">
- <span class="held_icon2">US</span>
- <p>{{ $t("持仓收益") }}</p>
- </div>
- <div class="item_right flex-end" :class="'descend'">
- <img src="@/assets/img/descend.png" alt="" />
- 191,980.42 (38.94%)
- </div>
- </div>
- </div>
+ <!-- <my-order :Operation="true"></my-order> -->
</div>
</template>
<script>
+import { Toast } from "vant";
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
+ tabHead,
+ myOrder
},
data() {
return {
- userInfo: {}
+ userInfo: {}, // 用户信息
+ moneyData: {}, // 账户金额
+ positionData: {}, // 账户持仓数据
+ weeklyProfit: 0, // 每周盈利数据
+ tabs: [
+ {
+ name: this.$t("hj177"),
+ img: require("@/assets/img/account_2.png"),
+ path: "/RechargeSure"
+ },
+ {
+ name: this.$t("hj168"),
+ img: require("@/assets/img/account_3.png"),
+ path: "/rechargelist"
+ },
+ {
+ name: this.$t("hj162"),
+ img: require("@/assets/img/account_4.png"),
+ path: "/cashlist"
+ },
+ {
+ name: this.$t("hj247"),
+ img: require("@/assets/img/account_5.png"),
+ path: "/banklist"
+ }
+ ]
};
},
methods: {
+ // 获取账户金额
+ async getMoney() {
+ let data = await api.getMoney();
+ if (data.status === 0) {
+ this.moneyData = data.data[0];
+ }
+ },
+ // 获取账户每周盈利
+ async getWeeklyProfit() {
+ let data = await api.getWeeklyProfit();
+ if (data.status === 0) {
+ this.weeklyProfit = data.data;
+ }
+ },
+ // 获取账户持仓数据
+ 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) {
// 判断是否登录
@@ -131,207 +158,116 @@
} else {
this.$store.commit("dialogVisible", true);
}
+ },
+ // 跳转
+ toPage(url) {
+ if (!url) return;
+ this.$router.push(url);
+ },
+ // 充值提示
+ czts() {
+ Toast(this.$t("充值提示"));
}
},
created() {
this.getUserInfo();
+ this.getMoney();
+ this.getWeeklyProfit();
+ // this.getMyPositionProfitAndLose();
}
};
</script>
<style lang="less" scoped>
-@purple: #3d1152;
-@green: #c4d600;
-@red: #ee0a24;
-@dark_green: #07c160;
.account {
width: 100%;
- height: 100%;
- background: #fff;
- font-size: 10vw;
- padding-top: 0.2em;
- padding-bottom: 1.4rem;
-
- .account_card {
- background-color: #f5f5f5;
- border-radius: 0.25em;
- width: 9.5em;
- margin: 0.5em auto 0;
-
- .held_item {
- padding: 0.42em 0;
- margin: 0 0.25em;
-
- &:not(:last-child) {
- border-bottom: 0.01em solid #ddd;
- }
-
- .item_left {
- font-size: 0.4em;
- font-weight: 300;
- color: #777;
-
- .held_icon {
- background: @green;
- }
-
- .held_icon2 {
- background: @dark_green;
- }
-
- .held_icon,
- .held_icon2 {
- border-radius: 0 26em 26em 0;
- color: #fff;
- padding: 0.1em 0.5em 0.1em 0.4em;
- margin-right: 0.3em;
- font-size: 0.8em;
- }
- }
-
- .item_right {
- font-size: 0.48em;
-
- img {
- width: 1em;
- margin-right: 0.3em;
- }
- }
-
- .rise {
- color: @dark_green;
- }
-
- .descend {
- color: @red;
- }
- }
-
- .held_head {
- height: 1.333em;
- box-shadow: 0 0.05333rem 0.26667rem #0000000d;
- .head_left,
- .head_right {
- width: 50%;
- height: 100%;
- }
- .head_left {
- color: @green;
- position: relative;
-
- &::after {
- content: " ";
- position: absolute;
- right: 0;
- top: 0.45em;
- height: 0.5em;
- width: 0.01em;
- background-color: #ddd;
- }
- }
- .head_right {
- color: @red;
- }
- img {
- width: 0.6em;
- margin-left: 0.1em;
- }
- span {
- font-size: 0.45em;
- font-weight: 600;
- }
- }
- }
-
- .account_tabs {
- box-shadow: 0 -0.26667rem 0.53333rem #1a00394d;
- width: 100%;
- padding: 0.4em 0.25em 0.5em;
- background-color: #f1f1f1;
-
- .tab {
- width: 33.33%;
+ 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.3rem;
+ 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: 50%;
+ flex-shrink: 0;
+ flex-direction: column;
+ align-items: start;
+ padding: 0 0.3rem;
+ .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;
-
- &:not(:last-child)::after {
- content: " ";
- position: absolute;
- right: 0;
- top: 0.7em;
- height: 1em;
- width: 0.01em;
- background-color: #ddd;
+ .price {
+ font-size: 0.825rem;
+ // line-height: 0.825rem;
+ font-weight: 500;
+ padding-top: 0.3rem;
+ color: #fff;
}
-
- span {
- font-size: 0.42em;
- }
-
- img {
- width: 1.6em;
- margin-bottom: 0.3em;
+ .text-xs {
+ font-size: 0.3rem;
+ color: #c7c9e6;
}
}
}
-
- .wallet {
- width: 9.5em;
- margin: 0.2em auto 0;
- padding-top: 0.25em;
- background-color: @purple;
- border-radius: 0.25em 0.25em 0 0;
- color: #fff;
- .wallet_record {
- color: @green;
- margin-top: 0.5em;
- padding: 0.5em;
- border-top: 0.01em solid rgba(#fff, 0.1);
- span {
- font-size: 0.4em;
- }
- }
- .wallet_price_name {
- padding: 0 0.25em;
- span {
- font-size: 0.3em;
- }
- }
- .wallet_price {
- color: #f7b52b;
- padding: 0 0.25em;
- margin-bottom: 0.25em;
- span {
- font-size: 0.4em;
- }
- }
-
- .wallet_title {
- padding: 0 0.25em;
- margin-bottom: 0.25em;
- span {
- font-size: 0.5em;
- }
+ .tui-userInfo {
+ box-sizing: border-box;
+ padding-top: 0.95rem;
+ height: 2.1rem;
+ .tui-rightsetting {
img {
- width: 0.75em;
+ display: block;
+ width: 0.675rem;
+ height: 0.675rem;
+ margin: 0 0.175rem;
}
}
- }
-
- .user {
- img {
- width: 1.2em;
- height: 1.2em;
- border-radius: 50%;
- margin-right: 0.25em;
- }
- .real_name {
- font-size: 0.5em;
- }
- .phone {
- font-size: 0.4em;
- color: #999;
- margin-top: 0.1em;
+ .userinfo-box {
+ font-size: 0.65rem;
+ font-weight: 700;
+ color: #fff;
+ img {
+ width: 1.2rem;
+ height: 1.2rem;
+ margin-right: 0.35rem;
+ }
}
}
}
--
Gitblit v1.9.3