gx公众号初始化

chenyc

2025-08-26 f87db8007e5544e0f2eda657d09fc35a175428a9

gx公众号初始化

 src/router/index.ts

@@ -8,6 +8,7 @@
import { Session } from '@/utils/storage'

const routes: Array<RouteRecordRaw> = [
    { path: '/HomeLoading', name: 'HomeLoading', component: () => import('views/HomeLoading/index.vue'),meta:{title:'胜透服务'}},
    { path: '/login', name: 'login', component: () => import('views/login/index.vue'),meta:{title:'登录'}},
    { path: '/', name: 'Home', component: () => import('views/home/index.vue'),meta:{title:'首页'}},
    { path: '/my', name: 'myMine', component: () => import('views/myMine/index.vue'),meta:{title:'我的'}},

 src/views/HomeLoading/index.vue

New file
@@ -0,0 +1,207 @@
<template>
    <!-- 医疗风全屏加载 -->
    <div v-if="isLoading" class="loading-screen">
        <div class="loading-content">
            <!-- 自定义Logo容器 -->
            <div class="logo-container">
                <img :src="logo" alt="Logo" class="custom-logo">
                <!-- 可选：添加脉冲光环 -->
                <div class="pulse-ring primary"></div>
                <div class="pulse-ring secondary"></div>
            </div>

            <!-- 标题文字 -->
            <p class="loading-text">守护健康 · 加载中</p>
        </div>
    </div>
</template>

  <script setup>
    import { ref, onMounted } from 'vue'
    import {useRoute,useRouter} from 'vue-router'
    import { ajaxGet ,ajaxPost} from '@/utils/axios'
    import { Session } from '@/utils/storage'
    import { Toast } from 'vant'
    import logo from 'assets/logo.png'
    import { userInfoStore } from '@/stores/userInfo'
    const userInfo = userInfoStore()
    const route = useRoute()
    const router=useRouter()
    const isLoading = ref(true)
    const getUserinfo=()=>{
        ajaxPost('/patient/info/getPatientInfo','').then((re:any)=>{
            console.log(re,'得到患者的信息getUserinfo')
            userInfo.setPatient(re)
            router.push('/')
        })
    }
    onMounted(() => {
        const token=Session.get('token')
        if (token && userInfo.info.openid!==''){
            console.log('已经登录了')
            getUserinfo()
            return
        }
        console.log('初始化',route)
        const queryInfo=route.query
        const {code}=queryInfo
        console.log(code)
        if (code){// 得到code换取openid
            ajaxGet('wechat/code',{code}).then((re)=>{
                console.log(re,'获取openid')
                userInfo.setInfo({openid:re.openid,nickname:re.nickname,headimgurl:re.headimgurl})
                const openId = re.openid
                if (openId) { // 检查登录
                    ajaxPost('patient/info/wechatLogin','openId='+openId,config).then((re:any)=>{
                        console.log('openid换的accesstoken=',re)
                        if (re===''){
                            console.log('需要登录')
                            router.push('login')
                        } else {
                            Session.set('token', re)
                            Toast('登录成功')
                            getUserinfo()
                        }
                    })
                }
            })
        }
        else { // 没有code 就重新进入微信url获取code
            const appid = 'wx790bd67db6206070' // 微信APPid
            const local = window.location.href
            window.location.href =
                'https://open.weixin.qq.com/connect/oauth2/authorize?appid=' +
                appid +
                '&redirect_uri=' +
                encodeURIComponent(local) +
                '&response_type=code&scope=snsapi_userinfo&state=STATE#wechat_redirect'
        }

    })
  </script>

  <style scoped>
    /* 医疗风背景 */
    .loading-screen {
        position: fixed;
        top: 0;
        left: 0;
        width: 100vw;
        height: 100vh;
        background: linear-gradient(140deg, #e6f7ff, #f0fcff, #e0f9f1);
        display: flex;
        justify-content: center;
        align-items: center;
        z-index: 9999;
        font-family: "Helvetica Neue", Arial, sans-serif;
    }

    .loading-content {
        text-align: center;
    }

    /* Logo容器 */
    .logo-container {
        position: relative;
        display: inline-block;
    }

    /* 自定义Logo样式 */
    .custom-logo {
        width: 50px; /* 根据实际Logo大小调整 */
        animation: fadeIn 1s ease-in-out;
    }

    /* 脉冲光环（衬托科技感） */
    .pulse-ring {
        position: absolute;
        top: 50%;
        left: 50%;
        width: 80px;
        height: 80px;
        margin-left: -40px;
        margin-top: -40px;
        border-radius: 50%;
        border: 1px solid #00a0e9;
        opacity: 0;
        animation: pulse 2s ease-out infinite;
    }

    .pulse-ring.primary {
        animation-delay: 0s;
    }

    .pulse-ring.secondary {
        animation-delay: 0.6s;
        border-color: #06c;
    }

    @keyframes pulse {
        0% {
            transform: scale(0.8);
            opacity: 0.6;
        }

        50% {
            opacity: 0.2;
        }

        100% {
            transform: scale(1.4);
            opacity: 0;
        }
    }

    /* 加载文字 */
    .loading-text {
        color: #06c;
        font-size: 15px;
        font-weight: 500;
        letter-spacing: 1px;
        line-height: 1.5;
        opacity: 0.9;
        animation: fadeInUp 0.8s ease-out;
        text-shadow: 0 1px 3px rgba(0, 102, 204, 0.1);
        margin-top: 40px;
    }

    @keyframes fadeInUp {
        from {
            opacity: 0;
            transform: translateY(30px);
        }

        to {
            opacity: 1;
            transform: translateY(0);
        }
    }

    /* 主内容区 */
    .main-content {
        min-height: 100vh;
        display: flex;
        flex-direction: column;
        justify-content: center;
        align-items: center;
        padding: 20px;
        text-align: center;
        background-color: #f8f9fa;
        color: #333;
        font-family: "PingFang SC", "Helvetica Neue", Arial, sans-serif;
    }

    .main-content h1 {
        font-size: 22px;
        color: #06c;
        margin-bottom: 12px;
        font-weight: 600;
    }

    .main-content p {
        color: #666;
        font-size: 15px;
        line-height: 1.6;
        max-width: 300px;
    }
  </style>