zzzz
2024-03-20 d25a45190cee44b36296693d5022a0ce9ae9b698
src/components/contract-header/index.vue
@@ -3,18 +3,26 @@
    <div>
        <div class="contract-header">
            <div class="pl-30 pr-30">
                <div class="flex justify-center pt-45 before">
        <div class="flex pt-45 before">
                    <div class="flex items-center justify-center ">
                        <!-- <img :src="require(`@/assets/theme/${theme}/image/icon_back.png`)" class="w-35 h-35 back" alt=""
                            @click="$router.push(`/trendDetails/${symbol}`)"> -->
                        <img :src="require(`@/assets/theme/${theme}/image/convert.png`)" alt="convert-img" class="w-35 h-35"
                            @click="onSidebar">
            <img
              :src="require(`@/assets/theme/${theme}/image/convert.png`)"
              alt="convert-img"
              class="w-35 h-35"
              @click="onSidebar"
            />
                        <div class="flex pl-21 textColor" @click="onSidebar">
                            <div class="font-35">{{ symbol.toUpperCase() || '--' }}/USDT</div>
              <div class="font-35">{{ symbol.toUpperCase() || "--" }}/USDT</div>
                            <div class="ml-15">{{ title }}</div>
                        </div>
                        <div class="pl-30 w-160" :class="{ 'text-green': range > 0, 'text-red': range <= 0 }">{{ range > 0 ?
                            '+' : '' }}{{ range || '--' }}%</div>
            <div
              class="pl-30 w-160"
              :class="{ 'text-green': range > 0, 'text-red': range <= 0 }"
            >
              {{ range > 0 ? "+" : "" }}{{ range || "--" }}%
            </div>
                        <!-- <img src="@/assets/image/kline.png" class="w-44 h-44 right" alt="" @click="$router.push(`/trendDetails/${symbol}`)"> -->
                    </div>
                    <!-- <div class="flex items-center">
@@ -23,46 +31,73 @@
                    </div> -->
                </div>
                <div class="flex justify-between  pt-34">
                    <button class="tabBtn w-368 h-74 lh-74 border-none  rounded"
                        :class="selectIndex == 1 ? 'select-active' : 'no-select'" @click="changeTab(1)">
                        {{ $t('永续合约') }}</button>
                    <button class="tabBtn w-368 h-74 lh-74 border-none  rounded"
                        :class="selectIndex == 2 ? 'select-active' : 'no-select'" @click="changeTab(2)">
                        {{ $t('交割合约') }}</button>
          <button
            class="w-368 h-74 lh-74"
            :class="selectIndex == 1 ? 'select-active' : 'no-select'"
            @click="changeTab(1)"
          >
            {{ $t("永续合约") }}
          </button>
          <button
            class="w-368 h-74 lh-74"
            :class="selectIndex == 2 ? 'select-active' : 'no-select'"
            @click="changeTab(2)"
          >
            {{ $t("交割合约") }}
          </button>
                </div>
            </div>
        </div>
        <!-- 左侧边弹出菜单 -->
        <van-popup class="popup" round v-model="show" close-icon-position="top-left" position="left" @closed="onClose">
    <van-popup
      class="popup"
      round
      v-model="show"
      close-icon-position="top-left"
      position="left"
      @closed="onClose"
    >
            <div class="pl-42 border-b-color pt-48 pb-48">
                <div class="textColor">
                    <span class="font-bold font-45 mr-12">{{ title }} {{ $t('合约') }}</span>
          <span class="font-bold font-45 mr-12"
            >{{ title }} {{ $t("合约") }}</span
          >
                    <span class="font-30">/ USDT</span>
                </div>
            </div>
            <div class="pl-42 pr-40">
                <div class="flex justify-between mb-42 mt-53">
                    <div class="flex items-center text-grey">
                        <div class="mr-12">{{ $t('名称') }}</div>
            <div class="mr-12">{{ $t("名称") }}</div>
                    </div>
                    <div class="flex text-grey">
                        <div class="flex items-center">
                            <div class="">{{ $t('最新价格') }}</div>
              <div class="">{{ $t("最新价格") }}</div>
                        </div>
                        <div class="flex items-center">
                            <div class="mr-12">/24H{{ $t('涨跌') }}</div>
              <div class="mr-12">/24H{{ $t("涨跌") }}</div>
                        </div>
                    </div>
                </div>
                <div class="flex justify-between mb-50" v-for="item in list" :key="item.name" @click="onRoute(item)">
        <div
          class="flex justify-between mb-50"
          v-for="item in list"
          :key="item.name"
          @click="onRoute(item)"
        >
                    <div>
                        <div class="textColor">{{ item.name }}</div>
                        <div class="text-grey mt-10">{{ selectIndex == 1 ? $t('永续') : $t('交割') }}</div>
            <div class="text-grey mt-10">
              {{ selectIndex == 1 ? $t("永续") : $t("交割") }}
            </div>
                    </div>
                    <div class="text-right">
                        <div class="textColor">{{ item.close }}</div>
                        <div class="mt-10" :class="item.change_ratio > 0 ? 'text-green' : 'text-red'">
                            {{ item.change_ratio || (item.change_ratio === 0 ? 0 : '--') }}%
            <div
              class="mt-10"
              :class="item.change_ratio > 0 ? 'text-green' : 'text-red'"
            >
              {{ item.change_ratio || (item.change_ratio === 0 ? 0 : "--") }}%
                        </div>
                    </div>
                </div>
@@ -75,17 +110,18 @@
import { Popup } from "vant";
import { mapGetters } from "vuex";
import { _getHomeList } from "@/API/home.api";
import { setStorage } from '@/utils/utis'
import { setStorage } from "@/utils/utis";
export default {
    name: "contractHeader",
    props: {
        backFunc: {
            type: Function,
            default: null
      default: null,
        },
        balance: { // 余额
    balance: {
      // 余额
            type: [String, Number],
            default: 0.00
      default: 0.0,
        },
        // title:{
        //     type:String,
@@ -93,15 +129,15 @@
        // },
        symbol: {
            type: String,
            default: ''
      default: "",
        },
        range: {
            type: String,
            defalult: ''
      defalult: "",
        },
        selectIndex: {
            type: [String, Number],
            defalult: ''
      defalult: "",
        },
    },
    components: {
@@ -109,12 +145,12 @@
    },
    computed: {
        ...mapGetters({
            coinList: 'home/coinList',
            theme: 'home/theme'
      coinList: "home/coinList",
      theme: "home/theme",
        }),
        title() {
            return [this.$t('永续'), this.$t('交割')][this.selectIndex - 1]
        }
      return [this.$t("永续"), this.$t("交割")][this.selectIndex - 1];
    },
    },
    data() {
        return {
@@ -126,8 +162,8 @@
                // { name:"BTC/USDT",close:"22042.28",change_ratio:"2.21"},
                // { name:"XTZ/USDT",close:"1.568",change_ratio:"-7.1"},
                // { name:"ADA/USDT",close:"0.493085",change_ratio:"-4.08"},
            ]
        }
      ],
    };
    },
    created() {
        // this.coins = this.coinList.map(item => item.symbol)
@@ -136,53 +172,55 @@
    methods: {
        onRoute(item) {
            if (this.$route.params.symbol !== item.symbol) {
                this.$router.push(`/perpetualContract/${item.symbol}`)
                this.$emit('update-coin', item.symbol)
                setStorage('symbol', item.symbol)
                this.onClose()
                this.$forceUpdate()
        this.$router.push(`/perpetualContract/${item.symbol}`);
        this.$emit("update-coin", item.symbol);
        setStorage("symbol", item.symbol);
        this.onClose();
        this.$forceUpdate();
            }
            this.show = false
      this.show = false;
        },
        onSidebar() { // 侧边栏打开
            console.log(this.userInfo)
            this.coins = this.coinList.map(item => item.symbol)
            this.show = true
            this.fetchList()
    onSidebar() {
      // 侧边栏打开
      console.log(this.userInfo);
      this.coins = this.coinList.map((item) => item.symbol);
      this.show = true;
      this.fetchList();
        },
        fetchList() { // 获取行情
            _getHomeList(this.coins.join(',')).then(list => {
    fetchList() {
      // 获取行情
      _getHomeList(this.coins.join(",")).then((list) => {
                // console.log(list)
                this.list = list
        this.list = list;
                if (this.timeout) {
                    clearTimeout(this.timeout)
                    this.timeout = null
          clearTimeout(this.timeout);
          this.timeout = null;
                }
                this.timeout = setTimeout(() => {
                    this.fetchList()
                }, 1000)
            })
          this.fetchList();
        }, 1000);
      });
        },
        onClose() {
            if (this.timeout) {
                clearTimeout(this.timeout)
                this.timeout = null
        clearTimeout(this.timeout);
        this.timeout = null;
            }
        },
        jump() {
            this.$router.push(`/trendDetails/${this.symbol}`)
      this.$router.push(`/trendDetails/${this.symbol}`);
        },
        changeTab(index) {
            this.$emit('tab', index)
      this.$emit("tab", index);
            // this.selectIndex2 = index;
        },
    }
}
  },
};
</script>
<style lang="scss" scoped>
@import "@/assets/init.scss";
.before {
    position: relative;
@@ -197,31 +235,28 @@
    }
}
.wallet-background {
    background-color: #E8E8E8;
  background-color: #e8e8e8;
}
.tabBtn {
    // border-radius: 8px;
    border: 1px solid #909090;
    color: #868D9A;
  color: #868d9a;
    background: transparent;
}
.select-active {
    background-color: transparent;
    color: white !important;
    @include themify() {
        background: themed("color_main");
  border: 0px;
  color: $newcolor;
    }
    border: none;
.no-select {
  background-color: transparent;
  border: 0px;
  color: $newcolor1;
}
.no-select {}
// 弹出层样式
.popup {