recycle-front/pages/component/admin_home.vue

<template>
  <view class="container">
    <!-- 顶部绿色区域（包含用户信息和旧衣兑换现金） -->
    <view class="top-section">
      <!-- 顶部用户信息 -->
      <view class="user-header">
        <view class="user-info">
          <image class="avatar" :src="userInfo.avatar || '/static/images/avatar.png'" mode="aspectFill"></image>
          <text class="username">{{ userInfo.nickname || '未登录' }}</text>
          <view class="role-tag">
            <text>{{ userInfo.role === 'admin' ? '超级管理员' : '普通用户' }}</text>
          </view>
        </view>
        <view class="header-right">
          <uni-icons type="more-filled" size="24" color="#fff"></uni-icons>
          <uni-icons type="circle" size="24" color="#fff"></uni-icons>
        </view>
      </view>

      <!-- 旧衣换现金banner -->
      <view class="exchange-banner">
        <view class="banner-text">
          <text class="title">旧衣换现金</text>
          <text class="subtitle">旧衣有"金"生，绿色暖生活</text>
        </view>
        <image class="banner-image" src="/static/images/recycle.png" mode="aspectFit"></image>
      </view>
    </view>

    <!-- 下半部分内容区域 -->
    <view class="content-section">
      <!-- 管理模块 -->
      <view class="management-grid">
        <view class="grid-item">
          <view class="icon-badge">
            <uni-icons type="person" size="24" color="#8B5CF6"></uni-icons>
            <text class="badge">2</text>
          </view>
          <text>用户管理</text>
        </view>
        <view class="grid-item">
          <view class="icon-badge">
            <uni-icons type="list" size="24" color="#3B82F6"></uni-icons>
            <text class="badge">99+</text>
          </view>
          <text>订单管理</text>
        </view>
        <view class="grid-item">
          <view class="icon-badge">
            <uni-icons type="staff" size="24" color="#10B981"></uni-icons>
          </view>
          <text>员工管理</text>
        </view>
      </view>

      <!-- 订单管理 -->
            <view class="section-card">
              <view class="section-header">
                <text class="title">订单管理</text>
                <view class="view-all">
                  <text>全部</text>
                  <uni-icons type="right" size="14" color="#999"></uni-icons>
                </view>
              </view>
              <view class="order-card">
                <view class="order-info">
                  <text class="order-id">{{orderInfo.orderId}}</text>
                  <view class="info-item">
                    <text class="label">用户名称：</text>
                    <text class="value">{{orderInfo.customerName}}</text>
                  </view>
                  <view class="info-item">
                    <text class="label">电话：</text>
                    <text class="value">{{orderInfo.phone}}</text>
                  </view>
                  <view class="info-item">
                    <text class="label">预约时间：</text>
                    <text class="value">{{orderInfo.appointmentTime}}</text>
                  </view>
                </view>
                <view class="order-actions">
                  <view class="action-btn">
                    <uni-icons type="undo" size="20" color="#666"></uni-icons>
                    <text>驳回</text>
                  </view>
                  <view class="action-btn">
                    <uni-icons type="person" size="20" color="#666"></uni-icons>
                    <text>审批</text>
                  </view>
                </view>
                <text class="status-tag">{{orderInfo.status}}</text>
              </view>
            </view>
      
            <!-- 用户管理 -->
            <view class="section-card">
              <view class="section-header">
                <text class="title">用户管理</text>
                <view class="view-all">
                  <text>全部</text>
                  <uni-icons type="right" size="14" color="#999"></uni-icons>
                </view>
              </view>
              <view class="user-card">
                <view class="user-info">
                  <text class="title">{{promoterApplication.name}} 的推广官申请</text>
                  <text class="time">{{promoterApplication.time}}</text>
                  <view class="info-list">
                    <view class="info-item">
                      <text class="label">电话：</text>
                      <text class="value">{{promoterApplication.phone}}</text>
                    </view>
                    <view class="info-item">
                      <text class="label">职业：</text>
                      <text class="value">{{promoterApplication.occupation}}</text>
                    </view>
                    <view class="info-item">
                      <text class="label">年龄：</text>
                      <text class="value">{{promoterApplication.age}}岁</text>
                    </view>
                    <view class="info-item">
                      <text class="label">每日可花推广时间：</text>
                      <text class="value">{{promoterApplication.dailyPromotionHours}}小时</text>
                    </view>
                  </view>
                </view>
                <text class="status-tag">{{promoterApplication.status}}</text>
              </view>
            </view>

      <!-- 员工管理 -->
      <view class="section-card">
        <view class="section-header">
          <text class="title">员工管理</text>
          <view class="view-all">
            <text>全部</text>
            <uni-icons type="right" size="14" color="#999"></uni-icons>
          </view>
        </view>
        <view class="staff-table">
          <view class="table-header">
            <text class="col-rank">排名</text>
            <text class="col-name">姓名</text>
            <text class="col-orders">处理订单</text>
            <text class="col-promoters">推广人数</text>
          </view>
          <view 
            class="table-row" 
            v-for="(item, index) in staffList" 
            :key="index"
          >
            <text class="col-rank" :class="'rank-' + (index + 1)">{{index + 1}}</text>
            <text class="col-name">{{item.name}}</text>
            <text class="col-orders">{{item.orders}}单</text>
            <text class="col-promoters">{{item.promoters}}人</text>
          </view>
        </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'
// import {adminList} from '../mixins/list.js'

export default {
  // mixins: [tabBarMixin],
  data() {
   return {
	   value : 0,
         userInfo: {
           nickname: '郑婷雅',
           role: 'admin',
           avatar: '/static/images/avatar.png'
         },
         orderInfo: {
           orderId: 'RE827381278615226',
           customerName: '周小艺',
           phone: '138****1234',
           appointmentTime: '周四 11:00~13:00',
           status: '待质检'
         },
         promoterApplication: {
           name: '周小艺',
           time: '16:22',
           phone: '139****1234',
           occupation: '待业',
           age: 32,
           dailyPromotionHours: 6,
           status: '待确认'
         },
         staffList: [
           { name: '钱君霖', orders: 237, promoters: 236 },
           { name: '吴彦谋', orders: 230, promoters: 230 },
           { name: '周小艺', orders: 180, promoters: 180 },
           { name: '郑文锦', orders: 166, promoters: 166 },
           { name: '何炜', orders: 150, promoters: 150 }
         ]
       }
  },
  methods:{
	  changeTo(e){
		    this.value = e
		  console.log(e,'111')
		  if(e==1){
			 uni.reLaunch({
			   url: '/pages/component/role_management'
			 });
		  }else if(e == 2){
			  uni.reLaunch({
			    url: '/pages/component/admin_my'
			  });
		  }
	  }
  },
  // onLoad() {
  //   this.checkUserRole();
  //   uni.hideTabBar();
  // },
  // onShow() {
  //   this.checkUserRole();
  //   if (this.userRole !== 'admin') {
  //     uni.showToast({
  //       title: '无权限访问',
  //       icon: 'none'
  //     });
  //     uni.reLaunch({
  //       url: '/pages/index/index'
  //     });
  //   }
  // }
}
</script>

<style lang="scss">
.container {
  min-height: 100vh;
  background: #f5f5f5;
  padding-bottom: calc(var(--window-bottom) + 100rpx);
}

.top-section {
  background: #00C853;
  padding: 0 0 40rpx;
  // border-radius: 0 0 30rpx 30rpx;
  position: relative;
  z-index: 1;
  box-shadow: 0 16rpx 36rpx rgba(0, 200, 83, 0.9),
              0 2rpx 8rpx rgba(0, 0, 0, 0.15);

  .user-header {
    padding: 60rpx 30rpx 20rpx;
    display: flex;
    justify-content: space-between;
    align-items: center;

    .user-info {
      display: flex;
      align-items: center;
      
      .avatar {
        width: 80rpx;
        height: 80rpx;
        border-radius: 50%;
        margin-right: 20rpx;
        border: 2rpx solid rgba(255,255,255,0.3);
      }

      .username {
        color: #fff;
        font-size: 32rpx;
        margin-right: 20rpx;
      }

      .role-tag {
        background: rgba(255,255,255,0.2);
        padding: 4rpx 16rpx;
        border-radius: 30rpx;
        
        text {
          color: #fff;
          font-size: 24rpx;
        }
      }
    }

    .header-right {
      display: flex;
      gap: 20rpx;
    }
  }

  .exchange-banner {
    margin: 20rpx 30rpx;
    background: rgba(255,255,255,0.1);
    border-radius: 20rpx;
    padding: 30rpx;
    display: flex;
    justify-content: space-between;
    align-items: center;

    .banner-text {
      .title {
        color: #fff;
        font-size: 40rpx;
        font-weight: bold;
        margin-bottom: 10rpx;
        display: block;
      }

      .subtitle {
        color: rgba(255,255,255,0.8);
        font-size: 28rpx;
      }
    }

    .banner-image {
      width: 180rpx;
      height: 140rpx;
    }
  }
}

.content-section {
  margin-top: -20rpx;
  position: relative;
  z-index: 2;
  padding: 0 20rpx;

  .management-grid {
    background: #fff;
    border-radius: 20rpx;
    padding: 30rpx;
    display: flex;
    justify-content: space-around;
    margin-bottom: 20rpx;
    box-shadow: 0 2rpx 8rpx rgba(0,0,0,0.05);

    .grid-item {
      display: flex;
      flex-direction: column;
      align-items: center;
      gap: 10rpx;

      .icon-badge {
        position: relative;
        width: 80rpx;
        height: 80rpx;
        background: #f8f8f8;
        border-radius: 20rpx;
        display: flex;
        align-items: center;
        justify-content: center;
        
        .badge {
          position: absolute;
          top: -10rpx;
          right: -10rpx;
          background: #ff4d4f;
          color: #fff;
          font-size: 20rpx;
          padding: 2rpx 10rpx;
          border-radius: 20rpx;
          min-width: 32rpx;
          text-align: center;
        }
      }

      text {
        font-size: 28rpx;
        color: #333;
      }
    }
  }
}

.section-card {
  margin: 20rpx;
  background: #fff;
  border-radius: 20rpx;
  padding: 30rpx;

  .section-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 20rpx;

    .title {
      font-family: PingFang SC;
      font-weight: 800;
      font-size: 15px;
      line-height: 140%;
      letter-spacing: 0%;
      text-align: center;
      vertical-align: middle;
      font-weight: 500;
      color: #333;
    }

    .view-all {
      display: flex;
      align-items: center;
      gap: 4rpx;
      color: #999;
      font-size: 28rpx;
    }
  }
}

.order-card {
  background: #fff;
  border-radius: 12rpx;
  padding: 20rpx;
  position: relative;
  border: 1px solid #f0f0f0;

  .order-info {
    .order-id {
      font-size: 32rpx;
      color: #333;
      margin-bottom: 10rpx;
      display: block;
    }

    .info-item {
            display: flex;
            align-items: center;
            margin-bottom: 10rpx;
    
            .label {
              font-size: 28rpx;
              color: #999;
              min-width: 80rpx;
            }
    
            .value {
              font-size: 28rpx;
              color: #333;
              font-weight: 500;
            }
          }
  }

  .order-actions {
    display: flex;
    justify-content: center;
    gap: 60rpx;
    margin-top: 20rpx;
    padding-top: 20rpx;
    border-top: 1px solid #f5f5f5;

    .action-btn {
      display: flex;
      align-items: center;
	  flex-direction: column;
      gap: 10rpx;
      color: #666;
      font-size: 14rpx;
    }
  }

  .status-tag {
    position: absolute;
    top: 55%;
    right: 20rpx;
    color: #ff9800;
    font-size: 28rpx;
  }
}

.user-card {
  background: #fff;
  border-radius: 12rpx;
  padding: 20rpx;
  position: relative;
  border: 1px solid #f0f0f0;

  .user-info {
    .title {
      font-family: PingFang SC;
      font-weight: 400;
      font-size: 18px;
      line-height: 140%;
      letter-spacing: 0%;
      vertical-align: middle;
      color: #333;
      margin-bottom: 10rpx;
      display: block;
      padding-right: 120rpx;
    }

    .time {
      position: absolute;
      top: 20rpx;
      right: 20rpx;
      font-size: 28rpx;
      color: #999;
    }

    .info-list {
      .info-item {
            display: flex;
            align-items: center;
            margin-bottom: 10rpx;
            .label {
              font-size: 28rpx;
              color: #999;
              min-width: 80rpx;
            }
    
            .value {
              font-size: 28rpx;
              color: #333;
              font-weight: 500;
            }
          }
    }
  }

  .status-tag {
    position: absolute;
    top: 75%;
    right: 20rpx;
    color: #ff9800;
    font-size: 28rpx;
  }
}

.staff-table {
  background: #fff;
  border-radius: 12rpx;
  padding: 20rpx;
  border: 1px solid #f0f0f0;

  .table-header, .table-row {
    display: flex;
    padding: 20rpx;
    font-size: 28rpx;
    
    .col-rank { width: 15%; }
    .col-name { width: 25%; }
    .col-orders { width: 30%; }
    .col-promoters { width: 30%; }
  }

  .table-header {
    color: #999;
    border-bottom: 1px solid #f5f5f5;
  }

  .table-row {
    color: #333;

    .rank-1 { color: #f5222d; }
    .rank-2 { color: #fa8c16; }
    .rank-3 { color: #52c41a; }
  }
}
</style>