jdt-admin/src/views/finance/suyuan.vue

<template>
  <CommonPage show-footer :title="$route.title">
    <n-grid class="mb-10" x-gap="12">
      <n-gi :span="24">
        <div flex>
          <n-card w-250>
            <n-statistic label="总赢积分" tabular-nums>
              <n-number-animation ref="numberAnimationInstRef" :from="0" :to="cardData.win" />
            </n-statistic>
          </n-card>
          <n-card ml-10 w-250>
            <n-statistic label="总豆子" tabular-nums>
              <n-number-animation ref="numberAnimationInstRef" :from="0" :to="cardData.pulse" />
            </n-statistic>
          </n-card>
        </div>
      </n-gi>
      <n-gi :span="12">
        <div mt-10 flex items-center>
          <div w-100>筛选条件:</div>
          <n-input-group>
            <n-select
              v-model:value="queryParams.selectKey"
              :style="{ width: '30rem' }"
              :options="selectOptions"
              placeholder="请选择"
            />
            <n-input v-model:value="queryParams.word" :style="{ width: '50rem' }" />
          </n-input-group>
        </div>
      </n-gi>
      <n-gi :span="24">
        <div mt-10 flex items-center>
          <div mr-10>游戏名称:</div>
          <n-select
            v-model:value="queryParams.hall_id"
            w-250
            :options="gamelist"
            placeholder="请选择游戏"
          />
        </div>
      </n-gi>
      <n-gi :span="24" mt-10>
        <div>
          <span>豆子状态：</span>
          <n-radio-group v-model:value="queryParams.Status">
            <n-radio-button
              v-for="song in songs"
              :key="song.value"
              :value="song.value"
              :label="song.label"
            />
          </n-radio-group>
        </div>
      </n-gi>
      <n-gi :span="24" mt-10>
        <div>
          <span>活动赠送：</span>
          <n-radio-group v-model:value="queryParams.Type">
            <n-radio-button
              v-for="song in songs1"
              :key="song.value"
              :value="song.value"
              :label="song.label"
            />
          </n-radio-group>
        </div>
      </n-gi>
      <n-gi :span="24">
        <div mt-10 flex items-center>
          <div>时间筛选：</div>
          <n-date-picker
            v-model:formatted-value="queryParams.time"
            value-format="yyyy-MM-dd HH:mm:ss"
            type="datetimerange"
            clearable
          />
        </div>
      </n-gi>
      <n-gi span="24" mt-10 flex items-center>
        <n-button type="primary" @click="getList">查询</n-button>
        <n-button ml-10 @click="clear">重置</n-button>
      </n-gi>
    </n-grid>
    <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'
import dayjs from 'dayjs'

const queryParams = ref({})

const cardData = ref({})

const selectOptions = [
  {
    label: '商家电话',
    value: 0,
  },
  {
    label: '用户电话',
    value: 1,
  },
]

const songs = ref([
  {
    value: 1,
    label: '未使用',
  },
  {
    value: 3,
    label: '用户赢',
  },
  {
    value: 4,
    label: '用户输',
  },
  {
    value: 5,
    label: '已过期',
  },
])

const gamelist = ref([])

const songs1 = ref([
  {
    value: 5,
    label: '注册赠送',
  },
  {
    value: 6,
    label: '签到赠送',
  },
  {
    value: 7,
    label: '平台赠送',
  },
])

const loading = ref(false)

const columns = ref([
  {
    title: '游戏名称',
    align: 'center',
    slot: 'game_name',
    render: (row) => {
      const res = gamelist.value.find((item) => item.value === Number(row.hall_id))
      return h('span', null, {
        default: () => res?.label || '',
      })
    },
  },
  {
    title: '订单ID',
    align: 'center',
    key: 'order_id',
  },
  {
    title: '期数',
    align: 'center',
    key: 'periods',
  },
  {
    title: '投注豆子',
    align: 'center',
    key: 'number',
  },
  {
    title: '赢积分',
    align: 'center',
    key: 'integral',
  },
  {
    title: '用户电话',
    align: 'center',
    key: 'user_phone',
  },
  {
    title: '商户电话',
    align: 'center',
    key: 'merchant_phone',
  },
  {
    title: '投注时间',
    align: 'center',
    key: 'add_time',
  },
  {
    title: '过期时间',
    align: 'center',
    slot: 'expire',
    render: (row) => {
      return h('span', null, {
        default: () => dayjs(row.expire).format('YYYY-MM-DD HH:mm:ss'),
      })
    },
  },
])

const data = ref([])

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

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

const getGameList = async () => {
  const res = await api.getGameData({ pageSize: 9999999, pageNum: 1 })
  gamelist.value = res.data.data.map((item) => ({ value: item.ID, label: item.name }))
}

const getList = async () => {
  loading.value = true
  const query_data = {
    ...queryParams.value,
    StartTime: queryParams.value.time?.[0] || '',
    EndTime: queryParams.value.time?.[1] || '',
  }

  switch (queryParams.value.selectKey) {
    case 0:
      query_data['merchant_phone'] = queryParams.value.word
      break
    case 1:
      query_data['user_phone'] = queryParams.value.word
      break
  }

  delete query_data.time
  delete query_data.word
  const res = await api.suyuanData({
    pageNum: pagination.value.page,
    pageSize: pagination.value.pageSize,
    ...query_data,
  })
  data.value = res.data.result || []
  pagination.value.itemCount = res.data.count
  cardData.value.win = res.data.win
  cardData.value.pulse = res.data.pulse
  loading.value = false
}

const clear = () => {
  queryParams.value = {
    word: '',
    selectKey: null,
    Status: '',
    time: null,
    Type: '',
    hall_id: '',
  }
  getList()
}
</script>

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