邃芒慧影管理端
25개 이상의 토픽을 선택하실 수 없습니다. Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.

userList.vue 5.5 KiB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222
  1. <template>
  2. <div class="page justify-around">
  3. <div class="addbtn">
  4. <el-form :inline="true" :model="formInline" class="demo-form-inline">
  5. <el-form-item label="手机号">
  6. <el-input v-model="formInline.phone" placeholder="请输入手机号" clearable />
  7. </el-form-item>
  8. <el-form-item>
  9. <el-button type="primary" @click="dialogVisible = true"><el-icon><i-ep-plus /></el-icon> 新增</el-button>
  10. </el-form-item>
  11. </el-form>
  12. </div>
  13. <el-table
  14. :data="tableData"
  15. style="width: 100%; height: 90%"
  16. size="large"
  17. align="center"
  18. border
  19. >
  20. <el-table-column
  21. prop="name"
  22. label="用户ID"
  23. align="center"
  24. />
  25. <el-table-column
  26. prop="address"
  27. label="手机号"
  28. align="center"
  29. />
  30. <el-table-column
  31. prop="createDate"
  32. label="注册时间"
  33. align="center"
  34. >
  35. <template #default="scope">
  36. {{ getDate(scope.row.createDate) }}
  37. </template>
  38. </el-table-column>
  39. <el-table-column
  40. prop="poins"
  41. label="当前币值"
  42. align="center"
  43. />
  44. <el-table-column
  45. fixed="right"
  46. :label="$t('keyMangage.operations')"
  47. width="400"
  48. align="center"
  49. >
  50. <template #default="scope">
  51. <el-button link type="primary" size="small" @click="showDetail(scope.row.id)">查看</el-button>
  52. <el-button link type="primary" size="small" @click="rechargeDetail(scope.row)">查看充值记录</el-button>
  53. <el-button link type="primary" size="small" @click="videoDetail(scope.row)"> 查看视频列表</el-button>
  54. </template>
  55. </el-table-column>
  56. </el-table>
  57. <!-- 登录账号 -->
  58. <div class="pagination">
  59. <el-pagination
  60. v-model:current-page="pageNum"
  61. v-model:page-size="pageSize"
  62. :page-sizes="[10, 50, 100]"
  63. :small="false"
  64. :disabled="false"
  65. :background="true"
  66. layout="total, sizes, prev, pager, next, jumper"
  67. :total="total"
  68. @size-change="handleSizeChange"
  69. @current-change="handleCurrentChange"
  70. />
  71. </div>
  72. <el-dialog v-model="detailDialogVisible" v-if="detailDialogVisible" title="查看详情" width="60%" :before-close="handleClose" >
  73. <el-form :model="form" label-width="120px">
  74. <el-form-item label="用户ID">
  75. <el-input v-model="form.name" />
  76. </el-form-item>
  77. <el-form-item label="手机号">
  78. <el-input v-model="form.phone" />
  79. </el-form-item>
  80. <el-form-item>
  81. <el-button type="primary" @click="onSubmit">Create</el-button>
  82. <el-button>Cancel</el-button>
  83. </el-form-item>
  84. </el-form>
  85. </el-dialog>
  86. </div>
  87. </template>
  88. <!-- videoType==1为竖,==2为横 -->
  89. <script setup>
  90. //#region 导入
  91. import { userListApi, userListFindByIdApi } from '@/apis/userManage.js'
  92. import { useI18n } from "vue-i18n";
  93. import dayjs from "dayjs";
  94. import { useRoute, useRouter } from "vue-router";
  95. const route = useRoute();
  96. const router = useRouter();
  97. const { locale } = useI18n();
  98. const lanChange = ref(locale);
  99. const tableData = ref([]);
  100. const dialogVisible = ref(false);
  101. const rechargeDetail = (item) => {
  102. router.push({
  103. path: "/rechargeList",
  104. query: {
  105. phone: item.phone
  106. },
  107. });
  108. };
  109. const videoDetail = (item) => {
  110. router.push({
  111. path: "/videoList",
  112. query: {
  113. phone: item.phone
  114. },
  115. });
  116. };
  117. const pageNum = ref(1);
  118. const pageSize = ref(10);
  119. const total = ref(0);
  120. const getDate = (val) => {
  121. return dayjs(val).format("YYYY-MM-DD");
  122. };
  123. const handleSizeChange = (val) => {
  124. pageSize.value = val;
  125. getListData(pageNum.value, pageSize.value);
  126. };
  127. const handleCurrentChange = (val) => {
  128. pageNum.value = val;
  129. getListData(pageNum.value, pageSize.value);
  130. };
  131. const formInline = ref({
  132. phone: ''
  133. })
  134. const getListData = async (PageNum, PageSize) => {
  135. try {
  136. let data = {
  137. PageNum: PageNum,
  138. PageSize: PageSize,
  139. phone: formInline.phone
  140. }
  141. const res = await userListApi(data);
  142. console.log(res, "res");
  143. tableData.value = res.data.list;
  144. total.value = res.data.total * 1;
  145. } catch (error) {
  146. console.log(error, "err");
  147. }
  148. };
  149. const form = ref({
  150. name: '',
  151. phone: ''
  152. })
  153. const detailDialogVisible = ref(false)
  154. function showDetail(id) {
  155. userListFindByIdApi(id).then(res => {
  156. detailDialogVisible.value = true
  157. form.value = res.data
  158. })
  159. }
  160. function handleClose() {
  161. detailDialogVisible.value = false
  162. }
  163. onMounted(() => {
  164. getListData(1, 10);
  165. });
  166. </script>
  167. <style lang="scss" scoped>
  168. .page {
  169. height: calc(100vh - 80px);
  170. // height: calc(100vh - 80px);
  171. background-color: #ffffff;
  172. border-radius: 30px 0 0 0;
  173. overflow: hidden;
  174. padding: 10vh;
  175. .addbtn {
  176. margin-bottom: 2vh;
  177. }
  178. .formData {
  179. padding: 5vh 3vh;
  180. }
  181. .pagination {
  182. position: fixed;
  183. left: 55%;
  184. bottom: 8vh;
  185. transform: translateX(-50%);
  186. border-radius: 5px;
  187. padding: 10px 20px;
  188. z-index: 99;
  189. transition: all 0.3s;
  190. cursor: pointer;
  191. &:hover {
  192. background-color: #b8b8b873;
  193. }
  194. }
  195. }
  196. </style>