添加面包屑以及其它

This commit is contained in:
952108534@qq.com 2022-01-10 22:01:29 +08:00
parent 069d6d2531
commit be96454365
9 changed files with 528 additions and 36 deletions

View File

@ -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;

View File

@ -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>

View File

@ -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>

View File

@ -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 || '';//设置重定向
})
}

View File

@ -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 },
],

View File

@ -4,19 +4,8 @@
<div>
<!-- Suppose in header end -->
<Myheader></Myheader>
<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>
<tabs></tabs>
<unlogin></unlogin>
<!-- 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();

View File

@ -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:{
//

View File

@ -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();

View File

@ -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))