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 | 175 ++++++++++++++++++++++++++++++++++++++++++++++-----------
1 files changed, 140 insertions(+), 35 deletions(-)
diff --git a/src/views/cryptos/PerpetualContract/index.vue b/src/views/cryptos/PerpetualContract/index.vue
index 86f95b1..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">
@@ -35,7 +36,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_str}%` }}</span>
+ <span class="red">{{ `${chartData?.change_ratio}%` }}</span>
</p>
</div>
<div class="flex-r">
@@ -123,7 +124,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_str}%` }}</span>
+ <span class="red">{{ `${chartData?.change_ratio}%` }}</span>
</p>
</div>
<div class="flex-r">
@@ -171,55 +172,81 @@
</div>
</div>
</section>
- <div class="mainBackground rounded-view" key="y">
+ <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>
@@ -296,6 +323,7 @@
return {
quote: {},
initTimer: null,
+ showPopup:false,
keyIndex: 0,
timeout: null,
timer: null, // 底部持仓等的公用定时器
@@ -322,6 +350,7 @@
show: false, // popup
animated1: false,
animated2: false,
+ _symbol:'',
currentType: 'open',
showCharts: false,
type: 'cryptos',
@@ -380,6 +409,10 @@
this.symbol = symbol
this.init(symbol)
},
+ showPopupclick(e){
+ this.showPopup = !this.showPopup
+ // this.$refs.TradeOrderArea.changeTab(e);
+ },
changeCurrentType(type) {
this.currentType = type
},
@@ -464,6 +497,7 @@
// this.clearTimeout()
this.initParam(this.symbol, evt) // 重新初始化
// 判断方法是否存在
+ this.showPopup = false
const fn = this[this.curTab];
if (typeof fn === 'function') {
fn.call(this, this.symbol);
@@ -474,7 +508,7 @@
//console.log('下单后更新数据')
},
onTab(evt) { // 点击tab后的回调
- console.log('evt2', evt)
+ // console.log('evt2', evt)
this.clearTimer()
// this.clearTimeout()
this.curTab = evt
@@ -483,7 +517,7 @@
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
})
@@ -493,7 +527,7 @@
if (data && data.length) {
const cur = data[0]
this.price = cur.close
- this.range = cur.changeRatioStr + ''
+ this.range = (cur.change_ratio || cur.changeRatio)
this.quote = cur
this.updateKey++
}
@@ -688,9 +722,15 @@
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.fetchDeepData(_symbol)
this.initParam(_symbol) // 'open'
// this.clearTimer()
//if (this.curTab === 'fetchOrderListCur') {
@@ -779,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