<script setup>
|
import {
|
wxLoginApi
|
} from '@/api/index.js'
|
import {
|
onMounted,
|
ref
|
} from 'vue'
|
import {
|
BASE_URL
|
} from '@/config/config.js';
|
const baseUrl = ref(BASE_URL)
|
|
|
//用户点击微信登录默认授权
|
function wxLogin() {
|
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) => {
|
if (res2.code == 200) {
|
uni.redirectTo({
|
url: '/pages/layout/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'
|
});
|
}
|
})
|
}else{
|
uni.redirectTo({
|
url: '/pages/layout/index'
|
})
|
}
|
}
|
</script>
|
|
<template>
|
<view class="container">
|
<view class="content">
|
<!-- 顶部品牌区 -->
|
<view class="brand-section">
|
<image class="logo" src="../../static/images/login/sxwllogo.png" mode="aspectFit"></image>
|
<text class="brand-name">智能物联平台</text>
|
<!-- <text class="brand-subtitle"></text> -->
|
</view>
|
|
<!-- 登录主体 -->
|
<view class="auth-section">
|
<view class="welcome-text">
|
<text class="welcome-ch">欢迎登录</text>
|
<text class="welcome-en">Welcome Back</text>
|
</view>
|
<!-- 微信登录按钮 -->
|
<view class="wx-login-btn" @click="wxLogin">
|
<image class="wx-icon" src="../../static/images/login/wx.png"></image>
|
<text class="btn-text">微信一键登录</text>
|
</view>
|
</view>
|
</view>
|
<!-- 底部装饰 -->
|
<view class="decor-circle circle-1"></view>
|
<view class="decor-circle circle-2"></view>
|
</view>
|
</template>
|
|
<style lang="scss" scoped>
|
.container {
|
height: 100vh;
|
background: linear-gradient(135deg, #4a90e2 0%, #5bc0de 100%);
|
position: relative;
|
overflow: hidden;
|
|
.content {
|
padding: 0 40rpx;
|
position: relative;
|
z-index: 2;
|
}
|
|
/* 品牌标识 */
|
.brand-section {
|
padding-top: 120rpx;
|
text-align: center;
|
|
.logo {
|
width: 160rpx;
|
height: 160rpx;
|
border-radius: 24rpx;
|
box-shadow: 0 10rpx 30rpx rgba(0, 0, 0, 0.1);
|
}
|
|
.brand-name {
|
display: block;
|
font-size: 48rpx;
|
color: #fff;
|
margin: 40rpx 0 16rpx;
|
letter-spacing: 2rpx;
|
font-weight: 500;
|
}
|
|
.brand-subtitle {
|
font-size: 28rpx;
|
color: rgba(255, 255, 255, 0.9);
|
}
|
}
|
|
/* 登录区域 */
|
.auth-section {
|
margin-top: 120rpx;
|
background: rgba(255, 255, 255, 0.95);
|
border-radius: 40rpx;
|
padding: 60rpx 40rpx;
|
box-shadow: 0 20rpx 60rpx rgba(0, 0, 0, 0.1);
|
|
.welcome-text {
|
text-align: center;
|
margin-bottom: 80rpx;
|
|
.welcome-ch {
|
display: block;
|
font-size: 44rpx;
|
color: #333;
|
font-weight: 500;
|
margin-bottom: 16rpx;
|
}
|
|
.welcome-en {
|
font-size: 28rpx;
|
color: #888;
|
letter-spacing: 2rpx;
|
}
|
}
|
|
/* 微信登录按钮 */
|
.wx-login-btn {
|
background: #07c160;
|
height: 96rpx;
|
border-radius: 48rpx;
|
display: flex;
|
align-items: center;
|
justify-content: center;
|
transition: all 0.2s;
|
|
&:active {
|
transform: scale(0.98);
|
opacity: 0.9;
|
}
|
|
.wx-icon {
|
width: 48rpx;
|
height: 48rpx;
|
margin-right: 20rpx;
|
}
|
|
.btn-text {
|
color: #fff;
|
font-size: 34rpx;
|
font-weight: 500;
|
}
|
}
|
|
/* 分隔线 */
|
.divider {
|
margin: 60rpx 0;
|
display: flex;
|
align-items: center;
|
|
.divider-line {
|
flex: 1;
|
height: 1px;
|
background: #eee;
|
}
|
|
.divider-text {
|
padding: 0 30rpx;
|
color: #999;
|
font-size: 26rpx;
|
}
|
}
|
}
|
}
|
</style>
|
