3月 8 日
blame | history | patch | commit | commitdiff | ignore whitespace
dcc
2024-06-07 d5381ec06ab5f549fade867c3a874de613bdd5d4 
 src/page/trade/index.vue


@@ -1,22 +1,5 @@


<template>


  <div class="pb-108 no_touch trade">


    <!-- <div class="px-30 pt-20">


            <div class="flex h-88 w-full box-border border-solid-grey rounded-lg">


                <div @click="$router.push('/exchange/exchangePage')"


                    class="font-bold font-32 flex justify-center items-center flex-1">


                    <span class="h-60 lh-60 font-16  px-40 borderColor rounded-lg textColor">{{ $t('闪兑') }}</span>


                </div>


                <div class="font-bold flex font-32 justify-center items-center flex-1">


                    <span class="h-60 lh-60 btnMain px-40 rounded-lg text-white font-16">{{ $t('现货') }}</span>


                </div>


                <div @click="$router.push({ path: '/wantBuy', query: { frompath: `/trade/${symbol}` } })"


                    class="font-bold font-32 flex justify-center items-center flex-1">


                    <span class="h-60 lh-60 font-16  px-40 borderColor rounded-lg textColor">c2c</span>


                </div>


            </div>


        </div> -->


    <!-- :key="symbol"-->


    <!-- 头部区 -->


    <trade-head


      :backFunc="() => $router.push('/')"


      :symbol="symbol"


@@ -26,37 +9,8 @@


      @update-coin="onUpdate"


      @data="quote = $event"


    />


    <div class="flex justify-between pt-34 px-30">


      <button


        class="tabBtn w-368 h-74 lh-74 border-none rounded"


        :class="selectIndexs == 1 ? 'select-active' : 'no-select'"


        @click="$router.push('/perpetualContract/eth/1')"


      >


        {{ $t("永续合约") }}


      </button>


      <button


        class="tabBtn w-368 m-[10px] h-74 lh-74 border-none rounded"


        :class="selectIndexs == 3 ? 'select-active' : 'no-select'"


        @click="$router.push('/trade/btc')"


      >


        {{ $t("币币交易") }}


      </button>


      <button


        class="tabBtn w-368 h-74 lh-74 border-none rounded"


        :class="selectIndexs == 2 ? 'select-active' : 'no-select'"


        @click="$router.push('/perpetualContract/eth/2')"


      >


        {{ $t("期权交易") }}


      </button>


    </div>




    <div class="trade-buy-sell flex justify-between px-30 py-30">


      <trade-order-area


        :symbol="symbol"


        :init-open="initOpen"


        :init-close="initClose"


        :price="price"


        @ordered="onOrdered"


      />


      <keep-alive>


        <trade-deep-data


          :selectValue="selectValue"


@@ -65,184 +19,170 @@


          :symbol="symbol"


          v-if="symbol"


          :price="price"


          class="w-290 ml-30"


          class="w-290 mr-30"


        />


      </keep-alive>


      <trade-order-area


        :symbol="symbol"


        :init-open="initOpen"


        :init-close="initClose"


        :price="price"


        @ordered="onOrdered"


      />


    </div>


    <div class="flex k-select-box">


      <div class="mt-20 mb-22 select-box" style="position: relative">


        <div


          class="flex justify-between items-center w-full h-70"


          @click="selectBtn"


        >


          <div class="pl-16 textColor" style="width: 80%">{{ title }}</div>


          <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, index) in sortList"


            :key="index"


            @click="selectItem(item)"


          >


            {{ item.name }}




    <div class="list-data">


      <div>


        <div class="flex justify-between pb-20 items-center pt-10">


          <div class="flex pl-30">


            <template>


              <div


                class="px-10 py-10 flex items-center text-grey"


                @click="tabClick('1')"


                :class="tabType == '1' ? 'active-line' : ''"


              >


                {{ $t("当前委托")


                }}<span v-if="tabType == '1'">({{ entrustList.length }})</span>


              </div>


              <div


                class="px-10 ml-50 py-10 flex items-center text-grey"


                @click="tabClick('3')"


                :class="tabType == '3' ? 'active-line' : ''"


              >


                {{ $t("历史委托") }}


              </div>


              <div


                class="px-10 py-10 flex items-center ml-50 text-grey"


                @click="tabClick('2')"


                :class="tabType == '2' ? 'active-line' : ''"


              >


                {{ $t("资产") }}


              </div>


            </template>


          </div>


          <span @click="goHistory">


            <img


              src="@/assets/3x/names8.png"


              alt="record-img"


              class="w-32 h-35 pr-30"


            />


          </span>


        </div>


      </div>


      <div @click="isSelectShow = true">


        <img


          src="@/assets/image/selectIcon.png"


          alt="warn-icon"


          class="w-36 h-30"


      <div class="pl-32 pr-32 pb-100" v-if="tabType == '1'">


        <entrust-item


          v-for="item in entrustList"


          :key="item.order_no"


          :entrust="item"


          state="submitted"


          @cancelOrder="cancelOrder"


        />


      </div>


    </div>


    <div class="h-16 diviLine"></div>


    <div>


      <div class="flex justify-between pb-20 border-b-color items-center">


        <div class="flex pl-30">


          <template>


            <div


              class="px-10 py-10 flex items-center text-grey"


              @click="tabClick('1')"


              :class="tabType == '1' ? 'active-line' : ''"


      <div class="pl-32 pr-32 pb-100" v-else-if="tabType == '3'">


        <history-item


          v-for="item in entrustList"


          :key="item.order_no"


          :coinPrice="coinPrice"


          :entrust="item"


          :state="item.state"


          @cancelOrder="cancelOrder"


        />


      </div>


      <div class="pl-32 pr-32" v-else>


        <div class="mb-20 border-b">


          <p class="font-28 text-grey mt-24 mb-42">{{ $t("当前币对资产") }}</p>


          <ul>


            <li


              v-for="item in pairsList"


              :key="item.symbol"


              class="flex justify-between py-10"


            >


              {{ $t("当前委托")


              }}<span v-if="tabType == '1'">({{ entrustList.length }})</span>


            </div>


            <div


              class="px-10 ml-50 py-10 flex items-center text-grey"


              @click="tabClick('3')"


              :class="tabType == '3' ? 'active-line' : ''"


            >


              {{ $t("历史委托") }}


            </div>


            <div


              class="px-10 py-10 flex items-center ml-50 text-grey"


              @click="tabClick('2')"


              :class="tabType == '2' ? 'active-line' : ''"


            >


              {{ $t("资产") }}


            </div>


          </template>


              <div class="flex items-center">


                <img


                  :src="


                    item.symbol


                      ? `${HOST_URL}/wap/symbol/${item.symbol}.png`


                      : require('@/assets/loading-default.png')


                  "


                  class="w-52 h-52 rounded-full mr-16"


                />


                <p class="flex flex-col">


                  <strong class="font-28 textColor mb-6">{{


                    item.symbol.toUpperCase()


                  }}</strong>


                  <span class="font-20 text-grey">{{ item.full_name }}</span>


                </p>


              </div>


              <div class="flex flex-col items-end text-grey">


                <strong class="font-28 textColor mb-6">{{


                  item.volume


                }}</strong>


                <span class="font-20 text-grey">


                  {{ currency.currency_symbol }}


                  {{


                    item.usdt ? (item.usdt * currency.rate).toFixed(2) : "0.0"


                  }}


                </span>


              </div>


            </li>


          </ul>


        </div>


        <div class="mb-60 border-b">


          <p class="font-28 text-grey mt-24 mb-42">{{ $t("其他非0资产") }}</p>


          <ul>


            <li


              v-for="item in no_zeroList"


              :key="item.symbol"


              class="flex justify-between py-10"


            >


              <div class="flex items-center">


                <img


                  :src="


                    item.symbol


                      ? `${HOST_URL}/wap/symbol/${item.symbol}.png`


                      : require('@/assets/loading-default.png')


                  "


                  class="w-52 h-52 rounded-full mr-16"


                />


                <p class="flex flex-col">


                  <strong class="font-28 textColor mb-6">{{


                    item.symbol.toUpperCase()


                  }}</strong>


                  <span class="font-20 text-grey">{{ item.full_name }}</span>


                </p>


              </div>


              <div class="flex flex-col items-end">


                <strong class="font-28 textColor mb-6">{{


                  item.volume


                }}</strong>


                <span class="font-20 text-grey">


                  {{ currency.currency_symbol }}


                  {{


                    item.usdt ? (item.usdt * currency.rate).toFixed(2) : "0.0"


                  }}


                </span>


              </div>


            </li>


          </ul>


        </div>


      </div>


      <div


        v-if="tabType == '1' && !entrustList.length"


        class="flex flex-col justify-center items-center pt-155 pb-100"


      >


        <img


          src="../../assets/image/public/record.png"


          alt="record-img"


          class="w-32 h-35 pr-30"


          @click="goHistory"


          src="@/assets/image/assets-center/no-data.png"


          alt="no-date"


          class="w-180 h-180"


        />


        <p class="textColor">{{ $t("暂无数据") }}</p>


      </div>


    </div>


    <div class="pl-32 pr-32 pb-100" v-if="tabType == '1'">


      <entrust-item


        v-for="item in entrustList"


        :key="item.order_no"


        :entrust="item"


        state="submitted"


        @cancelOrder="cancelOrder"


      />


    </div>


    <div class="pl-32 pr-32 pb-100" v-else-if="tabType == '3'">


      <history-item


        v-for="item in entrustList"


        :key="item.order_no"


        :coinPrice="coinPrice"


        :entrust="item"


        :state="item.state"


        @cancelOrder="cancelOrder"


      />


    </div>


    <div class="pl-32 pr-32" v-else>


      <div class="mb-20 border-b">


        <p class="font-28 text-grey mt-24 mb-42">{{ $t("当前币对资产") }}</p>


        <ul>


          <li


            v-for="item in pairsList"


            :key="item.symbol"


            class="flex justify-between py-10"


          >


            <div class="flex items-center">


              <img


                :src="


                  item.symbol


                    ? `${HOST_URL}/wap/symbol/${item.symbol}.png`


                    : require('@/assets/loading-default.png')


                "


                class="w-52 h-52 rounded-full mr-16"


              />


              <p class="flex flex-col">


                <strong class="font-28 textColor mb-6">{{


                  item.symbol.toUpperCase()


                }}</strong>


                <span class="font-20 text-grey">{{ item.full_name }}</span>


              </p>


            </div>


            <div class="flex flex-col items-end text-grey">


              <strong class="font-28 textColor mb-6">{{ item.volume }}</strong>


              <span class="font-20 text-grey">


                {{ currency.currency_symbol }}


                {{ item.usdt ? (item.usdt * currency.rate).toFixed(2) : "0.0" }}


              </span>


            </div>


          </li>


        </ul>


      </div>


      <div class="mb-60 border-b">


        <p class="font-28 text-grey mt-24 mb-42">{{ $t("其他非0资产") }}</p>


        <ul>


          <li


            v-for="item in no_zeroList"


            :key="item.symbol"


            class="flex justify-between py-10"


          >


            <div class="flex items-center">


              <img


                :src="


                  item.symbol


                    ? `${HOST_URL}/wap/symbol/${item.symbol}.png`


                    : require('@/assets/loading-default.png')


                "


                class="w-52 h-52 rounded-full mr-16"


              />


              <p class="flex flex-col">


                <strong class="font-28 textColor mb-6">{{


                  item.symbol.toUpperCase()


                }}</strong>


                <span class="font-20 text-grey">{{ item.full_name }}</span>


              </p>


            </div>


            <div class="flex flex-col items-end">


              <strong class="font-28 textColor mb-6">{{ item.volume }}</strong>


              <span class="font-20 text-grey">


                {{ currency.currency_symbol }}


                {{ item.usdt ? (item.usdt * currency.rate).toFixed(2) : "0.0" }}


              </span>


            </div>


          </li>


        </ul>


      </div>


    </div>


    <div


      v-if="tabType == '1' && !entrustList.length"


      class="flex flex-col justify-center items-center pt-185 pb-100"


    >


      <img


        src="@/assets/image/assets-center/no-data.png"


        alt="no-date"


        class="w-180 h-180"


      />


      <p class="textColor">{{ $t("暂无数据") }}</p>


    </div>


    <div class="fixed w-full shadow z-10 tabBackground1">


      <div class="flex justify-between px-30 py-10">


        <span class="font-24 textColor2"


          >{{ symbol.toUpperCase() }}/USDT&nbsp;{{ $t("k线图表") }}</span


        >


        <span class="font-24 textColor2">


          {{ symbol | _symbolName(1) }}&nbsp;{{ $t("k线图表") }}


        </span>


        <van-icon


          class="textColor"


          @click.stop="showCharts = !showCharts"


@@ -344,7 +284,6 @@


      },


      curTab: "", // 当前委托还是持有仓位


      selectIndex: 1, // 当前tab


      selectIndexs: 3, // 当前tab


      initFutrue: {}, /// 交割合约


      show: false, // popup


      entrustList: [], //当前委托订单


@@ -371,8 +310,13 @@


      await this.SET_COIN_LIST();


    }


  },


  mounted() {


    this.GET_UERS_KYC();


  },


  methods: {


    ...mapActions("home", [SET_COIN_LIST]),


    ...mapActions("user", ["GET_UERS_KYC"]),




    onUpdate(symbol) {


      // 更新


      this.symbol = symbol;


@@ -427,6 +371,7 @@


      this.socket.onmessage = (evt) => {


        const { data } = evt;


        const { code, data: _data } = JSON.parse(data);


        // console.log(_data);


        if (code / 1 === 0) {


          this.handleQoutes(_data);


        }


@@ -556,12 +501,10 @@


    let {


      params: { symbol },


    } = to;


    console.log("to", to);


    let catchTradeSymbol = getStorage("tradeSymbol");


    if (catchTradeSymbol) {


      symbol = catchTradeSymbol;


    }


    console.log(catchTradeSymbol);


    if (symbol) {


      next((vm) => {


        vm.symbol = symbol;


@@ -641,10 +584,11 @@


.active-line {


  position: relative;


  // padding: 15px 0;


  color: #fff;


  color: #9691fa;


  font-weight: 600;




  @include themify() {


    background-color: themed("color_main");


    // background-color: themed("color_main");


  }


}




@@ -717,7 +661,7 @@


.k-select-box {


  position: relative;


  top: -130px;


  justify-content: flex-end;


  //   justify-content: flex-end;


  padding: 0 30px;


  align-items: center;




@@ -763,25 +707,11 @@


  }


}




.select-active {


  background-color: transparent;




  color: white !important;




  @include themify() {


    background: themed("color_main");


  }




  border: none;


}


.no-select {


}




.tabBtn {


  // border-radius: 8px;


  border: 1px solid #909090;


  color: #868d9a;


  background: transparent;


.list-data {


  margin: 30px;


  min-height: 550px;


  box-shadow: 0px 0px 10px 5px rgba(0, 0, 0, 0.05);


  //


}


</style>