380 lines
16 KiB
Vue
380 lines
16 KiB
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>
|
||
<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>
|
||
|
||
/ {{Monely}}
|
||
<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--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);
|
||
|
||
// const that = this
|
||
// let timer = setInterval(() => {
|
||
// let ispeed = Math.floor(-that.scrollTop / 5)
|
||
// document.documentElement.scrollTop = document.body.scrollTop = that.scrollTop + ispeed
|
||
// if (that.scrollTop === 0) {
|
||
// clearInterval(timer)
|
||
// }
|
||
// }, 16)
|
||
},
|
||
// // 为了计算距离顶部的高度，当高度大于60显示回顶部图标，小于60则隐藏
|
||
// scrollToTop () {
|
||
// const that = this
|
||
// let scrollTop = window.pageYOffset || document.documentElement.scrollTop || document.body.scrollTop
|
||
// that.scrollTop = scrollTop
|
||
// if (that.scrollTop > 60) {
|
||
// that.btnFlag = true
|
||
// } else {
|
||
// that.btnFlag = false
|
||
// }
|
||
// },
|
||
//滚动
|
||
// 点击切换锚点：
|
||
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;
|
||
// if(parseInt(this.selectMonly) == parseInt(1) || parseInt(this.MonethlyId) == parseInt(1)){
|
||
// this.$refs.LastBtn.style.display = "none"
|
||
// }else if(parseInt(this.selectMonly) == this.Monely || parseInt(this.MonethlyId) == this.Monely){
|
||
// this.$refs.NextBtn.style.display = "none"
|
||
// }
|
||
},
|
||
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.MonType.push(key);
|
||
that.MonTypePro.push(that.MonList[key]);
|
||
})
|
||
console.log(that.MonList);
|
||
})
|
||
},
|
||
// 月刊详情页面跳转
|
||
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) )
|
||
this.$router.go(0);
|
||
}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');
|
||
this.$router.go(0);
|
||
}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');
|
||
this.$router.go(0);
|
||
}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> |