更新页面
This commit is contained in:
@@ -64,7 +64,7 @@
|
||||
<br/><br/>
|
||||
</div>
|
||||
<br/>
|
||||
<el-button type="info" @click="getMonely()">阅读该期</el-button>
|
||||
<el-button type="info" @click="ToDetail()">阅读该期</el-button>
|
||||
<br/><br/>
|
||||
</el-card>
|
||||
</el-col>
|
||||
@@ -154,8 +154,8 @@ export default {
|
||||
},
|
||||
// 初始化渲染页面
|
||||
mounted(){
|
||||
this.getProjectNum();
|
||||
this.getMonely();
|
||||
this.getProjectNum();
|
||||
},
|
||||
methods: {
|
||||
goBack() {
|
||||
@@ -172,8 +172,9 @@ export default {
|
||||
}).then((res)=>{
|
||||
that.ProjectNum = parseInt(res.data);
|
||||
// console.log(res.data);
|
||||
})
|
||||
});
|
||||
},
|
||||
// 获取月刊总数
|
||||
getMonely(){
|
||||
var that = this;
|
||||
axios({
|
||||
@@ -182,12 +183,29 @@ export default {
|
||||
params: {
|
||||
}
|
||||
}).then(function (res){
|
||||
that.Monely = res.data;
|
||||
// that.Monely = parseInt(res.data);
|
||||
// that.selectMonly = that.Monely;
|
||||
that.Monely = parseInt(res.data);
|
||||
// console.log(res.data);
|
||||
})
|
||||
},
|
||||
// 月刊详情页面跳转
|
||||
ToDetail(){
|
||||
if(this.selectMonly > 0 && this.selectMonly <= this.Monely){
|
||||
let pathInfo = this.$router.resolve({
|
||||
path: '/MonthlyDetail',
|
||||
query:{
|
||||
MonethlyId:this.selectMonly
|
||||
}
|
||||
})
|
||||
window.open(pathInfo.href, '_self');
|
||||
}else{
|
||||
this.$message({
|
||||
message: '请输入正确的月刊号',
|
||||
type: 'warning',
|
||||
offset:100,
|
||||
duration:700,
|
||||
});
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
@@ -1,15 +1,131 @@
|
||||
<template>
|
||||
<div>
|
||||
sssss
|
||||
</div>
|
||||
<div 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 ref="LastBtn" size="medium" type="primary" icon="el-icon-arrow-left">上一期</el-button>
|
||||
|
||||
<el-select no-data-text="MonthlyId" @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 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》月刊第{{selectMonly}}期
|
||||
</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>
|
||||
|
||||
</div>
|
||||
</div>
|
||||
<!-- <div style="display: flex;flex-direction:column;flex-wrap: nowrap">-->
|
||||
<!-- <div class="UserInfo">-->
|
||||
<!-- 用户信息展示内容：-->
|
||||
<!-- </div>-->
|
||||
<!-- <div class="RightContent">-->
|
||||
<!-- 空位置，待填入-->
|
||||
<!-- </div>-->
|
||||
<!-- <div class="ReferralProgram">-->
|
||||
<!-- 推荐项目目录-->
|
||||
<!-- </div>-->
|
||||
<!-- </div>-->
|
||||
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import axios from "axios";
|
||||
import Monthly from "@/components/Monthly.vue";
|
||||
|
||||
export default {
|
||||
name: "MonthlyDetailComponent"
|
||||
name: "MonthlyDetailComponent",
|
||||
data(){
|
||||
return{
|
||||
//用户当前所处的月刊期号
|
||||
MonthlyId:null,
|
||||
//月刊总数：
|
||||
Monely:null,
|
||||
// //用户选择跳转的月刊数
|
||||
selectMonly:null,
|
||||
}
|
||||
},
|
||||
mounted() {
|
||||
this.getMonely();
|
||||
this.initPage();
|
||||
},
|
||||
methods: {
|
||||
goBack() {
|
||||
window.history.go(-1);
|
||||
},
|
||||
initPage(){
|
||||
this.selectMonly = this.$route.query.MonethlyId;
|
||||
// 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"
|
||||
// }
|
||||
},
|
||||
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);
|
||||
})
|
||||
},
|
||||
// 月刊详情页面跳转
|
||||
ToDetail(){
|
||||
if(this.selectMonly > 0 && this.selectMonly <= this.Monely){
|
||||
// console.log(parseInt(this.selectMonly) + " " + parseInt(this.MonethlyId) )
|
||||
console.log("跳转成功")
|
||||
}else{
|
||||
this.$message({
|
||||
message: '请输入正确的月刊号',
|
||||
type: 'warning',
|
||||
offset:100,
|
||||
duration:500,
|
||||
});
|
||||
}
|
||||
},
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style scoped>
|
||||
|
||||
<style scoped lang="scss">
|
||||
::v-deep .el-page-header__left{
|
||||
left:-200px;
|
||||
}
|
||||
</style>
|
||||
@@ -34,7 +34,6 @@ export default {
|
||||
goBack() {
|
||||
window.history.go(-1);
|
||||
},
|
||||
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
Reference in New Issue
Block a user