Newer
Older
KaiFengPC / src / views / publicService / fans / certification.vue
@zhangdeliang zhangdeliang on 3 Sep 4 KB update
  1. <template>
  2. <!-- 排水防涝子系统 公众服务 粉丝认证-->
  3. <div class="publicContainer">
  4. <!-- 搜索区域 -->
  5. <el-form :model="queryParams" ref="queryRef" :inline="true" v-show="showSearch">
  6. <el-form-item label="粉丝昵称" prop="nickName">
  7. <el-input v-model="queryParams.nickName" placeholder="请输入" clearable @keyup.enter="handleQuery" />
  8. </el-form-item>
  9. <el-form-item>
  10. <el-button type="primary" icon="Search" @click="handleQuery">搜索</el-button>
  11. <el-button icon="Refresh" @click="resetQuery">重置</el-button>
  12. </el-form-item>
  13. </el-form>
  14. <!-- 按钮区域 -->
  15. <el-row :gutter="10" class="mb8">
  16. <right-toolbar v-model:showSearch="showSearch" @queryTable="getDataList"></right-toolbar>
  17. </el-row>
  18. <!-- 表格 -->
  19. <el-table v-loading="tableLoading" :data="tableData" max-height="650">
  20. <el-table-column label="用户头像" prop="coverPhotosFileList">
  21. <template #default="scope">
  22. <el-image
  23. :src="scope.row.coverPhotosFileList.length > 0 ? scope.row.coverPhotosFileList[0].url : defaultImg"
  24. style="width: 100px; height: 100px"
  25. ></el-image>
  26. </template>
  27. </el-table-column>
  28. <el-table-column label="用户昵称" prop="nickName" />
  29. <el-table-column label="openID" prop="openId" />
  30. <el-table-column label="认证状态" prop="authStatus">
  31. <template #default="scope">
  32. {{ scope.row.authStatus == 0 ? '未认证' : scope.row.authStatus == 1 ? '已认证' : scope.row.authStatus == 2 ? '认证中' : '--' }}
  33. </template>
  34. </el-table-column>
  35. <el-table-column label="提交时间" prop="createTime" />
  36. <el-table-column label="操作" width="160" class-name="small-padding fixed-width">
  37. <template #default="scope">
  38. <el-button
  39. link
  40. type="primary"
  41. icon="Edit"
  42. @click="handleAudit(scope.row)"
  43. v-hasPermi="['floodSys:jing:edit']"
  44. v-if="scope.row.authStatus == 0"
  45. >
  46. 认证
  47. </el-button>
  48. <el-button
  49. link
  50. type="warning"
  51. icon="Edit"
  52. @click="cancelAudit(scope.row)"
  53. v-hasPermi="['floodSys:jing:edit']"
  54. v-if="scope.row.authStatus == 1"
  55. >
  56. 取消认证
  57. </el-button>
  58. <el-button
  59. link
  60. type="danger"
  61. icon="Delete"
  62. @click="handleDelete(scope.row)"
  63. v-hasPermi="['floodSys:jing:remove']"
  64. v-if="scope.row.authStatus != 2"
  65. >
  66. 删除
  67. </el-button>
  68. </template>
  69. </el-table-column>
  70. </el-table>
  71. <!-- 分页 -->
  72. <pagination
  73. v-show="total > 0"
  74. :total="total"
  75. v-model:page="queryParams.pageNum"
  76. v-model:limit="queryParams.pageSize"
  77. @pagination="getDataList"
  78. />
  79. </div>
  80. </template>
  81.  
  82. <script setup name="粉丝认证">
  83. import { fansList, fansDel, fansCert, fansCertCancel } from '@/api/publicService/index';
  84. import defaultImg from '@/assets/images/login/user.png';
  85.  
  86. const { proxy } = getCurrentInstance();
  87.  
  88. const tableData = ref([]);
  89. const tableLoading = ref(true);
  90. const total = ref(0);
  91. const showSearch = ref(true);
  92.  
  93. const allData = reactive({
  94. queryParams: {
  95. pageNum: 1,
  96. pageSize: 10,
  97. nickName: undefined,
  98. },
  99. });
  100. const { queryParams } = toRefs(allData);
  101.  
  102. /** 获取搜索数据列表 */
  103. function getDataList() {
  104. tableLoading.value = true;
  105. fansList(queryParams.value).then(response => {
  106. tableData.value = response.data;
  107. total.value = response.total;
  108. tableLoading.value = false;
  109. });
  110. }
  111. /** 认证按钮 */
  112. function handleAudit(row) {
  113. proxy.$modal
  114. .confirm('确定认证此人信息?')
  115. .then(() => {
  116. fansCert(row.id).then(res => {
  117. getDataList();
  118. proxy.$modal.msgSuccess('认证成功');
  119. });
  120. })
  121. .catch(() => {});
  122. }
  123. /** 取消认证按钮 */
  124. function cancelAudit(row) {
  125. proxy.$modal
  126. .confirm('确定取消认证此人信息?')
  127. .then(() => {
  128. fansCertCancel(row.id).then(res => {
  129. getDataList();
  130. proxy.$modal.msgSuccess('取消认证成功');
  131. });
  132. })
  133. .catch(() => {});
  134. }
  135. /** 搜索按钮操作 */
  136. function handleQuery() {
  137. queryParams.value.pageNum = 1;
  138. getDataList();
  139. }
  140. /** 重置按钮操作 */
  141. function resetQuery() {
  142. proxy.resetForm('queryRef');
  143. handleQuery();
  144. }
  145. /** 删除按钮操作 */
  146. function handleDelete(row) {
  147. const postIds = row.id;
  148. proxy.$modal
  149. .confirm('是否确认删除该数据项?')
  150. .then(function () {
  151. return fansDel(postIds);
  152. })
  153. .then(() => {
  154. getDataList();
  155. proxy.$modal.msgSuccess('删除成功');
  156. })
  157. .catch(() => {});
  158. }
  159.  
  160. onMounted(() => {
  161. getDataList();
  162. });
  163. </script>