From 93f9b248dd0eecbaa77006e5146c58c831d89d8e Mon Sep 17 00:00:00 2001
From: lxf <1371462558@qq.com>
Date: Mon, 07 Jul 2025 17:12:16 +0800
Subject: [PATCH] style
---
src/views/news/index.vue | 4
src/components/Transform/list-quotation/index.vue | 72 ++++++++++++-----
src/views/cryptos/index.vue | 21 ++++-
src/components/Transform/trade-order-area/index.vue | 6
src/config/index.js | 4
src/components/Transform/contract-futrue/index.vue | 38 ++++++++-
src/components/Transform/contract-header/index.vue | 32 ++++++--
src/views/cryptos/PerpetualContract/index.vue | 46 +++++++++--
src/router/index.js | 2
src/components/Transform/perpetual-open/index.vue | 2
10 files changed, 168 insertions(+), 59 deletions(-)
diff --git a/src/components/Transform/contract-futrue/index.vue b/src/components/Transform/contract-futrue/index.vue
index ca97557..f1c482a 100644
--- a/src/components/Transform/contract-futrue/index.vue
+++ b/src/components/Transform/contract-futrue/index.vue
@@ -3,7 +3,9 @@
<div class="contact-futrue">
<div class="font-24 text-grey mb-24">{{ $t('交割时间') }}</div>
<ul class="flex flex-wrap w-full">
- <li v-for="(item, index) in initFutrue.para" v-if="initFutrue.para" :key="item.uuid"
+ <!-- v-if="initFutrue.para" -->
+ <!-- initFutrue: {{ initFutrue.para }} -->
+ <li v-for="(item, index) in initFutrue.para" v-if="initFutrue.para" :key="item.uuid"
class="h-92 flex items-center mb-22" @click="onSelect(item, index)">
<p class="w-95 h-full flex justify-center items-center font-22 flex-1"
:class="active === item.para_id ? 'bg-light-blue text-white' : 'delivery_left_tab_background textColor'"
@@ -20,6 +22,9 @@
</template>
<script>
+import { _futrueOrderInit } from "@/service/trade.api.js";
+import { getStorage } from '@/utils'
+
export default {
name: 'ContractFutrue',
props: {
@@ -33,20 +38,43 @@
data() {
return {
active: '',
+ // initFutrue: {},
+ m_initFutrue: {},
initParam: [] // 初始化参数
}
},
created() {
- if (this.initFutrue.para.length > 0) {
- this.active = this.initFutrue.para[0].para_id || ''
- this.$emit('paraId', { id: this.active, index: 0 })
+ console.log('this.initFutrue', this.initFutrue)
+ // this._initParam();
+ if (this.initFutrue.para.length > 0) {
+ this.active = this.initFutrue.para[0].para_id || ''
+ this.$emit('paraId', { id: this.active, index: 0 })
+ }
+ },
+ watch: {
+ '$route.query.symbol'(newVal, oldVal) {
+ if (newVal !== oldVal) {
+ this._initParam();
+ }
}
},
methods: {
onSelect(item, index) { // 选中
this.active = item.para_id
this.$emit('paraId', { id: this.active, index })
- }
+ },
+ _initParam(){ // 初始化参数
+ // if (type === 'futrue' || !type) {
+ // const symbol = getStorage('symbol')
+ _futrueOrderInit('USDSGD').then(data => {
+ // this.m_initFutrue = data
+ if (this.initFutrue.para.length < 0) {
+ this.initFutrue = data
+ }
+ console.log('this.initFutrue', this.initFutrue)
+ })
+ // }
+ },
}
}
</script>
diff --git a/src/components/Transform/contract-header/index.vue b/src/components/Transform/contract-header/index.vue
index 260b714..02ee085 100644
--- a/src/components/Transform/contract-header/index.vue
+++ b/src/components/Transform/contract-header/index.vue
@@ -13,7 +13,7 @@
</div>
<div class="pl-10 w-160 font-28" :class="{ 'text-green': range > 0, 'text-red': range <= 0 }">{{ range > 0 ?
'+' : '' }}{{ range || '--' }}%</div>
- <img src="@/assets/image/kline.png" class="w-44 h-44 right" alt="" @click="klineJump()">
+ <!-- <img src="@/assets/image/kline.png" class="w-44 h-44 right" alt="" @click="klineJump()"> -->
</div>
<!-- <div class="flex items-center">
<img src="../../assets/image/public/k-line.png" alt="line-img" class="w-38 h-35"
@@ -25,9 +25,9 @@
<!-- <button class="tabBtn w-368 h-74 lh-74 border-none rounded"
:class="selectIndex == 1 ? 'select-active' : 'no-select'" @click="changeTab(1)">
{{ $t('永续合约') }}</button> -->
- <button class="tabBtn w-368 h-74 lh-74 border-none rounded"
+ <!-- <button class="tabBtn w-368 h-74 lh-74 border-none rounded"
:class="selectIndex == 2 ? 'select-one-active' : 'no-select'" @click="changeTab(2)">
- {{ queryType == 'cryptos' ? $t('交割合约') : $t('期货交易') }}</button>
+ {{ queryType == 'cryptos' ? $t('交割合约') : $t('期货交易') }}</button> -->
</div>
</div>
</div>
@@ -36,7 +36,7 @@
<div class="pl-42 border-b-color pt-48 pb-48">
<div class="textColor">
<span class="font-bold font-45 mr-12">{{ title }} {{ $t('合约') }}</span>
- <span class="font-30">/{{ queryType == 'cryptos' ? 'USDT' : 'USD'}} </span>
+ <span class="font-30">/{{ 'USD'}} </span>
</div>
</div>
<div class="pl-42 pr-40 font-28">
@@ -56,7 +56,7 @@
<div class="flex justify-between mb-50" v-for="item in list" :key="item.name" @click="onRoute(item)">
<div>
<div class="textColor font-28">{{ item.name }}</div>
- <div class="text-grey mt-10 font-28">{{ selectIndex == 1 ? $t('永续') : $t('交割') }}</div>
+ <!-- <div class="text-grey mt-10 font-28">{{ selectIndex == 1 ? $t('永续') : $t('交割') }}</div> -->
</div>
<div class="text-right">
<div class="textColor font-28">{{ item.close }}</div>
@@ -73,6 +73,7 @@
import { Popup } from "vant";
import { mapGetters } from "vuex";
import { _getHomeList } from "@/service/home.api";
+import { useQuotesStore } from '@/store/quotes.store';
import { THEME } from '@/config/theme'
import { setStorage } from '@/utils/utis'
export default {
@@ -112,6 +113,9 @@
},
computed: {
...mapGetters({ coinList: 'home/coinList' }),
+ ...mapGetters({
+ myCoinList: 'qoutes/coinList'
+ }),
title() {
return [this.$t('永续'), this.$t('交割')][this.selectIndex - 1]
}
@@ -141,7 +145,8 @@
methods: {
onRoute(item) {
if (this.$route.params.symbol !== item.symbol) {
- this.$router.push(`/cryptos/perpetualContract/${item.symbol}?type=${this.queryType}`)
+ // this.$router.push(`/cryptos/perpetualContract/${item.symbol}?selectIndex=${this.selectIndex}`)
+ // debugger
this.$emit('update-coin', item.symbol)
setStorage('symbol', item.symbol)
this.$forceUpdate()
@@ -149,7 +154,17 @@
this.show = false
},
onSidebar() { // 侧边栏打开
- this.coins = this.coinList.map(item => item.symbol)
+ // console.log('侧边栏打开: ', this.selectIndex)
+ if (this.selectIndex == 2) {
+ const quotesData = JSON.parse(localStorage.getItem('qoutes'));
+ this.coins = quotesData.coins || [];
+ this.coins = quotesData.coins.map(item => item.symbol)
+ } else {
+ this.coins = this.coinList.map(item => item.symbol);
+ }
+
+ // quotesStore.coins
+
console.log(this.coins, 11111)
this.show = true
this.fetchList()
@@ -166,6 +181,7 @@
this.fetchList()
}, 1000)
})
+
},
onClose() {
if (this.timeout) {
@@ -188,7 +204,7 @@
// }
},
klineJump() {
- this.$router.push(`/cryptos/trendDetails/${this.symbol}?type=${this.queryType}`)
+ this.$router.push(`/cryptos/trendDetails/${this.symbol}?type=${this.queryType}&selectIndex=${this.selectIndex}`)
},
changeTab(index) {
this.$emit('tab', index)
diff --git a/src/components/Transform/list-quotation/index.vue b/src/components/Transform/list-quotation/index.vue
index c6aa564..3f0a2e4 100644
--- a/src/components/Transform/list-quotation/index.vue
+++ b/src/components/Transform/list-quotation/index.vue
@@ -19,17 +19,17 @@
<!-- 热门 -->
<div class="flex items-end justify-between" style="margin: 14px 0;">
<div class="block text-22 font-medium" >{{$t('Market')}}</div>
- <div class="relative text-13">
- <!-- <div class="flex px-10 justify-between rounded-full bg-black text-white min-w-100 box-border">
- <div class="block">貨幣</div>
- <div class="i-material-symbols:arrow-drop-down-rounded"></div>
- </div> -->
- <!-- <div class="px-9 py-10 bg-black text-white flex flex-col absolute min-w-100 box-border top-25 rounded-11 leading-28" style="display: none;">
- <div>貨幣</div>
- <div>數字貨幣</div>
- <div>期貨</div>
- <div>收藏</div>
- </div> -->
+ <div class="relative text-13" @click="toggleDropdown">
+ <div class="flex px-20 justify-between rounded-full bg-black text-white min-w-100 box-border">
+ <div class="block">{{ $t(topTitle) }}</div>
+ <van-icon name="play" style="align-content:center;transform: rotate(90deg);"/>
+ </div>
+ <div class="px-16 py-20 bg-black text-white flex flex-col absolute min-w-100 box-border top-25 rounded-11 leading-28" style="z-index:999;margin-top: 0.8rem;" v-show="isTopShow">
+ <div @click="changeType('币币交易', 1)">{{ $t('币币交易') }}</div>
+ <div @click="changeType('外汇交割', 2)">{{ $t('外汇交割') }}</div>
+ <!-- <div>期貨</div>
+ <div>收藏</div> -->
+ </div>
</div>
</div>
@@ -62,10 +62,10 @@
currency.rate).toFixed(2) || '--' }}</p>
</li>
<li class="right flex items-center justify-end">
- <p class="w-153 font-31 h-71 bg-green text-white border-0 text-center btn" v-if="item.change_ratio_str > 0">
- +{{ item.change_ratio_str || (item.change_ratio_str === 0 ? 0 : '--') }}%</p>
+ <p class="w-153 font-31 h-71 bg-green text-white border-0 text-center btn" v-if="item.change_ratio_str > 0 || item.change_ratio > 0">
+ +{{ item.change_ratio || (item.change_ratio_str === 0 ? 0 : '--') }}%</p>
<p class="w-153 font-31 h-71 bg-red text-white border-0 text-center btn" v-else>
- {{ item.change_ratio_str || (item.change_ratio_str === 0 ? 0 : '--') }}%</p>
+ {{ item.change_ratio || (item.change_ratio_str === 0 ? 0 : '--') }}%</p>
</li>
</ul>
</van-cell>
@@ -82,9 +82,9 @@
}}</span>
<!-- <span class="font-24 text-grey" style="position: relative; top: 1px">
{{ item.name && item.name.replace(item.symbol.toUpperCase(), '') || '--' }}</span> -->
- <span class="font-24 text-grey" style="position: relative; top: 1px">
+ <!-- <span class="font-24 text-grey" style="position: relative; top: 1px">
/USDT
- </span>
+ </span> -->
</span>
<span class="font-24 text-grey text-left">{{ $t('成交量') + ' ' + (item.amount * 1).toFixed(2) }}</span>
</p>
@@ -99,10 +99,10 @@
{{ (item.volume * 1).toFixed(2) }}
</div>
<template v-else>
- <p class="w-153 font-31 h-71 bg-green text-white border-0 text-center btn" v-if="item.change_ratio_str > 0">
- +{{ item.change_ratio_str }}%</p>
+ <p class="w-153 font-31 h-71 bg-green text-white border-0 text-center btn" v-if="item.change_ratio_str > 0 || item.change_ratio > 0">
+ +{{ item.change_ratio || item.change_ratio_str }}%</p>
<p class="w-153 font-31 h-71 bg-red text-white border-0 text-center btn" v-else>
- {{ item.change_ratio_str || (item.change_ratio_str === 0 ? 0 : '--') }}%</p>
+ {{ item.change_ratio || (item.change_ratio_str === 0 ? 0 : '--') }}%</p>
</template>
</li>
</ul>
@@ -132,6 +132,9 @@
fixDate,
HOST_URL,
active: 0,
+ isTopShow: false,
+ topTitle: '币币交易',
+ topValue: 1,
type: 'left' //left 从左往右 right 从有王座
}
},
@@ -164,17 +167,32 @@
},
methods: {
...mapActions('home', [SET_CURRENCY]),
+ changeType(tit, val){
+ this.topTitle = tit
+ this.topValue = val
+ this.$emit('onfetchQList', val)
+ },
+ toggleDropdown(){
+ if(this.isTopShow){
+ this.isTopShow = false
+ }else{
+ this.isTopShow = true
+ }
+ },
onItemClick(item) {
- if (this.tabActive == 2) { //现货
+ if (this.topValue == 2) { //现货
+ setStorage('symbol', item.symbol)
this.$router.push({
- path: `/cryptos/trade/${item.symbol}`
+ path: `/cryptos/perpetualContract/${item.symbol}`,
+ query: { selectIndex: 2 }
});
} else {
setStorage('symbol', item.symbol)
// /cryptos/perpetualContract/btcusdt?selectIndex=2
this.$router.push({
- path: `/cryptos/perpetualContract/${item.symbol}`,
- query: { selectIndex: 2 }
+ path:`/cryptos/trade/${item.symbol}`,
+ // path: `/cryptos/perpetualContract/${item.symbol}`,
+ // query: { selectIndex: 2 }
});
// this.$router.push({
// path: `/foreign/deliveryContract/${item.symbol}`,
@@ -305,4 +323,12 @@
.text-grey{
// color: #8c8c8c;
}
+
+#cryptos .list-quatation .van-cell{
+ padding: 24px !important;
+ border-radius: 1rem;
+}
+.list-quatation{
+ margin: 0 20px;
+}
</style>
diff --git a/src/components/Transform/perpetual-open/index.vue b/src/components/Transform/perpetual-open/index.vue
index 2bfdce5..f5c1982 100644
--- a/src/components/Transform/perpetual-open/index.vue
+++ b/src/components/Transform/perpetual-open/index.vue
@@ -45,7 +45,7 @@
</div>
</div>
</template>
- <contract-futrue v-if="selectIndex == 2 && JSON.stringify(initFutrue.para) != '[]'" class="mb-20"
+ <contract-futrue v-if="selectIndex == 2" class="mb-20"
:initFutrue="initFutrue" @paraId="onParaId" />
<div class="h-76 lh-76 greyBg mb-30 flex pr-20 justify-center rounded-lg textColor" v-if="selectIndex == 1">
<input placeholder="" class="greyBg w-full pl-20 h-76 border-none text-left rounded-lg"
diff --git a/src/components/Transform/trade-order-area/index.vue b/src/components/Transform/trade-order-area/index.vue
index 844fb99..013aca2 100644
--- a/src/components/Transform/trade-order-area/index.vue
+++ b/src/components/Transform/trade-order-area/index.vue
@@ -490,9 +490,9 @@
right: 0;
top: 90px;
width: 100%;
- background-color: $grey_bg;
+ background-color: #ebebeb;
text-align: center;
- box-shadow: 0px 0px 3px 3px $grey_bg;
+ // box-shadow: 0px 0px 3px 3px $grey_bg;
border-radius: 4px;
color: $text-color;
z-index: 10;
@@ -503,7 +503,7 @@
}
.option-box>div:hover {
- background-color: $grey_bg;
+ // background-color: $grey_bg;ss
}
.num-text-color {
diff --git a/src/config/index.js b/src/config/index.js
index dd96314..cb1ded3 100644
--- a/src/config/index.js
+++ b/src/config/index.js
@@ -34,8 +34,8 @@
export const defaultSeconds = 1 * 24 * 60 * 60 * 1000
// const ENV_DEV = 'zhapi.coinbtcs.com' // dev
-const ENV_DEV = 'openapi.yanshiz.com' // dev
-// const ENV_DEV = '192.168.10.18:8086' // dev
+// const ENV_DEV = 'openapi.yanshiz.com' // dev
+const ENV_DEV = '192.168.10.18:8086' // dev
// const ENV_PRO = 'qheufhj.site' // app域名
diff --git a/src/router/index.js b/src/router/index.js
index 84d3d15..92749df 100644
--- a/src/router/index.js
+++ b/src/router/index.js
@@ -6,7 +6,7 @@
{
path: '/',
children: [
- { path: '', redirect: '/quotes' },
+ { path: '', redirect: '/news/index' },
{
path: '/login',
name: 'Login',
diff --git a/src/views/cryptos/PerpetualContract/index.vue b/src/views/cryptos/PerpetualContract/index.vue
index c1a3290..c70bf4f 100644
--- a/src/views/cryptos/PerpetualContract/index.vue
+++ b/src/views/cryptos/PerpetualContract/index.vue
@@ -172,7 +172,7 @@
</div>
</section>
<div class="mainBackground rounded-view" key="y">
- <PerpetualOpen class="pl-30 pr-30" :key="keyIndex + 'c'" :selectIndex="selectIndex" :symbol="symbol"
+ <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>
@@ -228,7 +228,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';
@@ -260,6 +260,15 @@
}),
},
watch: {
+ // '$route.params.symbol': {
+ // immediate: true,
+ // handler(newVal) {
+ // if (newVal) {
+ // this.symbol = newVal
+ // this.onUpdate(newVal) // 重新初始化数据
+ // }
+ // }
+ // },
selectIndex(val) {
showLength = 7
},
@@ -359,12 +368,16 @@
// 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)
},
changeCurrentType(type) {
@@ -547,16 +560,25 @@
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()
}
@@ -616,7 +638,7 @@
symbol: symbol,
type: 'orders',
page_no: 1,
- symbolType: 'cryptos'
+ // symbolType: 'cryptos'
}
if (this.userInfo.token) {
contractOrder(obj).then(data => {
@@ -637,12 +659,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
@@ -654,12 +676,16 @@
}
},
fetchFutrueHistory(symbol) { // 交割历史持仓
- _futrueOrderList(symbol, 'hisorders', 1, 'cryptos').then(data => {
+ _futrueOrderList(symbol, 'hisorders', 1 ).then(data => {
this.futrueHistroy = data
// this.clearTimeout()
})
},
init(symbol) { // 初始化页面
+ // 在清理一遍
+ this.closeSocket()
+ this.clearTimer()
+
this.symbol = symbol
this.fetchQoutes(symbol)
this.fetchDeepData(symbol)
diff --git a/src/views/cryptos/index.vue b/src/views/cryptos/index.vue
index 172e0b3..d0183ef 100644
--- a/src/views/cryptos/index.vue
+++ b/src/views/cryptos/index.vue
@@ -42,7 +42,7 @@
</div>
</div> -->
<!-- <ex-hot :listData="hList"></ex-hot> -->
- <list-quatation :listData="qList" />
+ <list-quatation :listData="qList" @onfetchQList="fetchQList"/>
<van-popup v-model:show="item.showPopUp" style="border-radius:10px;" :close-on-click-overlay="false"
v-for="item in popupNewsList" :key="item.id">
<div class="w-350 p-20 box-border">
@@ -98,7 +98,7 @@
currency: 'home/currency',
coinArr: 'home/coinArr',
hotArr: 'home/hotArr',
- userInfo: 'user/userInfo'
+ userInfo: 'user/userInfo',
}),
},
data() {
@@ -122,6 +122,7 @@
unreadMsg_timer: null,
unreadMsg_num: '',
popupNewsList: [],
+ getVal: 1,
}
},
methods: {
@@ -132,8 +133,20 @@
//console.log('\n *** \n'+unread_num*1+'\n *** \n')
})
},
- async fetchQList() { // 获取行情
- const list = await _getHomeList(this.coinArr.join(',')).catch(() => {
+ async fetchQList(v) { // 获取行情
+ let coninArr = ''
+ if (v) { this.getVal = v }
+ if(this.getVal == 2) {
+ let arr = getStorage('qoutes').coins
+ arr.map((item) => {
+ coninArr += item.symbol + ','
+ })
+ }else{
+ coninArr = this.coinArr.join(',')
+ }
+ console.log('fetchQList', v, coninArr)
+ // if()
+ const list = await _getHomeList(coninArr).catch(() => {
//TODO: 轮询
// this.timeout = setTimeout(() => {
// this.fetchQList()
diff --git a/src/views/news/index.vue b/src/views/news/index.vue
index 2d62c93..ba067ae 100644
--- a/src/views/news/index.vue
+++ b/src/views/news/index.vue
@@ -69,11 +69,11 @@
</div>
<div class="text-center">{{t('币币交易')}}</div>
</div>
- <div class="flex-1 flex flex-col items-center" @click="goToPage('/cryptos/perpetualContract/btcusdt?selectIndex=2')">
+ <div class="flex-1 flex flex-col items-center" @click="goToPage('/cryptos/perpetualContract/USDSGD?selectIndex=2')">
<div class="w-40 h-40 rounded-full flex items-center justify-center">
<img class="w-33 h-33" src="@/assets/c.jpg" draggable="false">
</div>
- <div class="text-center">{{t('交割合约')}}</div>
+ <div class="text-center">{{t('外汇交割')}}</div>
</div>
<div class="flex-1 flex flex-col items-center" @click="copyInviteLink">
<div class="w-40 h-40 rounded-full flex items-center justify-center">
--
Gitblit v1.9.3