Skip to content

B
beyond-clouds-frontM
Commit 23ed2e3a by 高浩杰
Options

person中路由重定向失效???

parent 40828d3c
Showing with 164 additions and 82 deletions
components/moblie/nav.vue
<template>
<yun-div
:height-v="76"
bg-color-v="#fff"
:border-v="[1,'solid','#EFEFEF','bottom']"
:extend-style="{overflow: 'visible',position:'relative'}"
:height-v="76"
bg-color-v="#fff"
:border-v="[1,'solid','#EFEFEF','bottom']"
:extend-style="{overflow: 'visible',position:'relative'}"
>
<yun-div
:width-v="610"
:height-v="96"
:ske-h="76"
:ske-w="610"
:margin-v="[0,140,0,0]"
:flex-v="['row','flex-start','flex-start']"
:font-style="[28,36,400,'#999','left']"
:extend-style="{overflowX: 'auto'}"
:width-v="610"
:height-v="96"
:ske-h="76"
:ske-w="610"
:margin-v="[0,140,0,0]"
:flex-v="['row','flex-start','flex-start']"
:font-style="[28,36,400,'#999','left']"
:extend-style="{overflowX: 'auto'}"
>
<yun-div
:no-flex-shrink="true"
:padding-v="[20,0,0,40]"
v-for="(item, index) in navList"
:flex-v="['column','flex-start','center']"
:key="item.id"
:no-flex-shrink="true"
:padding-v="[20,0,0,40]"
v-for="(item, index) in navList"
:flex-v="['column','flex-start','center']"
:key="item.id"
>
<nuxt-link
style="color: #999;"
:to="{path:path, query: {type:item.id}}"
v-tap="() => toggle(item.id)">
:to="path ? {path: path, query: {type: item.id}} : {path: item.path}"
>
{{item.label}}
</nuxt-link>
<yun-div
......@@ -33,40 +33,42 @@
:height-v="4"
:border-r="[2,2,0,0]"
:margin-v="[16,0,0]"
:bg-color-v="item.id === actived ? '#00AAE6' : '#fff'">
:bg-color-v="(item.id === actived || item.path === actived) ? '#00AAE6' : '#fff'">
</yun-div>
</yun-div>
</yun-div>
<yun-div
:height-v="76"
:width-v="140"
:ske-h="76"
:font-style="[28,76,400,'#666','center']"
bg-color-v="#fff"
:extend-style="{position: 'absolute',right:0,top:0,overflow: 'visible'}"
:height-v="76"
:width-v="140"
:ske-h="76"
:font-style="[28,76,400,'#666','center']"
bg-color-v="#fff"
:extend-style="{position: 'absolute',right:0,top:0,overflow: 'visible'}"
>
<slot v-if="!sort"></slot>
<yun-div
:extend-style="{
boxShadow: '-28px -0px 40px -22px rgba(0,0,0,.2) inset',
position:'relative',overflow: 'visible'}"
v-else
:extend-style="{
boxShadow: '-28px -0px 40px -22px rgba(0,0,0,.2) inset',
position:'relative',overflow: 'visible'}"
>
<yun-div :flex-v="['row','center','center']">
<span v-tap="handleSort">{{sortWay}}</span>
<yun-icon
v-tap="handleSort"
color="#999"
:class="{actived: showSort}"
name="down_arrow2"
:size="10"
:style="{display:'inline-block',width: 'auto', height: 'auto',transition: '0.5s',marginTop:commonReturnFlexedLength(2)}">
v-tap="handleSort"
color="#999"
:class="{actived: showSort}"
name="down_arrow2"
:size="10"
:style="{display:'inline-block',width: 'auto', height: 'auto',transition: '0.5s',marginTop:commonReturnFlexedLength(2)}">
</yun-icon>
</yun-div>
<yun-div
v-if="showSort"
:width-v="140"
bg-color-v="#F8F9F9"
:border-r="[0,0,8,8]"
:extend-style="{
v-if="showSort"
:width-v="140"
bg-color-v="#F8F9F9"
:border-r="[0,0,8,8]"
:extend-style="{
position:'absolute',
right:0,top:commonReturnFlexedLength(76),
zIndex: headerZIndex}"
......@@ -88,7 +90,11 @@ export default {
props: {
path: String,
navList: Array
navList: Array,
sort: {
type: Boolean,
default: true
}
},
data() {
return {
......@@ -99,17 +105,30 @@ export default {
}
},
mounted() {
this.toggle(this.$route.query.type)
const {path, query} = this.$route
if (this.$route.query.type) {
this.handleLabelRoute(query.type)
} else {
this.handlePathRoute(path)
}
},
watch: {
$route: function () {
this.toggle(this.$route.query.type)
const {path, query} = this.$route
if (this.$route.query.type) {
this.handleLabelRoute(query.type)
} else {
this.handlePathRoute(path)
}
}
},
methods: {
toggle(id) {
handleLabelRoute(id) {
this.actived = id
},
handlePathRoute(path) {
this.actived = path
},
handleSort() {
this.showSort = !this.showSort
},
......@@ -126,17 +145,20 @@ export default {
color: #333333 !important;
@extend %animate-transition;
}
.sortLabel {
@extend %animate-transition;
&:hover {
color: #00AAE6;
}
}
.actived {
display: inline-block;
color: #00AAE6 !important;
transition: 0.5s;
transform-origin:center center;
transform: rotate(180deg);
}
.actived {
display: inline-block;
color: #00AAE6 !important;
transition: 0.5s;
transform-origin: center center;
transform: rotate(180deg);
}
</style>
pages/personal-center/like.vue
<template>
<yun-div>
<Nav :sort="false" :nav-list="navList" :path="routesObject.personalCenter.like"></Nav>
<project-card></project-card>
<project-card></project-card>
</yun-div>
</template>
<script>
import Nav from "../../components/moblie/nav";
import ProjectCard from "../../components/moblie/projectCard";
import commonMixin from "../../components/moblie/commonMixin";
export default {
mixins: [commonMixin],
components: {ProjectCard, Nav},
data() {
return {
navList: [
{
label: '项目',
id: 'project'
},
{
label: '博客',
id: 'blog'
},
{
label: '问答',
id: 'answer'
},
{
label: '话题',
id: 'topic'
},
{
label: '资讯',
id: 'news'
},
{
label: '动态',
id: 'dynamic'
},
]
}
}
}
</script>
<style lang="scss" scoped>
</style>
pages/personal-center/person.vue
<template>
<yun-div
>
<nav-bar :path="path" :nav-list="navList"></nav-bar>
<nav-bar :nav-list="navList" :sort="false">
<template>
<span style="color: #00AAE6">批量</span>
</template>
</nav-bar>
<nuxt-child></nuxt-child>
<!-- <yun-dialog-->
<!-- title="添加备注"-->
......@@ -30,21 +33,28 @@
<script>
import NavBar from "../../components/moblie/nav";
import pageConfig from '../../action/page-config'
import FansCard from "../../components/moblie/fansCard";
import commonMixin from "../../components/moblie/commonMixin";
import pageConfig from '../../action/page-config'
export default {
mixins: [commonMixin],
components: {FansCard, NavBar},
created() {
this.changeRoute1({
path: this.routesObject.personalCenter.person.fans
})
},
data(){
return{
path: pageConfig.routes.personalCenter.person.fans,
navList: [
{
label: '粉丝',
id: '/fans'
path: pageConfig.routes.personalCenter.person.fans
},
{
label: '关注',
id: '/following'
path: pageConfig.routes.personalCenter.person.following,
}
],
slotDialog: {
......
pages/personal-center/person/fans.vue
<template>
<yun-div>
<Nav></Nav>
<fans-card></fans-card>
</yun-div>
</template>
<script>
import Nav from '../../../components/moblie/nav';
import FansCard from "../../../components/moblie/fansCard";
export default {
components: {FansCard, Nav},
components: {FansCard},
data() {
return {
path: '/project',
navList: [
{
label: '全部项目',
id: 'all'
},
{
label: '前端框架',
id: '10'
}
]
}
},
created() {
if (this.$route.query.type) {
return
}
this.$router.replace({
path: '/project',
query: {
type: 'all'
}
})
}
}
</script>
......
pages/personal-center/person/following.vue
<template>
<yun-div>
<fans-card></fans-card>
</yun-div>
</template>
<script>
import FansCard from "../../../components/moblie/fansCard";
export default {
components: {FansCard},
data() {
return {
}
}
}
</script>
<style lang="scss" scoped>
</style>
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment