wwbsr/pages/exchange/buy-option-form.vue

<template>
    <view>
        <view class="icon fn-center m-t-md">
            <img :src="$localImgUrl('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}}）
			<text v-if="type==1" class="color-buy">{{$t('miao.a2')}}</text>
			<text v-if="type==2" class="color-sell">{{$t('miao.a3')}}</text>
        </view>
<!-- 		<view class="form-item">
		     <view class="label p-l-md fn-13 color-light m-b-xs">当前价格</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 active">
		             <view class="label p-y-xs color-light fn-11">价格</view>
		             <view class="income fn-10 color-light bg-panel-1">25.25469</view>
		             <img class="tips w-22" src="static/img/active_tips.png"/>
		         </view>
		     </view>
		 </view> -->
		 <view class="d-flex align-center m-t-sm" v-if="timeList.length">
			  <view class="label p-x-md fn-13 color-light w-80">{{$t('miao.a4')}}</view>
			  <v-picker :list="timeList" range-value="id" @change="changeTimeId" range-label="time_name" v-model="timeId" class="form-input p-y-xs  m-r-xs flex-1 border-b">
			      <view class="d-flex align-center justify-between" v-if="timeIndex!=-1">
			          <view class="d-flex align-center flex-1">
						  <view class="flex-1 d-flex justify-center">{{timeList[timeIndex].time_name}}</view>
						  <view class="flex-1 d-flex justify-center">{{timeList[timeIndex].lv}}</view>
					  </view>
			          <van-icon name="arrow-down" />
			      </view>
			  </v-picker>
		 </view>
		 <view class="d-flex align-center m-t-md">
			  <view class="label p-x-md fn-13 color-light w-80">{{$t('miao.a5')}}</view>
			  <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 class="fn-sm d-flex justify-between p-x-md p-y-xs">
		     <view>{{$t('miao.a6')}}：{{data.fee}}%</view>
		     <view>{{$t('miao.a7')}}：{{data.account}}</view>
		 </view>
        <view class="p-md">
            <v-button block :type="type==1?'green':'red'" class="w-max rounded-lg" @click="buy" ref="btn">{{$t('option.b7')}}</v-button>
        </view>
    </view>
</template>
<script>
import Option from "@/api/option";
import Contract from "@/api/contract";
import math from "@/utils/class/math";
export default {
    props: ["currentAndNext", "type", "query"],
    watch: {
        type() {
            // 调用接口
        },
        query() {
            // this.getOddsList();
        },
        currentAndNext() {
            // this.getOddsList();
        },
    },
    computed: {
        // 类型
        typeObj() {
            let typeObj = new Object();
            switch (this.type) {
                
            }
            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}`,
                };
            });
        },
    },
    data() {
        return {
            detail: {},
            rangeUuid: "",
            num: "",
            coinList: [],
            activeCoinId: "",
            selectAmount:[
              100,200,300,1000
            ],
			timeList:[],
			timeId:1,
			timeIndex:0,
			data:[]
        };
    },
    methods: {
		changeTimeId(val,index,item){
			this.timeId = val
			this.timeIndex = index
			this.$forceUpdate()
		},
        // 获取预计收益
        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) => {
                    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,
            };
            if (!localStorage.getItem("token")) return;
            Option.getUserCoinBalance(data)
                .then((res) => {
                    this.$set(item, "balance", res.data.usable_balance);
                })
                .catch(() => { });
        },
		
		getinfo(){
			Contract.marketInfoM({coin_name:this.query.pair_time_name}).then((res)=>{
				this.data = res.data
				let reteList = res.data.rate.split(",")
				let miaoList = res.data.time.split(",")
				this.timeList = []
				for (let i in reteList) {
					this.timeList.push({
						lv:reteList[i]+"%",
						time_name:miaoList[i]+" "+"sec",
						lv_value:reteList[i],
						time_value:miaoList[i],
						id:i
					})
				}
			})
		},
        // 购买
        buy() {
			if(!this.num){
				return this.$toast(this.$t('option.b4'))
			}
            let data = {
                trade_money: this.num,  //下单金额
                type: this.type,	//1涨2跌
                time: this.timeList[this.timeIndex].time_value, //时间
                rate: this.timeList[this.timeIndex].lv_value,//赔率
				coin_name:this.query.pair_time_name //币种名称
            };
			Contract.createOrderM(data).then((res)=>{
				if(res.code == 200){
					this.getinfo()
					this.$toast.success(this.$t("miao.a8"));
					// 刷新购买记录
					this.$emit('refreshRecord')
					this.$emit('close')
				}
			})
			
        },
    },
    created() {
        this.getOddsList();
        this.getBetCoinList();
		this.getinfo()
		
    },
};
</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;
        }
      }
    }
}
.select-amount{
  .item{
    padding: 5px 0;
  }
}
</style>