当前位置：首页 > VUE

vue实现充值记录

2026-01-18 15:10:59VUE

Vue 实现充值记录功能

数据准备

需要准备充值记录的数据结构，通常包括充值金额、充值时间、充值状态等信息。可以使用数组或对象存储这些数据。

data() {
  return {
    rechargeRecords: [
      { id: 1, amount: 100, time: '2023-01-01 10:00', status: '成功' },
      { id: 2, amount: 200, time: '2023-01-02 11:00', status: '失败' },
      { id: 3, amount: 300, time: '2023-01-03 12:00', status: '成功' }
    ]
  }
}

页面布局

使用Vue的模板语法创建充值记录列表页面。可以使用表格或卡片形式展示充值记录。

<template>
  <div class="recharge-records">
    <h3>充值记录</h3>
    <table>
      <thead>
        <tr>
          <th>ID</th>
          <th>金额</th>
          <th>时间</th>
          <th>状态</th>
        </tr>
      </thead>
      <tbody>
        <tr v-for="record in rechargeRecords" :key="record.id">
          <td>{{ record.id }}</td>
          <td>{{ record.amount }}</td>
          <td>{{ record.time }}</td>
          <td>{{ record.status }}</td>
        </tr>
      </tbody>
    </table>
  </div>
</template>

样式设计

为充值记录页面添加CSS样式，提升用户体验。

<style scoped>
.recharge-records {
  margin: 20px;
}
table {
  width: 100%;
  border-collapse: collapse;
}
th, td {
  border: 1px solid #ddd;
  padding: 8px;
  text-align: left;
}
th {
  background-color: #f2f2f2;
}
</style>

数据获取

实际项目中，充值记录数据通常通过API从后端获取。可以使用axios等HTTP客户端库实现。

methods: {
  async fetchRechargeRecords() {
    try {
      const response = await axios.get('/api/recharge/records')
      this.rechargeRecords = response.data
    } catch (error) {
      console.error('获取充值记录失败:', error)
    }
  }
},
created() {
  this.fetchRechargeRecords()
}

分页功能

对于大量充值记录，可以添加分页功能。

data() {
  return {
    currentPage: 1,
    pageSize: 10,
    totalRecords: 0
  }
},
methods: {
  async fetchRechargeRecords() {
    const params = {
      page: this.currentPage,
      size: this.pageSize
    }
    const response = await axios.get('/api/recharge/records', { params })
    this.rechargeRecords = response.data.records
    this.totalRecords = response.data.total
  }
}

状态筛选

添加筛选功能，允许用户按充值状态查看记录。

<div class="filters">
  <select v-model="filterStatus">
    <option value="">全部</option>
    <option value="成功">成功</option>
    <option value="失败">失败</option>
  </select>
</div>

computed: {
  filteredRecords() {
    if (!this.filterStatus) return this.rechargeRecords
    return this.rechargeRecords.filter(record => 
      record.status === this.filterStatus
    )
  }
}

时间排序

实现按时间排序功能，方便用户查看最新或最早的充值记录。

methods: {
  sortRecords(order) {
    this.rechargeRecords.sort((a, b) => {
      const dateA = new Date(a.time)
      const dateB = new Date(b.time)
      return order === 'asc' ? dateA - dateB : dateB - dateA
    })
  }
}

导出功能

添加导出充值记录为CSV或Excel的功能。

methods: {
  exportToCSV() {
    const headers = ['ID', '金额', '时间', '状态']
    const csvContent = [
      headers.join(','),
      ...this.rechargeRecords.map(record => 
        [record.id, record.amount, record.time, record.status].join(',')
      )
    ].join('\n')

    const blob = new Blob([csvContent], { type: 'text/csv;charset=utf-8;' })
    const link = document.createElement('a')
    link.href = URL.createObjectURL(blob)
    link.download = '充值记录.csv'
    link.click()
  }
}