<template>
|
<div class="" style="background-color: #000;" :style="'height:'+windowHeight+'px'">
|
<el-tabs style="margin-top:0px;" v-model="activeName" class="black-style">
|
<!-- label="指数" -->
|
<el-tab-pane v-if="$store.state.productSetting.indexDisplay" name="three">
|
<div class="table transaction-table">
|
<!-- <div class="table-search">
|
<el-row type="flex" justify='end'>
|
<el-col :span="24">
|
<el-input size="mini" clearable v-model="form.stock" placeholder="请输入股票代码和股票">
|
<el-button size="mini" @click="getList" slot="append" icon="el-icon-search"></el-button>
|
</el-input>
|
</el-col>
|
</el-row>
|
</div>-->
|
<el-table stripe v-loading="loading" :data="list.list" @row-click="toTransaction2" :height="windowHeight+70" style="width: 100%">
|
<el-table-column prop="indexName" label="名称">
|
<template slot-scope="scope">
|
<div class="tab-name">
|
<p style="display: flex; width: 100px;">
|
<a v-if="scope.row.isOption == 0" href="javascript:;" @click="tianjiaOptions(scope.row)"><i class="red-xx iconfont icon-wujiaoxing"></i></a>
|
<a v-if="scope.row.isOption == 1" href="javascript:;" @click="quxiaoOptions(scope.row)"><i class="red-xx iconfont icon-wujiaoxing1"></i></a>
|
{{scope.row.indexName}}
|
</p>
|
<span class="code">
|
<i v-if="scope.row.transState === 1" class="iconfont icon-jiaoyi1 red"></i>
|
<i v-if="scope.row.transState === 0" class="iconfont icon-jinzhi"></i>
|
{{scope.row.indexCode}}
|
</span>
|
</div>
|
</template>
|
</el-table-column>
|
<el-table-column prop="nowPrice" align="right" label="最新">
|
<template slot-scope="scope">
|
<div class="price">
|
<div :class="scope.row.floatRate<0?'green':scope.row.floatRate==0?'':'red'">
|
<span v-if="scope.row.currentPoint === 0">-</span>
|
<span v-else>{{Number(scope.row.currentPoint).toFixed(2)}}</span>
|
<i v-if="scope.row.floatRate>0" class="iconfont icon-direction-top"></i>
|
<i v-if="scope.row.floatRate<0" class="iconfont icon-down"></i>
|
</div>
|
</div>
|
</template>
|
</el-table-column>
|
<el-table-column prop="floatRate" align="right" label="涨跌幅">
|
<template slot-scope="scope">
|
<div class="price">
|
<div :class="scope.row.floatRate<0?'green':scope.row.floatRate==0?'':'red'">
|
<span v-if="scope.row.floatRate === 0">-</span>
|
<span v-else>{{Number(scope.row.floatRate).toFixed(2)}}%</span>
|
</div>
|
</div>
|
</template>
|
</el-table-column>
|
</el-table>
|
<!-- <div class="page-box text-center">
|
<a @click="toStock" class="more-btn" href="javascript:;">
|
加载更多
|
<i class="iconfont icon-xiasanjiao"></i>
|
</a>
|
</div>-->
|
</div>
|
</el-tab-pane>
|
<!-- label="股票" -->
|
<el-tab-pane name="first">
|
<div class="table transaction-table">
|
<div class="table-search">
|
<el-row type="flex" justify="end">
|
<el-col :span="24">
|
<el-input size="mini" clearable v-model="form.stock" placeholder="请输入股票代码和股票">
|
<el-button size="mini" @click="getList" slot="append" icon="el-icon-search"></el-button>
|
</el-input>
|
</el-col>
|
</el-row>
|
</div>
|
<el-table stripe v-loading="loading" :data="list.list" @row-click="toTransaction" :height="windowHeight" style="width: 100%">
|
|
<el-table-column prop="name" label="名称">
|
<template slot-scope="scope">
|
<div class="tab-name">
|
|
<p style="display: flex; width: 100px;">
|
<a v-if="scope.row.isOption == 0" href="javascript:;" @click="tianjiaOptions(scope.row)"><i class="red-xx iconfont icon-wujiaoxing"></i></a>
|
<a v-if="scope.row.isOption == 1" href="javascript:;" @click="quxiaoOptions(scope.row)"><i class="red-xx iconfont icon-wujiaoxing1"></i></a>
|
{{scope.row.name}}
|
</p>
|
<span class="code">
|
<i v-if="scope.row.stock_plate === '科创'" class="iconfont kechuang-stock">科创</i>
|
<i v-else-if="scope.row.stock_type === 'sh'" class="iconfont hu-stock">沪</i>
|
<i v-else-if="scope.row.stock_type === 'sz'" class="iconfont shen-stock">深</i>
|
{{scope.row.code}}
|
</span>
|
</div>
|
</template>
|
</el-table-column>
|
<el-table-column prop="nowPrice" align="right" label="现价">
|
<template slot-scope="scope">
|
<div class="price">
|
<div :class="scope.row.hcrate<0?'green':scope.row.hcrate==0?'':'red'">
|
<span v-if="scope.row.nowPrice === 0">-</span>
|
<span v-else>
|
{{Number(scope.row.nowPrice).toFixed(2)}}
|
<i v-if="scope.row.hcrate>0" class="iconfont icon-direction-top"></i>
|
<i v-if="scope.row.hcrate<0" class="iconfont icon-down"></i>
|
</span>
|
</div>
|
</div>
|
<!-- <div v-if="scope.row.now_price" :class="changeTextClass[scope.$index] === true?'heartBeat tab-number':' tab-number'">
|
<p :class="scope.row.now_price - scope.row.buyOrderPrice < 0?'green bounceIn':scope.row.now_price - scope.row.buyOrderPrice > 0?'bounceIn red':'bounceIn'">
|
{{scope.row.now_price === 0?'-':scope.row.now_price}}
|
</p>
|
</div>-->
|
</template>
|
</el-table-column>
|
<el-table-column prop="hcrate" align="right" label="涨跌幅">
|
<template slot-scope="scope">
|
<div class="price">
|
<div :class="scope.row.hcrate<0?'green':scope.row.hcrate==0?'':'red'">
|
<span v-if="scope.row.nowPrice === 0">-</span>
|
<span v-else>{{Number(scope.row.hcrate).toFixed(2)}}%</span>
|
<!-- <i v-if="scope.row.hcrate>0" class="iconfont icon-up"></i>
|
<i v-if="scope.row.hcrate<0" class="iconfont icon-down"></i>-->
|
</div>
|
</div>
|
</template>
|
</el-table-column>
|
</el-table>
|
<div class="page-box text-center">
|
<a @click="toStock" class="more-btn" href="javascript:;">
|
点击加载更多内容
|
<i class="iconfont icon-xiasanjiao"></i>
|
</a>
|
<!-- <el-pagination
|
class="pull-right"
|
@size-change="handleSizeChange"
|
@current-change="handleCurrentChange"
|
:current-page="list.pageNum"
|
:page-sizes="[10, 20, 30, 40,50]"
|
:page-size="list.pageSize"
|
layout="total, sizes, prev, pager, next, jumper"
|
:total="list.total">
|
</el-pagination>-->
|
</div>
|
</div>
|
</el-tab-pane>
|
<!-- label="科创" -->
|
|
<el-tab-pane v-if="$store.state.productSetting.kcStockDisplay" name="four">
|
<div class="table transaction-table">
|
<!-- <div class="table-search">
|
<el-row type="flex" justify='end'>
|
<el-col :span="24">
|
<el-input size="mini" clearable v-model="form.stock" placeholder="请输入股票代码和股票">
|
<el-button size="mini" @click="getList" slot="append" icon="el-icon-search"></el-button>
|
</el-input>
|
</el-col>
|
</el-row>
|
</div>-->
|
<el-table stripe v-loading="loading" :data="list.list" @row-click="toTransaction" :height="windowHeight+30" style="width: 100%">
|
<el-table-column prop="name" label="名称">
|
<template slot-scope="scope">
|
<div class="tab-name">
|
<p style="display: flex; width: 100px;">
|
<a v-if="scope.row.isOption == 0" href="javascript:;" @click="tianjiaOptions(scope.row)"><i class="red-xx iconfont icon-wujiaoxing"></i></a>
|
<a v-if="scope.row.isOption == 1" href="javascript:;" @click="quxiaoOptions(scope.row)"><i class="red-xx iconfont icon-wujiaoxing1"></i></a>
|
{{scope.row.name}}
|
</p>
|
<span class="code">
|
<i v-if="scope.row.stock_plate === '科创'" class="iconfont kechuang-stock">科创</i>
|
{{scope.row.code}}
|
</span>
|
</div>
|
</template>
|
</el-table-column>
|
<el-table-column prop="nowPrice" align="right" label="现价">
|
<template slot-scope="scope">
|
<div class="price">
|
<div :class="scope.row.hcrate<0?'green':scope.row.hcrate==0?'':'red'">
|
<span v-if="scope.row.nowPrice === 0">-</span>
|
<span v-else>
|
{{Number(scope.row.nowPrice).toFixed(2)}}
|
<i v-if="scope.row.hcrate>0" class="iconfont icon-direction-top"></i>
|
<i v-if="scope.row.hcrate<0" class="iconfont icon-down"></i>
|
</span>
|
</div>
|
</div>
|
<!-- <div v-if="scope.row.now_price" :class="changeTextClass[scope.$index] === true?'heartBeat tab-number':' tab-number'">
|
<p :class="scope.row.now_price - scope.row.buyOrderPrice < 0?'green bounceIn':scope.row.now_price - scope.row.buyOrderPrice > 0?'bounceIn red':'bounceIn'">
|
{{scope.row.now_price === 0?'-':scope.row.now_price}}
|
</p>
|
</div>-->
|
</template>
|
</el-table-column>
|
<el-table-column prop="hcrate" align="right" label="涨跌幅">
|
<template slot-scope="scope">
|
<div class="price">
|
<div :class="scope.row.hcrate<0?'green':scope.row.hcrate==0?'':'red'">
|
<span v-if="scope.row.nowPrice === 0">-</span>
|
<span v-else>{{Number(scope.row.hcrate).toFixed(2)}}%</span>
|
<!-- <i v-if="scope.row.hcrate>0" class="iconfont icon-up"></i>
|
<i v-if="scope.row.hcrate<0" class="iconfont icon-down"></i>-->
|
</div>
|
</div>
|
</template>
|
</el-table-column>
|
</el-table>
|
<div class="page-box text-center">
|
<a @click="toStock" class="more-btn" href="javascript:;">
|
加载更多
|
<i class="iconfont icon-xiasanjiao"></i>
|
</a>
|
<!-- <el-pagination
|
class="pull-right"
|
@size-change="handleSizeChange"
|
@current-change="handleCurrentChange"
|
:current-page="list.pageNum"
|
:page-sizes="[10, 20, 30, 40,50]"
|
:page-size="list.pageSize"
|
layout="total, sizes, prev, pager, next, jumper"
|
:total="list.total">
|
</el-pagination>-->
|
</div>
|
</div>
|
</el-tab-pane>
|
|
|
<!-- label="自选" -->
|
<el-tab-pane v-if="$store.state.haslogin" name="second">
|
<div v-show="$store.state.haslogin" class="table transaction-table">
|
<div class="table-search">
|
<el-row type="flex" justify="end">
|
<el-col :span="24">
|
<el-input size="mini" clearable v-model="form2.stockMy" placeholder="请输入股票代码和股票">
|
<el-button size="mini" @click="getList" slot="append" icon="el-icon-search"></el-button>
|
</el-input>
|
</el-col>
|
</el-row>
|
</div>
|
<el-table stripe v-loading="loading" :data="list.list" @row-click="toTransaction" :height="windowHeight" style="width: 100%">
|
<el-table-column prop="name" width="20px" v-if="$store.state.haslogin">
|
<template slot-scope="scope">
|
<a v-if="scope.row.isOption == 0" href="javascript:;" @click="tianjiaOptions(scope.row)"><i class="red-xx iconfont icon-wujiaoxing red-xx"></i></a>
|
<a v-if="scope.row.isOption == 1" href="javascript:;" @click="quxiaoOptions(scope.row)"><i class="red-xx iconfont icon-wujiaoxing1 red-xx"></i></a>
|
<!-- <a v-if="isOptionOpt" href="javascript:;" @click="deteleOptions"><i class="iconfont icon-wujiaoxing"></i></a>
|
<a v-if="!isOptionOpt" href="javascript:;" @click="addOptions"><i class="iconfont icon-wujiaoxing1"></i></a> -->
|
</template>
|
</el-table-column>
|
<el-table-column prop="stockName" label="名称">
|
<template slot-scope="scope">
|
<div class="tab-name">
|
<p>{{scope.row.stockName}}</p>
|
<span class="code">
|
<i v-if="scope.row.stock_plate === '科创'" class="iconfont kechuang-stock">科创</i>
|
<i v-else-if="scope.row.stock_type === 'sh'" class="iconfont hu-stock">沪</i>
|
<i v-else-if="scope.row.stock_type === 'sz'" class="iconfont shen-stock">深</i>
|
{{scope.row.stockCode}}
|
</span>
|
</div>
|
</template>
|
</el-table-column>
|
<el-table-column prop="nowPrice" align="right" label="现价">
|
<template slot-scope="scope">
|
<div class="price">
|
<div :class="scope.row.hcrate<0?'green':scope.row.hcrate==0?'':'red'">
|
<span v-if="scope.row.nowPrice === 0">-</span>
|
<span v-else>{{Number(scope.row.nowPrice).toFixed(2)}}</span>
|
<i v-if="scope.row.hcrate>0" class="iconfont icon-direction-top"></i>
|
<i v-if="scope.row.hcrate<0" class="iconfont icon-down"></i>
|
</div>
|
</div>
|
<!-- <div v-if="scope.row.now_price" :class="changeTextClass[scope.$index] === true?'heartBeat tab-number':' tab-number'">
|
<p :class="scope.row.now_price - scope.row.buyOrderPrice < 0?'green bounceIn':scope.row.now_price - scope.row.buyOrderPrice > 0?'bounceIn red':'bounceIn'">
|
{{scope.row.now_price === 0?'-':scope.row.now_price}}
|
</p>
|
</div>-->
|
</template>
|
</el-table-column>
|
<el-table-column prop="hcrate" align="right" label="涨跌幅">
|
<template slot-scope="scope">
|
<div class="price">
|
<div :class="scope.row.hcrate<0?'green':scope.row.hcrate==0?'':'red'">
|
<span v-if="scope.row.nowPrice === 0">-</span>
|
<span v-else>{{Number(scope.row.hcrate).toFixed(2)}}%</span>
|
<!-- <i v-if="scope.row.hcrate>0" class="iconfont icon-up"></i>
|
<i v-if="scope.row.hcrate<0" class="iconfont icon-down"></i>-->
|
</div>
|
</div>
|
</template>
|
</el-table-column>
|
</el-table>
|
<div class="page-box text-center">
|
<a @click="toStock" class="more-btn" href="javascript:;">
|
加载更多
|
<i class="iconfont icon-xiasanjiao"></i>
|
</a>
|
<!-- <el-pagination
|
class="pull-right"
|
@size-change="handleSizeChange"
|
@current-change="handleCurrentChange"
|
:current-page="list.pageNum"
|
:page-sizes="[10, 20, 30, 40,50]"
|
:page-size="list.pageSize"
|
layout="total, sizes, prev, pager, next, jumper"
|
:total="list.total">
|
</el-pagination>-->
|
</div>
|
</div>
|
</el-tab-pane>
|
<!-- label="期货" -->
|
<!-- v-if="$store.state.productSetting.futuresDisplay" -->
|
<el-tab-pane name="five">
|
<div class="table transaction-table">
|
<el-table stripe v-loading="loading" :data="list.list" @row-click="toTransaction5" :height="windowHeight+70" style="width: 100%">
|
<el-table-column prop="futuresName" label="名称">
|
<template slot-scope="scope">
|
<div class="tab-name">
|
<p style="display: flex; width: 100px;">
|
<a v-if="scope.row.isOption == 0" href="javascript:;" @click="tianjiaOptions(scope.row)"><i class="red-xx iconfont icon-wujiaoxing"></i></a>
|
<a v-if="scope.row.isOption == 1" href="javascript:;" @click="quxiaoOptions(scope.row)"><i class="red-xx iconfont icon-wujiaoxing1"></i></a>
|
{{scope.row.futuresName}}
|
</p>
|
<!-- <p>{{scope.row.futuresName}}</p> -->
|
<span class="qihuo-stock">{{scope.row.futuresCode}}</span>
|
</div>
|
</template>
|
</el-table-column>
|
<el-table-column prop="nowPrice" align="right" label="最新">
|
<template slot-scope="scope">
|
<div class="price">
|
<div :class="scope.row.floatRate<0?'green':scope.row.floatRate==0?'':'red'">
|
<span v-if="scope.row.nowPrice === 0">-</span>
|
<span v-else>{{Number(scope.row.nowPrice).toFixed(2)}}</span>
|
<!-- {{scope.row.coinCode}} -->
|
<!-- <p class="code">{{(scope.row.nowPrice * scope.row.coinRate).toFixed(2)}} CNY</p> -->
|
</div>
|
</div>
|
</template>
|
</el-table-column>
|
</el-table>
|
<!-- <div class="page-box text-center">
|
<a @click="toStock" class="more-btn" href="javascript:;">
|
加载更多
|
<i class="iconfont icon-xiasanjiao"></i>
|
</a>
|
</div>-->
|
</div>
|
</el-tab-pane>
|
|
|
|
|
|
<!-- label="创业版" -->
|
<!-- v-if="$store.state.productSetting.futuresDisplay" -->
|
<el-tab-pane name="start">
|
<div class="table transaction-table">
|
<!-- <div class="table-search">
|
<el-row type="flex" justify='end'>
|
<el-col :span="24">
|
<el-input size="mini" clearable v-model="form.stock" placeholder="请输入股票代码和股票">
|
<el-button size="mini" @click="getList" slot="append" icon="el-icon-search"></el-button>
|
</el-input>
|
</el-col>
|
</el-row>
|
</div>-->
|
<el-table stripe v-loading="loading" :data="list.list" @row-click="toTransaction" :height="windowHeight+30" style="width: 100%">
|
<el-table-column prop="name" label="名称">
|
<template slot-scope="scope">
|
<div class="tab-name">
|
<p style="display: flex; width: 100px;">
|
<a v-if="scope.row.isOption == 0" href="javascript:;" @click="tianjiaOptions(scope.row)"><i class="red-xx iconfont icon-wujiaoxing"></i></a>
|
<a v-if="scope.row.isOption == 1" href="javascript:;" @click="quxiaoOptions(scope.row)"><i class="red-xx iconfont icon-wujiaoxing1"></i></a>
|
{{scope.row.name}}
|
</p>
|
<span class="code">
|
<i v-if="scope.row.stock_plate === '创业'" class="iconfont kechuang-stock">创业</i>
|
{{scope.row.code}}
|
</span>
|
</div>
|
</template>
|
</el-table-column>
|
<el-table-column prop="nowPrice" align="right" label="现价">
|
<template slot-scope="scope">
|
<div class="price">
|
<div :class="scope.row.hcrate<0?'green':scope.row.hcrate==0?'':'red'">
|
<span v-if="scope.row.nowPrice === 0">-</span>
|
<span v-else>
|
{{Number(scope.row.nowPrice).toFixed(2)}}
|
<i v-if="scope.row.hcrate>0" class="iconfont icon-direction-top"></i>
|
<i v-if="scope.row.hcrate<0" class="iconfont icon-down"></i>
|
</span>
|
</div>
|
</div>
|
<!-- <div v-if="scope.row.now_price" :class="changeTextClass[scope.$index] === true?'heartBeat tab-number':' tab-number'">
|
<p :class="scope.row.now_price - scope.row.buyOrderPrice < 0?'green bounceIn':scope.row.now_price - scope.row.buyOrderPrice > 0?'bounceIn red':'bounceIn'">
|
{{scope.row.now_price === 0?'-':scope.row.now_price}}
|
</p>
|
</div>-->
|
</template>
|
</el-table-column>
|
<el-table-column prop="hcrate" align="right" label="涨跌幅">
|
<template slot-scope="scope">
|
<div class="price">
|
<div :class="scope.row.hcrate<0?'green':scope.row.hcrate==0?'':'red'">
|
<span v-if="scope.row.nowPrice === 0">-</span>
|
<span v-else>{{Number(scope.row.hcrate).toFixed(2)}}%</span>
|
<!-- <i v-if="scope.row.hcrate>0" class="iconfont icon-up"></i>
|
<i v-if="scope.row.hcrate<0" class="iconfont icon-down"></i>-->
|
</div>
|
</div>
|
</template>
|
</el-table-column>
|
</el-table>
|
<div class="page-box text-center">
|
<a @click="toStock" class="more-btn" href="javascript:;">
|
加载更多
|
<i class="iconfont icon-xiasanjiao"></i>
|
</a>
|
<!-- <el-pagination
|
class="pull-right"
|
@size-change="handleSizeChange"
|
@current-change="handleCurrentChange"
|
:current-page="list.pageNum"
|
:page-sizes="[10, 20, 30, 40,50]"
|
:page-size="list.pageSize"
|
layout="total, sizes, prev, pager, next, jumper"
|
:total="list.total">
|
</el-pagination>-->
|
</div>
|
</div>
|
</el-tab-pane>
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
</el-tabs>
|
<BuyIndex :handleOptions2="handleOptions2" :indexInfo="indexInfo" ref="buyDialog" />
|
<BuyFutures :handleOptions3="handleOptions3" :futuresInfo="futuresInfo" ref="futuresDialog" />
|
</div>
|
</template>
|
|
<script>
|
import * as api from "../../../axios/api";
|
import ChartBox from "./chart";
|
import BuyIndex from "./indexbuy-dialog";
|
import BuyFutures from "./futuresbuy-dialog";
|
|
export default {
|
components: {
|
ChartBox,
|
BuyIndex,
|
BuyFutures,
|
},
|
props: {
|
code: {
|
type: String,
|
},
|
handleOptions2: {
|
type: Function,
|
default: function() {},
|
},
|
handleOptions3: {
|
type: Function,
|
default: function() {},
|
},
|
},
|
data() {
|
return {
|
loading: false,
|
form: {
|
stock: "",
|
stockMy: "",
|
pageNum: 1,
|
pageSize: 9,
|
},
|
form2: {
|
stockMy: "",
|
pageNum: 1,
|
pageSize: 9,
|
},
|
list: {
|
list: [],
|
},
|
timer: null,
|
refresh: false, // 刷新中
|
changeTextClass: {}, // 表格中的数据变化
|
isOptionOpt: false, // 是否添加自选
|
activeName: "first",
|
total: 0, // 总数
|
indexInfo: {},
|
futuresInfo: {}, // 期货信息\
|
height: 0,
|
windowWidth: document.documentElement.clientWidth, //实时屏幕宽度
|
windowHeight: document.documentElement.clientHeight - 60 - 120, //实时屏幕高度
|
};
|
},
|
watch: {
|
activeName(newVal, oldVal) {
|
console.log(newVal)
|
if (newVal !== oldVal) {
|
this.form.pageNum = 1;
|
this.getList();
|
}
|
},
|
},
|
computed: {},
|
created() {
|
|
this.form.pageSize = Math.ceil(this.windowHeight / 63)
|
this.form2.pageSize = Math.ceil(this.windowHeight / 63)
|
this.timer = setInterval(this.refreshList, 5000);
|
},
|
beforeDestroy() {
|
clearInterval(this.timer);
|
},
|
mounted() {
|
|
setInterval(() => {
|
this.windowHeight = document.documentElement.clientHeight - 60 - 120; //实时屏幕高度
|
this.form.pageSize = Math.ceil(this.windowHeight / 63)
|
this.form2.pageSize = Math.ceil(this.windowHeight / 63)
|
}, 500);
|
this.getList();
|
if (this.$store.state.haslogin) {
|
this.getOpation();
|
}
|
if (this.$route.query.type === "index") {
|
this.activeName = "three";
|
}
|
},
|
methods: {
|
async getlistStart() {
|
opt = {
|
stockPlate: "创业",
|
keyWords: this.form.stock,
|
pageNum: this.form.pageNum,
|
pageSize: this.form.pageSize,
|
};
|
var data = await api.getStock(opt)
|
if (data.status == 0) {
|
this.list.list = data.data
|
}
|
},
|
async tianjiaOptions(row) {
|
let data = await api.addOption({
|
code: this.$route.query.code
|
});
|
|
if (data.status === 0) {
|
this.$message.success("添加自选成功");
|
row.isOption = row.isOption == '1' ? '0' : '1'
|
} else {
|
this.$message.error(data.msg);
|
}
|
},
|
async quxiaoOptions(row) {
|
let data = await api.delOption({
|
code: this.$route.query.code
|
});
|
if (data.status === 0) {
|
this.$message.success("删除自选股成功");
|
row.isOption = row.isOption == '1' ? '0' : '1'
|
} else {
|
this.$message.error(data.msg);
|
}
|
},
|
handleSizeChange(val) {
|
this.form.pageSize = val;
|
this.getList();
|
},
|
handleCurrentChange(val) {
|
this.form.pageNum = val;
|
this.getList();
|
},
|
async refreshList() {
|
// 正在刷新或者正在加载的时候不进行刷新
|
if (this.refresh || this.loading) {
|
return;
|
}
|
|
this.refresh = true;
|
this.changeTextClass = {};
|
// 获取表格数据
|
// let opt = {
|
// keyWords:this.activeName === 'first'?this.form.stock:this.form2.stockMy,
|
// pageNum:1,
|
// pageSize:this.form.pageSize * this.form.pageNum
|
// }
|
let opt = null;
|
if (this.activeName === "first") {
|
// 普通A股
|
opt = {
|
keyWords: this.form.stock,
|
pageNum: 1,
|
pageSize: this.form.pageSize * this.form.pageNum,
|
};
|
} else if (this.activeName === "four") {
|
// 科创
|
opt = {
|
stockPlate: "科创",
|
keyWords: this.form.stock,
|
pageNum: 1,
|
pageSize: this.form.pageSize * this.form.pageNum,
|
};
|
} else if (this.activeName === "three" || this.activeName === "five") {
|
// 指数 期货
|
} else if (this.activeName == 'start') {
|
opt = {
|
stockPlate: "创业",
|
keyWords: this.form.stock,
|
pageNum: 1,
|
pageSize: this.form.pageSize * this.form.pageNum,
|
};
|
} else {
|
// 自选
|
opt = {
|
keyWords: this.form2.stockMy,
|
pageNum: 1,
|
pageSize: this.form2.pageSize * this.form2.pageNum,
|
};
|
}
|
let data = null;
|
if (this.activeName === "first" || this.activeName === "four" || this.activeName == 'start') {
|
data = await api.getStock(opt);
|
} else if (this.activeName === "three") {
|
data = await api.getListMarket(opt);
|
} else if (this.activeName === "five") {
|
// 期货
|
data = await api.getFutures(opt);
|
|
|
|
} else {
|
data = await api.getMyList(opt);
|
}
|
this.refresh = false;
|
if (data.status === 0) {
|
if (this.activeName === "three" || this.activeName === "five") {
|
this.list.list = data.data;
|
return;
|
}
|
if (data.data.list.length === this.list.list.length) {
|
data.data.list.forEach((element, i) => {
|
this.changeTextClass[i] = "";
|
if (data.data.list[i].nowPrice !== this.list.list[i].nowPrice) {
|
this.changeTextClass[i] = true; // 设置对应的动画过滤
|
this.list.list[i].nowPrice = data.data.list[i].nowPrice; // 现价
|
this.list.list[i].hcrate = data.data.list[i].hcrate; // 涨跌幅
|
}
|
});
|
} else {
|
this.list = data.data;
|
}
|
} else {
|
this.$message.error(data.msg);
|
}
|
},
|
onSubmit() {
|
// 查询表格
|
// 正在刷新或者正在加载的时候 延迟
|
if (this.refresh || this.loading) {} else {
|
this.getList();
|
}
|
},
|
async getList() {
|
// 获取表格数据
|
// let opt = {
|
// keyWords:this.activeName === 'first'?this.form.stock:this.form2.stockMy,
|
// pageNum:this.form.pageNum,
|
// pageSize:this.form.pageSize
|
// }
|
if (this.activeName === "three") {
|
// 指数
|
this.getMarketList();
|
return;
|
}
|
if (this.activeName === "five") {
|
// 期货
|
this.getFutures();
|
return;
|
}
|
let opt = null;
|
if (this.activeName === "first") {
|
// 普通A股
|
opt = {
|
keyWords: this.form.stock,
|
pageNum: this.form.pageNum,
|
pageSize: this.form.pageSize,
|
};
|
} else if (this.activeName === "four") {
|
// 科创板
|
opt = {
|
stockPlate: "科创",
|
keyWords: this.form.stock,
|
pageNum: this.form.pageNum,
|
pageSize: this.form.pageSize,
|
};
|
}
|
if (this.activeName === 'start') {
|
opt = {
|
stockPlate: "创业",
|
keyWords: this.form.stock,
|
pageNum: this.form.pageNum,
|
pageSize: this.form.pageSize,
|
};
|
} else {
|
// 自选
|
opt = {
|
keyWords: this.form2.stockMy,
|
pageNum: this.form2.pageNum,
|
pageSize: this.form2.pageSize,
|
};
|
}
|
this.loading = true;
|
let data = null;
|
if (this.activeName === "first" || this.activeName === "four") {
|
data = await api.getStock(opt);
|
} else if (this.activeName === 'start') {
|
data = await api.getStock(opt);
|
} else {
|
data = await api.getMyList(opt);
|
}
|
if (data.status === 0) {
|
// data.data.list.forEach(element => {
|
// this.list.push(element)
|
// });
|
this.list = data.data;
|
// 出仓数据
|
var res = await api.findUserPositionByCode({
|
stockCode: data.data.list[0].code,
|
});
|
if (res.status == 0) {
|
this.$store.commit("setUserPositionData", res.data.list[0]);
|
}
|
this.total = data.data.total;
|
this.loading = false;
|
} else {
|
this.$message.error(data.msg);
|
}
|
this.loading = false;
|
},
|
// 点击股票item
|
async toTransaction(row, column, event) {
|
|
// console.log(row, column, event)
|
// let data = await api.addOption({ code: this.$route.query.code });
|
// if (data.status === 0) {
|
// this.$message.success("添加自选成功");
|
// } else {
|
// this.$message.error(data.msg);
|
// }
|
let code =
|
this.activeName === "first" || this.activeName === "four" || this.activeName == 'start' ?
|
row.code :
|
row.stockCode;
|
if (row.stockCode != undefined && row.stockGid.indexOf("hf_") != -1) {
|
code = row.stockGid;
|
} else if (
|
row.stockCode !== undefined &&
|
row.stockCode.substring(0, 3) == "000"
|
) {
|
code = row.stockGid;
|
}
|
this.$emit('changeActiveName','first')
|
|
|
|
|
// 股票交易
|
this.$router.push({
|
path: "/transaction",
|
query: {
|
code: code,
|
},
|
});
|
this.$emit("toTransaction", row);
|
},
|
// 期货2.0
|
toTransaction5(row, column, event) {
|
// 出仓数据
|
// console.log(row)
|
api.findUserFuturesPositionByCode({
|
futuresGid: row.futuresGid
|
}).then(data=>{
|
if (data.status == 0) {
|
this.$store.commit('setUserPositionData', data.data.list[0])
|
}
|
})
|
|
|
// 股票交易
|
this.$router.push({
|
path: "/transaction",
|
query: {
|
code: row.futuresGid,
|
futuresInfo: row,
|
},
|
});
|
},
|
async getMarketList() {
|
// 获取指数列表
|
this.loading = true;
|
let result = await api.getListMarket();
|
if (result.status === 0) {
|
this.list.list = result.data;
|
this.loading = false;
|
} else {
|
this.$message.error(result.msg);
|
}
|
this.loading = false;
|
},
|
async getFutures() {
|
// 获取期货列表
|
this.loading = true;
|
let result = await api.getFutures();
|
if (result.status === 0) {
|
this.list.list = result.data;
|
} else {
|
this.$message.error(result.msg);
|
}
|
this.loading = false;
|
},
|
toTransaction2(row, column, event) {
|
|
api.findUserIndexPositionByCode({
|
indexGid: row.indexGid
|
}).then(data=>{
|
console.log(data)
|
if (data.status == 0) {
|
this.$store.commit('setUserPositionData', data.data.list[0])
|
}
|
})
|
|
// 指数交易
|
if (this.$store.state.haslogin) {
|
if (row.transState === 1) {
|
// this.indexInfo = row
|
// this.$refs.buyDialog.DialogVisible = true
|
this.$router.push({
|
path: "/transaction",
|
query: {
|
code: row.indexGid,
|
},
|
});
|
} else {
|
this.$message.error("该指数暂不能交易!");
|
}
|
} else {
|
this.$store.state.loginIsShow = true;
|
}
|
},
|
toTransaction3(row) {
|
// 期货交易 先判断是否登录
|
if (this.$store.state.haslogin) {
|
if (row.transState === 1) {
|
this.futuresInfo = row;
|
this.$refs.futuresDialog.DialogVisible = true;
|
} else {
|
this.$message.error("该期货暂不能交易!");
|
}
|
} else {
|
this.$store.state.loginIsShow = true;
|
}
|
},
|
async toStock() {
|
// this.$router.push('/stock')
|
// 查看更多
|
if (this.form.pageNum * this.form.pageSize < this.total) {
|
this.form.pageNum++;
|
this.loading = true;
|
let opt = null;
|
if (this.activeName === "first") {
|
opt = {
|
keyWords: this.form.stock,
|
pageNum: 1,
|
pageSize: this.form.pageSize * this.form.pageNum,
|
};
|
} else if (this.activeName === "four") {
|
opt = {
|
stockPlate: "科创",
|
keyWords: this.form.stock,
|
pageNum: 1,
|
pageSize: this.form.pageSize * this.form.pageNum,
|
};
|
} else if (this.activeName === "start") {
|
opt = {
|
stockPlate: "创业",
|
keyWords: this.form.stock,
|
pageNum: 1,
|
pageSize: this.form.pageSize * this.form.pageNum,
|
};
|
}else {
|
// 自选
|
opt = {
|
keyWords: this.form2.stockMy,
|
pageNum: 1,
|
pageSize: this.form2.pageSize * this.form2.pageNum,
|
};
|
}
|
// let opt = {
|
// keyWords:this.activeName === 'first'?this.form.stock:this.form2.stockMy,
|
// pageNum:1,
|
// pageSize:this.form.pageSize * this.form.pageNum
|
// }
|
let data = null;
|
if (this.activeName === "first" || this.activeName === "four") {
|
data = await api.getStock(opt);
|
}else if (this.activeName == 'start') {
|
data = await api.getStock(opt);
|
} else {
|
data = await api.getMyList(opt);
|
|
}
|
if (data.status === 0) {
|
// data.data.list.forEach(element => {
|
// this.list.push(element)
|
// });
|
this.list = data.data;
|
} else {
|
this.$message.error(data.msg);
|
}
|
this.loading = false;
|
} else {
|
this.$message.error("已加载全部");
|
}
|
},
|
|
|
async getOpation() {
|
// 获取是不是已添加自选
|
let opts = {
|
code: this.$route.query.code,
|
};
|
let data = await api.isOption(opts);
|
if (data.status === 0) {
|
// 0 --> 未添加
|
this.isOptionOpt = false;
|
} else {
|
this.isOptionOpt = true;
|
}
|
},
|
|
async addOptions() {
|
let data = await api.addOption({
|
code: this.$route.query.code
|
});
|
if (data.status === 0) {
|
this.$message.success("添加自选成功");
|
this.isOptionOpt = true;
|
} else {
|
this.$message.error(data.msg);
|
}
|
},
|
async deteleOptions() {
|
let data = await api.delOption({
|
code: this.$route.query.code
|
});
|
if (data.status === 0) {
|
this.$message.success("删除自选股成功");
|
this.isOptionOpt = false;
|
} else {
|
this.$message.error(data.msg);
|
}
|
},
|
},
|
};
|
</script>
|
<style lang="less" scoped>
|
/deep/ .el-tabs__header {
|
display: none;
|
}
|
|
.red-bg {
|
.red-xx {
|
color: #C11815;
|
}
|
}
|
|
.table {
|
.code {
|
color: #6d718b;
|
font-size: 12px;
|
line-height: 16px;
|
}
|
|
.more-btn {
|
text-align: center;
|
color: #fff;
|
}
|
|
.el-table .cell {
|
line-height: 18px;
|
}
|
|
.page-box {
|
// background: #171f2e;
|
padding-top: 0px;
|
}
|
|
.price {
|
font-size: 12px;
|
}
|
}
|
|
.el-table /deep/ .cell {
|
padding: 0 8px;
|
}
|
|
.black-style.el-tabs .el-tab-pane {
|
padding: 0;
|
|
|
|
}
|
|
.el-tabs /deep/ .el-tabs__item {
|
color: #8b97b0;
|
height: 25px;
|
line-height: 25px;
|
font-size: 12px;
|
}
|
|
.transaction-table /deep/ th.is-leaf {
|
// background: #1a2231;
|
padding: 0px 0;
|
}
|
</style>
|
