邃芒慧影、口播(PC) https://neuver.metavatar.cc/
You can not select more than 25 topics Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
 
 
 
 

148 line
3.3 KiB

  1. <template>
  2. <div class="page justify-around">
  3. <el-alert :title="`当前币值:${currentValue}`" type="success" :closable="false" />
  4. <el-table :data="tableData" style="width: 100%; height: 90%" size="large" align="center" border>
  5. <el-table-column
  6. prop="title"
  7. label="名称"
  8. align="center"
  9. />
  10. <el-table-column
  11. prop="address"
  12. label="图片"
  13. align="center"
  14. />
  15. <el-table-column
  16. prop="createTime"
  17. label="创建时间"
  18. align="center"
  19. >
  20. <template #default="scope">
  21. {{ getDate(scope.row.createTime) }}
  22. </template>
  23. </el-table-column>
  24. <el-table-column
  25. fixed="right"
  26. label="操作"
  27. width="400"
  28. align="center"
  29. >
  30. <template #default="scope">
  31. <el-button link type="primary" size="small">查看</el-button>
  32. </template>
  33. </el-table-column>
  34. </el-table>
  35. <div class="pagination">
  36. <el-pagination
  37. v-model:current-page="pageNum"
  38. v-model:page-size="pageSize"
  39. :page-sizes="[10, 50, 100]"
  40. :small="false"
  41. :disabled="false"
  42. :background="true"
  43. layout="total, sizes, prev, pager, next, jumper"
  44. :total="total"
  45. @size-change="handleSizeChange"
  46. @current-change="handleCurrentChange"
  47. />
  48. </div>
  49. <el-dialog v-model="dialogVisible" title="查看详情" width="40%" :before-close="handleClose" >
  50. <detail @close="handleClose"></detail>
  51. </el-dialog>
  52. </div>
  53. </template>
  54. <!-- videoType==1为竖,==2为横 -->
  55. <script setup>
  56. //#region 导入
  57. import { coindedApi, getDetailApi, getUserPoinsApi } from '@/apis/my.js'
  58. import dayjs from "dayjs";
  59. import detail from './detail.vue'
  60. const tableData = ref([]);
  61. const pageNum = ref(1);
  62. const pageSize = ref(10);
  63. const total = ref(0);
  64. const getDate = (val) => {
  65. return dayjs(val).format("YYYY-MM-DD");
  66. };
  67. const handleSizeChange = (val) => {
  68. pageSize.value = val;
  69. getListData(pageNum.value, pageSize.value);
  70. };
  71. const handleCurrentChange = (val) => {
  72. pageNum.value = val;
  73. getListData(pageNum.value, pageSize.value);
  74. };
  75. const getListData = async (PageNum, PageSize) => {
  76. try {
  77. let data = {
  78. projectType: 2,
  79. pageNum: 1,
  80. pageSize: 10
  81. }
  82. const res = await coindedApi(data);
  83. tableData.value = res.data.list;
  84. total.value = res.data.total * 1;
  85. } catch (error) {
  86. console.log(error, "err");
  87. }
  88. };
  89. // 当前币值
  90. const currentValue = ref('')
  91. function currentValFn() {
  92. getUserPoinsApi().then(res => {
  93. currentValue.value = res.data
  94. })
  95. }
  96. // 查看详情
  97. const dialogVisible = ref(false)
  98. onMounted(() => {
  99. getListData(1, 10);
  100. currentValFn()
  101. });
  102. </script>
  103. <style lang="scss" scoped>
  104. .page {
  105. height: calc(100vh - 80px);
  106. // height: calc(100vh - 80px);
  107. background-color: #ffffff;
  108. border-radius: 30px 0 0 0;
  109. overflow: hidden;
  110. padding: 10vh;
  111. .addbtn {
  112. margin-bottom: 2vh;
  113. }
  114. .formData {
  115. padding: 5vh 3vh;
  116. }
  117. .pagination {
  118. position: fixed;
  119. left: 55%;
  120. bottom: 8vh;
  121. transform: translateX(-50%);
  122. border-radius: 5px;
  123. padding: 10px 20px;
  124. z-index: 99;
  125. transition: all 0.3s;
  126. cursor: pointer;
  127. &:hover {
  128. background-color: #b8b8b873;
  129. }
  130. }
  131. }
  132. </style>