Breadcrumbs added except : order list / shopping cart / coupon list / address management

rc-busness/components/tabs.vue

@@ -1,9 +1,9 @@
 <template>
- <div class="crumbs" v-if="showTab">
+ <div class="ts-crumbs rc-max-width--xl rc-padding-y--md" v-if="showTab" :style="crumbStyle">
 	<el-breadcrumb separator-class="el-icon-arrow-right">
 		<el-breadcrumb-item to="/" >{{ this.homepageName }}</el-breadcrumb-item>
 		
-		<el-breadcrumb-item :to=item.path   v-for="(item, index) in crumbs"
+		<el-breadcrumb-item :to=item.path   v-for="(item, index) in displayData"
 		:key="index">{{ item.title }}</el-breadcrumb-item>
 	</el-breadcrumb>
   </div>
@@ -11,171 +11,68 @@
 
 <script>
 import { mapState, mapMutations } from "vuex";
-
+import tabs from "~/components/tabs.vue";
 export default {
-	props:["crumbs"],
+	props:["crumbs","crumbStyle"],
 	name:"crumbs",
     data() {
 		return {
-			homepageName:'首页'
+			displayData:[],
+			homepageName:'定制营养方案',
+			nameMapping:{
+				'/productdetails/productlist':'产品分类',
+				'/usersearch/search':'产品搜索',
+				'/personal/mypersonal':'个人中心',
+				'/personal/usermember/':'会员权益',
+				'/personal/integral/':'积分明细'
+			},
 		};
 	},
 	created(){
 		if(this.showTab != false)
 			this.showTab=true;
+		this.build();
 	},
 	watch: {
+		crumbs(val) {
+			this.crumbs = val;
+			this.build();
+		}
 	},
 	mounted() {
 	},
 
 	methods: {
-		...mapMutations(["changemessage",'selectMenu'])
+		...mapMutations(["changemessage",'selectMenu']),
+		build() {
+			let _self = this;
+			this.displayData=[];
+			this.crumbs.forEach(function(ele,index){
+				let displayObj= {path:'',title:''};
+				if(ele.path) {
+					displayObj.path = ele.path;
+					for(let path in _self.nameMapping) {
+						if(ele.path.indexOf(path)>-1) {
+							displayObj.path = path;
+							displayObj.title = _self.nameMapping[path];
+						}
+					}
+				}
+				if(ele.title) {
+					displayObj.title = ele.title;
+				}
+				_self.displayData.push(displayObj);
+			});
+		}
 	}
 };
 </script>
 
 <style lang="less" scoped>
-.crumbs{
-  width: 93%;
-  margin: 0 auto;
-  display: flex;
-  height: 40px;
-  align-items: center;
-  margin-top: 70px;
+/deep/.el-breadcrumb__inner.is-link:hover {
+	color:#E2001A;
 }
-.tags-scroll-content {
-  position: relative;
-  box-sizing: border-box;
-  width: 100%;
-  height: 43px;
-  z-index: 0;
-  overflow: hidden;
-  // padding: 0 66px 0 21px;
-}
-.tabs {
-   user-select: none;
-  z-index: 20;
-  width: 100%;
-
-  height: 43px;
-  top: 60px;
-  height: 42px;
-  background: white;
-  .tag {
-    display: inline-block;
-    height: 43px;
-    // position: absolute;
-    padding-right: 40px;
-    width: 100%;
-    overflow-x: auto;
-    white-space: nowrap;
-  }
-  .tags-scroll-content > i {
-    height: 40px;
-    line-height: 40px;
-    background: white;
-    cursor: pointer;
-    z-index: 1;
-    font-size: 16px;
-  }
-  .el-icon-arrow-left {
-    position: absolute;
-    left: 0;
-    width: 21px;
-    box-shadow: 0px 1px 8px 0px rgba(70, 70, 70, 0.32);
-  }
-  .el-icon-arrow-right {
-    position: absolute;
-    right: 40px;
-    width: 21px;
-  }
-  .close {
-    position: absolute;
-    right: 0;
-    top: 0;
-    color: black;
-    background: white;
-    height: 40px;
-    padding-left: 15px;
-    line-height: 40px;
-    width: 40px;
-    border-left: 1px solid #f1f1f1 !important;
-    font-size: 16px;
-    cursor: pointer;
-  }
- .el-tag--dark {
-    background: white;
-    em {
-      display: inline-block;
-      vertical-align: middle;
-      height: 5px;
-      margin-right: 7px;
-      width: 5px;
-      border-radius: 50%;
-      background-color: #85ef47 !important;
-      box-shadow: 0 0 7px #b7eb8f;
-    }
-  }
- .el-tag--dark {
-    color: #323233 !important;
-    .el-icon-close {
-      color: black !important;
-    }
-  }
- .el-tag {
-      .el-icon-close {
-        font-size: 16px;
-        &:hover {
-          color: red !important;
-          background: white !important;
-        }
-        display: inline-block;
-      
-    }
-    // width: 140px;
-    em {
-      display: inline-block;
-      vertical-align: middle;
-      height: 5px;
-      margin-right: 7px;
-      width: 5px;
-      border-radius: 50%;
-      background-color: white;
-    }
-    cursor: pointer;
-    height: 40px;
-    line-height: 40px;
-    display: inline-block;
-    text-align: center;
-    padding: 0;
-    color: #969799;
-    font-size: 13px;
-    float: left;
-    border-radius: 0;
-    border: 0;
-    > span {
-      display: inline-block;
-      vertical-align: middle;
-    }
-    i {
-      display: inline-block;
-      vertical-align: middle;
-      top: 0px;
-      
-    }
-    .el-tag__close {
-      right: 0px;
-      color: #777777;
-      &:hover {
-        color: white;
-      }
-    }
-    .el-xie{
-      list-style: none;
-      font-style: normal;
-      margin: 0 8px;
-    }
-  }
+.ts-crumbs{
+	padding-left:1.25rem;
 }
 </style>