DESKTOP-812G6RA\PROW_006
9 days ago ee0581277156325f60fe3a1edfd8ac1645a77ec6
commit | author | age
2f1bb0 1 <template>
C 2   <div class="home">
3     <el-container>
4       <el-header>
5         <div class="top">
6           <div class="left">
7             <el-menu
8               :default-active="$route.id"
9               class="el-menu-demo"
10               mode="horizontal"
11               @select="handleSelect"
12               background-color="#f59b24"
13               text-color="#fff"
14               active-text-color="#409EFF"
15               router
16             >
17               <el-menu-item
18                 v-for="(item, index) in nav"
19                 :key="index"
20                 :index="item.id"
21               >
22                 <template slot="title"
23                   ><div class="menu-show">
24                     <span :class="item.icon"></span><div class="menu-title">{{ item.title }}</div>
25                   </div></template
26                 >
27               </el-menu-item>
28             </el-menu>
29           </div>
30           <div class="serch">
31             <el-input
32               placeholder="搜索关键字"
33               suffix-icon="el-icon-search"
34               v-model="input1"
35               clearable
36             >
37             </el-input>
38           </div>
39           <div class="right">
40             <div @click="goHome">
41               <img src="../../public/img/order/home.gif" alt="">
42             </div>
43             <div class="right-msg">
44               <el-dropdown trigger="click">
45                 <span class="el-dropdown-link">
46                   <el-badge class="mark" :value="15"
47                     ><img src="../../public/img/order/msg.gif" alt=""></el-badge>
48                 </span>
49                 <el-dropdown-menu slot="dropdown">
50                   <el-dropdown-item class="clearfix">
51                     评论
52                     <el-badge class="mark" :value="12" />
53                   </el-dropdown-item>
54                   <el-dropdown-item class="clearfix">
55                     回复
56                     <el-badge class="mark" :value="3" />
57                   </el-dropdown-item>
58                 </el-dropdown-menu>
59               </el-dropdown>
60             </div>
61             <div class="right-avtar">
62               <el-dropdown trigger="click" >
63                 <span class="el-dropdown-link">
64                   <div class="avtar-quit">
65                     <el-avatar :size="30" :src="circleUrl"></el-avatar>
66                     <span class="el-icon-arrow-down el-icon--right"></span>
67                   </div>
68                 </span>
69                 <el-dropdown-menu slot="dropdown">
70                   <el-dropdown-item class="clearfix" 
71                     ><span @click="logout">退出登录</span></el-dropdown-item
72                   >
73                   <el-dropdown-item class="clearfix" >修改密码</el-dropdown-item>
74                 </el-dropdown-menu>
75               </el-dropdown>
76             </div>
77           </div>
78         </div>
79       </el-header>
80       <el-main>
81         <el-tabs
82           v-model="activeIndex"
83           closable
84           @tab-click="tabClick"
85           v-if="options.length"
86           @tab-remove="tabRemove"
87           type="border-card"
88         >
89           <el-tab-pane
90             :key="item.route"
91             v-for="(item) in options"
92             :label="item.name"
93             :name="item.route"
94           >
95             <router-view>
96               <!-- 这里是不被缓存的视图组件 -->
97             </router-view>
98           </el-tab-pane>
99         </el-tabs>
100
101         <!-- <transition name="fade" mode="out-in">
102           <keep-alive>
103             <router-view v-if="$route.meta.keepAlive">
104            
105             </router-view>
106           </keep-alive>
107         </transition>
108         <transition name="fade" mode="out-in">
109           <router-view v-if="!$route.meta.keepAlive">
110           
111           </router-view>
112         </transition> -->
113       </el-main>
114     </el-container>
115   </div>
116 </template>
117 <script>
118 export default {
119   data() {
120     return {
121       nav: [
122          { id: "/daytask", icon: "el-icon-setting", title: "当日任务" },
123           { id: "/task", icon: "el-icon-setting", title: "任务列表" },
ee0581 124           { id: "/PersonalCenter", icon: "el-icon-setting", title: "个人中心" },
2f1bb0 125        
C 126         
127       ],
128       
129       input1: "",
130       circleUrl:
131         "https://cube.elemecdn.com/3/7c/3ea6beec64369c2642b92c6726f1epng.png",
132     };
133   },
134
135   computed: {
136     options() {
137       return this.$store.state.options;
138     },
139     activeIndex: {
140       get() {
141         return this.$store.state.activeIndex;
142       },
143       set(val) {
144         this.$store.commit("set_active_index", val);
145       },
146     },
147   },
148   watch: {
149     $route(to) {
150       let flag = false;
151       for (let option of this.options) {
152         if (option.route === to.path) {
153           flag = true;
154           this.$store.commit("set_active_index", to.path);
155           break;
156         }
157       }
158       if (!flag) {
159         this.$store.commit("add_tabs", { route: to.path, name: to.name });
160         this.$store.commit("set_active_index", to.path);
161       }
162     },
163   },
164   methods: {
165     logout() {
166   
167         this.$axios.post("/api/Account/LogoutApi").then(res=>{
168             if(res.data.IsSuccess){
169               this.$message({message:res.data.Content,type:'success'});
170               window.sessionStorage.removeItem('token');
171               window.sessionStorage.removeItem('user');
172                this.$router.push("/");
173             }
174         }).catch(err=>{
175             console.log(err);
176         })
177     },
178     goHome(){
179         this.$router.push("/");
180     },
181     handleSelect(key, keyPath) {
182       console.log(key, keyPath);
183     },
184     // tab切换时,动态的切换路由
185     tabClick(tab) {
186       let path = this.activeIndex;
187    
188       this.$router.replace({ path: path });
189     },
190     tabRemove(targetName) {
191       // 首页不可删除
192       if (targetName == "/order") {
193         return;
194       }
195       this.$store.commit("delete_tabs", targetName);
196       if (this.activeIndex === targetName) {
197         // 设置当前激活的路由
198         if (this.options && this.options.length >= 1) {
199           this.$store.commit(
200             "set_active_index",
201             this.options[this.options.length - 1].route
202           );
203           this.$router.replace({ path: this.activeIndex });
204         } else {
205           this.$router.replace({ path: "/order" });
206         }
207       }
208     },
209   },
210 };
211 </script>
212 <style lang="less" scoped>
213 .el-header,
214 .el-footer {
215   background-color: #f59b24;
216   color: #fff;
217   height: 49px !important;
218   // text-align: center;
219   //   line-height: 60px;
220 }
221 .left{
222   // padding-left: 88px;
223   overflow: hidden;
224 }
225 .left,
226 .top,
227 .right {
228   display: flex;
229   align-items: center;
230 }
231 .top {
232   justify-content: space-between;
233   height: 49px  !important;
234   box-sizing: border-box;
235 }
236 .top i {
237   font-size: 25px;
238   color: #fff;
239 }
240 .menu-show {
241   display: flex;
242   align-items: center;
243 }
244 .menu-show span {
245   margin-right: 13px;
246   font-size: 25px;
247   margin-left: 50px;
248 }
249 .right-msg {
250   padding: 0 20px;
251 }
252 .right-msg {
253   /deep/.el-badge__content.is-fixed {
254     transform: translateY(-36%) translateX(80%);
255   }
256 }
257 .right-avtar .avtar-quit {
258   display: flex;
259   align-items: center;
260   color: #fff;
261 }
262 .el-main{
263     padding: 0px;
264 }
265 .serch{
266   /deep/.el-input{
267     width: 255px;
268   }
269   /deep/.el-input__inner{
270       height: 27px;
271       line-height: 27px;
272   }
273   /deep/.el-input__icon{
274     line-height: 27px;
275   }
276
277 }
278 @media screen and(max-width:1299px) {
279   .menu-show .menu-title{
280     display: none;
281   }
282   .menu-show span {
283   margin-right: 0px;
284   margin-left: 0px;
285   }
286   .left{
287   padding-left: 0px;
288   }
289   .menu-show{
290     display: block;
291   }
292 }
293
294 </style>