jdt-mer/src/views/game/jl/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="data.integral" :precision="2" />
            </n-statistic>
          </n-card>
          <n-card ml-10 w-500>
            <n-statistic label="豆子" tabular-nums>
              <n-number-animation :from="0" :to="data.pulse" />
            </n-statistic>
          </n-card>
        </div>
      </n-col>
      <n-col :span="24">
        <div mt-10 w-300 flex items-center>
          <span w-100>用户电话：</span>
          <n-input v-model:value="queryData.user_phone" clearable placeholder="请输入用户电话" />
        </div>
      </n-col>
      <n-col :span="24">
        <div mt-10 flex items-center>
          <span>豆子状态：</span>
          <n-radio-group v-model:value="queryData.status">
            <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 w-100>游戏选择：</span>
          <n-select
            v-model:value="queryData.hall_id"
            w-200
            :options="options"
            label-field="name"
            value-field="ID"
            placeholder="请选择游戏"
          />
        </div>
      </n-col>
      <n-col :span="24">
        <div mt-10 flex items-center>
          <span w-100>筛选时间：</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 flex items-center>
          <span w-100>投注时间：</span>
          <n-date-picker
            v-model:formatted-value="queryData.time1"
            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="get_list">搜索</n-button>
          <n-button ml-10 @click="clear">重置</n-button>
        </div>
      </n-col>
    </n-row>
    <n-data-table
      :loading="loading"
      :columns="columns"
      :data="data.data || []"
      :pagination="pagination"
      :bordered="false"
      remote
      mt-10
    />
  </CommonPage>
</template>

<script setup>
import api from './api'
import { h } from 'vue'

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

const queryData = ref({
  user_phone: '',
  hall_id: null,
  status: null,
  time: null,
  time1: null,
})

const options = ref([])

const loading = ref(false)
const columns = ref([
  {
    title: '游戏名称',
    align: 'center',
    render: (row) => {
      const text = options.value.find((item) => item.ID === Number(row.hall_id))
      return h(
        'div',
        {},
        {
          default: () => text?.name,
        }
      )
    },
  },
  {
    title: '订单ID',
    align: 'center',
    key: 'order_id',
  },
  {
    title: '期数',
    align: 'center',
    key: 'other_id',
  },
  {
    title: '投注豆子',
    align: 'center',
    key: 'number',
  },
  {
    title: '赢积分',
    align: 'center',
    key: 'integral',
  },
  {
    title: '用户电话',
    align: 'center',
    key: 'user_phone',
  },
  {
    title: '投注时间',
    align: 'center',
    key: 'use_time',
  },
  {
    title: '过期时间',
    align: 'center',
    key: 'expires_time',
  },
])
const data = ref({})
const pagination = ref({
  page: 1,
  pageSize: 10,
  itemCount: 0,
  onChange: (page) => {
    pagination.value.page = page
    get_list()
  },
  onUpdatePageSize: (pageSize) => {
    pagination.value.pageSize = pageSize
    pagination.value.page = 1
    get_list()
  },
})

onMounted(() => {
  get_game_list()
  get_list()
})

const get_game_list = async () => {
  const res = await api.getGmaeList()
  options.value = res.data.data || []
}

const get_list = async () => {
  loading.value = true
  const obj = {
    ...queryData.value,
    pageNum: pagination.value.page,
    pageSize: pagination.value.pageSize,
    StartTime: queryData.value.time ? queryData.value.time[0] : '',
    EndTime: queryData.value.time ? queryData.value.time[1] : '',
    UseStartTime: queryData.value.time1 ? queryData.value.time1[0] : '',
    UseEndTime: queryData.value.time1 ? queryData.value.time1[1] : '',
  }
  Reflect.deleteProperty(obj, 'time')
  const res = await api.getData(obj)
  data.value = res.data
  pagination.value.itemCount = res.data.total || 0
  loading.value = false
}

const clear = () => {
  queryData.value = {
    user_phone: '',
    hall_id: null,
    status: null,
    time: null,
  }
  pagination.value.page = 1
  get_list()
}
</script>

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