website/src/views/ecoin.vue

<template>
  <div class="rest-list">
    <div class="list-wrapper">
      <el-table :data="gameHot" style="width: 100%">
        <el-table-column prop="game_name" label="游戏名称"  />
        <el-table-column prop="total_ecoin" label="余额">
          <template #default="scope">
            <div>
              {{ (scope.row.total_ecoin/100).toFixed(2)}}
            </div>
          </template>
        </el-table-column>
        <el-table-column prop="created_at" label="创建时间" width="180" />
        <el-table-column prop="modified_at" label="修改时间" width="180" />
      </el-table>
      <div class="pagination-block">
        <el-pagination
          v-model:current-page="pageConfig.page"
          hide-on-single-page
          v-model:page-size="pageConfig.pagesize"
          layout="prev, pager, next, jumper,total"
          :total="pageConfig.total"
          @current-change="handleCurrentChange"
        />
      </div>
    </div>
  </div>
  <div class="mob-list">
    <vant-list ref="vanList" :param="{}" :pagination="pageConfig" :request="userEcoin" @resetPage="resetPage" @pagePlus="addPage">
      <template #listItem="listItem">
        <div class="item">
          <van-cell-group inset >
            <van-cell title="游戏名称" :value="listItem.row.game_name" />
            <van-cell title="余额" :value="(listItem.row.total_ecoin/100).toFixed(2)" />
            <van-cell title="创建时间" :value="listItem.row.created_at" />
            <van-cell title="修改时间" :value="listItem.row.modified_at" />
          </van-cell-group>
        </div>
      </template>
    </vant-list>
  </div>
</template>

<script setup lang="ts">
import { ref, reactive, onMounted } from 'vue'
// import { useRouter, useRoute } from 'vue-router'
// import { useStore } from '@/store'
import Message from '@/utils/Message'
import { userEcoin } from '@/api/index'
import vantList from '@/components/vantList.vue'

// const img:any = inject('img')
// const router = useRouter()
// const route = useRoute()
// const { user } = useStore()
// showSuccessToast('成功文案')
// showFailToast('失败文案')
const gameHot: any = ref([])
const isLoading = ref<boolean>(true)
const vanList = ref<any>()
const pageConfig = reactive({
  page: 1,
  pagesize: 10,
  total: 0
})
const handleCurrentChange = (val: number) => {
  console.log(`current page: ${val}`)
  pageConfig.page = val
  getTableData()
}
const getTableData = async() => {
  const params = {
    page: pageConfig.page,
    pagesize: pageConfig.pagesize
  }
  await userEcoin(params).then(res => {
    console.log('热门游戏', res.data)
    if (res.data.code === 200 && res.data.data) {
      gameHot.value = res.data.data.lists || []
      isLoading.value = false
      pageConfig.total = res.data.data.total || 0
    }
  }).catch(err => {
    console.log(err)

    Message.error(err.data.msg)
  })
}
const resetPage = () => {
  pageConfig.page = 1
}
const addPage = () => {
  pageConfig.page += 1
}
onMounted(async() => {
  getTableData()
  if (vanList.value) {
    vanList.value.onLoad(1)
  }
})

</script>

<style lang="scss" scoped>
.rest-list{
  width: 100%;
  padding: 3rem;
  box-sizing: border-box;
  background-color: #fff;
  min-height: 40rem;
  .pagination-block{
    padding-top: 1rem;
    display: flex;
    flex-direction: row-reverse;
  }
}
.mob-list{
  display: none;
  width: 100%;
  padding: 10px 0px;
  box-sizing: border-box;
  .item{
    margin-bottom: 10px;
  }
}
</style>