gold_vue/gold-system/src/views/goldBeen/goldenBeenBalance.vue

<template>
  <!-- 这是客户金豆余额页面 -->
  <div class="filter-box">
    <el-form :model="detailY" ref="ruleFormRef">
      <el-form-item prop="jwcode">
        <el-text class="mx-1" size="large">精网号：</el-text>
        <el-input
          v-model="detailY.jwcode"
          placeholder="请输入精网号"
          style="width: 220px"
        />
      </el-form-item>
      <el-form-item prop="area">
        <el-text class="mx-1" size="large">地区：</el-text>
        <el-select
          v-model="detailY.area"
          placeholder="请选择所属地区"
          style="width: 240px"
          clearable
        >
          <el-option
            v-for="item in areaArray"
            :key="item"
            :label="item"
            :value="item"
          />
        </el-select>
      </el-form-item>
      <el-form-item>
        <el-button type="primary" @click="search()"
          >查询</el-button
        >
        <el-button type="success" @click="reset(ruleFormRef)"
          >重置</el-button
        >
      </el-form-item>
    </el-form>
  </div>
  <div class="table-box">
    <div>
      现有金豆：&nbsp;&nbsp;付费金豆：{{ getObj.jinbiBuy }}&nbsp;&nbsp;免费金豆：{{
        getObj.jinbiFree
      }}&nbsp;&nbsp;历史消费：{{ getObj.jinbiCostTotal }}
    </div>
    <el-table
      :data="tableData"
      style="width: 100%"
      :default-sort="{ prop: 'jinbiCostTotal', order: 'descending' }"
      height="584px"
      @sort-change="handleSortChange"
    >
      <el-table-column type="index" label="序号" width="100px" fixed="left">
        <template #default="scope">
          <span>{{
            scope.$index + 1 + (getObj.pageNum - 1) * getObj.pageSize
          }}</span>
        </template>
      </el-table-column>
      <el-table-column fixed="left" prop="nickname" label="姓名" width="150" />
      <el-table-column fixed="left" prop="jwcode" label="精网号" width="120" />
      <el-table-column prop="ipAddress" label="所属地区" width="120" />

      <el-table-column prop="jinbi" sortable label="金豆数量" width="120">
      </el-table-column>
      <el-table-column prop="jinbiBuy" sortable label="付费金豆" width="120">
      </el-table-column>
      <el-table-column prop="jinbiFree" sortable label="免费金豆" width="120">
      </el-table-column>
      <el-table-column
        sortable
        width="120"
        prop="jinbiCostTotal"
        label="历史消费"
      ></el-table-column>
      <el-table-column
        sortable
        prop="jinbiCostbeenTotal"
        width="160"
        label="历史付费金豆"
      ></el-table-column>
      <el-table-column
        sortable
        prop="jinbifreebeenTotal"
        width="160"
        label="历史免费金豆"
      ></el-table-column>
    </el-table>
    <!-- 分页 -->
    <div class="pagination">
      <el-pagination
        background
        :page-size="getObj.pageSize"
        :page-sizes="[5, 10, 20, 50, 100]"
        layout="total, sizes, prev, pager, next, jumper"
        :total="total"
        @size-change="handlePageSizeChange"
        @current-change="handleCurrentChange"
      >
      </el-pagination>
    </div>
  </div>
</template>
<script setup lang="ts">
import { ref, reactive } from 'vue'

import type { FormInstance } from 'element-plus'

import API from '@/util/http'
// 充值明细表格
const tableData = ref([])
//分页总条目
const total = ref(100)
//搜索表单数据
const detailY = reactive({ jwcode: '', area: '' })
const ruleFormRef = ref<FormInstance>()
let areaArray = ref<string[]>([])
let getObj = ref({
  pageNum: 1,
  pageSize: 50,
  jinbiBuy: 0,
  jinbiCostTotal: 0,
  jinbiFree: 0
})
// 精网号去空格
const trimJwCode = () => {
  if (detailY.jwcode) {
    detailY.jwcode = detailY.jwcode.replace(/\s/g, ''); 
  }
}
const search = function () {
  trimJwCode();
  getInit({})
  getCount()
}
const handleCurrentChange = function (val) {
  getObj.value.pageNum = val
  getInit({})
}
//初始化
const getInit = async function ({
  sortField = '',
  sortOrder = ''
}: {
  sortField?: string
  sortOrder?: string
}) {
  try {
    // 发送POST请求
    const result = await API({
      url: '/dou/getYve',
      data: {
        pageNum: getObj.value.pageNum,
        pageSize: getObj.value.pageSize,
        yve: {
          jwcode: detailY.jwcode,
          ipAddress: detailY.area,
          sortField: sortField,
          sortOrder: sortOrder
        }
      }
    })
    tableData.value = result.data.list
    total.value = result.data.total
  } catch (error) {
    console.log('请求失败', error)
    // 在这里可以处理错误逻辑，比如显示错误提示等
  }
}
const handleSortChange = (column) => {
  const { prop, order } = column
  if (order === 'ascending') {
    getInit({ sortField: prop, sortOrder: 'ASC' })
  } else if (order === 'descending') {
    getInit({ sortField: prop, sortOrder: 'DESC' })
  }
}

const handlePageSizeChange = (val) => {
  getObj.value.pageSize = val
  getObj.value.pageNum = 1
  getInit({})
}
// 重置
const reset = function (formEl: FormInstance | undefined) {
  if (!formEl) return
  formEl.resetFields()
}

const getArea = async () => {
  const result = await API({
    url: '/dou/getIp'
  })
  console.log('获取地区', result.data)
  if (result.code == 200) {
    areaArray.value = result.data
  }
}
const getCount = async () => {
  try {
    const result = await API({
      url: '/dou/getYveTotal',
      // 传递jwcode和ipAddress参数，可以让金币数随查询变化
      data: {
        jwcode: detailY.jwcode,
        ipAddress: detailY.area
      }
    })
    if (result.code === 200) {
      const { jinbiBuy, jinbiFree, jinbiCostTotal } = result.data
      getObj.value.jinbiBuy = jinbiBuy
      getObj.value.jinbiFree = jinbiFree
      getObj.value.jinbiCostTotal = jinbiCostTotal
    }
  } catch (error) {
    console.log('获取统计数据失败', error)
  }
}
getArea()
getCount()
getInit({})
</script>
<style scoped lang="scss">
.filter-box {
  width: 100%;
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 20px;
  padding-bottom: 0px;
  box-sizing: border-box;
  box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
  margin-bottom: 20px;
  border-radius: 5px;
  .el-form {
    display: flex;
    flex-wrap: wrap;
    row-gap: 20px;
    column-gap: 20px;
  }
}
.table-box {
  width: 100%;
  padding: 20px;
  box-sizing: border-box;
  box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
  border-radius: 5px;
}
.pagination {
  display: flex;
  align-items: center;
  margin-top: 20px;
}
</style>