wallet_app/src/views/login/selectNetwork/index.vue

<template>
  <div class="container">
    <van-search
      v-model="value"
      shape="round"
      
      :placeholder="$t('login.SearchMainnet')"
      class="search"
    />
  </div>
 
  <van-skeleton  avatar title :row="2" :loading="loading" />

  <div class="network-list">
    <div class="network-item" v-for="item in networkComputed" :key="item.id" @click="selectNetwork(item)">
      <van-image loading-icon="wechat-moments"  lazy-load class="network-item-icon" :src="item.icon" />
      <div class="network-item-name">{{ item.name }}</div>
    </div>
  </div>
</template>
<script setup> 
import { getNetwork } from '@/api/path/login.api'
import { useSystemStore } from "@/stores/modules/systemStore";
import { useWalletStore } from "@/stores/modules/walletStore";
import { useRouter } from 'vue-router'

const router = useRouter()
const systemStore = useSystemStore();
const walletStore = useWalletStore();


const value = ref('')
const networkList  = ref([])
const loading = ref(true)

const initNetwork =  async () => {
  const { data } = await getNetwork({})
  loading.value = false
  networkList.value = data
}

const networkComputed = computed(() => {
  if (!value.value) return networkList.value
  let arr = [];
  arr = networkList.value.filter((item) => {
    return JSON.stringify(item).includes(value.value);
  });
  return arr;
})

const selectNetwork = (item) => {
  walletStore.accountName = item.name
  walletStore.accountIcon = item.icon
  walletStore.rpcUrl = item.url
  router.push({
    path: systemStore.getISCREATE?'/createWallet':'/importMethod',
  })
}



onMounted(() =>{
  initNetwork()
})
</script>
<style scoped lang="less">
.search{
  background-color: transparent;
}
:deep(.van-search__content){
  background: @bg-color1;
}
.network-list{
  display: flex;
  flex-direction: column;
  margin: 20px 20px 0 20px;
  .network-item{
    display: flex;
    align-items: center;
    margin-bottom: 17px;
    .network-item-icon{
      width: 30px;
      height: 30px;
    }
    .network-item-name{
      margin-left: 10px;
      font-size: 15px;
      color: @font-color2;
    }
  }
}
 
</style>