金币系统前端
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.
 
 
 

277 lines
7.9 KiB

<script setup>
import { ref, onMounted, reactive, computed } 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 "../api/index.js";
const router = useRouter();
const imgrule1 = "../src/assets/动漫美女.png";
const messageVisible = ref(false);
//这是获取用户信息的接口
const adminData = ref({
name: "",
});
const getAdminData = async function () {
try {
const result = await API.post(
"http://54.251.137.151:10702/admin/userinfo",
{}
);
adminData.value = result;
console.log("请求成功", result);
console.log("用户信息", adminData.value);
} catch (error) {
console.log("请求失败", error);
}
};
// 查看个人信息弹出框
const openMessage = function () {
messageVisible.value = true;
};
const closeMessage = function () {
messageVisible.value = false;
};
const message = function () {
openMessage();
};
function logout() {
localStorage.removeItem("token");
localStorage.clear();
router.push("/login");
ElMessage.success("退出成功");
}
// 挂载
onMounted(async function () {
// 获取用户信息
getAdminData();
});
</script>
<template>
<div class="common-layout">
<el-container>
<el-aside style="width: 15%; min-width: 180px">
<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
"
>
<el-icon>
<Folder />
</el-icon>
工作台
</el-menu-item>
<el-sub-menu
index="2"
v-if="adminData.permission == 1 || adminData.permission == 2"
>
<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 == 2"
>
<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 == 3"
>
<template #title>
<el-icon>
<Folder />
</el-icon>
<span>金币充值</span>
</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
index="5"
v-if="adminData.permission == 1 || adminData.permission == 3"
>
<template #title>
<el-icon>
<Folder />
</el-icon>
<span>金币消费</span>
</template>
<el-menu-item index="/addConsume">新增消费</el-menu-item>
<el-menu-item index="/allConsume">所有消费明细</el-menu-item>
</el-sub-menu>
<el-sub-menu
index="6"
v-if="adminData.permission == 1 || adminData.permission == 3"
>
<template #title>
<el-icon>
<Folder />
</el-icon>
<span>金币退款</span>
</template>
<el-menu-item index="/addRefund">新增退款</el-menu-item>
<el-menu-item index="/allRefund">退款明细</el-menu-item>
</el-sub-menu>
<el-menu-item
index="/usergold"
v-if="
adminData.permission == 1 ||
adminData.permission == 2 ||
adminData.permission == 3
"
>
<el-icon>
<Folder />
</el-icon>
客户金币明细
</el-menu-item>
<el-menu-item
index="/usergoldInfo"
v-if="
adminData.permission == 1 ||
adminData.permission == 2 ||
adminData.permission == 3
"
>
<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>
<el-header>
<el-menu
:default-active="activeIndex"
class="el-menu-demo"
mode="horizontal"
:ellipsis="false"
@select="handleSelect"
>
<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-item index="2">
<VscGlobe />
</el-menu-item>
</el-menu>
</el-header>
<el-main>
<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;
}
</style>