menduner/src/views/recruit/enterprise/memberCenter/tradingOrder/index.vue

<!--  -->
<template>
  <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">{{ '交易订单' }}</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>
</template>

<script setup>
defineOptions({name: 'enterprise-memberCenter-tradingOrder'})
import { getEnterpriseTradeOrderPage } from '@/api/recruit/enterprise/member/points'
import { ref } from 'vue'
import { timesTampChange } from '@/utils/date'
import { getDict } from '@/hooks/web/useDictionaries'

const tab = ref(0)
const total = ref(0)
const query = ref({
  pageNo: 1,
  pageSize: 10
})
const dataList = ref([])

// 支付渠道
const channelData = ref([])
const getPayChannelCode = async () => {
  const { data } = await getDict('pay_channel_code')
  channelData.value = data
}
getPayChannelCode()


const orderHeaders = ref([
  { title: '商品名称', key: 'spuName', sortable: false },
  { title: '价格', key: 'price', sortable: false },
  { title: '是否已支付', key: 'payStatus', sortable: false, value: item => item.payStatus ? '已支付' : '未支付' },
  { title: '支付订单编号', key: 'payOrderId', sortable: false },
  { title: '支付渠道', key: 'payChannelCode', value: item => channelData.value.find(e => e.value === item.payChannelCode)?.label, sortable: false },
  { title: '订单支付时间', key: 'payTime', value: item =>  timesTampChange(item.payTime), sortable: false },
  { title: '退款订单编号', key: 'payReFundId', sortable: false },
  { title: '退款金额', key: 'refundPrice', sortable: false },
  { title: '退款时间', key: 'refundTime', value: item =>  timesTampChange(item.refundTime), sortable: false },
  { title: '更新时间', key: 'updateTime', value: item =>  timesTampChange(item.updateTime), sortable: false },
])

const getData = async () => {
  const res = await getEnterpriseTradeOrderPage(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()
}

const headers = ref([orderHeaders.value])
</script>
<style lang="scss" scoped>
</style>