From 940d76fdc141d7028918fbe30adb1bb3935a2b54 Mon Sep 17 00:00:00 2001
From: DESKTOP-CVS3R96\我恁爹 <11>
Date: Mon, 07 Nov 2022 04:27:24 +0800
Subject: [PATCH] 暂存
---
src/page/list/trading-list.vue | 654 +++++++++++++++++++++++++++++++++++++++++------------------
1 files changed, 451 insertions(+), 203 deletions(-)
diff --git a/src/page/list/trading-list.vue b/src/page/list/trading-list.vue
index 0009131..402d7d7 100644
--- a/src/page/list/trading-list.vue
+++ b/src/page/list/trading-list.vue
@@ -2,51 +2,31 @@
<div class="tr_list_page">
<div class="content">
<div class="tabs">
- <div class="top_title">
- <div class="tabs_title">
- <div
- class="tb"
- v-for="(item, index) in tabsArr"
- :key="index"
- @click="handleTabsClick(item, index)"
- >
- <span :class="index === tabsIndex ? 'active' : ''">{{ item }}</span>
- </div>
- </div>
- <div class="right_money"></div>
- </div>
<div class="bottom_content" v-if="tabsIndex === 1">
<!-- 搜索框 -->
<div class="search">
<div class="search_content">
<div class="left_search">
<div class="search_img">
- <img src="../../assets/img/search2.png" alt />
+ <img src="../../assets/img/searchs.png" alt />
</div>
<div class="search_input">
<input type="text" class="searchs" placeholder="输入品种名称/代码搜索" />
</div>
</div>
- <div class="right_search_class">
- <img src="../../assets/img/fenlei2.png" alt />
- </div>
</div>
</div>
<div class="tab_class">
<div class="scroll_tab">
- <div
- class="tab_items"
- v-for="(item, index) in tabsClassArr"
- :key="index"
- @click="handleTabsItem(item, index)"
- >
+ <div class="tab_items" v-for="(item, index) in tabsClassArr" :key="index"
+ @click="handleTabsItem(item, index)">
<span :class="tabsItemIndex === index ? 'active' : ''">{{ item.name }}</span>
</div>
</div>
</div>
<div class="kai_mess">
<div class="left_identity_img">
- <img src="../../assets/img/shenfen.png" alt />
+ <img src="../../assets/img/shenfen2.png" alt />
</div>
<div class="text">
<span>{{ '开户即可入金交易' }}</span>
@@ -71,26 +51,60 @@
<div class="item" v-for="(item, index) in listArr" :key="index">
<div class="left_title">
<div class="tp">
- <span class="title_color">{{ item.name }}</span>
+ <span class="collection" @click="handleCollectionClick(item)">
+ <span class="shu"></span>
+ </span>
+ <span class="title_color">{{ tabsItemIndex == 3 ? item.futuresName : item.indexName }}</span>
</div>
<div class="bt">
- <span>{{ item.referred }}</span>
+ <span>{{ tabsItemIndex == 3 ? item.futuresCode : item.indexCode }}</span>
</div>
</div>
<div class="center_price">
<div class="tp">
- <span class="price_color">{{ item.price }}</span>
+ <span class="price_color">{{ tabsItemIndex == 3 ? Number(item.nowPrice).toFixed(2) : item.currentPoint
+ }}</span>
</div>
<div class="bt">
- <span>{{ item.time }}</span>
+ <span>{{ item.addTime | gettime }}</span>
</div>
</div>
<div class="right_bs">
<div class="tp">
- <span class="price_color">{{ item.applies + '%' }}</span>
+ <span class="price_color">{{ tabsItemIndex == 3 ? item.coinRate : item.floatRate + '%' }}</span>
</div>
<div class="bt"></div>
</div>
+ </div>
+ </div>
+ </div>
+ </div>
+ </div>
+ </div>
+ <div class="shai" v-if="dialogFlag" @click="openDialog()"></div>
+ <div class="top_title" ref="topTitle">
+ <div>
+ <div class="tabs_title">
+ <div class="tb" v-for="(item, index) in tabsArr" :key="index" @click="handleTabsClick(item, index)">
+ <span :class="index === tabsIndex ? 'active' : ''">{{ item }}</span>
+ </div>
+ </div>
+ <div class="right_money" @click="openDialog()">
+ <div class="content_money" v-if="tabsIndex === 1">
+ <div class="top_price">
+ <div class="left">
+ <span>{{ '余额' }}</span>
+ </div>
+ <div class="right">
+ <span>{{ '¥ 49,656.79' }}</span>
+ </div>
+ <div class="sanjiao">
+ <img src="../../assets/img/xiala.png" alt />
+ </div>
+ </div>
+ <div class="bottom_balance">
+ <div>
+ <span>{{ '可用余额' }}</span>
</div>
</div>
</div>
@@ -101,143 +115,178 @@
</template>
<script>
+import * as api from "@/axios/api";
+import elalert from "@/components/elalert.vue";
export default {
name: "trading",
+ components: {
+ elalert
+ },
data() {
return {
- tabsIndex: 0,
+ tabsIndex: 1,
tabsArr: ["自选", "市场"],
tabClassActive: 1,
+ dialogFlag: false,
+ pageNum: 1,
+ stockPlate: "",
+ alertShow: false,
+ elType: "warning",
+ texts: "",
tabsClassArr: [
{
- name: "热门",
+ name: "指数",
+ type: 0
+ },
+ {
+ name: "沪深",
type: 1
},
{
- name: "外汇",
+ name: "科创",
type: 2
},
{
- name: "商品",
+ name: "期货",
type: 3
- },
- {
- name: "股票",
- type: 4
- },
- {
- name: "指数",
- type: 5
- },
- {
- name: "加密",
- type: 6
}
],
tabsItemIndex: 0,
- listArr: [
- {
- name: "香港50指数",
- referred: "HK50",
- price: 16445.5,
- time: "02:59:58",
- applies: 5.93,
- },
- {
- name: "香港50指数",
- referred: "HK50",
- price: 16445.5,
- time: "02:59:58",
- applies: 5.93
- },
- {
- name: "香港50指数",
- referred: "HK50",
- price: 16445.5,
- time: "02:59:58",
- applies: 5.93
- },
- {
- name: "香港50指数",
- referred: "HK50",
- price: 16445.5,
- time: "02:59:58",
- applies: 5.93
- },
- {
- name: "香港50指数",
- referred: "HK50",
- price: 16445.5,
- time: "02:59:58",
- applies: 5.93
- },
- {
- name: "香港50指数",
- referred: "HK50",
- price: 16445.5,
- time: "02:59:58",
- applies: 5.93
- },
- {
- name: "香港50指数",
- referred: "HK50",
- price: 16445.5,
- time: "02:59:58",
- applies: 5.93
- },
- {
- name: "香港50指数",
- referred: "HK50",
- price: 16445.5,
- time: "02:59:58",
- applies: 5.93
- },
- {
- name: "香港50指数",
- referred: "HK50",
- price: 16445.5,
- time: "02:59:58",
- applies: 5.93
- },
- {
- name: "香港50指数",
- referred: "HK50",
- price: 16445.5,
- time: "02:59:58",
- applies: 5.93
- },
- {
- name: "香港50指数",
- referred: "HK50",
- price: 16445.5,
- time: "02:59:58",
- applies: 5.93
- },
- {
- name: "香港50指数",
- referred: "HK50",
- price: 16445.5,
- time: "02:59:58",
- applies: 5.93
- },
- {
- name: "香港50指数",
- referred: "HK50",
- price: 16445.5,
- time: "02:59:58",
- applies: 5.93
- }
- ]
+ listArr: []
};
},
+ mounted() {
+ this.getListMarket();
+
+ },
methods: {
+ closeAlert() {
+ this.alertShow = false;
+ },
+ async getListMarket() {
+
+ // 获取指数列表
+ let result = await api.getListMarket()
+ if (result.status === 0) {
+ this.listArr = result.data
+ } else {
+ this.texts = result.msg;
+ this.alertShow = true;
+ }
+ },
+ async getStock() {
+ let opt = {
+ pageNum: this.pageNum,
+ pageSize: 15,
+ stockPlate: this.stockPlate,
+ }
+ let data = await api.getListMarket(opt)
+ if (data.status === 0) {
+
+ data.data.forEach(element => {
+ this.listArr.push(element)
+ })
+ } else {
+ this.texts = data.msg;
+ this.alertShow = true;
+ }
+ },
+ async getFutures() {
+ // 获取期货列表
+ let opt = {
+ homeShow: 1,
+ pageNum: this.pageNum,
+ pageSize: 15
+ }
+ let data = await api.getHomeFutures(opt)
+ if (data.status === 0) {
+ console.log(this.tabsItemIndex)
+ this.listArr = data.data
+ console.log("期货", this.listArr)
+ } else {
+ this.texts = data.msg;
+ this.alertShow = true;
+ }
+ },
handleTabsClick(item, index) {
- this.tabsIndex = index;
+ if (index == 0) {
+ this.$refs['topTitle'].style.height = '1.2821rem'
+ setTimeout(() => {
+ this.dialogFlag = false;
+ this.tabsIndex = index;
+ }, 800);
+ } else {
+ this.tabsIndex = index;
+ }
+
+
},
handleTabsItem(item, index) {
this.tabsItemIndex = index;
+ switch (item.type) {
+ case 0:
+ this.listArr = [];
+ this.getListMarket();
+ break;
+ case 1:
+ this.stockPlate = ""
+ this.listArr = [];
+ this.getStock();
+ break;
+ case 2:
+ this.stockPlate = "科创"
+ this.listArr = [];
+ this.getStock();
+ break;
+ case 3:
+ this.listArr = [];
+ this.getFutures();
+ break;
+ }
+ },
+ handleCollectionClick(item) {
+ item.collection = !item.collection;
+ },
+ openDialog() {
+ if (!this.dialogFlag) {
+ this.$refs['topTitle'].style.height = '7rem'
+ } else {
+ this.$refs['topTitle'].style.height = '1.2821rem'
+ }
+ this.dialogFlag = !this.dialogFlag;
}
- }
+ },
+ filters: {
+ gettime(time) {
+ if (!time) {
+ return "";
+ }
+ var nd = new Date(time);
+ var y = nd.getFullYear();
+ var mm = nd.getMonth() + 1;
+ var d = nd.getDate();
+ var h = nd.getHours();
+ var m = nd.getMinutes();
+ var c = nd.getSeconds();
+ if (mm < 10) {
+ mm = "0" + mm;
+ }
+ if (d < 10) {
+ d = "0" + d;
+ }
+ if (h < 10) {
+ h = "0" + h;
+ }
+ if (m < 10) {
+ m = "0" + m;
+ }
+ if (c < 10) {
+ c = "0" + c;
+ }
+ //17:35:2922-06-2022
+ return h + ":" + m + ":" + c;
+ }
+ },
};
</script>
@@ -246,80 +295,68 @@
width: 100%;
height: calc(100% - 1.3rem);
background: #fff;
- > .content {
+
+ >.content {
width: 100%;
height: 100%;
- padding: 0 0.3rem;
}
}
+
.tabs {
width: 100%;
height: 100%;
- margin-top: 1.1282rem;
- .top_title {
- width: 100%;
- height: 1.2821rem;
- display: flex;
- align-items: center;
- justify-content: space-between;
- > div {
- width: 40%;
- height: 100%;
- display: flex;
- }
- .tb {
- width: 50%;
- height: 100%;
- display: flex;
- justify-content: center;
- align-items: center;
- font-size: 0.4103rem;
- }
- .active {
- font-size: 0.5003rem;
- font-weight: 800;
- }
- }
+ position: relative;
+
.search {
width: 100%;
- height: 1.3333rem;
+ height: 1rem;
display: flex;
align-items: center;
+ justify-content: center;
+ padding: 0 0.3rem;
+
.search_content {
width: 100%;
height: 90%;
display: flex;
align-items: center;
}
+
.left_search {
- width: 87%;
+ width: 100%;
height: 100%;
- background: rgb(246, 246, 246);
- border-radius: 0.2rem;
+ background: #f6f6f6;
+ border-radius: 0.15rem;
display: flex;
+
.search_img {
width: 1rem;
height: 100%;
display: flex;
justify-content: center;
align-items: center;
+
img {
- width: 0.6rem;
- height: 0.6rem;
+ width: 0.5rem;
+ height: 0.5rem;
}
}
+
.search_input {
- width: calc(100% - 1rem);
+ width: 100%;
+ overflow: hidden;
height: 100%;
display: flex;
}
}
+
.right_search_class {
width: 13%;
height: 100%;
display: flex;
justify-content: flex-end;
align-items: center;
+
img {
width: 0.6rem;
height: 0.6rem;
@@ -327,25 +364,69 @@
}
}
}
+
+.top_title {
+ width: 100%;
+ height: 1.2821rem;
+ padding: 0 0.3rem;
+ position: fixed;
+ background: #fff;
+ top: 0;
+ z-index: 9999999;
+ transition: all 1s;
+
+ >div {
+ width: 100%;
+ height: 1.2821rem;
+ display: flex;
+ align-items: center;
+ justify-content: space-between;
+ }
+
+ .tabs_title {
+ width: 23%;
+ height: 100%;
+ display: flex;
+ }
+
+ .tb {
+ width: 50%;
+ height: 100%;
+ display: flex;
+ justify-content: center;
+ align-items: center;
+ font-size: 0.4103rem;
+ }
+
+ .active {
+ font-size: 0.5003rem;
+ font-weight: 800;
+ }
+}
+
.bottom_content {
width: 100%;
height: calc(100% - 1.2821rem);
+ position: relative;
+ top: 7%;
}
+
.scroll_tab {
width: 100%;
- height: 1.1538rem;
+ height: 1rem;
overflow-x: scroll;
-webkit-overflow-scrolling: touch;
display: -webkit-box;
white-space: nowrap;
- > div {
+ >div {
display: inline-block;
- width: 25%;
+ width: 15%;
height: 100%;
display: flex;
- justify-content: center;
+ font-size: 0.4rem;
align-items: center;
+
span {
display: inline-block;
min-width: 40%;
@@ -354,125 +435,292 @@
line-height: 1.1538rem;
}
}
+
span.active {
- color: rgb(43, 132, 247);
- border-bottom: 1px solid rgb(43, 132, 247);
+ color: rgb(2, 99, 226);
+ border-bottom: 0.07rem solid rgb(2, 99, 226);
font-weight: 800;
transition: all 0.5s;
}
}
+
.scroll_tab::-webkit-scrollbar {
display: none;
}
+
.kai_mess {
width: 100%;
height: 1.2821rem;
- background: rgb(245, 249, 254);
+ background: #f5f9fe;
display: flex;
justify-content: space-between;
+ position: absolute;
+
.left_identity_img {
width: 0.9744rem;
height: 100%;
display: flex;
justify-content: center;
align-items: center;
+ margin-left: 0.2rem;
+
img {
width: 0.6rem;
height: 0.6rem;
}
}
+
.text {
width: 80%;
height: 100%;
display: flex;
align-items: center;
- color: #2883f7;
+ color: rgb(2, 99, 226);
font-weight: 800;
font-size: 0.35rem;
- padding-left: 0.4128rem;
+ padding-left: 0.35rem;
}
+
.right_go {
width: 10%;
display: flex;
align-items: center;
justify-content: center;
+
img {
width: 0.6rem;
height: 0.6rem;
}
}
}
+
.list::-webkit-scrollbar {
display: none;
}
+
.list {
width: 100%;
- height: calc(100% - 1.2821rem - 1rem - 1.1538rem - 1.3333rem);
+ height: calc(100% - 1.2821rem - 1rem - 1.1538rem - 1.3333rem);
overflow-x: auto;
padding-bottom: 1.2821rem;
+ padding: 0 0.3rem;
+
.list_items {
width: 100%;
- > div {
+
+ >div {
width: 100%;
height: 1.0256rem;
display: flex;
margin: 0.5rem 0;
- > div {
- > div {
+
+ >div {
+ >div {
display: flex;
align-items: center;
}
+
.tp {
width: 100%;
height: 70%;
}
+
.bt {
width: 100%;
height: 30%;
}
}
}
+
.left_title {
width: 45%;
height: 100%;
}
+
.center_price {
width: 35%;
height: 100%;
}
+
.right_bs {
width: 20%;
height: 100%;
}
}
}
+
.list_title {
- width: 100%;
- height: 1rem;
- color: #ccc;
+ width: 100%;
+ height: 1rem;
+ margin-top: 1.29rem;
+ padding: 0 0.3rem;
+ color: #a1a2a4;
+ display: flex;
+
+ >div {
display: flex;
- >div {
- display: flex;
- align-items: center;
- }
- .varieties{
- width: 45%;
- }
- .latest_price {
- width: 35%;
- }
- .applies {
- width: 20%;
- }
+ align-items: center;
+ }
+
+ .varieties {
+ width: 45%;
+ }
+
+ .latest_price {
+ width: 35%;
+ }
+
+ .applies {
+ width: 20%;
+ }
}
+
.price_color {
color: rgb(39, 171, 99);
font-size: 0.4rem;
font-weight: 600;
}
+
.title_color {
color: rgb(2, 2, 2);
font-size: 0.4rem;
font-weight: 600;
}
+
+.tab_items {
+ font-size: 0.2rem;
+}
+
+.tab_class {
+ padding: 0 0.3rem;
+}
+
+.searchs::placeholder {
+ color: #8e8f92;
+}
+
+.searchs {
+ width: 100%;
+}
+
+.collection {
+ display: inline-block;
+ width: 0.1rem;
+ height: 50%;
+ display: flex;
+ align-items: center;
+ justify-content: center;
+ margin-right: 0.1rem;
+
+ .shu {
+ width: 60%;
+ height: 100%;
+ background: #919191;
+ }
+}
+
+.right_money {
+ width: 44%;
+ height: 100%;
+ display: flex;
+ align-items: center;
+ justify-content: flex-end;
+
+ .content_money {
+ width: 80%;
+ height: 80%;
+ }
+
+ .top_price {
+ width: 100%;
+ height: 70%;
+ display: flex;
+ align-items: center;
+ justify-content: space-between;
+
+ .left {
+ width: 0.8rem;
+ height: 0.4103rem;
+ border-radius: 0.1rem;
+ background: #4d73b1;
+ color: #fff;
+ font-size: 0.3077rem;
+ display: flex;
+ align-items: center;
+ justify-content: center;
+ margin-left: 0.3rem;
+
+ span {
+ display: inline-block;
+ transform: scale(0.8);
+ font-weight: 600;
+ }
+ }
+
+ .right {
+ width: calc(100% - 1.2rem);
+ height: 100%;
+ display: flex;
+ align-items: center;
+ justify-content: flex-end;
+
+ span {
+ font-weight: 600;
+ }
+ }
+ }
+
+ .bottom_balance {
+ width: 100%;
+ height: 30%;
+ display: flex;
+ justify-content: flex-end;
+ font-size: 0.3077rem;
+ color: #acaeaf;
+ transform: scale(0.9);
+ margin-left: 0.2rem;
+ padding-right: 0.48rem;
+ }
+}
+
+.sanjiao {
+ width: 0.4rem;
+ height: 0.4rem;
+ display: flex;
+ align-items: center;
+ justify-content: center;
+
+ img {
+ width: 0.4rem;
+ height: 0.4rem;
+ }
+}
+
+.dialog {
+ position: absolute;
+ width: 100%;
+ height: 100%;
+ background: rgba(0, 0, 0, 0.4);
+ top: 7%;
+ z-index: 9;
+ transition: all 0.5s;
+}
+
+.dialog.open {
+ top: 7%;
+}
+
+.shai {
+ position: absolute;
+ width: 100%;
+ height: 100%;
+ background: rgba(0, 0, 0, 0.4);
+ top: 0%;
+ z-index: 10;
+ transition: all 0.5s;
+}
+
+.shai.open {
+ top: 4%;
+}
</style>
\ No newline at end of file
--
Gitblit v1.9.3