vue实现银行列表

实现银行列表的Vue组件

创建一个Vue组件来展示银行列表，需要包含银行名称、图标、编号等基本信息。以下是一个基础的实现示例：

<template>
  <div class="bank-list">
    <div v-for="bank in banks" :key="bank.id" class="bank-item">
      <img :src="bank.logo" :alt="bank.name" class="bank-logo">
      <span class="bank-name">{{ bank.name }}</span>
      <span class="bank-code">{{ bank.code }}</span>
    </div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      banks: [
        { id: 1, name: '中国工商银行', code: 'ICBC', logo: 'icbc-logo.png' },
        { id: 2, name: '中国建设银行', code: 'CCB', logo: 'ccb-logo.png' },
        { id: 3, name: '中国银行', code: 'BOC', logo: 'boc-logo.png' },
        { id: 4, name: '中国农业银行', code: 'ABC', logo: 'abc-logo.png' }
      ]
    }
  }
}
</script>

<style scoped>
.bank-list {
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.bank-item {
  display: flex;
  align-items: center;
  padding: 10px;
  border: 1px solid #eee;
  border-radius: 4px;
}

.bank-logo {
  width: 30px;
  height: 30px;
  margin-right: 10px;
}

.bank-name {
  flex: 1;
}

.bank-code {
  color: #666;
}
</style>

从API获取银行数据

实际项目中，银行列表通常从后端API获取：

<script>
export default {
  data() {
    return {
      banks: [],
      isLoading: false,
      error: null
    }
  },
  async created() {
    try {
      this.isLoading = true
      const response = await fetch('/api/banks')
      this.banks = await response.json()
    } catch (err) {
      this.error = err.message
    } finally {
      this.isLoading = false
    }
  }
}
</script>

添加搜索和筛选功能

为银行列表添加搜索和筛选功能：

<template>
  <div>
    <input v-model="searchQuery" placeholder="搜索银行..." class="search-input">

    <div class="filter-options">
      <label v-for="type in bankTypes" :key="type.value">
        <input type="checkbox" v-model="selectedTypes" :value="type.value">
        {{ type.label }}
      </label>
    </div>

    <div v-if="filteredBanks.length === 0">未找到匹配的银行</div>
    <bank-list :banks="filteredBanks" />
  </div>
</template>

<script>
import BankList from './BankList.vue'

export default {
  components: { BankList },
  data() {
    return {
      searchQuery: '',
      selectedTypes: [],
      bankTypes: [
        { value: 'state', label: '国有银行' },
        { value: 'commercial', label: '商业银行' },
        { value: 'foreign', label: '外资银行' }
      ],
      allBanks: [] // 从API获取的数据
    }
  },
  computed: {
    filteredBanks() {
      return this.allBanks.filter(bank => {
        const matchesSearch = bank.name.includes(this.searchQuery) || 
                            bank.code.includes(this.searchQuery)
        const matchesType = this.selectedTypes.length === 0 || 
                          this.selectedTypes.includes(bank.type)
        return matchesSearch && matchesType
      })
    }
  }
}
</script>

实现分页功能

对于大量银行数据，添加分页功能：

<template>
  <div>
    <bank-list :banks="paginatedBanks" />
    <div class="pagination">
      <button @click="prevPage" :disabled="currentPage === 1">上一页</button>
      <span>第 {{ currentPage }} 页</span>
      <button @click="nextPage" :disabled="currentPage === totalPages">下一页</button>
    </div>
  </div>
</template>

<script>
export default {
  props: {
    banks: Array,
    itemsPerPage: {
      type: Number,
      default: 10
    }
  },
  data() {
    return {
      currentPage: 1
    }
  },
  computed: {
    totalPages() {
      return Math.ceil(this.banks.length / this.itemsPerPage)
    },
    paginatedBanks() {
      const start = (this.currentPage - 1) * this.itemsPerPage
      const end = start + this.itemsPerPage
      return this.banks.slice(start, end)
    }
  },
  methods: {
    nextPage() {
      if (this.currentPage < this.totalPages) {
        this.currentPage++
      }
    },
    prevPage() {
      if (this.currentPage > 1) {
        this.currentPage--
      }
    }
  }
}
</script>

银行卡片组件

创建一个更美观的银行卡片组件：

<template>
  <div class="bank-card" @click="selectBank">
    <div class="bank-card-header">
      <img :src="bank.logo" :alt="bank.name" class="bank-card-logo">
      <h3 class="bank-card-name">{{ bank.name }}</h3>
    </div>
    <div class="bank-card-body">
      <p>银行代码: {{ bank.code }}</p>
      <p>客服电话: {{ bank.servicePhone }}</p>
    </div>
  </div>
</template>

<script>
export default {
  props: {
    bank: {
      type: Object,
      required: true
    }
  },
  methods: {
    selectBank() {
      this.$emit('select', this.bank)
    }
  }
}
</script>

<style scoped>
.bank-card {
  border: 1px solid #ddd;
  border-radius: 8px;
  padding: 15px;
  margin: 10px;
  cursor: pointer;
  transition: all 0.3s;
}

.bank-card:hover {
  box-shadow: 0 2px 10px rgba(0,0,0,0.1);
}

.bank-card-header {
  display: flex;
  align-items: center;
  margin-bottom: 10px;
}

.bank-card-logo {
  width: 40px;
  height: 40px;
  margin-right: 10px;
}

.bank-card-name {
  margin: 0;
  font-size: 16px;
}

.bank-card-body {
  color: #666;
  font-size: 14px;
}
</style>

这些代码示例展示了如何实现一个功能完整的银行列表组件，包括基本展示、API数据获取、搜索筛选、分页和卡片式布局等功能。根据实际项目需求，可以进一步调整样式和功能。