C56-GZH-UI/pages/index/login.vue

<template>
  <view class="login-container">
    <view class="login-box">
      <view class="logo">
        <image src="/static/logo.png" mode="aspectFit"></image>
      </view>
      <view class="title">用户登录</view>
      
      <u-form :model="loginForm" ref="uForm" :border-bottom="false">
        <u-form-item :border-bottom="false">
          <u-input
            v-model="loginForm.username"
            placeholder="请输入用户名"
            prefixIcon="account"
            :border="borderText"
            clearable
            :prefix-icon-style="{
              fontSize: '36rpx',
              color: '#909399'
            }"
            :custom-style="{
              backgroundColor: '#f5f5f5',
              padding: '0 24rpx',
              borderRadius: '40rpx'
            }"
            :input-style="{
              height: '88rpx',
              lineHeight: '88rpx'
            }"
          ></u-input>
        </u-form-item>
        
        <u-form-item :border-bottom="false">
          <u-input
            v-model="loginForm.password"
            placeholder="请输入密码"
            prefixIcon="lock"
            :type="showPassword ? 'text' : 'password'"
            :border="borderText"
            clearable
            :prefix-icon-style="{
              fontSize: '36rpx',
              color: '#909399'
            }"
            :custom-style="{
              backgroundColor: '#f5f5f5',
              padding: '0 24rpx',
              borderRadius: '40rpx'
            }"
            :input-style="{
              height: '88rpx',
              lineHeight: '88rpx'
            }"
          >
            <template slot="suffix">
              <u-icon
                :name="showPassword ? 'eye' : 'eye-off'"
                size="36"
                :style="{
                  height: '88rpx',
                  lineHeight: '88rpx'
                }"
                @click="togglePasswordVisibility"
              ></u-icon>
            </template>
          </u-input>
        </u-form-item>
      </u-form>
      
      <u-button 
        type="primary" 
        @click="handleLogin"
        :custom-style="{
          marginTop: '80rpx',
          width: '100%',
          height: '88rpx',
          lineHeight: '88rpx',
          borderRadius: '44rpx',
          fontSize: '32rpx'
        }"
      >
        登 录
      </u-button>
    </view>
  </view>
</template>

<script>
import Base_url from "@/api/request.js";
export default {
  data() {
    return {
      borderText: 'none',
      loginForm: {
        username: '',
        password: ''
      },
      showPassword: false,
      rules: {
        username: [{
          required: true,
          message: '请输入用户名',
          trigger: ['blur', 'change']
        }],
        password: [{
          required: true,
          message: '请输入密码',
          trigger: ['blur', 'change']
        }]
      }
    }
  },
  methods: {
    togglePasswordVisibility() {
      this.showPassword = !this.showPassword
    },
    handleLogin() {
      console.log('loginForm', this.loginForm)
      let obj = {
        "username": this.loginForm.username,
        "password": this.loginForm.password
      }
      uni.request({
        url: Base_url + 'landed3.action',
        method: 'POST',
        data:obj,
        // data: obj,
        header: {
          'content-type': 'application/x-www-form-urlencoded' // 设置请求头，根据你的数据格式进行设置
        },
        success: (res) => {
          console.log('登录响应：', res)
          if (res.data.code === 'success') {
            wx.setStorageSync('userName', this.loginForm.username);
            wx.setStorageSync('password', this.loginForm.password);
            wx.setStorageSync('accountId', res.data.data.accountId);
            wx.setStorageSync('userId', res.data.data.userId);
            if (res.data.data.customerVOS.length > 0) {
              wx.setStorageSync('customerVOS', res.data.data.customerVOS);
            }
            uni.showToast({
              title: '登录成功',
              icon: 'success',
              duration: 1500
            })
            setTimeout(() => {
              uni.reLaunch({
                url: '/pages/index/index',
                success: () => {
                  console.log('跳转成功')
                },
                fail: (err) => {
                  console.error('跳转失败：', err)
                  uni.navigateTo({
                    url: '/pages/index/index'
                  })
                }
              })
            }, 1500)
          } else {
            uni.showToast({
              title: res.data.message || '登录失败',
              icon: 'none'
            })
          }
        },
        fail: (err) => {
          console.error('登录请求失败：', err)
          console.log(err)
          uni.showToast({
            title: '网络错误',
            icon: 'none'
          })
        }
      })
    }
  }
}
</script>

<style lang="scss" scoped>
.login-container {
  display: flex;
  justify-content: center;
  align-items: center;
  min-height: 100vh;
  background-color: #ffffff;
  padding: 40rpx;
  
  .login-box {
    width: 100%;
    padding: 40rpx;
    
    .logo {
      text-align: center;
      margin-bottom: 60rpx;
      
      image {
        width: 180rpx;
        height: 180rpx;
      }
    }
    
    .title {
      font-size: 48rpx;
      text-align: center;
      margin-bottom: 80rpx;
      color: #303133;
      font-weight: bold;
    }
    
    /deep/ .u-form-item {
      margin-bottom: 40rpx;
      
      .u-input {
        &__content {
          display: flex;
          align-items: center;
          height: 88rpx;
          
          &__field-wrapper {
            display: flex;
            align-items: center;
            height: 88rpx;
            
            &__field {
              height: 88rpx;
              line-height: 88rpx;
            }
          }
          
          &__prefix-icon {
            height: 88rpx;
            line-height: 88rpx;
            margin-right: 12rpx;
          }
          
          &__suffix-icon {
            height: 88rpx;
            line-height: 88rpx;
            display: flex;
            align-items: center;
          }
        }
      }
      
      .u-icon {
        color: #909399;
        display: flex;
        align-items: center;
        height: 88rpx;
      }
    }
  }
}

// 适配不同屏幕尺寸
@media screen and (min-width: 768px) {
  .login-box {
    max-width: 600rpx;
    margin: 0 auto;
  }
}

// 适配iPhone X 等刘海屏
@supports (padding-bottom: constant(safe-area-inset-bottom)) {
  .login-container {
    padding-bottom: constant(safe-area-inset-bottom);
  }
}
@supports (padding-bottom: env(safe-area-inset-bottom)) {
  .login-container {
    padding-bottom: env(safe-area-inset-bottom);
  }
}
</style>