You can not select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
376 lines
10 KiB
376 lines
10 KiB
3 years ago
|
<template>
|
||
|
|
<div class="newsnotice">
|
||
|
|
<!-- <div class="title" >
|
||
|
|
<span>{{ this.$store.state.columnmessage.columnName }}</span>
|
||
|
|
|
||
|
|
</div> -->
|
||
|
|
<div
|
||
|
|
class="titlebottomone"
|
||
|
|
v-if="
|
||
|
|
(showType == 1 && $store.state.columnmessage.data.length > 1) ||
|
||
|
|
(showType == 1 && $store.state.columnmessage.styleType == 2)
|
||
|
|
"
|
||
|
|
>
|
||
|
|
<div class="title">
|
||
|
|
<span>{{ this.$store.state.columnmessage.columnName }}</span>
|
||
|
|
<!-- <a href="">< 返回</a> -->
|
||
|
|
</div>
|
||
|
|
<div
|
||
|
|
@click="link(value.id, value.linkUrl)"
|
||
|
|
class="noticeitems"
|
||
|
|
v-for="value in columnData"
|
||
|
|
:key="value.id"
|
||
|
|
>
|
||
|
|
<img :src="value.bgImgUrl" alt="" />
|
||
|
|
<div class="detail">
|
||
|
|
<h3>{{ value.title }}</h3>
|
||
|
|
<p>
|
||
|
|
{{ value.description }}
|
||
|
|
</p>
|
||
|
|
<span>{{ value.createTime }}</span>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
<div
|
||
|
|
class="titlebottomtwo"
|
||
|
|
v-if="
|
||
|
|
(showType == 0 && $store.state.columnmessage.data.length > 1) ||
|
||
|
|
(showType == 0 && $store.state.columnmessage.styleType == 2)
|
||
|
|
"
|
||
|
|
>
|
||
|
|
<div class="title">
|
||
|
|
<span>{{ this.$store.state.columnmessage.columnName }}</span>
|
||
|
|
</div>
|
||
|
|
<div
|
||
|
|
@click="link(value.id, value.linkUrl)"
|
||
|
|
:to="path + value.id"
|
||
|
|
v-for="value in columnData"
|
||
|
|
:key="value.id"
|
||
|
|
>
|
||
|
|
<div class="teachershow">
|
||
|
|
<img :src="value.bgImgUrl" alt="" />
|
||
|
|
<div>
|
||
|
|
<P class="name">{{ value.title }}</P>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
<el-pagination
|
||
|
|
@current-change="handleCurrentChange"
|
||
|
|
:current-page="currentPage"
|
||
|
|
:page-size="10"
|
||
|
|
background
|
||
|
|
layout="prev, pager, next"
|
||
|
|
:total="this.$store.state.columnmessage.total"
|
||
|
|
>
|
||
|
|
</el-pagination>
|
||
|
|
</div>
|
||
|
|
</template>
|
||
|
|
|
||
|
|
<script>
|
||
|
|
import { getColumnarticle } from "@/apis/request.js";
|
||
|
|
import { getArticlemessage } from "@/apis/request.js";
|
||
|
|
import { returnColumn } from "@/apis/request.js";
|
||
|
|
// import Description from "./Description.vue";
|
||
|
|
|
||
|
|
import { allColumn } from "@/apis/request.js";
|
||
|
|
export default {
|
||
|
|
data() {
|
||
|
|
return {
|
||
|
|
currentPage: 1,
|
||
|
|
total: 50,
|
||
|
|
flag: false,
|
||
|
|
arrData: [],
|
||
|
|
};
|
||
|
|
},
|
||
|
|
components: {
|
||
|
|
// Description
|
||
|
|
},
|
||
|
|
methods: {
|
||
|
|
link(id, url) {
|
||
|
|
if (
|
||
|
|
this.$store.state.columnmessage.styleType == 0 ||
|
||
|
|
this.$store.state.columnmessage.styleType == 1
|
||
|
|
) {
|
||
|
|
this.$router.push({
|
||
|
|
path:
|
||
|
|
"/ChuanDa/" +
|
||
|
|
this.$store.state.columnmessage.id +
|
||
|
|
"/leftmenu/" +
|
||
|
|
this.$store.state.bottomcolumnid +
|
||
|
|
"/description/" +
|
||
|
|
id,
|
||
|
|
});
|
||
|
|
} else {
|
||
|
|
getArticlemessage(id).then((res) => {
|
||
|
|
if (res[0].linkType == 1) {
|
||
|
|
location.href = url;
|
||
|
|
} else {
|
||
|
|
allColumn().then((data) => {
|
||
|
|
var a = this.familyTree(data, res[0].linkColumnId).length - 1;
|
||
|
|
var id = this.familyTree(data, res[0].linkColumnId)[a].id;
|
||
|
|
for (let i = 0; i < data.length; i++) {
|
||
|
|
if (data[i].id == res[0].linkColumnId) {
|
||
|
|
this.flag = true;
|
||
|
|
const { href } = this.$router.resolve({
|
||
|
|
path:
|
||
|
|
"/ChuanDa/" +
|
||
|
|
res[0].linkColumnId +
|
||
|
|
"/leftmenu/" +
|
||
|
|
0 +
|
||
|
|
"/description/" +
|
||
|
|
res[0].linkArticleId,
|
||
|
|
});
|
||
|
|
if (this.$store.state.columnmessage.openMethod == 1) {
|
||
|
|
returnColumn(res[0].linkColumnId).then((res) => {
|
||
|
|
this.$store.state.columnmessage.styleType =
|
||
|
|
res[0].styleType;
|
||
|
|
localStorage.setItem(
|
||
|
|
"styleType",
|
||
|
|
this.$store.state.columnmessage.styleType
|
||
|
|
);
|
||
|
|
// localStorage.removeItem('styleType')
|
||
|
|
console.log(
|
||
|
|
this.$store.state.columnmessage.styleType,
|
||
|
|
"con"
|
||
|
|
);
|
||
|
|
window.open(href, "_blank");
|
||
|
|
});
|
||
|
|
} else {
|
||
|
|
returnColumn(res[0].linkColumnId).then((res) => {
|
||
|
|
this.$store.state.columnmessage.styleType =
|
||
|
|
res[0].styleType;
|
||
|
|
console.log(
|
||
|
|
this.$store.state.columnmessage.styleType,
|
||
|
|
"con"
|
||
|
|
);
|
||
|
|
window.open(href, "_self");
|
||
|
|
});
|
||
|
|
}
|
||
|
|
}
|
||
|
|
}
|
||
|
|
if (this.flag == false) {
|
||
|
|
console.log(res, "o");
|
||
|
|
const { href } = this.$router.resolve({
|
||
|
|
path: `/ChuanDa/${id}/leftmenu/${res[0].linkColumnId}/description/${res[0].linkArticleId}`,
|
||
|
|
});
|
||
|
|
if (this.$store.state.columnmessage.openMethod == 1) {
|
||
|
|
localStorage.setItem(
|
||
|
|
"styleType",
|
||
|
|
this.$store.state.columnmessage.styleType
|
||
|
|
);
|
||
|
|
window.open(href, "_blank");
|
||
|
|
console.log(
|
||
|
|
this.$store.state.columnmessage.styleType,
|
||
|
|
"con1"
|
||
|
|
);
|
||
|
|
} else {
|
||
|
|
console.log(
|
||
|
|
this.$store.state.columnmessage.styleType,
|
||
|
|
"con2"
|
||
|
|
);
|
||
|
|
window.open(href, "_self");
|
||
|
|
}
|
||
|
|
|
||
|
|
console.log(this.$store.state.columnmessage.id, 1);
|
||
|
|
}
|
||
|
|
});
|
||
|
|
}
|
||
|
|
});
|
||
|
|
}
|
||
|
|
},
|
||
|
|
familyTree(arr1, id) {
|
||
|
|
var temp = [];
|
||
|
|
var forFn = function (arr, id) {
|
||
|
|
for (var i = 0; i < arr.length; i++) {
|
||
|
|
var item = arr[i];
|
||
|
|
if (item.id === id) {
|
||
|
|
temp.push(item);
|
||
|
|
forFn(arr1, item.parentId);
|
||
|
|
break;
|
||
|
|
} else {
|
||
|
|
if (item.children) {
|
||
|
|
forFn(item.children, id);
|
||
|
|
}
|
||
|
|
}
|
||
|
|
}
|
||
|
|
};
|
||
|
|
forFn(arr1, id);
|
||
|
|
return temp;
|
||
|
|
},
|
||
|
|
handleCurrentChange(val) {
|
||
|
|
this.currentPage = val;
|
||
|
|
this.querystock();
|
||
|
|
},
|
||
|
|
querystock() {
|
||
|
|
if (this.$route.params.a != 0) {
|
||
|
|
getColumnarticle(this.$route.params.a, this.currentPage).then((res) => {
|
||
|
|
this.$store.state.columnmessage.data = res.list;
|
||
|
|
this.$store.state.columnmessage.total = res.total;
|
||
|
|
console.log(res, 666);
|
||
|
|
});
|
||
|
|
} else {
|
||
|
|
getColumnarticle(
|
||
|
|
this.$store.state.columnmessage.id,
|
||
|
|
this.currentPage
|
||
|
|
).then((res) => {
|
||
|
|
this.$store.state.columnmessage.data = res.list;
|
||
|
|
this.$store.state.columnmessage.total = res.total;
|
||
|
|
console.log(res, 666);
|
||
|
|
});
|
||
|
|
}
|
||
|
|
},
|
||
|
|
|
||
|
|
getParentNode(data, nodeId, arrRes) {
|
||
|
|
if (!data) {
|
||
|
|
if (!nodeId) {
|
||
|
|
arrRes.unshift(nodeId);
|
||
|
|
}
|
||
|
|
return arrRes;
|
||
|
|
}
|
||
|
|
for (var i = 0, length = data.length; i < length; i++) {
|
||
|
|
let node = data[i];
|
||
|
|
if (node.value == nodeId) {
|
||
|
|
arrRes.unshift(nodeId);
|
||
|
|
this.getParentNode(this.arrData, node.parentId, arrRes);
|
||
|
|
break;
|
||
|
|
} else {
|
||
|
|
if (node.children) {
|
||
|
|
this.getParentNode(node.children, nodeId, arrRes);
|
||
|
|
}
|
||
|
|
}
|
||
|
|
}
|
||
|
|
return arrRes;
|
||
|
|
},
|
||
|
|
},
|
||
|
|
computed: {
|
||
|
|
showType() {
|
||
|
|
if (
|
||
|
|
this.$store.state.columnmessage.showType == 0 ||
|
||
|
|
this.$store.state.columnmessage.showType == 1
|
||
|
|
) {
|
||
|
|
return this.$store.state.columnmessage.showType;
|
||
|
|
} else {
|
||
|
|
return "";
|
||
|
|
}
|
||
|
|
},
|
||
|
|
columnData() {
|
||
|
|
if (this.$store.state.columnmessage.data.length > 0) {
|
||
|
|
return this.$store.state.columnmessage.data;
|
||
|
|
} else {
|
||
|
|
return [];
|
||
|
|
}
|
||
|
|
},
|
||
|
|
columnName() {
|
||
|
|
if (this.$store.state.columnmessage.columnName) {
|
||
|
|
return this.$store.state.columnmessage.columnName;
|
||
|
|
} else {
|
||
|
|
return "";
|
||
|
|
}
|
||
|
|
},
|
||
|
|
path() {
|
||
|
|
return "/ChuanDa/" + this.$store.state.columnmessage.id + "/description/";
|
||
|
|
},
|
||
|
|
},
|
||
|
|
};
|
||
|
|
</script>
|
||
|
|
|
||
|
|
<style lang="less">
|
||
|
|
.newsnotice {
|
||
|
|
width: 980px;
|
||
|
|
float: right;
|
||
|
|
|
||
|
|
.title {
|
||
|
|
display: flex;
|
||
|
|
justify-content: space-between;
|
||
|
|
width: 100%;
|
||
|
|
font-size: 18px;
|
||
|
|
padding-bottom: 10px;
|
||
|
|
padding-top: 26px;
|
||
|
|
border-bottom: 2px solid #ccc;
|
||
|
|
color: #2d2d2d;
|
||
|
|
font-size: 18px;
|
||
|
|
a {
|
||
|
|
color: #2d2d2d;
|
||
|
|
}
|
||
|
|
}
|
||
|
|
.titlebottomone {
|
||
|
|
.noticeitems {
|
||
|
|
display: flex;
|
||
|
|
margin-top: 30px;
|
||
|
|
height: 100px;
|
||
|
|
img {
|
||
|
|
height: 100%;
|
||
|
|
width: 160px;
|
||
|
|
}
|
||
|
|
.detail {
|
||
|
|
flex: 1;
|
||
|
|
padding-left: 20px;
|
||
|
|
padding-top: 10px;
|
||
|
|
background: rgb(230, 227, 227);
|
||
|
|
position: relative;
|
||
|
|
h3 {
|
||
|
|
font-size: 18px;
|
||
|
|
color: #2d2d2d;
|
||
|
|
}
|
||
|
|
p {
|
||
|
|
width: 600px;
|
||
|
|
margin-top: 10px;
|
||
|
|
white-space: nowrap;
|
||
|
|
text-overflow: ellipsis;
|
||
|
|
overflow: hidden;
|
||
|
|
font-size: 16px;
|
||
|
|
color: #2d2d2d;
|
||
|
|
}
|
||
|
|
span {
|
||
|
|
position: absolute;
|
||
|
|
right: 10px;
|
||
|
|
bottom: 10px;
|
||
|
|
color: #999;
|
||
|
|
font-size: 14px;
|
||
|
|
}
|
||
|
|
}
|
||
|
|
transition: 1s;
|
||
|
|
}
|
||
|
|
.noticeitems:hover {
|
||
|
|
transform: scale(1.02);
|
||
|
|
cursor: pointer;
|
||
|
|
}
|
||
|
|
}
|
||
|
|
.titlebottomtwo {
|
||
|
|
display: flex;
|
||
|
|
flex-wrap: wrap;
|
||
|
|
.teachershow {
|
||
|
|
display: flex;
|
||
|
|
margin-top: 30px;
|
||
|
|
img {
|
||
|
|
width: 260px;
|
||
|
|
height: 118px;
|
||
|
|
}
|
||
|
|
div {
|
||
|
|
display: flex;
|
||
|
|
justify-content: center;
|
||
|
|
align-items: center;
|
||
|
|
box-shadow: 5px 3px 10px #dee4ea;
|
||
|
|
width: 180px;
|
||
|
|
margin-right: 20px;
|
||
|
|
padding: 0px 15px;
|
||
|
|
color: #2d2d2d;
|
||
|
|
.name {
|
||
|
|
font-size: 16px;
|
||
|
|
color: #333333;
|
||
|
|
}
|
||
|
|
}
|
||
|
|
}
|
||
|
|
.teachershow:hover {
|
||
|
|
cursor: pointer;
|
||
|
|
}
|
||
|
|
}
|
||
|
|
.el-pagination {
|
||
|
|
width: 200px;
|
||
|
|
|
||
|
|
margin: 180px auto;
|
||
|
|
}
|
||
|
|
}
|
||
|
|
</style>
|