Browse Source

修改合约

master
‘daijinzheng@xingtongworld.com’ 2 years ago
parent
commit
79782073e2
  1. BIN
      assets/img/home/history.png
  2. 6
      main.js
  3. 132
      pages/exchange/exchange-transaction.vue
  4. 250
      pages/exchange/open-position.vue
  5. 12
      pages/exchange/sell-and-buy.vue

BIN
assets/img/home/history.png

Binary file not shown.

After

Width:  |  Height:  |  Size: 904 B

6
main.js

@ -3,9 +3,9 @@ import App from './App.vue'
import '@/plugins'
import i18n from "./i18n";
import store from './store'
// import 'element-ui/lib/theme-chalk/index.css'
// import element from './element/index'
// Vue.use(element)
import 'element-ui/lib/theme-chalk/index.css'
import element from './element/index'
Vue.use(element)
//把vuex定义成全局组件
Vue.prototype.$store = store
Vue.prototype._i18n = i18n;

132
pages/exchange/exchange-transaction.vue

@ -158,17 +158,26 @@
</view> -->
</view>
<view>
<view class="m-t-xs">
<view class="m-t-xs" style="margin-bottom: 25px;">
<!-- <view class="d-flex justify-between fn-sm">
<text>0%</text>
<text>100%</text>
</view> -->
<view class="d-flex justify-between" style="margin-top: 20px;">
<view class="borders w-23 rounded-3 fn-center p-y-xs fn-12" v-for="(item,index) in progress" @click="sliderChange(item,index)" :class="sliderActive==index?'color-theme-1 active':''">
<!-- <view class="d-flex justify-between" style="margin-top: 20px;"> -->
<!-- <view class="borders w-23 rounded-3 fn-center p-y-xs fn-12" v-for="(item,index) in progress" @click="sliderChange(item,index)" :class="sliderActive==index?'color-theme-1 active':''">
{{item}}%
</view>
</view> -->
<!-- <bing-progress activeColor="#60c08c" barBorderRadius="20px" handleWidth="12px" handleHeight="12px" handleColor="#60c08c" borderRadius="20px" width="150px" :showInfo="false" strokeWidth="2px" noActiveColor="#484859" @dragging="sliderChange" :value="activeStep"/> -->
</view>
<!-- </view> -->
<el-slider
:value="activeStep"
@input="sliderChange"
:step="25"
:marks="marks"
:show-tooltip="false"
show-stops>
</el-slider>
</view>
<view class="" style="margin: 20px 0px;">
<v-input v-if="form.type == 1 && form.direction == 'sell'"
@ -197,7 +206,7 @@
<view class="" style="margin-bottom: 20px;">
<view class="" style="font-size: 20rpx;line-height: 30px;display: flex;justify-content: space-between;">
<view>
可用 <text class="col-fff" style="margin-left: 5px;">{{ usable }}{{ usableUnit }}</text>
{{ $t("common.c3") }} <text class="col-fff" style="margin-left: 5px;">{{ usable }}{{ usableUnit }}</text>
</view>
<img :src="$localImgUrl('antOutline.png')" alt="" class="h-18" style="position: relative;top: 5px;" />
</view>
@ -321,25 +330,34 @@
</table>
</view> -->
<view class="m-t-xs" style="background-color: #121212;">
<view class="border-t-original d-flex justify-between align-center p-x-md p-t-lg" style="border-bottom: 1px solid #ccc;padding-bottom: 15px;">
<!-- <text class="fn-16 fn-bold color-light">{{$t("exchange.a4")}}</text> -->
<!-- <v-link tag="div" to="/pages/exchange/exchangeHis" class="d-flex align-center">
<view class="border-t-original d-flex justify-between align-center p-x-md p-t-lg">
<text class="fn-16 fn-bold color-light">{{$t("exchange.a4")}}</text>
<v-link tag="div" to="/pages/exchange/exchangeHis" class="d-flex align-center">
<van-icon name="orders-o" class="fn-14" style="font-size: 16px;"/>
<span class="fn-12 " style="font-size: 16px;">{{$t("purchase.a9")}}</span>
</v-link> -->
<view class="">
委托(0)
</view>
<view class="">
仓位(0)
</view>
<view class="">
资产
</v-link>
<!-- <view class="entrust_title">
<view class="">
委托(0)
</view>
<view class="">
仓位(0)
</view>
<view class="">
资产
</view>
<view class="">
策略(0)
</view>
</view>
<view class="">
策略(0)
</view>
<image src="@/assets/img/home/history.png" style="width: 40rpx;height: 40rpx;"></image>
</view> -->
</view>
<!-- <view class="" style="border-bottom: 1px solid #ccc;height: 20px;">
<view class="">当前交易品种</view>
<view class="">批量撤单</view>
</view> -->
<van-empty v-if="!Object.values(list).length" description="" />
<view v-for="item in (list)" class="item border-b fn-14" :key="item.order_no">
<view class="p-x-md p-y-xs">
@ -475,7 +493,14 @@ export default {
sliderActive:-1,
dtime: null,
scrollTop:0,
refreshing:false
refreshing:false,
marks:{
2: '0%',
25: '25%',
50: '50%',
75: '75%',
100: '100%',
}
};
},
computed: {
@ -549,20 +574,29 @@ export default {
return totalMoney;
},
//
activeStep() {
let num = 0;
if (this.form.direction == "buy") {
if (!this.targetBalance.usable_balance) return 0;
num = this.totalMoney / this.targetBalance.usable_balance;
} else if (this.form.direction == "sell") {
if (!this.currentBalance.usable_balance) return 0;
num = this.form.amount / this.currentBalance.usable_balance;
}
if (!isNaN(num)) {
num = num.toFixed(3);
}
return num*100
},
// activeStep() {
// let num = 0;
// if (this.form.direction == "buy") {
// if (!this.targetBalance.usable_balance) return 0;
// num = this.totalMoney / this.targetBalance.usable_balance;
// } else if (this.form.direction == "sell") {
// if (!this.currentBalance.usable_balance) return 0;
// num = this.form.amount / this.currentBalance.usable_balance;
// }
// if (!isNaN(num)) {
// num = num.toFixed(3);
// }
// return num*100
// },
//
activeStep() {
return (this.form.amount / this.maxNum) * 100;
},
activeStep() {
if (!this.form.amount || !this.maxNum) return 0;
let num = (this.form.amount / this.maxNum) * 100;
return num;
},
//
usable() {
if (this.form.direction == "buy") {
@ -1075,6 +1109,34 @@ export default {
// border:1px solid $theme-1!important;
border-color: $theme-1!important;
}
//
::v-deep .el-slider__marks-text{
font-size: 18rpx;
}
::v-deep .el-slider__runway{
background-color: #2B2B2B;
height: 8rpx;
}
::v-deep .el-slider__bar{
background-color: white;
}
::v-deep .el-slider__stop{
background-color: #121212;
border: 2px solid #2B2B2B;
top: -3px;
// border-radius: 10px;
}
::v-deep .el-slider__button{
width: 20rpx;
height: 20rpx;
border: 2px solid #fff;
background-color: #121212;
}
.entrust_title{
display: flex;justify-content: space-between;width: 240px;padding-bottom: 4px;
}
.h-110{
height: 110px;
}

250
pages/exchange/open-position.vue

@ -1,15 +1,36 @@
<template>
<view class="bg-panel-3">
<view class="d-flex p-x-md p-0 fa p-t-md justify-between align-center fn-18 bg-panel-3 color-light flex-wrap">
<v-header class="nav-tab" :left-arrow="false" style="background-color: #121212;">
<template #left>
<!-- <van-icon name="user-circle-o" class="fn-25 color-theme-1" style="color: #D0712F;" /> -->
<image src="@/assets/img/home/top.png" mode="aspectFit" style="width: 36rpx;height: 36rpx;"></image>
</template>
<template #title>
<view style="color: #ffffff; font-size: 30rpx;">{{$t("base.d0")}}</view>
</template>
<template #right>
<view class="per-bot p-y-md p-x-sm d-flex align-center">
<!-- <img :src="$localImgUrl('Page6.png')" alt="" class="h-20 m-r-xs" /> -->
<span class="color-light">
<v-lang @change="marketList = [];
indexData();getHelpList();"></v-lang>
<i class="iconfont m-l-xs fn-sm">&#xe6e9;</i>
</span>
</view>
</template>
</v-header>
<view class="d-flex p-x-md p-0 p-t-md justify-between align-center fn-18 color-light flex-wrap">
<view class="w-max" style="height: var(--status-bar-height)"></view>
<view @click="$emit('symbol')" class="d-flex align-center">
<i class="iconfont color-light fn-bold fn-18">&#xe655;</i>
<!-- <i class="iconfont color-light fn-bold fn-18">&#xe655;</i> -->
<text class="fn-bold" style="margin-right: 5px;">{{ symbol }}</text>
{{ $t("first.b8") }}
<text class="fn-10 m-l-xs p-y-2"
<i class="iconfont" style="margin-left: 5px;">&#xe6e9;</i>
<!-- <text class="fn-10 m-l-xs p-y-2"
:class="increase.increase < 0 ? 'color-sell bg-sell-transparent' : 'color-buy bg-buy-transparent'">
{{increase.increaseStr}}
</text>
</text> -->
</view>
<view class="d-flex fn-20 color-theme-1">
<view class="m-r-xs" @click="$emit('option')">
@ -28,7 +49,7 @@
<van-icon name="chart-trending-o"/>
</v-link>
</view>
<view class="p-ms bg-form-panel-3 fn-sm m-t-xs rounded-sm d-flex justify-between w-max fn-13">
<!-- <view class="p-ms bg-form-panel-3 fn-sm m-t-xs rounded-sm d-flex justify-between w-max fn-13">
<view class="item w-33 t-no positions">
<view class="label">{{ $t("contract.d4") }}(USDT)</view>
<view class="num color-light d-flex align-center" style="margin-top:8px;">
@ -39,12 +60,12 @@
</view>
<view class="item p-x-xs t-no w-33 fn-center">
<view class="label">
<!-- {{ $t("contract.d5") }} -->
{{ $t("contract.d5") }}
{{ $t("contract.e4") }}
(USDT)
</view>
<view class="num color-light " style="margin-top:8px;">
<!-- {{accountInfo.totalUnrealProfit}} -->
{{accountInfo.totalUnrealProfit}}
{{accountInfo.usable_balance}}
</view>
</view>
@ -58,10 +79,11 @@
}}
</view>
</view>
</view>
</view> -->
</view>
<view class="w-max" style="height: var(--status-bar-height)"></view>
<view class="h-120"></view>
<!-- <view class="h-120"></view> -->
<scroll-view
@refresherrefresh="onRefresh"
:refresher-enabled="refresherEnabled&&scrollTop<50"
@ -80,7 +102,7 @@
<text style="width: 50%;display: inline-block;">平仓</text>
</view>
</view> -->
<view class="d-flex fn-center m-b-ms h-30 color-light">
<view class="d-flex fn-center m-b-ms h-30 color-light" style="margin-top: 20px;">
<!-- <v-picker
:list="commissionTypes"
v-model="form.type"
@ -91,7 +113,7 @@
</text>
<i class="iconfont">&#xe6e9;</i>
</v-picker> -->
<v-dropdwon class="w-60 m-r-xs bg-form-panel-3 p-y-xxs rounded posi" :list="commissionTypes"
<v-dropdwon class="w-60 m-r-xs bg-form-panel-3 p-y-xxs posi border_1" :list="commissionTypes"
@onClick="dropDownChange">
</v-dropdwon>
<!-- <v-picker
@ -104,7 +126,7 @@
<i class="iconfont fn-13">&#xe6e9;</i>
</v-picker> -->
<v-dropdwon v-if="lever_rage.length>0"
class="w-40 m-r-xs posi bg-form-panel-3 p-y-xxs rounded" :contract="contract"
class="w-40 m-r-xs posi bg-form-panel-3 p-y-xxs border_1" :contract="contract"
:list="lever_rage" @onClick="openNum" :leverShow="leverShow">
</v-dropdwon>
</view>
@ -131,19 +153,26 @@
<view>
<!-- :placeholder="$t('contract.d2')"
v-model="form.amount" -->
<v-input
<!-- <v-input
v-model="margin"
:placeholder="$t('contract.d2')"
@input="sliderActive=-1"
class="h-30 p-x-sm p-y-xxs rounded bg-form-panel-3"
>
<template #right>
<span class="color-light fn-bold">
<!-- {{ $t("contract.d8") }} -->
USDT
</span>
<span class="color-light fn-bold">{{ $t("contract.d8") }}USDT</span>
</template>
</v-input>
</v-input> -->
<v-input
v-model="margin"
@input="sliderActive=-1"
:placeholder="$t('contract.d2')" style="border: 1px solid #202020;">
<template #right>
<view class="color-light fn-bold" style="margin-right: 10px;">
<!-- {{ $t("contract.d8") }} -->
USDT</view>
</template>
</v-input>
</view>
<view class="m-b-xs">
<view class="m-t-xs">
@ -152,11 +181,11 @@
<text>100%</text>
</view> -->
<view class="d-flex justify-between">
<view class="borders w-23 rounded-3 fn-center p-y-xs fn-12"
<!-- <view class="borders w-23 rounded-3 fn-center p-y-xs fn-12"
v-for="(item,index) in progress" @click="sliderChange(item,index)"
:class="sliderActive==index?'color-theme-1 active':''">
{{item}}%
</view>
</view> -->
<!-- <bing-progress
activeColor="#60c08c"
barBorderRadius="20px"
@ -172,12 +201,14 @@
:value="activeStep"
/> -->
</view>
<!-- <el-slider
<el-slider
:value="activeStep"
@input="sliderChange"
:step="20"
:step="25"
show-stops
></el-slider> -->
:marks="marks"
:show-tooltip="false"
></el-slider>
<!-- :format-tooltip="tooltip" -->
</view>
</view>
@ -185,12 +216,25 @@
<span class="color-default">{{ $t("contract.d9") }}</span>
<span>{{ margin }}</span>
</view> -->
<!-- 1111 -->
<view class="d-flex flex-wrap">
<view class="fn-12">
<!-- <view class="fn-12">
{{$t('first.a3')}}
<text class="color-theme-1">({{$t('reg.b4')}})</text>
</view>
<view class="d-flex justify-between m-y-xs align-center">
</view> -->
<view class="fn-sm m-t-xs d-flex justify-between" style="width: 100%;">
<view class="d-flex">
{{ $t("common.c3") }}
<view class="m-l-xs">
{{ maxNum }}
{{ $t("contract.d8") }}
</view>
</view>
<img :src="$localImgUrl('antOutline.png')" alt="" class="h-18" />
</view>
<!-- <view class="d-flex justify-between m-y-xs align-center">
<v-input
:placeholder="$t('contract.i4')"
v-model="form.tp_trigger_price"
@ -203,7 +247,35 @@
class="h-30 p-x-ms m-l-xs rounded fn-12 bg-form-panel-3"
>
</v-input>
</view>
</view> -->
<!-- 止盈/止损 -->
<view style="margin-top: 10px;">
<van-checkbox :value="shows" @change="shows = !shows" checked-color="#fff" shape="square" icon-size="15px">
<text class="col-fff m-r-xs" style="font-size: 13px;">{{ $t('contract.i4') }}/{{ $t('contract.i7') }}</text>
</van-checkbox>
</view>
<view style="margin: 10px 0px;" v-if="shows">
<v-input
v-model="form.tp_trigger_price"
:placeholder="$t('contract.i4')" style="border: 1px solid #202020;">
<template #right>
<view class="fn-bold" style="margin-right: 10px;">
<!-- {{ $t("contract.d8") }} -->
USDT</view>
</template>
</v-input>
<v-input
v-model="form.sl_trigger_price"
:placeholder="$t('contract.i7')" style="border: 1px solid #202020;margin-top: 5px;">
<template #right>
<view class="fn-bold" style="margin-right: 10px;">
<!-- {{ $t("contract.d8") }} -->
USDT</view>
</template>
</v-input>
</view>
</view>
<view class="m-b-sm m-t-xs">
<template v-if="isLogin">
@ -214,11 +286,26 @@
size="small"
block
class="w-max rounded"
style="background-color: #25A74F;"
>
style="background-color: #25A74F;">
<span class="but_text">{{ $t("contract.c0") }}</span>
<!--<span class="fn-10 but_right">{{ $t("contract.e0") }}</span>-->
<!-- <span class="fn-10 but_right">{{ $t("contract.e0") }}</span> -->
</v-button>
<view class="fn-sm m-t-xs d-flex">
<view class="">
可买
</view>
<view class="" style="margin-left: 10px;">
{{amount}} BTC
</view>
</view>
<view class="d-flex">
<view class="">
成本
</view>
<view class="" style="margin-left: 10px;">
--
</view>
</view>
</template>
<template v-else>
<v-button
@ -227,7 +314,7 @@
to="/pages/login/index"
:type="'green'"
class="w-max rounded"
style="background-color: #25A74F;"
style="background-color: #25A74F;"
>{{ $t("exchange.d0") }}
</v-button
>
@ -250,11 +337,27 @@
size="small"
block
class="w-max rounded"
style="background-color: #CA3F66;"
style="background-color: #CA3F66;"
>
<span class="but_text">{{ $t("contract.c2") }}</span>
<!--<span class="fn-10 but_right">{{ $t("contract.e2") }}</span>-->
</v-button>
<view class="fn-sm m-t-xs d-flex">
<view class="">
可卖
</view>
<view class="" style="margin-left: 10px;">
{{amount}} BTC
</view>
</view>
<view class="d-flex">
<view class="">
成本
</view>
<view class="" style="margin-left: 10px;">
--
</view>
</view>
</template>
<template v-else>
<v-button
@ -268,25 +371,25 @@
</v-button
>
</template>
<view class="fn-sm m-t-xs d-flex justify-between">
<!-- <view class="fn-sm m-t-xs d-flex justify-between">
<view class="">
{{ $t("common.c3") }}
</view>
<view class="">
{{ maxNum }}
<!-- {{ $t("contract.d8") }} -->
{{ $t("contract.d8") }}
</view>
</view>
<view class="fn-sm m-t-xs d-flex justify-between">
</view> -->
<!-- <view class="fn-sm m-t-xs d-flex justify-between">
<view class="">
{{ $t("common.c4") }}
<!-- {{ $t('contract.d2') }} -->
{{ $t('contract.d2') }}
</view>
<view class="">
<!-- {{ form.amount}} USDT -->
{{ form.amount}} USDT
{{amount}}
</view>
</view>
</view> -->
</view>
<!-- <view
class="m-b-xs border-t border-b p-y-xs d-flex justify-between align-center"
@ -308,6 +411,17 @@
</view> -->
</view>
<view class="w-6/12 p-r-md p-l-md box-size">
<view style="margin-top: 20px;" class="m-b-md">
<view style="text-align: right;">
{{ $t("contract.d6") }}
<van-icon @click="popshow=true" class="color-theme-1 m-l-xs" name="info-o"/>
</view>
<view class="num color-light fn-right" style="margin-top:8px;">{{
accountInfo.riskRate || "0%"
}}
</view>
</view>
<sell-and-buy
@price="form.entrust_price = $event"
:sellList="sellList"
@ -865,7 +979,15 @@ export default {
refreshing: false,
pingAmount: '',
imgurl: '',
bao: 0
bao: 0,
marks:{
2: '0%',
25: '25%',
50: '50%',
75: '75%',
100: '100%',
},
shows:false
};
},
computed: {
@ -1679,7 +1801,10 @@ export default {
bottom: 8px;
}
}
.border_1{
border: 1px solid #212121;
border-radius: 5px;
}
/deep/ .van-stepper {
display: flex;
justify-content: space-between;
@ -1742,6 +1867,13 @@ export default {
display: block;
}
}
::v-deep uni-input{
background-color: #121212;
}
::v-deep .van-checkbox__icon--checked{
color: #000;
}
.span-next {
width: 30%;
@ -1772,13 +1904,6 @@ export default {
border-radius: 3px;
}
/deep/ .el-slider__stop {
width: 5px;
height: 10px;
border-radius: 0;
top: -2px;
background-color: $form-panel-4;
}
.w-50 {
width: 48%;
@ -1832,7 +1957,9 @@ export default {
width: 100%;
box-sizing: border-box;
}
.col-fff{
color: white;
}
.w-23 {
width: 22%;
}
@ -1962,4 +2089,29 @@ export default {
.red /deep/ uni-button{
background-color: #CA3F66 !important;
}
//
::v-deep .el-slider__marks-text{
font-size: 18rpx;
}
::v-deep .el-slider__runway{
background-color: #2B2B2B;
height: 8rpx;
}
::v-deep .el-slider__bar{
background-color: white;
}
::v-deep .el-slider__stop{
background-color: #121212;
border: 2px solid #2B2B2B;
top: -3px;
// border-radius: 10px;
}
::v-deep .el-slider__button{
width: 20rpx;
height: 20rpx;
border: 2px solid #fff;
background-color: #121212;
}
</style>

12
pages/exchange/sell-and-buy.vue

@ -2,8 +2,8 @@
<div class="p-l-xs d-flex flex-col dep-list">
<!-- -->
<div class="d-flex justify-between fn-xs m-b-xs">
<span>{{$t('exchange.d2')}}</span>
<span>{{$t('exchange.c5')}}</span>
<span>{{$t('exchange.d2')}}<view>(USDT)</view></span>
<span>{{$t('exchange.c5')}}<view>(BTC)</view></span>
</div>
<div class=" overflow-scroll rotatebox" v-if="symbol!='GITP/USDT'">
<div class="rotateZ">
@ -16,7 +16,7 @@
<span class="color-sell" v-if="item.price>100">{{omitTo(item.price,2)}}</span>
<span class="color-sell" v-if="item.price>1&&item.price<100">{{omitTo(item.price,4)}}</span>
<span class="color-sell" v-if="item.price<1">{{omitTo(item.price,6)}}</span>
<span class="p-r-xs">{{omitTo(item.amount,2)}}</span>
<span class="p-r-xs" style="color: white;">{{omitTo(item.amount,2)}}</span>
<div
class="proagess h-max bg-sell-transparent"
:style="{width:getValue(item.amount)+'%'}"
@ -38,7 +38,7 @@
<span class="color-buy" v-if="item.price>100">{{omitTo(item.price,2)}}</span>
<span class="color-buy" v-if="item.price>1&&item.price<100">{{omitTo(item.price,4)}}</span>
<span class="color-buy" v-if="item.price<1">{{omitTo(item.price,6)}}</span>
<span class="p-r-xs">{{omitTo(item.amount,2)}}</span>
<span class="p-r-xs" style="color: white;">{{omitTo(item.amount,2)}}</span>
<div class="proagess h-max bg-buy-transparent" :style="{width:getValue(item.amount)+'%'}"></div>
</div>
</div>
@ -128,10 +128,10 @@ export default {
}
}
.color-buy{
color: #2A7745;
color: #2C7543;
}
.color-sell{
color: #CA3F66;
color: #89334D;
}
</style>
Loading…
Cancel
Save