<template>
|
<div class="morePage">
|
<fx-header>
|
<template #title>
|
{{ $t('更多') }}
|
</template>
|
</fx-header>
|
<div class="main">
|
<div class="search-container flex items-center ">
|
<van-search class="search-input" v-model="searchVal" :placeholder="$t('搜索更多服务')" shape="round"
|
:background="thStore.theme == 'dark' ? '#131A2E' : '#fff'">
|
</van-search>
|
</div>
|
<div v-if="searchList.length == 0">
|
<div class="nav-list ">
|
<div class="title px-5">{{ t('推荐') }}</div>
|
<van-grid class="van-grid-main" :column-num="4" :border="false">
|
<van-grid-item v-for="(item, index) in navList.recommend" @click="openUrl(item)" :key="index"
|
:text="item.name">
|
<template #icon>
|
<img class="grid-item-img" :src="item.url" />
|
</template>
|
</van-grid-item>
|
</van-grid>
|
</div>
|
<!-- <div class="line-div"></div>
|
<div class="nav-list ">
|
<div class="title px-5">{{ t('股票') }}</div>
|
<van-grid class="van-grid-main" :column-num="4" :border="false">
|
<van-grid-item v-for="(item, index) in navList.stock" @click="openUrl(item)" :key="index"
|
:text="item.name">
|
<template #icon>
|
<img class="grid-item-img" :src="item.url" />
|
</template>
|
</van-grid-item>
|
</van-grid>
|
</div> -->
|
</div>
|
<div class="search" v-else>
|
<div class="nav-list ">
|
<van-grid class="van-grid-main" :column-num="4" :border="false">
|
<van-grid-item v-for="(item, index) in searchList" @click="openUrl(item)" :key="index"
|
:text="item.name">
|
<template #icon>
|
<img class="grid-item-img" :src="item.url" />
|
</template>
|
</van-grid-item>
|
</van-grid>
|
</div>
|
</div>
|
</div>
|
|
</div>
|
</template>
|
|
<script setup>
|
import { onMounted, ref, watch } from 'vue';
|
import { useRoute, useRouter } from 'vue-router';
|
import { showToast } from "vant";
|
import { useI18n } from "vue-i18n";
|
import { useUserStore } from '@/store/user';
|
import { themeStore } from '@/store/theme';
|
const thStore = themeStore()
|
const useStore = useUserStore();
|
const { t } = useI18n()
|
const route = useRoute()
|
const router = useRouter()
|
const searchVal = ref('')
|
const navList = ref({
|
recommend: [
|
{ name: t('公告中心'), url: new URL(`../../assets/theme/${thStore.theme}/image/nav/announcement.png`, import.meta.url), path: '/cryptos/announce', isLogin: false },
|
{ name: t('充值'), url: new URL(`../../assets/theme/${thStore.theme}/image/nav/recharge.png`, import.meta.url), path: '/cryptos/recharge/rechargeList', isLogin: true },
|
{ name: t('提现'), url: new URL(`../../assets/theme/${thStore.theme}/image/nav/withdraw.png`, import.meta.url), path: '/cryptos/withdraw/withdrawPage', isLogin: true },
|
{ name: t('账变记录'), url: new URL(`../../assets/theme/${thStore.theme}/image/nav/record.png`, import.meta.url), path: '/cryptos/accountChange?type=cryptos', isLogin: true },
|
{ name: t('news'), url: new URL(`../../assets/theme/${thStore.theme}/image/nav/Information.png`, import.meta.url), path: '/news', isLogin: false },
|
{ name: t('闪兑'), url: new URL(`../../assets/theme/${thStore.theme}/image/nav/exchange.png`, import.meta.url), path: '/cryptos/exchangePage', isLogin: true },
|
{ name: t('SpotTrading'), url: new URL(`../../assets/theme/${thStore.theme}/image/nav/coin.png`, import.meta.url), path: '/cryptos/trade/btc', isLogin: false },
|
{ name: t('永续合约'), url: new URL(`../../assets/theme/${thStore.theme}/image/nav/trading.png`, import.meta.url), path: '/cryptos/perpetualContract/btc?type=cryptos', isLogin: false },
|
{ name: t('交割合约'), url: new URL(`../../assets/theme/${thStore.theme}/image/nav/delivery.png`, import.meta.url), path: '/cryptos/perpetualContract/btc?selectIndex=2&type=cryptos', isLogin: false },
|
{ name: t('资金'), url: new URL(`../../assets/theme/${thStore.theme}/image/nav/asset.png`, import.meta.url), path: '/cryptos/funds?type=cryptos', isLogin: true },
|
{ name: t('C2C'), url: new URL(`../../assets/theme/${thStore.theme}/image/nav/c2c.png`, import.meta.url), path: '/cryptos/wantBuy', isLogin: false },
|
],
|
})
|
const searchList = ref([])
|
const allList = ref([]) //全部数据
|
onMounted(async () => {
|
allList.value = navList.value.recommend.slice()
|
})
|
const onClickButton = () => {
|
if (searchVal.value) {
|
searchList.value = allList.value.filter((item) => {
|
console.log(item.name.indexOf(searchVal.value))
|
return item.name.indexOf(searchVal.value) != -1
|
})
|
console.log(searchList.value)
|
} else {
|
searchList.value = []
|
}
|
}
|
const openUrl = (item) => {
|
if (item.isLogin) {
|
if (!useStore.userInfo.token) {
|
router.push('/login')
|
return
|
} else {
|
router.push(item.path)
|
}
|
} else {
|
router.push(item.path)
|
}
|
}
|
watch(searchVal, (val, oldVal) => {
|
if (val) {
|
searchList.value = allList.value.filter((item) => {
|
console.log(item.name.indexOf(val))
|
return item.name.indexOf(searchVal.value) != -1
|
})
|
console.log(searchList.value)
|
} else {
|
searchList.value = []
|
}
|
})
|
|
|
</script>
|
<style lang="scss" scoped>
|
.morePage {
|
padding-bottom: 30px;
|
font-size: 14px;
|
|
.search-container {
|
|
.search-input {
|
height: 42px;
|
display: flex;
|
align-items: center;
|
width: 100%;
|
}
|
|
:deep(.van-search__field) {
|
background: $search_background !important;
|
}
|
|
:deep(.van-search__content) {
|
overflow: hidden;
|
background: $search_background;
|
}
|
|
:deep(.van-field__control) {
|
background: transparent !important;
|
height: 100% !important;
|
color: $text_color;
|
}
|
}
|
|
.nav-list {
|
.title {
|
font-size: 16px;
|
padding: 20px 15px 10px 15px;
|
}
|
|
.grid-item-img {
|
width: 48px;
|
height: 48px;
|
margin-bottom: 5px;
|
}
|
|
:deep(.van-grid-item__content) {
|
background: $more-bg;
|
padding: 10px 10px;
|
}
|
|
:deep(.van-grid-item__text) {
|
color: $text_color;
|
font-size: 12px;
|
height: 30px;
|
display: flex;
|
|
}
|
}
|
|
.line-div {
|
background: $divi_line;
|
height: 10px;
|
}
|
|
}
|
</style>
|
