添加运维端首页

Liuyi

2024-11-26 53dc2bac460d2ff210aa9523717753ae1fd2c159

 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>—————&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>
      </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>