li
5f40e4e1b5
- 移除秒合约页面及UI - 合约页Tab改为Position Held/Transaction Record - 存款/提款/转账页增加BTC/ETH - 资产页重构(用户信息+盈亏+多语言) - 注册页改版(匹配新设计稿) - 日文全面翻译+首页菜单多语言 - 代理专属注册链接支持(?code=) - 10个locale文件同步更新
1445 lines
51 KiB
Vue
1445 lines
51 KiB
Vue
<template>
|
||
<view class="">
|
||
<z-paging ref="paging" refresher-only @onRefresh="onRefresh"
|
||
:style="'background-color: '+theme.fu_bg+';color: '+theme.text">
|
||
<custom-refresher slot="refresher" slot-scope="{refresherStatus}" :status="refresherStatus">
|
||
</custom-refresher>
|
||
<!-- 顶部标题 -->
|
||
<view slot="top" class="width-100b flex align-center justify-between padding-w-30"
|
||
:style="{height: `calc(${statusBar}px + 100rpx)`,paddingTop:`${statusBar}px`,background:theme.bg}">
|
||
<view class="flex align-center">
|
||
<view @click="leftshow = true" class="width-360 flex align-center">
|
||
<image class="width-36 height-36" src="/static/imgs/transaction/left6@2x.png" mode=""></image>
|
||
<text class="font-36 numbold-font margin-w-15">{{topTab==1?coinInfo.coinname:coinInfo.show_name}}</text>
|
||
<view :class="zhangdie>0?'limitBox_up':'limitBox_down'">{{zhangdie}}%</view>
|
||
</view>
|
||
<view v-if="topTab==1" @click="topTab=2" class="exchangeBox">
|
||
<text class="font-28 color-C3C3C3">{{i18n.cycle.title2}}</text>
|
||
<i class="cuIcon-playfill color-C3C3C3"></i>
|
||
</view>
|
||
<view v-if="topTab==2" @click="topTab=1" class="exchangeBox">
|
||
<text class="font-28 color-C3C3C3">{{i18n.cycle.title1}}</text>
|
||
<i class="cuIcon-playfill color-C3C3C3"></i>
|
||
</view>
|
||
</view>
|
||
<!-- #ifdef H5 -->
|
||
<image @click="router.push('/pages/tradingView/h5?title='+(topTab==1?coinInfo.coinname:coinInfo.show_name)+'&bb_type='+coinInfo.bb_type+'&symbol='+coinInfo.symbol)" class="width-40 height-40" src="/static/imgs/transaction/tubiao@2x.png" mode=""></image>
|
||
<!-- #endif -->
|
||
<!-- #ifdef APP-PLUS -->
|
||
<image @click="router.push('/pages/tradingView/index?title='+(topTab==1?coinInfo.coinname:coinInfo.show_name)+'&bb_type='+coinInfo.bb_type+'&symbol='+coinInfo.symbol+'&close='+lastData.close)" class="width-40 height-40" src="/static/imgs/transaction/tubiao@2x.png" mode=""></image>
|
||
<!-- #endif -->
|
||
</view>
|
||
|
||
<view class="relative" :style="'background-color: '+theme.bg">
|
||
<view class="width-100b height-680 margin-c-10 padding-w-30 flex align-center justify-between">
|
||
<!-- 左侧 -->
|
||
<view class="flex-1 height-100b" style="padding: 20rpx 10rpx 20rpx 0;">
|
||
<!-- 合约交易部分 -->
|
||
<!-- 买入 卖出 -->
|
||
<view v-if="topTab==1" class="width-388 margin-0-auto flex align-center radiu-10"
|
||
style="border: 1px solid rgba(171, 171, 171, 0.2);">
|
||
<view @click="buyType='more'" :class="buyType=='more'?'leftbox':'defaultbox'">{{i18n.cycle.buyIn}}</view>
|
||
<view class="width-42 height-66 flex align-center">
|
||
<view v-if="buyType=='more'" class="triangle triangle-right"></view>
|
||
<view v-else class="triangle triangle-left"></view>
|
||
</view>
|
||
<view @click="buyType='free'" :class="buyType=='free'?'rightbox':'defaultbox'">{{i18n.cycle.sellout}}</view>
|
||
</view>
|
||
<!-- 市场交易 -->
|
||
<view v-if="topTab==1" class="width-388 height-64 margin-16-auto relative">
|
||
<view @click="marketState=!marketState" class="xialabox" :style="marketState?'z-index:10100;':'z-index:10000;'"
|
||
:class="marketState?'height-184':'height-64'">
|
||
<view class="width-100b height-64 flex align-center justify-between padding-w-15">
|
||
<text class="font-26">{{marketType=='market'?i18n.cycle.Market:i18n.cycle.LIMIT}}</text>
|
||
<i class="cuIcon-unfold"></i>
|
||
</view>
|
||
<view class="width-100b padding-w-15" :style="'background-color: '+theme.bg+';color: '+theme.text">
|
||
<view @click.stop="marketType = 'market',marketState=!marketState ,inputPirce=''" class="height-60 line-height-60 font-26">{{i18n.cycle.Market}}</view>
|
||
<view @click.stop="marketType = 'limit',marketState=!marketState" class="height-60 line-height-60 font-26">{{i18n.cycle.LIMIT}}</view>
|
||
</view>
|
||
</view>
|
||
<view @click="marketState=!marketState" v-if="marketState" class="maskBox"></view>
|
||
</view>
|
||
|
||
<!-- 当前最优价格 -->
|
||
<view v-if="topTab==1" class="width-388 height-64 margin-16-auto radiu-4 padding-w-15 flex align-center justify-between"
|
||
style="border: 1px solid rgba(171, 171, 171, 0.2);">
|
||
<text class="font-26 color-C3C3C3 medium-font">{{i18n.cycle.price}}</text>
|
||
<input class="flex-1 font-26 nummedium-font padding-w-20" type="digit" maxlength="14" :disabled="marketType=='market'?true:false" v-model="inputPirce" :placeholder="marketType=='market'?i18n.cycle.tag:i18n.cycle.tag1" placeholder-style="color:#999999;font-size:24rpx;"/>
|
||
<text class="font-26 nummedium-font">USDT</text>
|
||
</view>
|
||
<!-- 数量 -->
|
||
<view v-if="topTab==1" class="width-388 height-64 margin-16-auto radiu-4 padding-w-15 flex align-center justify-between"
|
||
style="border: 1px solid rgba(171, 171, 171, 0.2);">
|
||
<text class="font-26 color-C3C3C3 medium-font">{{i18n.cycle.num}}</text>
|
||
<input class="flex-1 font-26 nummedium-font padding-w-20" type="number" maxlength="13" v-model="inputHans" placeholder="0" placeholder-style="color:#999999;font-size:24rpx;"/>
|
||
<text class="font-26 medium-font">{{i18n.cycle.hands}}</text>
|
||
</view>
|
||
<!-- 倍数 -->
|
||
<view v-if="topTab==1" class="width-388 height-64 margin-16-auto relative">
|
||
<view @click="doubleState=!doubleState" class="xialabox1" :style="doubleState?'z-index:10100;':'z-index:10000;'"
|
||
:class="doubleState?'height-320':'height-64'">
|
||
<view class="width-388 height-64 flex align-center justify-between padding-w-15">
|
||
<text class="font-26 color-C3C3C3 medium-font margin-r-20">{{i18n.cycle.multiple}}</text>
|
||
<text :class="multiple==0?'color-999999':''" class="flex-1 font-26 nummedium-font">{{multiple}}</text>
|
||
<i class="cuIcon-unfold"></i>
|
||
</view>
|
||
<view class="padding-w-15"
|
||
:style="'background-color: '+theme.bg+';color: '+theme.text">
|
||
<view @click.stop="multiple = ite,doubleState=!doubleState" class="height-64 line-height-64 font-26 nummedium-font" v-for="(ite,idx) in setting.buy_num" :key="idx">{{ite}}</view>
|
||
</view>
|
||
</view>
|
||
<view @click="doubleState=!doubleState" v-if="doubleState" class="maskBox"></view>
|
||
</view>
|
||
|
||
<view v-if="topTab==1" class="width-388 margin-c-36">
|
||
<view class="height-42 flex align-center justify-between">
|
||
<text class="font-26 nummedium-font">1{{i18n.cycle.hands}}≈</text>
|
||
<text class="font-26 nummedium-font">{{(lastData.close||0).toFixed(coinInfo.price_jd)}} USDT</text>
|
||
</view>
|
||
<view class="height-42 flex align-center justify-between">
|
||
<text class="font-26 nummedium-font">{{i18n.cycle.available}}</text>
|
||
<text class="font-26 nummedium-font">{{Number(count_xh_usdt||0).toFixed(2)}} USDT</text>
|
||
</view>
|
||
</view>
|
||
<view v-if="topTab==1" class="width-388 margin-0-auto">
|
||
<button @click="tanView()" v-if="buyType=='more'" class="cu-btn loginBtn bj-00C481">{{i18n.cycle.long}}</button>
|
||
<button @click="tanView()" v-if="buyType=='free'" class="cu-btn loginBtn bj-FF4040">{{i18n.cycle.short}}</button>
|
||
</view>
|
||
<!-- 秒合约部分 -->
|
||
<!-- 买涨 买跌 -->
|
||
<view v-if="topTab==2" class="width-388 margin-0-auto flex align-center radiu-10"
|
||
style="border: 1px solid rgba(171, 171, 171, 0.2);">
|
||
<view @click="buyType='more'" :class="buyType=='more'?'leftbox':'defaultbox'">{{i18n.cycle.up}}</view>
|
||
<view class="width-42 height-66 flex align-center">
|
||
<view v-if="buyType=='more'" class="triangle triangle-right"></view>
|
||
<view v-else class="triangle triangle-left"></view>
|
||
</view>
|
||
<view @click="buyType='free'" :class="buyType=='free'?'rightbox':'defaultbox'">{{i18n.cycle.down}}</view>
|
||
</view>
|
||
<!-- 期号 -->
|
||
<view v-if="topTab==2" class="width-388 height-60 margin-10-auto radiu-4 flex align-center justify-between padding-w-15"
|
||
style="border: 1px solid rgba(171, 171, 171, 0.2);">
|
||
<text class="font-26">{{i18n.cycle.qihao}}：</text>
|
||
<text class="font-28 color-999999 nummedium-font">{{issue}}</text>
|
||
</view>
|
||
<!-- 预测周期 -->
|
||
<view v-if="topTab==2" class="width-388 height-60 margin-10-auto radiu-4 flex align-center justify-between padding-w-15"
|
||
style="border: 1px solid rgba(171, 171, 171, 0.2);">
|
||
<text class="font-26">{{i18n.cycle.zhouqi}}：</text>
|
||
<text class="font-28 color-999999 nummedium-font">{{cycle_con}}</text>
|
||
</view>
|
||
<!-- 本期截止 -->
|
||
<view v-if="topTab==2" class="width-388 height-60 margin-10-auto radiu-4 flex align-center justify-between padding-w-15 relative"
|
||
style="border: 1px solid rgba(171, 171, 171, 0.2);">
|
||
<text class="font-26">{{i18n.cycle.jiezhi}}：</text>
|
||
<u-count-down @change="daojishiTime" ref="uCountDown" @end="endTime" class="nummedium-font" :bg-color="theme.bg"
|
||
color="#FF4040" font-size="28" separator-color="#FF4040" :timestamp="timestamp" style="opacity: 0;"></u-count-down>
|
||
<view v-if="zhunbei" class="absolute height-50 width-180 line-height-50 text-right" style="right: 10rpx;z-index: 100;top: 5rpx;" :style="'background-color: '+theme.bg">
|
||
<text class="font-26 color-FF4040 nummedium-font">{{i18n.cycle.zhunbei}}</text>
|
||
</view>
|
||
<view v-if="jiesuan" class="absolute height-50 width-180 line-height-50 text-right" style="right: 10rpx;z-index: 100;top: 5rpx;" :style="'background-color: '+theme.bg">
|
||
<text class="font-26 color-FF4040 nummedium-font">{{i18n.cycle.jiesuan}}</text>
|
||
</view>
|
||
<view v-if="!jiesuan&&!zhunbei&×tamp1!=0" class="absolute height-50 width-180 line-height-50 text-right" style="right: 10rpx;z-index: 100;top: 5rpx;" :style="'background-color: '+theme.bg">
|
||
<u-count-down class="nummedium-font" :bg-color="theme.bg"
|
||
color="#FF4040" font-size="28" separator-color="#FF4040" :timestamp="timestamp1"></u-count-down>
|
||
</view>
|
||
</view>
|
||
|
||
<!-- 开仓数量 -->
|
||
<view v-if="topTab==2" class="width-388 height-60 margin-10-auto radiu-4 padding-w-15 flex align-center justify-between"
|
||
style="border: 1px solid rgba(171, 171, 171, 0.2);">
|
||
<text class="font-26">{{i18n.cycle.open}}</text>
|
||
<input class="flex-1 text-right font-26 line-height-60 nummedium-font" type="text" v-model="riseNumber" :placeholder="i18n.cycle.openInput" placeholder-style="font-size:24rpx"/>
|
||
</view>
|
||
<!-- 开仓类型 -->
|
||
<view v-if="topTab==2" class="width-388 height-152 flex flex-wrap justify-between">
|
||
<view @click="selectriseTime(item)" :class="riseTime==item?theme.selectcolor:''" class="width-120 height-68 radiu-8 margin-c-4 flex direction-column align-center justify-center"
|
||
v-for="(item,index) in coinInfo.trade_time" :key="index" style="border: 1px solid rgba(171, 171, 171, 0.2);">
|
||
<text :class="riseTime==item?'color-white':''" class="font-24 weight-bold numbold-font">{{item/60}} m</text>
|
||
<text :class="riseTime==item?theme.color:'color-999999'" class="font-22 nummedium-font">{{Number(coinInfo.winpl*100).toFixed(2)}} %</text>
|
||
</view>
|
||
</view>
|
||
|
||
<view v-if="topTab==2" class="width-388" style="margin: 10rpx auto;">
|
||
<!-- <view class="height-42 flex align-center justify-between">
|
||
<text class="font-26 nummedium-font">{{i18n.cycle.rate}}</text>
|
||
<text class="font-26 nummedium-font">{{Number(coinInfo.winpl*100).toFixed(2)}} %</text>
|
||
</view> -->
|
||
<view class="height-42 flex align-center justify-between">
|
||
<text class="font-26 nummedium-font">{{i18n.cycle.available}}</text>
|
||
<text class="font-26 nummedium-font">{{Number(count_xh_usdt||0).toFixed(4)}} USDT</text>
|
||
</view>
|
||
</view>
|
||
<view v-if="topTab==2" class="width-388 margin-0-auto">
|
||
<button @click="buyRise('rise')" v-if="buyType=='more'" class="cu-btn loginBtn bj-00C481">{{i18n.cycle.up}}</button>
|
||
<button @click="buyRise('fall')" v-if="buyType=='free'" class="cu-btn loginBtn bj-FF4040">{{i18n.cycle.down}}</button>
|
||
</view>
|
||
</view>
|
||
<!-- 右侧 -->
|
||
<view class="flex-1 height-100b" style="padding: 20rpx 0 20rpx 10rpx;">
|
||
<view class="width-272 margin-0-auto flex align-center justify-between">
|
||
<view class="flex-1 font-26 color-C3C3C3 text-left">{{i18n.cycle.price}}</view>
|
||
<view class="flex-1 font-26 color-C3C3C3 text-right">{{i18n.cycle.volume}}</view>
|
||
</view>
|
||
<view class="width-272 height-260 margin-10-auto flex" style="flex-direction: column-reverse;">
|
||
<view v-if="index<5" class="height-52 flex align-center nummedium-font relative"
|
||
v-for="(item,index) in tick.asks">
|
||
<view class="flex-1 font-24 color-FF4040 text-left hidden-nowrap-ellipsis-1">
|
||
{{Number(item[0]).toFixed(coinInfo.price_jd)}}</view>
|
||
<view class="flex-1 font-24 color-C3C3C3 text-right hidden-nowrap-ellipsis-1">
|
||
{{item[1] | numFilter}}</view>
|
||
<view class="progress bj-FFEBEB" :style="'width:'+ dethWidth(index,item[1],tick.asks) +'%;'"></view>
|
||
</view>
|
||
</view>
|
||
<view v-if="lastData.close" class="width-272 margin-10-auto text-right">
|
||
<text class="font-28 nummedium-font color-FF4040">{{Number(lastData.close).toFixed(coinInfo.price_jd)}}</text>
|
||
<text class="font-26 numbold-font margin-l-10">USDT</text>
|
||
</view>
|
||
<view class="width-272 margin-10-auto">
|
||
<view v-if="index<5" class="height-52 flex align-center nummedium-font relative"
|
||
v-for="(item,index) in tick.bids">
|
||
<view class="flex-1 font-24 color-00C481 text-left hidden-nowrap-ellipsis-1">
|
||
{{Number(item[0]).toFixed(coinInfo.price_jd)}}</view>
|
||
<view class="flex-1 font-24 color-C3C3C3 text-right hidden-nowrap-ellipsis-1">
|
||
{{item[1] | numFilter}}</view>
|
||
<view class="progress bj-E5F9F2" :style="'width:'+ dethWidth(index,item[1],tick.bids) +'%;'"></view>
|
||
</view>
|
||
</view>
|
||
</view>
|
||
</view>
|
||
<!-- 合约交易tab选择 -->
|
||
<view v-show="topTab==1" class="width-100b height-72 padding-w-40 flex align-center justify-between">
|
||
<view @click="tabsChange1(index)" class="flex-1 height-46 flex direction-column align-center justify-between" v-for="(item,index) in tablist1" :key="index">
|
||
<text :class="current1==index?'bold-font':'color-C3C3C3 medium-font'" class="font-28">{{item}}</text>
|
||
<view :style="current1==index?'':'visibility: hidden;'" class="heng"></view>
|
||
</view>
|
||
</view>
|
||
<!-- 秒合约交易tab选择 -->
|
||
<view v-show="topTab==2" class="width-100b height-72 padding-w-40 flex align-center justify-between">
|
||
<view @click="tabsChange2(index)" class="flex-1 height-46 flex direction-column align-center justify-between" v-for="(item,index) in tablist2" :key="index">
|
||
<text :class="current2==index?'bold-font':'color-C3C3C3 medium-font'" class="font-28">{{item}}</text>
|
||
<view :style="current2==index?'':'visibility: hidden;'" class="heng"></view>
|
||
</view>
|
||
</view>
|
||
</view>
|
||
|
||
<!-- 合约交易列表 -->
|
||
<!-- swiper必须设置flex:1，因为swiper有默认的高度，只有设置flex:1才可以铺满页面 -->
|
||
<swiper v-show="topTab==1" :class="contractOrderList.length>2?'swiper':'swiper_no'" :current="current1" @animationfinish="animationfinish1"
|
||
@change="onswiperchange1">
|
||
<swiper-item v-for="(item,index) in tablist1" class="swiper-item" style="height: 100%;">
|
||
<scroll-view scroll-y="true" style="height: 100%;" @scrolltolower="pullTorefresh">
|
||
<contractListItem @setCheck="setCheck" @revocation="revocation" @closeOut="closeOut" :price_jd="coinInfo.price_jd"
|
||
:loading="loading" :currentIndex="current1" :list="contractOrderList" :nowPrice="lastData.close" :shizhi="Number(setting.shizhi)"
|
||
:color="theme.text" :background="theme.bg"></contractListItem>
|
||
</scroll-view>
|
||
</swiper-item>
|
||
</swiper>
|
||
<!-- 秒合约交易列表 -->
|
||
<swiper v-show="topTab==2" :class="contractOrderList_s.length>2?'swiper':'swiper_no'" :current="current2" @animationfinish="animationfinish2"
|
||
@change="onswiperchange2">
|
||
<swiper-item v-for="(item,index) in tablist2" class="swiper-item" style="height: 100%;">
|
||
<scroll-view scroll-y="true" style="height: 100%;" @scrolltolower="pullTorefresh_s">
|
||
<secondListItem @timeOut="timeOut" :currentIndex="current2" :loading="loading_s"
|
||
:list="contractOrderList_s" :nowPrice="lastData.close"
|
||
:color="theme.text" :background="theme.bg"></secondListItem>
|
||
</scroll-view>
|
||
</swiper-item>
|
||
</swiper>
|
||
</z-paging>
|
||
<!-- 左侧弹出 -->
|
||
<u-popup v-model="leftshow" mode="left" border-radius="30">
|
||
<view v-if="topTab==1" class="width-600"
|
||
:style="'background-color: '+theme.bg+';color: '+theme.text"
|
||
style="padding: 70rpx 0rpx;height:100%;display: flex;flex-direction: column;">
|
||
<view class="height-110 flex align-center padding-w-30">
|
||
<text class="font-32 bold-font">{{i18n.newWord.Trading}}</text>
|
||
</view>
|
||
<view class="width-550 height-70 margin-12-auto radiu-36 flex align-center padding-w-22"
|
||
style="border: 1px solid rgba(191, 195, 199, 0.2);">
|
||
<u-icon name="search" color="#C3C3C3" size="28"></u-icon>
|
||
<input @input="searchCion" confirm-type="search"
|
||
class="padding-l-13 flex-1 font-26 line-height-70" type="text"
|
||
:placeholder="i18n.index.tos1" v-model="searchVal" placeholder-style="font-size:26rpx;"/>
|
||
</view>
|
||
<view class="height-78 padding-w-30 flex align-center justify-between">
|
||
<view @click="leftcurrent=1,setTimeLeft()" class="flex-1 height-60 flex direction-column align-center justify-center">
|
||
<text :class="leftcurrent==1?'':'color-C3C3C3'" class="font-30">{{i18n.newWord.all}}</text>
|
||
<view :style="leftcurrent==1?'':'visibility: hidden;'" class="heng"></view>
|
||
</view>
|
||
<view @click="leftcurrent=2,setTimeLeft()" class="flex-1 height-60 flex direction-column align-center justify-center">
|
||
<text :class="leftcurrent==2?'':'color-C3C3C3'" class="font-30">{{i18n.newWord.self}}</text>
|
||
<view :style="leftcurrent==2?'':'visibility: hidden;'" class="heng"></view>
|
||
</view>
|
||
</view>
|
||
<scroll-view scroll-y="true" style="overflow: scroll;flex: 1;">
|
||
<view v-if="leftcurrent==1" class="padding-w-30">
|
||
<view @click="changeCoin(index,1)" class="width-100b height-78 flex align-center justify-between" v-for="(item,index) in midList" :key="index" style="border-bottom: 1rpx solid rgba(191, 195, 199, 0.2);">
|
||
<view class="flex align-center">
|
||
<view @click.stop="collectCoin(item.symbol,index,1)" class="height-78 flex align-center justify-center">
|
||
<image class="width-24 height-23" :src="item.is_sc?'/static/imgs/transaction/star_on@2x.png':'/static/imgs/transaction/star_off@2x.png'" mode=""></image>
|
||
<image class="width-36 height-36 margin-w-10" :src="item.logo_image" mode=""></image>
|
||
</view>
|
||
<text class="font-28 nummedium-font">{{item.name}}<span class="font-26 color-C3C3C3 nummedium-font">/USDT</span></text>
|
||
</view>
|
||
<text class="font-28 nummedium-font">
|
||
{{coinInfo.name==item.name&&lastData.close? (Number(lastData.close||0).toFixed(item.price_jd)) : Number(item.close).toFixed(item.price_jd)}}</text>
|
||
<text v-if="coinInfo.name==item.name&&lastData.close" class="font-28 nummedium-font"
|
||
:class="zhangdie>=0?'color-00C481':'color-FF4040'">{{zhangdie}}%</text>
|
||
<text v-else class="font-28 nummedium-font"
|
||
:class="item.increase>0?'color-00C481':'color-FF4040'">{{Number(item.increase*100).toFixed(2)}}%</text>
|
||
</view>
|
||
</view>
|
||
<view v-if="leftcurrent==2" class="padding-w-30">
|
||
<view @click="changeCoin(index,2)" class="width-100b height-78 flex align-center justify-between" v-for="(item,index) in myCoinList" :key="index" style="border-bottom: 1rpx solid rgba(191, 195, 199, 0.2);">
|
||
<view class="flex align-center">
|
||
<view @click.stop="collectCoin(item.symbol,index,2)" class="height-78 flex align-center justify-center">
|
||
<image class="width-24 height-23" src="/static/imgs/transaction/star_on@2x.png" mode=""></image>
|
||
<image class="width-36 height-36 margin-w-10" :src="item.logo_image" mode=""></image>
|
||
</view>
|
||
<text class="font-28 nummedium-font">{{item.name}}<span class="font-26 color-C3C3C3 nummedium-font">/USDT</span></text>
|
||
</view>
|
||
<text class="font-28 nummedium-font">
|
||
{{coinInfo.name==item.name&&lastData.close? (Number(lastData.close||0).toFixed(item.price_jd)) : Number(item.close).toFixed(item.price_jd)}}</text>
|
||
<text v-if="coinInfo.name==item.name&&lastData.close" class="font-28 nummedium-font"
|
||
:class="zhangdie>=0?'color-00C481':'color-FF4040'">{{zhangdie}}%</text>
|
||
<text v-else class="font-28 nummedium-font"
|
||
:class="item.increase>0?'color-00C481':'color-FF4040'">{{Number(item.increase*100).toFixed(2)}}%</text>
|
||
</view>
|
||
<view v-if="myCoinList.length==0"
|
||
class="width-100b padding-c-50 flex direction-column align-center justify-center">
|
||
<text class="font-28 nummedium-font color-C3C3C3">{{i18n.lever.nodata}}</text>
|
||
</view>
|
||
</view>
|
||
</scroll-view>
|
||
</view>
|
||
<view v-if="topTab==2" class="width-600"
|
||
:style="'background-color: '+theme.bg+';color: '+theme.text"
|
||
style="padding: 70rpx 0rpx;height:100%;display: flex;flex-direction: column;">
|
||
<view class="height-110 flex align-center padding-w-30">
|
||
<text class="font-32 bold-font">{{i18n.newWord.Trading}}</text>
|
||
</view>
|
||
<scroll-view scroll-y="true" style="overflow: scroll;flex: 1;">
|
||
<view class="padding-w-30">
|
||
<view @click="changeCoin(index,1)" class="width-100b height-78 flex align-center justify-between" v-for="(item,index) in midList" :key="index" style="border-bottom: 1rpx solid rgba(191, 195, 199, 0.2);">
|
||
<view class="flex align-center">
|
||
<image class="width-36 height-36 margin-w-10" :src="item.logo_image" mode=""></image>
|
||
<text class="font-28 nummedium-font">{{item.name}}<span class="font-26 color-C3C3C3 nummedium-font">/USDT</span></text>
|
||
</view>
|
||
<text class="font-28 nummedium-font">
|
||
{{coinInfo.name==item.name&&lastData.close? (Number(lastData.close||0).toFixed(item.price_jd)) : Number(item.close).toFixed(item.price_jd)}}</text>
|
||
<text v-if="coinInfo.name==item.name&&lastData.close" class="font-28 nummedium-font"
|
||
:class="zhangdie>=0?'color-00C481':'color-FF4040'">{{zhangdie}}%</text>
|
||
<text v-else class="font-28 nummedium-font"
|
||
:class="item.increase>0?'color-00C481':'color-FF4040'">{{Number(item.increase*100).toFixed(2)}}%</text>
|
||
</view>
|
||
</view>
|
||
</scroll-view>
|
||
</view>
|
||
</u-popup>
|
||
|
||
<!-- 中间弹窗 -->
|
||
<u-popup v-model="centerShow" mode="center" border-radius="20">
|
||
<view class="width-600" :style="'background-color: '+theme.bg+';color: '+theme.text">
|
||
<view class="height-100 flex align-center justify-center">
|
||
<text class="font-32 bold-font">{{i18n.cycle.set}}</text>
|
||
</view>
|
||
<view class="padding-w-20">
|
||
<view class="height-96 line-height-96 padding-w-32">
|
||
<text class="font-30 bold-font">{{i18n.cycle.surplus}}</text>
|
||
</view>
|
||
<input class="inputbox" :style="'background-color: '+theme.fu_bg+';color: '+theme.text"
|
||
type="number" v-model="zy_price" :placeholder="i18n.cycle.setProfit"/>
|
||
</view>
|
||
<view class="padding-w-20">
|
||
<view class="height-96 line-height-96 padding-w-32">
|
||
<text class="font-30 bold-font">{{i18n.cycle.loss}}</text>
|
||
</view>
|
||
<input class="inputbox" :style="'background-color: '+theme.fu_bg+';color: '+theme.text"
|
||
type="number" v-model="zs_price" :placeholder="i18n.cycle.setLoss"/>
|
||
</view>
|
||
<view class="width-100b height-96 margin-t-50 line-height-96 font-30 flex align-center justify-between">
|
||
<view @click="centerShow=false" class="flex-1 color-white text-center" style="background-color: #D1D3D8;border-radius: 0rpx 0rpx 0rpx 20rpx;">
|
||
{{i18n.cycle.quxiao}}</view>
|
||
<view @click="set_contract()" class="flex-1 color-white text-center bj-0165EE" style="border-radius: 0rpx 0rpx 20rpx 0rpx;">
|
||
{{i18n.cycle.queding}}</view>
|
||
</view>
|
||
</view>
|
||
</u-popup>
|
||
|
||
<!-- 实名认证弹窗 -->
|
||
<u-popup style="z-index: 10100;" border-radius="18" mode="center" v-model="TSShow">
|
||
<view class="width-600 padding-b-20"
|
||
:style="'background-color: '+theme.bg+';color: '+theme.text">
|
||
<view class="width-100b height-220 padding-w-30 padding-c-40 flex direction-column align-center justify-between">
|
||
<image class="width-64 height-64" src="/static/imgs/quantify/tongzhi@2x.png" mode=""></image>
|
||
<view class="font-28 bold-font text-center padding-w-20">{{shimingTitle}}</view>
|
||
</view>
|
||
<view class="width-100b height-90 flex align-center justify-center">
|
||
<view @click="router.push('/pages/my/safety/real')" class="qcbtn3">{{i18n.cycle.shiming}}</view>
|
||
</view>
|
||
</view>
|
||
</u-popup>
|
||
|
||
<!-- 期权弹窗 -->
|
||
<u-popup style="z-index: 10100;" border-radius="18" mode="center" v-model="QQShow">
|
||
<view class="width-600 padding-b-20"
|
||
:style="'background-color: '+theme.bg+';color: '+theme.text">
|
||
<view class="padding-c-20 flex align-center justify-center">
|
||
<image class="width-64 height-64" src="/static/imgs/quantify/tongzhi@2x.png" mode=""></image>
|
||
</view>
|
||
<view class="width-100b padding-w-20" v-html="open_qq_text"></view>
|
||
<view class="width-100b height-90 flex align-center justify-center">
|
||
<view @click="router.push('/pages/asset/transfer?rightid=4')" class="qcbtn3">前往开通</view>
|
||
</view>
|
||
</view>
|
||
</u-popup>
|
||
|
||
<u-popup style="z-index: 10100;" border-radius="10" mode="center" v-model="showView">
|
||
<view class="width-540 padding-40"
|
||
:style="'background-color: '+theme.bg+';color: '+theme.text">
|
||
<view class="padding-c-30">
|
||
<view class="height-60 flex align-center justify-between">
|
||
<text class="font-28 color-C3C3C3 nummedium-font">{{i18n.cycle.jiaoyi}}:</text>
|
||
<text class="font-28 nummedium-font">{{(lastData.close * inputHans) | numFilter}} USDT</text>
|
||
</view>
|
||
<view class="height-60 flex align-center justify-between">
|
||
<text class="font-28 color-C3C3C3 nummedium-font">{{i18n.cycle.margin}}:</text>
|
||
<view v-if="marketType=='market'&&lastData.close" class="font-28 nummedium-font">{{(setting.promise_price * lastData.close * 100 * inputHans / (multiple||1)) | numFilter}} USDT</view>
|
||
<view v-if="marketType=='limit'" class="font-28 nummedium-font">{{(setting.promise_price * inputPirce) | numFilter}} USDT</view>
|
||
</view>
|
||
<view class="height-60 flex align-center justify-between">
|
||
<text class="font-28 color-C3C3C3 nummedium-font">{{i18n.cycle.service}}:</text>
|
||
<view v-if="marketType=='market'&&lastData.close" class="font-28 nummedium-font">{{(setting.contract_fee * setting.promise_price * lastData.close * 100 * inputHans / (multiple||1)) | numFilter}} USDT</view>
|
||
<view v-if="marketType=='limit'" class="font-28 nummedium-font">{{(setting.contract_fee * setting.promise_price * inputPirce) | numFilter}} USDT</view>
|
||
</view>
|
||
</view>
|
||
<view class="width-466 margin-0-auto flex align-center justify-center">
|
||
<button @click="buy_contract()" class="cu-btn loginBtn bj-0165EE" style="width: 466rpx;border-radius: 10rpx;height: 86rpx;">{{i18n.cycle.confirm}}</button>
|
||
</view>
|
||
</view>
|
||
</u-popup>
|
||
|
||
</view>
|
||
</template>
|
||
|
||
<script>
|
||
import contractListItem from './components/contract_list_item.vue'
|
||
import secondListItem from './components/second_list_item.vue'
|
||
export default {
|
||
components: {
|
||
contractListItem,
|
||
secondListItem,
|
||
},
|
||
data() {
|
||
return {
|
||
count_xh_usdt:0, //合约可用剩余usdt
|
||
second_usdt:0, //秒合约可用剩余usdt
|
||
midList:[], //左侧币种列表
|
||
midList_copy:[],
|
||
coinInfo:{}, //选中的当前币种信息
|
||
setting:[], //保证金 手续费 倍数 余额 相关设置
|
||
|
||
buyType:'more', //买涨买跌类型
|
||
marketState: false,
|
||
marketType:'market', //交易类型 market=市场交易 limit=限价交易
|
||
|
||
doubleState:false,
|
||
multiple:0,//倍数
|
||
|
||
inputPirce:'',//当前最优价格
|
||
inputHans:'',//数量 手
|
||
|
||
statusBar: uni.getSystemInfoSync().statusBarHeight,
|
||
topTab:1,//顶部选项 1=合约交易 2=秒合约
|
||
leftshow:false, //左侧弹窗开关
|
||
centerShow:false, //止盈止损弹窗开关
|
||
zy_price:'',//止盈价格
|
||
zs_price:'',//止损价格
|
||
|
||
tablist1:['当前委托','合约持仓','已平仓','已撤销'],
|
||
current1:0,
|
||
|
||
contract_id:'',//选中的合约订单ID
|
||
contractOrderList:[], //合约交易订单列表
|
||
state:'more',
|
||
page:1,
|
||
loading:true,
|
||
|
||
// 秒合约
|
||
tablist2:['交易中','已平仓'],
|
||
current2:0,
|
||
|
||
riseNumber:'', //开仓数量
|
||
riseTime: '', //开仓时间
|
||
|
||
contractOrderList_s:[], //秒合约交易订单列表
|
||
state_s:'more',
|
||
page_s:1,
|
||
loading_s:true,
|
||
|
||
BtnFlag:true, //按钮防重复点击
|
||
TSShow:false,
|
||
shimingTitle:'请先完成实名认证',
|
||
|
||
// socket
|
||
lastData:'',
|
||
tick:"",
|
||
|
||
leftcurrent:1,
|
||
searchVal:'',
|
||
myCoinList:[],
|
||
myCoinList_copy:[],
|
||
showView:false,
|
||
|
||
theme: '',
|
||
timestamp:0,
|
||
timestamp1:0,
|
||
unsettledTimer:null,
|
||
|
||
QQShow:false,
|
||
open_qq_text:'',
|
||
cycle_con:'',
|
||
issue:'',
|
||
cycle:'',//当前周期时间
|
||
|
||
zhunbei:false,
|
||
jiesuan:false
|
||
}
|
||
},
|
||
computed: {
|
||
i18n() {
|
||
return this.$t('message');
|
||
},
|
||
zhangdie() {
|
||
if (this.lastData.close) {
|
||
let increase = Number(this.lastData.close) - Number(this.coinInfo.open)
|
||
return Number(increase / Number(this.coinInfo.open) * 100).toFixed(2)
|
||
} else {
|
||
return 0
|
||
}
|
||
},
|
||
},
|
||
watch:{
|
||
current1(oldValue,newValue){
|
||
if(oldValue != newValue){
|
||
this.refresh_list()
|
||
}
|
||
},
|
||
current2(oldValue,newValue){
|
||
if(oldValue != newValue){
|
||
this.refresh_list()
|
||
}
|
||
},
|
||
topTab(item){
|
||
if(item == 1){
|
||
clearInterval(this.unsettledTimer)
|
||
this.getLeft(this.coinInfo.symbol)
|
||
}
|
||
if(item == 2){
|
||
this.getMore()
|
||
}
|
||
},
|
||
leftshow(item){
|
||
if(item==false){
|
||
this.searchVal = ''
|
||
clearInterval(this.lefttiming)
|
||
}else{
|
||
this.setTimeLeft()
|
||
}
|
||
}
|
||
},
|
||
filters:{
|
||
//过滤数字位数
|
||
numFilter(item){
|
||
if (item == undefined || item == null) {
|
||
return 0;
|
||
} else {
|
||
if(Number(item) < 10){
|
||
return Number(item).toFixed(6);
|
||
}else if (Number(item) >= 10 && Number(item) < 1000) {
|
||
return Number(item).toFixed(4);
|
||
} else if (Number(item) >= 1000 && Number(item) < 1000000) {
|
||
return (Number(item) / 1000).toFixed(4) + ' K';
|
||
} else if (Number(item) >= 1000000 && Number(item) < 10000000000) {
|
||
return (Number(item) / 1000000).toFixed(2) + ' M';
|
||
} else {
|
||
return (Number(item) / 10000000000).toFixed(2) + ' B';
|
||
}
|
||
}
|
||
},
|
||
},
|
||
onLoad:function(){
|
||
this.getLeft()
|
||
},
|
||
onShow() {
|
||
if (uni.getStorageSync("theme") == "dark") {
|
||
this.theme = this.$store.state.darkTheme
|
||
} else {
|
||
this.theme = this.$store.state.lightTheme
|
||
}
|
||
if(getApp().globalData.symbol == ''){
|
||
getApp().globalData.symbol = this.coinInfo.symbol
|
||
console.log(getApp().globalData.symbol )
|
||
}
|
||
this.onSocketMessage()
|
||
this.linkSocket() //链接socket订阅
|
||
this.tablist1 = this.i18n.cycle.tablist1
|
||
this.tablist2 = this.i18n.cycle.tablist2
|
||
|
||
this.TSShow = false
|
||
this.getWallet()
|
||
if(this.topTab == 2){
|
||
this.getCycle(this.riseTime)
|
||
if(this.current2==0){
|
||
this.unsettledTimer = setInterval(()=>{
|
||
this.get_Second_order()
|
||
},2000)
|
||
}
|
||
}
|
||
uni.$on('reConnect', (res) => {
|
||
console.log("重连WebSocket")
|
||
this.onSocketMessage()
|
||
})
|
||
},
|
||
onHide :function(){
|
||
clearInterval(this.unsettledTimer)
|
||
getApp().globalData.symbol = ""
|
||
uni.$off('reConnect')
|
||
this.cancelSocket() //取消socket订阅
|
||
},
|
||
methods: {
|
||
daojishiTime(time){
|
||
console.log(time)
|
||
if(time <= 5){
|
||
this.jiesuan = true
|
||
}else if(this.cycle - time > 45){
|
||
this.zhunbei = true
|
||
}else{
|
||
this.zhunbei = false
|
||
this.jiesuan = false
|
||
}
|
||
},
|
||
endTime(){
|
||
this.timestamp1 = 0
|
||
this.jiesuan = false
|
||
this.zhunbei = false
|
||
// this.tos('倒计时结束')
|
||
this.getCycle(this.riseTime)
|
||
},
|
||
selectriseTime(item){
|
||
this.jiesuan = false
|
||
this.riseTime = item
|
||
this.getCycle(this.riseTime)
|
||
},
|
||
getCycle(cycle){
|
||
this.post('/cycle/get_cycle_stage',{
|
||
cycle:cycle
|
||
}).then((res) => {
|
||
console.log('周期',res)
|
||
if (res.code == 1) {
|
||
this.timestamp = res.data.daojishi
|
||
this.cycle = res.data.cycle
|
||
this.open_qq_text = res.data.open_qq_text
|
||
if(res.data.is_qq == 1){
|
||
this.QQShow = false
|
||
}else{
|
||
this.QQShow = true
|
||
}
|
||
|
||
if(res.data.daojishi <= 5){
|
||
this.jiesuan = true
|
||
}else if(this.cycle - res.data.daojishi > 45){
|
||
this.zhunbei = true
|
||
}else{
|
||
if(this.cycle==60){
|
||
this.timestamp1 = res.data.daojishi - 15
|
||
}else{
|
||
this.timestamp1 = 45 - (this.cycle - res.data.daojishi)
|
||
}
|
||
}
|
||
|
||
this.cycle_con = res.data.cycle_con
|
||
this.issue = res.data.issue
|
||
setTimeout(()=>{
|
||
this.$refs.uCountDown.start();
|
||
},0)
|
||
}else{
|
||
this.getCycle(cycle)
|
||
}
|
||
}).catch(()=>{
|
||
this.getCycle(cycle)
|
||
})
|
||
},
|
||
// 收藏币种
|
||
collectCoin(symbol,index,type){
|
||
this.post('/my/collect_rate',{
|
||
symbol:symbol
|
||
}).then((res) => {
|
||
console.log('收藏成功',res)
|
||
if (res.code == 1) {
|
||
if(type==1){
|
||
this.midList[index].is_sc = !this.midList[index].is_sc
|
||
}
|
||
if(type==2){
|
||
this.myCoinList.splice(index,1)
|
||
}
|
||
}
|
||
})
|
||
},
|
||
setTimeLeft(){
|
||
if(this.topTab==1){
|
||
this.getLeft(this.coinInfo.symbol)
|
||
this.getmy_coinList()
|
||
clearInterval(this.lefttiming)
|
||
if(this.leftcurrent==1){
|
||
this.lefttiming = setInterval(()=>{
|
||
this.getLeft(this.coinInfo.symbol)
|
||
},3000)
|
||
}
|
||
if(this.leftcurrent==2){
|
||
this.lefttiming = setInterval(()=>{
|
||
this.getmy_coinList()
|
||
},3000)
|
||
}
|
||
}
|
||
if(this.topTab==2){
|
||
this.getMore()
|
||
}
|
||
},
|
||
searchCion(){
|
||
if(this.leftcurrent==1){
|
||
if(this.searchVal==''){
|
||
this.getLeft(this.coinInfo.symbol)
|
||
}
|
||
let arrtemp = []
|
||
this.midList_copy.forEach((item)=>{
|
||
if(item.name.indexOf(this.searchVal.toUpperCase()) != '-1'){
|
||
arrtemp.push(item)
|
||
}
|
||
})
|
||
this.midList = arrtemp
|
||
}
|
||
if(this.leftcurrent==2){
|
||
if(this.searchVal==''){
|
||
this.getmy_coinList()
|
||
}
|
||
let arrtemp = []
|
||
this.myCoinList_copy.forEach((item)=>{
|
||
if(item.name.indexOf(this.searchVal.toUpperCase()) != '-1'){
|
||
arrtemp.push(item)
|
||
}
|
||
})
|
||
this.myCoinList = arrtemp
|
||
}
|
||
},
|
||
onRefresh() {
|
||
console.log('下拉刷新');
|
||
clearInterval(this.unsettledTimer)
|
||
if(this.topTab==1){
|
||
this.getLeft(this.coinInfo.symbol)
|
||
}
|
||
if(this.topTab==2){
|
||
this.getMore()
|
||
}
|
||
this.getWallet()
|
||
setTimeout(()=>{
|
||
this.$refs.paging.complete();
|
||
}, 1500);
|
||
},
|
||
getWallet(){
|
||
this.post('/wallet/wallet_index').then((res) => {
|
||
// console.log('我的资产',res)
|
||
if (res.code == 1) {
|
||
this.count_xh_usdt = res.data.all.usdt_num
|
||
}
|
||
})
|
||
},
|
||
// 下拉加载更多
|
||
pullTorefresh(){
|
||
if (this.state == 'over') return
|
||
if (this.loading == true) return
|
||
console.log('下拉加载更多')
|
||
this.page++
|
||
this.get_contract()
|
||
},
|
||
// 下拉加载更多
|
||
pullTorefresh_s(){
|
||
if (this.current2 == 0) return
|
||
console.log('下拉加载更多')
|
||
if (this.state_s == 'over') return
|
||
if (this.loading_s == true) return
|
||
this.page_s++
|
||
this.get_Second_order()
|
||
},
|
||
// 刷新重置订单列表
|
||
refresh_list(){
|
||
if(this.topTab==1){
|
||
this.contractOrderList = []
|
||
this.page = 1
|
||
this.state = 'more'
|
||
this.get_contract()
|
||
}
|
||
if(this.topTab==2){
|
||
this.contractOrderList_s = []
|
||
this.page_s = 1
|
||
this.state_s = 'more'
|
||
this.get_Second_order()
|
||
if(this.current2==0){
|
||
this.unsettledTimer = setInterval(()=>{
|
||
this.get_Second_order()
|
||
},2000)
|
||
}
|
||
}
|
||
},
|
||
// 获取合约交易订单列表
|
||
get_contract(){
|
||
if (this.state == 'over') return
|
||
this.loading = true
|
||
this.state = 'loading'
|
||
this.post('/contract/get_contract', {
|
||
page: this.page,
|
||
symbol:this.coinInfo.symbol,
|
||
status:this.current1
|
||
}).then(res => {
|
||
console.log('合约交易订单列表',res)
|
||
if (res.code == 1) {
|
||
setTimeout(()=>{
|
||
this.loading = false
|
||
this.contractOrderList = this.contractOrderList.concat(res.data.data)
|
||
if (this.page >= res.data.last_page) {
|
||
this.state = 'over'
|
||
}
|
||
}, 500)
|
||
}
|
||
})
|
||
},
|
||
// 获取秒合约交易订单列表
|
||
get_Second_order(){
|
||
if(this.current2 == 0){
|
||
// this.loading_s = true
|
||
this.post('/cycle/get_order',{
|
||
symbol:this.coinInfo.symbol,
|
||
}).then(res => {
|
||
console.log('秒合约——交易中——订单列表',res)
|
||
if (res.code == 1) {
|
||
this.loading_s = false
|
||
this.contractOrderList_s = res.data
|
||
}
|
||
})
|
||
}
|
||
if(this.current2 == 1){
|
||
clearInterval(this.unsettledTimer)
|
||
if (this.state_s == 'over') return
|
||
this.loading_s = true
|
||
this.state_s = 'loading'
|
||
this.post('/cycle/get_all_order', {
|
||
page: this.page_s,
|
||
symbol:this.coinInfo.symbol,
|
||
}).then(res => {
|
||
console.log('秒合约——已平仓——订单列表',res)
|
||
if (res.code == 1) {
|
||
setTimeout(()=>{
|
||
this.loading_s = false
|
||
this.contractOrderList_s = this.contractOrderList_s.concat(res.data.data)
|
||
if (this.page_s >= res.data.last_page) {
|
||
this.state_s = 'over'
|
||
}
|
||
}, 500)
|
||
}
|
||
})
|
||
}
|
||
},
|
||
// 平仓倒计时结束
|
||
timeOut(){
|
||
clearInterval(this.unsettledTimer)
|
||
this.current2=1
|
||
this.getWallet()
|
||
},
|
||
dethWidth(index,item,list) {
|
||
var temp = 0
|
||
let num = list.length
|
||
if(num==0) return
|
||
if(num>5){
|
||
num = 5
|
||
}
|
||
for (var i = 0; i < num; i++) {
|
||
temp += Number(list[i][1])
|
||
}
|
||
return (item / temp).toFixed(2) * 100
|
||
},
|
||
|
||
// tabs通知swiper切换
|
||
tabsChange1(index) {
|
||
this.current1 = index;
|
||
},
|
||
onswiperchange1(e) {
|
||
// #ifndef APP-PLUS || H5 || MP-WEIXIN || MP-QQ
|
||
let index = e.target.current || e.detail.current;
|
||
this.tabsChange1(index);
|
||
// #endif
|
||
},
|
||
animationfinish1(e) {
|
||
let current = e.detail.current;
|
||
this.current1 = current;
|
||
},
|
||
// tabs通知swiper切换
|
||
tabsChange2(index) {
|
||
this.current2 = index;
|
||
},
|
||
onswiperchange2(e) {
|
||
// #ifndef APP-PLUS || H5 || MP-WEIXIN || MP-QQ
|
||
let index = e.target.current || e.detail.current;
|
||
this.tabsChange2(index);
|
||
// #endif
|
||
},
|
||
animationfinish2(e) {
|
||
let current = e.detail.current;
|
||
this.current2 = current;
|
||
},
|
||
|
||
// 平仓
|
||
closeOut(id){
|
||
if(!this.BtnFlag) return
|
||
this.BtnFlag = false
|
||
this.post('/contract/pingcang',{
|
||
contract_id: id,
|
||
},true).then((res) => {
|
||
console.log('撤销合约订单',res)
|
||
this.BtnFlag = true
|
||
if (res.code == 1) {
|
||
this.current1 = 2
|
||
this.getWallet()
|
||
this.tos(res.msg)
|
||
}
|
||
})
|
||
},
|
||
// 撤销
|
||
revocation(id){
|
||
if(!this.BtnFlag) return
|
||
this.BtnFlag = false
|
||
this.post('/contract/cancel_cang',{
|
||
contract_id: id,
|
||
},true).then((res) => {
|
||
console.log('撤销合约订单',res)
|
||
this.BtnFlag = true
|
||
if (res.code == 1) {
|
||
this.current1 = 3
|
||
this.getWallet()
|
||
this.tos(res.msg)
|
||
}
|
||
})
|
||
},
|
||
// 止盈止损弹出
|
||
setCheck(id,zy_price,zs_price){
|
||
console.log('合约订单ID',id)
|
||
console.log('止盈价格',zy_price)
|
||
console.log('止损价格',zs_price)
|
||
this.contract_id = id
|
||
this.zy_price = zy_price
|
||
this.zs_price = zs_price
|
||
this.centerShow = true
|
||
},
|
||
// 设置止盈止损比例
|
||
set_contract(){
|
||
if(!this.BtnFlag) return
|
||
if(this.zy_price==0){
|
||
this.tos(this.i18n.cycle.setProfit)
|
||
return
|
||
}
|
||
if(this.zs_price==0){
|
||
this.tos(this.i18n.cycle.setLoss)
|
||
return
|
||
}
|
||
this.BtnFlag = false
|
||
this.post('/contract/set_contract',{
|
||
zy_price: this.zy_price,
|
||
zs_price: this.zs_price,
|
||
contract_id: this.contract_id,
|
||
},true).then((res) => {
|
||
console.log('设置止盈止损比例',res)
|
||
this.BtnFlag = true
|
||
if (res.code == 1) {
|
||
this.tos(res.msg)
|
||
this.centerShow = false
|
||
this.refresh_list()
|
||
}
|
||
})
|
||
},
|
||
tanView(){
|
||
if(this.marketType=='limit'){
|
||
if(this.inputPirce==''){
|
||
this.tos(this.i18n.cycle.tag1)
|
||
return
|
||
}
|
||
}
|
||
if(this.inputHans==''){
|
||
this.tos(this.i18n.cycle.numInput)
|
||
return
|
||
}
|
||
if(this.multiple==0){
|
||
this.tos(this.i18n.cycle.multipleInput)
|
||
return
|
||
}
|
||
this.showView = true
|
||
},
|
||
// 合约下单
|
||
buy_contract(){
|
||
if(!this.BtnFlag) return
|
||
this.BtnFlag = false
|
||
this.post('/contract/buy_contract',{
|
||
cart: this.marketType,
|
||
type: this.buyType,
|
||
num: this.inputHans,
|
||
price: this.marketType=='limit'?this.inputPirce : this.lastData.close,
|
||
coin_id:this.coinInfo.id,
|
||
multiple:this.multiple,
|
||
},true).then((res) => {
|
||
console.log('合约下单',res)
|
||
this.BtnFlag = true
|
||
this.showView = false
|
||
if (res.code == 1) {
|
||
this.inputHans=''
|
||
this.inputPirce=''
|
||
this.multiple=0
|
||
this.tos(res.msg)
|
||
this.getWallet()
|
||
if(this.marketType=='limit'){
|
||
if(this.current1 == 0){
|
||
this.refresh_list()
|
||
}else{
|
||
this.current1 = 0
|
||
}
|
||
}else{
|
||
if(this.current1 == 1){
|
||
this.refresh_list()
|
||
}else{
|
||
this.current1 = 1
|
||
}
|
||
}
|
||
}else{
|
||
if(res.data.jump == 1){
|
||
this.shimingTitle = res.msg
|
||
this.TSShow = true
|
||
}
|
||
}
|
||
})
|
||
},
|
||
// 秒合约下单
|
||
buyRise(type){
|
||
if(!this.BtnFlag) return
|
||
if(this.riseNumber==''){
|
||
this.tos(this.i18n.cycle.openInput)
|
||
return
|
||
}
|
||
if(this.riseTime==''){
|
||
this.tos(this.i18n.cycle.timeclick)
|
||
return
|
||
}
|
||
this.BtnFlag = false
|
||
this.post('/cycle/start_order', {
|
||
position: type,
|
||
symbol: this.coinInfo.symbol,
|
||
cycle: this.riseTime,
|
||
num: this.riseNumber,
|
||
},true).then(res => {
|
||
console.log('秒合约下单',res)
|
||
this.BtnFlag = true
|
||
if (res.code == 1) {
|
||
this.riseNumber = ''
|
||
this.tos(res.msg)
|
||
this.getWallet()
|
||
if(this.current2 == 0){
|
||
clearInterval(this.unsettledTimer)
|
||
this.refresh_list()
|
||
}else{
|
||
this.current2 = 0
|
||
}
|
||
}else{
|
||
if(res.data.jump == 1){
|
||
this.shimingTitle = res.msg
|
||
this.TSShow = true
|
||
}
|
||
}
|
||
})
|
||
},
|
||
// 我的收藏币种列表
|
||
getmy_coinList(){
|
||
this.post('/my/collect_list',{
|
||
type:'1'
|
||
}).then((res) => {
|
||
console.log('我的收藏',res)
|
||
if (res.code == 1) {
|
||
if(this.leftshow){
|
||
if(this.searchVal){
|
||
let arrtemp = []
|
||
res.data.coin.forEach((item)=>{
|
||
if(item.name.indexOf(this.searchVal.toUpperCase()) != '-1'){
|
||
arrtemp.push(item)
|
||
}
|
||
})
|
||
console.log(arrtemp)
|
||
this.myCoinList = arrtemp
|
||
}else{
|
||
this.myCoinList = res.data.coin
|
||
this.myCoinList_copy = res.data.coin
|
||
}
|
||
}else{
|
||
this.myCoinList = res.data.coin
|
||
this.myCoinList_copy = res.data.coin
|
||
}
|
||
}
|
||
})
|
||
},
|
||
// 获取合约交易币种列表
|
||
getLeft(symbol){
|
||
this.post('/contract/get_coin').then(res => {
|
||
if (res.code == 1) {
|
||
console.log('合约交易币种列表',res)
|
||
if (symbol == undefined) {
|
||
this.cancelSocket() //取消socket订阅
|
||
}
|
||
this.setting = res.data.setting
|
||
if(this.leftshow){
|
||
if(this.searchVal){
|
||
let arrtemp = []
|
||
res.data.coin.forEach((item)=>{
|
||
if(item.name.indexOf(this.searchVal.toUpperCase()) != '-1'){
|
||
arrtemp.push(item)
|
||
}
|
||
})
|
||
console.log(arrtemp)
|
||
this.midList = arrtemp
|
||
}else{
|
||
this.midList = res.data.coin
|
||
this.midList_copy = res.data.coin
|
||
}
|
||
}else{
|
||
this.midList = res.data.coin
|
||
this.midList_copy = res.data.coin
|
||
if (symbol) {
|
||
this.midList.forEach((item, index) => {
|
||
if (item.symbol == symbol) {
|
||
this.coinInfo = item
|
||
}
|
||
})
|
||
} else {
|
||
this.coinInfo = this.midList[0]
|
||
}
|
||
}
|
||
if (!this.leftshow) {
|
||
this.refresh_list()
|
||
}
|
||
getApp().globalData.symbol = this.coinInfo.symbol
|
||
// this.onSocketMessage()
|
||
if (symbol == undefined) {
|
||
this.linkSocket() //链接socket订阅
|
||
}
|
||
}
|
||
})
|
||
},
|
||
// 获取秒合约币种列表
|
||
getMore(){
|
||
this.post('/cycle/get_cycle_coin').then(res => {
|
||
if (res.code == 1) {
|
||
console.log('秒合约交易币种列表',res)
|
||
this.cancelSocket() //取消socket订阅
|
||
this.midList = res.data
|
||
this.coinInfo = this.midList[0]
|
||
this.riseTime = this.coinInfo.trade_time[0]
|
||
this.getCycle(this.riseTime)
|
||
if(!this.leftshow){
|
||
this.refresh_list()
|
||
}
|
||
if(this.current2==0&&this.unsettledTimer==null){
|
||
this.unsettledTimer = setInterval(()=>{
|
||
this.get_Second_order()
|
||
},2000)
|
||
}
|
||
getApp().globalData.symbol = this.coinInfo.symbol
|
||
this.linkSocket() //链接socket订阅
|
||
}
|
||
})
|
||
},
|
||
// 选中币种
|
||
changeCoin(index,type){
|
||
this.cancelSocket() //取消socket订阅
|
||
this.riseTime = ''
|
||
if(type==1){
|
||
this.coinInfo = this.midList[index]
|
||
}
|
||
if(type==2){
|
||
this.coinInfo = this.myCoinList[index]
|
||
}
|
||
this.refresh_list()
|
||
getApp().globalData.symbol = this.coinInfo.symbol
|
||
this.linkSocket() //链接socket订阅
|
||
if(this.lastData.close){
|
||
this.lastData.close = Number(this.coinInfo.close)
|
||
}
|
||
this.leftshow = false
|
||
},
|
||
// 取消socket订阅
|
||
cancelSocket(){
|
||
this.sendSocketMessage({
|
||
'subs':'depth',
|
||
"user_id":uni.getStorageSync("user_id"),
|
||
"unsub":"market."+this.coinInfo.symbol+".depth.step0",
|
||
"id":"BTC",
|
||
})
|
||
this.sendSocketMessage({
|
||
'subs':'tradenow',
|
||
"user_id":uni.getStorageSync("user_id"),
|
||
"unsub":"market."+this.coinInfo.symbol+".kline.1min",
|
||
"id":"BTC",
|
||
})
|
||
},
|
||
// 链接socket订阅
|
||
linkSocket(){
|
||
this.sendSocketMessage({
|
||
'subs':'depth',
|
||
"user_id":uni.getStorageSync("user_id"),
|
||
"sub":"market."+this.coinInfo.symbol+".depth.step0",
|
||
"id":"BTC",
|
||
})
|
||
this.sendSocketMessage({
|
||
'subs':'tradenow',
|
||
"user_id":uni.getStorageSync("user_id"),
|
||
"sub":"market."+this.coinInfo.symbol+".kline.1min",
|
||
"id":"BTC",
|
||
})
|
||
},
|
||
}
|
||
}
|
||
</script>
|
||
|
||
<style lang="scss">
|
||
.toptitle_active{
|
||
flex: 2;
|
||
font-size: 36rpx;
|
||
font-weight: bold;
|
||
color: #000000;
|
||
text-align: center;
|
||
transition: all 0.5s;
|
||
}
|
||
.toptitle{
|
||
flex: 1;
|
||
text-align: center;
|
||
font-size: 30rpx;
|
||
font-weight: bold;
|
||
color: #8B99A2;
|
||
transition: all 0.5s;
|
||
}
|
||
.fixed1 {
|
||
width: 100%;
|
||
position: fixed;
|
||
top: 0;
|
||
z-index: 10010;
|
||
background-color: #F6F8FB;
|
||
}
|
||
.exchangeBox{
|
||
// width: 200rpx;
|
||
padding: 0 18rpx;
|
||
height: 48rpx;
|
||
background: rgba(195, 195, 195, 0.39);
|
||
margin-left: 30rpx;
|
||
border-radius: 10rpx;
|
||
display: flex;
|
||
align-items: center;
|
||
justify-content: center;
|
||
}
|
||
.limitBox_up{
|
||
// width: 116rpx;
|
||
height: 46rpx;
|
||
padding: 0 14rpx;
|
||
background: #E5F9F2;
|
||
border-radius: 4rpx;
|
||
font-size: 28rpx;
|
||
line-height: 46rpx;
|
||
color: #00C481;
|
||
font-family: "Medium" !important;
|
||
}
|
||
.limitBox_down{
|
||
// width: 116rpx;
|
||
height: 46rpx;
|
||
padding: 0 14rpx;
|
||
background: #FFEBEB;
|
||
border-radius: 4rpx;
|
||
font-size: 28rpx;
|
||
line-height: 46rpx;
|
||
color: #FF4040;
|
||
font-family: "Medium" !important;
|
||
}
|
||
.maskBox {
|
||
width: 100vh;
|
||
height: 100vh;
|
||
position: fixed;
|
||
top: 0;
|
||
left: 0;
|
||
background-color: rgba(0, 0, 0, 0);
|
||
z-index: 10000;
|
||
}
|
||
.xialabox {
|
||
width: 388rpx;
|
||
// background: #FFFFFF;
|
||
border: 1px solid rgba(171, 171, 171, 0.2);
|
||
border-radius: 4rpx;
|
||
overflow: hidden;
|
||
transition: 0.3s;
|
||
position: absolute;
|
||
top: 0rpx;
|
||
z-index: 10100;
|
||
}
|
||
.xialabox1 {
|
||
width: 388rpx;
|
||
// background: #FFFFFF;
|
||
border: 1px solid rgba(171, 171, 171, 0.2);
|
||
border-radius: 4rpx;
|
||
overflow: hidden;
|
||
transition: 0.3s;
|
||
position: absolute;
|
||
top: 0rpx;
|
||
z-index: 10100;
|
||
}
|
||
.heng{
|
||
width: 48rpx;
|
||
height: 4rpx;
|
||
margin: 10 auto;
|
||
background: linear-gradient(180deg, #52F3C9 0%, #3ECEB2 100%);
|
||
}
|
||
.swiper {
|
||
/* #ifndef H5 */
|
||
// 除了 H5 平台，其它平台均存在的代码
|
||
height: calc(100vh - 676rpx - var(--status-bar-height));
|
||
// height: calc(100vh - 882rpx - var(--status-bar-height));
|
||
/* #endif */
|
||
|
||
/* #ifdef H5 */
|
||
// 只会出现在h5上
|
||
height: calc(100vh - 676rpx - 104rpx);
|
||
// height: calc(100vh - 882rpx - 104rpx);
|
||
/* #endif */
|
||
}
|
||
.swiper_no {
|
||
/* #ifndef H5 */
|
||
// 除了 H5 平台，其它平台均存在的代码
|
||
height: calc(100vh - 862rpx - var(--status-bar-height));
|
||
// height: calc(100vh - 882rpx - var(--status-bar-height));
|
||
/* #endif */
|
||
|
||
/* #ifdef H5 */
|
||
// 只会出现在h5上
|
||
height: calc(100vh - 862rpx - 104rpx);
|
||
// height: calc(100vh - 882rpx - 104rpx);
|
||
/* #endif */
|
||
}
|
||
.progress{
|
||
height: 100%;
|
||
max-width: 272rpx;
|
||
border-top-left-radius: 10rpx;
|
||
border-bottom-left-radius: 10rpx;
|
||
position: absolute;
|
||
top: 0rpx;
|
||
right: 0rpx;
|
||
transition: all 0.3s;
|
||
}
|
||
.loginBtn{
|
||
width: 378rpx;
|
||
height: 74rpx;
|
||
box-shadow: 0rpx 6rpx 10rpx rgba(16, 194, 168, 0.18);
|
||
border-radius: 4rpx;
|
||
font-size: 32rpx;
|
||
color: #FFFFFF;
|
||
}
|
||
.inputbox{
|
||
width: 560rpx;
|
||
height: 96rpx;
|
||
padding: 0 32rpx;
|
||
// background: #F6F8FB;
|
||
border-radius: 12rpx;
|
||
font-size: 30rpx;
|
||
font-family: "Bold" !important;
|
||
font-style: normal;
|
||
}
|
||
|
||
.defaultbox{
|
||
width: 173rpx;
|
||
height: 66rpx;
|
||
font-size: 28rpx;
|
||
// color: #17181A;
|
||
line-height: 66rpx;
|
||
text-align: center;
|
||
}
|
||
.leftbox{
|
||
width: 173rpx;
|
||
height: 66rpx;
|
||
border-radius: 10rpx 0rpx 0rpx 10rpx;
|
||
background: linear-gradient(to right, #52F3C9 0%, #3ECEB2 100%);
|
||
font-size: 28rpx;
|
||
color: #FFFFFF;
|
||
line-height: 66rpx;
|
||
text-align: center;
|
||
}
|
||
.rightbox{
|
||
width: 173rpx;
|
||
height: 66rpx;
|
||
border-radius: 0rpx 10rpx 10rpx 0rpx;
|
||
background-color: #FF5252;
|
||
font-size: 28rpx;
|
||
color: #FFFFFF;
|
||
line-height: 66rpx;
|
||
text-align: center;
|
||
}
|
||
.triangle{
|
||
display: inline-block;
|
||
font-size: 0;
|
||
overflow: hidden;
|
||
}
|
||
|
||
.triangle:before{
|
||
content: "";
|
||
position: relative;
|
||
display: inline-block;
|
||
border: 33rpx solid transparent;
|
||
}
|
||
.triangle-right{
|
||
position: relative;
|
||
right: 2rpx;
|
||
border-top-right-radius: 50%;
|
||
border-bottom-right-radius: 50%;
|
||
}
|
||
.triangle-right:before{
|
||
left: 2rpx;
|
||
border-right-width: 0;
|
||
border-left-width: 42rpx;
|
||
border-left-color: #3ECEB2;
|
||
}
|
||
.triangle-left{
|
||
position: relative;
|
||
left: 2rpx;
|
||
border-top-left-radius: 50%;
|
||
border-bottom-left-radius: 50%;
|
||
}
|
||
.triangle-left:before{
|
||
right: 2rpx;
|
||
border-left-width: 0;
|
||
border-right-width: 42rpx;
|
||
border-right-color: #FF5252;
|
||
}
|
||
|
||
.qcbtn3 {
|
||
width: 320rpx;
|
||
height: 86rpx;
|
||
background: linear-gradient(180deg, #52F3C9 0%, #3ECEB2 100%);
|
||
border-radius: 20rpx;
|
||
font-size: 28rpx;
|
||
font-weight: bold;
|
||
color: #FFFFFF;
|
||
display: flex;
|
||
align-items: center;
|
||
justify-content: center;
|
||
}
|
||
</style>
|