menduner/src/views/integral/pointsManagement/index.vue

<template>
  <div :class="{'default-width': !type}">
    <div class="pa-3 mb-2 white-bgc">
      <integralShow :showMall="true" :taskCenter="!type" :isEnterprise="type === 0 ? false : true"></integralShow>
    </div>
    <div class="mt-3 white-bgc pa-3 pt-3">
      <v-tabs v-model="tab" align-tabs="start" color="primary" bg-color="#f7f8fa" @update:model-value="handleChangeTab">
        <v-tab :value="0">{{ $t('points.pointsDetails') }}</v-tab>
        <!-- <v-tab :value="1">{{ $t('points.balanceDetails') }}</v-tab> -->
      </v-tabs>
      <CtTable
        class="mt-3"
        :items="dataList"
        :headers="headers[tab]"
        :loading="false"
        :elevation="0"
        :isTools="false"
        :showPage="true"
        :total="total"
        :page-info="query"
        itemKey="id"
        @pageHandleChange="handleChangePage"
      >
      </CtTable>
    </div>
  </div>
</template>

<script setup>
defineOptions({name: 'personal-pointsManagement-index'})
import { ref } from 'vue'
import { timesTampChange } from '@/utils/date'
import { getUserRewardPointPage } from '@/api/integral'
import { getEnterpriseAccountRecordPage } from '@/api/recruit/enterprise/member/points'
import integralShow from '@/views/integral/pointsManagement/components/integralShow.vue'

const props = defineProps({
  type: {
    type: Number,
    default: 0 // 0个人 1企业
  }
})

const tab = ref(0)
const total = ref(0)
const query = ref({
  pageNo: 1,
  pageSize: 10,
  type: 0 // 0积分 1余额
})
const dataList = ref([])

const integralHeaders = [
  { title: '标题', key: 'title', sortable: false },
  { title: '描述', key: 'description', sortable: false },
  { title: '获得积分点', key: 'point', sortable: false },
  { title: '剩余点数', key: 'totalPoint', sortable: false },
  { title: '发生时间', key: 'createTime', value: item =>  timesTampChange(item.createTime), sortable: false },
]
const balanceHeaders = [
  { title: '标题', key: 'title', sortable: false },
  { title: '描述', key: 'description', sortable: false },
  { title: '金额', key: 'balance', sortable: false},
  { title: '账户余额', key: 'totalBalance', sortable: false },
  { title: '发生时间', key: 'createTime', value: item =>  timesTampChange(item.createTime), sortable: false },
]

// const orderHeaders = [
//   { title: '充值时间', key: 'createTime', value: item =>  timesTampChange(item.createTime), sortable: false },
//   { title: '充值金额', key: 'price', sortable: false },
//   { title: '支付方式', key: 'type', sortable: false },
//   { title: '充值状态', key: 'status', sortable: false }
// ]

const headers = ref([integralHeaders, balanceHeaders])

// 积分、签到明细
const getData = async () => {
  const res = props.type ? await getEnterpriseAccountRecordPage(query.value) : await getUserRewardPointPage(query.value)
  dataList.value = res.list
  total.value = res.total
}
getData()

const handleChangePage = (e) => {
  query.value.pageNo = e
  getData()
}

// 切换
const handleChangeTab = () => {
  query.value.pageNo = 1
  query.value.type = tab.value
  getData()
}
</script>

<style lang="scss" scoped>
</style>