164 lines
4.1 KiB
Vue
164 lines
4.1 KiB
Vue
<template>
|
|
<div class="wrapper">
|
|
<LeftSide :category="category"></LeftSide>
|
|
<div class="main-container">
|
|
<div class="content-wrapper">
|
|
<div v-for="(item,index) in userNavList" :key="index" class="content-section">
|
|
<div :id="item.name" class="content-section-title">{{ item.name }}</div>
|
|
<div class="apps-card" >
|
|
<NavList style="border-color:var(--border-color);border-width: 3px;" :v-if="item.childUC" v-for="(item,index2) in item.childUC" :key="index2" :nav="item"></NavList>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</template>
|
|
|
|
<script>
|
|
import $ from 'jquery'
|
|
import NavList from "@/components/home/NavList.vue";
|
|
import axios from "axios";
|
|
import Vue from "vue";
|
|
import LeftSide from "@/components/home/LeftSide.vue";
|
|
|
|
export default {
|
|
name: "MyNav",
|
|
components: {
|
|
LeftSide,
|
|
NavList
|
|
// MainHeader
|
|
},
|
|
data() {
|
|
return {
|
|
userNavList: [],
|
|
category: [],
|
|
}
|
|
},
|
|
// 监听,当路由发生变化的时候执行
|
|
watch: {
|
|
'$route': 'getPath'
|
|
},
|
|
mounted() {
|
|
this.Fun1();
|
|
this.Fun2();
|
|
this.Fun3();
|
|
this.Fun4();
|
|
this.dropdownFun();
|
|
this.getUserNav();
|
|
this.getCategoriesByUser();
|
|
},
|
|
created() {
|
|
|
|
},
|
|
computed: {},
|
|
methods: {
|
|
getCategoriesByUser(){
|
|
let _this = this;
|
|
if(localStorage.getItem('userId')&&localStorage.getItem('Authorization')){
|
|
axios({
|
|
method: 'post',
|
|
url: '/api/UrlAndCate/disposeBookmarkToJsonByUserId',
|
|
params:{
|
|
userId:localStorage.getItem('userId')
|
|
}
|
|
}).then(function (res) {
|
|
if (res.data.data) {
|
|
_this.category = res.data.data;
|
|
} else {
|
|
return false;
|
|
}
|
|
|
|
}).catch((error) => {
|
|
Vue.prototype.$notify.error({
|
|
title: '错误',
|
|
message: error,
|
|
offset: 0
|
|
});
|
|
})
|
|
}else {
|
|
Vue.prototype.$notify.error({
|
|
title: '错误',
|
|
message: "登录信息失效，请重新登录",
|
|
offset: 0
|
|
});
|
|
}
|
|
|
|
},
|
|
|
|
getPath() {
|
|
document.querySelector(this.$route.query.name).scrollIntoView(true)
|
|
},
|
|
|
|
getUserNav() {
|
|
let _this = this;
|
|
if (localStorage.getItem("userId")&&localStorage.getItem('Authorization')) {
|
|
axios({
|
|
method: 'post',
|
|
url: '/api/UrlAndCate/disposeBookmarkToJson',
|
|
params: {
|
|
userId: localStorage.getItem("userId"),
|
|
}
|
|
}).then(function (res) {
|
|
if (res.data) {
|
|
_this.userNavList = res.data;
|
|
}
|
|
|
|
}).catch((error) => {
|
|
Vue.prototype.$notify.error({
|
|
title: '错误',
|
|
message: error === null ? '' : error,
|
|
offset: 0
|
|
});
|
|
})
|
|
} else {
|
|
Vue.prototype.$notify.error({
|
|
title: '错误',
|
|
message: "请先登录！",
|
|
offset: 0
|
|
});
|
|
}
|
|
|
|
},
|
|
|
|
|
|
Fun1() {
|
|
$(document).click(function (e) {
|
|
var container = $(".status-button");
|
|
var dd = $(".dropdown");
|
|
if (!container.is(e.target) && container.has(e.target).length === 0) {
|
|
dd.removeClass("is-active");
|
|
}
|
|
});
|
|
},
|
|
Fun2() {
|
|
$(".status-button:not(.open)").on("click", function () {
|
|
$(".overlay-app").addClass("is-active");
|
|
});
|
|
$(".pop-up .close").click(function () {
|
|
$(".overlay-app").removeClass("is-active");
|
|
});
|
|
},
|
|
Fun3() {
|
|
$(".status-button:not(.open)").click(function () {
|
|
$(".pop-up").addClass("visible");
|
|
});
|
|
},
|
|
Fun4() {
|
|
$(".pop-up .close").click(function () {
|
|
$(".pop-up").removeClass("visible");
|
|
});
|
|
},
|
|
dropdownFun() {
|
|
const dropdowns = document.querySelectorAll(".dropdown");
|
|
dropdowns.forEach(dropdown => {
|
|
dropdown.addEventListener("click", e => {
|
|
e.stopPropagation();
|
|
dropdowns.forEach(c => c.classList.remove("is-active"));
|
|
dropdown.classList.add("is-active");
|
|
});
|
|
});
|
|
},
|
|
}
|
|
|
|
}
|
|
</script> |