From 9d5b4d650e5b01081d3537c750e7469db4d161e3 Mon Sep 17 00:00:00 2001
From: 马宇豪 <978517621@qq.com>
Date: Tue, 29 Apr 2025 08:53:20 +0800
Subject: [PATCH] 提交
---
pages/index/index.vue | 284 ++++++++++++++++++++++++++++++++++++++++++++------------
1 files changed, 222 insertions(+), 62 deletions(-)
diff --git a/pages/index/index.vue b/pages/index/index.vue
index e0fb43d..aeeca37 100644
--- a/pages/index/index.vue
+++ b/pages/index/index.vue
@@ -1,114 +1,274 @@
<template>
<view class="box">
- <view class="header">
- <view class="titleFirst"><b>新疆维吾尔自治区自然灾害综合监测预警</b></view>
- <view class="titleSecond"><b>自然灾害综合风险预警发布及响应联动系统</b></view>
- </view>
- <view>
- <u-form :model="form" ref="uForm" class="form" >
- <u-form-item ><u-input color="#fff" v-model="form.name" placeholder="请输入用户名" /></u-form-item>
- <u-form-item ><u-input color="#fff" v-model="form.pwd" type="password" placeholder="请输入密码" /></u-form-item>
- <!-- <view class="loginPsw">
- <u-checkbox-group >
- <u-checkbox disabled="true"></u-checkbox><text style="color: #fff;">自动登录</text>
- </u-checkbox-group>
- <text style="color: lightblue;">忘记密码</text>
- </view> -->
- <u-form-item ><u-button type="primary" style="width: 100%;" @click="Login">登录</u-button></u-form-item>
- <view style="color: white;margin-left:25%;margin-top: 70%;">技术支持：中国科学院</view>
- </u-form>
- </view>
+ <view class="topContainer">
+ <image :src="loginTop" class="topImg" mode="widthFix"></image>
+ <image :src="loginPic" class="topPic" mode="widthFix"></image>
+ </view>
+
+ <view class="main">
+ <view class="header">
+ <view class="titleFirst">
+ 你好~<br/>欢迎来到危化品全生命周期管理平台</view>
+ </view>
+ <view>
+ <u-form :model="form" ref="uForm" class="form" >
+ <u-form-item style="width: 80%;"><u-input v-model="form.username" :class="{'isFocused': userFocused}" placeholder="请输入用户名" @focus="focusUser"/></u-form-item>
+ <u-form-item style="margin-top: 10px;width: 80%;" >
+ <u-input v-model="form.password" :class="{'isFocused': codeFocused}" :password="isPwd" placeholder="请输入密码" @focus="focusCode">
+ <template slot="suffix">
+ <u-icon :name="isPwd?'eye':'eye-off'" color="#999" size="20" @click="isPwd = !isPwd"></u-icon>
+ </template>
+ </u-input>
+ </u-form-item>
+ <u-form-item style="margin-top: 10px;width: 80%;">
+ <u-button class="loginBtn" :loading="isLogining" style="width: 100%;height: 56px;border-radius: 28px" @click="Login" type="primary">登录</u-button>
+ </u-form-item>
+ </u-form>
+ </view>
+ </view>
+ <view class="footer">
+ 当前版本：1.2
+ </view>
</view>
</template>
<script>
- import {login} from '../../api/index.js';
+ import {login,getLastApp} from '../../api/index.js';
import store from '@/store/index.js'
+ import VUE_APP_BASE_URL from '../../common/constant.js'
+ import loginTop from '../../static/loginBg.png'
+ import loginPic from '../../static/loginPic.png'
export default {
data() {
return {
+ loginTop: loginTop,
+ loginPic: loginPic,
+ userFocused: false,
+ codeFocused: false,
form: {
- name: '',
- pwd: ''
+ username: '',
+ password: '',
+ code: '',
+ uuid: ''
},
- type: ''
+ isPwd: true,
+ type: '',
+ isLogining: false
}
},
onShow() {
- uni.clearStorageSync();
- uni.clearStorage();
+ if(uni.getStorageSync('name') && uni.getStorageSync('pwd')){
+ }else{
+ uni.clearStorageSync();
+ uni.clearStorage();
+ }
+ },
+ onLoad() {
},
methods: {
+ base64Encode(str) {
+ return btoa(unescape(encodeURIComponent(str)));
+ },
Login(){
- login(this.form).then(res => {
- console.log("res",res)
- if (res.code === 100) {
- uni.setStorageSync("tk", res.data.tk);
- uni.setStorageSync("uid",res.data.uid);
+ if(this.form.username == ''){
+ uni.showToast({
+ title: '请输入用户名',
+ duration: 1000
+ })
+ return
+ }
+ if(this.form.password == ''){
+ uni.showToast({
+ title: '请输入密码',
+ duration: 1000
+ })
+ return
+ }
+ this.isLogining = true;
+ // this.form.password = this.base64Encode(this.form.password)
+ const {username,password,code,uuid} = this.form
+ const data = {username,password,code,uuid}
+ data.password = this.base64Encode(data.password)
+ uni.removeStorageSync('tk');
+ login(data).then(res => {
+ if (res.code === 200) {
+ this.isLogining = false;
+ //登录成功后
+ //设置别名
+ // jpushModule.setAlias({
+ // 'alias': this.phone,
+ // 'sequence': 1
+ // })
+ uni.setStorageSync("name", this.form.username);
+ uni.setStorageSync("pwd", this.form.password);
+ uni.setStorageSync("tk", res.data.token);
+ uni.setStorageSync("uid",res.data.id);
uni.setStorageSync('user', res.data);
- uni.setStorageSync('roleName', res.data.role.roleName);
- if(res.data.role.roleName == '工作人员'){
- this.$store.commit('setRoleId', 'user_other');
- uni.switchTab({
- url: '/pages/tabBar/notice/notice'
- });
- }else if (res.data.role.roleName == '管理员'){
- this.$store.commit('setRoleId', '');
- uni.showToast({
- icon: "none",
- title: '管理员请使用平台登录'
- });
- }else{
+ // uni.setStorageSync('unittype',res.data.unittype);
+ // uni.setStorageSync('roleName', res.data.role.roleName);
+ // if(res.data.role.roleName == '工作人员'){
+ // this.$store.commit('setRoleId', 'user_other');
+ // uni.switchTab({
+ // url: '/pages/tabBar/notice/notice'
+ // });
+ // }else if (res.data.role.roleName == '管理员'){
+ // this.$store.commit('setRoleId', '');
+ // uni.showToast({
+ // icon: "none",
+ // title: '管理员请使用平台登录'
+ // });
+ // }else{
this.$store.commit('setRoleId', 'user_leader');
uni.switchTab({
- url: '/pages/tabBar/examine/examine'
- });
- }
+ url: '/pages/tabBar/firstPage/firstPage'
+ })
+ // }
+ }else{
+ uni.showToast({
+ icon: "none",
+ title: res.message
+ });
+ this.form.password = '';
+ this.isLogining = false;
}
}).catch(err=>{
+ this.form.password = '';
+ this.isLogining = false;
})
},
+
+
+ focusUser(){
+ this.userFocused = true
+ this.codeFocused = false
+ },
+ focusCode(){
+ this.codeFocused = true
+ this.userFocused = false
+ }
}
}
</script>
-<style>
+<style scoped lang="scss">
.box{
width: 100%;
height: 100vh;
- background: url('../../static/bg.jpeg') no-repeat;
- background-size: 100% 100%;
- background-attachment: fixed;/* 不设置的话页面滑动时，背景会不铺满*/
+ background: #f5f5f5;
display: flex;
flex-direction: column;
}
-.titleFirst{
- text-align: center;
- font-size: 18px;
- color:#fff;
+
+.topContainer {
+ position: relative; /* 新增容器，并设置相对定位 */
+ width: 100%;
}
+
+.topImg{
+ width: 100%;
+}
+.topPic{
+ width: 80%;
+ position: absolute;
+ top: 50%;
+ left: 50%;
+ transform: translate(-50%, -50%);
+ animation: float 3s ease-in-out infinite;
+}
+
+@keyframes float {
+ 0%, 100% {
+ transform: translate(-50%, -50%)
+ }
+ 50% {
+ transform: translate(-50%, calc(-50% + 15rpx))
+ }
+}
+
+.main{
+ width: 100%;
+ margin-top: 24rpx;
+ display: flex;
+ flex-direction: column;
+ justify-content: left;
+}
+
+.header {
+ display: flex;
+ flex-direction: column;
+ align-items: center;
+ justify-content: center;
+}
+.footer{
+ width: 100%;
+ position: fixed;
+ bottom: 24rpx;
+ text-align: center;
+ font-size: 22rpx;
+ color: #999;
+}
+.titleFirst{
+ width: 80%;
+ font-size: 34rpx;
+ line-height: 1.5;
+ font-weight: bold;
+ letter-spacing: 2px;
+ color: #333;
+}
+
.titleSecond{
text-align: center;
font-size: 19px;
- color:#fff;
+ color: #fff;
margin-top: 10px;
}
-.header {
+.form{
+ width: 100%;
display: flex;
flex-direction: column;
align-items: center;
- justify-content: center;
- padding-top:100px;
- text-shadow:0 0 1px #000;
+ margin-top: 40rpx;
}
-.form{
- width: 80%;
- margin: 100px auto 0px;
-
+
+.u-input{
+ border-color: #f5f5f5 !important;
+ border-radius: 99px;
+ background: #f5f5f5;
+ padding: 15px 20px !important;
+ box-shadow: 0px -6px 10px rgba(255, 255, 255, 1), 0px 4px 15px rgba(0, 0, 0, 0.1)!important;
+ transition: box-shadow .1s ease !important;
+
+ &:active{
+ box-shadow: 0px -6px 10px rgba(255, 255, 255, 1), 0px 4px 15px rgba(0, 0, 0, 0.1),0px 3px 6px rgba(0, 0, 0, 0.1) inset !important;
+ }
}
+
+.isFocused{
+ background: #fff;
+ border-width: 2px !important;
+ border-color: #fff !important;
+ box-shadow: 0px -6px 10px rgba(255, 255, 255, 1), 0px 4px 15px rgba(0, 0, 0, 0.1),0px 3px 6px rgba(0, 0, 0, 0.1) inset !important;
+}
+
.loginPsw{
margin-bottom: 20px;
display: flex;
justify-content: space-between;
}
+
+.loginBtn{
+ border: 2px solid rgba(255,255,255,.8);
+ letter-spacing: 10px;
+ box-shadow: 0 2px 4px rgba(0,0,0,.2);
+ background-image: linear-gradient(#41a2ff,#0f7ff9);
+ transition: box-shadow .15s ease !important;
+ font-size: 30rpx;
+}
+
+.loginBtn:active{
+ box-shadow: 0 2px 4px rgba(0,0,0,0);
+ background-image: linear-gradient(#0f7ff9,#41a2ff);
+}
+
+
</style>
--
Gitblit v1.9.2