| | |
| | | <div class="flex justify-start pt-45 before"> |
| | | <div class="flex items-center "> |
| | | <img src="@/assets/image/icon_back.png" class="w-35 h-35 back" alt="" @click="jump()"> |
| | | <img src="@/assets/theme/dark/image/black-convert.png" alt="convert-img" class="w-35 h-35" @click="onSidebar"> |
| | | <img src="@/assets/theme/dark/image/black-convert.png" alt="convert-img" class="w-35 h-35" |
| | | @click="onSidebar"> |
| | | <div class="flex pl-21 textColor" @click="onSidebar"> |
| | | <div class="font-35">{{ symbolName.toUpperCase() || '--' }}</div> |
| | | <div class="ml-15 font-28">{{ title }}</div> |
| | | </div> |
| | | <div class="pl-10 w-160 font-28" :class="{ 'text-green': range > 0, 'text-red': range <= 0 }">{{ range || '--' }}%</div> |
| | | <!-- 右上角小图标 --> |
| | | <div class="pl-10 w-160 font-28" :class="{ 'text-green': range > 0, 'text-red': range <= 0 }">{{ range || |
| | | '--' }}%</div> |
| | | <!-- 右上角小图标 --> |
| | | <img src="@/assets/image/kline.png" class="w-44 h-44 right" alt="" @click="klineJump()"> |
| | | <img src="../../../assets/image/public/record.png" alt="record-img" class="w-64 h-35 pr-30 record-img" |
| | | @click="goHistory" /> |
| | | <img src="../../../assets/image/public/record.png" alt="record-img" class="w-64 h-35 pr-30 record-img" |
| | | @click="goHistory" /> |
| | | </div> |
| | | <!-- <div class="flex items-center"> |
| | | <img src="../../assets/image/public/k-line.png" alt="line-img" class="w-38 h-35" |
| | |
| | | </div> --> |
| | | </div> |
| | | <!-- v-if="!selectIndex==2" --> |
| | | <div class="flex justify-between pt-34" > |
| | | <div class="flex justify-between pt-34"> |
| | | <!-- <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" |
| | | :class="selectIndex == 2 ? 'select-one-active' : 'no-select'" @click="changeTab(2)"> |
| | | {{ queryType == 'cryptos' ? $t('交割合约') : $t('期货交易') }}</button> --> |
| | | {{ queryType == 'cryptos' ? $t('交割合约') : $t('货币交易') }}</button> --> |
| | | </div> |
| | | </div> |
| | | </div> |
| | |
| | | <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">/{{ 'USD'}} </span> |
| | | <span class="font-30">/{{ 'USD' }} </span> |
| | | </div> |
| | | </div> |
| | | <div class="pl-42 pr-40 font-28"> |
| | |
| | | </div> |
| | | <div class="text-right"> |
| | | <div class="textColor font-28">{{ item.close }}</div> |
| | | <div class="mt-10 font-28" :class="item.change_ratio_str > 0 ? 'text-green' : 'text-red'">{{ item.change_ratio_str |
| | | }}%</div> |
| | | <div class="mt-10 font-28" :class="item.change_ratio_str > 0 ? 'text-green' : 'text-red'">{{ |
| | | item.change_ratio_str |
| | | }}%</div> |
| | | </div> |
| | | </div> |
| | | </div> |
| | |
| | | import { useQuotesStore } from '@/store/quotes.store'; |
| | | import { THEME } from '@/config/theme' |
| | | import { setStorage, getStorage } from '@/utils/utis' |
| | | import { _getCoinList } from '@/service/quotes.api'; |
| | | import { _getCoinList } from '@/service/quotes.api'; |
| | | export default { |
| | | name: "contractHeader", |
| | | props: { |
| | |
| | | } |
| | | }, |
| | | methods: { |
| | | goHistory() { |
| | | if (this.$store.state.user.userInfo.token) { |
| | | let type = 'cryptos' |
| | | if (this.$route.query.type) { |
| | | type = this.$route.query.type |
| | | } |
| | | const url = this.topIndex / 1 === 1 ? '/cryptos/perpetualHistory' : '/cryptos/deliveryContractHistory' |
| | | this.$router.push({ |
| | | path: url, query: { symbol: this.symbol, type: type } |
| | | }); |
| | | } else { |
| | | this.$router.push('/login') |
| | | } |
| | | |
| | | }, |
| | | goHistory() { |
| | | if (this.$store.state.user.userInfo.token) { |
| | | let type = 'cryptos' |
| | | if (this.$route.query.type) { |
| | | type = this.$route.query.type |
| | | } |
| | | const url = this.topIndex / 1 === 1 ? '/cryptos/perpetualHistory' : '/cryptos/deliveryContractHistory' |
| | | this.$router.push({ |
| | | path: url, query: { symbol: this.symbol, type: type } |
| | | }); |
| | | } else { |
| | | this.$router.push('/login') |
| | | } |
| | | |
| | | }, |
| | | onRoute(item) { |
| | | if (this.$route.params.symbol !== item.symbol) { |
| | | this.$router.push(`/cryptos/perpetualContract/${item.symbol}?selectIndex=${this.selectIndex}`) |
| | |
| | | async onSidebar() { // 侧边栏打开 |
| | | // console.log('侧边栏打开: ', this.selectIndex) |
| | | // if (this.selectIndex == 2) { |
| | | // 优先用本地缓存的 coins |
| | | let arr = getStorage('qoutes') |
| | | let coninArr = '' |
| | | console.log('arr:', arr) |
| | | // 优先用本地缓存的 coins |
| | | let arr = getStorage('qoutes') |
| | | let coninArr = '' |
| | | console.log('arr:', arr) |
| | | |
| | | if (arr && arr.length) { |
| | | // 如果本地有 coins,优先用本地 |
| | |
| | | // 如果本地没有 coins,拉取接口 |
| | | const quotesData = await _getCoinList() |
| | | console.log('quotesData:', quotesData) |
| | | quotesData.forEach(item => { |
| | | coninArr += item.symbol + ',' |
| | | }) |
| | | setStorage('qoutes', { coins: quotesData }) // 存到本地 |
| | | quotesData.forEach(item => { |
| | | coninArr += item.symbol + ',' |
| | | }) |
| | | setStorage('qoutes', { coins: quotesData }) // 存到本地 |
| | | } |
| | | this.coins = coninArr |
| | | // const quotesData = JSON.parse(localStorage.getItem('qoutes')); |
| | | // this.coins = quotesData.coins || []; |
| | | // this.coins = quotesData.coins.map(item => item.symbol) |
| | | // 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); |
| | | // } |
| | |
| | | path: `/cryptos/perpetualContract/${val[0].symbol}?type=indices&selectIndex=1` |
| | | }, |
| | | { |
| | | name: this.$t('期货交易'), |
| | | name: this.$t('货币交易'), |
| | | icon: new URL('@/assets/image/etfNav/icon03.png', import.meta.url), |
| | | path: `/cryptos/perpetualContract/${val[0].symbol}?type=indices&selectIndex=2` |
| | | }, |
| | |
| | | path: `/cryptos/perpetualContract/GlobalETF500?type=indices&selectIndex=1` |
| | | }, |
| | | { |
| | | name: this.$t('期货交易'), |
| | | name: this.$t('货币交易'), |
| | | icon: new URL('@/assets/image/etfNav/icon03.png', import.meta.url), |
| | | path: `/cryptos/perpetualContract/GlobalETF500?type=indices&selectIndex=2` |
| | | }, |
| | |
| | | path: `/cryptos/perpetualContract/${val[0].symbol}?type=US-stocks&selectIndex=1` |
| | | }, |
| | | { |
| | | name: this.$t('期货交易'), |
| | | name: this.$t('货币交易'), |
| | | icon: new URL('@/assets/image/etfNav/icon03.png', import.meta.url), |
| | | path: `/cryptos/perpetualContract/${val[0].symbol}?type=US-stocks&selectIndex=2` |
| | | }, |
| | |
| | | logIn: "Transaktion nach Anmeldung", |
| | | idBackImg: "Bitte laden Sie Zertifikatsinformationen hoch", |
| | | '生成实时数据失败': "Live-Daten konnten nicht generiert werden", |
| | | '期货交易': "Futures-Handel", |
| | | '货币交易': "Währungshandel", |
| | | '休市': "Markt geschlossen", |
| | | '交易中': "Handel", |
| | | 'Asia/Shanghai': "Peking-Zeit", |
| | |
| | | logIn: "Fai trading dopo aver effettuato l'accesso", |
| | | idBackImg: "Carica le informazioni sul certificato", |
| | | '生成实时数据失败': "Impossibile generare dati in tempo reale", |
| | | '期货交易': "Futures Trading", |
| | | '货币交易': "Trading di valute", |
| | | '休市': "Chiusura del mercato", |
| | | '交易中': "In transito", |
| | | 'Asia/Shanghai': "Ora di Pechino", |
| | |
| | | logIn: "ログインして取引する", |
| | | idBackImg: "証明書情報をアップロードしてください", |
| | | '生成实时数据失败': "ライブデータの生成に失敗しました", |
| | | '期货交易': "先物取引", |
| | | '货币交易': "通貨取引", |
| | | '请输入谷歌验证码': "Google 確認コードを入力してください", |
| | | '休市': "休業", |
| | | '交易中': "取引中", |
| | |
| | | logIn: "登錄後進行交易", |
| | | idBackImg: "請上傳證件信息", |
| | | '生成实时数据失败': "生成實時數據失敗", |
| | | '期货交易': "期貨交易", |
| | | '货币交易': "貨幣交易", |
| | | '请输入谷歌验证码': "請輸入谷歌驗證碼", |
| | | '休市': "休市", |
| | | '交易中': "交易中", |
| | |
| | | logIn: "Log in", |
| | | idBackImg: "Please upload certificate information", |
| | | '生成实时数据失败': "Failed to generate live data", |
| | | '期货交易': "Futures trading", |
| | | '货币交易': "Currency Trading", |
| | | '请输入谷歌验证码': "Please enter the Google verification code", |
| | | '休市': "Closed", |
| | | '交易中': "Trading", |
| | |
| | | logIn: "Trader après la connexion", |
| | | idBackImg: "Veuillez télécharger les informations du certificat", |
| | | '生成实时数据失败': "Échec de la génération de données en direct", |
| | | '期货交易': "Trading de contrats à terme", |
| | | '货币交易': "Transaction de devise", |
| | | '请输入谷歌验证码': "Veuillez saisir le code de vérification Google", |
| | | '休市': "Fermé", |
| | | '交易中': "En cours de transaction", |
| | |
| | | logIn: "무역에 로그인", |
| | | idBackImg: "인증서 정보를 업로드하십시오", |
| | | '生成实时数据失败': "라이브 데이터를 생성하지 못했습니다.", |
| | | '期货交易': "선물 거래", |
| | | '货币交易': "화폐 거래", |
| | | '请输入谷歌验证码': "Google 인증 코드를 입력하세요.", |
| | | '休市': "휴장", |
| | | '交易中': "거래 중", |
| | |
| | | logIn: "ซื้อขายหลังจากเข้าสู่ระบบ", |
| | | idBackImg: "โปรดอัปโหลดข้อมูลใบรับรอง", |
| | | '生成实时数据失败': "สร้างข้อมูลสดไม่สำเร็จ", |
| | | '期货交易': "การซื้อขายสินค้าอนาคต", |
| | | '货币交易': "การซื้อขายสกุลเงิน", |
| | | '请输入谷歌验证码': "โปรดป้อนรหัสยืนยันของ Google", |
| | | '休市': "ตลาดหยุด", |
| | | '交易中': "การซื้อขาย", |
| | |
| | | logIn: "Đăng nhập để giao dịch", |
| | | idBackImg: "Vui lòng tải lên thông tin chứng chỉ", |
| | | '生成实时数据失败': "Không thể tạo dữ liệu trực tiếp", |
| | | '期货交易': "Giao dịch hợp đồng tương lai", |
| | | '货币交易': "Giao dịch tiền tệ", |
| | | '休市': "Đóng cửa", |
| | | '交易中': "Đang giao dịch", |
| | | 'Asia/Shanghai': "Giờ Trung Quốc", |
| | |
| | | logIn: "登录后进行交易", |
| | | idBackImg: "请上传证件信息", |
| | | '生成实时数据失败': "生成实时数据失败", |
| | | '期货交易': "期货交易", |
| | | '货币交易': "货币交易", |
| | | "请输入谷歌验证码": "请输入谷歌验证码", |
| | | '休市': "休市", |
| | | '交易中': "交易中", |
| | |
| | | <template> |
| | | <div id="cryptos"> |
| | | <div class="DeliveryContractHistory px-10 font-28"> |
| | | <assets-head :title="routeType == 'cryptos' ? $t('交割合约历史') : $t('期货交易')" :backFunc="() => { |
| | | <assets-head :title="routeType == 'cryptos' ? $t('交割合约历史') : $t('货币交易')" :backFunc="() => { |
| | | if ($route.query.goback) { |
| | | $router.push({ |
| | | path: '/cryptos/funds', |
| | |
| | | <van-icon name="arrow-down" /> |
| | | <div class="select-data" v-if="isAll"> |
| | | <div class="select-item" @click.stop="selectItem(item2)" v-for="(item2, index) in currencyList" |
| | | :key="index">{{ routeType == 'indices' ? item2.name : item2.symbol.toUpperCase() || item2.symbol }}</div> |
| | | :key="index">{{ routeType == 'indices' ? item2.name : item2.symbol.toUpperCase() || item2.symbol }} |
| | | </div> |
| | | </div> |
| | | </div> |
| | | </div> |
| | |
| | | :finished-text="dataList.orders.length ? $t('已经全部加载完毕') : ''" @load="onLoad" :offset="30" class="px-20"> |
| | | <futrue-hold-list v-if="type === 'orders'" :list-data="dataList.orders"> |
| | | </futrue-hold-list> |
| | | <div class="flex flex-col justify-center pt-50 pb-20 items-center" v-if="!dataList.orders.length && !loading"> |
| | | <div class="flex flex-col justify-center pt-50 pb-20 items-center" |
| | | v-if="!dataList.orders.length && !loading"> |
| | | <img src="@/assets/image/assets-center/no-data.png" alt="" class="w-100 h-100 no-data-img" /> |
| | | <p class="text-grey mt-10">{{ $t('暂无记录') }}</p> |
| | | </div> |
| | |
| | | <div class="w-368 h-80 mr-32 font-28 flex justify-center items-center rounded box-border tabBtn" |
| | | :class="tab === '1' ? 'activeBtn' : ''" @click="onTab('1')">{{ $t('永续合约') }}</div> |
| | | <div class="w-368 h-80 font-28 flex justify-center items-center rounded box-border tabBtn" |
| | | :class="tab === '2' ? 'activeBtn' : ''" @click="onTab('2')">{{ queryType == 'cryptos' ? $t('交割合约') : $t('期货交易') |
| | | :class="tab === '2' ? 'activeBtn' : ''" @click="onTab('2')">{{ queryType == 'cryptos' ? $t('交割合约') : $t('货币交易') |
| | | }}</div> |
| | | </div> --> |
| | | <!-- 数据区 --> |
| | |
| | | <p>{{ quote.low || '--' }}</p> |
| | | </div> |
| | | <div class="flex w-1/2 flex-col justify-between w-220 mt-20"> |
| | | <p class="text-grey">{{ queryType == 'cryptos' ? $t('24h成交额') + '(USDT)' : $t('24h成交额') + '(USD)' }}</p> |
| | | <p class="text-grey">{{ queryType == 'cryptos' ? $t('24h成交额') + '(USDT)' : $t('24h成交额') + '(USD)' }} |
| | | </p> |
| | | <p>{{ (quote.volume * 1).toFixed(2) || '--' }}</p> |
| | | </div> |
| | | </div> |
| | |
| | | <p>{{ $t('买入') }}</p> |
| | | <p class="flex justify-between font-22"> |
| | | <span style="margin-right: -10px;">{{ $t('价格') }}{{ queryType == 'cryptos' ? '(USDT)' : '(USD)' |
| | | }}</span> |
| | | }}</span> |
| | | <span class="buy-title">{{ $t('数量') }}({{ symbolData.toUpperCase() }})</span> |
| | | </p> |
| | | </li> |
| | |
| | | <span class="flex-1">{{ $t('时间') }}</span> |
| | | <span class="flex-1">{{ $t('方向') }}</span> |
| | | <span class="flex-1">{{ $t('价格') }}{{ queryType == 'cryptos' ? '(USDT)' : '(USD)' }}</span> |
| | | <span class="flex-1 flex justify-center buy-title">{{ $t('数量') }}({{ symbolData.toUpperCase() }})</span> |
| | | <span class="flex-1 flex justify-center buy-title">{{ $t('数量') }}({{ symbolData.toUpperCase() |
| | | }})</span> |
| | | </li> |
| | | <li v-for="(item, index) in deals" :key="item.ts + item.price + item.amount || index" |
| | | class="flex justify-between mt-30"> |
| | |
| | | </div> |
| | | </div> |
| | | <van-popup v-model:show="show" class="rounded-2xl" :key="initFutrue.session_token"> |
| | | <popup-confirm-order :paras="initFutrue.para" :symbol="symbol" :direction="direction" :balance="initFutrue.amount" |
| | | :price="quote.close" @close="onClose" @confirm="onOrderConfirm" v-if="popType === 'confirm'" /> |
| | | <popup-confirm-order :paras="initFutrue.para" :symbol="symbol" :direction="direction" |
| | | :balance="initFutrue.amount" :price="quote.close" @close="onClose" @confirm="onOrderConfirm" |
| | | v-if="popType === 'confirm'" /> |
| | | <popup-delivery showBtns :detailData="detailData" :key="detailData.order_no" @close="onClose" |
| | | @continueToBuy="order()" @timeEnd="handleTimeEnd" :price="quote.close" v-else /> |
| | | </van-popup> |