cyber/src/pages/accountPages/Account_admin_userManage.vue

<script setup>

import PagingController from "../../components/PagingController.vue";
import {onMounted, ref} from "vue";
import api from "../../utils/axios.js";
import store from "../../store/index.js";
import swal from "../../utils/sweetalert.js";
import {getDomain} from "../../utils/getDomain.js";
import Swal from "sweetalert2";

const currentPage = ref(1);
const amount = ref(1);
const userList = ref([]);
const pageLoading = ref(false);

const refreshList = async (page, pageSize) => {
  pageSize = pageSize || 10;
  pageLoading.value = true;
  try {
    const response = await api.get(`/getuserlist?PAGE=${page}&PAGESIZE=${pageSize}`);
    if (! response.data) {
      return 1;
    }
    amount.value = Math.ceil(response.amount / pageSize);
    userList.value = response.data.map((user) => {return {...user, ...{showEmail: false}}});
    pageLoading.value = false;
    return 0;
  } catch {
    pageLoading.value = false;
    swal.tip('error', '加载失败...')
  }
};
const goPage = async (page) => {
  const messageTemp = userList.value
  currentPage.value = page;
  if (await refreshList(page) !== 0) {
    userList.value = messageTemp;
  }
};

const role2Text = (id) => {
  switch (id) {
    case 0:
      return '普通';
    case 1:
      return '已认证';
    case 2:
      return '管理员';
    case 3:
      return '超管';
  }
};
const approve = (uid) => {
  swal.window('info', '确定认证此账户?', store.getters.isSuperAdmin ? '' : '此操作不可由本账号撤销', '确实', '取消').then(async (result) => {
    if (result.isConfirmed) {
      let response;
      try {
        response = await api.put(`/users/${uid}/role`, {
          role: 1
        })
        if (response.code === 0) {
          swal.tip('success', '认证成功');
          refreshList(currentPage.value);
          return;
        }
        swal.tip('error', '认证失败');
      } catch (e) {
        swal.tip('error', '网络连接错误');
      }
    }
  });
};
const changeRole = (uid) => {
  Swal.fire({
    title: '修改账号权限为',
    html: `
    <div>
      <input type="radio" id="option1" name="option" value="0">
      <label for="option1"></label>普通<br>
      <input type="radio" id="option2" name="option" value="1">
      <label for="option1"></label>认证<br>
      <input type="radio" id="option3" name="option" value="2">
      <label for="option2"></label>管理<br>
    </div>
  `,
    showCancelButton: true,
    confirmButtonText: '提交',
    cancelButtonText: '取消',
    preConfirm: () => {
      // 获取选中的单选框值
      const selectedOption = document.querySelector('input[name="option"]:checked');
      if (!selectedOption) {
        Swal.showValidationMessage('选一个');
        return false;
      }
      return selectedOption.value; // 返回选中的值
    }
  }).then(async (result) => {
    if (result.isConfirmed) {
      let response;
      try {
        response = await api.put(`/users/${uid}/role`, {
          role: Number(result.value)
        })
        if (response.code === 0) {
          swal.tip('success', '更改成功');
          refreshList(currentPage.value);
          return;
        }
        swal.tip('error', '更改失败');
      } catch (e) {
        swal.tip('error', '网络连接错误');
      }
    }
  });
}

onMounted(() => {
  refreshList(1, 10);
});
</script>

<template>
  <div class="container">
    <div v-if="userList.length === 0">正在加载</div>
    <div class="user-bar" v-for="user in userList" :class="{loading: pageLoading}">
      <div class="role-display">{{ role2Text(user.role_id) }}</div>
      <div class="left">
        <img :src=" `https://${getDomain()}/data/user/profile/` + user.profile" alt="空">
        <div class="content">
          <span class="username">{{ user.username }}</span>
          <span class="birth">{{ user.birth }}</span>
          <span class="email" @click="user.showEmail = false" v-if="user.showEmail">{{ user.email }}</span>
          <span class="email" v-else @click="user.showEmail = true">查看邮箱</span>
        </div>
      </div>

      <div class="operating">
        <div class="change-role" @click="changeRole(user.uid)" v-if="user.role_id !== 3 && store.getters.isSuperAdmin">修改权限</div>
        <div class="approve" @click="approve(user.uid)" v-if="user.role_id === 0">认证</div>
      </div>
    </div>
    <paging-controller v-if="userList.length !== 0" :current-page="currentPage" :amount="amount" :go-page-func="goPage"/>
  </div>

</template>

<style scoped>
.container {
  width: calc(100% - 40px);
  height: calc(100% - 40px);
  margin: 0;
  display: flex;
  flex-direction: column;
  align-content: center;
  padding: 20px;
  gap: 20px;
}
.container.loading {
  opacity: 0.5;
}
.user-bar {
  position: relative;
  border-radius: 15px;
  background: #262626;
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  padding: 20px;
  width: calc(100% - 40px);
}
.theme-light .user-bar {
  background: #f6f6f6;
}
.left {
  display: flex;
  align-items: center;
  gap: 15px;
}
.left img {
  width: 65px;
  height: 65px;
  border-radius: 50%;

}
.left .content {
  display: flex;
  flex-direction: column;
}
.content .username {
  font-size: 20px;
  font-weight: bold;
  margin-bottom: 5px;
}
.content .birth, .email {
  font-size: 14px;
  opacity: 0.7;
}
.email {
  cursor: pointer;
}
.role-display {
  position: absolute;
  left: 50%;
  font-size: 70px;
  text-wrap: none;
  word-break: keep-all;
  opacity: 0.08;
  z-index: 0;
}
.operating {
  display: flex;
  height: 100%;
  flex-direction: column;
  align-items: center;
  justify-content: space-between;
}
.change-role {
  cursor: pointer;
  opacity: 0.6;
  transition: all 0.2s ease;
}
.change-role:hover {
  opacity: 0.8;
}
.approve {
  cursor: pointer;
  padding: 5px;
  background: #2a2a2a;
  border: cyan solid 1px;
  border-radius: 5px;
  transition: all 0.2s ease;
}
.approve:hover {
  background: cyan;
  color: black;
}
.theme-light .approve {
  background: white;
  border: black solid 1px;
}
.theme-light .approve:hover {
  background: black;
  color: white;
}
</style>