first

zzzz

2024-04-21 3f3e2d5977787b0c6e09cd5cba7b41e5fb7d3fd0

 src/page/tradeRecord/index.vue

@@ -2,63 +2,99 @@
    <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-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>
              <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
                  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" />
          <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>
              <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
                  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" />
          <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>
              <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
                  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" />
          <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
        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>
@@ -66,15 +102,13 @@

<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,
@@ -82,7 +116,7 @@
        [DropdownMenu.name]: DropdownMenu,
        [DropdownItem.name]: DropdownItem,
        EntrustItem,
        historyItem
    historyItem,
    },
    data() {
        return {
@@ -90,81 +124,80 @@
            entrustList: [],
            historyList: [],
            finishList: [],
            type: 'orders',
      type: "orders",
            isAll: false,
            symbol: '',
      symbol: "",
            currencyList: [],
            coinPrice: 0
        }
      coinPrice: 0,
    };
    },
    watch: {
        active() {
            this.isAll = false
        }
      this.isAll = false;
    },
    },
    mounted() {
        this.getCoins()
        this.symbol = this.$route.params.symbol
        this.getOrderList(this.type)
        this.getCoinPrce(this.symbol)
    this.getCoins();
    this.symbol = this.$route.params.symbol;
    this.getOrderList(this.type);
    this.getCoinPrce(this.symbol);
    },
    computed: {
    },
  computed: {},
    methods: {
        getCoins() {
            _getCoins().then((res) => {
                console.log(res)
                this.currencyList = res
            })
        console.log(res);
        this.currencyList = res;
      });
        },
        getCoinPrce(val) {
            _getHomeList(val).then((res) => {
                this.coinPrice = res[0].close
            })
        this.coinPrice = res[0].close;
      });
        },
        getOrderList(type) {
            this.entrustList = []
      this.entrustList = [];
            TradeApi.tradeRecord({
                page_no: 1,
                symbol: this.symbol,
                type: type
            }).then(res => {
                console.log(res.data)
                this.entrustList = res.data;
            }).catch(() => {

        type: type,
            })
        .then((res) => {
          console.log(res.data);
          this.entrustList = res.data;
        })
        .catch(() => {});
        },
        changeType() {
            this.entrustList = [];
            if (this.active == 0) {
                this.type = 'orders'
        this.type = "orders";
            } else if (this.active == 1) {
                this.type = 'hisorders'
        this.type = "hisorders";
            } else {
                this.type = 'opponent'
        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(() => {

            })
        .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
        }
    }
}
      this.symbol = item.symbol;
      this.getOrderList();
      this.getCoinPrce(item.symbol);
      this.isAll = false;
    },
  },
};
</script>

<style lang="scss" scoped>
@@ -187,11 +220,10 @@
        @include themify() {
            background: themed("tab_background");
        }

    }

    ::v-deep .van-tab--active {
        background: #1194F7;
    background: #1194f7;
        border-radius: 5px;
        color: #fff !important;
    }
@@ -216,7 +248,6 @@

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

    }
}

@@ -260,7 +291,6 @@
                background: themed("input_background");
            }


            .select-item {
                padding: 20px 20px;
                text-align: center;
@@ -274,6 +304,6 @@
}

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