gold_vue/gold-system/src/views/index.vue

<script setup>
import { ref, onMounted, reactive, computed, watch } from "vue";
import { useRouter } from "vue-router";
import ElementPlus from "element-plus";
import { VscGlobe } from "vue-icons-plus/vsc";
import { ElMessage } from "element-plus";
import axios from "axios";
import { ElMessageBox } from "element-plus";
import API from "@/util/http";
import dmmn from "../assets/动漫美女.png";
import { useRoute } from "vue-router";

const router = useRouter();
const imgrule1 = dmmn;
const messageVisible = ref(false);

//这是获取用户信息的接口
const adminData = ref({
  name: "",
});
const getAdminData = async function () {
  try {
    const result = await API({ url: "/admin/userinfo", data: {} });
    adminData.value = result;
    console.log("请求成功", result);
    console.log("用户信息", adminData.value);
  } catch (error) {
    console.log("请求失败", error);
  }
};
// 获取地区
const areas = ref([]);
const getAreas = async function () {
  try {
    const result = await API({ url: "/recharge/user/search", data: {} });
    areas.value = result.data;
    console.log("请求成功", result);
  } catch (error) {
    console.log("请求失败", error);
  }
};
// 查看个人信息弹出框
const openMessage = function () {
  messageVisible.value = true;
};
const closeMessage = function () {
  messageVisible.value = false;
};
const message = function () {
  openMessage();
};

// 获取machineId

function logout() {
  const machineId = localStorage.getItem("machineId");
  console.log("machineId:", machineId);
  localStorage.removeItem("token");
  // localStorage.clear();
  router.push("/login?machineId=" + machineId);
  //添加刷新页面的代码
  // window.location.reload();
  ElMessage.success("退出成功");
}

// 挂载
onMounted(async function () {
  // 获取用户信息
  getAdminData();
  // 获取地区
  getAreas();
});
// 处理地区点击事件
const changeDataByArea = (item) => {
  router.push({
    name: "workspace", // 假设工作台路由的名称为 'Workspace'
    params: {
      area: item,
    },
  });
  // 替换完url后刷新页面
};
</script>

<template>
  <div class="common-layout">
    <el-container>
      <el-aside
        style="
          width: 15%;
          min-width: 180px;
          position: fixed; /* 固定位置 */
          top: 0;
          left: 0;
          height: 100vh; /* 高度占满视口 */
          z-index: 100; /* 确保侧边栏在其他元素之上 */
        "
      >
        <div class="logo">
          <img
            src="../assets/金币管理系统logo.png"
            alt="logo"
            style="width: 30px; height: 30px"
          />
          <div style="font-size: 16px; font-weight: bold">海外金币管理系统</div>
        </div>
        <el-menu
          router="true"
          background-color="#08193d"
          active-text-color="#ffd04b"
          text-color="white"
          class="el-menu-vertical-demo"
          @open="handleOpen"
          @close="handleClose"
        >
          <el-menu-item
            index="/workspace"
            v-if="
              adminData.permission == 1 ||
              adminData.permission == 2 ||
              adminData.permission == 3 ||
              adminData.permission == 5
            "
          >
            <el-icon>
              <Folder />
            </el-icon>
            工作台
          </el-menu-item>

          <el-sub-menu
            index="2"
            v-if="
              adminData.permission == 1 ||
              adminData.permission == 3 ||
              adminData.permission == 5
            "
          >
            <template #title>
              <el-icon>
                <Folder />
              </el-icon>
              <span>财务审核</span>
            </template>
            <el-menu-item index="/rechargeAudit">充值审核</el-menu-item>
            <el-menu-item index="/refundAudit">退款审核</el-menu-item>
          </el-sub-menu>

          <el-sub-menu
            index="3"
            v-if="
              adminData.permission == 1 ||
              adminData.permission == 3 ||
              adminData.permission == 5
            "
          >
            <template #title>
              <el-icon>
                <Folder />
              </el-icon>
              <span>充值管理</span>
            </template>
            <el-menu-item index="/activity">活动管理</el-menu-item>
            <el-menu-item index="/rate">汇率管理</el-menu-item>
          </el-sub-menu>

          <el-sub-menu
            index="4"
            v-if="
              adminData.permission == 1 ||
              adminData.permission == 2 ||
              adminData.permission == 5
            "
          >
            <template #title>
              <el-icon>
                <Folder />
              </el-icon>
              <span>充值</span>
            </template>

            <el-sub-menu>
              <template #title>金币充值</template>
              <el-menu-item index="/addRecharge">新增充值</el-menu-item>
              <el-menu-item index="/adminRecharge">客服充值明细</el-menu-item>
              <el-menu-item index="/allRecharge">所有充值明细</el-menu-item>
            </el-sub-menu>
          </el-sub-menu>

          <el-sub-menu
            index="5"
            v-if="
              adminData.permission == 1 ||
              adminData.permission == 2 ||
              adminData.permission == 5
            "
          >
            <template #title>
              <el-icon>
                <Folder />
              </el-icon>
              <span>消费</span>
            </template>
            <el-sub-menu>
              <template #title>金币消费</template>
              <el-menu-item index="/addConsume">新增消费</el-menu-item>
              <el-menu-item index="/allConsume">所有消费明细</el-menu-item>
            </el-sub-menu>
          </el-sub-menu>

          <el-sub-menu
            index="6"
            v-if="
              adminData.permission == 1 ||
              adminData.permission == 2 ||
              adminData.permission == 5
            "
          >
            <template #title>
              <el-icon>
                <Folder />
              </el-icon>
              <span>退款</span>
            </template>
            <el-sub-menu>
              <template #title>金币退款</template>
              <el-menu-item index="/addRefund">新增退款</el-menu-item>
              <el-menu-item index="/allRefund">退款明细</el-menu-item>
            </el-sub-menu>
          </el-sub-menu>

          <el-menu-item
            index="/usergold"
            v-if="
              adminData.permission == 1 ||
              adminData.permission == 2 ||
              adminData.permission == 3 ||
              adminData.permission == 5
            "
          >
            <el-icon>
              <Folder />
            </el-icon>
            客户金币明细
          </el-menu-item>

          <el-menu-item
            index="/usergoldInfo"
            v-if="
              adminData.permission == 1 ||
              adminData.permission == 2 ||
              adminData.permission == 3 ||
              adminData.permission == 5
            "
          >
            <el-icon>
              <Folder />
            </el-icon>
            客户金币余额
          </el-menu-item>

          <el-menu-item index="/permissions" v-if="adminData.permission == 1">
            <el-icon>
              <Folder />
            </el-icon>
            权限管理
          </el-menu-item>
        </el-menu>
      </el-aside>
      <el-container style="margin-left: 15%; min-width: 180px">
        <!-- 修改 el-header 样式 -->
        <el-header
          style="
            position: fixed;
            top: 0;
            left: 15%;
            right: 0;
            z-index: 101;
            position: fixed;
          "
        >
          <el-menu
            :default-active="activeIndex"
            class="el-menu-demo"
            mode="horizontal"
            :ellipsis="false"
          >
            <el-sub-menu index="1" class="area" :disabled="isWorkspace">
              <template #title>
                <VscGlobe />
              </template>
              <el-menu-item
                v-for="(item, index) in areas"
                :key="index"
                @click="changeDataByArea(item)"
              >
                {{ item }}
              </el-menu-item>
            </el-sub-menu>
          </el-menu>
          <el-menu
            :default-active="activeIndex"
            class="el-menu-demo"
            mode="horizontal"
            :ellipsis="false"
          >
            <el-sub-menu index="1" class="admin">
              <template #title>
                <el-image
                  :src="imgrule1"
                  alt="错误"
                  style="width: 50px; height: 50px"
                />
                <span style="margin-left: 10px">{{ adminData.name }}</span>
              </template>
              <el-menu-item @click="message()">查看个人信息</el-menu-item>
              <el-menu-item index="1-2" @click="logout">退出登录</el-menu-item>
            </el-sub-menu>
          </el-menu>
        </el-header>
        <!-- 修改 el-main 样式 -->
        <el-main style="margin-top: 60px">
          <!-- 60px 是 el-header 的大致高度，可根据实际情况调整 -->
          <router-view></router-view>
        </el-main>
      </el-container>
    </el-container>
  </div>
  <!-- 查看个人信息 -->
  <el-dialog v-model="messageVisible" title="查看个人信息" width="500px">
    <el-form :model="adminData">
      <el-form-item label="用户姓名" label-width="100px" label-position="left">
        <span class="message-font">{{ adminData.name }}</span>
      </el-form-item>
      <el-form-item label="精网号" label-width="100px" label-position="left">
        <span class="message-font">{{ adminData.jwcode }}</span>
      </el-form-item>
      <el-form-item label="地区" label-width="100px" label-position="left">
        <span class="message-font">{{ adminData.area }}</span>
      </el-form-item>
      <el-form-item label="注册时间" label-width="100px" label-position="left">
        <span class="message-font">{{ adminData.createTime }}</span>
      </el-form-item>
    </el-form>
    <template #footer>
      <div class="dialog-footer">
        <el-button text @click="closeMessage()">关闭</el-button>
      </div>
    </template>
  </el-dialog>
</template>

<style scoped>
.message-font {
  font-size: 16px;
  font-weight: bold;
}

.admin {
  margin-left: auto;
}

.el-aside {
  background-color: #08193d;
  min-height: 100vh;
  width: 200px;
}

.logo {
  color: white;
  margin: 20px 0px 20px 20px;
  display: flex;
}
.el-menu {
  border: none; /* 去除边框 */
  padding: 0; /* 去除内边距 */
}
.el-menu-demo {
  float: right; /* 将菜单向右浮动 */
}
</style>