From 53dc2bac460d2ff210aa9523717753ae1fd2c159 Mon Sep 17 00:00:00 2001
From: Liuyi <candymxq888@outlook.com>
Date: 星期二, 26 十一月 2024 17:27:44 +0800
Subject: [PATCH] 添加运维端首页
---
pages/login/index.vue | 475 ++++++++++++++++++++++++++++++----------------------------
1 files changed, 246 insertions(+), 229 deletions(-)
diff --git a/pages/login/index.vue b/pages/login/index.vue
index 6c16648..80a0138 100644
--- a/pages/login/index.vue
+++ b/pages/login/index.vue
@@ -1,269 +1,286 @@
-
<script setup>
- import { onMounted, ref } from "vue"
- // 微信授权登录相关
- let popupRef = ref(null)
- const login = () =>{
- uni.navigateTo({
- url:"/pages/index/index"
+ import { wxLoginApi,adminLoginApi } from '../../api/index.js'
+ import { onMounted,ref } from 'vue'
+ import { BASE_URL } from '../../config/baseUrl.js';
+ const baseUrl = ref(BASE_URL)
+
+ const loginType = ref(1) //用户登录选项，1：微信登录，0：管理员登录(账号密码)
+ function changeLoginType(){
+ loginType.value = loginType.value == 1 ? 0 : ( loginType.value == 0 ? 1 : '')
+ // uni.showToast({
+ // title:'该功能正在升级中',
+ // icon:'none'
+ // })
+ }
+ //进入页面判断是否存在openid，存在直接跳转首页
+ onMounted(() =>{
+ if(uni.getStorageSync('openId') && uni.getStorageSync('token')){
+ console.log('存在openId，进入首页')
+ uni.redirectTo({
+ url:'/pages/index/index'
+ })
+ }
+ })
+ //用户点击微信登录默认授权
+ function wxLogin(){
+ // uni.removeStorageSync('openId');
+ if(!uni.getStorageSync('openId') || !uni.getStorageSync('token')){
+ wx.login({
+ success:async (res1)=>{
+ //存储微信登录的code,调用后端接口传递code参数，返回openid(也就是userId)存储到本地，通过判断本地是否存在openId，存在表示已登录
+ uni.setStorageSync('code',res1.code)
+ await wxLoginApi({code:res1.code}).then((res2) =>{
+ console.log('微信登录响应',res2)
+ if(res2.code == 200){
+ uni.redirectTo({
+ url:'/pages/index/index'
+ })
+ uni.setStorageSync('openId',res2.data.userId)
+ uni.setStorageSync('token',res2.data.token)
+ }else{
+ uni.showToast({
+ title:'登录失败',
+ icon:'none'
+ })
+ }
+ })
+ },
+ fail:(e) =>{
+ uni.showToast({
+ title: '微信登录失败，请退出重试！',
+ duration: 2000,
+ icon:'fail'
+ });
+ }
+ })
+ }
+ }
+ //管理员登录
+ const form = ref({userName:'',password:''})
+ const pwdType = ref('password')
+ function changePwdType(str){
+ pwdType.value = str == 'pwd' ? 'text' : ( str == 'text' ? 'password' : 'text')
+ }
+ async function adminLogin(){
+ // uni.redirectTo({
+ // url:'/pages/adminPlatform/home'
+ // })
+
+ await adminLoginApi(form.value).then((res) =>{
+ console.log('管理员登录响应',res)
+ if(res.code == 200){
+ uni.setStorageSync('maintainId',JSON.stringify(res.data.id))
+ uni.setStorageSync('token',res.data.token)
+ console.log()
+ uni.redirectTo({
+ url:'/pagesAdmin/adminPlatform/home'
+ })
+ }
})
- console.log('login1')
- }
- const wxLoginPopup = () =>{
- popupRef.value.open('bottom')
- }
- const wxLoginFn = () =>{
- console.log('login2')
- popupRef.value.close('bottom')
}
</script>
<template>
<view class="container">
<view class="content">
- <view class="title">
- <view class= 'text1'>欢迎登录</view>
- <view class= 'text2'>Welcome to login</view>
- </view>
- <view class="form">
- <view class='form-input'><input type="text" placeholder="输入账号"></input></view>
- <view class="form-input"><input password type="text" placeholder="输入密码"></input></view>
- </view>
- <view class="login-btn">
- <button @click = login()>登录</button>
- </view>
- <view class="bottom">
- <view class="divide">
- <view class="line"></view>
- <view class="divide-text">第三方账号登录</view>
- <view class="line"></view>
- </view>
- <view class="other-login">
- <image src="../../static/images/login/wechat.png" alt="" @click="wxLoginPopup()"></image>
+ <view class="top">
+ <image class="top-bg" :src="baseUrl + '/upload' + '/qingYuan/images/20241126/2f56a2a7ecfd2544dec5978d2687383e.png'" mode="widthFix"></image>
+ <view class="top--title">
+ <image class="logo" src="../../static/images/login/logo.png "></image>
+ <view class="text">清源直饮水运维平台</view>
</view>
</view>
- </view>
- <!-- 微信授权弹窗 -->
- <uni-popup ref="popupRef" background-color="#fff">
- <view class="popup-content">
- <text class="popup-title">微信登录</text>
- <view class="hr"></view>
- <view class="img-box"><img src="../../static/images/login/logo.png" alt="" class="img"/></view>
- <view class="info-box">
- <view class="info-text1">青源直饮水平台申请获取以下权限:</view>
- <view class="hr2"></view>
- <view class="info-text2">· 获得你的公开信息（昵称、头像、地区及性别)</view>
- <view class="button-box">
- <button class="button1" @click="popupRef.close('bottom')">取消</button>
- <button class="button2" @click="wxLoginFn()">确定</button>
+ <view class="login-text">
+ <text class="text1">欢迎登录</text>
+ <text class="text2">Welcome to login</text>
+ </view>
+ <view class="login-box">
+ <!-- 微信登录 -->
+ <view v-if="loginType == 1" class="wx-login" @click="wxLogin">
+ <text>————— 微信登录 —————</text>
+ <image class="wx-img" src="../../static/images/login/wx.png"></image>
+ </view>
+ <!-- 账号密码登录 -->
+ <view v-if="loginType == 0" class="admin-login">
+ <view class="login-form">
+ <text class="form-title">账号密码登录</text>
+ <view class="form-box">
+ <view class="input-box">
+ <input class="input" v-model="form.userName" focus placeholder="请输入账号" maxlength="20"/>
+ </view>
+ <view class="input-box">
+ <input class="input" v-model="form.password" placeholder="请输入密码" maxlength="20" :type='pwdType' />
+ <image @click="changePwdType('pwd')" class="eye" v-if="pwdType == 'password'" src="../../static/images/login/close_pwd.png"></image>
+ <image @click="changePwdType('text')" class="eye" v-if="pwdType == 'text'" src="../../static/images/login/open_pwd.png"></image>
+ </view>
+ </view>
+ <view class="login-btn" @click="adminLogin">
+ <view class="btn-text">登 录</view>
+ </view>
</view>
</view>
</view>
- </uni-popup>
+ <view class="switch-btn" @click="changeLoginType">
+ <text v-if="loginType == 0">切换微信登录</text>
+ <text v-if="loginType == 1">切换管理员登录</text>
+ <image class="switch-to" src="../../static/images/login/switchto.svg"></image>
+ </view>
+ </view>
</view>
</template>
-<style lang ="scss">
- page {
- width: 100%;
- height:100%;
- }
+<style lang="scss" scoped>
.container{
+ height:100vh;
width:100%;
- height:100%;
- background-image:url('../../static/images/login/bg2.png');
- background-size: 100%;
- background-repeat: no-repeat;
- position: relative;
- .content{
- position: absolute;
- width:680rpx;
- height:1080rpx;
- top:22%;
- left:calc(50% - 340rpx);
- background-image:url('../../static/images/login/content-bg.png');
- background-repeat: no-repeat;
- background-size: 100%;
- .title{
+ background-size:auto;
+ .content{
+ position: relative;
+ width:100%;
+ height:100%;
+ background: linear-gradient( rgba(227, 243, 255, 1) 0%, rgba(228, 252, 254, 1) 50%,rgba(227, 252, 254, 1) 100%);
+ .top{
width:100%;
- height:180rpx;
display: flex;
+ justify-content: center;
+ align-items: center;
+ height:450rpx;
+ position: relative;
+ z-index:1;
+ // background-size:100% auto;
+ // background-repeat: no-repeat;
+ // background-position:top;
+ .top-bg{
+ width:100%;
+ position: absolute;
+ top:0;
+ }
+ .top--title{
+ display: flex;
+ justify-content: center;
+ align-items: center;
+ z-index:2;
+ .logo{
+ width:80rpx;
+ height:80rpx;
+ margin-right:40rpx;
+ }
+ .text{
+ font-size:50rpx;
+ color:rgba(255, 255, 255, 0.9);
+ letter-spacing:8rpx;
+ }
+ }
+ }
+ .login-text{
+ display: flex;
+ justify-content: center;
+ align-items: center;
flex-direction: column;
- justify-content: flex-start;
- padding: 9% 0 0 13%;
- box-sizing:border-box;
.text1{
- width:250rpx;
- font-weight: 500;
- font-size: 56rpx;
color: #345DB1;
- text-align: left;
- margin-left:14rpx;
- margin-bottom:20rpx;
+ font-size: 56rpx;
}
.text2{
- width:500rpx;
+ font-family: Roboto, Roboto;
font-weight: 400;
font-size: 36rpx;
color: #9AB6DD;
- text-align: left;
+ margin-top:30rpx;
}
- }
- .form{
+ }
+ .login-box{
+ margin-top: 20rpx;
width:100%;
- height:260rpx;
- margin-top: 125rpx;
- /* background-color: #345DB1; */
- box-sizing:border-box;
- display: flex;
- flex-direction: column;
- justify-content: space-between;
- .form-input{
- width:582rpx;
- height:100rpx;
- background-image: url('../../static/images/login/input1.png');
- background-repeat: no-repeat;
- background-size: 100%;
- background-position: center;
+ .wx-login{
display: flex;
+ flex-direction: column;
+ justify-content: center;
align-items: center;
- justify-content:flex-start;
+ font-size:30rpx;
+ color: #88a3c5;
+ margin-top:120rpx;
+ .wx-img{
+ margin-top:50rpx;
+ width: 100rpx;
+ height: 100rpx;
+ border-radius:50%;
+ }
+ }
+ .admin-login{
+ width:75%;
+ height:600rpx;
+ // background: rgba(255,255,255,1);
margin: 0 auto;
- :deep(.uni-input-placeholder ){
- color: #9DC4E8;
- }
- input{
- width:80%;
- margin-left:60rpx;
- font-weight: 400;
- font-size: 32rpx;
- text-align: left;
- color: #2b4e82;
+ padding: 32rpx ;
+ border-radius:20rpx;
+ box-shadow:0 0 10rpx 1rpx rgba(99, 145, 230, 0.3);
+ margin-top:60rpx;
+ .login-form{
+ width:100%;
+ height: 100%;
+ display: flex;
+ flex-direction: column;
+ align-items: center;
+ .form-title{
+ color: #4475b1;
+ font-size:38rpx;
+ letter-spacing: 2rpx;
+ }
+ .form-box{
+ width:100%;
+ display: flex;
+ flex-direction: column;
+ justify-content: center;
+ align-items: center;
+ .input-box{
+ display: flex;
+ justify-content: space-between;
+ align-items: center;
+ border-bottom:2rpx solid rgba(99, 145, 230, 0.7);
+ margin-top:100rpx;
+ height:80rpx;
+ width:85%;
+ .input{
+ width:75%;
+ }
+ .eye{
+ width: 80rpx;
+ height: 40rpx;
+ }
+ }
+ }
+ .login-btn{
+ margin-top:100rpx;
+ display: flex;
+ justify-content: center;
+ .btn-text{
+ width: 160rpx;
+ height: 65rpx;
+ background-color: #4175d5;
+ border-radius: 15rpx;
+ text-align: center;
+ line-height: 65rpx;
+ color: #fff;
+ }
+ }
}
}
}
- .login-btn{
- width:530rpx;
- height:100rpx;
- margin: 80rpx auto 60rpx;
- button{
- background:linear-gradient(to right,#51C9F6,#4E9BFF);
- font-weight: 500;
- font-size: 36rpx;
- color: #FFFFFF;
- border-radius: 20rpx;
- }
- }
- .bottom{
- width:100%;
- height:180rpx;
+ .switch-btn{
+ position: absolute;
display: flex;
- flex-direction: column;
- justify-content: space-between;
+ justify-content: center;
align-items: center;
- .divide{
- box-sizing:border-box;
- width: 100%;
- display:flex;
- justify-content: space-between;
- align-items:center;
- padding:0 85rpx;
- /* background: #446f52; */
- .line{
- width:125rpx;
- height:2rpx;
- background:#959595;
- }
- .divide-text{
- font-weight: 600;
- font-size: 28rpx;
- color: #B9B9B9;
- text-align: center;
- }
- }
- .other-login{
- box-sizing:border-box;
- width:100%;
- height:100rpx;
- /* background: #5d7682; */
- padding:0 90rpx;
- display: flex;
- justify-content:center;
- align-items: center;
- image{
- width:76rpx;
- height:76rpx;
- /* background: #345DB1; */
- }
+ color: #4d77cc;
+ font-size:30rpx;
+ bottom:200rpx;
+ left:50%;
+ transform: translate(-50%);
+ .switch-to{
+ width:28rpx;
+ height: 28rpx;
}
}
- }
- .popup-content {
- height: 560rpx;
- position: relative;
- z-index: 1000;
- .popup-title{
- width: 100%;
- display: block;
- text-align: center;
- margin: 15rpx 0;
- font-weight: 600;
- font-size: 36rpx;
- }
- .hr {
- width: 100%;
- height: 2rpx;
- background: #e2e2e2;
- }
- .img-box {
- width: 65rpx;
- height: 65rpx;
- margin: 40rpx auto 30rpx;
- border: 1rpx solid #e2e2e2;
- border-radius: 50%;
- padding: 15rpx;
- .img{
- width: 100%;
- height: 100%;
- }
- }
- .info-box {
- width: 100%;
- padding: 0 80rpx;
- box-sizing: border-box;
- .hr2{
- width: 100%;
- height: 2rpx;
- background: #e2e2e2;
- margin: 20rpx 0;
- }
- .info-text2{
- font-size: 26rpx;
- color: #767676;
- }
- }
- .button-box{
- display: flex;
- margin-top: 20rpx;
- button{
- width: 230rpx;
- height: 80rpx;
- line-height: 80rpx;
- border: none;
- box-shadow: none;
- margin-top: 30rpx;
- }
- button::after {
- border: none !important;
- }
- .button1{
- background-color: #F0F0F0;
- color: #333333;
- }
- .button2{
- background-color: #06BF5E;
- color: #ffffff;
- }
- }
- }
- }
+ }
+ }
</style>
--
Gitblit v1.9.3