Skip to content

W
web-site
Commit 13c08a37 authored by 吴冠's avatar 吴冠
Browse files
Options

newList

parent fe1abdad
Hide whitespace changes
Inline Side-by-side
Showing with 235 additions and 212 deletions
pages/index/message/news.vue
View file @ 13c08a37
<template>
<div class="message" >
<div class='sidebar'>
<div class="sidebar-title">信息公告</div>
<el-col :span="12">
<el-menu :default-active="activeName" class="el-menu-vertical-demo" @select="handleSelect">
<el-menu-item :index = "item.id +''" v-for="item in artList" :key="item.id" router>
<i class="el-icon-menu"></i>
<span slot="title">{{item.title}}</span>
</el-menu-item>
</el-menu>
</el-col>
<div>
<div class="message">
<div class="sidebar">
<div class="sidebar-title">信息公告</div>
<el-col :span="12">
<el-menu
:default-active="activeName"
class="el-menu-vertical-demo"
@select="handleSelect"
>
<el-menu-item
:index="item.id + ''"
v-for="item in artList"
:key="item.id"
router
>
<i class="el-icon-menu"></i>
<span slot="title">{{ item.title }}</span>
</el-menu-item>
</el-menu>
</el-col>
</div>
<ul>
<li
v-for="item in messageList"
:key="item.id"
@click="isClick(item.id)"
v-show="isList"
>
<!-- <nuxt-link :to="{name:'index-message-newsdetails',query:{id:(item.id)}}" class="flex-between link-style" >-->
<div class="flex-between link-style">
<div class="t2">{{ item.title }}</div>
<div class="t1">发布时间：{{ item.createTime }}</div>
</div>
<!-- </nuxt-link> -->
</li>
<div class="pagination" v-show="isList">
<el-pagination
@size-change="handleSizeChange"
@current-change="handleCurrentChange"
:current-page="currentPage"
:size="size"
:page-sizes="[10, 20, 30, 40]"
layout="total, prev, pager, next,sizes, jumper"
:total="total"
>
</el-pagination>
</div>
<ul>
<li v-for="item in messageList" :key="item.id" @click="isClick(item.id)" v-show="isList">
<!-- <nuxt-link :to="{name:'index-message-newsdetails',query:{id:(item.id)}}" class="flex-between link-style" >-->
<div class="flex-between link-style">
<div class="t2">{{item.title}}</div>
<div class="t1">发布时间：{{item.createTime}}</div>
</div>
<!-- </nuxt-link> -->
</li>
<div class="pagination" v-show="isList">
<el-pagination
@size-change="handleSizeChange"
@current-change="handleCurrentChange"
:current-page="currentPage"
:size ="size"
:page-sizes="[10, 20, 30, 40]"
layout="total, prev, pager, next,sizes, jumper"
:total="total">
</el-pagination >
</ul>
<div class="content" v-show="!isList">
<div>
<h1>{{ detailList.title }}</h1>
<div class="flex-center pos">
<span style="margin-right: 20px"
>发布时间:{{ detailList.createTime }}</span
>
<span>作者:{{ detailList.author }}</span>
</div>
</ul>
<div class="content" v-show="!isList">
<div >
<h1>{{detailList.title}}</h1>
<div class="flex-center pos">
<span style="margin-right:20px">发布时间:{{detailList.createTime}}</span>
<span>作者:{{detailList.author}}</span>
</div>
<div v-html="detailList.content" style="width:600px;margin:0 auto"></div>
<div class="flex-center" style="margin-buttom:40px">
<el-button type="primary" @click="returnPrev" style="margin-top:50px">返回</el-button>
</div>
<div
v-html="detailList.content"
style="width: 600px; margin: 0 auto"
></div>
<div class="flex-center" style="margin-buttom: 40px">
<el-button
type="primary"
@click="returnPrev"
style="margin-top: 50px"
>返回</el-button
>
</div>
</div>
</div>
</div>
</div>
</div>
</template>
<script>
import {
getListContent,
getCategoryList,
getnewsdetails,
} from '@/common/list.js'
import Cookies from "js-cookie"
export default {
name: 'cardApplyQuery',
mounted(){
this.getCategoryList()
let message = {}
message.currentPage = 1
message.size = 10
let type = window.location.href.split("?id=")[1]
if(type){
this.activeName = type
message.cateId = this.activeName
}else{
message.cateId = this.activeName
}
this.getListContent(message)
let detailsType = Cookies.get("detailsType")
let detailsId = Cookies.get("detailsId")
let linkTo = Cookies.get("linktoUrl")
console.log(linkTo+'-------+++++++')
//判断是否来自于首页底部三大模块
if(detailsType =="1"){
this.isClick(detailsId)
Cookies.remove("detailsType")
Cookies.remove("detailsId")
}
},
/* async asyncData({route}){
} from "@/common/list.js";
import Cookies from "js-cookie";
export default {
name: "cardApplyQuery",
mounted() {
this.getCategoryList();
let message = {};
message.currentPage = 1;
message.size = 10;
let type = window.location.href.split("?id=")[1];
if (type) {
this.activeName = type;
message.cateId = this.activeName;
} else {
message.cateId = this.activeName;
}
this.getListContent(message);
let detailsType = Cookies.get("detailsType");
let detailsId = Cookies.get("detailsId");
let linkTo = Cookies.get("linktoUrl");
console.log(linkTo + "-------+++++++");
//判断是否来自于首页底部三大模块
if (detailsType == "1") {
this.isClick(detailsId);
Cookies.remove("detailsType");
Cookies.remove("detailsId");
}
},
/* async asyncData({route}){
let message = {}
message.currentPage = 1
message.size = 10
......@@ -109,156 +135,153 @@ import Cookies from "js-cookie"
artList:res
}
}, */
data() {
return {
detailList:{
},
detailsId:'',
contentList:'',
isList:true,
activeName: '124',
conText:"",
activeIndex: '',
size:10,
total:0,
artId:0,
artList:[],
currentPage:1,
messageContext:'',
messageList: [
]
data() {
return {
detailList: {},
detailsId: "",
contentList: "",
isList: true,
activeName: "124",
conText: "",
activeIndex: "",
size: 10,
total: 0,
artId: 0,
artList: [],
currentPage: 1,
messageContext: "",
messageList: [],
};
},
methods: {
handleSelect(key, keyPath) {
let keyValue = key; /* .slice(4) */
this.detailsId = key;
let message = {};
message.cateId = keyValue;
this.getListContent(message);
let contentStatus = Cookies.get("contentStatus");
if (contentStatus == "1") {
this.isList = true;
this.getListContent(message);
Cookies.remove("contentStatus");
}
},
methods:{
handleSelect(key, keyPath) {
let keyValue = key/* .slice(4) */
this.detailsId = key
let message = {}
message.cateId = keyValue
this.getListContent(message)
let contentStatus = Cookies.get("contentStatus")
if(contentStatus == '1'){
this.isList = true
this.getListContent(message)
Cookies.remove("contentStatus")
}
},
//分类列表
async getCategoryList(){
const {data} = await getCategoryList()
this.artList = data
},
// 文章列表
async getListContent(params){
const {data,total} = await getListContent(params)
this.messageList = data
this.total = total
},
handleSizeChange(val) {
this.size = val
let mes = {
currentPage:this.currentPage,
size:val
}
this.getListContent(mes)
},
handleCurrentChange(val) {
this.currentPage = val
let mes = {
currentPage:val,
size:this.size
}
this.getListContent(mes)
},
//点击之后存储id 获取详情
async isClick(id){
const {data} = await getnewsdetails(id)
this.detailList= data
this.isList = false
Cookies.set("contentStatus",1)
},
//返回
returnPrev(){
this.isList = true
let mess = {
cateId:this.detailsId
}
this.getListContent(mess)
},
}
}
//分类列表
async getCategoryList() {
const { data } = await getCategoryList();
this.artList = data;
},
// 文章列表
async getListContent(params) {
const { data, total } = await getListContent(params);
this.messageList = data;
this.total = total;
},
handleSizeChange(val) {
this.size = val;
let mes = {
currentPage: this.currentPage,
size: val,
};
this.getListContent(mes);
},
handleCurrentChange(val) {
this.currentPage = val;
let mes = {
currentPage: val,
size: this.size,
};
this.getListContent(mes);
},
//点击之后存储id 获取详情
async isClick(id) {
const { data } = await getnewsdetails(id);
this.detailList = data;
this.isList = false;
Cookies.set("contentStatus", 1);
},
//返回
returnPrev() {
this.isList = true;
let mess = {
cateId: this.detailsId,
};
this.getListContent(mess);
},
},
};
</script>
<style scoped>
.pagination{
.pagination {
position: absolute;
bottom: 5%;
left: 50%;
transform:translateX(-50%);
transform: translateX(-50%);
}
.message {
border: 1px solid rgba(219, 219, 219, 1);
min-height: 6.98rem;
position: absolute;
left:33%;
width: 9.2rem;
}
.message {
border: 1px solid rgba(219, 219, 219, 1);
min-height:6.98rem;
position: relative;
right:-15%;
width:9.2rem
}
.message>ul>li {
width: 9.23rem;
height: .61rem;
line-height: .61rem;
box-sizing: border-box;
padding-left: 0.3rem;
padding-right: 0.55rem;
border-bottom: 1px solid rgba(219, 219, 219, 1);
}
.message>ul>li div:last-child{
color:rgba(151,152,153,1);
}
.message > ul > li {
width: 9.23rem;
height: 0.61rem;
line-height: 0.61rem;
box-sizing: border-box;
padding-left: 0.3rem;
padding-right: 0.55rem;
border-bottom: 1px solid rgba(219, 219, 219, 1);
}
.message > ul > li div:last-child {
color: rgba(151, 152, 153, 1);
}
.message>.pagination{
margin-top: 4rem;
}
.sidebar {
width: 2.4rem;
border: 1px solid rgba(219, 219, 219, 1);
position: absolute;
left:-217px
}
.sidebar>.sidebar-title {
width: 2.4rem;
height: .60rem;
line-height: .6rem;
background: rgba(245, 246, 247, 1);
text-align: center;
font-size: .20rem;
color: rgba(0, 0, 0, 1);
font-weight: bold;
}
.el-menu-vertical-demo{
width: 2.4rem;
}
.el-col-12 {
width: 100%;
}
.content{
width:9.2rem;
height:100%;
}
h1{
display: flex;
justify-content: center;
margin-top: 20px;
margin-bottom: 20px;
}
.pos{
margin-bottom: 50px;
}
.link-style{
cursor:pointer
}
.message > .pagination {
margin-top: 4rem;
}
.sidebar {
width: 2.4rem;
border: 1px solid rgba(219, 219, 219, 1);
position: absolute;
left: -30%
}
.sidebar > .sidebar-title {
width: 2.4rem;
height: 0.6rem;
line-height: 0.6rem;
background: rgba(245, 246, 247, 1);
text-align: center;
font-size: 0.2rem;
color: rgba(0, 0, 0, 1);
font-weight: bold;
}
.el-menu-vertical-demo {
width: 2.4rem;
}
.el-col-12 {
width: 100%;
}
.content {
width: 9.2rem;
height: 100%;
}
h1 {
display: flex;
justify-content: center;
margin-top: 20px;
margin-bottom: 20px;
}
.pos {
margin-bottom: 50px;
}
.link-style {
cursor: pointer;
}
</style>
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment