去掉BNB充值，调试好充值接口

dcc

2024-06-07 d5381ec06ab5f549fade867c3a874de613bdd5d4

 src/page/search/index.vue

@@ -1,373 +1,420 @@
<template>
    <!-- 账变记录 -->
    <div class="accountChange">
        <div class="px-32 py-30 flex items-center">
            <!-- <img src="@/assets/image/icon-left_arrow.png" alt="logo" class="w-20 h-33 border-1 mr-32" @click="back"/> -->
            <div class="inputBoxbg h-60 w-full rounded-full flex items-center">
                <img src="@/assets/image/icon-search.png" alt="logo" class="w-32 h-32 mx-16" />
                <input type="text" v-model="keywords" :placeholder="$t('搜索')"
                    class="h-full flex-1 border-none search-input bg-none" @input="onInput" />
            </div>
            <div class="cancel" @click="cancel">
                {{ $t('取消') }}
            </div>
        </div>
        <van-tabs v-model="active" @change="changeValue">
            <van-tab :title="$t('热门搜索')"></van-tab>
            <van-tab :title="$t('热门功能')"></van-tab>
        </van-tabs>
        <div v-if="active == 0" class="px-32 mt-20">
            <div class="list-item flex" v-for="(item, index) in currencyList" :key="index" @click.stop="onItemClick(item)">
                <div class="flex-1 item-left flex">
                    <div class="">
                        <van-icon class="star-icon-check" v-if="index == 0 || index == 1" name="fire" />
                        <span v-else class="font-35">
                            {{ index + 1 }}
                        </span>
                    </div>
                    <div class="pl-30 symbol-name">{{ item.symbol.toUpperCase() }}<span>/usdt</span></div>
                </div>
                <div class="item-right">
                    <div class="symbol-name">{{ item.close }}</div>
                    <div class="increase  mt-10" :class="[item.change_ratio > 0 ? 'green' : 'red']">{{ item.change_ratio
                    }}%</div>
                </div>
                <van-icon :class="[item.isCollection ? 'star-icon-check' : 'star-icon']" class="font-40 ml-20" name="star"
                    @click.stop="onCollect(item)" />
            </div>
        </div>
        <div v-if="active == 1" class="px-32 mt-30">
            <div class="function-item list-item flex" v-for="(item, index) in dataList" @click="jump(item.path)"
                :key="index">
                <div class="flex-1 flex item-left">
                    <div>
                        <span v-if="index == 0 || index == 1">{{ index + 1 }}</span>
                        <span v-else>
                            {{ index + 1 }}
                        </span>

                    </div>
                    <div class="imgBox ml-30"><img :src="item.icon" alt=""></div>
                    <div class=" ml-30 symbol-name">{{ item.name }}</div>
                </div>
                <div class="item-right">
                    <van-icon name="arrow" />
                </div>
            </div>
        </div>
        <div v-if="dataList.length == 0 || currencyList.length == 0"
            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 class="loading-box" v-if="isLoading">
            <van-loading type="spinner" size="24px" />
        </div>
  <!-- 账变记录 -->
  <div class="accountChange">
    <div class="px-32 py-30 flex items-center">
      <!-- <img src="@/assets/image/icon-left_arrow.png" alt="logo" class="w-20 h-33 border-1 mr-32" @click="back"/> -->
      <div class="inputBoxbg h-60 w-full rounded-full flex items-center">
        <img
          src="@/assets/image/icon-search.png"
          alt="logo"
          class="w-32 h-32 mx-16"
        />
        <input
          type="text"
          v-model="keywords"
          :placeholder="$t('搜索')"
          class="h-full flex-1 border-none search-input bg-none"
          @input="onInput"
        />
      </div>
      <div class="cancel" @click="cancel">
        {{ $t("取消") }}
      </div>
    </div>
    <van-tabs v-model="active" @change="changeValue">
      <van-tab :title="$t('热门搜索')"></van-tab>
      <van-tab :title="$t('热门功能')"></van-tab>
    </van-tabs>
    <div v-if="active == 0" class="px-32 mt-20">
      <div
        class="list-item flex"
        v-for="(item, index) in currencyList"
        :key="index"
        @click.stop="onItemClick(item)"
      >
        <div class="flex-1 item-left flex">
          <div class="">
            <van-icon
              class="star-icon-check"
              v-if="index == 0 || index == 1"
              name="fire"
            />
            <span v-else class="font-35">
              {{ index + 1 }}
            </span>
          </div>
          <div class="pl-30 symbol-name">
            {{ item.symbol.toUpperCase() }}<span>/usdt</span>
          </div>
        </div>
        <div class="item-right">
          <div class="symbol-name">{{ item.close }}</div>
          <div
            class="increase mt-10"
            :class="[item.change_ratio > 0 ? 'green' : 'red']"
          >
            {{ item.change_ratio }}%
          </div>
        </div>
        <van-icon
          :class="[item.isCollection ? 'star-icon-check' : 'star-icon']"
          class="font-40 ml-20"
          name="star"
          @click.stop="onCollect(item)"
        />
      </div>
    </div>
    <div v-if="active == 1" class="px-32 mt-30">
      <div
        class="function-item list-item flex"
        v-for="(item, index) in dataList"
        @click="jump(item.path)"
        :key="index"
      >
        <div class="flex-1 flex item-left">
          <div>
            <span v-if="index == 0 || index == 1">{{ index + 1 }}</span>
            <span v-else>
              {{ index + 1 }}
            </span>
          </div>
          <div class="imgBox ml-30"><img :src="item.icon" alt="" /></div>
          <div class="ml-30 symbol-name">{{ item.name }}</div>
        </div>
        <div class="item-right">
          <van-icon name="arrow" />
        </div>
      </div>
    </div>
    <div
      v-if="dataList.length == 0 || currencyList.length == 0"
      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 class="loading-box" v-if="isLoading">
      <van-loading type="spinner" size="24px" />
    </div>
  </div>
</template>

<script>
import { _fundRecord } from '@/API/fund.api'
import { List } from 'vant'
import { Tab, Tabs, Loading } from 'vant';
import { _getHomeList, _myCoins, _collect, _deleteCollect } from '@/API/home.api'
import { mapGetters } from "vuex";
import { _fundRecord } from "@/API/fund.api";
import { List } from "vant";
import { Tab, Tabs, Loading } from "vant";
import {
  _getHomeList,
  _myCoins,
  _collect,
  _deleteCollect,
} from "@/API/home.api";
import { mapActions, mapGetters } from "vuex";
import { TIME_OUT } from "@/config";
import { setStorage } from "@/utils/utis";
export default {
    name: "search",
    data() {
        return {
            keywords: '',
            active: 0,
            allFunList: [],
            dataList: [],
            allCurrencyList: [],
            currencyList: [],
            timeout: null,
            collectionList: [],
            isLoading: true
        }
    },
    mounted() {
        this.allFunList = [
            {
                name: this.$t('理财'),
                icon: require(`../../assets/theme/${this.theme}/image/nav/finance.png`),
                path: '/fm-home'
            },
            {
                name: this.$t('充值'),
                icon: require(`../../assets/theme/${this.theme}/image/nav/account.png`),
                // path: '/recharge/rechargePage'
                path: '/recharge/rechargeList'
            },
            {
                name: this.$t('合约交易'),
                icon: require(`../../assets/theme/${this.theme}/image/nav/trading.png`),
                path: '/trendDetails/btc'
            },
            {
                name: this.$t('闪兑'),
                icon: require(`../../assets/theme/${this.theme}/image/nav/exchange.png`),
                path: '/exchange/exchangePage'
            }
        ]
        this.dataList = this.allFunList
        if (this.$store.state.user.userInfo.token) {
            this.myCoinsList()
        }
        setTimeout(() => {
            this.fetchQList();
        }, 1000)
    },
    components: {
        [List.name]: List,
        [Tabs.name]: Tabs,
        [Tab.name]: Tab,
        [Loading.name]: Loading
    },
    watch: {
        collectionList(val) {
            if (val) {
                this.allCurrencyList.map((item) => {
                    val.map((item2) => {
                        if (item.symbol == item2.symbol) {
                            item.isCollection = true
                        }
                    })
                })
                this.currencyList.map((item) => {
                    val.map((item2) => {
                        if (item.symbol == item2.symbol) {
                            item.isCollection = true
                        }
                    })
                })
            }
        }
    },
    computed: {
        ...mapGetters({
            coinArr: 'home/coinArr',
            theme: 'home/theme'
        }),
    },
    filters: {

    },
    beforeDestroy() {
        clearInterval(this.timeout)
    },
    methods: {
        onInput() {
            if (this.active == 1) {
                if (this.keywords) {
                    this.dataList = this.dataList.filter((item) => {
                        return item.name.indexOf(this.keywords) != -1
                    })
                } else {
                    this.dataList = this.allFunList
                }
            }
        },
        cancel() {
            this.$router.go(-1)
        },
        jump(path) {
            this.$router.push(path)
        },
        myCoinsList() {
            _myCoins().then((res) => {
                this.collectionList = res

            })
        },
        onCollect(item) { // 收藏，取消收藏
            let _api = _collect
            if (item.isCollection) {
                _api = _deleteCollect
            }
            _api(item.symbol).then(() => {
                this.myCoinsList()
                item.collected = !item.collected
                if (!item.isCollection) {
                    this.$toast.success(this.$t('收藏成功'))
                } else {
                    this.$toast.success(this.$t('取消收藏'))
                }
            })
        },
        fetchQList() { // 获取行情
            _getHomeList(this.coinArr.join(',')).then((res) => {
                this.isLoading = false
                res.map((item) => {
                    this.$set(item, 'isCollection', false)
                })
                this.allCurrencyList = res
                this.currencyList = res
                this.allCurrencyList.map((item) => {
                    this.collectionList.map((item2) => {
                        if (item.symbol == item2.symbol) {
                            item.isCollection = true
                        }
                    })
                })
                this.currencyList.map((item) => {
                    this.collectionList.map((item2) => {
                        if (item.symbol == item2.symbol) {
                            item.isCollection = true
                        }
                    })
                })
                if (this.active == 0) {
                    if (this.keywords) {
                        this.currencyList = this.currencyList.filter((item) => {
                            return item.name.toUpperCase().indexOf(this.keywords.toUpperCase()) != -1
                        })
                    } else {
                        this.currencyList = this.allCurrencyList
                    }
                }
                this.timeout = setTimeout(() => {
                    this.fetchQList()
                }, 1000)
            })

            if (this.timeout) {
                clearInterval(this.timeout)
            }
        },
        changeValue() {
            console.log(this.dataList)
            this.keywords = ''
        },
        onItemClick(item) {

            setStorage('symbol', item.symbol)
            this.$router.push({
                path: `/perpetualContract/${item.symbol}`
            });

        }
  name: "search",
  data() {
    return {
      keywords: "",
      active: 0,
      allFunList: [],
      dataList: [],
      allCurrencyList: [],
      currencyList: [],
      timeout: null,
      collectionList: [],
      isLoading: true,
    };
  },
  mounted() {
    this.NEW_CION_LIST();
    this.allFunList = [
      {
        name: this.$t("理财"),
        icon: require(`../../assets/theme/${this.theme}/image/nav/finance.png`),
        path: "/fm-home",
      },
      {
        name: this.$t("充值"),
        icon: require(`../../assets/theme/${this.theme}/image/nav/account.png`),
        // path: '/recharge/rechargePage'
        path: "/recharge/rechargeList",
      },
      {
        name: this.$t("合约交易"),
        icon: require(`../../assets/theme/${this.theme}/image/nav/trading.png`),
        path: "/trendDetails/btc",
      },
      {
        name: this.$t("闪兑"),
        icon: require(`../../assets/theme/${this.theme}/image/nav/exchange.png`),
        path: "/exchange/exchangePage",
      },
    ];
    this.dataList = this.allFunList;
    if (this.$store.state.user.userInfo.token) {
      this.myCoinsList();
    }
}
    setTimeout(() => {
      this.fetchQList();
    }, 1000);
  },
  components: {
    [List.name]: List,
    [Tabs.name]: Tabs,
    [Tab.name]: Tab,
    [Loading.name]: Loading,
  },
  watch: {
    collectionList(val) {
      if (val) {
        this.allCurrencyList.map((item) => {
          val.map((item2) => {
            if (item.symbol == item2.symbol) {
              item.isCollection = true;
            }
          });
        });
        this.currencyList.map((item) => {
          val.map((item2) => {
            if (item.symbol == item2.symbol) {
              item.isCollection = true;
            }
          });
        });
      }
    },
  },
  computed: {
    ...mapGetters({
      coinArr: "home/coinArr",
      theme: "home/theme",
      newcoinArr: "home/newcoinArr",
    }),
  },
  filters: {},
  beforeDestroy() {
    clearInterval(this.timeout);
  },
  methods: {
    ...mapActions("home", ["NEW_CION_LIST"]),

    onInput() {
      if (this.active == 1) {
        if (this.keywords) {
          this.dataList = this.dataList.filter((item) => {
            return item.name.indexOf(this.keywords) != -1;
          });
        } else {
          this.dataList = this.allFunList;
        }
      }
    },
    cancel() {
      this.$router.go(-1);
    },
    jump(path) {
      this.$router.push(path);
    },
    myCoinsList() {
      _myCoins().then((res) => {
        this.collectionList = res;
      });
    },
    onCollect(item) {
      // 收藏，取消收藏
      let _api = _collect;
      if (item.isCollection) {
        _api = _deleteCollect;
      }
      _api(item.symbol).then(() => {
        this.myCoinsList();
        item.collected = !item.collected;
        if (!item.isCollection) {
          this.$toast.success(this.$t("收藏成功"));
        } else {
          this.$toast.success(this.$t("取消收藏"));
        }
      });
    },
    fetchQList() {
      // 获取行情
      const mainArray = this.coinArr.filter(
        (item) => !this.newcoinArr.includes(item)
      );
      _getHomeList(mainArray.join(",")).then((res) => {
        this.isLoading = false;
        res.map((item) => {
          this.$set(item, "isCollection", false);
        });
        this.allCurrencyList = res;
        this.currencyList = res;
        this.allCurrencyList.map((item) => {
          this.collectionList.map((item2) => {
            if (item.symbol == item2.symbol) {
              item.isCollection = true;
            }
          });
        });
        this.currencyList.map((item) => {
          this.collectionList.map((item2) => {
            if (item.symbol == item2.symbol) {
              item.isCollection = true;
            }
          });
        });
        if (this.active == 0) {
          if (this.keywords) {
            this.currencyList = this.currencyList.filter((item) => {
              return (
                item.name.toUpperCase().indexOf(this.keywords.toUpperCase()) !=
                -1
              );
            });
          } else {
            this.currencyList = this.allCurrencyList;
          }
        }
        this.timeout = setTimeout(() => {
          this.fetchQList();
        }, 1000);
      });

      if (this.timeout) {
        clearInterval(this.timeout);
      }
    },
    changeValue() {
      console.log(this.dataList);
      this.keywords = "";
    },
    onItemClick(item) {
      setStorage("symbol", item.symbol);
      this.$router.push({
        path: `/perpetualContract/${item.symbol}`,
      });
    },
  },
};
</script>
<style lang="scss" scoped>
.cancel {
    width: 150px;
    text-align: center;
    color: #868D9A;
    font-size: 28px;
  width: 150px;
  text-align: center;
  color: #868d9a;
  font-size: 28px;
}

.inputBoxbg {
    @include themify() {
        background: themed("tab_background");
    }

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

.search-input {
    @include themify() {
        color: themed("text_color");
    }
  @include themify() {
    color: themed("text_color");
  }
}

.list-item {
    align-items: center;
    margin-bottom: 40px;
  align-items: center;
  margin-bottom: 40px;

    .item-left {
        font-size: 36px;
        font-weight: bold;
  .item-left {
    font-size: 36px;
    font-weight: bold;

        span {
            color: #868D9A;
            font-weight: initial;
            font-size: 28px;
        }
    span {
      color: #868d9a;
      font-weight: initial;
      font-size: 28px;
    }
  }

    .item-right {
        text-align: right;
        font-size: 30px;
        font-weight: bold;
  .item-right {
    text-align: right;
    font-size: 30px;
    font-weight: bold;

        .increase {
            font-size: 26px;
            font-weight: initial;
        }
    .increase {
      font-size: 26px;
      font-weight: initial;
    }
  }

    .green {
        color: #5EBA89;
    }
  .green {
    color: #5eba89;
  }

    .red {
        color: #F6465D;
    }

  .red {
    color: #f6465d;
  }
}

.function-item {
    align-items: center;
    margin-bottom: 60px;
  align-items: center;
  margin-bottom: 60px;

    .item-left {
        font-size: 30px;
        font-weight: bold;
    }
  .item-left {
    font-size: 30px;
    font-weight: bold;
  }

    .item-right {
        color: #B8BDC5;
        font-size: 30px;
    }
  .item-right {
    color: #b8bdc5;
    font-size: 30px;
  }

    .imgBox {
        img {
            width: 42px;
            height: 42px;
        }
  .imgBox {
    img {
      width: 42px;
      height: 42px;
    }
  }
}

.star-icon {
    color: #c8cad2;
  color: #c8cad2;
}

.star-icon-check {
    color: #FCD436;
  color: #fcd436;
}

.symbol-name {
    @include themify() {
        color: themed("text_color");
    }
  @include themify() {
    color: themed("text_color");
  }
}

.accountChange {
    ::v-deep .van-tabs__nav {
        background: transparent;
    }
  ::v-deep .van-tabs__nav {
    background: transparent;
  }

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

.loading-box {
    position: fixed;
    top: 0;
    left: 0;
    z-index: 10;
    width: 100%;
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    background: rgba(0, 0, 0, 0.4);
  position: fixed;
  top: 0;
  left: 0;
  z-index: 10;
  width: 100%;
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(0, 0, 0, 0.4);
}
</style>