hellogithub-vue/src/components/Monthly/MonthlyDetail.vue

<template>
    <div class="test" style="display:flex;flex-direction:row;flex-wrap: nowrap" >
        <div style="display: flex;flex-direction:column;flex-wrap: nowrap">
            <div class="PageHeader">
                <br/>
                <el-page-header  @back="goBack" style="justify-content: center;">
                    <div slot="title" style="font-size:23px;font-weight: 600;"></div>
                    <div slot="content" style="font-size:18px;font-weight: 600;margin-top:-10px">
                        <el-button @click="ToNearMon('LastBtn')" ref="LastBtn" size="medium" type="primary" icon="el-icon-arrow-left">上一期</el-button>&nbsp;
                        <el-select  @change="ToDetail()" size="medium"
                                    clearable v-model="selectMonly" filterable placeholder="跳转期数" style="width:80px;">
                            <el-option
                                v-for="item in Monely"
                                :key="item"
                                :label="item"
                                :value="item"
                            >
                            </el-option>
                        </el-select>
                        &nbsp;
                        / {{Monely}}&nbsp;
                        <el-button @click="ToNearMon('NextBtn')" ref="NextBtn" size="medium" type="primary">下一期<i class="el-icon-arrow-right el-icon--right"></i></el-button>
                    </div>
                </el-page-header>
            </div>
            <div class="PageContent">
                <div style="font-size:35px;font-weight:750;">
                    《HelloGitHub》月刊第{{MonthlyId}}期
                </div>

                <div style="margin-top:30px;width:50vw;margin-left:20px">
                    <el-row :gutter="24">
                        <el-col :span="24">
                            <el-card shadow="always" style="font-size: 18px;
                                font-weight:550;color: #a9a9a9;
                                line-height: 35px;
                                text-align:left;background-color: #f4ffed;
                                border-color: rgba(255,243,232,0.89);border-radius:10px">
                                HelloGitHub 分享 GitHub 上有趣、入门级的开源项目，<span style="font-size:20px;font-weight:600;color:#7e7e7e">每月 28 号</span>更新一期。
                                这里有好玩和入门级的开源项目、开源书籍、实战项目、企业级项目，让你用极短的时间
                                感受到开源的魅力，对开源产生兴趣。
                            </el-card>
                        </el-col>
                    </el-row>

                    <div class="ItemsContent" >
                        <el-scrollbar class="scrollbar-wrapper" style="position: relative;" >
                            <div class="infinite-list-wrapper" >
                                <ul class="list"
                                    v-infinite-scroll="load"
                                    infinite-scroll-disabled="disabled"
                                    >
                                    <div v-for="(items,index) in MonType.length" :key="index" style="text-align: center">
                                        <div class="scroll-content">
                                            <span  style="font-size:40px;font-weight:700;font-family:'华文彩云' ">{{MonType[index]}}语言区</span>
                                        </div>
                                        <div v-for="(items,index2) of MonTypePro[index].length" :key="index2">
                                            <MonthlyItems :Items='MonTypePro[index][index2]'></MonthlyItems>
                                        </div>
                                        <div :id="index"></div>
                                    </div>
<!--                                    <el-button @click="test()"></el-button>-->
                                </ul>
                                <p v-if="loading" style="color: #9ca3af">加载中...</p>
                                <p v-if="noMore" style="color: #9ca3af">-  你不经意间触碰到了底线 -</p>
                            </div>
                        </el-scrollbar>
                    </div>
                </div>
            </div>
        </div>
        <div class="RightContent" style="position:fixed;left:70vw;max-height:80vh;overflow: scroll">
            <el-row class="tac">
                <el-col :span="24">
                    <h5 style="font-size:25px;">快速导航</h5>
                        <div style="display: flex;flex-direction:row;flex-wrap:wrap">
                            <a id="menuItems" v-for="(item,index2) in MonType" :key="index2" href="javascript:void(0)" @click="goAnchor(index2)">
                                    <div  style="display:flex;text-align: left">
                                        <div style="margin-top:16px;margin-left:4vw;">
                                            <i id="icon" :class="IconList[MonType[index2]]" style="font-size:25px;color:#fff;font-weight:550"></i>
                                            <span style="font-weight:550;margin-left:10px">{{MonType[index2]}}</span>
                                        </div>

                                    </div>
                            </a>
                        </div>
                </el-col>
            </el-row>
        </div>
        <button class="backbutton" @click="backTop()">
            <span  style="font-family: 华文琥珀;font-size:25px;color:#acbfe0">UP</span>
        </button>
    </div>
</template>

<script>
import axios from "axios";
import MonthlyItems from "@/components/Monthly/MonthlyItems.vue"

export default {
    name: "MonthlyDetailComponent",
    components: {MonthlyItems},
    data(){
        return{
            //用户当前所处的月刊期号
            MonthlyId:null,
            //月刊总数：
            Monely:null,
            // //用户选择跳转的月刊数
            selectMonly:null,
            //保存月刊内项目分类
            MonList:null,
            loading: false,
            count: 10,
            //测试组类：
            a1:null,
            //种类数组：
            MonType:[],
            //种类对应项目数组：
            MonTypePro:[],
            active:null,
            //图标列表：
            IconList:{"综合":"el-icon-discover", "C":"el-ico-alicyuyan", "C#":"el-ico-aliCyuyan", "C++":"el-ico-alicyuyan",
                "CSS":"el-ico-alicss3", "Go":"el-ico-aliGoyuyan", "Java":"el-ico-alijava", "JavaScript":"el-ico-alioutline-java-script",
                "Kotlin":"el-ico-alikotlin", "Objective-C":"el-ico-alicyuyan", "PHP":"el-ico-aliphp", "python":"el-ico-aliPython",
                "Ruby":"el-ico-aliRubyyuyan", "Rust":"el-ico-alirust", "Swift":"el-ico-aliswift",
                "Other":"el-icon-s-help", "开源书籍":"el-ico-alitushu", "机器学习":"el-ico-alijiqixuexi___"}
        }

    },
    mounted() {
        this.getMonely();
        this.initPage();
        this.FreshItems();
        // window.addEventListener('scroll',this.scrollToTop);
        window.addEventListener('scroll',this.onScroll);
    },
    destroy() {
        // 必须移除监听器，不然当该vue组件被销毁了，监听器还在就会出错
        window.removeEventListener('scroll', this.scrollToTop);
        window.removeEventListener('scroll', this.onScroll);

    },
    computed:{
        noMore() {
            return this.count >= 10
        },
        disabled() {
            return this.loading || this.noMore
        }
    },
    beforeRouteLeave(to , from, next){
       if(to.name == 'Monthly'){
           from.meta.keepAlive = false;
       }
       next();
    },
    methods: {
        backTop () {
            let top = document.documentElement.scrollTop || document.body.scrollTop;
            // 实现滚动效果
            const timeTop = setInterval(() => {
                document.body.scrollTop = document.documentElement.scrollTop = top -= 50;
                if (top <= 0) {
                    clearInterval(timeTop);
                }
            }, 10);

        },

        // 点击切换锚点：
        goAnchor(id) {
            var anchor = document.getElementById(id);
            // chrome
            document.body.scrollTop = anchor.offsetTop + anchor.offsetHeight;
            // firefox
            document.documentElement.scrollTop = anchor.offsetTop + anchor.offsetHeight;
            // safari
            window.pageYOffset = anchor.offsetTop + anchor.offsetHeight;
            var that = this;
            that.active = id;
            console.log(that.active);
        },
        onScroll() {
            // 获取所有锚点元素
            const navContents = document.querySelectorAll('.scroll-content')
            // 所有锚点元素的 offsetTop
            const offsetTopArr = []
            navContents.forEach(item => {
                offsetTopArr.push(item.offsetTop)
            })
            // 获取当前文档流的 scrollTop
            const scrollTop = document.documentElement.scrollTop || document.body.scrollTop
            // 定义当前点亮的导航下标
            let navIndex = 0
            for (let n = 0; n < offsetTopArr.length; n++) {
                // 如果 scrollTop 大于等于第 n 个元素的 offsetTop 则说明 n-1 的内容已经完全不可见
                // 那么此时导航索引就应该是 n 了
                if (scrollTop >= offsetTopArr[n]) {
                    navIndex = n
                }
            }
            // 把下标赋值给 vue 的 data
            this.active = navIndex
        },
        goBack() {
            let pathInfo = this.$router.resolve({
                path: '/Monthly',
                query:{
                }
            })
            window.open(pathInfo.href, '_self');
        },
        initPage(){
            this.MonthlyId = this.$route.query.MonethlyId;
            this.selectMonly = this.MonthlyId;
        },
        // test(){
        //     console.log(this.MonType);
        //     console.log(this.MonTypePro);
        //     console.log(this.MonList);
        // },
        // 月刊总数:
        getMonely(){
            var that = this;
            axios({
                method: 'post',
                url: 'http://localhost:8082/helloGithub_war_exploded/latest',
                params: {
                }
            }).then(function (res){
                that.Monely = parseInt(res.data);
                // console.log(res.data);
            })
        },
        // 获取该期月刊中项目列表
        getList(num){
            var that = this;
            axios({
                method: 'post',
                url: 'http://localhost:8082/helloGithub_war_exploded/selectTerm',
                params: {
                    type:num
                }
            }).then(function (res){
                that.MonList = res.data;
                that.MonType=[];
                that.MonTypePro=[];
                Object.keys(that.MonList).forEach(key=>{
                    that.MonTypePro.push(that.MonList[key]);
                    that.MonType.push(key);
                })
                console.log(that.MonTypePro);
            })
        },
        // 月刊详情页面跳转
        ToDetail(){
            if(this.selectMonly > 0 && this.selectMonly <= this.Monely){
                this.MonthlyId = this.selectMonly;
                let pathInfo = this.$router.resolve({
                    path: '/MonthlyDetail',
                    query:{
                        MonethlyId:this.selectMonly
                    }
                })
                window.open(pathInfo.href, '_self');
                // console.log(parseInt(this.selectMonly) + "   " + parseInt(this.MonethlyId) )
            }else{
                this.$message({
                    message: '请输入正确的月刊号',
                    type: 'warning',
                    offset:100,
                    duration:500,
                });
            }
        },
        //上一期下一期：
        ToNearMon(name){
            if(name == "LastBtn" && this.MonthlyId>1){
                // this.selectMonly = this.MonthlyId -1;
                let pathInfo = this.$router.resolve({
                    path: '/MonthlyDetail',
                    query:{
                        MonethlyId:this.MonthlyId - 1
                    }
                })
                window.open(pathInfo.href, '_self');
            }else if(name == "LastBtn" && this.MonthlyId == 1){
                this.$message({
                    message: '您已处于第一期月刊！',
                    type: 'warning',
                    offset:100,
                    duration:500,
                });
            }
            if(name == "NextBtn" && this.MonthlyId < this.Monely){
                let pathInfo = this.$router.resolve({
                    path: '/MonthlyDetail',
                    query:{
                        MonethlyId:parseInt(this.MonthlyId) + parseInt(1)
                    }
                })
                window.open(pathInfo.href, '_self');
            }else if(name == "NextBtn" && this.MonthlyId == this.Monely){
                this.$message({
                    message: '您已处于最后一期月刊!',
                    type: 'warning',
                    offset:100,
                    duration:500,
                });
            }
        },
        // 更行月刊内容：
        FreshItems(){
            this.getList(this.MonthlyId);
            var that = this;
            that.active = 0;
        },
        load(){
            this.loading = true
            setTimeout(() => {
                this.count += 2
                this.loading = false
            }, 2000)
        },
    }
}

</script>

<style scoped lang="scss">
::v-deep .el-page-header__left{
  left:-200px;
}
.ItemsContent{
    margin-left:-10px;
    width:54vw;
}
#menuItems{
    background-color:rgb(178, 178, 178);
    color:#fff;
    width:20vw;
    height:55px;
    font-size:20px;
    text-decoration-line: none;
}
#menuItems:hover{
    background-color:#a4a4a4;
    transform:scale(1.15);
    cursor:pointer;
}

</style>