Skip to content

B
beyond-clouds-front
Commit dc128700 by yanju
Options

修改获取别人主页路由,动态上传图片修复

parent 63786dcd
Showing with 742 additions and 4 deletions
components/common/avatar/avatar.vue
<template>
<nuxt-link tag="div" class="user-avatar" :to="userId?'/personal-center/home/project?user='+userId:''" :style="{backgroundColor:randomColor,width:size,height:size,borderRadius:borderR}">
<nuxt-link tag="div" class="user-avatar" :to="myPath" :style="{backgroundColor:randomColor,width:size,height:size,borderRadius:borderR}">
<img :src="src" v-if="src"/>
<p v-if="!src">{{firstWord}}</p>
</nuxt-link>
......@@ -20,6 +20,7 @@
size:String,
borderR:String,
},
data(){
return {
colorArr:['#A3A7D2',
......@@ -42,6 +43,15 @@
if(this.name){
return this.name.slice(0,1)
}
},
myPath(){
if(!this.userId){
return ''
}else if(this.userId===this.$store.state.userProfile.userId){
return '/personal-center/home/project?user='+this.userId
}else{
return '/personal-center/u/project?user='+this.userId
}
}
}
}
......
components/pc/releaseCard.vue
......@@ -299,7 +299,7 @@
let videoStr = /\.(mp4|ogg|webm)$/;
if(!videoStr.test(e.target.files[0])){
if(!videoStr.test(e.target.files[0].name)){
this.$message({
message:'请上传格式正确的视频!',
type:'warning'
......@@ -326,11 +326,10 @@
})
},
dataPostPic(e){
this.addingPic=true;
let a = new FormData();
let imgStr = /\.(jpg|jpeg|png|bmp|BMP|JPG|PNG|JPEG)$/;
if(!imgStr.test(e.target.files[0])){
if(!imgStr.test(e.target.files[0].name)){
this.$message({
message:'文件不是图片类型!',
type:'warning'
......@@ -338,6 +337,9 @@
return false;
}
this.addingPic=true;
let type = 3;
//0-用户头像
//1-博客封面
......
pages/personal-center/u.vue 0 → 100644
<template>
<div class="home-container">
<div class="home-container__top">
<img src="https://s2.ax1x.com/2020/01/30/1lqW5j.png" alt="">
</div>
<div class="home-container__bottom">
<div class="home-container__bottom-center">
<div class="bottom-container__bg"></div>
<div class="bottom-container">
<div class="bottom-left">
<user-card :from="$store.state.userProfile.userId===userId?'my':''" :userId="userId"></user-card>
</div>
<div class="bottom-right">
<div class="bottom-right__tab">
<div class="tab__left">
<nuxt-link tag="div" class="left__item" :to="{path:'/personal-center/u/project',query:{user:$route.query.user}}">
<p class="abs"></p>
<p class="word">项目</p>
<p class="line" v-if="selected==='personal-center-u-project'"></p>
</nuxt-link>
<nuxt-link tag="div" class="left__item" :to="{path:'/personal-center/u/blog',query:{user:$route.query.user}}">
<p class="abs"></p>
<p class="word">博客</p>
<p class="line" v-if="selected==='personal-center-u-blog'"></p>
</nuxt-link>
<nuxt-link tag="div" class="left__item" :to="{path:'/personal-center/u/answer',query:{type:'my',user:$route.query.user}}">
<p class="abs"></p>
<p class="word">问答</p>
<p class="line" v-if="selected==='personal-center-u-answer'"></p>
</nuxt-link>
<nuxt-link tag="div" class="left__item" :to="{path:'/personal-center/u/dynamic',query:{user:$route.query.user}}">
<p class="abs"></p>
<p class="word">动态</p>
<p class="line" v-if="selected==='personal-center-u-dynamic'"></p>
</nuxt-link>
<nuxt-link tag="div" v-if="$store.state.userProfile.userId===userId" class="left__item" :to="{path:'/personal-center/u/topic',query:{type:'my',user:$route.query.user}}">
<p class="abs"></p>
<p class="word">话题</p>
<p class="line" v-if="selected==='personal-center-u-topic'"></p>
</nuxt-link>
<nuxt-link tag="div" class="left__item" :to="{path:'/personal-center/u/info',query:{user:$route.query.user}}">
<p class="abs"></p>
<p class="word">资料</p>
<p class="line" v-if="selected==='personal-center-u-info'"></p>
</nuxt-link>
</div>
<p class="tab__right">
</p>
</div>
<transition name="fade-transform" mode="out-in">
<div style="min-height:556px">
<nuxt-child ></nuxt-child>
</div>
</transition>
</div>
</div>
<page-footer></page-footer>
</div>
</div>
</div>
</template>
<script>
import UserCard from '../../components/pc/userCard';
import ProjectCard from '../../components/pc/projectCard';
import CardContainer from '../../components/pc/cardContainer';
import PageFooter from '../../components/pc/pageFooter';
export default {
layout: 'only-header',
data(){
return{
labelList: ['我的消息','私信'],
userId:'',
// selected: this.$route.name
}
},
components:{
UserCard,ProjectCard,CardContainer,PageFooter
},
watch:{
$route(to,from){
if(this.$route.name){
this.selected = this.$route.name
}
}
},
created(){
this.selected = this.$route.name;
let userId = this.$route.query.user;
if(userId){
this.userId = userId;
}else{
this.router.replace('/')
}
},
methods:{
showAlert(){
// $alert 使用方法
this.$alert('确认清空消息列表？', '', {
confirmButtonText: '确定',
// callback: action => {
// this.$message({
// type: 'info',
// message: `action: ${ action }`,
// confirmButtonPosition: 'left',
// });
// }
});
},
},
}
</script>
<style lang="scss" scoped>
html{
background-image: $bgImage;
}
.home-container{
align-items: flex-start;
.home-container__top{
width:100%;
height:auto;
z-index: 100;
position: relative;
img{
width:100%;
min-height:270*$length;
background-color:#B9A3D2 ;
height:auto;
}
}
.home-container__bottom{
position:relative;
margin:0 auto;
.home-container__bottom-center{
position:absolute;
top: -60*$length;
left:0;
right:0;
background-image: $bgImage;
.bottom-container__bg{
background-image: $bgImage;
position:absolute;
top: 60*$length;
left:0;
right:0;
z-index: -1;
}
.bottom-container{
position:relative;
z-index: 200;
padding-bottom: 32*$length;
width: $pageWidth;
margin:0 auto;
@extend %flex-row-spb;
align-items: flex-start;
.bottom-left{
width:302*$length;
}
.bottom-right{
width:938*$length;
.bottom-right__tab{
box-sizing: border-box;
height:62*$length;
padding:18*$length 24*$length;
border-bottom:1px solid #EFEFEF;
@extend %flex-row-spb;
.tab__left{
@extend %flex-row-spb;
.left__item{
position:relative;
@extend %flex-column-spb;
margin-right: 24*$length;
.abs{
position:absolute;
}
.word{
@include fontStyle(14,19,500,rgba(255,255,255,.6),center);
@extend %animate-transition;
@extend %cursorPointer;
&:hover{
color:#fff
}
}
.line{
position:absolute;
top:32*$length;
margin:0 auto;
left:0;
right:0;
width:16*$length;
height:4*$length;
border-radius:2px 2px 0 0;
background-color: #00AAE6;
}
}
}
.tab__right{
@include fontStyle(12,16,500,#999,center);
@extend %animate-transition;
@extend %cursorPointer;
&:hover{
color:#00AAE6
}
}
}
}
}
}
}
}
</style>
pages/personal-center/u/answer.vue 0 → 100644
<template>
<div>
<card-container key="container3" style="margin-top: 16px" :title="rightConTitle" label="换一换">
<answer-card v-if="rightList.length>0" v-for="(val,index) in rightList" :key="val.questionId" :info="val"></answer-card>
<empty-card v-if="rightList.length===0" height="556px"></empty-card>
</card-container>
<pagination key="container5" style="margin:20px auto;" :pages="pages" v-on:listenPageChange="changePage"></pagination>
</div>
</template>
<script>
import ProjectCard from '../../../components/pc/projectCard';
import AnswerCard from '../../../components/pc/answerCard';
import CardContainer from '../../../components/pc/cardContainer';
import config from '../../../action/config';
import Pagination from "../../../components/pc/pagination";
import EmptyCard from "../../../components/pc/emptyCard";
export default {
name:'answer',
data(){
return{
leftList:[],
rightList:[],
pages:1,
aaa:[]
}
},
computed:{
rightConTitle(){
if(this.$route.query.type==="my"&&this.$store.state.userProfile.userId===this.$route.query.user){
return '我创建的问题'
}
if(this.$route.query.type==="notice"&&this.$store.state.userProfile.userId===this.$route.query.user){
return '我回答的问题'
}
if(this.$route.query.type==="my"&&this.$store.state.userProfile.userId!==this.$route.query.user){
return 'Ta创建的问题'
}
if(this.$route.query.type==="notice"&&this.$store.state.userProfile.userId!==this.$route.query.user){
return 'Ta回答的问题'
}
},
},
components:{
ProjectCard,CardContainer,AnswerCard,Pagination,EmptyCard
},
methods:{
dataGetMyAnswer(currentPage){
if(this.$store.state.userProfile.userId===this.$route.query.user){
this.$axios.$get(config.api.get.Question.myCreated,{
params:{
page:currentPage,
size:10
}
}).then((response)=>{
this.rightList = response.data.dataList;
this.pages = response.data.totalPage;
})
}else{
this.$axios.$get(config.api.get.Question.otherCreated+this.$route.query.user+'/questions',{
params:{
page:currentPage,
size:10
}
}).then((response)=>{
this.rightList = response.data.dataList;
this.pages = response.data.totalPage;
})
}
},
dataGetNoticeAnswer(currentPage){
if(this.$store.state.userProfile.userId===this.$route.query.user){
this.$axios.$get(config.api.get.Question.myParticipated,{
params:{
page:currentPage,
size:10
}
}).then((response)=>{
this.rightList = response.data.dataList;
this.pages = response.data.totalPage;
})}else{
this.$axios.$get(config.api.get.Question.otherParticipated+this.$route.query.user+'/question/participated',{
params:{
page:currentPage,
size:10
}
}).then((response)=>{
this.rightList = response.data.dataList;
this.pages = response.data.totalPage;
})
}
},
changePage(currentPage){
//返回页数 请求新的数据
let type = this.$route.query.type
if(type==='my'){
this.dataGetMyAnswer(currentPage);
}
if(type==='notice'){
this.dataGetNoticeAnswer(currentPage);
}
}
},
}
</script>
<style lang="scss">
</style>
pages/personal-center/u/blog.vue 0 → 100644
<template>
<div>
<card-container key="container3" style="margin-top: 16px" :title="rightConTitle" label="换一换">
<blog-card :isMy="$store.state.userProfile.userId===$route.query.user" v-if="rightList.length>0" v-for="(val,index) in rightList" :key="val.blogId" :info="val"></blog-card>
<empty-card v-if="rightList.length===0" height="556px"></empty-card>
</card-container>
<pagination key="container5" style="margin:20px auto;" :pages="pages" v-on:listenPageChange="changePage"></pagination>
</div>
</template>
<script>
import BlogCard from '../../../components/pc/projectCard';
import CardContainer from '../../../components/pc/cardContainer';
import config from '../../../action/config';
import Pagination from "../../../components/pc/pagination";
import EmptyCard from "../../../components/pc/emptyCard";
export default {
name:'blog',
data(){
return{
rightConType:1,
leftList:[],
rightList:[],
pages:1,
}
},
computed:{
rightConTitle(){
if(this.$store.state.userProfile.userId===this.$route.query.user){
return '我的博客'
}
if(this.$store.state.userProfile.userId!==this.$route.query.user){
return 'Ta的博客'
}
},
},
components:{
BlogCard,CardContainer,Pagination,EmptyCard
},
methods:{
dataGetBlog(currentPage){
if(this.$store.state.userProfile.userId===this.$route.query.user) {
this.$axios.$get(config.api.get.Blog.myList, {
params: {
page: currentPage,
size: 10
}
}).then((response) => {
this.rightList = response.data.dataList;
this.pages = response.data.totalPage;
})
}else{
this.$axios.$get(config.api.get.Blog.otherList+this.$route.query.user+'/blogs', {
params: {
page: currentPage,
size: 10
}
}).then((response) => {
this.rightList = response.data.dataList;
this.pages = response.data.totalPage;
})
}
},
changePage(currentPage){
//返回页数 请求新的数据
this.dataGetBlog(currentPage);
}
},
}
</script>
pages/personal-center/u/dynamic.vue 0 → 100644
<template>
<div >
<release-card v-if="$store.state.userProfile.userId===$route.query.user" style="margin-top: 16px" @listenReleaseState="dataGetDynamic(1)"></release-card>
<social-card pageType="my" @listenSocialCardState="dataGetDynamic(1)" v-for="(val,index) in rightList" :key="val.postId" :info="val"></social-card>
<empty-card v-if="rightList.length===0&&$store.state.userProfile.userId!==$route.query.user" height="556px"></empty-card>
<pagination key="container5" style="margin:20px auto;" :pages="pages" v-on:listenPageChange="changePage"></pagination>
</div>
</template>
<script>
import SocialCard from '../../../components/pc/socialContactCard';
import ReleaseCard from '../../../components/pc/releaseCard';
import CardContainer from '../../../components/pc/cardContainer';
import config from '../../../action/config';
import Pagination from "../../../components/pc/pagination";
import EmptyCard from "../../../components/pc/emptyCard";
export default {
name:'dynamic',
data(){
return{
rightConType:1,
leftList:[],
rightList:[],
pages:1,
}
},
computed:{
rightConTitle(){
if(this.$store.state.userProfile.userId===this.$route.query.user){
return '我的动态'
}
if(this.$store.state.userProfile.userId!==this.$route.query.user){
return 'Ta的动态'
}
},
},
components:{
SocialCard,CardContainer,Pagination,ReleaseCard,EmptyCard
},
methods:{
dataGetDynamic(currentPage){
if(this.$store.state.userProfile.userId===this.$route.query.user) {
this.$axios.$get(config.api.get.Post.myList, {
params: {
page: currentPage,
size: 10
}
}).then((response) => {
this.rightList = response.data.dataList;
this.pages = response.data.totalPage;
})
}else{
this.$axios.$get(config.api.get.Post.otherList+this.$route.query.user+'/posts', {
params: {
page: currentPage,
size: 10
}
}).then((response) => {
this.rightList = response.data.dataList;
this.pages = response.data.totalPage;
})
}
},
changePage(currentPage){
//返回页数 请求新的数据
this.dataGetDynamic(currentPage);
}
},
}
</script>
pages/personal-center/u/info.vue 0 → 100644
<template>
<div>
<card-container key="container3" style="margin-top: 16px" title="用户信息" label="换一换">
<empty-card height="556px"></empty-card>
</card-container>
</div>
</template>
<script>
import ProjectCard from '../../../components/pc/projectCard';
import CardContainer from '../../../components/pc/cardContainer';
import config from '../../../action/config';
import Pagination from "../../../components/pc/pagination";
import EmptyCard from "../../../components/pc/emptyCard";
export default {
name:'info',
components:{
ProjectCard,CardContainer,Pagination,EmptyCard
}
}
</script>
pages/personal-center/u/project.vue 0 → 100644
<template>
<div>
<card-container key="container3" style="margin-top: 16px" :title="rightConTitle" label="换一换">
<project-card @listenProjectCardUpdate="dataGetProject(1)" :isMy="$store.state.userProfile.userId===$route.query.user" v-if="rightList.length>0" v-for="(val,index) in rightList" :key="val.projectId" :info="val"></project-card>
<empty-card v-if="rightList.length===0" height="556px"></empty-card>
</card-container>
<pagination key="container5" style="margin:20px auto;" :pages="pages" v-on:listenPageChange="changePage"></pagination>
</div>
</template>
<script>
import ProjectCard from '../../../components/pc/projectCard';
import CardContainer from '../../../components/pc/cardContainer';
import config from '../../../action/config';
import Pagination from "../../../components/pc/pagination";
import EmptyCard from "../../../components/pc/emptyCard";
export default {
name:'project',
data(){
return{
rightConType:1,
leftList:[],
rightList:[],
pages:1,
}
},
computed:{
rightConTitle(){
if(this.$store.state.userProfile.userId===this.$route.query.user){
return '我的项目'
}
if(this.$store.state.userProfile.userId!==this.$route.query.user){
return 'Ta的项目'
}
},
},
components:{
ProjectCard,CardContainer,Pagination,EmptyCard
},
methods:{
dataGetProject(currentPage){
if(this.$store.state.userProfile.userId===this.$route.query.user) {
this.$axios.$get(config.api.get.Project.myList, {
params: {
page: currentPage,
size: 10
}
}).then((response) => {
this.rightList = response.data.dataList;
this.pages = response.data.totalPage;
})
}else{
this.$axios.$get(config.api.get.Project.otherList+this.$route.query.user+'/projects', {
params: {
page: currentPage,
size: 10
}
}).then((response) => {
this.rightList = response.data.dataList;
this.pages = response.data.totalPage;
})
}
},
changePage(currentPage){
//返回页数 请求新的数据
this.dataGetProject(currentPage);
}
},
}
</script>
<style lang="scss">
</style>
pages/personal-center/u/topic.vue 0 → 100644
<template>
<div>
<div>
<card-container key="container3" style="margin-top: 16px" :title="rightConTitle" label="换一换">
<topic-card v-if="rightList.length>0" v-for="(val,index) in rightList" :key="val.topicId" :info="val"></topic-card>
<empty-card v-if="rightList.length===0" height="556px"></empty-card>
</card-container>
<pagination key="container5" style="margin:20px auto;" :pages="pages" v-on:listenPageChange="changePage"></pagination>
</div>
</div>
</template>
<script>
import ProjectCard from '../../../components/pc/projectCard';
import TopicCard from '../../../components/pc/topicCard';
import CardContainer from '../../../components/pc/cardContainer';
import config from '../../../action/config';
import Pagination from "../../../components/pc/pagination";
import EmptyCard from "../../../components/pc/emptyCard";
export default {
name:'topic',
data(){
return{
leftList:[],
rightList:[],
pages:1,
}
},
computed:{
rightConTitle(){
if(this.$route.query.type==="my"&&this.$store.state.userProfile.userId===this.$route.query.user){
return '我创建的话题'
}
if(this.$route.query.type==="notice"&&this.$store.state.userProfile.userId===this.$route.query.user){
return '我参与的话题'
}
if(this.$route.query.type==="my"&&this.$store.state.userProfile.userId!==this.$route.query.user){
return 'Ta创建的话题'
}
if(this.$route.query.type==="notice"&&this.$store.state.userProfile.userId!==this.$route.query.user){
return 'Ta创建的话题'
}
}, },
components:{
ProjectCard,CardContainer,TopicCard,Pagination,EmptyCard
},
methods:{
dataGetMyTopic(currentPage){
if(this.$store.state.userProfile.userId===this.$route.query.user) {
this.$axios.$get(config.api.get.Topic.myList, {
params: {
page: currentPage,
size: 10
}
}).then((response) => {
this.rightList = response.data.dataList;
this.pages = response.data.totalPage;
})
}
},
dataGetNoticeTopic(currentPage){
this.$axios.$get(config.api.get.Topic.myfollowedList,{
params:{
page:currentPage,
size:10
}
}).then((response)=>{
this.rightList = response.data.records;
this.pages = response.data.pages;
})
},
changePage(currentPage){
//返回页数 请求新的数据
let type = this.$route.query.type
if(type==='my'){
this.dataGetMyTopic(currentPage);
}
if(type==='notice'){
this.dataGetNoticeTopic(currentPage);
}
}
},
}
</script>
<style lang="scss">
</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