| | |
| | | <van-col span="7"> |
| | | <div style="text-align: right"> |
| | | {{ $t("hj314") }} |
| | | <span class="caret-wrapper"> |
| | | <i |
| | | class="el-icon-caret-top" |
| | | style="font-size: 0.3rem" |
| | | @click="priceAscending" |
| | | :style="{ color: Ascend == 1 ? '#409eff' : '#8c9fad' }" |
| | | ></i> |
| | | <i |
| | | class="el-icon-caret-bottom" |
| | | style="font-size: 0.3rem" |
| | | @click="priceDescending" |
| | | :style="{ color: Ascend == 2 ? '#409eff' : '#8c9fad' }" |
| | | ></i> |
| | | </span> |
| | | </div> |
| | | </van-col> |
| | | <van-col span="6"> |
| | | <div style="text-align: right"> |
| | | {{ $t("hj315") }} |
| | | <span class="caret-wrapper"> |
| | | <i |
| | | class="el-icon-caret-top" |
| | | style="font-size: 0.3rem" |
| | | @click="riseFallAscending" |
| | | :style="{ color: Ascend == 3 ? '#409eff' : '#8c9fad' }" |
| | | ></i> |
| | | <i |
| | | class="el-icon-caret-bottom" |
| | | style="font-size: 0.3rem" |
| | | @click="riseFallDescending" |
| | | :style="{ color: Ascend == 4 ? '#409eff' : '#8c9fad' }" |
| | | ></i> |
| | | </span> |
| | | </div> |
| | | </van-col> |
| | | </van-row> |
| | | </div> |
| | | <van-pull-refresh v-model="refreshing" @refresh="onRefresh"> |
| | | <van-list style="margin-bottom: 50px" v-model="loadings" :finished="finished" :finished-text="$t('hj43')" |
| | | :loading-text="$t('hj430')" @load="onLoads" :immediate-check="false"> |
| | | <div class="item" @click="handleGoToKlineDetail1(item, index)" v-for="(item, index) in listArr" |
| | | :key="item.indexCode"> |
| | | <van-list |
| | | style="margin-bottom: 50px" |
| | | v-model="loadings" |
| | | :finished="finished" |
| | | :finished-text="$t('hj43')" |
| | | :loading-text="$t('hj430')" |
| | | @load="onLoads" |
| | | :immediate-check="false" |
| | | > |
| | | <div |
| | | class="item" |
| | | @click="handleGoToKlineDetail1(item, index)" |
| | | v-for="(item, index) in listArr" |
| | | :key="item.indexCode" |
| | | > |
| | | <van-row type="flex" align="center" gutter="20"> |
| | | <van-col span="8"> |
| | | <div> |
| | | <div class="tp"> |
| | | <div class="collection" @click="optionszx(item)"> |
| | | <div class="shu" :class="item.isOption == '1' ? 'shublue' : ''"></div> |
| | | <div |
| | | class="shu" |
| | | :class="item.isOption == '1' ? 'shublue' : ''" |
| | | ></div> |
| | | </div> |
| | | <div class="title_color" style=" |
| | | width: 100%; |
| | | overflow: hidden; |
| | | text-overflow: ellipsis; |
| | | white-space: nowrap; |
| | | "> |
| | | <div |
| | | class="title_color" |
| | | style=" |
| | | width: 100%; |
| | | overflow: hidden; |
| | | text-overflow: ellipsis; |
| | | white-space: nowrap; |
| | | " |
| | | > |
| | | {{ item.name }} |
| | | </div> |
| | | </div> |
| | |
| | | </van-col> |
| | | <van-col span="6"> |
| | | <div style="text-align: right"> |
| | | <div class="tp right_bs" :class="`${item.color > 0 ? 'green' : 'red'}`"> |
| | | <div |
| | | class="tp right_bs" |
| | | :class="`${item.color > 0 ? 'green' : 'red'}`" |
| | | > |
| | | <span class="price_color">{{ item.hcrateP }}</span> |
| | | </div> |
| | | </div> |
| | |
| | | pageNumVal: 1, |
| | | getInterval: null, |
| | | num: 1, |
| | | refreshing: false |
| | | refreshing: false, |
| | | Ascend: 0, //颜色问题 |
| | | }; |
| | | }, |
| | | |
| | |
| | | this.listArr = []; |
| | | this.pageNumVal = 1; |
| | | this.getStock(this.active, this.zxactive, 1); |
| | | this.initWebSocket() |
| | | this.initWebSocket(); |
| | | // this.getInterval = setInterval(() => { |
| | | // this.getStock(this.active, this.zxactive, 1); |
| | | // }, 5000); |
| | | }, |
| | | methods: { |
| | | priceAscending() { |
| | | this.Ascend = 1; |
| | | this.listArr.sort((a, b) => a.nowPrice - b.nowPrice); |
| | | }, |
| | | priceDescending() { |
| | | this.Ascend = 2; |
| | | this.listArr.sort((a, b) => b.nowPrice - a.nowPrice); |
| | | }, |
| | | riseFallAscending() { |
| | | this.Ascend = 3; |
| | | this.listArr.sort((a, b) => a.hcrate - b.hcrate); |
| | | }, |
| | | riseFallDescending() { |
| | | this.Ascend = 4; |
| | | this.listArr.sort((a, b) => b.hcrate - a.hcrate); |
| | | }, |
| | | |
| | | filterSH(val) { |
| | | if (val === "sh") { |
| | | return 1; |
| | |
| | | this.listArr = data.data.list; |
| | | this.loadings = false; |
| | | // this.finished = true; |
| | | if (this.listArr.length % 20) { |
| | | if (!this.listArr.length || (this.listArr.length && this.listArr.length % 20)) { |
| | | this.finished = true; |
| | | } |
| | | } |
| | |
| | | this.listArr = data.data.list; |
| | | this.loadings = false; |
| | | // this.finished = true; |
| | | if (this.listArr.length % 20) { |
| | | if (!this.listArr.length || (this.listArr.length && this.listArr.length % 20)) { |
| | | this.finished = true; |
| | | } |
| | | } |
| | | } |
| | | if (this.Ascend == 1) { |
| | | this.listArr.sort((a, b) => a.nowPrice - b.nowPrice); |
| | | } else if (this.Ascend == 2) { |
| | | this.listArr.sort((a, b) => b.nowPrice - a.nowPrice); |
| | | } else if (this.Ascend == 3) { |
| | | this.listArr.sort((a, b) => a.hcrate - b.hcrate); |
| | | } else if (this.Ascend == 4) { |
| | | this.listArr.sort((a, b) => b.hcrate - a.hcrate); |
| | | } |
| | | } |
| | | } else { |
| | |
| | | }, |
| | | |
| | | initWebSocket() { |
| | | console.log("initWebSocket"); |
| | | this.Trade = new WhrWebSocket({ |
| | | path: `ws://ws.is4vc.com:8001/websocket-server`, |
| | | path: `wss://ws.is4vc.com/websocket-server`, |
| | | onmessage: this.getTradeMessage, |
| | | }); |
| | | |
| | | this.Trade.init(); |
| | | }, |
| | | getTradeMessage({ data }) { |
| | | let result = JSON.parse(data) |
| | | let pid = result.pid |
| | | let userToUpdate = this.listArr.find(item => item.code == pid) |
| | | let result = JSON.parse(data); |
| | | let pid = result.pid; |
| | | let userToUpdate = this.listArr.find((item) => item.code == pid); |
| | | if (userToUpdate) { |
| | | // 更新对象数据 |
| | | userToUpdate.nowPrice = result.last; |
| | |
| | | }, |
| | | |
| | | onLoads() { |
| | | console.log('onLoads'); |
| | | console.log("onLoads"); |
| | | // this.pageNumVal++; |
| | | this.loadings = true; |
| | | this.num += 1 |
| | | this.num += 1; |
| | | this.getStock(); |
| | | }, |
| | | optionszx() { }, |
| | | optionszx() {}, |
| | | }, |
| | | destroyed() { |
| | | clearInterval(this.getInterval); |
| | |
| | | text-align: left; |
| | | color: #14181f; |
| | | } |
| | | |
| | | .caret-wrapper { |
| | | display: inline-flex; |
| | | flex-direction: column; |
| | | align-items: center; |
| | | height: 0.6rem; |
| | | width: 0.5rem; |
| | | vertical-align: middle; |
| | | cursor: pointer; |
| | | overflow: initial; |
| | | position: relative; |
| | | } |
| | | </style> |