| | |
| | | <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> |