<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>————— 微信登录 —————</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>
|
<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>
|
