菜单收藏
This commit is contained in:
parent
698fdc823f
commit
0efcc2b62b
|
|
@ -58,3 +58,29 @@ export function delMenu(menuId) {
|
|||
method: 'post'
|
||||
})
|
||||
}
|
||||
|
||||
|
||||
// 新增菜单收藏
|
||||
export function addMenuCollect(data) {
|
||||
return request({
|
||||
url: '/material-mall/menuCollect/add',
|
||||
method: 'post',
|
||||
params: data
|
||||
})
|
||||
}
|
||||
// 删除菜单收藏
|
||||
export function deleteMenuCollect(data) {
|
||||
return request({
|
||||
url: '/material-mall/menuCollect/delete',
|
||||
method: 'post',
|
||||
params: data
|
||||
})
|
||||
}
|
||||
// 查询菜单收藏
|
||||
export function getMenuCollectListApi() {
|
||||
return request({
|
||||
url: '/material-mall/menuCollect/listByUser',
|
||||
method: 'get'
|
||||
})
|
||||
}
|
||||
|
||||
|
|
|
|||
|
|
@ -52,7 +52,7 @@
|
|||
/>
|
||||
</div>
|
||||
|
||||
<div class="right-menu-item hover-effect bar-item">
|
||||
<div class="right-menu-item hover-effect bar-item" @click="goCollection">
|
||||
<span class="bar-text">收藏</span>
|
||||
</div>
|
||||
|
||||
|
|
@ -187,49 +187,54 @@
|
|||
<!-- 列表区域 -->
|
||||
<div class="user-list">
|
||||
<div class="user-item">
|
||||
<i class="el-icon-mobile-phone" style="font-size: 19px; color: #000"></i>
|
||||
<!-- <i class="el-icon-mobile-phone" style="font-size: 19px; color: #000"></i> -->
|
||||
<img src="../../assets/images/sysIcon/phone.png" style="width: 23px; height: 23px; margin-right: 4px;" alt=""/>
|
||||
<span>手机号</span>
|
||||
<span class="right">138****8251</span>
|
||||
</div>
|
||||
<div class="user-item">
|
||||
<i class="el-icon-lock" style="font-size: 19px; color: #000"></i>
|
||||
<!-- <i class="el-icon-lock" style="font-size: 19px; color: #000"></i> -->
|
||||
<img src="../../assets/images/sysIcon/changePwd.png" style="width: 23px; height: 23px; margin-right: 4px;" alt=""/>
|
||||
<span>修改密码</span>
|
||||
</div>
|
||||
<div class="user-item">
|
||||
<i class="el-icon-house" style="font-size: 19px; color: #000"></i>
|
||||
<!-- <i class="el-icon-house" style="font-size: 19px; color: #000"></i> -->
|
||||
<img src="../../assets/images/sysIcon/setHome.png" style="width: 23px; height: 23px; margin-right: 4px;" alt=""/>
|
||||
<span>设置默认首页</span>
|
||||
</div>
|
||||
<div class="user-item" @click="downloadUserManual">
|
||||
<i class="el-icon-download" style="font-size: 19px; color: #000"></i>
|
||||
<!-- <i class="el-icon-download" style="font-size: 19px; color: #000"></i> -->
|
||||
<img src="../../assets/images/sysIcon/download.png" style="width: 23px; height: 23px; margin-right: 4px;" alt=""/>
|
||||
<span>操作手册下载</span>
|
||||
</div>
|
||||
<div class="user-item">
|
||||
<i class="el-icon-t-shirt" style="font-size: 19px; color: #000"></i>
|
||||
<!-- <i class="el-icon-t-shirt" style="font-size: 19px; color: #000"></i> -->
|
||||
<img src="../../assets/images/sysIcon/changeSkin.png" style="width: 23px; height: 23px; margin-right: 4px;" alt=""/>
|
||||
<span>一键换肤</span>
|
||||
</div>
|
||||
<div class="user-item" @click="clearCacheSimple">
|
||||
<i class="el-icon-delete" style="font-size: 19px; color: #000"></i>
|
||||
<!-- <i class="el-icon-delete" style="font-size: 19px; color: #000"></i> -->
|
||||
<img src="../../assets/images/sysIcon/claer.png" style="width: 23px; height: 23px; margin-right: 4px;" alt=""/>
|
||||
<span>清除缓存</span>
|
||||
</div>
|
||||
<div class="user-item">
|
||||
<i class="el-icon-data-analysis" style="font-size: 19px; color: #000"></i>
|
||||
<!-- <i class="el-icon-data-analysis" style="font-size: 19px; color: #000"></i> -->
|
||||
<img src="../../assets/images/sysIcon/testSpeed.png" style="width: 23px; height: 23px; margin-right: 4px;" alt=""/>
|
||||
<span>测试网络速度</span>
|
||||
</div>
|
||||
<div class="user-item" @click="gotoFeedback">
|
||||
<i class="el-icon-edit-outline" style="font-size: 19px; color: #000"></i>
|
||||
<!-- <i class="el-icon-edit-outline" style="font-size: 19px; color: #000"></i> -->
|
||||
<img src="../../assets/images/sysIcon/feedback.png" style="width: 23px; height: 23px; margin-right: 4px;" alt=""/>
|
||||
<span>意见反馈/闭环</span>
|
||||
</div>
|
||||
<div class="user-item" @click="showContactDialog">
|
||||
<i class="el-icon-phone-outline" style="font-size: 19px; color: #000"></i>
|
||||
<!-- <i class="el-icon-phone-outline" style="font-size: 19px; color: #000"></i> -->
|
||||
<img src="../../assets/images/sysIcon/contact.png" style="width: 23px; height: 23px; margin-right: 4px;" alt=""/>
|
||||
<span>联系我们</span>
|
||||
</div>
|
||||
<div class="user-item logout" @click="logout">
|
||||
<!-- <i class="el-icon-refresh-left" style="font-size: 19px; color: #000;"></i> -->
|
||||
<img
|
||||
src="../../assets/images/loginOutIcon.png"
|
||||
style="width: 16px; height: 16px; margin-right: 10px"
|
||||
alt=""
|
||||
/>
|
||||
<img src="../../assets/images/sysIcon/loginOutIcon.png" style="width: 23px; height: 23px; margin-right: 4px;" alt=""/>
|
||||
<span>退出</span>
|
||||
</div>
|
||||
</div>
|
||||
|
|
@ -311,8 +316,8 @@
|
|||
|
||||
<div v-else class="menu-title" @click="goRoute(c2)">
|
||||
<span class="child-left">- {{ c2.meta.title }}</span>
|
||||
<span class="menu-star">
|
||||
<img src="@/assets/images/star.png" style="width: 10px; height: 9px" />
|
||||
<span class="menu-star" :class="{noCollect:c2.isCollect==0,isCollect:c2.isCollect==1}">
|
||||
<img src="@/assets/images/star.png" style="width: 10px; height: 9px" @click.prevent.stop="handleCollection(c2)"/>
|
||||
</span>
|
||||
</div>
|
||||
</div>
|
||||
|
|
@ -322,8 +327,8 @@
|
|||
<div v-else class="menu-title" @click="goRoute(child)">
|
||||
<div class="children-title-tip"></div>
|
||||
<span style="color: #095a4d">{{ child.meta.title }}</span>
|
||||
<span class="menu-star">
|
||||
<img src="@/assets/images/star.png" style="width: 10px; height: 9px" />
|
||||
<span class="menu-star" :class="{noCollect:child.isCollect==0,isCollect:child.isCollect==1}">
|
||||
<img src="@/assets/images/star.png" style="width: 10px; height: 9px" @click.prevent.stop="handleCollection(child)"/>
|
||||
</span>
|
||||
</div>
|
||||
</div>
|
||||
|
|
@ -332,7 +337,7 @@
|
|||
</div>
|
||||
</div>
|
||||
<!-- 收藏菜单 -->
|
||||
<el-drawer :withHeader="false" size="20%" :show-close="false" :visible.sync="drawerShow" :direction="rtl" class="custom-drawer">
|
||||
<el-drawer :withHeader="false" size="20%" :show-close="false" :visible.sync="drawerShow" direction="rtl" class="custom-drawer">
|
||||
<div class="myCollect-box">
|
||||
<div class="myCollect-box-title">
|
||||
<div style="font-size: 20px;color: #333943;font-weight: 600;">我的收藏</div>
|
||||
|
|
@ -343,8 +348,8 @@
|
|||
<div class="myCollect-box-zhineng-title">收藏菜单</div>
|
||||
<div style="width: 100%;overflow-y: auto;max-height: 78vh;">
|
||||
<div v-for="(item,index) in zhinengList" :key="index" class="myCollect-box-zhineng-item" :class="{ itemActive: isHover==index }" @mouseover="isHover=index" @mouseleave="isHover = -1">
|
||||
<div style="display: flex;align-items: center;" @click="gotoPage(item)"><img src="../../assets/images/catchIcon.png" style="width: 16px;height: 16px;margin-right: 5px;" alt=""> <span>{{ item.name }}</span> </div>
|
||||
<div style="color: #33c2ac;" v-show="isEdit==true">取消</div>
|
||||
<div style="display: flex;align-items: center;" @click="gotoPage(item)"><img src="../../assets/images/catchIcon.png" style="width: 16px;height: 16px;margin-right: 5px;" alt=""> <span>{{ item.menuName }}</span> </div>
|
||||
<div style="color: #33c2ac;" v-show="isEdit==true" @click="delCollect(item)">取消</div>
|
||||
</div>
|
||||
<div style="width: 100%;display: flex;align-items: center;justify-content: center;" v-if="zhinengList.length==0">
|
||||
<div>
|
||||
|
|
@ -404,6 +409,8 @@
|
|||
import { mapGetters } from 'vuex'
|
||||
import Search from '@/components/HeaderSearch'
|
||||
import { getUserProfile } from '@/api/system/user'
|
||||
import { addMenuCollect,deleteMenuCollect,getMenuCollectListApi } from '@/api/system/menu'
|
||||
|
||||
|
||||
export default {
|
||||
components: { Search },
|
||||
|
|
@ -479,6 +486,9 @@ export default {
|
|||
})
|
||||
},
|
||||
},
|
||||
changCollectStatus() {
|
||||
return
|
||||
},
|
||||
},
|
||||
created() {
|
||||
this.getUser()
|
||||
|
|
@ -503,6 +513,36 @@ export default {
|
|||
goTodo() {
|
||||
// this.$router.push({ path: '/todo' }) // 替换为实际的待办页路由
|
||||
},
|
||||
async getMenuCollectList(){
|
||||
try {
|
||||
const res = await getMenuCollectListApi()
|
||||
if(res.code==200){
|
||||
this.zhinengList = res.data;
|
||||
}else{
|
||||
this.zhinengList = []
|
||||
}
|
||||
console.log(res)
|
||||
} catch (error) {
|
||||
console.error(error)
|
||||
}
|
||||
},
|
||||
goCollection(){
|
||||
this.getMenuCollectList()
|
||||
this.isEdit=false
|
||||
this.drawerShow=true
|
||||
},
|
||||
gotoPage(item){
|
||||
this.drawerShow=false
|
||||
this.isEdit=false
|
||||
this.$router.replace({ path: '/'+item.fullRoutePath })
|
||||
},
|
||||
async delCollect(item){
|
||||
let param = {
|
||||
menuId:item.menuId
|
||||
}
|
||||
const res = await deleteMenuCollect(param)
|
||||
this.getMenuCollectList()
|
||||
},
|
||||
goMessageDetail(item) {
|
||||
this.$refs.messagePopover.doClose() // 关闭消息弹窗
|
||||
// this.$router.push({ path: '/message/detail', query: { id: item.id } }); // 跳消息详情
|
||||
|
|
@ -619,7 +659,67 @@ export default {
|
|||
handleBoxLeave() {
|
||||
this.showMenuBox = false
|
||||
},
|
||||
async handleCollection(route) {
|
||||
console.log("route2",route)
|
||||
if(route.isCollect==0){
|
||||
try {
|
||||
let param = {
|
||||
menuId:route.id
|
||||
}
|
||||
const res = await addMenuCollect(param)
|
||||
if (res.code === 200) {
|
||||
this.$message.success('菜单收藏成功')
|
||||
this.$nextTick(()=>{
|
||||
this.changCollection(this.menuList,route.id,1)
|
||||
})
|
||||
this.$forceUpdate()
|
||||
this.showMenuBox = false
|
||||
} else {
|
||||
this.$message.error(res.msg || '菜单收藏失败')
|
||||
this.changCollection(this.menuList,route.id,0)
|
||||
}
|
||||
} catch (error) {
|
||||
this.$message.error('菜单收藏失败：' + (error.message || '未知错误'))
|
||||
console.error(error)
|
||||
}
|
||||
}else if(route.isCollect==1){
|
||||
try {
|
||||
let param = {
|
||||
menuId:route.id
|
||||
}
|
||||
const res = await deleteMenuCollect(param)
|
||||
if (res.code === 200) {
|
||||
this.$message.success('取消收藏成功')
|
||||
this.changCollection(this.menuList,route.id,0)
|
||||
this.$nextTick(()=>{
|
||||
this.changCollection(this.menuList,route.id,0)
|
||||
})
|
||||
this.$forceUpdate()
|
||||
this.showMenuBox = false
|
||||
} else {
|
||||
this.$message.error(res.msg || '取消收藏失败')
|
||||
this.changCollection(this.menuList,route.id,1)
|
||||
}
|
||||
} catch (error) {
|
||||
this.$message.error('取消收藏失败：' + (error.message || '未知错误'))
|
||||
console.error(error)
|
||||
}
|
||||
}
|
||||
},
|
||||
changCollection(array,targetId,status){
|
||||
for (let obj of array) {
|
||||
if (obj.id === targetId) {
|
||||
this.$set(obj,"isCollect",status)
|
||||
obj.isCollect=status;
|
||||
}
|
||||
// 如果当前对象有子数组，递归搜索
|
||||
if (obj.children && Array.isArray(obj.children)) {
|
||||
this.changCollection(obj.children, targetId, status);
|
||||
}
|
||||
}
|
||||
},
|
||||
goRoute(route) {
|
||||
console.log("route",route)
|
||||
if (route.fullPath) {
|
||||
this.$router.push({ path: route.fullPath, query: route.query })
|
||||
this.showMenuBox = false
|
||||
|
|
@ -639,6 +739,47 @@ export default {
|
|||
}
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
.custom-drawer{
|
||||
::v-deep.el-drawer.rtl{
|
||||
border-top-left-radius: 10px;
|
||||
border-bottom-left-radius: 10px;
|
||||
}
|
||||
}
|
||||
.myCollect-box{
|
||||
width: 100%;height: 100%;background: #FAFAFA;overflow-y: auto;
|
||||
}
|
||||
.myCollect-box-title{
|
||||
width: 100%;height: 66px;display: flex;align-items: center;padding:0 20px;justify-content: space-between;background: #FFF;margin-bottom: 10px;
|
||||
}
|
||||
.myCollect-box-zhineng{
|
||||
padding: 16px;
|
||||
margin-bottom: 10px;
|
||||
background-color: #fff;
|
||||
}
|
||||
.myCollect-box-zhineng-title{
|
||||
font-size: 18px;
|
||||
color: #333;
|
||||
font-weight: 600;
|
||||
text-align: left;
|
||||
margin-bottom: 10px;
|
||||
}
|
||||
.myCollect-box-zhineng-item{
|
||||
padding: 8px 5px;
|
||||
cursor: pointer;
|
||||
display: flex;
|
||||
border-radius: 5px;
|
||||
justify-content: space-between;
|
||||
color: #000;
|
||||
font-size: 12px;
|
||||
}
|
||||
.itemActive{
|
||||
background-color: #e8f8f6;
|
||||
color: #33c2ac;
|
||||
}
|
||||
|
||||
</style>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
.navbar {
|
||||
width: 100%;
|
||||
|
|
@ -863,7 +1004,10 @@ export default {
|
|||
transition: opacity 0.2s;
|
||||
}
|
||||
/* hover 当前行时，显示星标 */
|
||||
.menu-title:hover .menu-star {
|
||||
.menu-title:hover .noCollect {
|
||||
opacity: 0.5;
|
||||
}
|
||||
.menu-title:hover .isCollect{
|
||||
opacity: 1;
|
||||
}
|
||||
.title-tip {
|
||||
|
|
|
|||
Loading…
Reference in New Issue