feat

lxf

2025-04-18 66a33e936d39ec4db7fdffed5d646e044ccc43e9

 src/components/perpetual-open/index.vue

@@ -45,16 +45,19 @@
                @click="selectBtn">
                <img src="../../assets/image/public/warn.png" alt="warn-icon" class="w-25 h-25 pl-20" />
                <div class="text-center" style="width: 80%">{{ title }}</div>
                <img src="../../assets/image/public/grey-select.png" alt="select-icon" class="w-22 h-11 pr-20" />
                        <img src="../../assets/image/public/grey-select.png" alt="select-icon"
                           class="w-22 h-11 pr-20" />
              </div>
              <div class="option-box" v-show="isShow">
                <div class="font-30" v-for="item in selectData" :key="item.type" @click="selectItem(item)">
                        <div class="font-30" v-for="item in selectData" :key="item.type"
                           @click="selectItem(item)">
                  {{ item.title }}
                </div>
              </div>
            </div>
          </template>
          <contract-futrue v-if="selectIndex == 2" class="mb-20" :initFutrue="initFutrue" @paraId="onParaId" />
               <contract-futrue v-if="selectIndex == 2" class="mb-20" :initFutrue="initFutrue"
                  @paraId="onParaId" />
          <div class="h-76 lh-76 inputBackground mb-30 flex pr-20 justify-center rounded-lg textColor"
            v-if="selectIndex == 1">
            <input placeholder="" class="inputBackground w-full pl-20 h-76 border-none text-left rounded-lg"
@@ -63,13 +66,15 @@
          </div>
        <div class="h-76 lh-76 inputBackground mb-30 flex pr-20 justify-center rounded-lg textColor"
          v-if="selectIndex == 1">
          <input :placeholder="selectIndex == 1 ? $t('请输入止盈金额'): ''" class="inputBackground  pl-20 h-76 border-none text-left rounded-lg"
                  <input :placeholder="selectIndex == 1 ? $t('请输入止盈金额'): ''"
                     class="inputBackground  pl-20 h-76 border-none text-left rounded-lg"
             v-model="form.stop_price_profit" />
          <span class="font-22 font-400 textColor">{{ $t("止盈") }}</span>
        </div>
        <div class="h-76 lh-76 inputBackground mb-30 flex pr-20 justify-center rounded-lg textColor"
          v-if="selectIndex == 1">
          <input :placeholder="selectIndex == 1 ? $t('请输入止损金额'): ''" class="inputBackground  pl-20 h-76 border-none text-left rounded-lg"
                  <input :placeholder="selectIndex == 1 ? $t('请输入止损金额'): ''"
                     class="inputBackground  pl-20 h-76 border-none text-left rounded-lg"
            v-model="form.stop_price_loss" />
          <span class="font-22 font-400 textColor">{{ $t("止损") }}</span>
        </div>
@@ -86,7 +91,8 @@
              type="number" @input="onInput" />
            <div class="w-80 flex items-center justify-center" style="height: 100%">
              <template v-if="selectIndex == 1">
                <img @click="onAdd" src="../../assets/image/public/add.png" alt="reduce" class="w-30 h-30" />
                        <img @click="onAdd" src="../../assets/image/public/add.png" alt="reduce"
                           class="w-30 h-30" />
              </template>
              <template v-else>
                <span class="textColor">USDT</span>
@@ -117,12 +123,14 @@
              <span class="flex-1 text-right">100%</span>
            </div> -->
            <!-- 张数输入 -->
            <amount-slider ref="sliderRef" :maxAmount="getVolumnByLever()" @getAmount="getAmount"></amount-slider>
                  <amount-slider ref="sliderRef" :maxAmount="getVolumnByLever()"
                     @getAmount="getAmount"></amount-slider>
          </template>
          <template v-if="selectIndex == 1 && userInfo.token">
            <div class="flex justify-between mt-30">
              <div class="text-grey">{{ $t('合约金额') }}</div>
              <div class="textColor">{{ initData.amount * (form.amount / 1) * form.lever_rate }} USDT</div>
                     <div class="textColor">{{ initData.amount * (form.amount / 1) * form.lever_rate }} USDT
                     </div>
            </div>
            <div class="flex justify-between mt-30">
              <div class="text-grey">{{ $t("保证金") }}</div>
@@ -156,8 +164,8 @@
          </div>
          <template v-if="userInfo.token">
            <template v-if="selectIndex == 1">
              <div class="w-full h-80 lh-80 bg-green flex text-white rounded-md mt-50" v-if="currentType == 'long'"
                @click="order('long')">
                     <div class="w-full h-80 lh-80 bg-green flex text-white rounded-md mt-50"
                        v-if="currentType == 'long'" @click="order('long')">
                <div class="font-34 relative text-center" style="flex-grow:1;" v-if="selectIndex == 1">
                  {{ $t('开多') }}
                  <span class="right-word font-22 text-center">{{ $t('看涨') }}</span>
@@ -166,8 +174,8 @@
                  {{ $t('做多买入') }}
                </div>
              </div>
              <div class="w-full h-80 lh-80 bg-red flex text-white rounded-md mt-50" v-if="currentType == 'short'"
                @click="order('short')">
                     <div class="w-full h-80 lh-80 bg-red flex text-white rounded-md mt-50"
                        v-if="currentType == 'short'" @click="order('short')">
                <div class="relative font-34 text-center" style="flex-grow:1;" v-if="selectIndex == 1">
                  {{ $t('开空') }}
                  <span class="right-word font-22 text-center">{{ $t('看跌') }}</span>
@@ -178,8 +186,8 @@
              </div>
            </template>
            <template v-if="selectIndex == 2">
              <div class="w-full h-80 lh-80 bg-green flex text-white rounded-md mt-30 " @click="order('open')"
                v-if="userInfo.token">
                     <div class="w-full h-80 lh-80 bg-green flex text-white rounded-md mt-30 "
                        @click="order('open')" v-if="userInfo.token">
                <div class="font-34 relative text-center" style="flex-grow: 1">
                  {{ $t("开多") }}
                  <span class="right-word font-22 text-center">{{
@@ -187,8 +195,9 @@
                  }}</span>
                </div>
              </div>
              <div class="w-full h-80 lh-80 bg-red flex text-white rounded-md mt-20 mb-10" style="position: relative;"
                :class="{ 'mt-22': selectIndex == 2 }" @click="order('close')" v-if="userInfo.token">
                     <div class="w-full h-80 lh-80 bg-red flex text-white rounded-md mt-20 mb-10"
                        style="position: relative;" :class="{ 'mt-22': selectIndex == 2 }"
                        @click="order('close')" v-if="userInfo.token">
                <div class="relative font-34 text-center" style="flex-grow: 1">
                  {{ $t("开空") }}
                  <span class="right-word font-22 text-center">{{
@@ -216,8 +225,8 @@
              <div class="mt-4">(USDT)</div>
            </div>
            <div class="text-right items-end justify-end">
              <div class="">{{ $t("数量") }}</div>
              <div class="mt-4">({{ symbol.toUpperCase() || "--" }})</div>
                     <div class="">{{ $t('数量') }}</div>
                     <div class="mt-5">({{ symbolname || '--' }})</div>
            </div>
          </div>
          <div v-if="showType == 0 || showType == 1" class="w-290 flex justify-between pt-12 font-26"
@@ -275,10 +284,12 @@
                <div class="pl-16 textColor" style="width: 80%">
                  {{ dataArrTitle }}
                </div>
                <img src="@/assets/image/public/grey-select.png" alt="select-icon" class="w-22 h-11 pr-20" />
                        <img src="@/assets/image/public/grey-select.png" alt="select-icon"
                           class="w-22 h-11 pr-20" />
              </div>
              <div class="option-box" v-show="arryIsShow">
                <div class="font-30" v-for="(item, index) in selectDataArry" :key="index" @click="selectItemArry(item)">
                        <div class="font-30" v-for="(item, index) in selectDataArry" :key="index"
                           @click="selectItemArry(item)">
                  {{ item.name }}
                </div>
              </div>
@@ -293,7 +304,7 @@
    <van-popup v-model="show" class="rounded-2xl">

      <popup-delivery showBtns :detailData="detailData" :key="detailData.order_no" @close="onClose"
        @continueToBuy="continueTobuy" @timeEnd="handleTimeEnd" :price="price" />
            @continueToBuy="continueTobuy" @timeEnd="handleTimeEnd" :price="price" :symbol="symbol" />
    </van-popup>
    <van-action-sheet v-model="isSelectShow" @select="onSelect" :actions="actions" :cancel-text="$t('取消')"
      close-on-click-action @cancel="onCancel">
@@ -303,8 +314,13 @@

<script>
import config from "@/config";
import { Popup, ActionSheet } from "vant";
import { mapGetters } from "vuex";
   import {
      Popup,
      ActionSheet
   } from "vant";
   import {
      mapGetters
   } from "vuex";
// import VueSlider from "vue-slider-component";
import AmountSlider from "./amountSlider.vue";
import "vue-slider-component/theme/default.css";
@@ -318,9 +334,15 @@
} from "@/API/trade.api";
import ContractFutrue from "@/components/contract-futrue";
import PopupDelivery from "@/components/popup-delivery";
import { fixDate } from "@/utils/utis";
import { _getHomeList } from "@/API/home.api";
import { getStorage } from '@/utils/utis'
   import {
      fixDate
   } from "@/utils/utis";
   import {
      _getHomeList
   } from "@/API/home.api";
   import {
      getStorage
   } from '@/utils/utis'
// import PopupConfirmOrder from '@/components/popup-confirm-order'
export default {
  name: "perpetualPosition",
@@ -351,6 +373,10 @@
    symbol: {
      type: String,
      default: "",
         },
         symbolname: {
              type: String,
              default: '--'
    },
    price: {
      type: [Number, String],
@@ -455,6 +481,7 @@
  },
  mounted() {
    this.getHomeList(this.$route.params.symbol);
         this.symbolname = getStorage('symbolname')
    setInterval(() => {
      // 刷新页面
          if (location.href.indexOf("#reloaded") == -1&&location.href.indexOf("perpetualContract")>0) {
@@ -476,7 +503,10 @@

        obj = this.initOpen
        if (!obj.lever || !obj.lever.length) { // 倍数
          obj.lever = [{ id: 1, lever_rate: 1 }]
                  obj.lever = [{
                     id: 1,
                     lever_rate: 1
                  }]
        }
        return obj
      }
@@ -507,9 +537,14 @@
      isShow: false,
      title: this.$t("市价"),
      paraIndex: 0,
      selectData: [
        { title: this.$t("市价"), type: "1" },
        { title: this.$t("限价"), type: "2" },
            selectData: [{
                  title: this.$t("市价"),
                  type: "1"
               },
               {
                  title: this.$t("限价"),
                  type: "2"
               },
      ],
      form: {
        symbol: "", // 币种
@@ -530,10 +565,21 @@
      isShow: false,
      selectDataArry: [],
      isSelectShow: false,
      actions: [
        { name: this.$t("默认"), value: 0, className: 'actions-active' },
        { name: this.$t("展示买单"), value: 1, className: '' },
        { name: this.$t("展示卖单"), value: 2, className: '' },
            actions: [{
                  name: this.$t("默认"),
                  value: 0,
                  className: 'actions-active'
               },
               {
                  name: this.$t("展示买单"),
                  value: 1,
                  className: ''
               },
               {
                  name: this.$t("展示卖单"),
                  value: 2,
                  className: ''
               },
      ],
      showType: 0,
      dataArrTitle: 0,
@@ -547,9 +593,14 @@
    this.clearTimeout();
  },
  activated() {
    this.selectData = [
      { title: this.$t("市价"), type: "1" },
      { title: this.$t("限价"), type: "2" },
         this.selectData = [{
               title: this.$t("市价"),
               type: "1"
            },
            {
               title: this.$t("限价"),
               type: "2"
            },
    ];
    this.title = this.selectData[0].title;
    this.type = this.selectData[0].type
@@ -584,14 +635,12 @@
        arry.map((item) => {
          let obj = {
            name: item + "1",
            value:
              item.substring(item.indexOf(".") + 1, item.length).length + 1,
                     value: item.substring(item.indexOf(".") + 1, item.length).length + 1,
          };
          newArry.push(obj);
        });
        if (numberLength <= 2) {
          let obj = [
            {
                  let obj = [{
              name: "0.1",
              value: 1,
            },
@@ -707,7 +756,10 @@
    jump() {
      this.$router.push(`/trendDetails/${this.symbol}`);
    },
    onParaId({ id, index }) {
         onParaId({
            id,
            index
         }) {
      // 交割日期
      // console.log(evt)
      this.form.para_id = id;
@@ -844,7 +896,9 @@
          this.$toast(this.$t("操作成功"));
          _getBalance().then((data) => {
            // 刷新余额
            this.$store.commit("user/SET_USERINFO", { balance: data.money });
                     this.$store.commit("user/SET_USERINFO", {
                        balance: data.money
                     });
          });
          this.$emit("ordered", emitFunc);
          if (this.selectIndex / 1 === 2) {