first

zzzz

2024-04-30 9cf9aa9b106ca493051ca036b7d319b96d8579cb

 src/page/tradeRecord/index.vue

@@ -1,279 +1,309 @@
<template>
    <div class="tradeRecord">
        <assets-head :title="$t('交易记录')" />
        <div class="content">
            <van-tabs v-model="active" class="w-full px-32 box-border" sticky @click="changeType">

                <van-tab :title="$t('当前委托')" class="font-30">
                    <div class="all-select flex justify-end">
                        <div class="select-box flex" @click.stop="isAll = !isAll">
                            <div class="flex-1 font-24">
                                {{ symbol.toUpperCase() }}/USDT
                            </div>
                            <van-icon name="arrow-down" />
                            <div class="select-data" v-if="isAll">
                                <div class="select-item font-24" @click.stop="selectItem(item)"
                                    v-for="(item, index) in currencyList" :key="index">{{ item.symbol.toUpperCase() }}/USDT
                                </div>
                            </div>
                        </div>
                    </div>
                    <entrust-item v-for="item in entrustList" :key="item.order_no" :entrust="item" :state="item.state"
                        @cancelOrder="cancelOrder" />
                </van-tab>
                <van-tab :title="$t('历史委托')">
                    <div class="all-select flex justify-end">
                        <div class="select-box flex" @click.stop="isAll = !isAll">
                            <div class="flex-1">
                                {{ symbol.toUpperCase() }}/USDT
                            </div>
                            <van-icon name="arrow-down" />
                            <div class="select-data" v-if="isAll">
                                <div class="select-item" @click.stop="selectItem(item)"
                                    v-for="(item, index) in currencyList" :key="index">{{ item.symbol.toUpperCase() }}/USDT
                                </div>
                            </div>
                        </div>
                    </div>
                    <history-item :coinPrice="coinPrice" v-for="item in entrustList" :key="item.order_no" :entrust="item"
                        :state="item.state" @cancelOrder="cancelOrder" />
                </van-tab>
                <van-tab :title="$t('成交历史')" class="font-30">
                    <div class="all-select flex justify-end">
                        <div class="select-box flex" @click.stop="isAll = !isAll">
                            <div class="flex-1">
                                {{ symbol.toUpperCase() }}/USDT
                            </div>
                            <van-icon name="arrow-down" />
                            <div class="select-data" v-if="isAll">
                                <div class="select-item" @click.stop="selectItem(item)"
                                    v-for="(item, index) in currencyList" :key="index">{{ item.symbol.toUpperCase() }}/USDT
                                </div>
                            </div>
                        </div>
                    </div>
                    <entrust-item v-for="item in entrustList" :key="item.order_no" :entrust="item" :state="item.state"
                        @cancelOrder="cancelOrder" />
                </van-tab>
            </van-tabs>
            <div v-if="!entrustList.length" class="flex flex-col justify-center items-center pt-185">
                <img src="@/assets/image/assets-center/no-data.png" alt="no-date" class="w-180 h-180" />
                <p class="textColor">{{ $t('暂无数据') }}</p>
  <div class="tradeRecord">
    <assets-head :title="$t('交易记录')" />
    <div class="content">
      <van-tabs
        v-model="active"
        class="w-full px-32 box-border"
        sticky
        @click="changeType"
      >
        <van-tab :title="$t('当前委托')" class="font-30">
          <div class="all-select flex justify-end">
            <div class="select-box flex" @click.stop="isAll = !isAll">
              <div class="flex-1 font-24">{{ symbol | _symbolName }}/USDT</div>
              <van-icon name="arrow-down" />
              <div class="select-data" v-if="isAll">
                <div
                  class="select-item font-24"
                  @click.stop="selectItem(item)"
                  v-for="(item, index) in currencyList"
                  :key="index"
                >
                  {{ item.symbol | _symbolName }}/USDT
                </div>
              </div>
            </div>
        </div>
          </div>
          <entrust-item
            v-for="item in entrustList"
            :key="item.order_no"
            :entrust="item"
            :state="item.state"
            @cancelOrder="cancelOrder"
          />
        </van-tab>
        <van-tab :title="$t('历史委托')">
          <div class="all-select flex justify-end">
            <div class="select-box flex" @click.stop="isAll = !isAll">
              <div class="flex-1">{{ symbol.toUpperCase() }}/USDT</div>
              <van-icon name="arrow-down" />
              <div class="select-data" v-if="isAll">
                <div
                  class="select-item"
                  @click.stop="selectItem(item)"
                  v-for="(item, index) in currencyList"
                  :key="index"
                >
                  {{ item.symbol.toUpperCase() }}/USDT
                </div>
              </div>
            </div>
          </div>
          <history-item
            :coinPrice="coinPrice"
            v-for="item in entrustList"
            :key="item.order_no"
            :entrust="item"
            :state="item.state"
            @cancelOrder="cancelOrder"
          />
        </van-tab>
        <van-tab :title="$t('成交历史')" class="font-30">
          <div class="all-select flex justify-end">
            <div class="select-box flex" @click.stop="isAll = !isAll">
              <div class="flex-1">{{ symbol.toUpperCase() }}/USDT</div>
              <van-icon name="arrow-down" />
              <div class="select-data" v-if="isAll">
                <div
                  class="select-item"
                  @click.stop="selectItem(item)"
                  v-for="(item, index) in currencyList"
                  :key="index"
                >
                  {{ item.symbol.toUpperCase() }}/USDT
                </div>
              </div>
            </div>
          </div>
          <entrust-item
            v-for="item in entrustList"
            :key="item.order_no"
            :entrust="item"
            :state="item.state"
            @cancelOrder="cancelOrder"
          />
        </van-tab>
      </van-tabs>
      <div
        v-if="!entrustList.length"
        class="flex flex-col justify-center items-center pt-185"
      >
        <img
          src="@/assets/image/assets-center/no-data.png"
          alt="no-date"
          class="w-180 h-180"
        />
        <p class="textColor">{{ $t("暂无数据") }}</p>
      </div>
    </div>
  </div>
</template>

<script>
import assetsHead from "@/components/assets-head";
import { Tabs, Tab, DropdownMenu, DropdownItem } from 'vant';
import EntrustItem from '@/components/entrust-item'
import historyItem from '@/components/history-item'
import { Tabs, Tab, DropdownMenu, DropdownItem } from "vant";
import EntrustItem from "@/components/entrust-item";
import historyItem from "@/components/history-item";
import TradeApi from "@/API/trading.js";
import { _getCoins, _getHomeList } from '@/API/home.api'
import { _getCoins, _getHomeList } from "@/API/home.api";
export default {
    props: {

  props: {},
  components: {
    assetsHead,
    [Tabs.name]: Tabs,
    [Tab.name]: Tab,
    [DropdownMenu.name]: DropdownMenu,
    [DropdownItem.name]: DropdownItem,
    EntrustItem,
    historyItem,
  },
  data() {
    return {
      active: 0,
      entrustList: [],
      historyList: [],
      finishList: [],
      type: "orders",
      isAll: false,
      symbol: "",
      currencyList: [],
      coinPrice: 0,
    };
  },
  watch: {
    active() {
      this.isAll = false;
    },
    components: {
        assetsHead,
        [Tabs.name]: Tabs,
        [Tab.name]: Tab,
        [DropdownMenu.name]: DropdownMenu,
        [DropdownItem.name]: DropdownItem,
        EntrustItem,
        historyItem
  },
  mounted() {
    this.getCoins();
    this.symbol = this.$route.params.symbol;
    this.getOrderList(this.type);
    this.getCoinPrce(this.symbol);
  },
  computed: {},
  methods: {
    getCoins() {
      _getCoins().then((res) => {
        console.log(res);
        this.currencyList = res;
      });
    },
    data() {
        return {
            active: 0,
            entrustList: [],
            historyList: [],
            finishList: [],
            type: 'orders',
            isAll: false,
            symbol: '',
            currencyList: [],
            coinPrice: 0
        }
    getCoinPrce(val) {
      _getHomeList(val).then((res) => {
        this.coinPrice = res[0].close;
      });
    },
    watch: {
        active() {
            this.isAll = false
        }
    getOrderList(type) {
      this.entrustList = [];
      TradeApi.tradeRecord({
        page_no: 1,
        symbol: this.symbol,
        type: type,
      })
        .then((res) => {
          console.log(res.data);
          this.entrustList = res.data;
        })
        .catch(() => {});
    },
    mounted() {
        this.getCoins()
        this.symbol = this.$route.params.symbol
        this.getOrderList(this.type)
        this.getCoinPrce(this.symbol)
    changeType() {
      this.entrustList = [];
      if (this.active == 0) {
        this.type = "orders";
      } else if (this.active == 1) {
        this.type = "hisorders";
      } else {
        this.type = "opponent";
      }
      this.getOrderList(this.type);
    },
    computed: {
    cancelOrder(order) {
      TradeApi.tradeCancel({
        order_no: order,
      })
        .then((res) => {
          this.$toast(this.$t("成功"));
          this.getOrderList(this.type);
        })
        .catch(() => {});
    },
    methods: {
        getCoins() {
            _getCoins().then((res) => {
                console.log(res)
                this.currencyList = res
            })
        },
        getCoinPrce(val) {
            _getHomeList(val).then((res) => {
                this.coinPrice = res[0].close
            })
        },
        getOrderList(type) {
            this.entrustList = []
            TradeApi.tradeRecord({
                page_no: 1,
                symbol: this.symbol,
                type: type
            }).then(res => {
                console.log(res.data)
                this.entrustList = res.data;
            }).catch(() => {

            })
        },
        changeType() {
            this.entrustList = [];
            if (this.active == 0) {
                this.type = 'orders'
            } else if (this.active == 1) {
                this.type = 'hisorders'
            } else {
                this.type = 'opponent'
            }
            this.getOrderList(this.type);
        },
        cancelOrder(order) {
            TradeApi.tradeCancel({
                order_no: order,
            }).then(res => {
                this.$toast(this.$t('成功'));
                this.getOrderList(this.type)
            }).catch(() => {

            })
        },
        //选择币种
        selectItem(item) {
            this.symbol = item.symbol
            this.getOrderList()
            this.getCoinPrce(item.symbol)
            this.isAll = false
        }
    }
}
    //选择币种
    selectItem(item) {
      this.symbol = item.symbol;
      this.getOrderList();
      this.getCoinPrce(item.symbol);
      this.isAll = false;
    },
  },
};
</script>

<style lang="scss" scoped>
.tradeRecord {
    width: 100%;
    min-height: 100vh;
    box-sizing: border-box;
  width: 100%;
  min-height: 100vh;
  box-sizing: border-box;

  @include themify() {
    background: themed("main_background");
  }

  ::v-deep .van-tab {
    @include themify() {
        background: themed("main_background");
      color: themed("text_color");
    }
  }

    ::v-deep .van-tab {
        @include themify() {
            color: themed("text_color");
        }
  ::v-deep .van-tabs__nav {
    @include themify() {
      background: themed("tab_background");
    }
  }

    ::v-deep .van-tabs__nav {
        @include themify() {
            background: themed("tab_background");
        }
  ::v-deep .van-tab--active {
    background: #1194f7;
    border-radius: 5px;
    color: #fff !important;
  }

  ::v-deep .van-nav-bar {
    @include themify() {
      background: themed("main_background");
    }
  }

    ::v-deep .van-tab--active {
        background: #1194F7;
        border-radius: 5px;
        color: #fff !important;
  ::v-deep .van-nav-bar__title {
    @include themify() {
      color: themed("text_color");
    }
  }

    ::v-deep .van-nav-bar {
        @include themify() {
            background: themed("main_background");
        }
  ::v-deep .van-tabs__nav {
    @include themify() {
      background: themed("main_background");
    }
  }

    ::v-deep .van-nav-bar__title {
        @include themify() {
            color: themed("text_color");
        }
    }

    ::v-deep .van-tabs__nav {
        @include themify() {
            background: themed("main_background");
        }
    }

    ::v-deep .van-tabs__line {
        background-color: transparent !important;

    }
  ::v-deep .van-tabs__line {
    background-color: transparent !important;
  }
}

.listItem {
    border-bottom: 1px solid #484756;
    display: flex;
    justify-content: space-between;
  border-bottom: 1px solid #484756;
  display: flex;
  justify-content: space-between;
}

.all-select {
    padding: 30px 0;
  padding: 30px 0;

    .select-box {
        width: 160px;
        height: 50px;
  .select-box {
    width: 160px;
    height: 50px;

        @include themify() {
            background: themed("input_background");
        }

        @include themify() {
            color: themed("text_color");
        }

        display: flex;
        align-items: center;
        font-size: 14px;
        padding: 0 20px;
        position: relative;

        .select-data {
            position: absolute;
            top: 55px;
            left: 0;
            z-index: 10;
            width: 100%;
            height: 300px;
            overflow-y: auto;

            @include themify() {
                background: themed("input_background");
            }


            .select-item {
                padding: 20px 20px;
                text-align: center;

                @include themify() {
                    border-bottom: 1px solid themed("border_color");
                }
            }
        }
    @include themify() {
      background: themed("input_background");
    }

    @include themify() {
      color: themed("text_color");
    }

    display: flex;
    align-items: center;
    font-size: 14px;
    padding: 0 20px;
    position: relative;

    .select-data {
      position: absolute;
      top: 55px;
      left: 0;
      z-index: 10;
      width: 100%;
      height: 300px;
      overflow-y: auto;

      @include themify() {
        background: themed("input_background");
      }

      .select-item {
        padding: 20px 20px;
        text-align: center;

        @include themify() {
          border-bottom: 1px solid themed("border_color");
        }
      }
    }
  }
}

.textColor {
    color: #DAD5DC;
  color: #dad5dc;
}
</style>