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.
401 lines
15 KiB
401 lines
15 KiB
3 years ago
|
<template>
|
||
|
|
<!-- 如果id为66则显示首页，否则显示有侧边栏的页面 -->
|
||
|
|
<div>
|
||
|
|
<Home
|
||
|
|
v-if="
|
||
|
|
this.$route.params.id == 66 &&
|
||
|
|
this.$store.state.columnmessage.data == ''
|
||
|
|
"
|
||
|
|
/>
|
||
|
|
<div v-else class="location">
|
||
|
|
<img
|
||
|
|
:src="this.$store.state.columnmessage.bgImgUrl"
|
||
|
|
alt=""
|
||
|
|
class="banner"
|
||
|
|
/>
|
||
|
|
<!-- 顶部展示图片横幅 -->
|
||
|
|
<div class="bannertitle">
|
||
|
|
<p>{{ this.$store.state.columnmessage.TopColumnname }}</p>
|
||
|
|
<p class="english">{{ this.$store.state.columnmessage.english }}</p>
|
||
|
|
</div>
|
||
|
|
<div class="container clearfix">
|
||
|
|
<!-- <li class="leftmenutop" v-if="id">
|
||
|
|
<p>{{ id}}</p>
|
||
|
|
</li> -->
|
||
|
|
<!-- 栏目左侧导航栏 -->
|
||
|
|
<el-menu
|
||
|
|
v-if="listData.length > 0"
|
||
|
|
unique-opened
|
||
|
|
:default-active="$route.params.a"
|
||
|
|
class="el-menu-vertical-demo"
|
||
|
|
background-color="#f3f3f3"
|
||
|
|
text-color="#000"
|
||
|
|
active-text-color="#fff"
|
||
|
|
@open="handleOpen"
|
||
|
|
@close="handleClose"
|
||
|
|
>
|
||
|
|
<!-- 侧边栏目的具体栏目child -->
|
||
|
|
<Child :dataList="listData"></Child>
|
||
|
|
</el-menu>
|
||
|
|
|
||
|
|
<router-view />
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
</template>
|
||
|
|
|
||
|
|
<script>
|
||
|
|
import { getColumnarticle } from "@/apis/request.js";
|
||
|
|
import { getColumnchildren } from "@/apis/request.js";
|
||
|
|
import { returnColumn } from "@/apis/request.js";
|
||
|
|
import Child from "@/components/Childmenu.vue";
|
||
|
|
import Home from "@/views/Home.vue";
|
||
|
|
export default {
|
||
|
|
data() {
|
||
|
|
return {
|
||
|
|
id: 0,
|
||
|
|
path: "",
|
||
|
|
bgImgUrl: "",
|
||
|
|
listData: [],
|
||
|
|
columnmessage: {
|
||
|
|
data: [],
|
||
|
|
showType: 0,
|
||
|
|
styleType: 0,
|
||
|
|
},
|
||
|
|
};
|
||
|
|
},
|
||
|
|
components: {
|
||
|
|
Child, //侧边栏目
|
||
|
|
Home, //首页
|
||
|
|
},
|
||
|
|
methods: {
|
||
|
|
handleOpen(key) {
|
||
|
|
console.log("key=>", key);
|
||
|
|
this.$store.state.bottomcolumnid = key;
|
||
|
|
this.$router.push({
|
||
|
|
path:
|
||
|
|
"/ChuanDa/" + this.$store.state.columnmessage.id + "/leftmenu/" + key,
|
||
|
|
});
|
||
|
|
getColumnarticle(key, 1).then((res) => {
|
||
|
|
this.$store.state.columnmessage.data = res.list;
|
||
|
|
this.$store.state.columnmessage.total = res.total;
|
||
|
|
});
|
||
|
|
returnColumn(key).then((res) => {
|
||
|
|
// this.$store.state.columnmessage.bgImgUrl = res[0].bgImgUrl;
|
||
|
|
this.$store.state.columnmessage.columnName = res[0].columnName;
|
||
|
|
// this.$store.state.columnmessage.english = res[0].english;
|
||
|
|
this.$store.state.columnmessage.showType = res[0].showType;
|
||
|
|
this.$store.state.columnmessage.styleType = res[0].styleType;
|
||
|
|
this.$store.state.columnmessage.openMethod = res[0].openMethod;
|
||
|
|
console.log(this.$store.state.columnmessage.styleType, 0);
|
||
|
|
});
|
||
|
|
},
|
||
|
|
handleClose(key) {
|
||
|
|
this.$store.state.bottomcolumnid = key;
|
||
|
|
this.$router.push({
|
||
|
|
path:
|
||
|
|
"/ChuanDa/" + this.$store.state.columnmessage.id + "/leftmenu/" + key,
|
||
|
|
});
|
||
|
|
getColumnarticle(key, 1).then((res) => {
|
||
|
|
this.$store.state.columnmessage.data = res.list;
|
||
|
|
this.$store.state.columnmessage.total = res.total;
|
||
|
|
});
|
||
|
|
returnColumn(key).then((res) => {
|
||
|
|
// this.$store.state.columnmessage.bgImgUrl = res[0].bgImgUrl;
|
||
|
|
this.$store.state.columnmessage.columnName = res[0].columnName;
|
||
|
|
// this.$store.state.columnmessage.english = res[0].english;
|
||
|
|
this.$store.state.columnmessage.showType = res[0].showType;
|
||
|
|
this.$store.state.columnmessage.openMethod = res[0].openMethod;
|
||
|
|
this.$store.state.columnmessage.styleType = res[0].styleType;
|
||
|
|
});
|
||
|
|
},
|
||
|
|
},
|
||
|
|
|
||
|
|
watch: {
|
||
|
|
$route(to) {
|
||
|
|
// console.log('变化1')
|
||
|
|
if (to.path.indexOf("/leftmenu/0") > -1) {
|
||
|
|
console.log("变化1");
|
||
|
|
this.id = this.$route.params.id;
|
||
|
|
this.path = this.$route.path;
|
||
|
|
getColumnchildren(this.id).then((res) => {
|
||
|
|
console.log("res=>", res);
|
||
|
|
this.listData = JSON.parse(JSON.stringify(res));
|
||
|
|
if (res.length == 0) {
|
||
|
|
this.$store.state.bottomcolumnid = 0;
|
||
|
|
getColumnarticle(this.id, 1).then((res) => {
|
||
|
|
this.$store.state.columnmessage.data = res.list;
|
||
|
|
returnColumn(this.id).then((data) => {
|
||
|
|
if (res.list.length == 1 && data[0].styleType != 2) {
|
||
|
|
let id = res.list[0].id;
|
||
|
|
this.$router.push({
|
||
|
|
path: `/ChuanDa/${this.$store.state.columnmessage.id}/leftmenu/${this.$store.state.bottomcolumnid}/description/${id}`,
|
||
|
|
});
|
||
|
|
}
|
||
|
|
});
|
||
|
|
this.$store.state.columnmessage.total = res.total;
|
||
|
|
});
|
||
|
|
returnColumn(this.$route.params.id).then((res) => {
|
||
|
|
this.$store.state.columnmessage.bgImgUrl = res[0].bgImgUrl;
|
||
|
|
this.$store.state.columnmessage.columnName = res[0].columnName;
|
||
|
|
this.$store.state.columnmessage.english = res[0].english;
|
||
|
|
this.$store.state.columnmessage.TopColumnname = res[0].columnName; //顶部名称
|
||
|
|
|
||
|
|
this.$store.state.columnmessage.id = res[0].id;
|
||
|
|
this.$store.state.columnmessage.openMethod = res[0].openMethod;
|
||
|
|
this.$store.state.columnmessage.showType = res[0].showType;
|
||
|
|
this.$store.state.columnmessage.styleType = res[0].styleType;
|
||
|
|
});
|
||
|
|
} else {
|
||
|
|
returnColumn(this.$route.params.id).then((res) => {
|
||
|
|
console.log(res,555)
|
||
|
|
this.$store.state.columnmessage.bgImgUrl = res[0].bgImgUrl;
|
||
|
|
this.$store.state.columnmessage.TopColumnname = res[0].columnName;
|
||
|
|
this.$store.state.columnmessage.english = res[0].english;
|
||
|
|
// this.listData.unshift({
|
||
|
|
// columnName: this.$store.state.columnmessage.TopColumnname,
|
||
|
|
// children: [],
|
||
|
|
// id: -1,
|
||
|
|
// });
|
||
|
|
});
|
||
|
|
this.$store.state.bottomcolumnid = res[0].id;
|
||
|
|
|
||
|
|
|
||
|
|
getColumnarticle(res[0].id, 1).then((res) => {
|
||
|
|
console.log("数=>",res)
|
||
|
|
this.$store.state.columnmessage.data = res.list;
|
||
|
|
this.$store.state.columnmessage.total = res.total;
|
||
|
|
// returnColumn(res[0].id).then((res) => {
|
||
|
|
// if (res[0].list.length == 1 && res[0].styleType != 2) {
|
||
|
|
// let id = res.list[0].id;
|
||
|
|
// this.$router.push({
|
||
|
|
// path: `/ChuanDa/${this.$store.state.columnmessage.id}/leftmenu/${this.$store.state.bottomcolumnid}/description/${id}`,
|
||
|
|
// });
|
||
|
|
// }
|
||
|
|
// });
|
||
|
|
});
|
||
|
|
returnColumn(res[0].id).then((res) => {
|
||
|
|
// this.$store.state.columnmessage.bgImgUrl = res[0].bgImgUrl;
|
||
|
|
this.$store.state.columnmessage.showType = res[0].showType;
|
||
|
|
this.$store.state.columnmessage.styleType = res[0].styleType;
|
||
|
|
this.$store.state.columnmessage.openMethod = res[0].openMethod;
|
||
|
|
this.$store.state.columnmessage.columnName = res[0].columnName;
|
||
|
|
// this.$store.state.columnmessage.english = res[0].english;
|
||
|
|
this.$router.push({
|
||
|
|
path: `/ChuanDa/` + this.id + "/leftmenu/" + res[0].id,
|
||
|
|
});
|
||
|
|
});
|
||
|
|
}
|
||
|
|
});
|
||
|
|
} else {
|
||
|
|
getColumnarticle(this.$route.params.a, 1).then((res) => {
|
||
|
|
this.$store.state.columnmessage.data = res.list;
|
||
|
|
this.$store.state.columnmessage.total = res.total;
|
||
|
|
returnColumn(this.$route.params.a).then((data) => {
|
||
|
|
if (res.list.length == 1 && data[0].styleType != 2) {
|
||
|
|
let id = res.list[0].id;
|
||
|
|
this.$router.push({
|
||
|
|
path: `/ChuanDa/${this.$store.state.columnmessage.id}/leftmenu/${this.$store.state.bottomcolumnid}/description/${id}`,
|
||
|
|
});
|
||
|
|
}
|
||
|
|
});
|
||
|
|
});
|
||
|
|
returnColumn(this.$route.params.id).then((res) => {
|
||
|
|
this.$store.state.columnmessage.bgImgUrl = res[0].bgImgUrl;
|
||
|
|
this.$store.state.columnmessage.TopColumnname = res[0].columnName;
|
||
|
|
this.$store.state.columnmessage.english = res[0].english;
|
||
|
|
});
|
||
|
|
returnColumn(this.$route.params.a).then((res) => {
|
||
|
|
// this.$store.state.columnmessage.bgImgUrl = res[0].bgImgUrl;
|
||
|
|
this.$store.state.columnmessage.showType = res[0].showType;
|
||
|
|
this.$store.state.columnmessage.styleType = res[0].styleType;
|
||
|
|
this.$store.state.columnmessage.openMethod = res[0].openMethod;
|
||
|
|
this.$store.state.columnmessage.columnName = res[0].columnName;
|
||
|
|
// this.$store.state.columnmessage.english = res[0].english;
|
||
|
|
});
|
||
|
|
}
|
||
|
|
},
|
||
|
|
},
|
||
|
|
created() {
|
||
|
|
console.log("变化3");
|
||
|
|
this.$store.state.bgImgUrl = null;
|
||
|
|
this.id = this.$route.params.id;
|
||
|
|
this.$store.state.columnmessage.id = this.$route.params.id;
|
||
|
|
this.path = this.$route.path;
|
||
|
|
getColumnchildren(this.id).then((res) => {
|
||
|
|
this.listData = res;
|
||
|
|
if (res.length == 0) {
|
||
|
|
this.$store.state.bottomcolumnid = 0;
|
||
|
|
getColumnarticle(this.id, 1).then((res) => {
|
||
|
|
this.$store.state.columnmessage.data = res.list;
|
||
|
|
this.$store.state.columnmessage.total = res.total;
|
||
|
|
returnColumn(this.id).then((res) => {
|
||
|
|
this.$store.state.columnmessage.bgImgUrl = res[0].bgImgUrl;
|
||
|
|
this.$store.state.columnmessage.columnName = res[0].columnName;
|
||
|
|
this.$store.state.columnmessage.TopColumnname = res[0].columnName;
|
||
|
|
this.$store.state.columnmessage.english = res[0].english;
|
||
|
|
this.$store.state.columnmessage.openMethod = res[0].openMethod;
|
||
|
|
this.$store.state.columnmessage.id = res[0].id;
|
||
|
|
this.$store.state.columnmessage.showType = res[0].showType;
|
||
|
|
this.$store.state.columnmessage.styleType = res[0].styleType;
|
||
|
|
console.log(this.$store.state.columnmessage.styleType, 1);
|
||
|
|
if (
|
||
|
|
this.$store.state.columnmessage.data.length == 1 &&
|
||
|
|
res[0].styleType != 2
|
||
|
|
) {
|
||
|
|
let id = this.$store.state.columnmessage.data[0].id;
|
||
|
|
this.$router.push({
|
||
|
|
path: `/ChuanDa/${this.$store.state.columnmessage.id}/leftmenu/${this.$store.state.bottomcolumnid}/description/${id}`,
|
||
|
|
});
|
||
|
|
}
|
||
|
|
if (this.$route.params.a != 0) {
|
||
|
|
this.$store.state.bottomcolumnid = this.$route.params.a;
|
||
|
|
returnColumn(this.$route.params.a).then((res) => {
|
||
|
|
// this.$store.state.columnmessage.bgImgUrl = res[0].bgImgUrl;
|
||
|
|
this.$store.state.columnmessage.showType = res[0].showType;
|
||
|
|
this.$store.state.columnmessage.openMethod = res[0].openMethod;
|
||
|
|
this.$store.state.columnmessage.styleType = res[0].styleType;
|
||
|
|
this.$store.state.columnmessage.columnName = res[0].columnName;
|
||
|
|
// this.$store.state.columnmessage.english = res[0].english;
|
||
|
|
});
|
||
|
|
getColumnarticle(this.$route.params.a, 1).then((res) => {
|
||
|
|
this.$store.state.columnmessage.data = res.list;
|
||
|
|
this.$store.state.columnmessage.total = res.total;
|
||
|
|
});
|
||
|
|
}
|
||
|
|
});
|
||
|
|
});
|
||
|
|
} else {
|
||
|
|
// console.log("a");
|
||
|
|
this.$store.state.bottomcolumnid = res[0].id;
|
||
|
|
returnColumn(this.id).then((res) => {
|
||
|
|
this.$store.state.columnmessage.bgImgUrl = res[0].bgImgUrl;
|
||
|
|
this.$store.state.columnmessage.TopColumnname = res[0].columnName;
|
||
|
|
this.$store.state.columnmessage.english = res[0].english;
|
||
|
|
// this.listData.unshift({
|
||
|
|
// columnName: this.$store.state.columnmessage.TopColumnname,
|
||
|
|
// children: [],
|
||
|
|
// id: -1,
|
||
|
|
// });
|
||
|
|
console.log("数据=>",this.listData)
|
||
|
|
});
|
||
|
|
if (this.$route.params.a != 0) {
|
||
|
|
// console.log("b");
|
||
|
|
this.$store.state.bottomcolumnid = this.$route.params.a;
|
||
|
|
getColumnarticle(this.$route.params.a, 1).then((res) => {
|
||
|
|
this.$store.state.columnmessage.data = res.list;
|
||
|
|
this.$store.state.columnmessage.total = res.total;
|
||
|
|
returnColumn(this.$route.params.a).then((data) => {
|
||
|
|
// this.$store.state.columnmessage.bgImgUrl = data[0].bgImgUrl;
|
||
|
|
this.$store.state.columnmessage.showType = data[0].showType;
|
||
|
|
this.$store.state.columnmessage.openMethod = data[0].openMethod;
|
||
|
|
this.$store.state.columnmessage.styleType = data[0].styleType;
|
||
|
|
this.$store.state.columnmessage.columnName = data[0].columnName;
|
||
|
|
// this.$store.state.columnmessage.english = data[0].english;
|
||
|
|
if (res.list.length == 1 && data[0].styleType != 2) {
|
||
|
|
let id = res.list[0].id;
|
||
|
|
this.$router.push({
|
||
|
|
path: `/ChuanDa/${this.$store.state.columnmessage.id}/leftmenu/${this.$store.state.bottomcolumnid}/description/${id}`,
|
||
|
|
});
|
||
|
|
}
|
||
|
|
console.log(data, 666);
|
||
|
|
console.log(
|
||
|
|
this.$store.state.columnmessage.styleType,
|
||
|
|
"styleType1"
|
||
|
|
);
|
||
|
|
});
|
||
|
|
});
|
||
|
|
} else {
|
||
|
|
if (this.$route.params.b != undefined) {
|
||
|
|
returnColumn(this.$route.params.id).then((res) => {
|
||
|
|
this.$store.state.columnmessage.styleType = res[0].styleType;
|
||
|
|
console.log(res[0].bgImgUrl, 3);
|
||
|
|
});
|
||
|
|
// console.log("c");
|
||
|
|
return false;
|
||
|
|
}
|
||
|
|
console.log("d");
|
||
|
|
this.$router.push({
|
||
|
|
path: `/ChuanDa/` + this.id + "/leftmenu/" + res[0].id,
|
||
|
|
});
|
||
|
|
getColumnarticle(res[0].id, 1).then((res) => {
|
||
|
|
this.$store.state.columnmessage.data = res.list;
|
||
|
|
this.$store.state.columnmessage.total = res.total;
|
||
|
|
});
|
||
|
|
returnColumn(res[0].id).then((res) => {
|
||
|
|
// this.$store.state.columnmessage.bgImgUrl = res[0].bgImgUrl;
|
||
|
|
this.$store.state.columnmessage.showType = res[0].showType;
|
||
|
|
this.$store.state.columnmessage.openMethod = res[0].openMethod;
|
||
|
|
this.$store.state.columnmessage.styleType = res[0].styleType;
|
||
|
|
this.$store.state.columnmessage.columnName = res[0].columnName;
|
||
|
|
// this.$store.state.columnmessage.english = res[0].english;
|
||
|
|
});
|
||
|
|
}
|
||
|
|
}
|
||
|
|
});
|
||
|
|
},
|
||
|
|
mounted() {
|
||
|
|
|
||
|
|
},
|
||
|
|
computed: {},
|
||
|
|
};
|
||
|
|
</script>
|
||
|
|
|
||
|
|
<style lang="less" scoped>
|
||
|
|
.banner {
|
||
|
|
// display: block;
|
||
|
|
width: 100%;
|
||
|
|
height: 180px;
|
||
|
|
|
||
|
|
.location {
|
||
|
|
position: relative;
|
||
|
|
}
|
||
|
|
}
|
||
|
|
.bannertitle {
|
||
|
|
width: 445px;
|
||
|
|
height: 151px;
|
||
|
|
background: #409eff;
|
||
|
|
opacity: 0.8;
|
||
|
|
position: absolute;
|
||
|
|
right: 46px;
|
||
|
|
top: 99px;
|
||
|
|
font-size: 36px;
|
||
|
|
color: #fff;
|
||
|
|
text-align: center;
|
||
|
|
.english {
|
||
|
|
font-size: 30px;
|
||
|
|
text-transform: uppercase;
|
||
|
|
}
|
||
|
|
p {
|
||
|
|
margin-top: 20px;
|
||
|
|
}
|
||
|
|
}
|
||
|
|
.el-menu {
|
||
|
|
text-align: center;
|
||
|
|
width: 200px;
|
||
|
|
border-right: 0px;
|
||
|
|
float: left;
|
||
|
|
.leftmenutop {
|
||
|
|
line-height: 51px;
|
||
|
|
width: 180px;
|
||
|
|
padding-left: 10px;
|
||
|
|
padding-right: 10px;
|
||
|
|
margin-bottom: 10px;
|
||
|
|
font-size: 18px;
|
||
|
|
p {
|
||
|
|
border-bottom: 2px solid #ccc;
|
||
|
|
}
|
||
|
|
}
|
||
|
|
.el-menu-item {
|
||
|
|
font-size: 16px;
|
||
|
|
}
|
||
|
|
.el-submenu {
|
||
|
|
.el-submenu__title {
|
||
|
|
span {
|
||
|
|
font-size: 16px;
|
||
|
|
}
|
||
|
|
}
|
||
|
|
}
|
||
|
|
}
|
||
|
|
</style>
|