xiaokuaisong-paotui/distribution/pages/login/login.vue

<template>
  <view class="normal-login-container">
    <view class="logo-content align-center justify-center flex">
      <image class="img-a" :src="apiImageUrl + '/static/images/b-1.png'" />
      <image class="img-b" :src="apiImageUrl + '/static/images/b-2.png'" />
      
      <view class="text">
        <view class="t-b">校食通快送端</view>
        <view class="t-b2">一款专为在校同学开发的配送app</view>
      </view>
    </view>
    <view class="login-form-content">
      <view class="input-item flex align-center">
        <view class="iconfont icon-user icon"></view>
        <input v-model="loginForm.userAccount" class="input" type="text" placeholder="请输入账号" maxlength="30" />
      </view>
      <view class="input-item flex align-center">
        <view class="iconfont icon-password icon"></view>
        <input v-model="loginForm.userPassword" type="password" class="input" placeholder="请输入密码" maxlength="20" />
      </view>
      
      <view class="action-btn">
        <button @click="handleLogin" class="login-btn cu-btn block bg-blue lg round">登录</button>
      </view>
	   <p @click="goLogin" class="goLogin">去注册</p>
    </view>
  </view>
</template>

<script>
export default {
  data() {
    return {
      loginForm: {
        userAccount: '',
        userPassword: ''
      },
      apiImageUrl: 'https://xiaokuaisong.shop' // 直接在这里设置后端地址
    };
  },
  methods: {
  //   handleLogin() {
  //     console.log('userAccount:', this.loginForm.userAccount);
  //     console.log('userPassword:', this.loginForm.userPassword);

  //     // 检查表单字段是否已填充
  //     if (!this.loginForm.userAccount || !this.loginForm.userPassword) {
  //       uni.showToast({
  //         icon: 'error',
  //         title: '请输入账号和密码'
  //       });
  //       return;
  //     }

  //     uni.request({
  //       url: this.apiImageUrl + '/api/user/login',
  //       method: 'POST',
  //       data: {
  //         userAccount: this.loginForm.userAccount,
  //         userPassword: this.loginForm.userPassword
  //       },
		// header:{
		// 'cookie':uni.getStorageSync("cookie")
		// },
  //       success: (res) => {
  //         console.log(res.data.code);
          
  //         if (res.data.code === 0) {
  //           uni.showToast({
  //             title: '登录成功',
  //             duration: 2000
  //           });
            
  //           uni.removeStorageSync('cookie');
  //           uni.setStorageSync('userInfo', res.data.data);
  //           uni.setStorageSync('cookie', res.header['Set-Cookie']);
  //           uni.switchTab({
  //             url: '/pages/index/index'
  //           });
  //         } else {
  //           uni.showToast({
  //             icon: 'error',
  //             title: '登录失败，请联系管理员'
  //           });
  //           return;
  //         }
  //       },
  //       fail: (err) => {
  //         console.error(err);
  //         uni.showToast({
  //           icon: 'error',
  //           title: '请求失败，请检查网络'
  //         });
  //       }
  //     });
  //   }
  
  handleLogin() {
    console.log('userAccount:', this.loginForm.userAccount);
    console.log('userPassword:', this.loginForm.userPassword);
  
    uni.showLoading({
      title: '正在登录...',
      mask: true
    });
  
    uni.request({
      url: this.apiImageUrl + '/api/user/login',
      method: 'POST',
      data: {
		appName: "errand",
        userAccount: this.loginForm.userAccount,
        userPassword: this.loginForm.userPassword
      },
      header: {
        'Content-Type': 'application/json', // 确保设置正确的 Content-Type
        'cookie': uni.getStorageSync("cookie") || ''
      },
      success: (res) => {
        console.log('Response Data:', res); // 添加日志查看完整响应
        if (res.statusCode === 200 && res.data.code === 0) { // 确认状态码
          uni.showToast({
            title: '登录成功',
            duration: 2000
          });
  
          // 移除旧的 cookie 并设置新的 userInfo 和 cookie
          uni.removeStorageSync('cookie');
          uni.setStorageSync('userInfo', res.data.data);
          if (res.header && res.header['Set-Cookie']) {
            uni.setStorageSync("cookie", res.header['Set-Cookie']);
          }
  
          // 尝试跳转
          uni.switchTab({
            url: '/pages/index/index'
          });
        } else {
          uni.showToast({
            icon: 'error',
            title: "登录失败，请联系管理员"
          });
        }
      },
      fail: (err) => {
        console.error('Request failed:', err); // 添加错误日志
        uni.showToast({
          icon: 'error',
          title: "网络请求失败，请重试"
        });
      },
      complete: () => {
        uni.hideLoading(); // 请求完成后隐藏加载提示
      }
    });
  },
  goLogin(){
	  uni.navigateTo({
	  	url:'/pages/register/register'
	  })
  }
  }
};
</script>


<style lang="scss">
  page {
	background: url('../../static/login.jpg') repeat fixed center;
  }
 
  .normal-login-container {
    width: 100%;
 
    .logo-content {
      width: 100%;
      font-size: 21px;
      text-align: center;
      padding-top: 15%;
 
      image {
        border-radius: 4px;
      }
 
      .title {
        margin-left: 10px;
      }
    }
 
    .login-form-content {
      text-align: center;
      margin: 20px auto;
      width: 80%;
 
      .input-item {
        margin: 20px auto;
        background-color: #f5f6f7;
        height: 45px;
        border-radius: 20px;
 
        .icon {
          font-size: 38rpx;
          margin-left: 10px;
          color: #999;
        }
 
        .input {
          width: 80%;
          font-size: 14px;
          line-height: 20px;
          text-align: left;
          padding-left: 15px;
		  padding-top: 8px;
		  padding-bottom: 8px;
		  background-color: #f5f6f7;
        }
 
      }
 
      .login-btn {
        margin-top: 40px;
        height: 45px;
		border-radius: 30px;
      }
      
      .reg {
        margin-top: 15px;
      }
      
      .xieyi {
        color: #333;
        margin-top: 20px;
      }
      
      .login-code {
        height: 38px;
        float: right;
      
        .login-code-img {
          height: 38px;
          position: absolute;
          margin-left: 10px;
          width: 200rpx;
        }
      }
    }
  }
.img-a {
	position: absolute;
	    width: 100%;
	    top: -74px;
	    right: 0;
	    z-index: 100;
}
.img-b {
	position: absolute;
	width: 50%;
	bottom: 0;
	left: -50rpx;
	z-index: 100;
}
.text{
	    margin-left: -111px;
		margin-top: 28px;
}
.t-b {
	    font-size: 29px;
	    color: #000;
	    padding: 60px 0 10px 0;
	    font-weight: bold;
}
.t-b2 {
	text-align: center;
	font-size: 32rpx;
	color: #2a2a2a;
}
 .goLogin {
 	 float: right;
 	 color: #444444;
 	 padding: 10px;
 }
</style>