longjiangAiEdu/src/views/SignOn.vue

<template>
    <div class="signOn">
        <div class="signOnContent">
            <div class="signOnContentHeader">
                <div class="signOnContentHeader_follt">
                    <div class="signOnContentHeaderTitle">新课标试题网</div>
                    <div class="signOnContentHeaderLine"></div>
                    <div class="signOnContentHeaderDesc">
                        汇聚K12全学科教学资源，覆盖课前预习、课中互动、课后巩固全场景，地域专版，训练精准，赋能师生高效教与学。
                    </div>
                </div>
            </div>
            <div class="signOnContentBody">
                <div v-for="(item, index) in sysInfo" :key="index" class="system-cards" @click="goToSystem(item)"
                    :style="{ backgroundImage: 'url(' + item.image + ')' }">
                    <div class="card-content">
                        <div class="card-content-title">{{ item.appName }}</div>
                        <p>{{ item.description }}</p>
                        <button class="experience-btn">立即体验</button>
                    </div>
                    <div class="card-image">
                        <!-- 图标占位区域 -->
                    </div>
                </div>
            </div>
        </div>
    </div>
</template>

<script>
import { getInfo, getToken } from '@/api/sigon'
export default {
    data() {
        return {
            sysInfo: [],
        };
    },
    created() {
        this.getInfo()
    },
    methods: {
        async getInfo() {
            let getUserInfo = await getInfo()
            if (getUserInfo.ret == 0) {
                this.sysInfo = getUserInfo.data
                this.sysInfo = this.sysInfo.map(item => {
                    if (item.appId == "C0001") {
                        return {
                            ...item,
                            image: require("../assets/singleSignOn/resMgrSysBkg.png")
                        }
                    }
                    else if (item.appId == "C0002") {
                        return {
                            ...item,
                            image: require("../assets/singleSignOn/examMgmtSBgk.png")
                        }
                    }
                    else if (item.appId == "C0003") {
                        return {
                            ...item,
                            image: require("../assets/singleSignOn/onlineMarkingBgk.png")
                        }
                    }
                    return item
                })
                sessionStorage.setItem("getInfo", JSON.stringify(this.sysInfo));
            }
        },
        async goToSystem(row) {
            console.log(`即将进入===============》`, row)
            let dataParmas = {
                // sunhj627
                account: sessionStorage.getItem("getInfoName"),
                "appId": row.appId
            }
            let goToken = await getToken(dataParmas)
            if (goToken.ret == 0) {
                // 从goToken中获取accessToken
                const accessToken = goToken && goToken.accessToken ? goToken.accessToken : '';

                if (row.platformUrl) {
                    try {
                        let targetUrl = row.platformUrl.trim();

                        // 检查URL是否包含协议，如果没有则添加
                        if (!targetUrl.startsWith('http://') && !targetUrl.startsWith('https://')) {
                            // 如果URL本身就是完整域名，添加https协议
                            if (targetUrl.includes('.')) {
                                targetUrl = 'https://' + targetUrl;
                            } else {
                                // 否则，可能是相对路径或不完整URL
                                console.warn('URL格式可能不完整:', targetUrl);
                            }
                        }

                        // 构建带accessToken的URL
                        if (accessToken) {
                            // 检查URL是否已有查询参数
                            const hasQueryParams = targetUrl.includes('?');
                            targetUrl += hasQueryParams ? '&' : '?';
                            targetUrl += 'accessToken=' + encodeURIComponent(accessToken);
                        }
                        console.log(targetUrl, 'targetUrl')
                        // 跳转到系统页面
                        window.location.href = targetUrl;
                    } catch (error) {
                        console.error('URL构建失败:', error);
                        this.$message.error('无法跳转到目标系统，请联系管理员');
                    }
                } else {
                    console.error('平台URL不存在');
                    this.$message.error('平台URL不存在');
                }
            }
        }
    },

};
</script>

<style scoped lang="scss">
.signOn {
    width: 100%;
    height: 100%;
    background: url("../assets/singleSignOn/bj.png");
    background-size: cover;

    .signOnContent {
        width: 100%;
        height: 100%;

        .signOnContentHeader {
            width: 100%;
            height: 50%;
            text-align: center;
            // border-bottom: 1px solid #326eff;
            // 内容垂直居中
            display: flex;
            align-items: end;
            justify-content: center;

            .signOnContentHeader_follt {
                margin-bottom: 5%;
                width: 44%;

                .signOnContentHeaderTitle {
                    color: #326eff;
                    font-size: 55px;
                    font-weight: bold;
                    position: relative;
                }

                .signOnContentHeaderLine {
                    width: 100px;
                    height: 7px;
                    background: #326eff;
                    margin: 10px auto 40px;
                }

                .signOnContentHeaderDesc {
                    font-size: 20px;
                    color: #333333;
                    margin-bottom: 20px;
                    text-align: center;
                    font-weight: 400;
                }
            }
        }

        .signOnContentBody {
            width: 100%;
            // height: 50%;
            display: flex;
            justify-content: center;
            align-items: center;
            gap: 30px;
            // padding: 50px;

            .system-cards {
                display: flex;
                height: 240px;
                backdrop-filter: blur(10px);
                border-radius: 15px;
                padding: 30px;
                text-align: left;
                transition: transform 0.3s, box-shadow 0.3s;
                cursor: pointer;
                box-shadow: 0 8px 20px rgba(0, 0, 0, 0.1);
                background-size: 100% 100%;
                background-repeat: no-repeat;
                width: 400px;
                position: relative;
                overflow: hidden;
                align-items: center;
                justify-content: space-between;

                .card-content {
                    flex: 1;
                    z-index: 1;
                    padding-right: 20px;
                }

                .card-image {
                    flex-shrink: 0;
                    width: 120px;
                    height: 120px;
                    display: flex;
                    align-items: center;
                    justify-content: center;
                }

                .card-content-title {
                    font-size: 24px;
                    margin-bottom: 15px;
                    font-weight: 800;
                    color: #333;
                }

                p {
                    font-size: 16px;
                    margin-bottom: 20px;
                    color: #666;
                    line-height: 1.5;
                }

                .experience-btn {
                    background-color: #326eff;
                    color: white;
                    border: none;
                    padding: 8px 24px;
                    border-radius: 25px 4px;
                    font-size: 16px;
                    cursor: pointer;
                    transition: background-color 0.3s;

                    &:hover {
                        background-color: #2558d1;
                    }
                }
            }
        }
    }
}
</style>