recycle-front/pages/component/admin_my.vue

<template>
  <view class="my-bg">
    <!-- 顶部绿色渐变背景及白色渐变过渡 -->
    <view class="top-gradient-bg">
      <view class="page-title">我的</view>
      <view class="banner-card">
        <view class="banner-content">
          <view class="banner-texts">
            <text class="banner-title">旧衣换现金</text>
            <text class="banner-subtitle">旧衣有"金"生，绿色暖生活</text>
          </view>
          <image class="banner-img" src="/static/images/recycle-money.png" mode="aspectFit"></image>
        </view>
      </view>
    </view>
	
	<view class="user-cards" v-if="!login_status">
		<view class="user-info">
		  <image class="avatars" src="/static/logo.png" mode="aspectFill"></image>
		  <view class="info">
		    <text class="names">暂未登录请先登录</text>
		  </view>
		</view>
	</view>
	
	<view class="btns" v-if="!login_status">
		<uv-button 
		class="btn" 
		type="primary" 
		text="立即登录" 
		color="linear-gradient(to right, #17f261,#13d755)" 
		shape="circle"
		@click="logout"
		></uv-button>
		<text>暂未登录 请先登录</text>
	</view>
	
	
    <!-- 下半部分：用户信息和功能列表 -->
    <view class="content-section" v-if="login_status">
      <view class="user-card">
        <image class="avatar" src="/static/images/avatar.png" mode="aspectFill"></image>
        <view class="user-info-text">
          <text class="nickname">战斗世界</text>
          <text class="user-id">ID: 5625354</text>
        </view>
      </view>
      <view class="function-card">
        <view class="function-item" @tap="navigateTo('/pages/component/promotion')">
          <uni-icons custom-prefix="custom-icon" type="layers" size="24" color="#333"></uni-icons>
          <text class="function-text">推广官</text>
          <uni-icons type="right" size="16" color="#bbb"></uni-icons>
        </view>
        <view class="divider"></view>
        <view class="function-item" @tap="navigateTo('/pages/component/admin_customer')">
          <uni-icons custom-prefix="custom-icon" type="headphones" size="24" color="#333"></uni-icons>
          <text class="function-text">联系客服</text>
          <uni-icons type="right" size="16" color="#bbb"></uni-icons>
        </view>
        <view class="divider"></view>
        <view class="function-item" @tap="navigateTo('/pages/component/admin_edit_profile')">
          <uni-icons custom-prefix="custom-icon" type="edit" size="24" color="#333"></uni-icons>
          <text class="function-text">修改信息</text>
          <uni-icons type="right" size="16" color="#bbb"></uni-icons>
        </view>
        <view class="divider"></view>
        <view class="function-item" @tap="handleLogout">
          <uni-icons custom-prefix="custom-icon" type="logout" size="24" color="#333"></uni-icons>
          <text class="function-text">退出登录</text>
          <uni-icons type="right" size="16" color="#bbb"></uni-icons>
        </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:2,
		login_status:true,
        userInfo: {
        nickname: '战斗世界',
        id: '5625354',
        avatar: '/static/logo.png'
      }
    }
  },
  methods: { 
	  changeTo(e){
	  		  this.value = e
	  		  if(e==1){
	  			 uni.reLaunch({
	  			   url: '/pages/component/role_management'
	  			 });
	  		  }else if(e==0){
				   console.log(e,'111')
	  			  uni.reLaunch({
	  			    url: '/pages/component/admin_home'
	  			  });
	  		  }
	  	  },
    navigateTo(url) {
      uni.navigateTo({ url })
    },
    handleLogout() {
      uni.showModal({
        title: '提示',
        content: '确定要退出登录吗？',
        success: (res) => {
          if (res.confirm) {
            // 清除用户信息
            uni.removeStorageSync('userInfo');
			this.login_status = false;
            // 重置角色
            this.userRole = 'user'
            // 跳转到登录页
            // uni.reLaunch({
            //   url: '/pages/component/admin_login'
            // })
          }
        }
      })
    }
  },
  //   onLoad() {
		// console.log(this.isAdmin,'444')
  //     this.checkUserRole()
  //   },
  //   onShow() {
  //     this.checkUserRole()
  //     // 如果不是管理员，跳转到首页
  //     if (this.userRole !== 'admin') {
  //       uni.showToast({
  //         title: '无权限访问',
  //         icon: 'none'
  //       })
  //       uni.reLaunch({
  //         url: '/pages/index/index'
  //       })
  //     }
  //   }
}
</script>

<style lang="scss" scoped>
.my-bg {
  min-height: 100vh;
  background: #f5f8fa;
  padding-bottom: 120rpx;
  box-sizing: border-box;
}

.top-gradient-bg {
  width: 100%;
  height: 420rpx;
  background: linear-gradient(135deg, #00e676 0%, #00c853 100%);
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: flex-start;
  z-index: 1;
  overflow: visible;
}
.top-gradient-bg::after {
  content: '';
  display: block;
  position: absolute;
  left: 0; right: 0; bottom: -1rpx;
  height: 60rpx;
  background: linear-gradient(to bottom, rgba(0,200,83,0.15), #f5f8fa 90%);
  z-index: 2;
}
.page-title {
  margin-top: 80rpx;
  font-size: 36rpx;
  color: #fff;
  font-weight: 500;
  letter-spacing: 2rpx;
  text-align: center;
  z-index: 3;
}

.banner-card {
  width: 92vw;
  background: rgba(255,255,255,0.08);
  border-radius: 32rpx;
  border: 2rpx solid rgba(255,255,255,0.4);
  box-shadow: 0 8rpx 32rpx 0 rgba(0, 200, 83, 0.10);
  overflow: visible;
  margin-top: 32rpx;
  z-index: 4;
}

.banner-content {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 48rpx 40rpx 48rpx 48rpx;
  margin-bottom: -30rpx;
}

.banner-texts {
  display: flex;
  flex-direction: column;
  justify-content: center;
}

.banner-title {
  font-size: 48rpx;
  color: #fff;
  font-weight: bold;
  font-style: italic;
  margin-bottom: 16rpx;
  letter-spacing: 2rpx;
}

.banner-subtitle {
  font-size: 28rpx;
  color: #fff;
  opacity: 0.85;
  font-style: normal;
}

.banner-img {
  width: 200rpx;
  height: 130rpx;
  margin-left: 32rpx;
}

.content-section {
  margin: -40rpx 16rpx 0 16rpx;
  background: #fff;
  border-radius: 36rpx;
  box-shadow: 0 8rpx 32rpx 0 rgba(0,0,0,0.04);
  padding-bottom: 32rpx;
  z-index: 10;
  position: relative;
}

.user-card {
  margin: 0 24rpx 32rpx 24rpx;
  background: #fff;
  border-radius: 28rpx;
  box-shadow: 0 4rpx 24rpx 0 rgba(0,0,0,0.06);
  display: flex;
  align-items: center;
  padding: 40rpx 32rpx 40rpx 32rpx;
}

.avatar {
  width: 96rpx;
  height: 96rpx;
  border-radius: 50%;
  margin-right: 24rpx;
  object-fit: cover;
  background: #f5f5f5;
}

.user-info-text {
  display: flex;
  flex-direction: column;
  justify-content: center;
}

.nickname {
  font-size: 32rpx;
  color: #222;
  font-weight: bold;
  margin-bottom: 8rpx;
}

.user-id {
  font-size: 26rpx;
  color: #b0b0b0;
}

.function-card {
  margin: 0 24rpx 32rpx 24rpx;
  background: #fff;
  border-radius: 28rpx;
  box-shadow: 0 4rpx 24rpx 0 rgba(0,0,0,0.06);
  padding: 0 0;
}

.function-item {
  display: flex;
  align-items: center;
  height: 96rpx;
  padding: 0 32rpx;
  position: relative;
}

.function-text {
  flex: 1;
  margin-left: 20rpx;
  font-family: PingFang SC;
  font-weight: 400;
  font-size: 14px;
  line-height: 100%;
  letter-spacing: 0%;
  color: #222;
}

.divider {
  height: 1rpx;
  background: #f0f1f3;
  margin: 0 32rpx;
}


.user-cards {
  margin: -50rpx 30rpx 0;
  background: #fff;
  border-radius: 24rpx;
  padding: 30rpx;
  position: relative;
  z-index: 2;
  box-shadow: 0 4rpx 12rpx rgba(0, 0, 0, 0.05);
  .user-info {
    display: flex;
    align-items: center;
    margin-bottom: 40rpx;
    .avatars {
      width: 110rpx;
      height: 110rpx;
      border-radius: 50%;
      margin-right: 24rpx;
    }
}
.info {
      .name {
        font-size: 34rpx;
        font-weight: 600;
        color: #222;
        margin-bottom: 12rpx;
        display: block;
      }
}
}
.btns{
	width: 70%;
	margin: 0 auto;
	margin-top: 30%;
	display: flex;
	flex-direction: column;
	justify-content: center;
	
	align-items: center;
	.btn{
		width: 100%;
	}
	text{
		margin-top: 30rpx;
		font-family: PingFang SC;
		font-weight: 400;
		font-size: 13px;
		line-height: 100%;
		letter-spacing: 0%;
		text-align: center;
	}
}
</style>