forked from dg/dabao_wap
src/page/list/trading-list.vue
@@ -11,29 +11,16 @@ <img src="../../assets/img/searchs.png" alt /> </div> <div class="search_input"> <input type="text" class="searchs" placeholder="输入品种名称/代码搜索" ref="search" id="sousuo" onkeyup="value=value.replace(/[^a-zA-Z0-9]/g,'')" v-model="gpcode" @input="gpinput" /> <input type="text" class="searchs" placeholder="输入品种名称/代码搜索" ref="search" id="sousuo" onkeyup="value=value.replace(/[^a-zA-Z0-9]/g,'')" v-model="gpcode" @input="gpinput" /> </div> </div> </div> </div> <div class="tab_class"> <div class="scroll_tab"> <div class="tab_items" v-for="(item, index) in tabsClassArr" :key="index" :class="index == 0 ? 'mrt' : ''" @click="handleTabsItem(item, index)" > <div class="tab_items" v-for="(item, index) in tabsClassArr" :key="index" :class="index == 0 ? 'mrt' : ''" @click="handleTabsItem(item, index)"> <span :class="tabsItemIndex === index ? 'active' : ''">{{ item.name }}</span> </div> </div> @@ -61,90 +48,70 @@ </div> </div> <div class="list" :class="isToken == '' ? 'listHeight' : 'listHeights'"> <van-list v-model="loading" :finished="finished" finished-text="没有更多了" @load="onLoad" :immediate-check="false" > <van-list v-model="loading" :finished="finished" finished-text="没有更多了" @load="onLoad" :immediate-check="false"> <div 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" v-for="(item, index) in listArr" :key="index" @click="handleGoToKlineDetail(item, index)"> <div class="left_title"> <div class="tp"> <span class="collection" @click.prevent="options(item)"> <span class="collection" @click.stop="options(item)"> <span class="shu" :class="item.isOption == '1' ? 'shublue' : ''"></span> </span> <span class="title_color"> {{ tabsItemIndex == 3 ? item.futuresName : tabsItemIndex == 2 ? item.name : tabsItemIndex == 0 ? item.name : item.indexName {{ tabsItemIndex == 3 ? item.name : tabsItemIndex == 2 ? item.name : tabsItemIndex == 0 ? item.name : item.indexName }} </span> </div> <div class="bt"> <span> {{ tabsItemIndex == 3 ? item.futuresCode : tabsItemIndex == 2 ? item.code : tabsItemIndex == 0 ? item.code : item.indexCode {{ tabsItemIndex == 3 ? item.code : tabsItemIndex == 2 ? item.code : tabsItemIndex == 0 ? item.code : item.indexCode }} </span> </div> </div> <div class="center_price"> <div class="tp"> <span class="price_color" v-if="tabsItemIndex == 0 || tabsItemIndex == 2" :class="item.hcrate > 0 ? 'green' : 'red'" > <span class="price_color" v-if="tabsItemIndex == 0 || tabsItemIndex == 2" :class="item.hcrate > 0 ? 'green' : 'red'"> {{ item.nowPrice }} </span> <span class="price_color" v-else> {{ tabsItemIndex == 3 ? Number(item.nowPrice).toFixed(2) : item.currentPoint {{ tabsItemIndex == 3 ? Number(item.price).toFixed(2) : item.currentPoint }} </span> </div> <div class="bt"> <span v-if="tabsItemIndex == 3 || tabsItemIndex == 1" >{{ '手续费:' + item.transFee }}</span> <span v-if="tabsItemIndex == 3 || tabsItemIndex == 1">{{ tabsItemIndex == 3?item.orderNumber :'手续费:' + Number(item.transFee) }}</span> <span v-else>{{ item.today_min }}</span> </div> </div> <div class="right_bs"> <div class="tp"> <span class="price_color" v-if="tabsItemIndex == 0 || tabsItemIndex == 2" :class="item.hcrate > 0 ? 'green' : 'red'" >{{ item.hcrate }}</span> <span class="price_color" v-if="tabsItemIndex == 1" :class="item.floatRate > 0 ? 'green' : 'red'" > <span class="price_color" v-if="tabsItemIndex == 0 || tabsItemIndex == 2" :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 + '%' item.floatRate + '%' }} </span> <span class="price_color" v-if="tabsItemIndex == 3" :class="((item.nowPrice - item.lastClose) / item.lastClose * 100).toFixed(2) > 0 ? 'green' : 'red'" > <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) + '%' item.lastClose == "" ? 0.00 : ((Number(item.nowPrice) - Number(item.lastClose)) / Number(item.lastClose) * 100).toFixed(2) + '%' }} </span> </div> <div class="bt"> <div v-if="tabsItemIndex != 1 && tabsItemIndex != 3" >{{ item.stock_type.toUpperCase() }}</div> <div v-if="tabsItemIndex != 1 && tabsItemIndex != 3">{{ item.stock_type.toUpperCase() }}</div> <!-- class="codeIcon" --> </div> </div> @@ -163,14 +130,8 @@ <img src="../../assets/img/searchs.png" alt /> </div> <div class="search_input"> <input type="text" class="searchs" placeholder="输入品种名称/代码搜索" onkeyup="value=value.replace(/[^a-zA-Z0-9]/g,'')" v-model="gpcodes" @input="gpinputs" /> <input type="text" class="searchs" placeholder="输入品种名称/代码搜索" onkeyup="value=value.replace(/[^a-zA-Z0-9]/g,'')" v-model="gpcodes" @input="gpinputs" /> </div> </div> </div> @@ -188,13 +149,8 @@ </div> <div class="list zxlist"> <van-list v-model="loadings" :finished="finisheds" finished-text="没有更多了" @load="onLoads" :immediate-check="false" > <van-list v-model="loadings" :finished="finisheds" finished-text="没有更多了" @load="onLoads" :immediate-check="false"> <div class="van-clearfix"> <div class="list_items"> <div class="item" v-for="(item, index) in listArrs" :key="item.indexCode"> @@ -203,15 +159,15 @@ <span class="collection" @click="optionszx(item)"> <span class="shu" :class="item.isOption == '1' ? 'shublue' : ''"></span> </span> <span class="title_color">{{ item.stockName}}</span> <span class="title_color">{{ item.stockName }}</span> </div> <div class="bt"> <span>{{ item.stockCode}}</span> <span>{{ item.stockCode }}</span> </div> </div> <div class="center_price"> <div class="tp"> <span class="price_color">{{item.nowPrice}}</span> <span class="price_color">{{ item.nowPrice }}</span> </div> <div class="bt"> <span>{{ item.addTime }}</span> @@ -219,10 +175,7 @@ </div> <div class="right_bs"> <div class="tp"> <span class="price_color" :class="item.hcrate > 0 ? 'green' : 'red'" >{{ item.hcrate }}</span> <span class="price_color" :class="item.hcrate > 0 ? 'green' : 'red'">{{ item.hcrate }}</span> </div> <div class="bt"> <!-- <div>{{ item.stock_type.toUpperCase() }}</div> --> @@ -241,12 +194,7 @@ <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> @@ -257,38 +205,28 @@ <span>{{ '余额' }}</span> </div> <div class="right"> <span v-if="$store.state.userInfo.userAmt==undefined">¥0.00</span> <span v-if="$store.state.userInfo&&tabsItemIndex == 1" style="white-space: nowarp;"> <span v-if="$store.state.userInfo.userAmt == undefined">¥0.00</span> <span v-if="$store.state.userInfo && tabsItemIndex == 1" style="white-space: nowarp;"> {{ '¥' + $store.state.userInfo.userIndexAmt }} </span> <span v-if="$store.state.userInfo.userAmt!=undefined&&tabsItemIndex == 0" style="white-space: nowarp;" > <span v-if="$store.state.userInfo.userAmt != undefined && tabsItemIndex == 0" style="white-space: nowarp;"> {{ '¥ ' + $store.state.userInfo.userAmt }} </span> <span v-if="$store.state.userInfo.userAmt!=undefined&&tabsItemIndex == 2" style="white-space: nowarp;" > <span v-if="$store.state.userInfo.userAmt != undefined && tabsItemIndex == 2" style="white-space: nowarp;"> {{ '¥ ' + $store.state.userInfo.userAmt }} </span> <span v-if="$store.state.userInfo&&tabsItemIndex == 3" style="white-space: nowarp;"> <span v-if="$store.state.userInfo && tabsItemIndex == 3" style="white-space: nowarp;"> {{ '¥' + $store.state.userInfo.userFuturesAmt '¥' + $store.state.userInfo.userFuturesAmt }} </span> </div> <div class="sanjiao"> <img :class="dialogFlag ? 'xuanz' : ''" style="transition: all 0.5s;" src="../../assets/img/xiala.png" alt /> <img :class="dialogFlag ? 'xuanz' : ''" style="transition: all 0.5s;" src="../../assets/img/xiala.png" alt /> </div> </div> <div class="bottom_balance"> @@ -308,34 +246,28 @@ </div> <div class="bottom_price"> <div> <p v-if="this.$store.state.settingForm.indexDisplay && !this.$store.state.settingForm.futuresDisplay" class="account" > <p v-if="this.$store.state.settingForm.indexDisplay && !this.$store.state.settingForm.futuresDisplay" class="account"> ¥{{ $store.state.hide ? '****' : Number($store.state.userInfo.userAmt + $store.state.userInfo.userIndexAmt).toFixed(2) $store.state.userInfo.userIndexAmt).toFixed(2) }} </p> <p v-else-if="!this.$store.state.settingForm.indexDisplay && this.$store.state.settingForm.futuresDisplay" class="account" > <p v-else-if="!this.$store.state.settingForm.indexDisplay && this.$store.state.settingForm.futuresDisplay" class="account"> ¥{{ $store.state.hide ? '****' : Number($store.state.userInfo.userAmt + $store.state.userInfo.userFuturesAmt).toFixed(2) $store.state.userInfo.userFuturesAmt).toFixed(2) }} </p> <p v-else-if="!this.$store.state.settingForm.indexDisplay && !this.$store.state.settingForm.futuresDisplay" class="account" >¥{{ $store.state.hide ? '****' : Number($store.state.userInfo.userAmt).toFixed(2) }}</p> <p <p v-else-if="!this.$store.state.settingForm.indexDisplay && !this.$store.state.settingForm.futuresDisplay" class="account">¥{{ $store.state.hide ? '****' : Number($store.state.userInfo.userAmt).toFixed(2) }}</p> <!-- <p v-else-if="this.$store.state.settingForm.indexDisplay && this.$store.state.settingForm.futuresDisplay" class="account" > ¥{{ $store.state.hide ? '****' : Number($store.state.userInfo.userAmt + $store.state.userInfo.userIndexAmt + $store.state.userInfo.userFuturesAmt).toFixed(2) }} </p> </p> --> </div> </div> </div> @@ -350,26 +282,26 @@ <div> <span v-show="tabsItemIndex == 1"> {{ $store.state.hide ? '****' : Number(($store.state.userInfo.enableIndexAmt + $store.state.userInfo.allIndexFreezAmt) * indexSettingInfo.forceSellPercent).toFixed(2) Number(($store.state.userInfo.enableIndexAmt + $store.state.userInfo.allIndexFreezAmt) * indexSettingInfo.forceSellPercent).toFixed(2) }} </span> <span v-show="tabsItemIndex == 0"> {{ $store.state.hide ? '****' : Number(($store.state.userInfo.enableAmt + $store.state.userInfo.allFreezAmt) * settingInfo.forceStopPercent).toFixed(2) + $store.state.userInfo.allFreezAmt) * settingInfo.forceStopPercent).toFixed(2) }} </span> <span v-show="tabsItemIndex == 2"> {{ $store.state.hide ? '****' : Number(($store.state.userInfo.enableAmt + $store.state.userInfo.allFreezAmt) * settingInfo.forceStopPercent).toFixed(2) + $store.state.userInfo.allFreezAmt) * settingInfo.forceStopPercent).toFixed(2) }} </span> <span v-show="tabsItemIndex == 3"> {{ $store.state.hide ? '****' : Number(($store.state.userInfo.enableFuturesAmt + $store.state.userInfo.allFuturesFreezAmt) * futuresSettingInfo.forceSellPercent).toFixed(2) Number(($store.state.userInfo.enableFuturesAmt + $store.state.userInfo.allFuturesFreezAmt) * futuresSettingInfo.forceSellPercent).toFixed(2) }} </span> </div> @@ -380,8 +312,8 @@ <div> <span> {{ tabsItemIndex == 1 ? '指数' : tabsItemIndex == 0 ? '沪深' : tabsItemIndex == 2 ? '科创' : tabsItemIndex == 3 ? '期货' : '' tabsItemIndex == 3 ? '新股' : '' }} </span> <span>{{ '资产' }}</span> @@ -422,9 +354,7 @@ <span v-show="tabsItemIndex == 1">{{ '¥ ' + $store.state.userInfo.allIndexFreezAmt }}</span> <span v-show="tabsItemIndex == 0">{{ '¥ ' + $store.state.userInfo.allFreezAmt }}</span> <span v-show="tabsItemIndex == 2">{{ '¥ ' + $store.state.userInfo.allFreezAmt }}</span> <span v-show="tabsItemIndex == 3" >{{ '¥ ' + $store.state.userInfo.allFuturesFreezAmt }}</span> <span v-show="tabsItemIndex == 3">{{ '¥ ' + $store.state.userInfo.allFuturesFreezAmt }}</span> </div> </div> </div> @@ -438,20 +368,16 @@ <div> <span :class="$store.state.userInfo.allIndexProfitAndLose > 0 ? ' red' : $store.state.userInfo.allIndexProfitAndLose < 0 ? ' green' : ''" v-show="tabsItemIndex == 1" >{{ '¥ ' + $store.state.userInfo.allIndexProfitAndLose }}</span> v-show="tabsItemIndex == 1">{{ '¥ ' + $store.state.userInfo.allIndexProfitAndLose }}</span> <span :class="$store.state.userInfo.allProfitAndLose > 0 ? ' red' : $store.state.userInfo.allProfitAndLose < 0 ? ' green' : ''" v-show="tabsItemIndex == 0" >{{ '¥ ' + $store.state.userInfo.allProfitAndLose }}</span> v-show="tabsItemIndex == 0">{{ '¥ ' + $store.state.userInfo.allProfitAndLose }}</span> <span :class="$store.state.userInfo.allProfitAndLose > 0 ? ' red' : $store.state.userInfo.allProfitAndLose < 0 ? ' green' : ''" v-show="tabsItemIndex == 2" >{{ '¥ ' + $store.state.userInfo.allProfitAndLose }}</span> v-show="tabsItemIndex == 2">{{ '¥ ' + $store.state.userInfo.allProfitAndLose }}</span> <span :class="$store.state.userInfo.allFuturesProfitAndLose > 0 ? 'red' : $store.state.userInfo.allFuturesProfitAndLose < 0 ? ' green' : ''" v-show="tabsItemIndex == 3" >{{ '¥ '+Number($store.state.userInfo.allFuturesProfitAndLose).toFixed(2)}}</span> v-show="tabsItemIndex == 3">{{ '¥' +Number($store.state.userInfo.allFuturesProfitAndLose).toFixed(2)}}</span> </div> </div> </div> @@ -462,11 +388,9 @@ <script> import * as api from "@/axios/api"; import elalert from "@/components/elalert.vue"; export default { name: "trading", components: { elalert }, data() { return { @@ -490,6 +414,8 @@ gpcode: "", gpcodes: "", texts: "", elAlertShow: false, elAlertText: "", tabsClassArr: [ { name: "沪深京", @@ -504,8 +430,12 @@ name: "科创", type: 2 }, // { // name: "期货", // type: 3 // } { name: "期货", name: "新股", type: 3 } ], @@ -525,6 +455,7 @@ }, mounted() { this.loading = true; this.getStock(); this.isToken = window.localStorage.getItem("USERTOKEN"); @@ -568,6 +499,7 @@ // } }, gpinput() { this.pageNum = 1; this.listArr = []; this.loading = true; @@ -614,7 +546,7 @@ // this.getProductSetting() this.$store.state.userInfo = data.data; } else { Toast(data.msg); this.$store.commit('elAlertShow',{'elAlertShow':true,'elAlertText': data.msg}); } this.$store.state.user = this.user; }, @@ -625,7 +557,7 @@ // 成功 this.indexSettingInfo = data.data; } else { Toast(data.msg); this.$store.commit('elAlertShow',{'elAlertShow':true,'elAlertText': data.msg}); } }, async getFuturesSetting() { @@ -635,7 +567,7 @@ // 成功 this.futuresSettingInfo = data.data; } else { Toast(data.msg); this.$store.commit('elAlertShow',{'elAlertShow':true,'elAlertText': data.msg}); } }, async getSettingInfo() { @@ -644,7 +576,7 @@ // 成功 this.settingInfo = data.data; } else { Toast(data.msg); ` this.$store.commit('elAlertShow',{'elAlertShow':true,'elAlertText': data.msg});` } }, async getListMarket() { @@ -680,9 +612,14 @@ this.finished = true; } if (this.tabsItemIndex == 0) { data.data.list.forEach(element => { this.listArr.push(element); }); if (this.gpcode) { this.listArr = data.data.list; } else { data.data.list.forEach(element => { this.listArr.push(element); }); } } } else { this.texts = data.msg; @@ -704,9 +641,13 @@ this.finished = true; } if (this.tabsItemIndex == 2) { data.data.list.forEach(element => { this.listArr.push(element); }); if (this.gpcode) { this.listArr = data.data.list; } else { data.data.list.forEach(element => { this.listArr.push(element); }); } } } else { this.texts = data.msg; @@ -714,15 +655,55 @@ } }, handleGoToKlineDetail(item) { console.log(item); var codes = ""; var names = ""; var stock_type = ""; var soks = ""; var if_zhishu = '0'; switch (this.tabsItemIndex) { case 0: codes = item.code; names = item.name; stock_type = item.stock_type; soks = this.filterSH(item.stock_type); if_zhishu = '0'; break; case 1: codes = item.indexGid; names = item.indexName; stock_type = 'sh'; if_zhishu = item.indexCode; soks = 0; break; case 2: codes = item.code; names = item.name; stock_type = item.stock_type; soks = this.filterSH(item.stock_type); if_zhishu = '0'; break; case 3: return; codes = item.futuresGid; names = item.futuresName; soks = 0; stock_type = 'qh'; if_zhishu = item.indexGid; break; default: break; } this.$router.push({ path: "/kline", query: { name: item.name, name: names, stockplate: item.stock_plate, code: item.code, type: item.stock_type, sok: this.filterSH(item.stock_type) code: codes, type: stock_type, sok: soks, if_zhishu: if_zhishu, } }); }, @@ -737,26 +718,44 @@ async getFutures() { // 获取期货列表 let opt = { homeShow: 1, pageNum: this.pageNum, pageSize: 15 }; let data = await api.getListFutures(opt); let data = await api.getNewGu(opt); this.loading = false; if (data.data.length < 15) { this.finished = true; } if (data.status === 0) { if (this.tabsItemIndex == 3) { data.data.forEach(element => { this.listArr.push(element); }); this.listArr = data.data.list; } this.finished = true; } else { this.texts = data.msg; this.alertShow = true; } }, // async getFutures() { // // 获取期货列表 // let opt = { // homeShow: 1, // pageNum: this.pageNum, // pageSize: 15 // }; // let data = await api.getListFutures(opt); // this.loading = false; // if (data.data.length < 15) { // this.finished = true; // } // if (data.status === 0) { // if (this.tabsItemIndex == 3) { // data.data.forEach(element => { // this.listArr.push(element); // }); // } // } else { // this.texts = data.msg; // this.alertShow = true; // } // }, async getMyList() { this.loadings = true; //获取自选列表 @@ -805,6 +804,7 @@ this.pageNum = 1; this.finished = false; this.loading = true; console.log(item.type,"阿斯顿八岁的跟随阿达"); switch (item.type) { case 1: this.listArr = []; @@ -994,7 +994,7 @@ height: calc(100% - 1.3rem); background: #fff; > .content { >.content { width: 100%; height: 100%; } @@ -1013,6 +1013,7 @@ justify-content: center; padding: 0 0.3rem; position: relative; .search_content { width: 100%; height: 90%; @@ -1075,7 +1076,7 @@ overflow: hidden; border-radius: 0 0 0.2rem 0.2rem; > div { >div { width: 100%; height: 1.2821rem; display: flex; @@ -1119,7 +1120,7 @@ display: -webkit-box; white-space: nowrap; > div { >div { display: inline-block; width: 15%; height: 100%; @@ -1209,14 +1210,14 @@ margin-top: -0.5rem; width: 100%; > div { >div { width: 100%; height: 1.0256rem; display: flex; margin: 0.5rem 0; > div { > div { >div { >div { display: flex; align-items: center; } @@ -1258,7 +1259,7 @@ color: #a1a2a4; display: flex; > div { >div { display: flex; align-items: center; } @@ -1366,6 +1367,7 @@ margin-left: 0.1rem; margin-right: 0.1rem; min-width: 1.9rem; span { font-weight: 600; text-align: right;
