<template>
|
<view class='fatherView'>
|
<view class="icon fn-center m-t-md">
|
<img src="static/img/Turn.png" @click="$emit('close')" class="w-30" alt="">
|
</view>
|
<view class="title fn-15 p-y-sm p-x-md fn-center">
|
{{$t('option.a5')}}（{{query.pair_time_name}}）{{$t('option.a0')}}
|
<text :class="typeObj.color">{{typeObj.typeText}}</text>
|
</view>
|
<view class="d-flex justify-between align-center bg-panel-4 p-x-md border-t border-b p-y-xs">
|
<view>
|
{{current_scene.begin_time_text}}
|
<van-tag plain v-if="type==1" type="success">{{current_scene.status_text}}</van-tag>
|
<van-tag plain v-else-if="type==2" type>{{current_scene.status_text}}</van-tag>
|
<van-tag plain v-else-if="type==3" type="danger">{{current_scene.status_text}}</van-tag>
|
</view>
|
<view>
|
<van-count-down class="color-default" :time="current_scene.lottery_time*1000" />
|
</view>
|
</view>
|
<view class="form-item m-y-md">
|
<view class="label p-l-md fn-13 color-light m-b-xs">{{$t('option.b1')}}</view>
|
<view class="box income-box p-l-md">
|
<view class="item fn-center d-inline-block rounded-xs bg-panel-4 w-80 m-r-md" :class="{active:rangeUuid==item.uuid}" v-for="item in (typeObj.rangeList||[])" :key="item.uuid" @click="rangeUuid=item.uuid">
|
<view class="label p-y-xs color-light fn-11">{{typeObj.direction}}</view>
|
<view class="color-danger fn-16"> {{type==2?'±':'≥'}}{{item.range}}%</view>
|
<view class="income fn-10 color-light bg-panel-1">{{$t('option.b2')}}{{item.odds*100}}%</view>
|
<img class="tips w-22" src="static/img/active_tips.png"/>
|
</view>
|
</view>
|
</view>
|
<view class="form-item p-x-md m-t-md">
|
<view class="label fn-13 color-light m-b-xs">{{$t('option.b3')}}</view>
|
<view class="d-flex p-x-xs rounded-xs">
|
<v-picker :list="coinList" range-value="id" range-label="coin_name" v-model="activeCoinId" class="form-input p-y-xs w-80 m-r-xs ">
|
<view class="d-flex align-center justify-between">
|
{{activeCoin.coin_name}}
|
<van-icon name="arrow-down" />
|
</view>
|
</v-picker>
|
<view class="border-b flex-fill">
|
<v-input :placeholder="$t('option.b4')" v-model="num" type="number" class="color-light form-input w-max p-y-xs d-flex" />
|
</view>
|
</view>
|
</view>
|
<view class="p-x-xs d-flex justify-between p-md border-b select-amount">
|
<view class="item bg-panel-4 color-light fn-13 fn-center rounded-xs min-w-72" @click="num=item" v-for="item in selectAmount" :key="item">
|
{{item}}
|
</view>
|
</view>
|
<view class="fn-sm d-flex justify-between p-x-md p-y-xs">
|
<view>{{$t('option.b5')}}：{{activeCoin.balance}}</view>
|
<view>{{$t('option.b6')}}：{{expected(num,activeRange.odds)}}{{activeCoin.coin_name}}</view>
|
</view>
|
|
<view class="p-md">
|
<v-button block :type="typeObj.btn" class="w-max rounded-lg" @click="buy" ref="btn">{{$t('option.b7')}}</v-button>
|
</view>
|
<!-- 弹窗 -->
|
<!-- <view v-if='isBuy' class="popupTip" :style='"height:"+this.screenHeight+"px"'> -->
|
<view v-if='isBuy' class="popupTip" :style='"height:100%"'>
|
<view class="popup-buy">
|
<view class="popup-content">
|
<view class="bg-box">
|
<view class="rightView"></view>
|
<view class="coinKind">
|
{{query.pair_time_name}}
|
</view>
|
<view class="popClose">
|
<uni-icons @click='closePop' type="closeempty" size="22"></uni-icons>
|
</view>
|
</view>
|
<view class="countDownView">
|
<view class="">
|
<view v-if='count>0' class="countDownTime">
|
{{count}}<text>s</text>
|
</view>
|
<!-- <view v-if='count==0' class="countDownTime">
|
<text v-if="shuying == 1" style="color: green;">+{{jiesuan}}</text>
|
<text style="color: green;">{{jiesuan}}</text>
|
</view> -->
|
<view v-if='count==0' class="countDownTime">
|
<text :class="colors">{{jiesuan}}</text>
|
</view>
|
</view>
|
</view>
|
<view class="currentPrice">
|
{{$t('contract.k1')}}：{{newPrice}}
|
</view>
|
<view class="popupInfo">
|
<view class="popupList" v-for="(item,index) in arrayData">
|
<view class="popTitle">
|
{{item.title}}
|
</view>
|
<view v-if="index == 3">
|
<view v-if="shuying == 1" :class="colors">
|
{{item.content}}
|
</view>
|
<view v-if="shuying == 0" :class="colors">
|
{{item.content}}
|
</view>
|
</view>
|
<view v-else>
|
{{item.content}}
|
</view>
|
</view>
|
</view>
|
</view>
|
<!-- <v-button block :type="typeObj.btn" class="w-max rounded-lg continueBtn" @click="closePop" ref="btn">Continue to purchase</v-button> -->
|
<button class='continueBtn' @click='closePop' type="primary">Continue to purchase</button>
|
</view>
|
</view>
|
</view>
|
</template>
|
<script>
|
import Option from "@/api/option";
|
import math from "@/utils/class/math";
|
import { mapState } from "vuex";
|
export default {
|
props: ["currentAndNext", "type", "query",'isShow'],
|
watch: {
|
type() {
|
if (!this.typeObj.rangeList[0]) return;
|
this.rangeUuid = this.typeObj.rangeList[0].uuid;
|
},
|
query() {
|
this.getOddsList();
|
},
|
currentAndNext() {
|
this.getOddsList();
|
},
|
isShow(){
|
if(this.isShow){
|
this.getBetCoinList();
|
}else{
|
this.activeCoin.balance=''
|
}
|
}
|
},
|
computed: {
|
// 类型
|
typeObj() {
|
let typeObj = new Object();
|
switch (this.type) {
|
case 1:
|
typeObj.typeText = this.$t("option.b8");
|
typeObj.direction = this.$t("option.a2");
|
typeObj.color = "color-buy";
|
typeObj.btn = "green";
|
typeObj.rangeList = this.detail.up_odds || [];
|
break;
|
case 2:
|
typeObj.typeText = this.$t("option.b9");
|
typeObj.direction = this.$t("option.b0");
|
typeObj.btn = "blue";
|
typeObj.rangeList = this.detail.draw_odds || [];
|
break;
|
case 3:
|
typeObj.typeText = this.$t("option.c0");
|
typeObj.direction = this.$t("option.a3");
|
typeObj.color = "color-sell";
|
typeObj.btn = "red";
|
typeObj.rangeList = this.detail.down_odds || [];
|
break;
|
}
|
return typeObj;
|
},
|
// 选中倍率
|
activeRange() {
|
return (
|
this.typeObj.rangeList.find((item) => item.uuid == this.rangeUuid) || {}
|
);
|
},
|
// 当前场次
|
current_scene() {
|
return this.currentAndNext.current_scene || {};
|
},
|
// 下一场
|
next_scene() {
|
return this.currentAndNext.next_scene || {};
|
},
|
// 选中币种
|
activeCoin() {
|
return this.coinList.find((item) => item.id == this.activeCoinId) || {};
|
},
|
// 使用资产所占总资产额度
|
moneyStep() {
|
if (!this.activeCoin.balance || !this.activeCoin.balance * 1) return 3;
|
let rate = this.num / (this.activeCoin.balance * 1);
|
if (rate < 0.25) return 0;
|
if (rate < 0.5) return 1;
|
if (rate < 0.75) return 2;
|
if (rate < 1) return 3;
|
return 4;
|
},
|
// 涨跌幅列表
|
rangeList() {
|
return this.typeObj.rangeList.map((item) => {
|
return {
|
value: item.uuid,
|
label: `${this.typeObj.typeText}≥${item.range}% ${this.$t("option.a4")} ${item.odds}`,
|
};
|
});
|
},
|
...mapState({
|
ws: "ws",
|
}),
|
// 弹窗相关
|
|
},
|
data() {
|
return {
|
// 弹窗数据
|
isBuy:false,
|
screenHeight:667,
|
arrayData:[
|
{title:this.$t('otc.h7'),content:''},
|
{title:this.$t('contract.d2'),content:"0"},
|
{title:this.$t('contract.b0'),content:"0"},
|
{title:this.$t('option.b6'),content:"0"},
|
],
|
count: 60, // 等待时间
|
timer: null, //定时器
|
//
|
detail: {},
|
rangeUuid: "",
|
num: "",
|
coinList: [],
|
activeCoinId: "",
|
selectAmount:[
|
100,200,300,1000
|
],
|
socketData:{},
|
newPrice:'0',
|
buyPrice:'0',
|
up_down:1,
|
odds:0,
|
buyNum:0,
|
jiesuan:'Settlement...',
|
shuying:0,
|
colors:'',
|
colorss:'',
|
is_jiesuan_status:false
|
};
|
},
|
methods: {
|
// 获取预计收益
|
expected(num1, num2) {
|
if (!num1 || !num2) return "0";
|
return math.multiple(num1, num2);
|
},
|
getOddsList() {
|
let data = {
|
pair_id: this.query.pair_id,
|
time_id: this.query.time_id,
|
};
|
Option.getOddsList(data).then((res) => {
|
this.detail = res.data;
|
this.rangeUuid = this.typeObj.rangeList[0].uuid;
|
});
|
},
|
selectCoin() {
|
let arr = this.coinList.map((item) => {
|
return {
|
value: item.id,
|
label: item.coin_name,
|
};
|
});
|
this.$picker(arr, { value: this.activeCoinId })
|
.then((res) => {
|
this.activeCoinId = res;
|
this.checkCoin(this.activeCoin);
|
})
|
.catch(() => { });
|
},
|
// 获取期权交易币种
|
getBetCoinList() {
|
Option.getBetCoinList()
|
.then((res) => {
|
console.log(res);
|
this.coinList = res.data;
|
this.activeCoinId = this.coinList[0].id;
|
this.checkCoin(this.coinList[0]);
|
})
|
.catch(() => { });
|
},
|
// 选中交易币种 (需要登录)
|
checkCoin(item) {
|
let data = {
|
coin_id: item.coin_id,
|
};
|
Option.getUserCoinBalance(data)
|
.then((res) => {
|
this.$set(item, "balance", res.data.usable_balance);
|
})
|
.catch(() => { });
|
},
|
// 倒计时结束
|
|
// 购买
|
buy() {
|
if(this.num==''){
|
this.$toast(this.$t("option.b4"));
|
return false
|
}
|
|
// this.open();
|
let data = {
|
bet_amount: this.num,
|
bet_coin_id: this.activeCoinId,
|
odds_uuid: this.rangeUuid,
|
scene_id: this.next_scene.scene_id,
|
};
|
this.jiesuan = 'Settlement...'
|
this.arrayData[2].content = this.newPrice
|
Option.betScene(data, { btn: this.$refs.btn }).then((res) => {
|
console.log(res);
|
this.isBuy=true;
|
this.arrayData[0].content = res.data.pair_name
|
this.arrayData[1].content = res.data.bet_amount
|
this.up_down = res.data.up_down
|
this.odds = res.data.odds
|
let order_id = res.data.order_id
|
this.buyNum = this.num
|
this.count = this.detail.seconds
|
if(parseFloat(res.data.delivery_amount) > 0){
|
this.colorss = 'glen';
|
|
}else{
|
this.colorss = 'reds';
|
}
|
// this.shuying = res.data.delivery_amount
|
if (!this.timer) {
|
this.timer = setInterval(() => {
|
if (this.count > 0) {
|
this.count--;
|
} else {
|
clearInterval(this.timer);
|
this.timer = null;
|
//定时查询订单是否结算
|
var timer2 = setInterval(() => {
|
Option.betSceneDetails({ order_id: order_id }).then(( ress ) => {
|
if(ress.data.status == 2){
|
this.is_jiesuan_status = true
|
clearInterval(timer2)
|
var str = ''
|
if(ress.data.delivery_amount > 0){
|
this.colors = 'glen'
|
str = '+'
|
}else{
|
this.colors = 'reds'
|
str = ''
|
}
|
this.jiesuan = str + Math.floor((ress.data.delivery_amount * 100) / 100 )
|
this.arrayData[3].content = str + Math.floor((ress.data.delivery_amount * 100) / 100 )
|
}
|
}).catch(eeor => {
|
clearInterval(timer2)
|
console.log('getRedirectUrl==' + eeor.toString())
|
})
|
}, 5000);
|
}
|
}, 1000)
|
}
|
// this.$emit("close");
|
this.$emit("success");
|
this.num = "";
|
this.$toast.success(this.$t("option.c1"));
|
this.checkCoin(this.activeCoin);
|
});
|
},
|
closePop(){
|
this.is_jiesuan_status = false
|
this.isBuy=false;
|
//刷新当前页面
|
this.$router.go(0)
|
},
|
|
},
|
mounted() {
|
this.interval = setInterval(() => {
|
let diff = '1';
|
this.countDown -= diff;
|
if (this.countDown <= 0) {
|
clearInterval(this.interval)
|
}
|
}, 1000);
|
|
},
|
created() {
|
this.ws.on("message", (res) => {
|
let { data, sub } = res;
|
if(data.price){
|
this.newPrice = data.price
|
if(this.odds > 0 && this.is_jiesuan_status === false){
|
if(this.up_down == 1){
|
if(this.newPrice < this.buyPrice){
|
this.colors = 'glen'
|
this.arrayData[3].content = '+'+ Math.floor((this.buyNum * this.odds * 100) / 100)
|
}else if(this.newPrice > this.buyPrice){
|
this.colors = 'reds'
|
this.arrayData[3].content = '-'+ Number(this.buyNum)
|
}else{
|
this.arrayData[3].content = '0.00'
|
}
|
}else if(this.up_down == 2){
|
if(this.newPrice < this.buyPrice){
|
this.colors = 'reds'
|
this.arrayData[3].content = '-'+ Number(this.buyNum)
|
}else if(this.newPrice > this.buyPrice){
|
this.colors = 'glen'
|
this.arrayData[3].content = '+'+ Math.floor((this.buyNum * this.odds * 100) / 100)
|
}else{
|
this.arrayData[3].content = '0.00'
|
}
|
}
|
}
|
}
|
// console.log(data.price,sub)
|
// switch (sub) {
|
// // case `buyList_${symbol}`:
|
// // this.buyList = data;
|
// // break;
|
// // case `sellList_${symbol}`:
|
// // this.sellList = data.sort((a, b) => b.price - a.price);
|
// // break;
|
// case `tradeList_${symbol}`:
|
// // if(this.tradeList.length>20){
|
// // this.tradeList.unshift(data);
|
// // this.tradeList.pop();
|
// // }else{
|
// // this.tradeList.unshift(data)
|
// // }
|
// // this.addChartPoint(data);
|
// // this.newPrice = data;
|
// console.log(data)
|
// break;
|
// }
|
});
|
// this.ws.on("message", (res) => {
|
// let { data, sub } = res;
|
// let symbol = this.coinList.symbol
|
// console.log(this.coinList)
|
// console.log(this.query)
|
// // console.log(data)
|
// // console.log(sub)
|
// if (sub == "sceneListNewPrice") {
|
// if (data.pair_time_name == this.query.pair_time_name) {
|
// // console.log(data)
|
// this.socketData = data;
|
// }
|
// }
|
// });
|
this.getOddsList();
|
this.getBetCoinList();
|
uni.getSystemInfo({
|
success:function(res){
|
this.screenheight=res.windowHeight;
|
console.log(res.windowHeight)
|
console.log(this.screenheight)
|
}
|
})
|
},
|
};
|
</script>
|
<style lang="scss" scoped>
|
::v-deep .van-step--horizontal .van-step__circle-container {
|
background: transparent;
|
}
|
.income-box {
|
width: 100%;
|
white-space: nowrap;
|
overflow: auto;
|
box-sizing: border-box;
|
.item{
|
overflow: hidden;
|
position: relative;
|
box-sizing: border-box;
|
.income{
|
padding: 2px 0;
|
}
|
.tips{
|
position: absolute;
|
top: 0;
|
right: 0;
|
display: none;
|
}
|
&.active{
|
border: 1px solid $red;
|
.tips{
|
display: block;
|
}
|
}
|
}
|
}
|
.glen{
|
color: green;
|
}
|
.reds{
|
color: red;
|
}
|
.select-amount{
|
.item{
|
padding: 5px 0;
|
}
|
}
|
// 弹窗样式
|
|
.bg-box{
|
display: flex;
|
}
|
.rightView{
|
width:22px;
|
}
|
.popClose{
|
text-align: right;
|
}
|
.popupTip{
|
position: fixed;
|
top:0;
|
background:rgba(0,0,0,0.4);
|
width:100%;
|
height:100%;
|
z-index:1000000
|
}
|
.popup-buy{
|
background-color: #fff;
|
border-radius: 10rpx;
|
width:90%;
|
position: absolute;
|
top: 50%;
|
transform: translateY(-50%);
|
left: 5%;
|
// z-index:1000000
|
}
|
.continueBtn{
|
height:40px;
|
line-height:40px;
|
color:#fff;
|
font-size:14px;
|
width:70%;
|
margin:15px auto;
|
|
}
|
.popup-content{
|
padding:10px;
|
padding-bottom:0;
|
}
|
.coinKind{
|
flex:1;
|
text-align: center;
|
}
|
.currentPrice{
|
text-align: center;
|
padding-top:10px;
|
}
|
.countDownView{
|
display: flex;
|
justify-content: center;
|
align-items: center;
|
|
}
|
.countTime{
|
position:absolute;
|
top:0;
|
left:0;
|
}
|
.popupInfo{
|
padding:10px;
|
padding-bottom:5px;
|
}
|
.popupInfo::after{
|
width:100%;
|
content:'';
|
height:0;
|
display: block;
|
visibility: hidden;
|
clear:both;
|
|
}
|
.popupList{
|
width:25%;
|
word-wrap:break-word;
|
float: left;
|
text-align: center;
|
}
|
.popTitle{
|
margin-bottom:5px;
|
}
|
.countDownTime{
|
width:90px;
|
height:90px;
|
border-radius: 50%;
|
display: flex;
|
justify-content: center;
|
align-items: center;
|
border:3px solid #f7b739;
|
font-size:40rpx;
|
color:#000;
|
}
|
.countDownTime1{
|
width:90px;
|
height:90px;
|
border-radius: 50%;
|
display: flex;
|
justify-content: center;
|
align-items: center;
|
border:3px solid #ccc;
|
font-size:30rpx;
|
color:#ccc;
|
}
|
uni-button[type=primary]{
|
background-color:#f7b739;
|
}
|
|
</style>
|
