vue实现充值记录

实现充值记录功能

在Vue中实现充值记录功能需要结合前端页面展示和后端数据交互。以下是具体实现方法：

页面结构设计

使用Vue单文件组件构建充值记录页面：

<template>
  <div class="recharge-record">
    <h3>充值记录</h3>
    <el-table :data="records" style="width: 100%">
      <el-table-column prop="orderId" label="订单号"></el-table-column>
      <el-table-column prop="amount" label="金额"></el-table-column>
      <el-table-column prop="createTime" label="充值时间"></el-table-column>
      <el-table-column prop="status" label="状态"></el-table-column>
    </el-table>
    <el-pagination
      @current-change="handlePageChange"
      :current-page="pagination.current"
      :page-size="pagination.size"
      :total="pagination.total">
    </el-pagination>
  </div>
</template>

数据获取与处理

在script部分实现数据获取逻辑：

<script>
export default {
  data() {
    return {
      records: [],
      pagination: {
        current: 1,
        size: 10,
        total: 0
      }
    }
  },
  created() {
    this.fetchRecords()
  },
  methods: {
    async fetchRecords() {
      try {
        const res = await this.$http.get('/api/recharge/records', {
          params: {
            page: this.pagination.current,
            size: this.pagination.size
          }
        })
        this.records = res.data.list
        this.pagination.total = res.data.total
      } catch (error) {
        this.$message.error('获取充值记录失败')
      }
    },
    handlePageChange(page) {
      this.pagination.current = page
      this.fetchRecords()
    }
  }
}
</script>

样式优化

添加CSS样式美化界面：

<style scoped>
.recharge-record {
  padding: 20px;
  background: #fff;
  border-radius: 4px;
  box-shadow: 0 2px 12px 0 rgba(0,0,0,.1);
}
.el-pagination {
  margin-top: 20px;
  text-align: right;
}
</style>

后端接口规范

后端接口应返回以下格式数据：

{
  "code": 200,
  "data": {
    "list": [
      {
        "orderId": "20230601123456",
        "amount": 100.00,
        "createTime": "2023-06-01 12:34:56",
        "status": "已完成"
      }
    ],
    "total": 15
  }
}

状态显示优化

可使用标签显示不同状态：

<el-table-column prop="status" label="状态">
  <template slot-scope="scope">
    <el-tag :type="getStatusType(scope.row.status)">
      {{ scope.row.status }}
    </el-tag>
  </template>
</el-table-column>

对应方法：

methods: {
  getStatusType(status) {
    const map = {
      '已完成': 'success',
      '处理中': 'warning',
      '已取消': 'danger'
    }
    return map[status] || 'info'
  }
}

筛选功能实现

添加时间筛选和状态筛选：

<el-form :inline="true" :model="queryParams">
  <el-form-item label="日期范围">
    <el-date-picker
      v-model="queryParams.dateRange"
      type="daterange"
      range-separator="至"
      start-placeholder="开始日期"
      end-placeholder="结束日期">
    </el-date-picker>
  </el-form-item>
  <el-form-item label="状态">
    <el-select v-model="queryParams.status" placeholder="请选择">
      <el-option label="全部" value=""></el-option>
      <el-option label="已完成" value="1"></el-option>
      <el-option label="处理中" value="2"></el-option>
    </el-select>
  </el-form-item>
  <el-form-item>
    <el-button type="primary" @click="handleSearch">查询</el-button>
  </el-form-item>
</el-form>