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

This commit is contained in:
Vion 2022-01-23 12:44:49 +08:00
parent fcb6dc26bd
commit 2f5ef11c15
12 changed files with 116 additions and 182 deletions

View File

@ -3,6 +3,9 @@ body {
font-family: DINPro, 'PingFang SC', miui, 'Hiragino Sans GB', 'Microsoft Yahei', sans-serif; font-family: DINPro, 'PingFang SC', miui, 'Hiragino Sans GB', 'Microsoft Yahei', sans-serif;
line-height: 1.5; line-height: 1.5;
color: #666; color: #666;
}
.ts-crumbs {
} }
.rc-menu--xs .rc-screen-reader{ .rc-menu--xs .rc-screen-reader{
left:28%; left:28%;

View File

@ -12,7 +12,6 @@ ul li ol li em strong i {
} }
.rc-main { .rc-main {
position: relative; position: relative;
margin-top: 5.25rem;
.active{ .active{
border: 2px solid #E2001A; border: 2px solid #E2001A;
@ -33,7 +32,6 @@ ul li ol li em strong i {
width: 100%; width: 100%;
margin: 0 auto; margin: 0 auto;
overflow: hidden; overflow: hidden;
margin-top: 20px;
.ts-scrollable-container{ .ts-scrollable-container{
h2{ h2{
font-weight: bold; font-weight: bold;
@ -384,7 +382,6 @@ border-radius: 100px;
width: 100%; width: 100%;
margin: 0 auto; margin: 0 auto;
overflow: hidden; overflow: hidden;
margin-top: 40px;
.ts-scrollable-container{ .ts-scrollable-container{
h2{ h2{
font-weight: bold; font-weight: bold;
@ -441,7 +438,6 @@ cursor: pointer;
} }
.rc-main { .rc-main {
margin-top: 7.25rem;
} }
.ts-scrollable-container{ .ts-scrollable-container{

View File

@ -1,9 +1,9 @@
<template> <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 separator-class="el-icon-arrow-right">
<el-breadcrumb-item to="/" >{{ this.homepageName }}</el-breadcrumb-item> <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> :key="index">{{ item.title }}</el-breadcrumb-item>
</el-breadcrumb> </el-breadcrumb>
</div> </div>
@ -11,171 +11,68 @@
<script> <script>
import { mapState, mapMutations } from "vuex"; import { mapState, mapMutations } from "vuex";
import tabs from "~/components/tabs.vue";
export default { export default {
props:["crumbs"], props:["crumbs","crumbStyle"],
name:"crumbs", name:"crumbs",
data() { data() {
return { return {
homepageName:'首页' displayData:[],
homepageName:'定制营养方案',
nameMapping:{
'/productdetails/productlist':'产品分类',
'/usersearch/search':'产品搜索',
'/personal/mypersonal':'个人中心',
'/personal/usermember/':'会员权益',
'/personal/integral/':'积分明细'
},
}; };
}, },
created(){ created(){
if(this.showTab != false) if(this.showTab != false)
this.showTab=true; this.showTab=true;
this.build();
}, },
watch: { watch: {
crumbs(val) {
this.crumbs = val;
this.build();
}
}, },
mounted() { mounted() {
}, },
methods: { 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> </script>
<style lang="less" scoped> <style lang="less" scoped>
.crumbs{ /deep/.el-breadcrumb__inner.is-link:hover {
width: 93%; color:#E2001A;
margin: 0 auto;
display: flex;
height: 40px;
align-items: center;
margin-top: 70px;
} }
.tags-scroll-content { .ts-crumbs{
position: relative; padding-left:1.25rem;
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> </style>

View File

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

View File

@ -2,6 +2,7 @@
<div> <div>
<Myheader></Myheader> <Myheader></Myheader>
<div class="rc-top"></div> <div class="rc-top"></div>
<tabs :crumbs="crumbs"></tabs>
<div class="rc-max-width--xl rc-padding-y--md"> <div class="rc-max-width--xl rc-padding-y--md">
<ul> <ul>
<li v-for="(item,index) in userrecord" :key="index"> <li v-for="(item,index) in userrecord" :key="index">
@ -36,6 +37,14 @@ import Myheader from '~/components/header.vue'
export default { export default {
data(){ data(){
return{ return{
crumbs:[
{
path:'/personal/mypersonal',
},
{
path:'/personal/integral/',
}
],
userrecord:[ userrecord:[
{ {
title:'日期', title:'日期',

View File

@ -3,6 +3,7 @@
<Myheader></Myheader> <Myheader></Myheader>
<!-- <tabs></tabs> --> <!-- <tabs></tabs> -->
<div class="rc-top"></div> <div class="rc-top"></div>
<tabs :crumbs="crumbs" :crumbStyle="`padding-left:0;`"></tabs>
<div class="rc-layout-container rc-one-column rc-full-width ts-mypersonal"> <div class="rc-layout-container rc-one-column rc-full-width ts-mypersonal">
<div class="rc-column"> <div class="rc-column">
<!-- <div class="rc-title"> <!-- <div class="rc-title">
@ -152,16 +153,21 @@ export default {
meta: {title: '个人中心'}, meta: {title: '个人中心'},
data() { data() {
return { return {
userlog:false, crumbs:[
islogin:false, {
dialogInfo1:false, path:'/personal/mypersonal',
userid:null, }
usertitle:'', ],
rcvalue:5000, userlog:false,
usermessage:'关注皇家爱宠荟,修改个人资料', islogin:false,
userimage:require("../../assets/image/rc-new.png"), dialogInfo1:false,
userlogin:'登录注册', userid:null,
userorder: "新手铲屎官", usertitle:'',
rcvalue:5000,
usermessage:'关注皇家爱宠荟,修改个人资料',
userimage:require("../../assets/image/rc-new.png"),
userlogin:'登录注册',
userorder: "新手铲屎官",
prefecture: [ prefecture: [
{ {
title: "待付款", title: "待付款",

View File

@ -344,7 +344,7 @@ export default {
postData[0].orderAddress.addressUserName + postData[0].orderAddress.addressUserName +
" " + " " +
postData[0].orderAddress.addressPhoneNumber, postData[0].orderAddress.addressPhoneNumber,
wxPay: "weixin://wxpay/bizpayurl?pr=4RJbokxzz", wxPay: res.msg,
}; };
this.$router.push({ this.$router.push({
path: "/personal/userpay", path: "/personal/userpay",

View File

@ -2,7 +2,8 @@
<div> <div>
<Myheader></Myheader> <Myheader></Myheader>
<div class="rc-top"></div> <div class="rc-top"></div>
<div class="rc-full-width rc-max-width--xl rc-padding-y--lg"> <tabs :crumbs="crumbs"></tabs>
<div class="rc-full-width rc-max-width--xl rc-padding-bottom--lg">
<div class="rc-main"> <div class="rc-main">
<div class="rc-center" > <div class="rc-center" >
@ -53,15 +54,24 @@
<script> <script>
import Myheader from '~/components/header.vue' import Myheader from '~/components/header.vue'
import Myfooter from '~/components/rc-footer.vue' import Myfooter from '~/components/rc-footer.vue'
import tabs from "~/components/tabs.vue";
export default { export default {
data(){ data(){
return{ return{
banners:[ crumbs:[
{src:require("../../assets/image/rc-new.png"),link:""}, {
{src:require("../../assets/image/rc-new1.png"),link:""}, path:'/personal/mypersonal',
{src:require("../../assets/image/rc-new2.png"),link:""}, },
], {
path:'/personal/usermember/',
}
],
banners:[
{src:require("../../assets/image/rc-new.png"),link:""},
{src:require("../../assets/image/rc-new1.png"),link:""},
{src:require("../../assets/image/rc-new2.png"),link:""},
],
userid:null, userid:null,
userimage:require("../../assets/image/rc-new.png"), userimage:require("../../assets/image/rc-new.png"),
userorder:'新手铲屎官', userorder:'新手铲屎官',
@ -251,7 +261,8 @@ methods:{
}, },
components:{ components:{
Myheader, Myheader,
Myfooter Myfooter,
tabs
}, },
mounted(){ mounted(){
console.log(this.$refs.userblock); console.log(this.$refs.userblock);

View File

@ -104,7 +104,7 @@ export default {
payimage: require("../../assets/pay/zfb.png"), payimage: require("../../assets/pay/zfb.png"),
}, },
], ],
dialogSuccess: true, dialogSuccess: false,
dialogFail: false, dialogFail: false,
userPayData: {}, userPayData: {},
qrtext:'', qrtext:'',
@ -114,6 +114,7 @@ export default {
mounted() { mounted() {
this.userPayData = JSON.parse(this.$route.query.userPayData); this.userPayData = JSON.parse(this.$route.query.userPayData);
this.qrtext=this.userPayData.wxPay this.qrtext=this.userPayData.wxPay
this.updateOrderWX();
}, },
methods: { methods: {
closeDialogSuccess() { closeDialogSuccess() {

View File

@ -2,8 +2,8 @@
<div> <div>
<div class="user"> <div class="user">
<Myheader></Myheader> <Myheader></Myheader>
<unlogin></unlogin> <div class="rc-top"></div>
<tabs></tabs> <tabs :crumbs="crumbs"></tabs>
<div class="online" id="fixed-catbar-seperator"></div> <div class="online" id="fixed-catbar-seperator"></div>
<div class="rc-top"></div> <div class="rc-top"></div>
<div <div
@ -324,7 +324,17 @@ export default {
productAttachmentList = newlist[0].productAttachmentList; productAttachmentList = newlist[0].productAttachmentList;
userbuy = true; userbuy = true;
} }
let crumbs = [
{
path:'/productdetails/productlist/',
},
{
title: curItem.productName,
}
];
return { return {
crumbs,
activeIndexa, activeIndexa,
curItem, curItem,
newlist, newlist,
@ -629,6 +639,8 @@ export default {
this.activeIndexa = index; this.activeIndexa = index;
this.curItem = item; this.curItem = item;
this.productAttachmentList = item.productAttachmentList; this.productAttachmentList = item.productAttachmentList;
this.crumbs.pop();
this.crumbs.push({title: item.productName});
}, },
}, },
@ -637,6 +649,5 @@ export default {
</script> </script>
<style lang="less" scoped> <style lang="less" scoped>
@import url("../../assets/css/global.less");
@import url("../../assets/css/producted.less"); @import url("../../assets/css/producted.less");
</style> </style>

View File

@ -325,7 +325,6 @@ export default {
crumbs:[ crumbs:[
{ {
path:'/productdetails/productlist/', path:'/productdetails/productlist/',
title:'产品列表',
} }
], ],
value: "", value: "",

View File

@ -1,11 +1,8 @@
<template> <template>
<div> <div>
<transition name="fade">
<div class="userloding" v-show="isLoading"></div>
</transition>
<Myheader></Myheader> <Myheader></Myheader>
<div class="rc-top"></div> <div class="rc-top"></div>
<tabs :crumbs="crumbs"></tabs>
<div class="rc-max-width--xl rc-main"> <div class="rc-max-width--xl rc-main">
<div class="usersearch"> <div class="usersearch">
<div class="form-search"> <div class="form-search">
@ -329,13 +326,18 @@
import Myheader from "~/components/header.vue"; import Myheader from "~/components/header.vue";
import MyFooter from '~/components/rc-footer.vue' import MyFooter from '~/components/rc-footer.vue'
import FixRight from "~/components/fixed-right.vue"; import FixRight from "~/components/fixed-right.vue";
import tabs from "~/components/tabs.vue";
import { biaome, userstype, searchchanpin, userquery } from "../../ajax/getData"; import { biaome, userstype, searchchanpin, userquery } from "../../ajax/getData";
export default { export default {
data() { data() {
return { return {
value: "", value: "",
crumbs:[
{
path:'/usersearch/search/',
}
],
isLoading: true, isLoading: true,
userserachlist: [ userserachlist: [
{ {
categoryName: [], // categoryName: [], //
@ -516,7 +518,8 @@ export default {
components: { components: {
Myheader, Myheader,
MyFooter, MyFooter,
FixRight FixRight,
tabs
}, },
mounted() { mounted() {
this.usetmessage(); this.usetmessage();