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 | 286 +++++++++++++++++++++++++++++++++++++++++++++++++++++++++
1 files changed, 286 insertions(+), 0 deletions(-)
diff --git a/pages/login/index.vue b/pages/login/index.vue
new file mode 100644
index 0000000..80a0138
--- /dev/null
+++ b/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>————— 微信登录 —————</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>
--
Gitblit v1.9.3