jdt-mer/src/views/settlement/jf_list/index.vue

<template>
  <CommonPage show-footer :title="$route.title">
    <n-row gutter="12">
      <n-col :span="24">
        <div flex>
          <n-card w-500>
            <n-statistic label="订单流水（积分）" tabular-nums>
              <n-number-animation :from="0" :to="cardData.total" />
            </n-statistic>
          </n-card>
          <n-card ml-10 w-500>
            <n-statistic label="订单服务费（积分）" tabular-nums>
              <n-number-animation :from="0" :to="cardData.service" />
            </n-statistic>
          </n-card>
          <n-card ml-10 w-500>
            <n-statistic label="订单数量" tabular-nums>
              <n-number-animation :from="0" :to="cardData.count" />
            </n-statistic>
          </n-card>
        </div>
      </n-col>
      <n-col :span="8">
        <div mt-10 flex items-center>
          <span>积分渠道：</span>
          <n-radio-group v-model:value="queryData.type">
            <n-radio-button
              v-for="song in songs"
              :key="song.value"
              :value="song.value"
              :label="song.label"
            />
          </n-radio-group>
        </div>
      </n-col>
      <n-col :span="24">
        <div mt-10 flex items-center>
          <span>条件筛选：</span>
          <n-date-picker
            v-model:formatted-value="queryData.time"
            value-format="yyyy-MM-dd HH:mm:ss"
            type="datetimerange"
            clearable
          />
        </div>
      </n-col>
      <n-col :span="24">
        <div mt-10>
          <n-button type="primary" @click="getList">搜索</n-button>
          <n-button ml-10 @click="clear">重置</n-button>
        </div>
      </n-col>
    </n-row>
    <n-data-table
      class="mt-10"
      :loading="loading"
      :columns="columns"
      :data="data"
      :pagination="pagination"
      :bordered="false"
      remote
    />
  </CommonPage>
</template>

<script setup>
import api from './api'

const loading = ref(false)

const songs = ref([
  {
    label: '订单',
    value: 1,
  },
  {
    label: '提现',
    value: 2,
  },
  {
    label: '增加（含驳回）',
    value: 3,
  },
])

const queryData = ref({
  type: 1,
  time: null,
})

const cardData = ref({
  total: 0,
  service: 0,
  count: 0,
})

// watch(
//   () => queryData.value.type,
//   () => {
//     getList()
//   }
// )

const columns = ref([])
const data = ref([])

const pagination = ref({
  page: 1,
  pageSize: 10,
  itemCount: 0,
  onChange: (page) => {
    pagination.value.page = page
    getList()
  },
  onUpdatePageSize: (pageSize) => {
    pagination.value.pageSize = pageSize
    pagination.value.page = 1
    getList()
  },
})

onMounted(() => {
  getList()
})

const getList = async () => {
  loading.value = true
  try {
    switch (queryData.value.type) {
      case 1:
        columns.value = [
          {
            title: 'ID',
            key: 'ID',
            align: 'center',
          },
          {
            title: '订单号',
            key: 'oid',
            align: 'center',
          },
          {
            title: '用户名称',
            key: 'user_name',
            align: 'center',
          },
          {
            title: '上次留存积分',
            key: 'balance',
            align: 'center',
          },
          {
            title: '服务费',
            key: 'commission',
            align: 'center',
          },
          {
            title: '获取积分',
            key: 'number',
            align: 'center',
          },
          {
            title: '时间',
            key: 'record_time',
            align: 'center',
          },
        ]
        break
      case 2:
        columns.value = [
          {
            title: '单号',
            key: 'oid',
            align: 'center',
          },
          {
            title: '上次留存积分',
            key: 'balance',
            align: 'center',
          },
          {
            title: '扣除积分',
            key: 'record_number',
            align: 'center',
          },
          {
            title: '时间',
            key: 'record_time',
            align: 'center',
          },
        ]
        break
      case 3:
        columns.value = [
          {
            title: '单号',
            key: 'oid',
            align: 'center',
          },
          {
            title: '上次留存积分',
            key: 'balance',
            align: 'center',
          },
          {
            title: '获取积分',
            key: 'record_number',
            align: 'center',
          },
          {
            title: '时间',
            key: 'record_time',
            align: 'center',
          },
        ]
        break
    }

    const res = await api.getList({
      pageNum: pagination.value.page,
      pageSize: pagination.value.pageSize,
      Type: queryData.value.type,
      StartTime: queryData.value.time === null ? '' : queryData.value.time[0] || '',
      EndTime: queryData.value.time === null ? '' : queryData.value.time[1] || '',
    })
    data.value = res.data.data || []
    pagination.value.itemCount = res.data.total
    cardData.value.total = res.data.number
    cardData.value.service = res.data.commission
    cardData.value.count = res.data.total
  } catch (error) {
    $message.error(error.msg)
  }
  loading.value = false
}

const clear = () => {
  queryData.value = {
    type: 1,
    time: null,
  }
  getList()
}
</script>

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