添加运维端首页

Liuyi

2024-11-26 53dc2bac460d2ff210aa9523717753ae1fd2c159

 pages/login/index.vue

对比新文件
@@ -0,0 +1,286 @@
<script setup>
   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'
            })
         }
      })
   }
</script>
<template>
   <view class="container">
      <view class="content">
         <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 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>—————&nbsp;&nbsp;微信登录&nbsp;&nbsp;—————</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">登&nbsp;&nbsp;录</view>
                  </view>
               </view>
            </view>
         </view>
         <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" scoped>
   .container{
      height:100vh;
      width:100%;
      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%;
            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;
            .text1{
               color: #345DB1;
               font-size: 56rpx;
            }
            .text2{
               font-family: Roboto, Roboto;
               font-weight: 400;
               font-size: 36rpx;
               color: #9AB6DD;
               margin-top:30rpx;
            }
         }
         .login-box{
            margin-top: 20rpx;
            width:100%;
            .wx-login{
               display: flex;
               flex-direction: column;
               justify-content: center;
               align-items: center;
               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;
               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;
                     }
                  }
               }
            }
         }
         .switch-btn{
            position: absolute;
            display: flex;
            justify-content: center;
            align-items: center;
            color: #4d77cc;
            font-size:30rpx;
            bottom:200rpx;
            left:50%;
            transform: translate(-50%);
            .switch-to{
               width:28rpx;
               height: 28rpx;
            }
         }
      }
   }  
</style>