<template>
|
<div class="wx-login-container">
|
<div class="loading-wrapper">
|
<div class="wechat-icon">
|
<svg viewBox="0 0 1024 1024" xmlns="http://www.w3.org/2000/svg">
|
<path d="M717.5 595.8c-15.7 8.3-32.6 13.9-50.4 15.7-12.6 1.3-25.3-0.4-37.6-2.9-19-3.8-36.9-10.8-53.5-20.7-3.6-2.2-7.2-4.4-10.7-6.8-19.5-13.6-36.5-29.9-50.8-49-6.5-8.6-12.1-17.9-16.9-27.5-4.8-9.7-8.3-19.8-10.6-30.3-2.2-10.1-3.2-20.3-3-30.6 0.1-5.3 0.4-10.5 1.1-15.8 1.7-12.6 5.1-24.7 10.1-36.3 6.1-14.1 14.2-27 24.4-38.5 13.9-15.6 30.4-28.1 49.3-37.2 12.9-6.3 26.5-10.6 40.6-12.8 14.1-2.2 28.4-2.2 42.6 0.1 14.2 2.3 27.8 6.7 40.7 13.1 18.9 9.2 35.4 21.7 49.3 37.3 10.2 11.5 18.3 24.5 24.4 38.5 5 11.6 8.4 23.8 10.1 36.3 0.7 5.3 1 10.5 1.1 15.8 0.2 10.3-0.8 20.5-3 30.6-2.3 10.5-5.8 20.6-10.6 30.3-4.8 9.6-10.4 18.9-16.9 27.5-14.3 19.1-31.3 35.4-50.8 49-3.5 2.4-7.1 4.6-10.7 6.8-16.6 9.9-34.5 16.9-53.5 20.7-12.3 2.5-25 4.2-37.6 2.9z" fill="#07C160"/>
|
<path d="M395.6 380.4c0 54.7 26.5 103.5 67.6 134.4-3.6 9.8-7.9 19.2-12.8 28.1-4.9 8.9-10.4 17.4-16.6 25.4-6.2 8-13.1 15.4-20.6 22.2-7.5 6.8-15.7 12.8-24.4 17.9-8.7 5.1-18 9.3-27.6 12.5-9.6 3.2-19.6 5.3-29.8 6.3-10.2 1-20.5 0.9-30.6-0.4-10.1-1.3-20-3.8-29.4-7.4-9.4-3.6-18.3-8.3-26.6-14-8.3-5.7-15.9-12.2-22.7-19.6-6.8-7.4-12.7-15.5-17.6-24.3-4.9-8.8-8.8-18.2-11.5-28-2.7-9.8-4.2-19.9-4.5-30.2-0.3-10.3 0.8-20.5 3.2-30.5 2.4-10 6.1-19.6 10.9-28.7 4.8-9.1 10.7-17.5 17.5-25.2 6.8-7.7 14.5-14.5 22.9-20.4 8.4-5.9 17.5-10.8 27.1-14.6 9.6-3.8 19.7-6.4 30-7.9 10.3-1.5 20.8-1.8 31.2-0.7 10.4 1.1 20.6 3.6 30.3 7.4 9.7 3.8 18.8 8.8 27.1 15 8.3 6.2 15.8 13.4 22.4 21.5 6.6 8.1 12.2 16.9 16.6 26.3 4.4 9.4 7.6 19.3 9.5 29.6z" fill="#07C160"/>
|
</svg>
|
</div>
|
<div class="sub-text">
|
微信授权中
|
<span class="dots">
|
<span class="dot"></span>
|
<span class="dot"></span>
|
<span class="dot"></span>
|
</span>
|
</div>
|
</div>
|
</div>
|
</template>
|
|
<script>
|
import { tokenUtils } from '@/utils/axios.js';
|
import { useLoginStore } from '@/stores/login.js'
|
import { storeToRefs } from 'pinia';
|
export default {
|
setup() {
|
const { lastRouteInfo } = storeToRefs(useLoginStore())
|
return { lastRouteInfo }
|
},
|
data() {
|
return {
|
|
}
|
},
|
watch() {
|
|
},
|
computed: {
|
code() {
|
return this.$route.query.code
|
},
|
state() {
|
return this.$route.query.state
|
}
|
},
|
created() {
|
if (this.code && this.state) {
|
this.authSuccess()
|
} else {
|
this.redirectUrl()
|
}
|
},
|
methods: {
|
redirectUrl() {
|
const params = {
|
targetId: '',
|
redirectUrl: encodeURIComponent(window.location.href),
|
}
|
this.$axios.get('/system/auth/staff/checkin/wx-auth-redirect', { params }).then(res => {
|
if (res.data.code == 0) {
|
window.location.replace(res.data.data)
|
} else {
|
this.$message.error(res.data.msg)
|
}
|
})
|
},
|
authSuccess() {
|
const params = {
|
targetId: '',
|
code: this.code,
|
state: this.state
|
}
|
this.$axios.get('/system/auth/staff/checkin/auth-success/null', { params }).then(res => {
|
if (res.data.code == 0) {
|
const resData = res.data.data || {}
|
if (resData.userId) {
|
tokenUtils.setTokens(resData.accessToken, resData.refreshToken)
|
const path = localStorage.getItem('verify_url')
|
if (path) {
|
this.$router.replace(path)
|
}
|
} else {
|
this.$router.replace({
|
path: '/h5/bind',
|
query: {
|
state: resData.state,
|
openid: resData.openid,
|
code: resData.code
|
}
|
})
|
}
|
} else {
|
this.$message.error(res.data.msg)
|
}
|
})
|
}
|
}
|
}
|
</script>
|
|
<style scoped>
|
.wx-login-container {
|
display: flex;
|
justify-content: center;
|
align-items: center;
|
min-height: 100vh;
|
background: linear-gradient(135deg, #f5f7fa 0%, #c3cfe2 100%);
|
}
|
|
.loading-wrapper {
|
text-align: center;
|
padding: 60px 40px;
|
}
|
|
.wechat-icon {
|
width: 100px;
|
height: 100px;
|
margin: 0 auto 30px;
|
animation: iconPulse 2s ease-in-out infinite;
|
}
|
|
.wechat-icon svg {
|
width: 100%;
|
height: 100%;
|
filter: drop-shadow(0 8px 16px rgba(7, 193, 96, 0.3));
|
}
|
|
@keyframes iconPulse {
|
0%, 100% {
|
transform: scale(1);
|
}
|
50% {
|
transform: scale(1.1);
|
}
|
}
|
|
.loading-text {
|
font-size: 28px;
|
font-weight: 600;
|
color: #333;
|
margin-bottom: 16px;
|
display: inline-block;
|
}
|
|
.text-item {
|
display: inline-block;
|
opacity: 0;
|
animation: textFadeIn 0.5s ease-out forwards;
|
}
|
|
.text-item:nth-child(1) {
|
animation-delay: 0.2s;
|
}
|
|
.text-item:nth-child(2) {
|
animation-delay: 0.4s;
|
}
|
|
.text-item:nth-child(3) {
|
animation-delay: 0.6s;
|
}
|
|
.text-item:nth-child(4) {
|
animation-delay: 0.8s;
|
}
|
|
@keyframes textFadeIn {
|
from {
|
opacity: 0;
|
transform: translateY(20px);
|
}
|
to {
|
opacity: 1;
|
transform: translateY(0);
|
}
|
}
|
|
.dots {
|
display: inline-block;
|
margin-left: 8px;
|
vertical-align: middle;
|
}
|
|
.dot {
|
display: inline-block;
|
width: 6px;
|
height: 6px;
|
background: #07C160;
|
border-radius: 50%;
|
margin: 0 3px;
|
animation: dotBounce 1.4s ease-in-out infinite both;
|
}
|
|
.dot:nth-child(1) {
|
animation-delay: -0.32s;
|
}
|
|
.dot:nth-child(2) {
|
animation-delay: -0.16s;
|
}
|
|
.dot:nth-child(3) {
|
animation-delay: 0;
|
}
|
|
@keyframes dotBounce {
|
0%, 80%, 100% {
|
transform: scale(0);
|
opacity: 0.5;
|
}
|
40% {
|
transform: scale(1);
|
opacity: 1;
|
}
|
}
|
|
.sub-text {
|
font-size: 18px;
|
color: #999;
|
animation: fadeInOut 2s ease-in-out infinite;
|
}
|
|
@keyframes fadeInOut {
|
0%, 100% {
|
opacity: 0.5;
|
}
|
50% {
|
opacity: 1;
|
}
|
}
|
</style>
|
