上传代码
This commit is contained in:
281
p-BluPrint_1.0.288888/pages/login/login.vue
Normal file
281
p-BluPrint_1.0.288888/pages/login/login.vue
Normal file
@ -0,0 +1,281 @@
|
||||
<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">一款专为用户开发的点餐配送数字化平台</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>
|
||||
import { apiImageUrl } from '../../API/api';
|
||||
export default {
|
||||
data() {
|
||||
return {
|
||||
loginForm: {
|
||||
userAccount: '',
|
||||
userPassword: ''
|
||||
},
|
||||
//apiImageUrl: 'http://39.101.78.35:6448'
|
||||
};
|
||||
},
|
||||
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: apiImageUrl + '/api/user/login',
|
||||
method: 'POST',
|
||||
data: {
|
||||
appName:'business',
|
||||
userAccount: this.loginForm.userAccount,
|
||||
userPassword: this.loginForm.userPassword
|
||||
},
|
||||
header: {
|
||||
'Content-Type': 'application/json',
|
||||
'cookie': uni.getStorageSync("cookie") || ''
|
||||
},
|
||||
success: (res) => {
|
||||
console.log('Response Data:', res);
|
||||
if (res.statusCode === 200 && res.data.code === 0) {
|
||||
uni.showToast({
|
||||
title: '登录成功',
|
||||
duration: 2000
|
||||
});
|
||||
|
||||
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/signIn/signIn'
|
||||
})
|
||||
}
|
||||
}
|
||||
};
|
||||
</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>
|
||||
Reference in New Issue
Block a user