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.
337 lines
7.3 KiB
337 lines
7.3 KiB
<template>
|
|
<view class="container">
|
|
<!-- 顶部banner -->
|
|
<view class="banner">
|
|
<view class="banner-content">
|
|
<text class="title">账号角色管理</text>
|
|
<text class="subtitle">让管理更高效</text>
|
|
</view>
|
|
<image class="banner-image" src="/static/images/role-management.png" mode="aspectFit"></image>
|
|
</view>
|
|
|
|
<!-- 搜索栏 -->
|
|
<view class="search-bar">
|
|
<view class="tabs">
|
|
<view class="tab active">员工</view>
|
|
<view class="tab">用户</view>
|
|
</view>
|
|
<view class="search-input">
|
|
<uni-icons type="search" size="20" color="#999"></uni-icons>
|
|
<input type="text" placeholder="请输入要查询的内容" placeholder-class="placeholder" />
|
|
</view>
|
|
</view>
|
|
|
|
<!-- 用户列表 -->
|
|
<view class="user-list">
|
|
<view class="user-item" v-for="(item, index) in userList" :key="index">
|
|
<view class="user-info">
|
|
<text class="user-id">ID: {{item.id}}</text>
|
|
<view class="edit-btn" @tap="handleEdit(item)">
|
|
<text>去编辑</text>
|
|
<uni-icons type="right" size="14" color="#666"></uni-icons>
|
|
</view>
|
|
</view>
|
|
|
|
<view class="user-detail">
|
|
<image class="avatar" :src="item.avatar" mode="aspectFill"></image>
|
|
<view class="detail-info">
|
|
<view class="info-row">
|
|
<text class="label">昵称：</text>
|
|
<text class="value">{{item.nickname}}</text>
|
|
</view>
|
|
<view class="info-row">
|
|
<text class="label">密码：</text>
|
|
<text class="value">************</text>
|
|
</view>
|
|
<view class="info-row">
|
|
<text class="label">角色：</text>
|
|
<view v-if="item.role" class="role-tag">{{item.role}}</view>
|
|
<text v-else>-</text>
|
|
</view>
|
|
</view>
|
|
</view>
|
|
|
|
<view class="delete-btn" @tap="handleDelete(item)">
|
|
<uni-icons type="trash" size="20" color="#666"></uni-icons>
|
|
<text>删除</text>
|
|
</view>
|
|
</view>
|
|
</view>
|
|
<uv-tabbar
|
|
:value="value"
|
|
:fixed="true"
|
|
@change="changeTo"
|
|
>
|
|
<uv-tabbar-item text="首页" icon="home"></uv-tabbar-item>
|
|
<uv-tabbar-item text="角色管理" icon="photo"></uv-tabbar-item>
|
|
<uv-tabbar-item text="个人中心" icon="account"></uv-tabbar-item>
|
|
</uv-tabbar>
|
|
</view>
|
|
</template>
|
|
|
|
<script>
|
|
// import tabBarMixin from '../mixins/tabBarMixin.js'
|
|
|
|
export default {
|
|
// mixins: [tabBarMixin],
|
|
data() {
|
|
return {
|
|
value:1,
|
|
userList: [
|
|
{
|
|
id: 'YG250428000001',
|
|
nickname: '吴彦谋',
|
|
avatar: '/static/images/avatar1.png',
|
|
role: '推广官'
|
|
},
|
|
{
|
|
id: 'YG250428000002',
|
|
nickname: '冯思钧',
|
|
avatar: '/static/images/avatar2.png',
|
|
role: ''
|
|
},
|
|
{
|
|
id: 'YG250428000003',
|
|
nickname: '何炜',
|
|
avatar: '/static/images/avatar3.png',
|
|
role: ''
|
|
},
|
|
{
|
|
id: 'YG250428000004',
|
|
nickname: '郑文锦',
|
|
avatar: '/static/images/avatar4.png',
|
|
role: '推广官'
|
|
}
|
|
]
|
|
}
|
|
},
|
|
methods: {
|
|
changeTo(e){
|
|
this.value = e
|
|
console.log(e,'111')
|
|
if(e==0){
|
|
uni.reLaunch({
|
|
url: '/pages/component/admin_home'
|
|
});
|
|
}else if(e == 2){
|
|
uni.reLaunch({
|
|
url: '/pages/component/admin_my'
|
|
});
|
|
}
|
|
},
|
|
handleEdit(user) {
|
|
if (this.userRole !== 'admin') {
|
|
uni.showToast({
|
|
title: '无权限操作',
|
|
icon: 'none'
|
|
})
|
|
return
|
|
}
|
|
uni.navigateTo({
|
|
url: `/pages/user-edit/user-edit?id=${user.id}`
|
|
})
|
|
},
|
|
handleDelete(user) {
|
|
if (this.userRole !== 'admin') {
|
|
uni.showToast({
|
|
title: '无权限操作',
|
|
icon: 'none'
|
|
})
|
|
return
|
|
}
|
|
uni.showModal({
|
|
title: '提示',
|
|
content: '确定要删除该用户吗？',
|
|
success: (res) => {
|
|
if (res.confirm) {
|
|
console.log('删除用户：', user.id)
|
|
}
|
|
}
|
|
})
|
|
}
|
|
},
|
|
// onShow() {
|
|
// this.checkUserRole()
|
|
// // 如果不是管理员，跳转到首页
|
|
// if (this.userRole !== 'admin') {
|
|
// uni.showToast({
|
|
// title: '无权限访问',
|
|
// icon: 'none'
|
|
// })
|
|
// uni.reLaunch({
|
|
// url: '/pages/index/index'
|
|
// })
|
|
// }
|
|
// }
|
|
}
|
|
</script>
|
|
|
|
<style lang="scss" scoped>
|
|
.container {
|
|
min-height: 100vh;
|
|
background: #f5f5f5;
|
|
padding-bottom: 120rpx;
|
|
}
|
|
|
|
.banner {
|
|
background: #2196F3;
|
|
padding: 40rpx 30rpx;
|
|
display: flex;
|
|
justify-content: space-between;
|
|
align-items: center;
|
|
|
|
.banner-content {
|
|
.title {
|
|
font-size: 40rpx;
|
|
color: #fff;
|
|
font-weight: bold;
|
|
margin-bottom: 10rpx;
|
|
display: block;
|
|
}
|
|
|
|
.subtitle {
|
|
font-size: 28rpx;
|
|
color: rgba(255,255,255,0.8);
|
|
}
|
|
}
|
|
|
|
.banner-image {
|
|
width: 200rpx;
|
|
height: 120rpx;
|
|
}
|
|
}
|
|
|
|
.search-bar {
|
|
background: #fff;
|
|
padding: 20rpx 30rpx;
|
|
|
|
.tabs {
|
|
display: flex;
|
|
margin-bottom: 20rpx;
|
|
|
|
.tab {
|
|
padding: 10rpx 30rpx;
|
|
font-size: 28rpx;
|
|
color: #666;
|
|
position: relative;
|
|
|
|
&.active {
|
|
color: #333;
|
|
font-weight: 500;
|
|
|
|
&::after {
|
|
content: '';
|
|
position: absolute;
|
|
left: 30rpx;
|
|
right: 30rpx;
|
|
bottom: -4rpx;
|
|
height: 4rpx;
|
|
background: #00C853;
|
|
border-radius: 2rpx;
|
|
}
|
|
}
|
|
}
|
|
}
|
|
|
|
.search-input {
|
|
display: flex;
|
|
align-items: center;
|
|
background: #f5f5f5;
|
|
border-radius: 35rpx;
|
|
padding: 15rpx 30rpx;
|
|
|
|
input {
|
|
flex: 1;
|
|
font-size: 28rpx;
|
|
margin-left: 20rpx;
|
|
}
|
|
}
|
|
}
|
|
|
|
.user-list {
|
|
padding: 20rpx;
|
|
|
|
.user-item {
|
|
background: #fff;
|
|
border-radius: 20rpx;
|
|
padding: 30rpx;
|
|
margin-bottom: 20rpx;
|
|
|
|
.user-info {
|
|
display: flex;
|
|
justify-content: space-between;
|
|
align-items: center;
|
|
margin-bottom: 20rpx;
|
|
|
|
.user-id {
|
|
font-size: 28rpx;
|
|
color: #333;
|
|
}
|
|
|
|
.edit-btn {
|
|
display: flex;
|
|
align-items: center;
|
|
color: #666;
|
|
font-size: 28rpx;
|
|
}
|
|
}
|
|
|
|
.user-detail {
|
|
display: flex;
|
|
margin-bottom: 20rpx;
|
|
|
|
.avatar {
|
|
width: 100rpx;
|
|
height: 100rpx;
|
|
border-radius: 50%;
|
|
margin-right: 20rpx;
|
|
}
|
|
|
|
.detail-info {
|
|
flex: 1;
|
|
|
|
.info-row {
|
|
display: flex;
|
|
align-items: center;
|
|
margin-bottom: 10rpx;
|
|
|
|
.label {
|
|
font-size: 28rpx;
|
|
color: #666;
|
|
width: 100rpx;
|
|
}
|
|
|
|
.value {
|
|
font-size: 28rpx;
|
|
color: #333;
|
|
}
|
|
|
|
.role-tag {
|
|
background: #fff5e6;
|
|
color: #ff9800;
|
|
font-size: 24rpx;
|
|
padding: 4rpx 16rpx;
|
|
border-radius: 20rpx;
|
|
}
|
|
}
|
|
}
|
|
}
|
|
|
|
.delete-btn {
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
gap: 10rpx;
|
|
color: #666;
|
|
font-size: 28rpx;
|
|
padding-top: 20rpx;
|
|
border-top: 1px solid #f5f5f5;
|
|
}
|
|
}
|
|
}
|
|
|
|
.placeholder {
|
|
color: #999;
|
|
font-size: 28rpx;
|
|
}
|
|
</style>
|