li
5f40e4e1b5
- 移除秒合约页面及UI - 合约页Tab改为Position Held/Transaction Record - 存款/提款/转账页增加BTC/ETH - 资产页重构(用户信息+盈亏+多语言) - 注册页改版(匹配新设计稿) - 日文全面翻译+首页菜单多语言 - 代理专属注册链接支持(?code=) - 10个locale文件同步更新
1090 lines
35 KiB
Vue
1090 lines
35 KiB
Vue
<template>
|
||
<view class="">
|
||
<z-paging ref="paging" refresher-only @onRefresh="onRefresh"
|
||
:style="'background-color: '+theme.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 @click="leftshow = true" class="flex align-center">
|
||
<image class="width-48 height-48" :src="theme.imgs+'/left6@2x.png'" mode=""></image>
|
||
<text class="font-36 numbold-font margin-w-10">{{coinInfo.coinname}}</text>
|
||
<view :class="zhangdie>0?'limitBox_up':'limitBox_down'">
|
||
{{zhangdie}}%
|
||
</view>
|
||
</view>
|
||
<!-- #ifdef H5 -->
|
||
<image @click="router.push('/pages/tradingView/h5?title='+coinInfo.coinname+'&bb_type='+coinInfo.bb_type+'&symbol='+coinInfo.symbol)"
|
||
class="width-56 height-56" :src="theme.imgs+'/tubiao@2x.png'" mode=""></image>
|
||
<!-- #endif -->
|
||
<!-- #ifdef APP-PLUS -->
|
||
<image @click="router.push('/pages/tradingView/index?title='+coinInfo.coinname+'&bb_type='+coinInfo.bb_type+'&symbol='+coinInfo.symbol+'&close='+lastData.close)"
|
||
class="width-56 height-56" :src="theme.imgs+'/tubiao@2x.png'" mode=""></image>
|
||
<!-- #endif -->
|
||
</view>
|
||
|
||
<!-- 合约/现货切换 - 铺满宽度 -->
|
||
<view class="width-100b flex justify-center padding-w-30" :style="'background-color: '+theme.bg">
|
||
<view class="topSwitchFull">
|
||
<view class="topSwitchItem" @tap="onSwitchMarket('contract')">{{i18n.trade.contract}}</view>
|
||
<view class="topSwitchItem active" @tap="onSwitchMarket('spot')">{{i18n.trade.spot}}</view>
|
||
</view>
|
||
</view>
|
||
|
||
<view class="relative" :style="'background-color: '+theme.bg">
|
||
<view class="width-100b height-670 margin-c-10 padding-w-30 flex align-center justify-between">
|
||
<!-- 左侧 -->
|
||
<view class="flex-1 height-100b" style="padding: 20rpx 10rpx 20rpx 0;">
|
||
<!-- 买入 卖出 -->
|
||
<view class="width-388 margin-0-auto height-66 flex align-center justify-between">
|
||
<view @click="buyType='buy',inputHans='',biliType=0" :class="buyType=='buy'?'leftbox':'triangle-left'" :style="'color: '+theme.text">
|
||
{{i18n.lever.buyIn}}
|
||
</view>
|
||
<view @click="buyType='sell',inputHans='',biliType=0" :class="buyType=='sell'?'rightbox':'triangle-right'" :style="'color: '+theme.text">
|
||
{{i18n.lever.sellout}}
|
||
</view>
|
||
</view>
|
||
<!-- 市场交易 -->
|
||
<view class="width-388 height-64 margin-16-auto">
|
||
<view @click="marketState=!marketState" class="xialabox"
|
||
: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.lever.Market:i18n.lever.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.lever.Market}}
|
||
</view>
|
||
<view @click.stop="marketType = 'limit',marketState=!marketState"
|
||
class="height-60 line-height-60 font-26">{{i18n.lever.LIMIT}}
|
||
</view>
|
||
</view>
|
||
</view>
|
||
<view @click="marketState=!marketState" v-if="marketState" class="maskBox"></view>
|
||
</view>
|
||
|
||
<!-- 价格 -->
|
||
<view class="width-388 height-64 margin-16-auto radiu-4 padding-w-15"
|
||
style="border: 1px solid rgba(171, 171, 171, 0.2);">
|
||
<view class="height-64 flex align-center justify-between">
|
||
<input class="font-26 nummedium-font" type="digit"
|
||
:disabled="marketType=='market'?true:false" v-model="inputPirce"
|
||
:placeholder="marketType=='market'?i18n.lever.tag:i18n.lever.tag1"
|
||
placeholder-style="font-size:24rpx;" />
|
||
<text class="font-26 nummedium-font margin-l-10">USDT</text>
|
||
</view>
|
||
</view>
|
||
<!-- 数量 -->
|
||
<view class="width-388 height-128 margin-16-auto radiu-4 padding-w-15"
|
||
style="border: 1px solid rgba(171, 171, 171, 0.2);">
|
||
<view class="height-64 line-height-64 font-26 hidden-nowrap-ellipsis-1 flex-1">{{i18n.lever.num}} <span class='font-22' v-if="inputHans&&buyType=='buy'">(≈{{Number(inputHans/lastData.close)|numFilter }} <span class="margin-l-10">{{coinInfo.name}}</span>)</span></view>
|
||
<view class="height-64 flex align-center justify-between">
|
||
<input class="font-26 nummedium-font" type="digit" :placeholder="i18n.lever.numInput" v-model="inputHans"
|
||
placeholder-style="font-size:24rpx;" />
|
||
<text class="font-26 nummedium-font margin-l-10">{{buyType=='buy'?'USDT':coinInfo.name}}</text>
|
||
</view>
|
||
</view>
|
||
<!-- 比例 -->
|
||
<view class="width-388 margin-10-auto height-80 flex align-center justify-between">
|
||
<view @click="selectBili(0)" class="width-22 height-100b flex direction-column justify-center">
|
||
<view class="width-22 height-22 radiu-50b" style="border: 2px solid #3A43E8;"></view>
|
||
<text class="font-20" :style="'color: '+theme.fu_text">0%</text>
|
||
</view>
|
||
<view @click="selectBili(25)" class="flex-1 height-100b flex direction-column justify-center">
|
||
<view class="flex align-center justify-between">
|
||
<view :class="biliType>=25?'bj-3A43E8':theme.selectbg" class="flex-1 height-3"></view>
|
||
<view class="width-22 height-22 radiu-50b"
|
||
:style="biliType>=25?'border: 2px solid #3A43E8;':'border: 3rpx solid '+theme.text"></view>
|
||
</view>
|
||
<text class="font-20 text-right" :style="'color: '+theme.fu_text">25%</text>
|
||
</view>
|
||
<view @click="selectBili(50)" class="flex-1 height-100b flex direction-column justify-center">
|
||
<view class="flex align-center justify-between">
|
||
<view :class="biliType>=50?'bj-3A43E8':theme.selectbg" class="flex-1 height-3"></view>
|
||
<view class="width-22 height-22 radiu-50b"
|
||
:style="biliType>=50?'border: 2px solid #3A43E8;':'border: 3rpx solid '+theme.text"></view>
|
||
</view>
|
||
<text class="font-20 text-right" :style="'color: '+theme.fu_text">50%</text>
|
||
</view>
|
||
<view @click="selectBili(75)" class="flex-1 height-100b flex direction-column justify-center">
|
||
<view class="flex align-center justify-between">
|
||
<view :class="biliType>=75?'bj-3A43E8':theme.selectbg" class="flex-1 height-3"></view>
|
||
<view class="width-22 height-22 radiu-50b"
|
||
:style="biliType>=75?'border: 2px solid #3A43E8;':'border: 3rpx solid '+theme.text"></view>
|
||
</view>
|
||
<text class="font-20 text-right" :style="'color: '+theme.fu_text">75%</text>
|
||
</view>
|
||
<view @click="selectBili(100)" class="flex-1 height-100b flex direction-column justify-center">
|
||
<view class="flex align-center justify-between">
|
||
<view :class="biliType>=100?'bj-3A43E8':theme.selectbg" class="flex-1 height-3"></view>
|
||
<view class="width-22 height-22 radiu-50b"
|
||
:style="biliType>=100?'border: 2px solid #3A43E8;':'border: 3rpx solid '+theme.text"></view>
|
||
</view>
|
||
<text class="font-20 text-right" :style="'color: '+theme.fu_text">100%</text>
|
||
</view>
|
||
</view>
|
||
|
||
<!-- 可用 -->
|
||
<view style="white-space: nowrap;"
|
||
class="width-388 margin-16-auto height-58 flex align-center justify-between">
|
||
<text class="font-26 color-C3C3C3">{{i18n.lever.available}}</text>
|
||
<view class="">
|
||
<text style="white-space: nowrap;"
|
||
class="font-26 nummedium-font margin-l-10">{{buyType=='buy'?Number(count_xh_usdt).toFixed(4):Number(coinInfo.balance).toFixed(coinInfo.price_jd)}}{{buyType=='buy'?'USDT':coinInfo.name}}</text>
|
||
</view>
|
||
</view>
|
||
<view class="width-388 margin-0-auto">
|
||
<button @click="buy_contract()" v-if="buyType=='buy'"
|
||
class="cu-btn loginBtn bj-00C481">{{i18n.lever.buyIn}}</button>
|
||
<button @click="buy_contract()" v-if="buyType=='sell'"
|
||
class="cu-btn loginBtn bj-FF4040">{{i18n.lever.sellout}}</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">
|
||
<view class="flex-1 font-26 color-C3C3C3 text-left">{{i18n.lever.price}}</view>
|
||
<view class="flex-1 font-26 color-C3C3C3 text-right">{{i18n.lever.volume}}</view>
|
||
</view>
|
||
<view class="width-272 height-260 margin-10-auto flex" style="flex-direction: column-reverse;">
|
||
<view @click="marketType == 'limit'? (inputPirce=item[0]) :''" 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>
|
||
<!-- <i v-show="ifmyself(item[0])" class="cuIcon-title color-FF4040 absolute" style="right: -26rpx;"></i> -->
|
||
</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 @click="marketType == 'limit'? (inputPirce=item[0]) :''" 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>
|
||
<!-- <i v-show="ifmyself(item[0])" class="cuIcon-title color-00C481 absolute" style="right: -26rpx;"></i> -->
|
||
</view>
|
||
</view>
|
||
</view>
|
||
</view>
|
||
<!-- tab选择 -->
|
||
<view class="width-100b height-72 padding-w-40 flex align-center justify-between">
|
||
<view @click="tabsChange(index)"
|
||
class="flex-1 height-46 flex direction-column align-center justify-between"
|
||
v-for="(item,index) in tablist" :key="index">
|
||
<text :class="current==index?theme.selectcolor:theme.color" class="font-28">{{item}}</text>
|
||
</view>
|
||
</view>
|
||
</view>
|
||
<!-- swiper必须设置flex:1，因为swiper有默认的高度，只有设置flex:1才可以铺满页面 -->
|
||
<swiper :class="orderList.length>2?'swiper':'swiper_no'" class="" :current="current"
|
||
@animationfinish="animationfinish" @change="onswiperchange">
|
||
<swiper-item v-for="(item,index) in tablist" class="swiper-item" style="height: 100%;">
|
||
<scroll-view scroll-y="true" style="height: 100%;" @scrolltolower="pullTorefresh"
|
||
:price_jd="coinInfo.price_jd">
|
||
<listModule @revocation="revocation" :currentIndex="current" :list="orderList"
|
||
:loading="loading" :color="theme.text" :background="theme.bg" :fu_color="theme.fu_color">
|
||
</listModule>
|
||
</scroll-view>
|
||
</swiper-item>
|
||
</swiper>
|
||
</z-paging>
|
||
<!-- 左侧弹出 -->
|
||
<u-popup v-model="leftshow" mode="left" border-radius="30">
|
||
<view 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"
|
||
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"
|
||
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 v-if="midList.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>
|
||
<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>
|
||
</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.lever.shiming}}</view>
|
||
</view>
|
||
</view>
|
||
</u-popup>
|
||
|
||
</view>
|
||
</template>
|
||
|
||
<script>
|
||
import listModule from './components/list_module.vue'
|
||
export default {
|
||
components: {
|
||
listModule,
|
||
},
|
||
data() {
|
||
return {
|
||
count_xh_usdt: 0, //用户可用剩余usdt
|
||
midList: [], //左侧币种列表
|
||
midList_copy: [],
|
||
coinInfo: {}, //选中的当前币种信息
|
||
|
||
statusBar: uni.getSystemInfoSync().statusBarHeight,
|
||
|
||
marketState: false,
|
||
marketType: 'market', //交易类型 market=市场交易 limit=限价交易
|
||
|
||
tablist: ['未成交', '部分成交', '完全成交', '已撤销'],
|
||
current: 0,
|
||
|
||
inputPirce: '', //当前最优价格
|
||
buyType: 'buy', //买涨买跌类型
|
||
|
||
inputHans: '', //数量
|
||
// sliderValue: 0, //滑块数值
|
||
biliType: 0, //比例
|
||
|
||
order_id: '', //选中订单ID
|
||
orderList: [], //币币交易订单列表
|
||
state: 'more',
|
||
page: 1,
|
||
loading: true,
|
||
|
||
lastData: '',
|
||
tick: "",
|
||
|
||
leftshow: false,
|
||
lefttiming: null,
|
||
TSShow: false,
|
||
shimingTitle: '请先完成实名认证',
|
||
|
||
BtnFlag: true, //按钮防重复点击
|
||
|
||
leftcurrent: 1,
|
||
searchVal: '',
|
||
myCoinList: [],
|
||
myCoinList_copy: [],
|
||
|
||
timer: null,
|
||
unsettledTimer:null,
|
||
|
||
theme: '',
|
||
}
|
||
},
|
||
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';
|
||
}
|
||
}
|
||
},
|
||
},
|
||
watch: {
|
||
buyType(){
|
||
this.getLeft(this.coinInfo.symbol)
|
||
this.getWallet()
|
||
},
|
||
current(oldValue, newValue) {
|
||
if (oldValue != newValue) {
|
||
this.orderList = []
|
||
if (this.timer) clearTimeout(this.timer)
|
||
this.timer = setTimeout(() => {
|
||
this.refresh_list()
|
||
// console.log('3s后执行');
|
||
}, 500)
|
||
}
|
||
|
||
},
|
||
leftshow(item) {
|
||
if (item == false) {
|
||
this.searchVal = ''
|
||
// clearInterval(this.lefttiming)
|
||
} else {
|
||
this.getmy_coinList()
|
||
this.getLeft(this.coinInfo.symbol)
|
||
// this.setTimeLeft()
|
||
}
|
||
}
|
||
},
|
||
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
|
||
}
|
||
},
|
||
},
|
||
onLoad(e) {
|
||
const symbol = (e && e.symbol) ? e.symbol : (getApp().globalData.symbol || '')
|
||
if (symbol) {
|
||
console.log(symbol)
|
||
getApp().globalData.symbol = symbol
|
||
if (e && e.type) {
|
||
this.buyType = e.type
|
||
}
|
||
}
|
||
this.getLeft(symbol)
|
||
},
|
||
onShow() {
|
||
if (uni.getStorageSync("theme") == "dark") {
|
||
this.theme = this.$store.state.darkTheme
|
||
}else{
|
||
this.theme = this.$store.state.lightTheme
|
||
}
|
||
if(this.current==0){
|
||
this.unsettledTimer = setInterval(()=>{
|
||
if(this.coinInfo.symbol == undefined) return
|
||
this.page = 1
|
||
this.unsettledOrder()
|
||
},1500)
|
||
}
|
||
if (getApp().globalData.symbol) {
|
||
this.midList.forEach((item, index) => {
|
||
if (item.symbol == getApp().globalData.symbol) {
|
||
this.coinInfo = item
|
||
}
|
||
})
|
||
} else {
|
||
getApp().globalData.symbol = this.coinInfo.symbol
|
||
console.log(getApp().globalData.symbol)
|
||
}
|
||
this.onSocketMessage()
|
||
if (this.lastData.close) {
|
||
this.lastData.close = Number(this.coinInfo.close)
|
||
}
|
||
this.linkSocket() //链接socket订阅
|
||
this.tablist = this.i18n.lever.tablist
|
||
this.TSShow = false
|
||
if (getApp().globalData.buyType) {
|
||
this.buyType = getApp().globalData.buyType
|
||
}
|
||
|
||
this.getWallet()
|
||
uni.$on('reConnect', (res) => {
|
||
console.log("重连WebSocket")
|
||
this.onSocketMessage()
|
||
})
|
||
},
|
||
onHide: function() {
|
||
clearInterval(this.unsettledTimer)
|
||
getApp().globalData.symbol = ""
|
||
uni.$off('reConnect')
|
||
this.cancelSocket() //取消socket订阅
|
||
},
|
||
methods: {
|
||
ifmyself(price) {
|
||
if (this.orderList.length == 0 || this.current == 2 || this.current == 3) return false
|
||
// console.log(this.orderList)
|
||
// console.log(item)
|
||
if (price) {
|
||
var temp = false
|
||
temp = this.orderList.some((item) => {
|
||
return item.price == price
|
||
})
|
||
return temp
|
||
} else {
|
||
return false
|
||
}
|
||
},
|
||
onSwitchMarket(type) {
|
||
if (type === 'spot') return
|
||
if (type === 'contract') {
|
||
getApp().globalData.symbol = this.coinInfo.symbol || ''
|
||
uni.switchTab({
|
||
url: '/pages/contract/index'
|
||
})
|
||
}
|
||
},
|
||
// 收藏币种
|
||
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() {
|
||
// 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)
|
||
}
|
||
},
|
||
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('下拉刷新');
|
||
this.getLeft(this.coinInfo.symbol)
|
||
this.getmy_coinList()
|
||
this.getWallet()
|
||
setTimeout(() => {
|
||
this.$refs.paging.complete();
|
||
}, 1500);
|
||
},
|
||
// 选择数量比例
|
||
selectBili(bili) {
|
||
this.biliType = bili
|
||
if (this.buyType == 'buy') {
|
||
if (this.biliType == 100) {
|
||
this.inputHans = Math.floor(this.count_xh_usdt * 100) / 100 //只保留小数点前两位
|
||
} else {
|
||
this.inputHans = (this.count_xh_usdt * this.biliType / 100).toFixed(2)
|
||
}
|
||
}
|
||
if (this.buyType == 'sell') {
|
||
if (this.biliType == 100) {
|
||
this.inputHans = Math.floor(this.coinInfo.balance * 10000) / 10000 //只保留小数点前两位
|
||
} else {
|
||
this.inputHans = (this.coinInfo.balance * this.biliType / 100).toFixed(2)
|
||
}
|
||
}
|
||
},
|
||
// 获取我的资产
|
||
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
|
||
this.page++
|
||
console.log('下拉加载第'+this.page+'页')
|
||
this.get_orderList()
|
||
},
|
||
// 刷新重置订单列表
|
||
refresh_list() {
|
||
this.orderList = []
|
||
this.page = 1
|
||
this.state = 'more'
|
||
this.get_orderList()
|
||
},
|
||
// 获取未成交订单列表
|
||
unsettledOrder(){
|
||
this.post('/market/get_order', {
|
||
page: 1,
|
||
size: this.page * 10,
|
||
symbol: this.coinInfo.symbol,
|
||
status: this.current
|
||
}).then(res => {
|
||
console.log(this.coinInfo.symbol+'未成交订单 size'+ this.page * 10, res.data.data)
|
||
if (res.code == 1) {
|
||
this.loading = false
|
||
this.orderList = res.data.data
|
||
}
|
||
})
|
||
},
|
||
// 获取交易订单列表
|
||
get_orderList() {
|
||
if(this.current==0){
|
||
clearInterval(this.unsettledTimer)
|
||
this.unsettledOrder()
|
||
this.unsettledTimer = setInterval(()=>{
|
||
this.unsettledOrder()
|
||
},3000)
|
||
}else{
|
||
clearInterval(this.unsettledTimer)
|
||
if (this.state == 'over') return
|
||
this.loading = true
|
||
this.state = 'loading'
|
||
let obj = {
|
||
page: this.page,
|
||
symbol: this.coinInfo.symbol,
|
||
status: this.current
|
||
}
|
||
if(this.current==4){
|
||
obj = {
|
||
page: this.page,
|
||
status: 'all'
|
||
}
|
||
}
|
||
this.post('/market/get_order', obj).then(res => {
|
||
console.log('币币交易订单列表', res)
|
||
if (res.code == 1) {
|
||
this.loading = false
|
||
this.orderList = this.orderList.concat(res.data.data)
|
||
if (this.page >= res.data.last_page) {
|
||
this.state = 'over'
|
||
}
|
||
}
|
||
})
|
||
}
|
||
},
|
||
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切换
|
||
tabsChange(index) {
|
||
this.current = index;
|
||
},
|
||
onswiperchange(e) {
|
||
// #ifndef APP-PLUS || H5 || MP-WEIXIN || MP-QQ
|
||
let index = e.target.current || e.detail.current;
|
||
this.tabsChange(index);
|
||
// #endif
|
||
},
|
||
animationfinish(e) {
|
||
let current = e.detail.current;
|
||
this.current = current;
|
||
},
|
||
// 撤销
|
||
revocation(obj) {
|
||
// console.log('对象', id)
|
||
if (!this.BtnFlag) return
|
||
this.BtnFlag = false
|
||
this.post('/market/cancel_order', {
|
||
order_id: obj.id,
|
||
coin_id: obj.coin_id
|
||
}, true).then((res) => {
|
||
console.log('撤销订单', res)
|
||
this.BtnFlag = true
|
||
if (res.code == 1) {
|
||
this.tos(res.msg)
|
||
this.current = 3
|
||
this.getWallet()
|
||
}
|
||
})
|
||
},
|
||
// 币币交易下单
|
||
buy_contract() {
|
||
if (!this.BtnFlag) return
|
||
if (this.marketType == 'limit') {
|
||
if (this.inputPirce == '') {
|
||
this.tos(this.i18n.lever.tag1)
|
||
return
|
||
}
|
||
}
|
||
if (this.inputHans == '') {
|
||
this.tos(this.i18n.lever.numInput)
|
||
return
|
||
}
|
||
this.BtnFlag = false
|
||
this.post('/market/start_order', {
|
||
cart: this.marketType,
|
||
type: this.buyType,
|
||
num: this.inputHans,
|
||
price: this.marketType == 'limit' ? this.inputPirce : this.lastData.close,
|
||
coin_id: this.coinInfo.id,
|
||
}, true).then((res) => {
|
||
console.log('币币交易下单', res)
|
||
this.BtnFlag = true
|
||
if (res.code == 1) {
|
||
if (this.buyType == 'sell') {
|
||
// this.coinInfo.balance -= this.inputHans
|
||
this.getLeft(this.coinInfo.symbol)
|
||
} else {
|
||
this.getWallet()
|
||
}
|
||
this.inputHans = ''
|
||
this.inputPirce = ''
|
||
this.tos(res.msg)
|
||
if (this.current == 0) {
|
||
this.refresh_list()
|
||
} else {
|
||
this.current = 0
|
||
}
|
||
} else {
|
||
if (res.data.jump == 1) {
|
||
this.shimingTitle = res.msg
|
||
this.TSShow = true
|
||
}
|
||
}
|
||
})
|
||
},
|
||
getmy_coinList() {
|
||
this.post('/my/collect_list',{
|
||
type:'2'
|
||
}).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('/market/get_coin').then(res => {
|
||
if (res.code == 1) {
|
||
console.log('币种列表', res)
|
||
if (symbol == undefined) {
|
||
this.cancelSocket() //取消socket订阅
|
||
}
|
||
console.log(symbol)
|
||
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
|
||
if (symbol == undefined) {
|
||
this.linkSocket() //链接socket订阅
|
||
}
|
||
}
|
||
})
|
||
},
|
||
// 选中币种
|
||
changeCoin(index, type) {
|
||
this.cancelSocket() //取消socket订阅
|
||
if (type == 1) {
|
||
this.coinInfo = this.midList[index]
|
||
}
|
||
if (type == 2) {
|
||
this.coinInfo = this.myCoinList[index]
|
||
}
|
||
// clearInterval(this.lefttiming)
|
||
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">
|
||
.topSwitch {
|
||
width: 360rpx;
|
||
height: 60rpx;
|
||
border: 2rpx solid #10C7A0;
|
||
border-radius: 12rpx;
|
||
overflow: hidden;
|
||
display: flex;
|
||
align-items: center;
|
||
justify-content: space-between;
|
||
}
|
||
.topSwitchFull {
|
||
width: 100%;
|
||
height: 60rpx;
|
||
border: 2rpx solid #10C7A0;
|
||
border-radius: 12rpx;
|
||
overflow: hidden;
|
||
display: flex;
|
||
align-items: center;
|
||
justify-content: space-between;
|
||
}
|
||
.topSwitchItem {
|
||
flex: 1;
|
||
height: 60rpx;
|
||
line-height: 60rpx;
|
||
text-align: center;
|
||
font-size: 30rpx;
|
||
font-weight: 700;
|
||
color: #111111;
|
||
}
|
||
.topSwitchItem.active {
|
||
background: #10C7A0;
|
||
color: #FFFFFF;
|
||
}
|
||
.fixed1 {
|
||
width: 100%;
|
||
position: fixed;
|
||
// top: 0;
|
||
z-index: 10010;
|
||
background-color: #F6F8FB;
|
||
}
|
||
|
||
.limitBox_up {
|
||
// width: 116rpx;
|
||
height: 46rpx;
|
||
padding: 0 14rpx;
|
||
background: rgba(6,195,141,0.2);
|
||
border-radius: 4rpx;
|
||
font-size: 28rpx;
|
||
line-height: 46rpx;
|
||
color: #06C38D;
|
||
font-family: "Medium" !important;
|
||
}
|
||
|
||
.limitBox_down {
|
||
// width: 116rpx;
|
||
height: 46rpx;
|
||
padding: 0 14rpx;
|
||
background: rgba(220,75,67,0.2);
|
||
border-radius: 4rpx;
|
||
font-size: 28rpx;
|
||
line-height: 46rpx;
|
||
color: #DC4B43;
|
||
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;
|
||
border: 1px solid rgba(159, 159, 159, 0.2);
|
||
border-radius: 4rpx;
|
||
overflow: hidden;
|
||
transition: 0.3s;
|
||
position: absolute;
|
||
z-index: 10100;
|
||
}
|
||
|
||
.heng {
|
||
width: 50rpx;
|
||
height: 4rpx;
|
||
margin: 10 auto;
|
||
background: #06C38D;
|
||
}
|
||
|
||
.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: 388rpx;
|
||
height: 74rpx;
|
||
box-shadow: 0rpx 6rpx 10rpx rgba(16, 194, 168, 0.18);
|
||
border-radius: 4rpx;
|
||
font-size: 32rpx;
|
||
color: #FFFFFF;
|
||
}
|
||
|
||
.leftbox {
|
||
width: 190rpx;
|
||
height: 66rpx;
|
||
border-radius: 8rpx 0rpx 0rpx 8rpx;
|
||
background: linear-gradient(106deg, #06C38D 183rpx, transparent 10rpx);
|
||
font-size: 28rpx;
|
||
color: #FFFFFF !important;
|
||
line-height: 66rpx;
|
||
text-align: center;
|
||
font-weight: bold;
|
||
}
|
||
.triangle-left {
|
||
width: 190rpx;
|
||
height: 66rpx;
|
||
border-radius: 8rpx 0rpx 0rpx 8rpx;
|
||
background: linear-gradient(106deg, rgba(217,217,217,0.4) 183rpx, transparent 10rpx);
|
||
font-size: 28rpx;
|
||
color: #020202;
|
||
line-height: 66rpx;
|
||
text-align: center;
|
||
font-weight: bold;
|
||
}
|
||
.rightbox {
|
||
width: 190rpx;
|
||
height: 66rpx;
|
||
border-radius: 0rpx 8rpx 8rpx 0rpx;
|
||
background: linear-gradient(-74deg, #DC4B43 183rpx, transparent 10rpx);
|
||
font-size: 28rpx;
|
||
color: #FFFFFF !important;
|
||
line-height: 66rpx;
|
||
text-align: center;
|
||
font-weight: bold;
|
||
}
|
||
|
||
.triangle-right {
|
||
width: 190rpx;
|
||
height: 66rpx;
|
||
border-radius: 0rpx 8rpx 8rpx 0rpx;
|
||
background: linear-gradient(-74deg, rgba(217,217,217,0.4) 183rpx, transparent 10rpx);
|
||
font-size: 28rpx;
|
||
color: #020202;
|
||
line-height: 66rpx;
|
||
text-align: center;
|
||
font-weight: bold;
|
||
}
|
||
|
||
.qcbtn3 {
|
||
width: 320rpx;
|
||
height: 86rpx;
|
||
background: #06C38D;
|
||
border-radius: 20rpx;
|
||
font-size: 28rpx;
|
||
font-weight: bold;
|
||
color: #FFFFFF;
|
||
display: flex;
|
||
align-items: center;
|
||
justify-content: center;
|
||
}
|
||
</style>
|