Coinobserv_H5/pages/exchange/symbol-list.vue

<template>
  <view class="symbol-list">
    <view class="w-max" style="height: var(--status-bar-height)"></view>
    <view class="title fn-18 p-md color-light">{{ title||$t("exchange.f5") }}</view>
    <van-search
          background="transparent"
          :value="filterText"
          @change="filterText = $event.detail"
          :placeholder="$t('exchange.f6')"
        />
    <van-tabs :active="active">
      <van-tab
        :title="heyue==1&&parentItem.coin_name=='USDT'?$t('first.b8'):parentItem.coin_name"
        v-for="parentItem in showMarketList"
        :key="parentItem.coin_name"
      >
        
        <view class="p-x-xs m-t-md">
          <table class="w-max">
            <!-- <thead v-if="heyue==0">
              <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> -->
			<thead>
			  <tr class="fn-sm">
			    <th class="p-l-md p-y-xs fn-left">{{ $t("exchange.f7") }}</th>
			    <th class="fn-center">{{ $t("exchange.f8") }}</th>
			    <th class="p-r-md p-y-xs fn-right">{{ $t("exchange.f9") }}</th>
			  </tr>
			</thead>
            <tbody>
              <tr
                class="p-y-md"
                :class="symbols==item.coin_name&&heyue==1?'bg-panel':''"
                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 w-40" style="height: 50px;display: flex;align-items: center;">
                  <template v-if="parentItem.isCollect">
					<img :src="item.coin_icon" width="20" style="margin-right: 2px;" />
                    <span class="color-light">{{ item.pair_name }}</span>
                  </template>
                  <template v-else>
					 <view v-if="heyue==0">
						  <img src="https://seee.coinbserv.com/storage/images/trx.png" width="20" style="margin-right: 2px;" v-if="item.coin_name == 'TRX'" />
						  <img :src="item.coin_icon" width="20" style="margin-right: 2px;" v-else/>
					 </view>
					 <view v-for="items in Liste" :key="items.symbol" v-else>
					  	<img :src="items.icon" width="20" style="margin-right: 2px;" v-if="items.symbol==item.symbol" />
					  </view>
					  <span class="color-light">{{ item.coin_name||item.symbol }}/{{ parentItem.coin_name }}</span>
                  </template>
                </td>
				<td class="w-30 fn-center">
				    <template :class="item.increase < 0 ? 'color-sell' : 'color-buy'">
				      {{ item.price }}
				    </template>
				</td>
				<td :class="item.increase < 0 ? 'color-sell' : 'color-buy'" class="p-r-md p-y-xs fn-right w-30">
				  {{ item.increaseStr }}
				</td>
                <!-- <td class="w-30 fn-center">
                    <template v-if="heyue==0" :class="item.increase < 0 ? 'color-sell' : 'color-buy'">
                      {{ item.price }}
                    </template>
                    <template v-else>
                      {{$t('first.b8')}}
                    </template>
                </td>
                <td
                 v-if="heyue==0"
                  :class="item.increase < 0 ? 'color-sell' : 'color-buy'"
                  class="p-r-md p-y-xs fn-right w-30"
                >
                  {{ item.increaseStr }}
                </td>
                <td
                 v-if="heyue==1"
                  :class="item.increase < 0 ? 'color-sell' : 'color-buy'"
                  class="p-r-md p-y-xs fn-right"
                >
                  {{ item.price }}
                </td> -->
              </tr>
            </tbody>
          </table>
        </view>
      </van-tab>
    </van-tabs>
  </view>
</template>
<script>
import Contract from "@/api/contract";
export default {
  props: {
    marketList: {
      default() {
        return [];
      },
      type: Array,
      required: false,
    },
    collect: {
      default() {
        return [];
      },
      type: Array,
      required: false,
    },
      title:{
      default:''
    },
    heyue:{
        default: 1,
        type: Number,
        required: false,
    },
    symbols:{
        default: '',
        type: String,
        required: false,
    }
  },
  computed: {
    showMarketList() {
      let collect = this.collect.map((item) => item.pair_name);
      let collects = [];
      this.marketList.forEach((parentItem) => {
          // if(this.contract==1&&parentItem.coin_name=='USDT'){
          //     parentItem.coin_name=this.$t('first.b8')
          // }
          // console.log(parentItem.coin_name,this.contract)
        parentItem.marketInfoList.forEach((item) => {
          if (collect.includes(item.pair_name)) {
            collects.push(item);
          }
        });
      });
      let arr = [
        
        ...this.marketList,
				{
				  coin_name: this.$t("exchange.g0"),
				  isCollect: true,
				  marketInfoList: collects,
				},
      ];
			// console.info(arr)
      return arr;
    },
  },
  data() {
    return {
      active: 0,
      filterText: "",
	  imgList: [],
	  Liste:[]
    };
  },
  methods: {
    isShow(str) {
      return (
        str.toLocaleLowerCase().indexOf(this.filterText.toLocaleLowerCase()) !=
        -1
      );
    },
	getMarketList() {
	  Contract.getMarketList().then((res) => {
	    // 整理数据格式
	    this.imgList = res.data
		this.Liste = []
		this.marketList[0].marketInfoList.map(item=>{
			this.imgList[0].marketInfoList.map(items=>{
				if(item.symbol==items.symbol){
					this.Liste.push({
						pair_name: item.pair_name,
						symbol: item.symbol,
						icon:items.icon
					})
				}
			})
		})
	  });
	},
  },
  created() {
	  this.getMarketList()
  },
};
</script>
<style lang="scss" scoped>
.table-list {
  tr:nth-of-type(2n-1) {
    td {
      background: $panel-3;
    }
  }
}
/deep/ .van-tabs__line::before{
    width: 35px;
    height: 2px;
    border-radius:5px;
    background-color: $theme-1;
}
table{
border-collapse:collapse

}
.w-40{
    width: 40%;
}
.w-30{
    width: 30%;
}
.w-30{
    width: 30%;
}
</style>