pointsMall/src/components/SiderInfo.vue

<template>
    <div class="index-aside aside" :class="{ 'sticky top': isActive }">
        <div class="signin-tip sidebar-block signin">
            <div class="first-line">
                <div class="icon-text">
                    <span class="title">
                        {{ hoursTip }}
                        <!-- <span class="title-days">77天</span> -->
                    </span>
                    <div class="second-line">点亮在商城的每一天</div>
                </div>
                <button class="btn signedin-btn">
                    <span @click="goToSignIn" v-if="dataInfo.signStatus==0" class="btn-text sign-text">去签到</span>
                    <span v-else class="btn-text signed-text">已签到</span>
                </button>
            </div>
        </div>
        <div class="signin-tip sidebar-block">
            <div class="avatar">
                <el-avatar fit="fill" :size="65" :src="avatarUrl"></el-avatar>
                <span class="name">{{ dataInfo.userName }}</span>
            </div>
            <div class="info">
                <div class="info-item">
                    <div class="item-title">部门：</div>
                    <div :title="dataInfo.deptName" class="item-content" style="line-height: 1.5rem;">{{ dataInfo.deptName }}</div>
                </div>
                <div class="info-item">
                    <div class="item-title">积分：</div>
                    <div class="item-content blue">{{ dataInfo.surplusIntegral }}</div>
                </div>
                <div class="info-item">
                    <div class="item-title">排行：</div>
                    <div class="item-content blue">{{ dataInfo.nowtop }}</div>
                </div>
                <!-- <div class="info-item">
                    <div class="item-title">勋章：</div>
                    <div class="item-content blue">{{ dataInfo.medalCount }}枚</div>
                </div> -->
            </div>
        </div>
        <div class="sidebar-block sticky-block">
            <div class="avatar">
                <el-avatar :size="65" :src="avatarUrl"></el-avatar>
                <span class="name">{{ dataInfo.userName }}</span>
            </div>
            <div class="info">
                <div class="info-item">
                    <div class="item-title">部门：</div>
                    <div :title="dataInfo.deptName" class="item-content">{{ dataInfo.deptName }}</div>
                </div>
                <div class="info-item">
                    <div class="item-title">积分：</div>
                    <div class="item-content blue">{{ dataInfo.surplusIntegral }}</div>
                </div>
                <div class="info-item">
                    <div class="item-title">排行：</div>
                    <div class="item-content blue">{{ dataInfo.nowtop }}</div>
                </div>
                <!-- <div class="info-item">
                    <div class="item-title">勋章：</div>
                    <div class="item-content blue">{{ dataInfo.medalCount }}枚</div>
                </div> -->
            </div>
        </div>
    </div>
</template>
<script>
import { useInfo } from "@/api/allApi";
export default {
    data() {
        return {
            hoursTip:'你好！',
            isActive: false,
            dataInfo:{},
            avatarUrl: "https://cube.elemecdn.com/3/7c/3ea6beec64369c2642b92c6726f1epng.png",
        };
    },
    created() {
        this.getUserInfo();
        this.getHoursTip()
    },
    methods: {
        goToSignIn(){
            this.$router.push({
                path: '/home/signIn',
            });
        },
        getUserInfo(){
            useInfo().then(response=>{
                this.dataInfo = response.data.data;
                this.avatarUrl = this.dataInfo.httpFile + this.dataInfo.headImage;
            })
        },
        getHoursTip() {
            let date = new Date();
            if (date.getHours() >= 0 && date.getHours() < 12) {
                this.hoursTip = "上午好！"
            } else if (date.getHours() >= 12 && date.getHours() < 18) {
                this.hoursTip = "下午好！"
            } else {
                this.hoursTip = "晚上好！"
            }
        },

     // 保存滚动值，这是兼容的写法
     handleScroll() {
        var scrollTop = window.pageYOffset || document.documentElement.scrollTop || document.body.scrollTop;
        if (scrollTop >= 550) {
            this.isActive = true
        } else {
            this.isActive = false
        }
    },
},

mounted() {
    window.addEventListener('scroll', this.handleScroll)
},

destroyed() {
    // 离开该页面需要移除这个监听的事件，不然会报错
    window.removeEventListener('scroll', this.handleScroll)
}
}
</script>
<style>
.aside {
    position: absolute;
    top: 0;
    right: 0;
    z-index: 1;
}

.aside.index-aside {
    width: 16.3rem;
}

.hot-list-wrap {
    /* padding: 1.33rem 0 0.66rem; */
    background-color: #fff;
    border-radius: 4px;
    margin-bottom: 1.25rem;
}

.timeline-index-view.sidebar-block {
    box-shadow: none;
}

.sidebar-block {
    background-color: #fff;
    box-shadow: 0 1px 2px 0 rgba(0, 0, 0, .05);
    border-radius: 2px;
    margin-bottom: 1rem;
    font-size: 1.16rem;
    line-height: 1.29;
    border-radius: 4px;
    color: #333;
}

.signin-tip {
    padding: 20px;
    background-color: #fff;
    box-sizing: border-box;
}

.first-line {
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: space-between;
}

.first-line .icon-text {
    display: flex;
    flex-direction: column;
}

.first-line .btn {
    cursor: pointer;
    border-radius: 4px;
    height: 36px;
    width: 74px;
    box-sizing: border-box;
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: center;
    border: 1px solid rgba(30, 128, 255, .3);
    background-color: rgba(30, 128, 255, .05);
}

.first-line .signed-text {
    color: #abcdff;
}
.first-line .sign-text {
    color: #1e80ff;
}
.first-line .btn-text {
    font-size: 14px;
    font-weight: 400;
    white-space: nowrap;
}

.first-line .title {
    color: #1d2129;
    font-size: 16px;
    font-weight: 600;
    line-height: 24px;
}

.second-line {
    color: #8a919f;
    font-size: 12px;
    font-weight: 400;
    line-height: 24px;
    margin-top: 2px;
}

.first-line .title-days {
    margin-left: 4px;
    color: #1e80ff;
}

.sidebar-block .avatar {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
}

.avatar .name {
    margin-top: 2px;
    font-size: 1rem;
    font-weight: 600;
    color: #252933;
}

.sidebar-block .info {
    margin-top: 5px;
}

.info .info-item {
    font-size: 1rem;
    display: flex;
    justify-content: space-between;
    line-height: 1.5rem;
}
.info-item .item-title{
    width: 62px;
}

.info-item .text-overflow {
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.info-item .blue {
    color: #1e80ff;
}

.sidebar-block.sticky-block {
    padding: 20px;
    background-color: #fff;
    box-sizing: border-box;
    position: fixed;
    box-shadow: none;
    opacity: 0;
    transition: all .2s;
    width: 16.3rem;
    z-index: -1;
    top: 67px;
    pointer-events: none;
}

.index-aside.sticky.top .sticky-block {
    top: 20px;
}

.index-aside.sticky .sticky-block {
    opacity: 1;
    top: 80px;
    z-index: 5;
    pointer-events: all;
}
.el-avatar>img {
    width: 100%;
}
</style>