From 91f9b7a3b7dfc4fe6b9b5008cfec4e18dfb6dcd5 Mon Sep 17 00:00:00 2001
From: zzzz <690498789@qq.com>
Date: Thu, 28 Mar 2024 13:04:36 +0800
Subject: [PATCH] 注册页面的客服地址错误
---
src/page/user/Warehouse.vue | 920 +++++++-------------------------------------------------
1 files changed, 125 insertions(+), 795 deletions(-)
diff --git a/src/page/user/Warehouse.vue b/src/page/user/Warehouse.vue
index c88d750..ec54536 100644
--- a/src/page/user/Warehouse.vue
+++ b/src/page/user/Warehouse.vue
@@ -1,832 +1,162 @@
<template>
- <div class="warehouse_page">
- <div class="content">
- <div class="top_title" :class="titleDialog ? 'active' : ''" ref="topTitle">
- <div class="titles">
- <div class="left_title" @click="handleOpenDialog()">
- <div class="title">
- <span>{{ '模拟账户' }}</span>
- </div>
- <div class="img">
- <img src="../../assets/img/xiala.png" alt />
- </div>
- </div>
- <div class="right_box"></div>
- </div>
- <div class="overflow_box item">
- <div class="left_titles">
- <span>{{ '虚拟账户' }}</span>
- </div>
- <div class="right_price">
- <span>{{ '净值: ¥49,611.0' }}</span>
- </div>
+ <div class="ware">
+ <div style="padding: 0 0.4rem 0.4rem">
+ <div class="tabs-box" onscroll="handleScroll">
+ <div
+ v-for="(item, index) in tabsArr"
+ :key="index"
+ :class="
+ item.name == active ? 'tabs-item-active tabs-item' : 'tabs-item'
+ "
+ @click="onClick(item)"
+ >
+ {{ item.title }}
</div>
</div>
- <div class="warehouse_card">
- <div class="top_card">
- <div class="card_content">
- <div class="t_title">
- <span>{{ '净值(USD)' }}</span>
- </div>
- <div class="t_price">
- <span class="price">{{ '49,619.05' }}</span>
- <span class="profits">{{ '-370.00' }}</span>
- </div>
- <div class="balance">
- <div class="left_titles">
- <span>{{ '可用余额' }}</span>
- </div>
- <div class="right_titles">
- <span>{{ '保证金水平' }}</span>
- </div>
- </div>
- <div class="num">
- <div class="left_price">
- <span>{{ '49,386.26' }}</span>
- </div>
- <div class="right_margin">
- <span>{{ '21314.94%' }}</span>
- </div>
- </div>
- <div class="margin">
- <div class="left_titles">
- <span>{{ '保证金' }}</span>
- </div>
- <div class="right_titles">
- <span>{{ '维持保证金' }}</span>
- </div>
- </div>
- <div class="prices">
- <div class="left_titles">
- <span>{{ '232.79' }}</span>
- </div>
- <div class="right_titles">
- <span>{{ '116.40' }}</span>
- </div>
- </div>
- </div>
+
+ <template v-if="active === '1'">
+ <div v-for="(item, index) in tabsArr" :key="index">
+ <card :item="item" />
</div>
- <div class="tabs_card">
- <div class="tabs_card_content">
- <div class="tabs_top_title">
- <div
- class="title_items"
- v-for="(item, index) in tabsArr"
- :key="index"
- @click="handleTabsClick(item, index)"
- >
- <span :class="tabsCurrentIndex === index ? 'active' : ''">{{ item }}</span>
- </div>
- </div>
- <!-- 持仓 currentIndex: 0 -->
- <div class="over">
- <div class="tabs_o" v-if="tabsCurrentIndex === 0">
- <div class="tabs_o_items" v-for="(item, index) in tabsPositionNumArr" :key="index">
- <div class="tabs_o_title">
- <span class="title">{{ item.name }}</span>
- <span class="buy_to_sell">{{ item.mr }}</span>
- <span class="multiple">{{ item.multiple + 'X' }}</span>
- <span class="nums">{{ item.hd + '手'}}</span>
- </div>
- <div class="center_price">
- <div class="profit">
- <span>{{ item.ProfitLoss }}</span>
- </div>
- <div class="start_price">
- <span>{{ item.startPrice }}</span>
- </div>
- <div class="new_price">
- <span>{{ item.newPrice }}</span>
- </div>
- </div>
- <div class="bottom_price_title">
- <div class="profit_title">
- <span>{{ '浮动净盈亏' }}</span>
- </div>
- <div class="start_price">
- <span>{{ '开仓价格' }}</span>
- </div>
- <div class="new_price">
- <span>{{ '当前价格' }}</span>
- </div>
- </div>
- <div class="right_btn">
- <span>{{ '平仓' }}</span>
- </div>
- </div>
- </div>
- <div class="waiting" v-if="tabsCurrentIndex === 1">
- <div class="waiting_box">
- <div class="img_cont">
- <img src="../../assets/img/zhaobudao.png" alt />
- <span class="gd">{{ '当前无挂单' }}</span>
- <div class="trading">
- <span>{{ '开始交易' }}</span>
- </div>
- </div>
- </div>
- </div>
- <div class="tabs_o" v-if="tabsCurrentIndex === 2">
- <div class="tabs_o_items oes" v-for="(item, index) in tabsPcArr" :key="index">
- <div class="tabs_o_title">
- <span class="title">{{ item.name }}</span>
- <span class="buy_to_sell">{{ item.mr }}</span>
- <span class="multiple">{{ item.multiple + 'X' }}</span>
- <span class="nums">{{ item.hd + '手'}}</span>
- </div>
- <div class="bottom_price_title">
- <div class="profit_res">
- <span>{{ '平仓时间: 2022年11月7日 18:18:05' }}</span>
- </div>
- </div>
- <div class="right_count">
- <span>{{ item.countNum }}</span>
- </div>
- </div>
- </div>
- </div>
- </div>
- </div>
+ </template>
+ <template v-else>
+ <itemCard :activeObj="activeObj" :itemClick="itemClick" />
+ </template>
+ <div v-show="active !== '1'">
+ <dataList ref="dataListref" :activeObj="activeObj" />
</div>
</div>
- <div class="dialog" v-if="titleDialog" @click="titleDialog = false"></div>
</div>
</template>
<script>
+import card from "./Warehouse/card.vue";
+import itemCard from "./Warehouse/item.card.vue";
+import dataList from "./Warehouse/data.list.vue";
+import { getMoney } from "../../axios/api";
+
export default {
+ components: { card, itemCard, dataList },
data() {
return {
- tabsArr: ["持仓", "挂单", "已平仓"],
- tabsCurrentIndex: 0,
- tabsPositionNumArr: [
+ actives: "1",
+ active: "1",
+ activeObj: {},
+ tabsArr: [
{
- name: "美元/日元",
- mr: "买入",
- multiple: 200,
- hd: 0.01,
- ProfitLoss: -1.15,
- startPrice: 146.656,
- newPrice: 146.487
+ title: this.$t("hometips"),
+
+ name: "1",
+ bgc: "rgb(8, 82, 196)",
+ laber: "ALL",
+ symbolCode: "USD",
+ symbol: "$",
},
{
- name: "美元/日元",
- mr: "买入",
- multiple: 200,
- hd: 0.01,
- ProfitLoss: -1.15,
- startPrice: 146.656,
- newPrice: 146.487
+ title: this.$t("mggs"),
+ assname: this.$t("美股总资产"),
+ name: "2",
+ bgc: "rgb(12, 175, 226)",
+ laber: "US",
+ symbolCode: "USD",
+ symbol: "$",
},
+ // {
+ // title: this.$t("ydgs"),
+ // assname: this.$t("印股总资产"),
+ // name: "3",
+ // bgc: "rgb(255, 91, 150)",
+ // laber: "IN",
+ // symbolCode: "USD",
+ // symbol: "$",
+ // },
{
- name: "美元/日元",
- mr: "买入",
- multiple: 200,
- hd: 0.01,
- ProfitLoss: -1.15,
- startPrice: 146.656,
- newPrice: 146.487
+ title: this.$t("马来西亚"),
+ assname: this.$t("馬股总资产"),
+ name: "4",
+ bgc: "rgb(163, 91, 255)",
+ laber: "MAS",
+ symbolCode: "MYR",
+ symbol: "RM",
},
- {
- name: "美元/日元",
- mr: "买入",
- multiple: 200,
- hd: 0.01,
- ProfitLoss: -1.15,
- startPrice: 146.656,
- newPrice: 146.487
- },
- {
- name: "美元/日元",
- mr: "买入",
- multiple: 200,
- hd: 0.01,
- ProfitLoss: -1.15,
- startPrice: 146.656,
- newPrice: 146.487
- },
- {
- name: "美元/日元",
- mr: "买入",
- multiple: 200,
- hd: 0.01,
- ProfitLoss: -1.15,
- startPrice: 146.656,
- newPrice: 146.487
- },
- {
- name: "美元/日元",
- mr: "买入",
- multiple: 200,
- hd: 0.01,
- ProfitLoss: -1.15,
- startPrice: 146.656,
- newPrice: 146.487
- },
- {
- name: "美元/日元",
- mr: "买入",
- multiple: 200,
- hd: 0.01,
- ProfitLoss: -1.15,
- startPrice: 146.656,
- newPrice: 146.487
- },
- {
- name: "美元/日元",
- mr: "买入",
- multiple: 200,
- hd: 0.01,
- ProfitLoss: -1.15,
- startPrice: 146.656,
- newPrice: 146.487
- },
- {
- name: "美元/日元",
- mr: "买入",
- multiple: 200,
- hd: 0.01,
- ProfitLoss: -1.15,
- startPrice: 146.656,
- newPrice: 146.487
- },
- {
- name: "美元/日元",
- mr: "买入",
- multiple: 200,
- hd: 0.01,
- ProfitLoss: -1.15,
- startPrice: 146.656,
- newPrice: 146.487
- },
- {
- name: "美元/日元",
- mr: "买入",
- multiple: 200,
- hd: 0.01,
- ProfitLoss: -1.15,
- startPrice: 146.656,
- newPrice: 146.487
- },
- {
- name: "美元/日元",
- mr: "买入",
- multiple: 200,
- hd: 0.01,
- ProfitLoss: -1.15,
- startPrice: 146.656,
- newPrice: 146.487
- }
],
- tabsPcArr: [
- {
- name: "美元/日元",
- mr: "买入",
- multiple: 200,
- hd: 0.01,
- ProfitLoss: -1.15,
- startPrice: 146.656,
- newPrice: 146.487,
- countNum: -1.18
- },
- {
- name: "美元/日元",
- mr: "买入",
- multiple: 200,
- hd: 0.01,
- ProfitLoss: -1.15,
- startPrice: 146.656,
- newPrice: 146.487,
- countNum: -1.52
- },
- {
- name: "美元/日元",
- mr: "买入",
- multiple: 200,
- hd: 0.01,
- ProfitLoss: -1.15,
- startPrice: 146.656,
- newPrice: 146.487,
- countNum: -2.36
- },
- {
- name: "美元/日元",
- mr: "买入",
- multiple: 200,
- hd: 0.01,
- ProfitLoss: -1.15,
- startPrice: 146.656,
- newPrice: 146.487,
- countNum: -1.18
- },
- {
- name: "美元/日元",
- mr: "买入",
- multiple: 200,
- hd: 0.01,
- ProfitLoss: -1.15,
- startPrice: 146.656,
- newPrice: 146.487,
- countNum: -1.18
- },
- {
- name: "美元/日元",
- mr: "买入",
- multiple: 200,
- hd: 0.01,
- ProfitLoss: -1.15,
- startPrice: 146.656,
- newPrice: 146.487,
- countNum: -1.18
- },
- {
- name: "美元/日元",
- mr: "买入",
- multiple: 200,
- hd: 0.01,
- ProfitLoss: -1.15,
- startPrice: 146.656,
- newPrice: 146.487,
- countNum: -1.18
- },
- {
- name: "美元/日元",
- mr: "买入",
- multiple: 200,
- hd: 0.01,
- ProfitLoss: -1.15,
- startPrice: 146.656,
- newPrice: 146.487,
- countNum: -1.18
- },
- {
- name: "美元/日元",
- mr: "买入",
- multiple: 200,
- hd: 0.01,
- ProfitLoss: -1.15,
- startPrice: 146.656,
- newPrice: 146.487,
- countNum: -1.18
- },
- {
- name: "美元/日元",
- mr: "买入",
- multiple: 200,
- hd: 0.01,
- ProfitLoss: -1.15,
- startPrice: 146.656,
- newPrice: 146.487,
- countNum: -1.18
- },
- {
- name: "美元/日元",
- mr: "买入",
- multiple: 200,
- hd: 0.01,
- ProfitLoss: -1.15,
- startPrice: 146.656,
- newPrice: 146.487,
- countNum: -1.18
- },
- {
- name: "美元/日元",
- mr: "买入",
- multiple: 200,
- hd: 0.01,
- ProfitLoss: -1.15,
- startPrice: 146.656,
- newPrice: 146.487,
- countNum: -1.18
- },
- {
- name: "美元/日元",
- mr: "买入",
- multiple: 200,
- hd: 0.01,
- ProfitLoss: -1.15,
- startPrice: 146.656,
- newPrice: 146.487,
- countNum: -1.18
- }
- ],
- titleDialog: false,
+ getMoneyList: [],
};
},
+ created() {
+ this.getMoneys();
+ },
methods: {
- handleTabsClick(item, index) {
- this.tabsCurrentIndex = index;
+ itemClick() {
+ this.$refs.dataListref.getList(this.activeObj.laber);
},
- handleOpenDialog() {
- this.titleDialog = !this.titleDialog;
+ async getMoneys() {
+ const res = await getMoney();
+ if (res.status === 0) {
+ let arr = [];
+ this.tabsArr.map((item) => {
+ res.data.map((items) => {
+ if (items.accectType === item.laber) {
+ item = { ...item, ...items, laber: items.accectType };
+ arr.push(item);
+ }
+ });
+ });
+ this.tabsArr = arr;
+ this.$forceUpdate(); // 强制Vue重新渲染
+ }
+ },
+ onClick(e) {
+ this.active = e.name;
+ this.activeObj = e;
+ this.getMoneys();
+ if (e.name !== "1") {
+ this.$refs.dataListref.getList(e.laber);
+ }
+
+ // console.log(e);
},
},
- mounted() {
-
- }
};
</script>
-<style scoped lang="less">
-@boxCenter: {
- display: flex;
- justify-content: center;
- align-items: center;
-};
-@topCardColor: #bdbdbd;
-.warehouse_page {
- width: 100%;
- height: calc(100% - 1.2974rem);
-}
-.content {
- width: 100%;
- height: 100%;
- position: relative;
-}
-.top_title.active {
- height: 3rem;
-}
-.top_title {
- width: 100%;
- height: 0.9231rem;
- position: absolute;
- background: #fff;
- top: 0;
- z-index: 10;
+<style lang="less" scoped>
+.ware {
overflow: hidden;
- transition: all 1s;
- padding: 0 .3rem;
- .titles {
- width: 100%;
- height: 0.9231rem;
- display: flex;
- }
- .left_title,
- .right_box {
- width: 50%;
- height: 100%;
- display: flex;
- }
- .title {
- width: 60%;
- height: 100%;
- font-size: 0.5897rem;
- display: flex;
- align-items: center;
- span {
- font-weight: 800;
- }
- }
- .img {
- width: 40%;
- height: 100%;
- display: flex;
- align-items: center;
- img {
- width: 0.6rem;
- height: 0.6rem;
- }
- }
+ min-height: 100vh;
+ // padding: 0 0.4rem 0.4rem;
+ background-color: #fff;
+ padding-bottom: 100px;
}
-.warehouse_card {
- width: 100%;
- height: calc(100% - 1rem);
- position: absolute;
- top: 0.9231rem;
- z-index: 0;
- padding: 0 0.3333rem;
- background: rgb(242, 243, 247);
- .top_card {
- width: 100%;
- height: 4.2308rem;
- border-radius: 0.15rem;
- margin-top: 0.3rem;
- background: #fff;
- .card_content {
- width: 100%;
- height: 100%;
- padding: 0.4rem;
- .t_title {
- width: 100%;
- height: 0.5128rem;
- display: flex;
- align-items: center;
- span {
- font-size: 0.3046rem;
- font-weight: bold;
- }
- }
- .t_price {
- width: 100%;
- height: 0.5128rem;
- display: flex;
- align-items: center;
- .price {
- font-weight: 800;
- font-size: 0.3846rem;
- margin-top: 0.07rem;
- }
- .profits {
- font-weight: 800;
- font-size: 0.2846rem;
- color: #dd2c34;
- margin-top: 0.2rem;
- margin-left: 0.2rem;
- }
- }
- .balance {
- width: 100%;
- height: 0.3846rem;
- margin-top: 0.428rem;
- display: flex;
- > div {
- width: 50%;
- height: 100%;
- color: @topCardColor;
- span {
- font-weight: 600;
- }
- }
- }
- .num {
- width: 100%;
- height: 0.3846rem;
- margin-top: 0.1rem;
- display: flex;
- > div {
- width: 50%;
- height: 100%;
- span {
- font-weight: 600;
- }
- }
- .right_margin {
- color: rgb(100, 162, 117);
- }
- }
- .margin {
- width: 100%;
- height: 0.3846rem;
- margin-top: 0.2rem;
- display: flex;
- > div {
- width: 50%;
- height: 100%;
- color: @topCardColor;
- span {
- font-weight: 600;
- }
- }
- }
- .prices {
- width: 100%;
- height: 0.3846rem;
- margin-top: 0.1rem;
- display: flex;
- > div {
- width: 50%;
- height: 100%;
- span {
- font-weight: 600;
- }
- }
- }
- }
- }
-}
-.over {
- width: 100%;
- height: calc(100% - 0.7179rem);
- overflow: auto;
-}
-.tabs_card {
- width: 100%;
- height: calc(100% - 4.24rem - 0.5rem);
- margin-top: 0.3rem;
- background: #fff;
-}
-.over::-webkit-scrollbar {
- display: none;
-}
-.tabs_card_content {
- width: 100%;
- height: 100%;
- padding: 0 0.3rem;
- .tabs_top_title {
- width: 100%;
- height: 1rem;
- border-radius: 0.15rem;
- display: flex;
- align-items: center;
- font-size: 0.4103rem;
- padding-top: 0.2rem;
- > div {
- width: 25%;
- height: 100%;
- display: flex;
- align-items: center;
- justify-content: left;
- span {
- display: inline-block;
- height: 100%;
- font-weight: 600;
- line-height: 0.7179rem;
- }
- span.active {
- color: rgb(62, 121, 226);
- border-bottom: 0.1rem solid rgb(62, 121, 226);
- }
- }
- }
- .tabs_o {
- width: 100%;
- margin-top: 0.3rem;
- > .tabs_o_items {
- width: 100%;
- height: 2.3rem;
- position: relative;
- .tabs_o_title {
- width: 100%;
- height: 0.7179rem;
- display: flex;
- align-items: center;
- span {
- display: inline-block;
- margin-right: 0.2rem;
- }
- .title {
- font-weight: 600;
- font-size: 0.4059rem;
- }
- .buy_to_sell {
- background: rgb(215, 243, 235);
- padding: 0.08rem 0.1rem;
- color: rgb(109, 175, 125);
- font-weight: 600;
- }
- .multiple {
- padding: 0.08rem 0.1rem;
- background: rgb(236, 243, 252);
- color: rgb(42, 108, 230);
- font-weight: 600;
- }
- .nums {
- color: @topCardColor;
- }
- }
- .center_price {
- width: 100%;
- height: 0.3846rem;
- display: flex;
- align-items: center;
- margin-top: 0.3rem;
- > div {
- width: 28%;
- height: 100%;
- span {
- font-weight: 600;
- }
- }
- .profit {
- color: rgb(209, 79, 91);
- }
- }
- .bottom_price_title {
- width: 100%;
- height: 0.4rem;
- margin-top: 0.1rem;
- display: flex;
- align-items: center;
- > div {
- width: 28%;
- height: 100%;
- color: @topCardColor;
- span {
- font-weight: 600;
- }
- }
- }
- }
- }
-}
-.waiting {
- width: 100%;
- margin-top: 0.3rem;
- position: relative;
- .waiting_box {
- width: 100%;
- height: 4rem;
- display: flex;
- align-items: center;
- justify-content: center;
- margin-top: 1rem;
- > div {
- width: 60%;
- height: 100%;
- img {
- width: 100%;
- height: 100%;
- }
- .gd {
- display: inline-block;
- width: 100%;
- text-align: center;
- color: rgb(133, 133, 133);
- }
- .trading {
- width: 100%;
- height: 2rem;
- display: flex;
- align-items: center;
- justify-content: center;
- span {
- display: inline-block;
- width: 4.1026rem;
- height: 1.0256rem;
- background: #f7f7f7;
- color: #3773dd;
- font-weight: 600;
- font-size: 0.4615rem;
- text-align: center;
- line-height: 1.0256rem;
- border-radius: 0.2rem;
- }
- }
- }
- }
-}
-.right_btn {
- width: 1.7949rem;
- height: 0.6667rem;
- position: absolute;
- right: 1%;
- top: 48%;
- background: #f7f7f7;
- color: #3773dd;
+.tabs-box {
display: flex;
- align-items: center;
- justify-content: center;
- border-radius: 0.3rem;
- span {
- font-weight: 600;
- font-size: 0.3846rem;
- }
+ overflow-x: auto;
+ width: 100%; /* Ensures it takes full width of the container */
+ white-space: nowrap; /* Prevents text wrapping */
+ background: rgb(247, 247, 250);
+ margin-top: 20px;
+ border-radius: 20px;
+ padding-right: 20px;
}
-.right_count {
- width: 1.7949rem;
- height: 0.6667rem;
- position: absolute;
- right: 1%;
- top: 20%;
- color: #d7343a;
- display: flex;
- align-items: center;
- justify-content: center;
- border-radius: 0.3rem;
- span {
- font-weight: 600;
- font-size: 0.3846rem;
- }
+.tabs-box::-webkit-scrollbar {
+ display: none; /* Chrome, Safari, Opera */
}
-.profit_res {
- width: 100% !important;
- margin-top: .2rem;
+.tabs-item {
+ cursor: pointer;
+ flex: 0 0 auto; /* Ensures items do not grow or shrink */
+ padding: 15px; /* Adjust padding as needed */
+ // border: 1px solid #ccc; /* Just for demonstration, you can style as needed */
+ margin-right: 10px; /* Adjust margin as needed */
+ min-width: 100px; /* Minimum width for each item */
+ text-align: center;
+ color: rgb(140, 159, 173);
+ font-size: 16px;
+ // padding: 0.10667rem 0.34667rem;
}
-.oes {
- height: 2rem !important;
-}
-.dialog {
- width: 100%;
- height: 100%;
- position: absolute;
- top: 0;
- background: rgba(0,0,0,.5);
- z-index: 9;
-}
-.overflow_box {
- width: 100%;
- height: 1.5rem;
- border-radius: .2rem;
- padding: 0 .3rem;
- margin: .3rem 0;
- background: rgb(236,243,253);
- display: flex;
- align-items: center;
- justify-content: space-between;
- > div {
- height: 50%;
- display: flex;
- justify-content: center;
- align-items: center;
- }
- .left_titles {
- span {
- font-weight: 800;
- font-size: .3815rem;
- }
- }
- .right_price {
- color: rgb(128,135,145);
- }
+.tabs-item-active {
+ border-radius: 20px;
+ background: #39a08e;
+ // padding: 0.10667rem 0.34667rem;
+ color: #fff;
}
</style>
\ No newline at end of file
--
Gitblit v1.9.3