1

jhzh

2025-06-16 1760942f9204e56032ca93ff1b720bbf966dd495

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
<template>
  <div>
    <div class="title fn-18 p-md color-light">{{title||$t('exchange.f5')}}</div>
    <van-tabs v-model="active">
      <van-tab
        :title="parentItem.coin_name"
        v-for="parentItem in showMarketList"
        :key="parentItem.coin_name"
      >
        <van-search v-model="filterText" :placeholder="$t('exchange.f6')" />
        <table class="w-max">
          <thead>
            <tr class="fn-sm">
              <th class="p-l-md p-y-xs fn-left">{{$t('exchange.f7')}}</th>
              <th class="fn-left">{{$t('exchange.f8')}}</th>
              <th class="p-r-md p-y-xs fn-right">{{$t('exchange.f9')}}</th>
            </tr>
          </thead>
          <tbody>
            <tr
              class="link-active"
              v-for="item in parentItem.marketInfoList"
              :key="item.symbol"
              v-show="isShow(item.pair_name)"
              @click="$emit('check-symbol',item)"
            >
              <td class="p-l-md p-y-xs">
                <template v-if="parentItem.isCollect">
                  <span class="color-light">{{item.pair_name}}</span>
                </template>
                <template v-else>
                  <span class="color-light">{{item.coin_name}}</span>
                  <span class="fn-sm">/{{parentItem.coin_name}}</span>
                </template>
              </td>
              <td :class="item.increase<0?'color-sell':'color-buy'">{{item.price}}</td>
              <td
                :class="item.increase<0?'color-sell':'color-buy'"
                class="p-r-md p-y-xs fn-right"
              >{{item.increaseStr}}</td>
            </tr>
          </tbody>
        </table>
      </van-tab>
    </van-tabs>
  </div>
</template>
<script>
export default {
  props: {
    marketList: {
      default() {
        return [];
      },
      type: Array,
      required: false,
    },
    collect: {
      default() {
        return [];
      },
      type: Array,
      required: false,
    },
    title:{
      default:''
    }
  },
  computed: {
    showMarketList() {
      let collect = this.collect.map((item) => item.pair_name);
      let collects = [];
      this.marketList.forEach((parentItem) => {
        parentItem.marketInfoList.forEach((item) => {
          if (collect.includes(item.pair_name)) {
            collects.push(item);
          }
        });
      });
      let arr = [
        { coin_name: this.$t('exchange.g0'), isCollect: true, marketInfoList: collects },
        ...this.marketList,
      ];
      return arr;
    },
  },
  data() {
    return {
      active: 0,
      filterText: "",
    };
  },
  methods: {
    isShow(str) {
      return (
        str.toLocaleLowerCase().indexOf(this.filterText.toLocaleLowerCase()) !=
        -1
      );
    },
  },
  created() {},
};
</script>
<style lang="scss" scoped>
</style>