recycle-front/pages/subcomponent/admin_login.vue

<template>
  <view class="login-container">
    <!-- Logo和标题区域 -->
    <image class="logo" src="/static/logo.png" mode="aspectFit"></image>
    <text class="app-title">瀚海回收</text>
    
    <!-- 登录表单 -->
    <view class="login-form">
      <text class="form-title">管理员登录</text>
      
      <!-- 账号输入框 -->
      <view class="input-group">
        <text class="label">账号</text>
        <input 
          type="text"
          v-model="formData.username"
          placeholder="请输入"
          placeholder-class="placeholder"
        />
      </view>
      
      <!-- 密码输入框 -->
      <view class="input-group">
        <text class="label">密码</text>
        <view class="password-input">
          <input
            :type="showPassword ? 'text' : 'password'"
            v-model="formData.password"
            placeholder="请输入"
            placeholder-class="placeholder"
          />
          <view class="eye-icon" @tap="togglePasswordVisibility">
            <uni-icons :type="showPassword ? 'eye' : 'eye-slash'" size="20" color="#666"></uni-icons>
          </view>
        </view>
      </view>
      
      <!-- 登录按钮 -->
      <button 
        class="login-btn"
        :class="{'login-btn-active': isFormValid}"
        @tap="handleLogin"
      >登录</button>
      
      <!-- 取消登录按钮 -->
      <button 
        class="cancel-btn"
        @tap="handleCancel"
      >取消登录</button>
      
      <!-- 协议勾选 -->
      <view class="agreement">
        <view class="checkbox" @tap="toggleAgreement">
          <view v-if="formData.agreement" class="checkbox-checked">
            <text class="checkmark">✓</text>
          </view>
          <view v-else class="checkbox-empty"></view>
        </view>
        <text class="agreement-text">
          我已阅读并同意
          <text class="link" @tap="openServiceAgreement">《服务协议》</text>
          和
          <text class="link" @tap="openPrivacyPolicy">《隐私政策》</text>
        </text>
      </view>
    </view>
  </view>
</template>

<script>
export default {
  data() {
    return {
      formData: {
        username: '',
        password: '',
        agreement: false
      },
      showPassword: false
    }
  },
  computed: {
    isFormValid() {
      return this.formData.username && 
             this.formData.password && 
             this.formData.agreement
    }
  },
  methods: {
    togglePasswordVisibility() {
      this.showPassword = !this.showPassword
    },
    toggleAgreement() {
      this.formData.agreement = !this.formData.agreement
    },
    handleLogin() {
      if (!this.isFormValid) {
        uni.showToast({
          title: '请完善登录信息',
          icon: 'none'
        })
        return
      }
      
      // 这里添加登录逻辑
      console.log('登录信息：',JSON.parse(JSON.stringify(this.formData) )  )
	  if( JSON.parse(JSON.stringify(this.formData)).username == 'admin' && JSON.parse(JSON.stringify(this.formData) ).password == '123' ){
		  console.log(1)
        uni.setStorageSync('userInfo', { role: 'admin' })
		uni.reLaunch({
		  url: '/pages/component/admin_home'
		})
	  }
    },
    handleCancel() {
      uni.navigateBack()
    },
    openServiceAgreement() {
      // 打开服务协议页面
      uni.navigateTo({
        url: '/pages/agreement/service'
      })
    },
    openPrivacyPolicy() {
      // 打开隐私政策页面
      uni.navigateTo({
        url: '/pages/agreement/privacy'
      })
    }
  }
}
</script>

<style lang="scss" scoped>
.login-container {
  min-height: 100vh;
  background-color: #00C853;
  padding: 0 40rpx;
  box-sizing: border-box;
  display: flex;
  flex-direction: column;
  align-items: center;
  padding-top: 15vh;
  
  .logo {
    width: 160rpx;
    height: 160rpx;
    margin-bottom: 20rpx;
  }

  .app-title {
    font-size: 44rpx;
    color: #fff;
    font-weight: 600;
    margin-bottom: 60rpx;
  }
  
  .login-form {
    width: 100%;
    background: rgba(255, 255, 255, 0.95);
    border-radius: 20rpx;
    padding: 40rpx;
    box-sizing: border-box;
    
    .form-title {
      font-family: PingFang SC;
      font-weight: 500;
      font-size: 32rpx;
      line-height: 140%;
      letter-spacing: 0%;
      color: #333;
      font-weight: 500;
      margin-bottom: 40rpx;
    }
    
    .input-group {
      margin-bottom: 30rpx;
      position: relative;
      
      .label {
		font-family: PingFang SC;
		font-weight: 400;
		font-size: 13px;
		line-height: 140%;
		letter-spacing: 0%;
        color: #333;
        margin-bottom: 8rpx;
        display: block;
      }
      
      .password-input {
        position: relative;
        width: 100%;
        padding: 0;
        
        input {
          width: 100%;
          height: 90rpx;
          background: transparent;
          font-size: 28rpx;
          color: #333;
          border-bottom: 1px solid #E5E5E5;
          padding: 0;
          padding-right: 60rpx;
          box-sizing: border-box;
        }

        .eye-icon {
          position: absolute;
          right: -10rpx;
          top: 50%;
          transform: translateY(-50%);
          padding: 20rpx;
          display: flex;
          align-items: center;
          justify-content: center;
        }
      }

      input {
        width: 100%;
        height: 90rpx;
        background: transparent;
        font-size: 28rpx;
        color: #333;
        border-bottom: 1px solid #E5E5E5;
        padding: 0;
        box-sizing: border-box;
      }
    }
    
    .placeholder {
      color: #999;
      font-size: 28rpx;
    }
    
    .login-btn {
      width: 100%;
      height: 90rpx;
      background: #00C853;
      color: #fff;
      font-size: 32rpx;
      border-radius: 45rpx;
      margin: 40rpx 0 20rpx;
      display: flex;
      align-items: center;
      justify-content: center;
      border: none;
    }
    
    .cancel-btn {
      width: 100%;
      height: 90rpx;
      background: transparent;
      color: #00C853;
      font-size: 32rpx;
      border-radius: 45rpx;
      margin-bottom: 30rpx;
      display: flex;
      align-items: center;
      justify-content: center;
      border: 1px solid #00C853;
    }
    
    .agreement {
      display: flex;
      align-items: center;
      padding: 0;
      
      .checkbox {
        width: 32rpx;
        height: 32rpx;
        margin-right: 12rpx;
        
        .checkbox-empty {
          width: 30rpx;
          height: 30rpx;
          border: 1px solid #00C853;
          border-radius: 50%;
        }

        .checkbox-checked {
          width: 32rpx;
          height: 32rpx;
          background: #00C853;
          border-radius: 50%;
          display: flex;
          align-items: center;
          justify-content: center;
          border: 1px solid #00C853;

          .checkmark {
            color: #fff;
            font-size: 20rpx;
            line-height: 1;
            transform: translateY(-1rpx);
          }
        }
      }
      
      .agreement-text {
        font-size: 24rpx;
        color: #666;
        
        .link {
          color: #00C853;
        }
      }
    }
  }
}
</style>