<template>
|
<!-- 最多关注-->
|
<div class="center_tabs" style="height: 100%; margin: 0; padding: 0; top: 0">
|
<div class="search">
|
<div class="search_content">
|
<div class="left_search">
|
<div class="search_img">
|
<img src="../../assets/img/searchs.png" alt />
|
</div>
|
<div class="search_input">
|
<input
|
type="text"
|
class="searchs"
|
:placeholder="$t('hj37')"
|
ref="search"
|
id="sousuo"
|
v-model="gpcode"
|
@input="gpinput"
|
/>
|
</div>
|
</div>
|
</div>
|
</div>
|
|
<div class="tabs_title">
|
<div class="tb" style="padding: 0; background-color: #f5f5f5">
|
<div style="width: 33%; text-align: center">
|
<span
|
:class="tabsIndex0010 == 0 ? 'active' : ''"
|
@click="handleTabsClick0010(0)"
|
>{{ $t("hj61") }}</span
|
>
|
</div>
|
<div style="width: 33%; text-align: center">
|
<span
|
:class="tabsIndex0010 == 1 ? 'active' : ''"
|
@click="handleTabsClick0010(1)"
|
>{{ $t("ydgs") }}</span
|
>
|
</div>
|
<div style="width: 33%; text-align: center">
|
<span
|
:class="tabsIndex0010 == 2 ? 'active' : ''"
|
@click="handleTabsClick0010(2)"
|
>{{ $t("mggs") }}</span
|
>
|
</div>
|
</div>
|
</div>
|
<div class="tabs_title" v-if="tabsIndex0010 == 0">
|
<div class="tb" style="padding: 0; background-color: #f5f5f5">
|
<div style="width: 33%; text-align: center">
|
<span
|
:class="tabsIndex0010a == 0 ? 'active' : ''"
|
@click="handleTabsClick0010a(0)"
|
>{{ $t("ydgs") }}</span
|
>
|
</div>
|
<div style="width: 33%; text-align: center">
|
<span
|
:class="tabsIndex0010a == 1 ? 'active' : ''"
|
@click="handleTabsClick0010a(1)"
|
>{{ $t("mggs") }}</span
|
>
|
</div>
|
<div style="width: 33%; text-align: center">
|
<!-- <span :class="tabsIndex0010 == 2 ? 'active' : ''" @click="handleTabsClick0010(1)">{{ $t('TOPC') }}</span> -->
|
</div>
|
</div>
|
</div>
|
|
<div class="list_title">
|
<div class="item_title varieties">
|
<span>{{ $t("hj39") }}</span>
|
</div>
|
<div class="item_title latest_price">
|
<span>{{ $t("hj40") }}</span>
|
</div>
|
<div class="item_title applies">
|
<span>{{ $t("hj41") }}</span>
|
</div>
|
</div>
|
|
<!-- <TradList class="tradlist" :typety="true"></TradList> -->
|
|
<!-- 市场列表 -->
|
<div
|
class="list"
|
v-if="tabsIndex001 == 0"
|
:class="isToken == '' ? 'listHeight' : 'listHeights'"
|
>
|
<van-list
|
v-model="loading"
|
:finished="finished"
|
:loading-text="$t('hj430')"
|
:finished-text="$t('hj43')"
|
@load="onLoad"
|
:immediate-check="false"
|
>
|
<div v-if="tabsIndex0010 == 0" class="van-clearfix">
|
<div class="list_items">
|
<div
|
class="item"
|
v-for="(item, index) in listArr"
|
:key="index"
|
@click="handleGoToKlineDetail(item, index)"
|
>
|
<div class="item_box">
|
<div class="item_box_left">
|
<div class="item_box_left_top">{{ item.spell }}1</div>
|
<div class="item_box_left_bottom">{{ item.name }}</div>
|
</div>
|
<div class="item_box_zj">
|
{{ item.nowPrice }}
|
</div>
|
|
<div
|
:class="
|
item.color == '1' ? 'item_box_right' : 'item_box_righta'
|
"
|
>
|
{{ item.hcrate }}%
|
</div>
|
</div>
|
</div>
|
</div>
|
</div>
|
<div v-if="tabsIndex0010 == 1" class="van-clearfix">
|
<div class="list_items">
|
<div
|
class="item"
|
v-for="(item, index) in listArr"
|
:key="index"
|
@click="handleGoToKlineDetail(item, index)"
|
>
|
<div class="item_box">
|
<div class="item_box_left">
|
<div class="item_box_left_top">{{ item.spell }}</div>
|
<div class="item_box_left_bottom">{{ item.name }}</div>
|
</div>
|
<div class="item_box_zj">{{ item.nowPrice }}</div>
|
|
<div
|
:class="
|
item.color == '1' ? 'item_box_right' : 'item_box_righta'
|
"
|
>
|
{{ item.hcrate }}%
|
</div>
|
</div>
|
</div>
|
</div>
|
</div>
|
<div v-if="tabsIndex0010 == 2" class="van-clearfix">
|
<div class="list_items">
|
<div
|
class="item"
|
v-for="(item, index) in listArr"
|
:key="index"
|
@click="handleGoToKlineDetail(item, index)"
|
>
|
<div class="item_box">
|
<div class="item_box_left">
|
<div class="item_box_left_top">{{ item.spell }}</div>
|
<div class="item_box_left_bottom">{{ item.name }}</div>
|
</div>
|
<div class="item_box_zj">{{ item.nowPrice }}</div>
|
|
<div
|
:class="
|
item.color == '1' ? 'item_box_right' : 'item_box_righta'
|
"
|
>
|
{{ item.hcrate }}%
|
</div>
|
</div>
|
</div>
|
</div>
|
</div>
|
</van-list>
|
</div>
|
|
<!-- 市场列表 -->
|
<div
|
class="list"
|
v-if="tabsIndex001 == 1"
|
:class="isToken == '' ? 'listHeight' : 'listHeights'"
|
>
|
<van-list
|
v-model="loading"
|
:finished="finished"
|
:loading-text="$t('hj430')"
|
:finished-text="$t('hj43')"
|
@load="onLoad"
|
:immediate-check="false"
|
>
|
<div v-if="tabsItemIndex == 0" class="van-clearfix">
|
<div class="list_items">
|
<div
|
class="item"
|
v-for="(item, index) in listArr"
|
:key="index"
|
@click="handleGoToKlineDetail(item, index)"
|
>
|
<div class="item_box">
|
<div class="item_box_left">
|
<div class="item_box_left_top">{{ item.spell }}</div>
|
<div class="item_box_left_bottom">{{ item.name }}</div>
|
</div>
|
<div class="item_box_zj">{{ item.nowPrice }}</div>
|
<div
|
class="item_box_righta"
|
v-if="orderBy == 'asc' && tabsIndex0010 == 0"
|
>
|
{{ item.hcrate }}%
|
</div>
|
<div
|
class="item_box_right"
|
v-if="orderBy == 'desc' && tabsIndex0010 == 1"
|
>
|
{{ item.hcrate }}%
|
</div>
|
<div
|
:class="
|
item.color == '1' ? 'item_box_right' : 'item_box_righta'
|
"
|
>
|
{{ item.hcrate }}%
|
</div>
|
</div>
|
</div>
|
</div>
|
</div>
|
<div v-if="tabsItemIndex == 1" class="van-clearfix">
|
<div class="list_items">
|
<div
|
class="item"
|
v-for="(item, index) in listArr1"
|
:key="index"
|
@click="handleGoToKlineDetail(item, index)"
|
>
|
<div
|
v-if="
|
(tabsItemIndex == 5 && item.zt == 0) || tabsItemIndex != 5
|
"
|
>
|
<div class="left_title">
|
<div class="tp">
|
<span class="collection" @click.stop="options(item)">
|
<span
|
v-show="tabsItemIndex != 5"
|
class="shu"
|
:class="item.isOption == '1' ? 'shublue' : ''"
|
></span>
|
<span
|
v-show="tabsItemIndex == 5"
|
class="shu hongse"
|
></span>
|
</span>
|
<span
|
class="title_color"
|
style="white-space: nowrap; overflow: hidden"
|
>
|
{{
|
tabsItemIndex == 5
|
? item.name
|
: tabsItemIndex == 2
|
? item.name
|
: tabsItemIndex == 0 ||
|
tabsItemIndex == 3 ||
|
tabsItemIndex == 4
|
? item.name
|
: item.indexName | getName
|
}}
|
</span>
|
</div>
|
<div class="bt">
|
<span>
|
{{
|
tabsItemIndex == 5
|
? item.stockType + item.code
|
: tabsItemIndex == 2
|
? item.gid
|
: tabsItemIndex == 0 ||
|
tabsItemIndex == 3 ||
|
tabsItemIndex == 4
|
? item.gid
|
: item.indexCode
|
}}
|
</span>
|
</div>
|
</div>
|
<div class="center_price">
|
<div class="tp">
|
<span
|
class="price_color"
|
v-if="
|
tabsItemIndex == 0 ||
|
tabsItemIndex == 2 ||
|
tabsItemIndex == 3 ||
|
tabsItemIndex == 4
|
"
|
:class="item.hcrate > 0 ? 'green' : 'red'"
|
>
|
{{ item.nowPrice }}
|
</span>
|
<span class="price_color" v-else>
|
{{
|
tabsItemIndex == 5
|
? Number(item.price).toFixed(2)
|
: item.currentPoint
|
}}
|
</span>
|
</div>
|
<div class="bt">
|
<span v-if="tabsItemIndex == 5 || tabsItemIndex == 1">{{
|
tabsItemIndex == 5
|
? "Max:" + Number(item.orderNumber)
|
: $t("hj44") + ":" + Number(item.transFee)
|
}}</span>
|
<span v-else>{{ item.today_min }}</span>
|
</div>
|
</div>
|
<div class="right_bs">
|
<div class="tp" style="justify-content: flex-end">
|
<span
|
class="price_color"
|
v-if="
|
tabsItemIndex == 0 ||
|
tabsItemIndex == 2 ||
|
tabsItemIndex == 3 ||
|
tabsItemIndex == 4
|
"
|
:class="item.hcrate > 0 ? 'green' : 'red'"
|
>{{ item.hcrate }}</span
|
>
|
<span
|
class="price_color"
|
v-if="tabsItemIndex == 1"
|
:class="item.floatRate > 0 ? 'green' : 'red'"
|
>
|
{{ item.floatRate + "%" }}
|
</span>
|
<!-- <span class="price_color" v-if="tabsItemIndex == 3"
|
:class="((item.nowPrice - item.lastClose) / item.lastClose * 100).toFixed(2) > 0 ? 'green' : 'red'">
|
{{
|
item.lastClose == "" ? 0.00 : ((Number(item.nowPrice) - Number(item.lastClose)) /
|
Number(item.lastClose) * 100).toFixed(2) + '%'
|
}}
|
</span> -->
|
<div
|
v-if="tabsItemIndex == 5"
|
:class="item.type == 1 ? 'xgsgType' : 'xgsgTypeRed'"
|
>
|
<!-- {{item.orderNumber}} -->
|
{{ item.type == 1 ? $t("hj45") : $t("hj46") }}
|
</div>
|
</div>
|
<div class="bt" style="justify-content: flex-end">
|
<div v-if="tabsItemIndex != 1 && tabsItemIndex != 5">
|
{{ item.preclose_px }}
|
</div>
|
<!-- class="codeIcon" item.stock_type.toUpperCase()-->
|
</div>
|
</div>
|
</div>
|
</div>
|
</div>
|
</div>
|
</van-list>
|
|
<!-- <table border="1" class="list_item" width="100%">
|
<tr class="thh">
|
<th>{{ $t('hj39') }}</th>
|
<th>{{ $t('hj40') }}</th>
|
<th>{{ $t('hj41') }}</th>
|
</tr>
|
<tr v-for="(item, index) in listArr" :key="index" @click="handleGoToKlineDetail(item, index)">
|
<td>
|
<div class="name">{{ item.name }}</div>
|
<div class="text">{{ item.gid }}</div>
|
</td>
|
|
<td>
|
<div class="name" :class="item.nowPrice > 0 ? 'red' : 'green'">{{ item.nowPrice }}</div>
|
<div class="text">{{ item.today_min }}</div>
|
</td>
|
|
<td>
|
<div class="name" :class="item.nowPrice > 0 ? 'red' : 'green'">{{ item.hcrate }}</div>
|
<div class="text">{{ item.preclose_px }}</div>
|
</td>
|
|
</tr>
|
|
</table> -->
|
|
<!-- <div class="list_items">
|
<div class="item" v-for="(item, index) in listArr" :key="index" @click="handleGoToKlineDetail(item, index)">
|
{{ item }}
|
</div>
|
</div> -->
|
</div>
|
</div>
|
</template>
|
<script>
|
import AllList from "@/page/list/list-all";
|
import * as api from "@/axios/api";
|
import handleDt from "@/utils/deTh";
|
import Logo from "@/assets/img/img_log_home.png";
|
import Searchs from "@/assets/ico/leng.png";
|
import Service from "@/assets/home/icon_talk.png";
|
import clear from "@/assets/home/close.png";
|
import Announcement from "@/assets/img/black_laba.png";
|
import Tops from "@/assets/home/1.png";
|
import Rumen from "@/assets/home/2.png";
|
import Xuexi from "@/assets/home/3.png";
|
import Guanyu from "@/assets/home/4.png";
|
import dazong from "@/assets/home/5.png";
|
import vip from "@/assets/home/6.png";
|
import Huo from "@/assets/home/huo.png";
|
import banner1 from "@/assets/img/b1.png";
|
import banner2 from "@/assets/img/b2.png";
|
import banner3 from "@/assets/img/b3.png";
|
// import indexData from "./data.json";
|
import GoToLogin from "@/page/home/components/GoLogin.vue";
|
import { MessageBox } from "mint-ui";
|
import { color } from "echarts/lib/export";
|
|
// import TradList from '@/page/list/trading-list.vue'
|
|
export default {
|
components: {
|
AllList,
|
GoToLogin,
|
},
|
props: {},
|
data() {
|
return {
|
Logo,
|
Searchs,
|
Service,
|
gpcode: "",
|
clear,
|
Announcement,
|
indexData: [],
|
Huo,
|
is_login: false,
|
loading: false,
|
close: true,
|
proData: [], // 分割好的数据
|
currentIndex: 0,
|
tabsIndex001: 0,
|
finished: false,
|
orderBy: "",
|
bannerImgsArr: [
|
{
|
img: banner1,
|
},
|
{
|
img: banner2,
|
},
|
{
|
img: banner3,
|
},
|
],
|
announcementMess: "20202/10 - 交易时间安排",
|
tabsIndex0010: 0,
|
tabsIndex0010a: 0,
|
tabsItemIndex: 0,
|
artList: [],
|
isToken: "",
|
pageNum: 1,
|
news: "tab_0",
|
newsContent1: [],
|
newsContent2: [],
|
newsContent3: [],
|
newsContent4: [],
|
onlineService: "",
|
isGoTo: false,
|
bannerList: [],
|
userInfo: [],
|
showPopover: false,
|
|
listArr: [],
|
};
|
},
|
computed: {
|
navsArr() {
|
return [
|
{
|
img: Tops,
|
title: this.$t("hj1"),
|
},
|
{
|
img: Rumen,
|
title: this.$t("hj2"),
|
},
|
{
|
img: Xuexi,
|
title: this.$t("hj3"),
|
},
|
{
|
img: Guanyu,
|
title: this.$t("hj4"),
|
},
|
// {
|
// img: dazong,
|
// title: this.$t('hj261')
|
// },
|
// {
|
// img: vip,
|
// title: this.$t('hj279')
|
// }
|
];
|
},
|
},
|
methods: {
|
onLoad() {
|
// 异步更新数据
|
// setTimeout 仅做示例，真实场景中一般为 ajax 请求
|
switch (this.tabsItemIndex) {
|
case 1:
|
// this.loading = true
|
this.getListMarket();
|
break;
|
case 0:
|
this.stockPlate = "";
|
this.stockType = "";
|
// this.loading = true
|
|
if (this.tabsIndex001 === 0) {
|
// this.getStock(true)
|
} else if (this.tabsIndex001 === 1) {
|
// this.getStock()
|
} else if (this.tabsIndex001 === 2) {
|
} else if (this.tabsIndex001 === 3) {
|
this.getStock002(true);
|
}
|
|
break;
|
case 2:
|
this.stockPlate = "科创";
|
this.stockType = "";
|
// this.loading = true
|
this.getStocks();
|
break;
|
case 3:
|
this.stockPlate = "";
|
this.stockType = "us";
|
// this.loading = true
|
this.getStockUs();
|
break;
|
case 4:
|
this.stockPlate = "";
|
this.stockType = "hk";
|
// this.loading = true
|
this.getStockHk();
|
break;
|
case 5:
|
// this.loading = true
|
this.getFutures();
|
break;
|
}
|
|
// 加载状态结束
|
// this.loading = false;
|
|
// 数据全部加载完成
|
// if (this.list.length >= 40) {
|
// this.finished = true;
|
// }
|
},
|
// 进入详情
|
handleGoToKlineDetail(item) {
|
const obj = {
|
pid: item.code || "",
|
type: item.stock_type || "",
|
};
|
window.localStorage.setItem("kLine", JSON.stringify(obj));
|
var codes = "";
|
var names = "";
|
var stockType = "";
|
var soks = "";
|
var ifZhishu = "0";
|
var ifUs = "";
|
switch (this.tabsItemIndex) {
|
case 0:
|
codes = item.code;
|
names = item.name;
|
stockType =
|
item.stock_type === "us" ? item.stock_type + "a" : item.stock_type;
|
soks = item.type ? item.type : this.filterSH(item.stock_type);
|
ifZhishu = "0";
|
ifUs = item.stock_type === "us" ? "1" : "";
|
break;
|
case 3:
|
codes = item.code;
|
names = item.name;
|
stockType = item.stock_type + "a";
|
ifUs = "1";
|
soks = item.type;
|
ifZhishu = "0";
|
break;
|
case 4:
|
codes = item.code;
|
names = item.name;
|
stockType = item.stock_type;
|
soks = item.type;
|
ifZhishu = "0";
|
ifUs = "2";
|
break;
|
case 1:
|
codes = item.indexGid;
|
names = item.indexName;
|
stockType = "sh";
|
ifZhishu = item.indexCode;
|
soks = item.type ? item.type : 0;
|
break;
|
case 2:
|
codes = item.code;
|
names = item.name;
|
stockType = item.stock_type;
|
soks = this.filterSH(item.stock_type);
|
ifZhishu = "0";
|
break;
|
case 5:
|
this.sgCode = item.code;
|
this.xinguprice = item.price;
|
this.sgsj = item.subscribeTime;
|
this.rjsj = item.subscriptionTime;
|
this.orderNumber = item.orderNumber;
|
this.sgNum = Math.floor(
|
this.$store.state.userInfo.enableAmt / this.xinguprice
|
);
|
this.settingDialog = true;
|
|
// return
|
codes = item.futuresGid;
|
names = item.futuresName;
|
soks = 0;
|
stockType = "qh";
|
ifZhishu = item.indexGid;
|
break;
|
default:
|
break;
|
}
|
console.log(this.tabsItemIndex);
|
if (this.tabsItemIndex !== 5) {
|
this.$router.push({
|
path: "/kline",
|
query: {
|
name: names,
|
stockplate: item.stock_plate,
|
code: codes,
|
type: stockType,
|
sok: soks,
|
if_us: ifUs,
|
usType: item.type,
|
if_zhishu: ifZhishu,
|
},
|
});
|
}
|
},
|
getStock001: handleDt.debounce(async function () {
|
let data = await api.getOptionStock();
|
|
if (data.status === 0) {
|
this.listArr = data.data.list;
|
} else {
|
// this.texts = data.msg
|
// this.alertShow = true
|
}
|
}, 500),
|
|
getdialog() {
|
MessageBox.confirm(this.$t("hj252"), this.$t("hj165"), {
|
confirmButtonText: this.$t("hj161"),
|
cancelButtonText: this.$t("hj106"),
|
})
|
.then(async () => {})
|
.catch(() => {});
|
// MessageBox.confirm('老号被盗请勿转账,请认准新tg：@BEINL2', this.$t('hj165'), {
|
// confirmButtonText: this.$t('hj161'),
|
// cancelButtonText: this.$t('hj106'),
|
// }).then(async () => {
|
|
// }).catch(() => {
|
|
// });
|
},
|
gpinput: handleDt.debounce(function () {
|
this.pageNum = 1;
|
this.listArr = [];
|
this.listArr1 = [];
|
this.listArr2 = [];
|
this.listArr3 = [];
|
this.listArr4 = [];
|
this.listArr5 = [];
|
// this.loading = true
|
this.finished = false;
|
this.stockType = "";
|
this.getStock();
|
}, 1000),
|
onSelect(e) {
|
this.$i18n.locale = e.lang;
|
window.localStorage.setItem("language", e.lang);
|
},
|
async getUserInfo() {
|
// 获取用户信息
|
let data = await api.getUserInfo();
|
if (data.status === 0) {
|
// 判断是否登录
|
this.$store.state.userInfo = data.data;
|
this.userInfo = data.data;
|
} else {
|
}
|
},
|
getHuo() {
|
// 123随机
|
var num = Math.floor(Math.random() * 3 + 1);
|
return num;
|
},
|
// 构造随机数列表 50 100 200
|
getNum1(num) {
|
if (num == 1) {
|
return 50;
|
} else if (num == 2) {
|
return 100;
|
} else if (num >= 3) {
|
return 200;
|
}
|
},
|
goDetail(item) {
|
if (this.userInfo.length == 0) {
|
this.$store.commit("dialogVisible", true);
|
return;
|
}
|
this.$router.push({
|
path: "/kline",
|
query: {
|
name: item.name,
|
stockplate: item.stock_plate,
|
code: item.symbol.substring(2, item.symbol.length),
|
type: item.market,
|
sok: this.filterSH(item.market),
|
if_zhishu: "0",
|
},
|
});
|
},
|
filterSH(val) {
|
if (val === "sh") {
|
return 1;
|
} else if (val === "bj" || val === "sz") {
|
return 0;
|
}
|
},
|
goJy(index) {
|
if (this.userInfo.length == 0) {
|
this.$store.commit("dialogVisible", true);
|
return;
|
}
|
switch (index) {
|
case 0:
|
this.$router.push("/trading-list");
|
break;
|
case 1:
|
this.$router.push("/warehouse");
|
break;
|
case 2:
|
this.$router.push({
|
path: "/trading-list",
|
query: {
|
listid: 5,
|
},
|
});
|
break;
|
case 3:
|
this.$router.push("/user");
|
break;
|
case 4:
|
this.$router.push("/Subscription?idx=1");
|
break;
|
case 5:
|
this.$router.push("/Subscription?idx=2");
|
break;
|
default:
|
break;
|
}
|
if (navigator.vibrate) {
|
// 支持
|
navigator.vibrate([55]);
|
}
|
},
|
async getBanner() {
|
// 获取显示的banner
|
let result = await api.getBannerByPlat({
|
platType: "m",
|
});
|
if (result.status === 0) {
|
this.bannerList = result.data;
|
} else {
|
this.$store.commit("elAlertShow", {
|
elAlertShow: true,
|
elAlertText: result.msg,
|
});
|
}
|
},
|
goOnline() {
|
this.$router.push("/service");
|
},
|
async getArtList() {
|
let data = await api.getArtList();
|
if (data.status == 0) {
|
this.artList = data.data.list[0];
|
}
|
},
|
async getInfoSite() {
|
let data = await api.getInfoSite();
|
if (data.status === 0) {
|
this.onlineService = data.data.onlineService;
|
} else {
|
this.$store.commit("elAlertShow", {
|
elAlertShow: true,
|
elAlertText: data.msg,
|
});
|
}
|
},
|
async getStock() {
|
// let stockType = this.tabsIndex0010 == 1 ? "IN" : "US";
|
let stockType = "JP";
|
// let pageNumVal = (pageNum) ? this.pageNum++ : 1
|
|
// 沪深
|
let opt = {
|
pageNum: this.pageNum,
|
pageSize: 15,
|
stockPlate: this.stockPlate,
|
keyWords: this.gpcode,
|
stockType: stockType,
|
orderBy: this.orderBy,
|
};
|
let data = await api.getStockByType(opt);
|
if (data.status === 0) {
|
this.listArr = data.data.list;
|
} else {
|
this.$store.commit("elAlertShow", {
|
elAlertShow: true,
|
elAlertText: data.msg,
|
});
|
}
|
},
|
async getzixuan() {
|
let stockType = this.tabsIndex0010 == 1 ? "IN" : "US";
|
// let pageNumVal = (pageNum) ? this.pageNum++ : 1
|
if (this.tabsIndex0010 == 0 && this.tabsIndex0010a == 0) {
|
stockType = "IN";
|
} else {
|
stockType = "US";
|
}
|
let opt = {
|
pageNum: this.pageNum,
|
pageSize: 15,
|
stockPlate: this.stockPlate,
|
keyWords: this.gpcode,
|
stockType: stockType,
|
orderBy: this.orderBy,
|
};
|
let data = await api.getOrderList(opt);
|
if (data.status === 0) {
|
this.loading = false;
|
this.listArr = data.data.list;
|
} else {
|
this.$store.commit("elAlertShow", {
|
elAlertShow: true,
|
elAlertText: data.msg,
|
});
|
}
|
},
|
async getNewsList(type) {
|
let data = await api.queryNewsList(type);
|
|
switch (type) {
|
case 1:
|
this.newsContent1 = data.data.list;
|
break;
|
case 2:
|
this.newsContent2 = data.data.list;
|
break;
|
case 3:
|
this.newsContent3 = data.data.list;
|
break;
|
case 4:
|
this.newsContent4 = data.data.list;
|
break;
|
case 5:
|
this.newsContent5 = data.data.list;
|
break;
|
}
|
},
|
handleBannerClick(ind) {
|
// console.log(ind);
|
},
|
ProcessData() {
|
// 把数据分割成三等份
|
// for (var i = 0; i < this.indexData.data.diff.length; i += 3) {
|
// this.proData.push(this.indexData.data.diff.slice(i, i + 3));
|
// }
|
},
|
handleTabsClick0010a(ind) {
|
this.tabsIndex0010a = ind;
|
console.log(2112, this.$route.path);
|
// this.$router.replace({ path: this.$route.path, query: {} })
|
this.pageNum = 1;
|
this.listArr = [];
|
this.listArr1 = [];
|
this.listArr2 = [];
|
this.listArr3 = [];
|
this.listArr4 = [];
|
this.listArr5 = [];
|
if (ind === 0) {
|
this.listArr = [];
|
this.pageNum = 1;
|
this.loading = false;
|
this.finished = false;
|
if (this.tabsIndex0010 == 0) {
|
this.getzixuan();
|
} else {
|
this.getStock();
|
}
|
} else if (ind === 1) {
|
this.listArr = [];
|
this.pageNum = 1;
|
this.loading = false;
|
this.finished = false;
|
if (this.tabsIndex0010 == 0) {
|
this.getzixuan();
|
} else {
|
this.getStock();
|
}
|
} else if (ind === 2) {
|
this.listArr = [];
|
this.pageNum = 1;
|
this.loading = false;
|
this.finished = false;
|
this.getStock001();
|
} else if (ind === 3) {
|
this.listArr = [];
|
this.pageNum = 1;
|
this.loading = false;
|
this.finished = false;
|
this.getStock002();
|
}
|
},
|
handleTabsClick0010(ind) {
|
this.tabsIndex0010 = ind;
|
console.log(2112, ind);
|
// this.$router.replace({ path: this.$route.path, query: {} })
|
this.pageNum = 1;
|
this.listArr = [];
|
this.listArr1 = [];
|
this.listArr2 = [];
|
this.listArr3 = [];
|
this.listArr4 = [];
|
this.listArr5 = [];
|
if (ind === 0) {
|
this.listArr = [];
|
this.pageNum = 1;
|
this.loading = false;
|
this.finished = false;
|
this.getzixuan();
|
} else if (ind === 1) {
|
this.listArr = [];
|
this.pageNum = 1;
|
this.loading = false;
|
this.finished = false;
|
this.getStock();
|
} else if (ind === 2) {
|
this.listArr = [];
|
this.pageNum = 1;
|
this.loading = false;
|
this.finished = false;
|
this.getStock();
|
} else if (ind === 3) {
|
this.listArr = [];
|
this.pageNum = 1;
|
this.loading = false;
|
this.finished = false;
|
this.getStock002();
|
}
|
},
|
onChange(index) {
|
this.currentIndex = index;
|
this.proData[index].forEach((item) => {});
|
},
|
handleSearchClick() {
|
// this.loading = !this.loading;
|
this.$router.push({
|
path: "/trading-list",
|
query: {
|
type: 1,
|
},
|
});
|
},
|
},
|
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 y + "-" + mm + "-" + d + " " + h + ":" + m + ":" + c;
|
},
|
},
|
created() {
|
// this.getdialog()
|
// this.ProcessData()
|
},
|
mounted() {
|
this.getUserInfo();
|
this.isToken = window.localStorage.getItem("USERTOKEN");
|
this.getzixuan();
|
|
// this.getUserInfo()
|
// this.getInfoSite()
|
// this.getNewsList(1)
|
// this.getNewsList(2)
|
// this.getNewsList(4)
|
// this.getStock()
|
// this.getArtList()
|
// this.getBanner()
|
|
let intEv = setInterval(() => {
|
if (window.localStorage.getItem("USERTOKEN")) {
|
this.isGoTo = false;
|
} else {
|
// this.isGoTo = !this.isGoTo
|
// this.$router.push('/login')
|
|
window.clearInterval(intEv);
|
}
|
}, 5000);
|
|
setTimeout(() => {
|
this.loading = false;
|
}, 2000);
|
},
|
};
|
</script>
|
<style lang="less" scoped>
|
body {
|
background-color: #fff;
|
}
|
.tb {
|
width: 100%;
|
padding: 0 0.2rem;
|
height: 100%;
|
display: flex;
|
justify-content: center;
|
align-items: center;
|
font-size: 15px;
|
|
span {
|
// width: 50%;
|
}
|
}
|
|
.active {
|
width: 50px;
|
color: rgb(2, 99, 226);
|
border-bottom: 0.06rem solid rgb(2, 99, 226);
|
padding-bottom: 10px;
|
font-weight: 800;
|
transition: all 0.5s;
|
}
|
|
.wrapper {
|
width: 100%;
|
height: 100%;
|
|
padding-top: 0.3128rem;
|
|
.page_content {
|
width: 100%;
|
height: 100%;
|
}
|
}
|
|
.top_logo {
|
width: 100%;
|
height: 0.7949rem;
|
display: flex;
|
padding-right: 0.3rem;
|
|
> div {
|
width: 50%;
|
height: 100%;
|
display: flex;
|
align-items: center;
|
}
|
|
.img_logo {
|
width: 1.1rem;
|
height: 1.1rem;
|
margin-left: 0.3846rem;
|
|
> img {
|
width: 100%;
|
height: 100%;
|
}
|
}
|
|
.right_search {
|
justify-content: flex-end;
|
width: 50%;
|
|
> div {
|
width: 34%;
|
height: 0.4615rem;
|
display: flex;
|
justify-content: space-between;
|
|
> div {
|
width: 0.5615rem;
|
height: 0.5615rem;
|
|
> img {
|
width: 100%;
|
height: 100%;
|
}
|
}
|
}
|
}
|
}
|
|
.search {
|
width: 100%;
|
height: 1rem;
|
display: flex;
|
align-items: center;
|
justify-content: center;
|
padding: 0 0.3rem;
|
position: relative;
|
top: 0px;
|
background-color: #fff;
|
z-index: 99;
|
|
.search_content {
|
width: 100%;
|
height: 90%;
|
display: flex;
|
align-items: center;
|
}
|
|
.left_search {
|
width: 100%;
|
height: 100%;
|
background: #f6f6f6;
|
border-radius: 100px;
|
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;
|
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;
|
}
|
}
|
}
|
|
.list_title {
|
width: 100%;
|
height: 1.3rem;
|
margin-top: 0.09rem;
|
padding: 0 0.3rem;
|
color: #a1a2a4;
|
display: flex;
|
background-color: #fff;
|
border-bottom: 1px solid #f2f6fc;
|
|
> div {
|
display: flex;
|
align-items: center;
|
}
|
|
.varieties {
|
width: 33%;
|
align-items: center;
|
// justify-content: center;
|
}
|
|
.latest_price {
|
width: 33%;
|
align-items: center;
|
justify-content: center;
|
}
|
|
.applies {
|
width: 33%;
|
align-items: center;
|
justify-content: flex-end;
|
}
|
}
|
|
.center_tabs {
|
width: 100%;
|
height: auto;
|
margin-top: 0.2308rem;
|
|
> .banner_top {
|
width: 100%;
|
|
img {
|
width: 100%;
|
height: 100%;
|
}
|
|
.van-swipe-item {
|
height: 3.0615rem;
|
padding: 0 0.264rem;
|
border-radius: 0.3rem;
|
}
|
|
.van-swipe-item img {
|
border-radius: 0.3rem;
|
}
|
}
|
|
> .announcement {
|
width: 100%;
|
height: auto;
|
display: flex;
|
justify-content: center;
|
align-items: center;
|
padding: 0.2rem 0 0.2rem 0;
|
|
> .an_content {
|
width: 95%;
|
height: 0.559rem;
|
display: flex;
|
justify-content: space-between;
|
align-items: center;
|
|
.an_left_icon {
|
width: 4%;
|
height: 70%;
|
display: flex;
|
align-items: center;
|
|
> img {
|
width: 100%;
|
height: 100%;
|
}
|
}
|
|
.an_right_message {
|
width: 93%;
|
height: 100%;
|
line-height: 0.559rem;
|
align-items: center;
|
align-content: center;
|
font-size: 0.29rem;
|
white-space: nowrap;
|
overflow: hidden;
|
// text-overflow:ellipsis;
|
}
|
}
|
}
|
|
.navs {
|
width: 100%;
|
height: 2.6154rem;
|
|
display: flex;
|
justify-content: center;
|
|
> .navs_content {
|
position: relative;
|
overflow: hidden;
|
width: 95%;
|
height: 100%;
|
margin: 0 auto;
|
border-radius: 0.2564rem;
|
display: flex;
|
justify-content: space-between;
|
|
> .chacha {
|
width: 1rem;
|
height: 1rem;
|
border-radius: 100%;
|
background-color: rgb(210, 210, 212);
|
display: flex;
|
justify-content: space-between;
|
align-items: center;
|
position: absolute;
|
right: -0.4rem;
|
top: -0.4rem;
|
|
> div {
|
width: 0.3554rem;
|
height: 0.3554rem;
|
margin-top: 0.3rem;
|
margin-left: 0.15rem;
|
|
> img {
|
width: 100%;
|
height: 100%;
|
}
|
}
|
}
|
|
> div {
|
width: 16%;
|
height: 100%;
|
display: flex;
|
align-items: center;
|
|
> div {
|
width: 100%;
|
height: 60%;
|
|
> .top_img {
|
width: 100%;
|
height: 70%;
|
display: flex;
|
align-items: center;
|
justify-content: center;
|
|
> div {
|
width: 0.9718rem;
|
height: 0.9718rem;
|
|
> img {
|
width: 100%;
|
height: 100%;
|
}
|
}
|
}
|
|
> .bottom_navs {
|
width: 100%;
|
height: 30%;
|
display: flex;
|
justify-content: center;
|
align-items: center;
|
font-size: 0.33rem;
|
margin-top: 0.15rem;
|
}
|
}
|
}
|
}
|
}
|
|
/deep/.top_title {
|
top: 0 !important;
|
}
|
|
.tabs_title {
|
width: 100%;
|
height: 80px;
|
display: flex;
|
}
|
|
.tb {
|
width: 100%;
|
padding: 0 0.2rem;
|
height: 100%;
|
display: flex;
|
justify-content: center;
|
align-items: center;
|
font-size: 15px;
|
|
span {
|
// width: 50%;
|
}
|
}
|
|
.focus_on {
|
width: 100%;
|
height: calc(100% - 20px);
|
margin-top: 0.2564rem;
|
display: flex;
|
align-items: center;
|
justify-content: center;
|
|
.fo_content {
|
width: 95%;
|
height: calc(100% - 0.6rem);
|
// padding: 0 0.2564rem;
|
border-radius: 0.2564rem;
|
margin-top: -0.2rem;
|
|
.top_title {
|
width: 100%;
|
height: 0.8821rem;
|
display: flex;
|
font-size: 0.6rem;
|
font-weight: 800;
|
align-items: center;
|
}
|
}
|
|
/deep/.van-swipe__indicators {
|
bottom: 0.1rem;
|
}
|
|
/deep/.van-swipe__indicator {
|
background-color: #2d8cf0 !important;
|
opacity: 1;
|
}
|
|
/deep/.van-swipe__indicator--active {
|
width: 0.35rem !important;
|
border-radius: 0.23rem;
|
background-color: #aec7ec !important;
|
}
|
|
.fo_banner {
|
width: 100%;
|
height: calc(100% - 0.8821rem - 0.3rem);
|
}
|
}
|
|
.item_cont {
|
width: 100%;
|
height: 1.5385rem;
|
border-bottom: 0.5px solid #ececec;
|
position: relative;
|
border: none;
|
display: flex;
|
flex-wrap: wrap;
|
align-content: center;
|
|
> div {
|
width: 100%;
|
height: 30%;
|
}
|
|
.top_fo,
|
.bottom_fo {
|
display: flex;
|
justify-content: space-between;
|
|
span {
|
display: inline-block;
|
}
|
|
.title {
|
width: 30%;
|
height: 100%;
|
display: flex;
|
align-items: center;
|
font-weight: 500;
|
}
|
|
.aikesi {
|
width: auto;
|
height: 0.3rem;
|
background: #dbe3f0;
|
color: #546daf;
|
padding-left: 0.2rem;
|
padding-right: 0.2rem;
|
font-size: 0.15rem;
|
line-height: 0.3rem;
|
margin-right: 0.1rem;
|
}
|
|
.numberid {
|
font-size: 0.28rem;
|
display: flex;
|
|
line-height: 0.5rem;
|
}
|
|
.numbers {
|
width: 20%;
|
height: 100%;
|
display: flex;
|
align-items: center;
|
}
|
|
.point {
|
font-size: 0.28rem;
|
height: 0.5rem;
|
line-height: 0.5rem;
|
}
|
|
.percentage {
|
width: 20%;
|
height: 100%;
|
display: flex;
|
align-items: center;
|
text-align: center;
|
justify-content: center;
|
}
|
|
.percentage span {
|
height: 0.5rem;
|
line-height: 0.5rem;
|
}
|
}
|
|
.top_fo {
|
font-size: 0.3846rem !important;
|
}
|
|
.bottom_fo {
|
margin-top: 0.1rem;
|
font-size: 0.1846rem;
|
color: #999898;
|
}
|
|
.percentage.gree {
|
color: green !important;
|
}
|
|
.percentage.redd {
|
color: red !important;
|
}
|
}
|
}
|
|
.item_conts::after {
|
content: "";
|
position: absolute;
|
bottom: 0;
|
background: #ececec;
|
width: 100%;
|
height: 1px;
|
-webkit-transform: scaleY(0.5);
|
transform: scaleY(0.5);
|
-webkit-transform-origin: 0 0;
|
transform-origin: 0 0;
|
}
|
|
.my-swipe .van-swipe-item {
|
font-size: 0.5128rem;
|
line-height: 3.8462rem;
|
text-align: center;
|
overflow: hidden;
|
}
|
|
.fo_my-swipe .van-swipe-item {
|
font-size: 0.5128rem;
|
line-height: 3.8462rem;
|
overflow: hidden;
|
}
|
|
.fo_my-swipe {
|
width: 100%;
|
height: 100%;
|
}
|
|
.focus_skeleton {
|
margin-top: 1rem;
|
}
|
|
.van-skeleton__row,
|
.van-skeleton__title {
|
height: 0.7rem;
|
}
|
|
.news-tab {
|
width: 95%;
|
position: relative;
|
left: 0;
|
right: 0;
|
margin: auto;
|
margin-top: 0.2rem;
|
border-radius: 0.4rem 0.4rem 0 0;
|
padding-top: 0.3rem;
|
|
/deep/.is-selected .tab-name {
|
position: relative;
|
}
|
|
/deep/.mint-navbar .mint-tab-item.is-selected {
|
border: 0 !important;
|
border-bottom: none;
|
}
|
|
/deep/.is-selected .tab-name:after {
|
position: absolute;
|
display: block;
|
content: "";
|
height: 0.07rem;
|
background-color: #1381a4;
|
width: 100%;
|
left: 0;
|
bottom: -0.25rem;
|
}
|
}
|
|
.news-content {
|
position: relative;
|
padding: 0.3rem;
|
}
|
|
.item-out {
|
position: relative;
|
border-left: 0.01rem solid rgba(192, 192, 192, 0.8);
|
padding: 0 0.25rem 1rem 0.25rem;
|
}
|
|
.item-out::before {
|
content: "●";
|
position: absolute;
|
top: -0.1rem;
|
left: -0.128rem;
|
margin: auto;
|
}
|
|
.item-times {
|
color: #999;
|
margin-bottom: 0.15rem;
|
}
|
|
.tabs_title {
|
width: 100%;
|
height: 100%;
|
display: flex;
|
}
|
|
.list_items {
|
// margin-top: -0.5rem;
|
background-color: #fff;
|
width: 100%;
|
|
> div {
|
width: 100%;
|
height: 1.5rem;
|
display: flex;
|
justify-content: center;
|
align-items: center;
|
padding: 20px;
|
border-bottom: 1px solid #f2f6fc;
|
// padding: 0.5rem 0;
|
|
> div {
|
width: 100%;
|
height: 1.0256rem;
|
display: flex;
|
|
// margin: 18px 0;
|
> div {
|
> div {
|
display: flex;
|
align-items: center;
|
}
|
|
.tp {
|
width: 100%;
|
height: 70%;
|
}
|
|
.bt {
|
width: 100%;
|
height: 30%;
|
font-size: 12px;
|
}
|
}
|
}
|
}
|
|
.left_title {
|
width: 45%;
|
height: 100%;
|
}
|
|
.center_price {
|
width: 35%;
|
height: 100%;
|
display: flex;
|
justify-content: center;
|
align-items: center;
|
}
|
|
.right_bs {
|
width: 20%;
|
height: 100%;
|
display: flex;
|
justify-content: center;
|
align-items: center;
|
}
|
}
|
|
.item_box {
|
display: flex;
|
justify-content: space-between;
|
align-items: center;
|
}
|
|
.item_box_left {
|
width: 33%;
|
display: flex;
|
flex-direction: column;
|
justify-content: center;
|
// align-items: center;
|
}
|
|
.item_box_zj {
|
width: 33%;
|
display: flex;
|
flex-direction: column;
|
justify-content: center;
|
align-items: center;
|
}
|
|
.item_box_right {
|
width: 33%;
|
display: flex;
|
align-items: center;
|
justify-content: flex-end;
|
color: #03ad8f;
|
}
|
|
.item_box_righta {
|
width: 33%;
|
display: flex;
|
align-items: center;
|
justify-content: flex-end;
|
color: #d04b64;
|
}
|
|
.item_box_left_bottom {
|
margin-top: 10px;
|
width: 80px;
|
color: #8c9fad;
|
white-space: nowrap;
|
/* 保证文本在一行内显示 */
|
overflow: hidden;
|
/* 超出容器部分隐藏 */
|
text-overflow: ellipsis;
|
/* 使用省略号表示被截断的文本 */
|
}
|
|
.titContent {
|
position: relative;
|
width: 100%;
|
font-size: 0.35rem;
|
line-height: 0.46rem;
|
overflow: hidden;
|
text-overflow: ellipsis;
|
-webkit-line-clamp: 2;
|
display: -webkit-box;
|
}
|
|
.neitu {
|
width: 100%;
|
border-radius: 0.05rem;
|
margin-top: 0.3rem;
|
margin-bottom: 0.8rem;
|
}
|
|
.neitu img {
|
width: 100%;
|
border-radius: 0.05rem;
|
}
|
|
.block-out {
|
margin-top: 0.2rem;
|
}
|
|
.blocks {
|
width: auto;
|
font-size: 0.32rem;
|
padding: 0.08rem 0.15rem 0.08rem 0.15rem;
|
display: inline-block;
|
border: 0.0513rem solid #41ac75;
|
color: #41ac75;
|
}
|
|
.animate {
|
padding-left: 20px;
|
|
font-size: 0.29rem;
|
|
color: #000;
|
|
display: inline-block;
|
|
white-space: nowrap;
|
|
animation: 10s wordsLoop linear infinite normal;
|
}
|
|
.scroll_tab {
|
width: 100%;
|
overflow-x: scroll;
|
-webkit-overflow-scrolling: touch;
|
display: -webkit-box;
|
white-space: nowrap;
|
|
> div {
|
display: inline-block;
|
// width: 15%;
|
height: 100%;
|
display: flex;
|
font-size: 0.4rem;
|
align-items: center;
|
padding: 0 0.3rem;
|
|
span {
|
display: inline-block;
|
min-width: 40%;
|
height: 100%;
|
text-align: center;
|
line-height: 1.1538rem;
|
}
|
}
|
|
span.active {
|
color: rgb(2, 99, 226);
|
border-bottom: 0.07rem solid rgb(2, 99, 226);
|
font-weight: 800;
|
transition: all 0.5s;
|
}
|
}
|
|
@keyframes wordsLoop {
|
0% {
|
transform: translateX(100%);
|
|
-webkit-transform: translateX(100%);
|
}
|
|
100% {
|
transform: translateX(-100%);
|
|
-webkit-transform: translateX(-100%);
|
}
|
}
|
|
@-webkit-keyframes wordsLoop {
|
0% {
|
transform: translateX(100%);
|
|
-webkit-transform: translateX(100%);
|
}
|
|
100% {
|
transform: translateX(-100%);
|
|
-webkit-transform: translateX(-100%);
|
}
|
}
|
|
.list_item {
|
th {
|
padding-bottom: 0.6rem;
|
color: #999;
|
}
|
|
.name {
|
color: #020202;
|
font-size: 0.4rem;
|
font-weight: 600;
|
padding-left: 0.2rem;
|
margin-bottom: 0.15rem;
|
border-left: 5px solid #999;
|
}
|
|
.red {
|
color: red;
|
}
|
|
.green {
|
color: green;
|
}
|
|
.text {
|
padding-bottom: 0.5rem;
|
}
|
}
|
|
.top_title-wrap {
|
font-size: 0.6rem;
|
font-weight: 800;
|
padding: 0.6rem 0 0 0.5rem;
|
}
|
</style>
|
