recycle-front/pages/component/role_management.vue

<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>