<template> <div> <title-bar :title="title" @clickLeft="onClick"> <van-icon slot="left" name="cross" size="24" /> </title-bar> <div class="text-content"> <div class="text-content-left"> <van-sidebar @change="onChange" style="width: 100%" line-height="100px" v-model="activeKey"> <van-sidebar-item v-for="(item, index) in CommonFunctionsList" :key="index" class="label" :title="item.name" /> </van-sidebar> </div> <div class="text-content-right"> <!-- 贷款催收 --> <collection-management v-if="CommonFunctionsList[activeKey].menuId == MENUS.PERSONAL_LOAN_COLLECTION.code"></collection-management> <!-- 贷后检查 --> <AfterLoan v-if="CommonFunctionsList[activeKey].menuId == MENUS.PERSONAL_LOAN_CHECK_CY.code"></AfterLoan> <!-- 中小营销 --> <SMEMarketingPool v-if="CommonFunctionsList[activeKey].menuId == MENUS.ZX_MARKETING_CY.code"></SMEMarketingPool> </div> </div> </div> </template> <script lang="ts"> import { Component, Vue } from "vue-property-decorator"; import TitleBar from "@/components/general/TitleBar.vue"; import { Sidebar, SidebarItem } from "vant"; import CollectionManagement from "@/components/workbench/personal-common-functions/agency-task/CollectionManagement.vue"; import AfterLoan from "@/components/workbench/personal-common-functions/agency-task/AfterLoan.vue"; import SMEMarketingPool from "@/components/workbench/SME-common-functions/SMEMarketingPool.vue"; import {MENU} from "@/constants/enum/menu.enum"; Vue.use(Sidebar); Vue.use(SidebarItem); /** * @Description 常用功能 * @Author JiangTao * @Date 2021-10-25 下午 08:55 */ @Component({ name: "CommonFunctions", components: { TitleBar, CollectionManagement, AfterLoan, SMEMarketingPool }, }) export default class CommonFunctions extends Vue { activeKey: any = 0; title = "常用功能"; // 页面标题 CommonFunctionsList: any = [ // {AgencyName: "催收管理", iconName: "", actionType: "CSGL", path: "/CollectionManagement"}, // {AgencyName: "个人贷后检查", iconName: "", actionType: "DHJC", path: "/AfterLoan"}, // {AgencyName: "中小营销", iconName: "", actionType: "ZXYX", path: "/AfterLoan"}, ]; MENUS = MENU; onClick() { console.log(111111); this.$router.go(-1); } created() { const data: any = sessionStorage.getItem('menuListYx') this.CommonFunctionsList = JSON.parse(data); console.log(this.CommonFunctionsList); console.log(this.$route.query.menuName); const menuName = this.$route.query.menuName, _this = this; for (const index in this.CommonFunctionsList){ if(this.CommonFunctionsList[index].name == menuName){ _this.activeKey = index; } } } onChange() { sessionStorage.setItem("CYactiveKey", this.activeKey); } } </script> <style scoped> .text-content { width: 100%; height: calc(100vh - 60px); display: flex; justify-content: flex-start; } .text-content-left { width: 25%; background-color: rgba(245, 245, 245, 1); border: 1px solid rgba(222, 222, 222, 1); } .text-content-right { width: 75%; } .label { border-bottom: 1px solid #e0e1e2; } van-sidebar-item { } ::v-deep .van-sidebar-item--select::before { background-color: #FF574C; height: 100%; } ::v-deep .van-sidebar-item__text { font-size: 18px; } ::v-deep .text-content-left { z-index: 2100; height: calc(100vh - 60px); overflow-y: auto; } ::v-deep .van-sidebar-item__text:before { content: "😊"; /*content: url("../../../../assets/images/logo.png");*/ width: 30px; height: 30px; border-radius: 5px; } ::v-deep .van-sidebar-item--select > div:before { background-color: #00a3ff; } </style>