first

zzzz

2024-04-19 ffbacd33ca88f62ec51bcbfaa2c250790a713e9d

first

 dist1.zip

Binary files differ

 src/components/perpetual-open/index.vue

@@ -241,6 +241,7 @@
                class="w-30 h-6"
              />
            </div>

            <input
              :placeholder="
                selectIndex == 1

 src/components/popup-confirm-order/index.vue

@@ -1,91 +1,145 @@
<template>
    <div class="popup-delivery w-700 rounded-2xl overflow-hidden px-32 box-border pb-50">
       <div class="border-b-color pt-54 pb-36 relative ">
            <h1 class="font-38 px-32 textColor">{{$t('订单确认')}}</h1>
            <img src="@/assets/image/icon-close.png" class="w-38 h-38 absolute right-0 top-20" @click="onClose"/>
       </div>
       <div class="flex flex-wrap pt-16 tabBackground p-10 box-border">
            <div class="w-half flex justify-between items-center pr-10 box-border"><span class="text-grey">{{$t('交易品种')}}</span><span class="textColor">{{symbol.toUpperCase()}}</span></div>
            <div  class="w-half flex justify-between items-center box-border"><span class="text-grey">{{$t('方向')}}</span><span :class="direction ==='buy' ? 'text-green': 'text-red'">{{direction ==='buy' ? $t('开多') : $t('开空')}}</span></div>
            <div  class="w-half flex justify-between items-center pr-10 box-border mt-16"><span class="text-grey">{{$t('当前价格')}}</span><span class="textColor">{{price}}</span></div>
       </div>
       <h2 class="font-30 mt-16">{{$t('交货时间')}}</h2>
        <ul class="flex flex-wrap w-full">
            <li v-for="(item, index) in paras" :key="item.para_id" class="h-92 flex items-center mt-17 w-half" @click="select(index)">
                <p class="w-95 h-full flex justify-center items-center font-22 flex-1"
                :class="active ===item.para_id ? 'bg-light-blue text-white' : 'bgDark textColor'">{{ item.time_num + item.time_unit.substr(0, 1) }}</p>
                <p class="w-125 h-full flex justify-center items-center font-22 flex-1"
                :class="active === item.para_id ? 'bg-dark-blue text-white': 'contBackground textColor'">{{ item.profit_ratio }}%</p>
            </li>
        </ul>
        <div class="flex justify-between items-center mt-8 text-grey tabBackground mt-20 py-15 px-10 textColor">
            <input :placeholder="$t('最少') + paras[index].buy_min" class="h-full" style="border: none; background: none;" type="number" v-model="amount"/>
            <span>USDT</span>
        </div>
        <div class="flex justify-between items-center mt-8 text-grey">
            <span>{{$t('可用的')}}</span>
            <span>{{balance}}</span>
        </div>
        <div class="flex justify-between items-center mt-8 text-grey">
            <span>{{$t('费用')}}</span>
            <span>{{amount * paras[index].unit_fee}}</span>
        </div>
        <div class="h-80 rounded w-full btnMain text-white flex justify-center items-center mt-24" @click="onConfirm">{{$t('确认订单')}}</div>
  <div
    class="popup-delivery w-700 rounded-2xl overflow-hidden px-32 box-border pb-50"
  >
    <div class="border-b-color pt-54 pb-36 relative">
      <h1 class="font-38 px-32 textColor">{{ $t("订单确认") }}</h1>
      <img
        src="@/assets/image/icon-close.png"
        class="w-38 h-38 absolute right-0 top-20"
        @click="onClose"
      />
    </div>
    <div class="flex flex-wrap pt-16 tabBackground p-10 box-border">
      <div class="w-half flex justify-between items-center pr-10 box-border">
        <span class="text-grey">{{ $t("交易品种") }}</span
        ><span class="textColor">{{ symbol.toUpperCase() }}</span>
      </div>
      <div class="w-half flex justify-between items-center box-border">
        <span class="text-grey">{{ $t("方向") }}</span
        ><span :class="direction === 'buy' ? 'text-green' : 'text-red'">{{
          direction === "buy" ? $t("开多") : $t("开空")
        }}</span>
      </div>
      <div
        class="w-half flex justify-between items-center pr-10 box-border mt-16"
      >
        <span class="text-grey">{{ $t("当前价格") }}</span
        ><span class="textColor">{{ price }}</span>
      </div>
    </div>
    <h2 class="font-30 mt-16">{{ $t("交货时间") }}</h2>
    <ul class="flex flex-wrap w-full">
      <li
        v-for="(item, index) in paras"
        :key="item.para_id"
        class="h-92 flex items-center mt-17 w-half"
        @click="select(index)"
      >
        <p
          class="w-95 h-full flex justify-center items-center font-22 flex-1"
          :class="
            active === item.para_id
              ? 'bg-light-blue text-white'
              : 'bgDark textColor'
          "
        >
          {{ item.time_num + item.time_unit.substr(0, 1) }}
        </p>
        <p
          class="w-125 h-full flex justify-center items-center font-22 flex-1"
          :class="
            active === item.para_id
              ? 'bg-dark-blue text-white'
              : 'contBackground textColor'
          "
        >
          {{ item.profit_ratio }}%
        </p>
      </li>
    </ul>
    <div
      class="flex justify-between items-center mt-8 text-grey tabBackground mt-20 py-15 px-10 textColor"
    >
      <input
        :placeholder="$t('最少') + paras[index].buy_min"
        class="h-full"
        style="border: none; background: none"
        type="number"
        v-model="amount"
      />
      <span>USDT</span>
    </div>
    <div class="flex justify-between items-center mt-8 text-grey">
      <span>{{ $t("可用的") }}</span>
      <span>{{ balance }}</span>
    </div>
    <div class="flex justify-between items-center mt-8 text-grey">
      <span>{{ $t("费用") }}</span>
      <span>{{ amount * paras[index].unit_fee }}</span>
    </div>
    <div
      class="h-80 rounded w-full btnMain text-white flex justify-center items-center mt-24"
      @click="onConfirm"
    >
      {{ $t("确认订单") }}
    </div>
  </div>
</template>
<script>
export default {
    name: 'PopupConfirmOrder',
    props: {
        paras: {
            type: Array,
            default() {
                return []
            }
        },
        symbol: {
            type: String,
        },
        direction: {
            type: String
        },
        balance: {
        },
        paraIndex: {},
        price: {}
  name: "PopupConfirmOrder",
  props: {
    paras: {
      type: Array,
      default() {
        return [];
      },
    },
    data() {
        return {
            amount: '', // 金额
            active: '',
            index: 0
        }
    symbol: {
      type: String,
    },
    created() {
        this.active = this.paras[this.index].para_id
    direction: {
      type: String,
    },
    methods: {
        select(index) {
            this.index = index
            this.active = this.paras[this.index].para_id
        },
        onClose() { // 关闭
            this.$emit('close')
        },
        onConfirm() { // 确认订单
            if (this.amount==''){
                this.$toast(this.$t('请输入金额'))
                return
            }
            if (this.amount / 1 > this.balance / 1) {
                this.$toast(this.$t('余额不足'))
                return
            }
            this.$emit('confirm', {
                amount: this.amount,
                para_id: this.active
            })
        }
    }
}
    balance: {},
    paraIndex: {},
    price: {},
  },
  data() {
    return {
      amount: "", // 金额
      active: "",
      index: 0,
    };
  },
  created() {
    this.active = this.paras[this.index].para_id;
  },
  methods: {
    select(index) {
      this.index = index;
      this.active = this.paras[this.index].para_id;
    },
    onClose() {
      // 关闭
      this.$emit("close");
    },
    onConfirm() {
      // 确认订单
      if (this.amount == "") {
        this.$toast(this.$t("请输入金额"));
        return;
      }
      if (this.amount / 1 > this.balance / 1) {
        this.$toast(this.$t("余额不足"));
        return;
      }
      this.$emit("confirm", {
        amount: this.amount,
        para_id: this.active,
      });
    },
  },
};
</script>

 src/page/perpetualContract/index.vue

@@ -1,58 +1,8 @@
<template>
  <div :key="symbol" class="pb-108 no_touch">
    <!-- 头部区 -->

    <ContractHeader
      v-if="symbol === 'wld'"
      :symbol="'FTB'"
      :range="range"
      :selectIndex="selectIndex"
      :balance="userInfo.balance"
      @tab="onTopTab"
      @update-coin="onUpdate"
    >
    </ContractHeader>
    <ContractHeader
      v-else-if="symbol === 'mln'"
      :symbol="'DKL'"
      :range="range"
      :selectIndex="selectIndex"
      :balance="userInfo.balance"
      @tab="onTopTab"
      @update-coin="onUpdate"
    >
    </ContractHeader>
    <ContractHeader
      v-else-if="symbol === 'qtum'"
      :symbol="'BQHN'"
      :range="range"
      :selectIndex="selectIndex"
      :balance="userInfo.balance"
      @tab="onTopTab"
      @update-coin="onUpdate"
    >
    </ContractHeader>
    <ContractHeader
      v-else-if="symbol === 'knc'"
      :symbol="'XCM'"
      :range="range"
      :selectIndex="selectIndex"
      :balance="userInfo.balance"
      @tab="onTopTab"
      @update-coin="onUpdate"
    >
    </ContractHeader>
    <ContractHeader
      v-else-if="symbol === 'vet'"
      :symbol="'ACG'"
      :range="range"
      :selectIndex="selectIndex"
      :balance="userInfo.balance"
      @tab="onTopTab"
      @update-coin="onUpdate"
    >
    </ContractHeader>
    <ContractHeader
      v-else
      :symbol="symbol"
      :range="range"
      :selectIndex="selectIndex"
@@ -134,22 +84,7 @@
    </div>
    <div class="fixed w-full shadow z-10 tabBackground1">
      <div class="flex justify-between px-30 py-10">
        <span class="font-24 textColor2" v-if="symbol === 'wld'"
          >FTB/USDT&nbsp;{{ $t("k线图表") }}</span
        >
        <span class="font-24 textColor2" v-else-if="symbol === 'mln'"
          >DKL/USDT&nbsp;{{ $t("k线图表") }}</span
        >
        <span class="font-24 textColor2" v-else-if="symbol === 'qtum'">
          BQHN/USDT&nbsp;{{ $t("k线图表") }}
        </span>
        <span class="font-24 textColor2" v-else-if="symbol === 'knc'"
          >XCM/USDT&nbsp;{{ $t("k线图表") }}</span
        >
        <span class="font-24 textColor2" v-else-if="symbol === 'vet'"
          >ACG/USDT&nbsp;{{ $t("k线图表") }}</span
        >
        <span class="font-24 textColor2" v-else
        <span class="font-24 textColor2"
          >{{ symbol.toUpperCase() }}/USDT&nbsp;{{ $t("k线图表") }}</span
        >
        <van-icon