SmartCommunity/login/src/views/NewNav/index.vue

<template>
    <div class="nav-wrap">
        <div class="top">
            <div class="top_png">
                <p>智慧社区管理平台</p>
            </div>
            <div class="lfet-right">
                <div class="logo"></div>
                <div style="display: flex">
                    <div class="tenantName" @click="toggleTenant">{{ tenantName }}</div>
                    <div class="logout" @click="logout"></div>
                </div>
            </div>
        </div>
        <select-tenant :selectDta="selectDta" v-show="isSelectTenant"></select-tenant>
        <div class="bottom_png"><span></span></div>
        <div class="bg-earth" v-show="!isSelectTenant">
            <div class="nav-content">
                <template v-for="(item, index) in navList">
                    <div
                        :key="index"
                        @click="goPage(item.linkPath, item.isOwner, item.id, item.appId)"
                        :class="[item.isOwner ? '' : 'unOwner', 'item']"
                    >
                        <span class="left-label"></span>
                        <div class="item-cenText">
                            <img class="img" :src="envConfig.baseImgApi + item.menuImage" :onerror="defaultImgSrc" />
                            <img class="imghover" :src="envConfig.baseImgApi + item.menuDynamicImage" :onerror="defaultImgSrc" />
                            <div class="contents">
                                <div class="title">{{ item.name }}</div>
                                <div class="subtitle">{{ item.englishName }}</div>
                            </div>
                        </div>
                        <div class="right-img"></div>
                    </div>
                </template>
            </div>
        </div>
    </div>
</template>

<script>
import envConfig from '@/config';
import SelectTenant from '@/components/ToggleTenant';
export default {
    components: {
        SelectTenant
    },
    data() {
        return {
            envConfig: envConfig,
            navList: [],
            logo: '',
            menuImage: '',
            defaultImgSrc: 'this.src="' + require('@/assets/img/nav/bengzhanguanli1.png') + '"',
            selectDta: [],
            tenantName: null,
            isSelectTenant: false
        };
    },
    methods: {
        logout() {
            var access_token = localStorage.getItem('SC_token');
            this.$http.postForm('/user/logout', { access_token: access_token }).then(({ status, data, msg }) => {
                if (0 === status) {
                    this.$message({
                        type: 'success',
                        message: '您已退出登录'
                    });
                    localStorage.removeItem('SC_token');
                    localStorage.removeItem('menupath');
                    localStorage.removeItem('ms_username');
                    this.$store.commit('setloginInfo', '');
                    // sessionStorage.removeItem('tabs');
                    sessionStorage.clear();
                    this.$router.push({
                        path: '/login'
                    });
                } else {
                    this.$message.error(msg);
                }
            });
        },
        //页面跳转用，根据appid跳转到不同的界面，appid后端提供
        goPage(url, isOwner, id, appId) {
            if (!isOwner) {
                return;
            }
            if (url.indexOf('/IOT') != '-1') {
                this.$http.get('/user/getRangeCode', { appId: '1001' }).then(({ status, data, msg }) => {
                    if (0 === status) {
                        window.open(`${url}?code=${data}`);
                    } else {
                        this.$message.error(msg);
                    }
                });
            } else if (appId == 1007) {
                this.$http.get('/sc-community/assets/community/getLoginParkUrl').then(({ status, data, msg }) => {
                    if (0 === status) {
                        window.open(`${data}`);
                    } else {
                        this.$message.error(msg);
                    }
                });
            } else if (Number(appId) < 0) {
                window.open(url);
            } else {
                window.open(url);
            }
        },
        getNavList() {
            this.$http.get('/sc-user-center/user/findUserFirstMenu').then(({ status, data, msg }) => {
                if (0 === status) {
                    if (data && data.length > 10) {
                        let newdata = data.slice(0, 10);
                        this.navList = newdata;
                    } else {
                        this.navList = data;
                    }
                }
            });
        },
        toggleTenant() {
            if (this.selectDta.length > 1) {
                this.isSelectTenant = !this.isSelectTenant;
            }
        },
        selectTenant(item) {
            if (this.$route.query.tenantId == item.tenantId) {
                this.toggleTenant();
                return;
            }
            window.sessionStorage.setItem('loginJson', JSON.stringify(this.selectDta));
            window.sessionStorage.setItem('loginJsonActive', JSON.stringify(item));
            this.getlogin();
        },
        getlogin() {
            this.isSelectTenant = false;
            this.selectDta = JSON.parse(window.sessionStorage.getItem('loginJson'));
            let { phone, tenantId } = JSON.parse(window.sessionStorage.getItem('loginJsonActive'));
            this.selectDta.map((item, index) => {
                if (item.tenantId == tenantId) {
                    this.tenantName = item.tenantName;
                    return;
                }
            });

            this.$http
                .postForm('/user/login', { mobile: phone, tenatId: tenantId, token: localStorage.getItem('SC_token') })
                .then(({ status, data, msg }) => {
                    localStorage.setItem('customerID', data.customerId);
                    if (data.enableState === '0') {
                        if (this.tenantName.length > 1) {
                            this.$alert('该租户已被停用，请选择其他租户节点', '', {
                                confirmButtonText: '确定',
                                showClose: false
                            })
                                .then(() => {
                                    this.toggleTenant();
                                })
                                .catch(() => {});
                            return;
                        } else {
                            this.$alert('你的账号已被停用,如有问题请联系管理员', '', {
                                confirmButtonText: '确定',
                                showClose: false
                            })
                                .then(() => {
                                    window.open('/login/', '_self');
                                    window.relogin = false;
                                })
                                .catch(() => {});
                            return;
                        }
                    }
                    this.logo = data.logo;
                    this.getNavList();
                });
        }
    },
    created() {
        this.getlogin();
    }
};
</script>

<style lang="scss" scoped>
@import './style.scss';
// .nav-wrap {
//     width: 100%;
//     height: 100%;
//     // min-width: 1500px;
//     background: linear-gradient(0deg, #000000 0%, #132037 100%);
//     overflow: hidden;
//     position: relative;
//     .top {
//         position: relative;
//         z-index: 101;
//         padding-top: 67px;
//         .lfet-right {
//             padding: 0 100px 0 100px;
//             display: flex;
//             justify-content: space-between;
//             text-align: center;
//             position: relative;
//             top: -25px;
//             .tenantName {
//                 color: RGBA(254, 254, 254, 1);
//                 padding: 0 20px;
//                 height: 49px;
//                 line-height: 49px;
//                 font-size: 20px;
//                 box-sizing: border-box;
//                 border: 1px solid RGBA(71, 81, 98, 1);
//                 border-radius: 10px;
//                 margin-right: 20px;
//                 cursor: pointer;
//             }
//         }
//     }
//     .logo {
//         width: 120px;
//         height: 36px;
//         background: url(../../assets/img/nav/logo.png);
//         background-size: 100% 100%;
//         z-index: 11;
//     }
//     .logout {
//         width: 49px;
//         height: 49px;
//         background: url(../../assets/img/btn_switch.png);
//         background-size: 100% 100%;
//         z-index: 11;
//     }

//     .top_png {
//         // position: absolute;
//         // z-index: 100;
//         // top: 67px;
//         // left: 50%;
//         width: 100%;
//         width: 1458px;
//         margin: auto;
//         height: 58px;
//         // transform: translateX(-50%);
//         animation-name: opacityAni;
//         background: url(../../assets/img/nav/img_toubu.png);
//         background-size: cover;
//         opacity: 0;
//         animation-delay: 0.668s;
//         animation-duration: 0.834s;
//         animation-fill-mode: forwards;
//         p {
//             font-size: 24px;
//             font-family: PingFang SC;
//             font-weight: 600;
//             color: #ffffff;
//             background: linear-gradient(1deg, #a8c4f5 0%, #ffffff 100%);
//             -webkit-background-clip: text;
//             -webkit-text-fill-color: transparent;
//             position: relative;
//             top: -10px;
//             text-align: center;
//         }
//     }
//     .bottom_png {
//         position: absolute;
//         z-index: 100;
//         bottom: 0;
//         width: 100%;
//         height: 83px;
//         height: 4.3vw;
//         background: #010305;
//         & > span {
//             display: block;
//             width: 100%;
//             height: 83px;
//             height: 4.3vw;
//             animation-name: opacityAni;
//             background: url(../../assets/img/nav/img_dibu.png);
//             background-size: cover;
//             opacity: 0;
//             animation-delay: 0.668s;
//             animation-duration: 0.834s;
//             animation-fill-mode: forwards;
//         }
//     }
//     .bg-earth {
//         position: absolute;
//         width: 1500px;
//         width: 1920 / 1500;
//         height: 600px;
//         top: 50%;
//         left: 50%;
//         transform: translate(-50%, -50%);
//         overflow-y: auto;

//         &::-webkit-scrollbar {
//             // width: 5px;
//             display: none;
//         }
//         // &::-webkit-scrollbar-track {
//         //     background-color: white;
//         //     border-radius: 10px;
//         // }
//         // &::-webkit-scrollbar-thumb {
//         //     border-radius: 10px;
//         //     background-image: -webkit-gradient(linear, left bottom, left top, color-stop(0.6, RGBA(9, 14, 25, 1)));
//         // }
//     }
//     .nav-title {
//         position: absolute;
//         display: flex;
//         justify-content: center;
//         align-items: center;
//         flex-direction: column;
//         width: 381px;
//         height: 153px;
//         img {
//             width: 150px;
//             height: 40px;
//         }
//         .dot_icon {
//             display: flex;
//             justify-content: center;
//             align-items: center;
//             flex-direction: row;
//             margin-top: 10px;
//             p {
//                 font-size: 36px;
//                 font-weight: 600;
//                 font-family: PingFang SC;
//                 color: #ffffff;
//                 // margin-top: 10px;
//                 text-align: center;
//             }
//             .icon-blue-rect {
//                 display: inline-block;
//                 margin: 0 10px;
//                 width: 6px;
//                 height: 6px;
//                 background: linear-gradient(-80deg, #2a68e6 0%, #2887f2 100%);
//                 border-radius: 3px;
//                 vertical-align: super;
//             }
//         }
//     }
//     .nav-content {
//         display: grid;
//         // 左右距离30 一列3等分
//         row-gap: 30px;
//         column-gap: 30px;
//         grid-template-columns: repeat(3, minmax(0, 1fr));
//         .item {
//             width: 480px;
//             height: 180px;
//             background: RGBA(32, 40, 57, 1);
//             border-radius: 10px;
//             border: 1px solid transparent;
//             position: relative;
//             cursor: pointer;
//             display: flex;
//             justify-content: space-between;
//             &:hover {
//                 border-color: #ffffff;
//                 .left-label {
//                     opacity: 1;
//                 }
//                 .item-cenText .contents {
//                     opacity: 1;
//                     .subtitle {
//                         color: #0eaeff;
//                     }
//                 }
//                 .right-img {
//                     opacity: 0.7;
//                 }
//                 .img {
//                     display: none;
//                 }
//                 .imghover {
//                     display: block;
//                 }
//             }
//             .imghover {
//                 display: none;
//             }
//             .item-cenText {
//                 margin: 43px 0 0 56px;
//                 display: flex;
//                 .img,
//                 .imghover {
//                     width: 82px;
//                     height: 92px;
//                 }
//                 .contents {
//                     margin-left: 48px;
//                     font-size: 24px;
//                     font-family: Microsoft YaHei;
//                     font-weight: bold;
//                     color: #ffffff;
//                     opacity: 0.8;
//                     .subtitle {
//                         font-size: 12px;
//                         margin-top: 10px;
//                         color: #748ba8;
//                         white-space: nowrap;
//                     }
//                 }
//             }
//             .right-img {
//                 background: url('../../assets/img/nav/img6.png') no-repeat;
//                 background-size: cover;
//                 width: 90px;
//                 height: 180px;
//                 opacity: 0.2;
//             }

//             .left-label {
//                 width: 6px;
//                 height: 50px;
//                 background: #ffffff;
//                 opacity: 0.3;
//                 border-radius: 0px 4px 4px 0px;
//                 position: absolute;
//                 left: 0;
//                 top: 50%;
//                 transform: translateY(-50%);
//             }
//         }
//         .item.unOwner {
//             opacity: 0.3;
//             cursor: no-drop;
//             animation-name: opacityAni2;
//             &:hover {
//                 border-color: transparent;
//                 .left-label {
//                     opacity: 0.3;
//                 }
//                 .item-cenText .contents {
//                     opacity: 0.8;
//                     .subtitle {
//                         color: #748ba8;
//                     }
//                 }
//                 .right-img {
//                     opacity: 0.2;
//                 }
//                 .img {
//                     display: block;
//                 }
//                 .imghover {
//                     display: none;
//                 }
//             }
//         }
//     }
// }

// @keyframes opacityAni {
//     0% {
//         opacity: 0;
//     }
//     100% {
//         opacity: 1;
//     }
// }

// @keyframes opacityAni2 {
//     0% {
//         opacity: 0;
//     }
//     100% {
//         opacity: 0.3;
//     }
// }
</style>