From 8588fe30f17d0d28190a279aab8675de0dbf1a5b Mon Sep 17 00:00:00 2001
From: lxf <1371462558@qq.com>
Date: Wed, 16 Jul 2025 18:46:29 +0800
Subject: [PATCH] 个人添加图片
---
src/views/cryptos/PerpetualContract/index.vue | 268 ++++++++++++++++++++++++++++++++++++++++-------------
1 files changed, 200 insertions(+), 68 deletions(-)
diff --git a/src/views/cryptos/PerpetualContract/index.vue b/src/views/cryptos/PerpetualContract/index.vue
index e3446bb..7737508 100644
--- a/src/views/cryptos/PerpetualContract/index.vue
+++ b/src/views/cryptos/PerpetualContract/index.vue
@@ -5,9 +5,10 @@
<ContractHeader :symbol="symbol" :range="range" :selectIndex="selectIndex" :symbolName="symbolName"
:balance="userInfo.balance" @tab="onTopTab" @update-coin="onUpdate">
</ContractHeader>
+ <k-line-charts :update-key="updateKey" :update-data="quote" :symbol="symbol" :showBottom="true" />
<p class="status-info" v-if="chartData.market && chartData.market.status">
<span>{{ chartData.market.status && $t(chartData.market.status) }},</span>
- <span class="time">{{ chartData.market.time_str }}</span>
+ <span class="time">{{ chartData.market.time }}</span>
<span>{{ chartData.market.time_zone && $t(chartData.market.time_zone) }}</span>
</p>
<div :class="{ slide2: animated1 }" v-if="selectIndex === 1">
@@ -16,7 +17,7 @@
<p class="first-line red">{{ formatMoney(chartData?.close) }}</p>
<p class="second-line">
<span class="red">{{ chartData?.netChange }}</span>
- <span class="red">{{ `${chartData?.change_ratio}%` }}</span>
+ <span class="red">{{ `${chartData?.change_ratio_str}%` }}</span>
</p>
</div>
<div @click="handleClickShowMore()" class="line-r">
@@ -84,11 +85,12 @@
</div>
</section>
<div class="mainBackground rounded-view" key="x">
- <PerpetualOpen class="pl-30 pr-30" :key="keyIndex + 'a'" :selectIndex="selectIndex" :symbol="symbol"
+ <!-- 永续合约 -->
+ <!-- <PerpetualOpen class="pl-30 pr-30" :key="keyIndex + 'a'" :selectIndex="selectIndex" :symbol="symbol"
:green-data="bids" :red-data="asks" :price="price" :init-open="initOpen" :init-close="initClose"
:init-futrue="initFutrue" :currentType="currentType" @changeValueBack="changeValueBack"
@changeCurrentType="changeCurrentType" @ordered="onOrdered">
- </PerpetualOpen>
+ </PerpetualOpen> -->
<div class="line"></div>
<!-- 委托/持仓-->
<PerpetualOrder class="pl-30 pr-30" :key="keyIndex + 'b'" :symbol="symbol" :order-cur="orderCur"
@@ -103,7 +105,7 @@
<p class="first-line red">{{ formatMoney(chartData?.close) }}</p>
<p class="second-line">
<span class="red">{{ chartData?.netChange }}</span>
- <span class="red">{{ `${chartData?.change_ratio}%` }}</span>
+ <span class="red">{{ `${chartData?.change_ratio_str}%` }}</span>
</p>
</div>
<div @click="handleClickShowMore()" class="line-r">
@@ -170,55 +172,81 @@
</div>
</div>
</section>
- <div class="mainBackground rounded-view" key="y">
- <PerpetualOpen class="pl-30 pr-30" :key="keyIndex + 'c'" :selectIndex="selectIndex" :symbol="symbol"
+ <div class="btns" style="margin-top:20px;">
+ <div class="tbns_mc" @click="showPopupclick('close')">{{$t('卖出')}}</div>
+ <div class="tbns_mr" @click="showPopupclick('open')">{{$t('买入')}}</div>
+ </div>
+
+ <div class="ws_box">
+ <div class="ws_box_box">
+ <div class="ws_box_box_box">
+ <div class="ws_box_box_box_top">
+ <img class="ws_box_box_box_top_img" src="../../../assets/img/icon-dollar.png"/>
+ <div class="ws_box_box_box_top_txt">{{$t('开')}}</div>
+ </div>
+ <div class="ws_box_box_box_btn">{{quote.open}}</div>
+ </div>
+ <div class="ws_box_box_box">
+ <div class="ws_box_box_box_top">
+ <img class="ws_box_box_box_top_img" src="../../../assets/img/icon-arrow-up.png"/>
+ <div class="ws_box_box_box_top_txt">{{$t('高')}}</div>
+ </div>
+ <div class="ws_box_box_box_btn">{{quote.high}}</div>
+ </div>
+ </div>
+ <div class="ws_box_box" style="padding-bottom: 10px;">
+ <div class="ws_box_box_box">
+ <div class="ws_box_box_box_top">
+ <img class="ws_box_box_box_top_img" src="../../../assets/img/icon-arrow-down.png"/>
+ <div class="ws_box_box_box_top_txt">{{$t('低')}}</div>
+ </div>
+ <div class="ws_box_box_box_btn">{{quote.low}}</div>
+ </div>
+ <div class="ws_box_box_box">
+ <div class="ws_box_box_box_top">
+ <img class="ws_box_box_box_top_img" src="../../../assets/img/icon-foldline.png"/>
+ <div class="ws_box_box_box_top_txt">{{$t('24h成交量')}}</div>
+ </div>
+ <div class="ws_box_box_box_btn">{{quote.amount}}</div>
+ </div>
+ </div>
+ </div>
+ <van-popup v-model:show="showPopup" :round="true">
+ <div class="popup-content" >
+ <PerpetualOpen class="pl-30 pr-30" :key="symbol" :selectIndex="selectIndex" :symbol="symbol"
+ :green-data="bids" :red-data="asks" :price="price" :init-open="initOpen" :init-close="initClose"
+ :init-futrue="initFutrue" @ordered="onOrdered" @changeValueBack="changeValueBack">
+ </PerpetualOpen>
+ <!-- <van-button @click="showPopup = false">关闭</van-button> -->
+ </div>
+ </van-popup>
+ <!-- <div class="mainBackground rounded-view" key="y">
+ <PerpetualOpen class="pl-30 pr-30" :key="symbol" :selectIndex="selectIndex" :symbol="symbol"
:green-data="bids" :red-data="asks" :price="price" :init-open="initOpen" :init-close="initClose"
:init-futrue="initFutrue" @ordered="onOrdered" @changeValueBack="changeValueBack">
</PerpetualOpen>
<div class="line"></div>
- <!-- 委托/持仓-->
<PerpetualOrder class="pl-30 pr-30" :key="keyIndex + 'd'" :symbol="symbol" :order-cur="orderCur"
:order-hold="orderHold" :price="price" :topIndex="selectIndex" :futrue-hold="futrueHold"
:futrue-histroy="futrueHistroy" @tab="onTab" @recall="onRecall">
</PerpetualOrder>
- </div>
+ </div> -->
</div>
</div>
- <div class="fixed-box">
+ <!-- <div class="fixed-box">
<div class="flex justify-between items-center px-30 py-20" @click.stop="handleClickShowKlineChart()">
<span class="font-30 textColor2" style="color:#fff;">{{ symbol.toUpperCase() }} {{ $t('k线图表') }}</span>
<van-icon class="font-30" style="color:#fff;" :name="showCharts ? 'arrow-down' : 'arrow-up'"></van-icon>
</div>
- <!-- <section class="indicator-index-container" v-if="showKlineChart">
- <div class="indicator-index-box">
- <div class="flex-l">
- <ul>
- <li v-for="(item, index) in filterOne" :key="item" @click="handleClickSelectTime(item, index)"
- :class="[item.index === timeLabelActive ? 'active' : '']">{{
- item.name
- }}</li>
- <li @click="handleClickMoreBtn">{{ $t('更多') }}</li>
- </ul>
- </div>
- </div>
- <div class="indicator-index-box-second" v-if="showMore">
- <ul>
- <li v-for="(item, index) in filterTwo" :key="item" @click="handleClickSelectTime(item, index)"
- :class="[item.index === timeLabelActive ? 'active' : '']">{{
- item.name
- }}</li>
- </ul>
- </div>
- </section> -->
+
<div class="kline-container flex" v-if="showKlineChart">
<div class="chart-index">
- <!-- <fx-kline :height="500" :symbol="symbol" :isShowsolid="true" :chartType="chartType" v-if="symbol" @data="onData"
- :key="`${symbol}-${timeValue}`" /> -->
+
<k-line-charts :update-key="updateKey" :update-data="quote" :symbol="symbol" :showBottom="true" />
</div>
</div>
- </div>
+ </div> -->
</div>
</template>
@@ -227,7 +255,7 @@
import PerpetualOpen from '@/components/Transform/perpetual-open/index.vue'
import PerpetualOrder from '@/components/Transform/perpetual-order/index.vue'
-import { _getDeepData, _initOpen, _initClose, _futrueOrderInit, _contractApplyOrderList, contractOrder, _futrueOrderList } from "@/service/trade.api";
+import { _getDeepData, _initOpen, _initClose, _futrueOrderInit, _contractApplyOrderList, contractOrder, _futrueOrderList, _getKline } from "@/service/trade.api";
import { _getBalance } from '@/service/user.api'
import { _getHomeList } from '@/service/home.api'
import { Popup, Swipe, SwipeItem } from 'vant';
@@ -259,6 +287,15 @@
}),
},
watch: {
+ // '$route.params.symbol': {
+ // immediate: true,
+ // handler(newVal) {
+ // if (newVal) {
+ // this.symbol = newVal
+ // this.onUpdate(newVal) // 重新初始化数据
+ // }
+ // }
+ // },
selectIndex(val) {
showLength = 7
},
@@ -286,6 +323,7 @@
return {
quote: {},
initTimer: null,
+ showPopup:false,
keyIndex: 0,
timeout: null,
timer: null, // 底部持仓等的公用定时器
@@ -312,6 +350,7 @@
show: false, // popup
animated1: false,
animated2: false,
+ _symbol:'',
currentType: 'open',
showCharts: false,
type: 'cryptos',
@@ -358,14 +397,22 @@
// this.balance = money
})
},
+
methods: {
...mapActions('home', [SET_COIN_LIST]),
onUpdate(symbol) { // 更新
+ // debugger
this.currentType = 'long'
- this.symbol = symbol
this.closeSocket()
+ // this.clearTimer()
+
+ this.symbol = symbol
this.init(symbol)
},
+ showPopupclick(e){
+ this.showPopup = !this.showPopup
+ // this.$refs.TradeOrderArea.changeTab(e);
+ },
changeCurrentType(type) {
this.currentType = type
},
@@ -449,20 +496,19 @@
this.clearTimer()
// this.clearTimeout()
this.initParam(this.symbol, evt) // 重新初始化
- // TODO: 这里要做判断
- if (this.selectIndex / 1 === 1) {
- this[this.curTab](this.symbol) // 重新调取记录
- console.log('this.curTab', this.curTab)
- } else { // 交割合约
- this[this.curTab](this.symbol)
- // this.show = true
- console.log('curTab', evt, this.curTab)
-
+ // 判断方法是否存在
+ this.showPopup = false
+ const fn = this[this.curTab];
+ if (typeof fn === 'function') {
+ fn.call(this, this.symbol);
+ console.log('[onOrdered] 调用方法:', this.curTab, '参数:', this.symbol, '事件:', evt);
+ } else {
+ console.warn(`[onOrdered] curTab 方法不存在: ${this.curTab}`);
}
//console.log('下单后更新数据')
},
onTab(evt) { // 点击tab后的回调
- console.log('evt2', evt)
+ // console.log('evt2', evt)
this.clearTimer()
// this.clearTimeout()
this.curTab = evt
@@ -471,16 +517,17 @@
fetchQoutes(symbol) { // 获取当前行情
_getHomeList(symbol).then(data => { // 获取行情
this.symbolName = data[0].name
- console.log(data[0].name)
+ // console.log(data[0].name)
this.handleQoutes(data)
this.startQuoteSocket() // socket
})
},
handleQoutes(data) {
+ // console.log('handleQoutes: ', data);
if (data && data.length) {
const cur = data[0]
this.price = cur.close
- this.range = cur.change_ratio + ''
+ this.range = (cur.change_ratio || cur.changeRatio)
this.quote = cur
this.updateKey++
}
@@ -548,18 +595,27 @@
if (type === 'open' || type === 'long' || type === 'short' || !type) {
let initFunTimer = null;
let initFun = () => {
- _initOpen({ symbol: symbol }).then(data => {
- console.log(data, '22222222')
+ _getKline(symbol, '1min').then(data => {
this.initOpen = data
clearTimeout(initFunTimer)
initFunTimer = null
- }).catch(err => {
+ }).catch(err => {
initFunTimer = setTimeout(() => {
initFun()
}, 3000);
})
+ // _initOpen({ symbol: symbol }).then(data => {
+ // console.log(data, '22222222')
+ // this.initOpen = data
+ // clearTimeout(initFunTimer)
+ // initFunTimer = null
+ // }).catch(err => {
+ // initFunTimer = setTimeout(() => {
+ // initFun()
+ // }, 3000);
+ // })
}
- initFun()
+ // initFun()
}
if (type === 'close' || !type) {
let initFunTimer = null;
@@ -570,14 +626,14 @@
clearTimeout(initFunTimer)
initFunTimer = null
}).catch(err => {
- initFunTimer = setTimeout(() => {
- initFun()
- }, 3000);
+ // initFunTimer = setTimeout(() => {
+ // initFun()
+ // }, 3000);
})
}
- initFunTimer = setTimeout(() => {
- initFun()
- }, 600);
+ // initFunTimer = setTimeout(() => {
+ // initFun()
+ // }, 600);
}
if (type === 'futrue' || !type) {
_futrueOrderInit(symbol).then(data => {
@@ -617,7 +673,7 @@
symbol: symbol,
type: 'orders',
page_no: 1,
- symbolType: 'cryptos'
+ // symbolType: 'cryptos'
}
if (this.userInfo.token) {
contractOrder(obj).then(data => {
@@ -638,12 +694,12 @@
},
fetchFutrueHoldList(symbol) { // 交割持仓
if (this.userInfo.token) {
- _futrueOrderList(symbol, 'orders', 1, 'cryptos').then(data => {
+ _futrueOrderList(symbol, 'orders', 1).then(data => {
// this.futrueHold = data
this.futrueHold = data.sort(this.sortData);
})
this.timer = setInterval(() => {
- _futrueOrderList(symbol, 'orders', 1, 'cryptos').then(data => {
+ _futrueOrderList(symbol, 'orders', 1).then(data => {
// if (typeof this.timer === 'string') {
// this.timer = null
// return
@@ -655,23 +711,34 @@
}
},
fetchFutrueHistory(symbol) { // 交割历史持仓
- _futrueOrderList(symbol, 'hisorders', 1, 'cryptos').then(data => {
+ _futrueOrderList(symbol, 'hisorders', 1 ).then(data => {
this.futrueHistroy = data
// this.clearTimeout()
})
},
init(symbol) { // 初始化页面
- this.symbol = symbol
- this.fetchQoutes(symbol)
- this.fetchDeepData(symbol)
- this.initParam(symbol) // 'open'
+ // 在清理一遍
+ this.closeSocket()
this.clearTimer()
+
+ const _symbol = symbol || this.symbol
+
+ if(this.symbol){
+ this._symbol = this.symbol
+ }else{
+ this._symbol = symbol
+ }
+ console.log('init: ',this.symbol, symbol)
+ this.fetchQoutes(_symbol)
+ // this.fetchDeepData(_symbol)
+ this.initParam(_symbol) // 'open'
+ // this.clearTimer()
//if (this.curTab === 'fetchOrderListCur') {
if (this.curTab === 'fetchOrderListHold') {
//this.fetchOrderListCur(symbol)
- this.fetchOrderListHold(symbol)
+ this.fetchOrderListHold(_symbol)
} else {
- this.fetchFutrueHoldList(symbol)
+ this.fetchFutrueHoldList(_symbol)
}
},
@@ -752,6 +819,71 @@
</script>
<style lang="scss">
+ .ws_box_box_box_btn{
+ font-size: 35px;
+ font-weight: bold;
+ padding-bottom: 20px;
+ }
+ .ws_box_box_box_top_img{
+ width: 30px;
+ height: 30px;
+ margin-right: 10px;
+ }
+ .ws_box_box_box_top{
+ display: flex;
+ align-items: center;
+ font-size: 30px;
+ font-weight: bold;
+ color: #8c8883;
+ }
+ .ws_box_box_box{
+ width: 50%;
+ display: flex;
+ flex-direction: column;
+ padding-top: 40px;
+ padding-left: 40px;
+ }
+ .ws_box_box{
+ display: flex;
+ }
+ .ws_box{
+ display: flex;
+ flex-direction: column;
+ background-color: #F6F7F9;
+ border-radius:24px;
+ color:#333;
+ margin:30px;
+ }
+ .tbns_mr {
+ font-weight: bold;
+ font-size: 35px;
+ text-align:center;
+ background-color: #3A7FF6;
+ color: #fff;
+ width: 350px;
+ line-height: 100px;
+ height: 100px;
+ border-radius: 50px;
+ }
+ .tbns_mc {
+ font-weight: bold;
+ font-size: 35px;
+ text-align:center;
+ background-color: #DE5D57;
+ color: #fff;
+ width: 350px;
+ line-height: 100px;
+ height: 100px;
+ border-radius: 50px;
+ }
+
+ .btns {
+ display: flex;
+ justify-content: space-between;
+ align-items: center;
+ margin: 0 20px;
+ // width: 100%;
+ }
//.list-enter-active, .list-leave-active {
// transition: all .5s;
// transform: translateY(30px)
--
Gitblit v1.9.3