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/home/home.vue | 2
src/components/elalert.vue | 78 +++++++++
index.html | 6
src/page/list/trading-list.vue | 373 +++++++++++++++++++++++++++-------------------
4 files changed, 302 insertions(+), 157 deletions(-)
diff --git a/index.html b/index.html
index d2bb309..b112b38 100644
--- a/index.html
+++ b/index.html
@@ -2,7 +2,7 @@
<html>
<head>
<meta charset="utf-8">
- <meta name=viewport content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no">
+ <meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no">
<title>首页</title>
<link rel="shortcut icon" href=./favicon.ico type=image/x-icon>
<link href="static/css/public1.css" rel="stylesheet">
@@ -10,10 +10,12 @@
<script>
// 禁用缩放
function addMeta() {
- $('head').append('<meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />');
+ // $('head').append('<meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />');
}
setTimeout(addMeta, 3000);
+
+
// 禁用双指放大
document.documentElement.addEventListener('touchstart', function (event) {
if (event.touches.length > 1) {
diff --git a/src/components/elalert.vue b/src/components/elalert.vue
new file mode 100644
index 0000000..bd677ab
--- /dev/null
+++ b/src/components/elalert.vue
@@ -0,0 +1,78 @@
+<!-- -->
+<template>
+ <el-alert v-show="alertShow" :closable="closable" :title="texts" :type="elType" center>
+ </el-alert>
+</template>
+
+<script>
+export default {
+ props: {
+ alertShow: {
+ type: Boolean,
+ default: false
+ },
+ closable: {
+ type: Boolean,
+ default: false
+ },
+ texts: {
+ type: String,
+ default: ''
+ },
+ elType: {
+ type: String,
+ default: 'warning'
+ }
+ },
+ data() {
+ return {
+
+ }
+ },
+ //监听alertShow变成true时，2秒后自动关闭
+ watch: {
+ alertShow: function (val) {
+ if (val) {
+ setTimeout(() => {
+ this.$emit('closeAlert')
+ }, 2000)
+ }
+ }
+ },
+ //生命周期 - 创建完成（访问当前this实例）
+ created() {
+
+ },
+ //生命周期 - 挂载完成（访问DOM元素）
+ mounted() {
+
+ },
+ methods:{
+ //定时调用父组件方法关闭弹窗
+ closeAlert(){
+ //定时调用父组件方法关闭弹窗
+ setTimeout(()=>{
+ this.$emit('closeAlert')
+ },2000)
+ }
+
+ }
+}
+</script>
+<style scoped lang="less">
+/* @import url(); 引入css类 */
+/deep/.el-alert{
+ width: 70%!important;
+ height: 1rem!important;
+ position: absolute!important;
+ top: 0!important;
+ bottom: 0!important;
+ left: 0!important;
+ right: 0!important;
+ margin: auto!important;
+ font-size: 0.3rem!important;
+}
+/deep/.el-alert__title{
+ font-size: 0.3rem!important;
+}
+</style>
\ No newline at end of file
diff --git a/src/page/home/home.vue b/src/page/home/home.vue
index 5854c7d..5d00d0b 100644
--- a/src/page/home/home.vue
+++ b/src/page/home/home.vue
@@ -739,7 +739,7 @@
}
.title {
- width: 20%;
+ width: 30%;
height: 100%;
display: flex;
align-items: center;
diff --git a/src/page/list/trading-list.vue b/src/page/list/trading-list.vue
index 65e2561..402d7d7 100644
--- a/src/page/list/trading-list.vue
+++ b/src/page/list/trading-list.vue
@@ -18,12 +18,8 @@
</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>
@@ -58,23 +54,24 @@
<span class="collection" @click="handleCollectionClick(item)">
<span class="shu"></span>
</span>
- <span class="title_color">{{ item.name }}</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>
@@ -85,19 +82,14 @@
</div>
</div>
<div class="shai" v-if="dialogFlag" @click="openDialog()"></div>
- <div class="top_title" @click="openDialog()" ref="topTitle">
+ <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)"
- >
+ <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 class="right_money" @click="openDialog()">
<div class="content_money" v-if="tabsIndex === 1">
<div class="top_price">
<div class="left">
@@ -123,168 +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: 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,
- collection: true
- },
- {
- name: "香港50指数",
- referred: "HK50",
- price: 16445.5,
- time: "02:59:58",
- applies: 5.93,
- collection: true
- },
- {
- name: "香港50指数",
- referred: "HK50",
- price: 16445.5,
- time: "02:59:58",
- applies: 5.93,
- collection: true
- },
- {
- name: "香港50指数",
- referred: "HK50",
- price: 16445.5,
- time: "02:59:58",
- applies: 5.93,
- collection: true
- },
- {
- name: "香港50指数",
- referred: "HK50",
- price: 16445.5,
- time: "02:59:58",
- applies: 5.93,
- collection: false
- },
- {
- name: "香港50指数",
- referred: "HK50",
- price: 16445.5,
- time: "02:59:58",
- applies: 5.93,
- collection: false
- },
- {
- name: "香港50指数",
- referred: "HK50",
- price: 16445.5,
- time: "02:59:58",
- applies: 5.93,
- collection: true
- },
- {
- name: "香港50指数",
- referred: "HK50",
- price: 16445.5,
- time: "02:59:58",
- applies: 5.93,
- collection: false
- },
- {
- name: "香港50指数",
- referred: "HK50",
- price: 16445.5,
- time: "02:59:58",
- applies: 5.93,
- collection: false
- },
- {
- name: "香港50指数",
- referred: "HK50",
- price: 16445.5,
- time: "02:59:58",
- applies: 5.93,
- collection: false
- },
- {
- name: "香港50指数",
- referred: "HK50",
- price: 16445.5,
- time: "02:59:58",
- applies: 5.93,
- collection: false
- },
- {
- name: "香港50指数",
- referred: "HK50",
- price: 16445.5,
- time: "02:59:58",
- applies: 5.93,
- collection: false
- },
- {
- name: "香港50指数",
- referred: "HK50",
- price: 16445.5,
- time: "02:59:58",
- applies: 5.93,
- collection: false
- }
- ]
+ 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'
- }
+ 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>
@@ -293,15 +295,18 @@
width: 100%;
height: calc(100% - 1.3rem);
background: #fff;
- > .content {
+
+ >.content {
width: 100%;
height: 100%;
}
}
+
.tabs {
width: 100%;
height: 100%;
position: relative;
+
.search {
width: 100%;
height: 1rem;
@@ -309,29 +314,34 @@
align-items: center;
justify-content: center;
padding: 0 0.3rem;
+
.search_content {
width: 100%;
height: 90%;
display: flex;
align-items: center;
}
+
.left_search {
width: 100%;
height: 100%;
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.5rem;
height: 0.5rem;
}
}
+
.search_input {
width: 100%;
overflow: hidden;
@@ -339,12 +349,14 @@
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;
@@ -352,6 +364,7 @@
}
}
}
+
.top_title {
width: 100%;
height: 1.2821rem;
@@ -361,18 +374,21 @@
top: 0;
z-index: 9999999;
transition: all 1s;
+
>div {
width: 100%;
height: 1.2821rem;
display: flex;
align-items: center;
- justify-content: space-between;
+ justify-content: space-between;
}
+
.tabs_title {
width: 23%;
height: 100%;
display: flex;
}
+
.tb {
width: 50%;
height: 100%;
@@ -381,17 +397,20 @@
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: 1rem;
@@ -400,13 +419,14 @@
display: -webkit-box;
white-space: nowrap;
- > div {
+ >div {
display: inline-block;
width: 15%;
height: 100%;
display: flex;
font-size: 0.4rem;
align-items: center;
+
span {
display: inline-block;
min-width: 40%;
@@ -415,6 +435,7 @@
line-height: 1.1538rem;
}
}
+
span.active {
color: rgb(2, 99, 226);
border-bottom: 0.07rem solid rgb(2, 99, 226);
@@ -422,9 +443,11 @@
transition: all 0.5s;
}
}
+
.scroll_tab::-webkit-scrollbar {
display: none;
}
+
.kai_mess {
width: 100%;
height: 1.2821rem;
@@ -432,6 +455,7 @@
display: flex;
justify-content: space-between;
position: absolute;
+
.left_identity_img {
width: 0.9744rem;
height: 100%;
@@ -439,11 +463,13 @@
justify-content: center;
align-items: center;
margin-left: 0.2rem;
+
img {
width: 0.6rem;
height: 0.6rem;
}
}
+
.text {
width: 80%;
height: 100%;
@@ -454,62 +480,75 @@
font-size: 0.35rem;
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);
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;
@@ -517,42 +556,53 @@
padding: 0 0.3rem;
color: #a1a2a4;
display: flex;
- > div {
+
+ >div {
display: flex;
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;
@@ -561,28 +611,33 @@
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;
@@ -594,23 +649,27 @@
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%;
@@ -623,17 +682,20 @@
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%;
@@ -643,9 +705,11 @@
z-index: 9;
transition: all 0.5s;
}
+
.dialog.open {
top: 7%;
}
+
.shai {
position: absolute;
width: 100%;
@@ -655,6 +719,7 @@
z-index: 10;
transition: all 0.5s;
}
+
.shai.open {
top: 4%;
}
--
Gitblit v1.9.3