添加面包屑以及其它

rc-busness/assets/css/producted.less

@@ -1,5 +1,47 @@
 // 手机端
 @media screen and(min-width: 320px) and(max-width:768px) {
+  .rc-fixright{
+    width: 0.60rem;
+    height: 1.81rem;
+    background: #FFFFFF;
+    box-shadow: 0px 0px 0.10rem rgba(0, 0, 0, 0.16);
+    border-radius: 0.04rem;
+    position: fixed;
+    right: 0;
+    top: 30%;
+    display: flex;
+    flex-direction: column;
+    z-index: 9999;
+    ul{
+    height: 100%;
+    li{
+      width: 100%;
+      display: flex;
+      flex-direction: column;
+      justify-content: center;
+      align-items: center;
+      margin-top: 0.08rem;
+    }
+    }
+    img{
+    width: 0.30rem;
+    height: 0.30rem;
+    display: block;
+    }
+    
+    img{
+    width: 0.30rem;
+    height: 0.30rem;
+    display: block;
+    }
+    span{
+    font-size: 0.12rem;
+    color: #666666;
+    }
+    }
+  .rc-top{
+		margin-top: 0;
+	}
               .rc-button{
           width: 100%;
           display: flex;

rc-busness/components/tabs.vue

@@ -0,0 +1,250 @@
+<template>
+ <div class="crumbs" v-if="showTab">
+ <el-breadcrumb separator-class="el-icon-arrow-right">
+  <el-breadcrumb-item :to=item.path   v-for="(item, index) in titleLists"
+        :key="index">{{ item.meta.title }}</el-breadcrumb-item>
+  <!-- <el-breadcrumb-item>商品管理</el-breadcrumb-item>
+  <el-breadcrumb-item>商品分类</el-breadcrumb-item> -->
+</el-breadcrumb>
+   
+  </div>
+</template>
+
+<script>
+import { mapState, mapMutations } from "vuex";
+
+export default {
+    data() {
+    return {
+      title: "",
+      path: "",
+      titleLists: [
+       {
+             path: '/',
+    name: 'index',
+    meta:{
+      title: '首页',
+ 
+    }
+       }
+
+      ],
+      showTab: true,
+      isShow: true,
+    };
+  },
+
+
+    watch: {
+    $route() {
+      this.setTitle();
+    },
+  },
+  mounted() {
+    this.setTitle(); 
+  },
+
+  methods: {
+    ...mapMutations(["changemessage",'selectMenu']),
+       setTitle() {
+              console.log(this.$route.matched);
+              console.log(this.titleLists);
+                    let userinfo=[]
+   
+
+ let saveUserInfo={
+    path:'admin',
+   name:'1',
+   meta:'b341181c-aced-11e9-89bf-00163e0e8daf',
+
+ }
+   userinfo.push(this.$route.matched);
+   let list=[];
+   console.log(userinfo);
+   userinfo.map(item=>{
+      console.log(item);
+      list=item;
+   })
+ console.log(list);
+ let anlist={
+    path:'admin',
+   name:'1',
+   meta:'b341181c-aced-11e9-89bf-00163e0e8daf',
+ }
+   list.forEach(element=>{
+     console.log(element);
+     anlist=element
+   })
+                 for(let i in list){
+                   saveUserInfo.path=list[i].path;
+                      saveUserInfo.name=list[i].name;
+                      saveUserInfo.meta=list[i].meta;
+                   }
+                        console.log(saveUserInfo);
+                // store.commit('se', current.name);
+               this.selectMenu({ data: saveUserInfo });
+      console.log(this.$store.state.tabsList);
+      this.titleLists=this.$store.state.tabsList;
+      // console.log(userlisa);
+      console.log(this.titleLists);
+    },
+  },
+  // created(){
+  //  let user=this.$store.state.tabsList;
+  //    this.tags=user;
+  //    console.log(this.tags);
+  //   console.log(user);
+  //    console.log(this.$store.state.tabsList)
+  // },
+  
+  // mounted(){
+ 
+  // }
+
+};
+</script>
+
+<style lang="less" scoped>
+.crumbs{
+  width: 93%;
+  margin: 0 auto;
+  display: flex;
+  height: 40px;
+  align-items: center;
+  margin-top: 70px;
+}
+.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;
+    }
+  }
+}
+</style>

rc-busness/components/unlogin.vue

@@ -0,0 +1,86 @@
+<template>
+  	<div class="rc-login">
+		<div class="userunlogin" v-show="userunlogin" @click="userlogin">
+			<div class="user-left">
+				<img src="../assets/image/rc-people.png" alt="">
+				<span>
+					登录/注册
+				</span>
+			</div>
+			<div class="user-right">
+				<img src="../assets/image/rc-left.png" alt="">
+			</div>
+		</div>
+	</div>
+</template>
+
+<script>
+export default {
+data(){
+    return{
+        userunlogin:false,
+
+    }
+},
+methods:{
+       //用户登录
+        userlogin(){
+       this.$router.push({
+        path: "/userlogin/login",
+        query: {
+          stype: 1,
+        },
+      });
+        },
+},
+mounted(){
+    //获取缓存是否登录
+ let islogin=JSON.parse(localStorage.getItem("userInfo"));
+ console.log(islogin);
+ if(islogin==null){
+   this.userunlogin=true;
+   console.log(this.userunlogin);
+ }
+ if(islogin==null ||islogin==undefined){
+                  this.userunlogin=true
+            }
+}
+}
+</script>
+
+<style lang="less" scoped >
+.rc-login{
+    width: 92%;
+    margin: 0 auto;
+    margin-top: 0.70rem;
+      .userunlogin{
+    width: 100%;
+    height: 0.60rem;
+    display: flex;
+    justify-content: space-between;
+    align-items: center;
+    .user-left{
+      display: flex;
+      align-items: center;
+      img{
+            width: 0.16rem;
+            height: 0.16rem;
+            display: block;
+      }
+      span{
+        color: #444444;
+        font-size: 0.16rem;
+       margin-left: 0.06rem;
+      }
+    }
+    .user-right{
+      img{
+        width: 0.08rem;
+        height: 0.16rem;
+        display: block;
+      }
+    }
+    
+   }
+}
+</style>

rc-busness/middleware/metaTitle.js

@@ -0,0 +1,7 @@
+
+export default ({store, route, redirect}) => {
+    route.matched.forEach((item, index) => {
+        item.meta.title = route.meta[index].title || '';
+        item.meta.redirect = route.meta[index].redirect || '';//设置重定向
+    })
+}

rc-busness/nuxt.config.js

@@ -1,4 +1,4 @@
-const rem = '!function(e){var t,n=document,i=window,o=n.documentElement;function u(){var t=o.getBoundingClientRect().width/e*100;o.style.fontSize=t+"px"}u(),i.addEventListener("resize",function(){clearTimeout(t),t=setTimeout(u,300)},!1),i.addEventListener("pageshow",function(e){e.persisted&&(clearTimeout(t),t=setTimeout(u,300))},!1)}(750);';
+
 
 export default {
   
@@ -14,10 +14,8 @@ export default {
       // { src: '/js/flexible.js', type: 'text/javascript', charset: 'utf-8'},
       { src: 'https://ocstest.royalcanin.com.cn:8081/livechat/chatapp/customer/branch/RoyalCanin/14053/index.js' },
       { src: '"https://ocstest.royalcanin.com.cn:8081/livechat/chatapp/customer/branch/RoyalCanin/14054/index.js"' }
-      // { innerHTML: rem, type: 'text/javascript', charset: 'utf-8'}
 
 ],
-__dangerouslyDisableSanitizers: ['script'],
 
     meta: [
       { charset: 'utf-8' },
@@ -37,13 +35,18 @@ __dangerouslyDisableSanitizers: ['script'],
     { src: "swiper/css/swiper.css" }
     
   ],
+  router: {
+    middleware: ['metaTitle']
+  },
 
   // Plugins to run before rendering page: https://go.nuxtjs.dev/config-plugins
   plugins: [
     '@/plugins/vant',
     '@/plugins/ElementUI',
     { src: "~/plugins/swiper.js", ssr: false },
-    { src: '@/plugins/localStorage', ssr: false }
+    { src: "~/plugins/axios.js", ssr: false },
+    { src: '@/plugins/localStorage', ssr: false },
+
     
   
   ],

rc-busness/pages/index.vue

@@ -4,19 +4,8 @@
 <div>
 	<!-- Suppose in header end -->
 	<Myheader></Myheader>
-	<div class="rc-login">
+    <tabs></tabs>
-		<div class="userunlogin" v-show="userunlogin" @click="userlogin">
+    <unlogin></unlogin>
-			<div class="user-left">
-				<img src="../assets/image/rc-people.png" alt="">
-				<span>
-					登录/注册
-				</span>
-			</div>
-			<div class="user-right">
-				<img src="../assets/image/rc-left.png" alt="">
-			</div>
-		</div>
-	</div>
 	<!-- Suppose in header end -->
 	<van-swipe :autoplay="30000">
 		<van-swipe-item v-for="(banner, index) in banners" :key="index">
@@ -593,10 +582,15 @@
   import $ from 'jquery'
   import Myheader from "~/components/header.vue";
   import Myfooter from "~/components/rc-footer.vue";
+  import unlogin from "~/components/unlogin.vue";
+  import tabs from "@/components/tabs.vue";
   import '@vant/touch-emulator';
   import { userquery,postCourseId,biaomessage,userque } from "../ajax/getData";
   const settings = require("@/config");
   export default {
+       middleware: 'metaTitle',
+    // middleware: 'metaTitle',
+  meta: {title: '首页'},
      data(){
        return{
         processinformation:[],
@@ -908,7 +902,9 @@ activeInde3:0,
      },
        components:{
     Myheader,
-    Myfooter
+    Myfooter,
+    tabs,
+    unlogin,
      },
       mounted(){
              this.usermessage= JSON.parse(localStorage.getItem("userInfo"));
@@ -953,15 +949,7 @@ activeInde3:0,
          }
         
        },
-        //用户登录
+ 
-        userlogin(){
-       this.$router.push({
-        path: "/userlogin/login",
-        query: {
-          stype: 1,
-        },
-      });
-        },
 
        showmesg(){
        this.toTop();

rc-busness/pages/myorder/userrecord.vue

@@ -1,9 +1,10 @@
 <template>
   <div>
-    <Myheader></Myheader>
    
     <div class="rc-header">
       <div class="rc-main">
+         <Myheader></Myheader>
+     <tabs></tabs>
         <div class="rc-commodity">
           <div class="rc-commondi">
             <img src="../../assets/image/rc-select.png" alt="" />
@@ -119,10 +120,13 @@
 <script>
 import { List } from 'vant';
 import Myheader from "~/components/header.vue";
+import tabs from "@/components/tabs.vue";
 import instance from "@/config/request";
  import {isexistCart,generateOrderWX,deleteCart} from "../../ajax/getData";
 import accMul from "../../config/setDec.js"
 export default {
+     middleware: 'metaTitle',
+  meta: {title: '购物车'},
   data() {
     return {
       ordersum: 1,
@@ -187,6 +191,7 @@ export default {
 
   components: {
     Myheader,
+    tabs
   },
   methods:{
      //请求猫

rc-busness/pages/productdetails/producted.vue

@@ -2,12 +2,15 @@
 <div>
   <div class="user" v-for="(item,index) in newlist" :key="index">
     <Myheader></Myheader>
+    <unlogin></unlogin>
+     <tabs></tabs>
+     <div class="online" ></div>
 	<div class="rc-top"></div>
     <div class="rc-usermain ts-product-detail">
-    <magnifier v-bind:parentmsg="msg" ></magnifier>
+    <magnifier  ></magnifier>
     <div class="rc-header" >
         <div class="usermain">
-			<div class="online"></div>
+			<div class="online" id="fixed-catbar-seperator"></div>
 			<div class="rc-main">
 				<div class="rc-title">
 					<h2>{{ item.productName }}</h2>
@@ -89,9 +92,21 @@
     
     </div>
     </div>
-        <div class="rc-footimage">
+        <div class="rc-footimage" >
           <img :src=item.showImgFile alt="">
 
+        </div>
+            <div class="rc-fixright" >
+			<ul >
+				<li v-for="(userfixed,index) in fixedlist" :key="index" @click="lianxi(userfixed,index)">
+					<img :src="userfixed.catimage" alt="">
+					<span> {{userfixed.title}}</span>
+				</li>
+			</ul>
+			<div class="tuntop" @click="toTop" v-show="gotop">
+				<img src="../../assets/image/turntop.png" alt="">
+				回到顶部
+			</div>
         </div>
          <Myfooter v-on:litentop='showmesg'></Myfooter>
   </div>
@@ -165,17 +180,23 @@
 
 <script>
 import Myheader from "~/components/header.vue";
-import Magnifier from "@/components/magnifier.vue";
+import magnifier from "@/components/magnifier.vue";
+import tabs from "@/components/tabs.vue";
+  import unlogin from "~/components/unlogin.vue";
 import { mapMutations } from "vuex";
   import Myfooter from "~/components/rc-footer.vue";
   import { goodsmessage,getConfig,postCourseId,getdraw,alldiscount } from "../../ajax/getData";
   const settings = require("@/config");
 export default {
+   middleware: 'metaTitle',
+    // middleware: 'metaTitle',
+  meta: {title: '产品详情'},
   data() {
     return {
        tableLabelTest:[],    
       userimage: require("../../assets/image/unused.png"),
       activeIndexa:0,
+          gotop: false,
       dialogInfo1:false,
       name: [],
       userlist:[],
@@ -208,6 +229,25 @@ export default {
           catimage: require("../../assets/image/unused.png"),
         },
       ],
+                fixedlist: [
+        {
+          title: "购物车",
+             catimage: require("../../assets/buy.png"),
+          
+            
+        },
+        {
+          title: "在线客服",
+          catimage: require("../../assets/service.png"),
+            
+        },
+        {
+          title: "营养专家",
+           catimage: require("../../assets/consult.png"),
+           
+        },
+  
+      ],
 
 
       newlist: [
@@ -232,14 +272,18 @@ export default {
     };
 
   },
+    
+
    components: {
     Myheader,
-    Magnifier,
+     tabs,
+     magnifier,
+     unlogin,
     Myfooter
 
   },
     mounted() {
-     
+     window.addEventListener("scroll", this.handleScroll, true);
     if(this.usermessage!=='' ||this.usermessage.data!==undefined){
 this.usermessage= JSON.parse(localStorage.getItem("userInfo"));
          let stype=this.$route.query.stype;
@@ -267,6 +311,52 @@ this.usermessage= JSON.parse(localStorage.getItem("userInfo"));
   },
   methods: {
     ...mapMutations(["changemessage"]),
+      handleScroll(e) 
+	{
+		let fixedCatbarSeperator = document.getElementById("fixed-catbar-seperator");
+		let scrolltop = document.documentElement.scrollTop || document.body.scrollTop;
+		if((scrolltop-fixedCatbarSeperator.offsetTop))
+		{
+			this.gotop = true
+		}
+		else
+		{
+			this.gotop = false;
+		}
+    },
+      lianxi(item,index){
+             console.log(item,index);
+             if(item.title=='在线客服'){
+                 var option = {
+    customer: {id: '', name: '', email: '', mobile: '', memberId: '999999'}
+    }
+    dis_livchat(option);
+    }
+    if(item.title=='购物车'){
+      console.log('---12314');
+       this.$router.push({
+        path: "../../myorder/userrecord",
+       
+      });
+    }
+        if(item.title=='营养专家'){
+           var option = {
+    customer: {id: '', name: '', email: '', mobile: '', memberId: '999999'}
+    }
+    dis_livchat(option);
+    }
+
+             },
+       toTop() {
+      let top = document.documentElement.scrollTop || document.body.scrollTop;
+      // 实现滚动效果 
+      const timeTop = setInterval(() => {
+        document.body.scrollTop = document.documentElement.scrollTop = top -= 400;
+        if (top <= 0) {
+          clearInterval(timeTop);
+        }
+      }, 10);
+    },
     showmesg(){
          console.log('-----');
        this.toTop();

rc-busness/store/index.js

@@ -1,4 +1,17 @@
-const state = () => ({position: {}})
+ const state = () => ({
+  // 这里是全局数据保存的地方
+  tabsList: [
+    {
+      path: '/',
+      name: 'index',
+      meta:{
+        title: '首页',
+   
+      }
+  },
+  ]
+
+})
 
 const mutations = {
 //     changeLogin(state, val) {
@@ -19,6 +32,14 @@ const mutations = {
     localStorage.setItem('message', val.data);
        console.log(state,val);
   },
+  selectMenu(state, val) {
+      let result = state.tabsList.findIndex(item => item.name === val.data.name)
+      result === -1 ? state.tabsList.push(val.data) : ''
+
+
+
+   
+},
 
 //   changeMenu(state, user){
 //     // console.log("vuex存储的变化",JSON.parse(user))