Skip to content

B
beyond-clouds-front
Commit b231bfea by 高浩杰
Options

博客展示页完善

parent 22807fc7
Showing with 407 additions and 273 deletions
components/pc/releaseCard.vue
......@@ -141,6 +141,12 @@
components:{
Loading
},
props:{
initWord:{
type:String,
default:''
}
},
data(){
return {
releaseWord:'',
......@@ -178,6 +184,9 @@
},
created(){
if(this.initWord){
this.releaseWord ='#'+ this.initWord +'#';
}
if(process.browser){
document.addEventListener('click',(e)=>{
if(this.$refs.topicCard){
......@@ -196,8 +205,6 @@
}
},
mounted(){
},
methods:{
getEmojiArr(index){
......
components/pc/socialContactCard.vue
......@@ -198,7 +198,7 @@
if(indexArr.length>=1){
for (let i = 0; i < indexArr.length-1; i+=2) {
let firstP = i>0?indexArr[i-1]+1:0;
html = html +`${content.substring(firstP,indexArr[i])}<span>${content.substring(indexArr[i],indexArr[i+1]+1)}</span>`
html = html +`${content.substring(firstP,indexArr[i])}<a href="/topic/detail/${content.substring(indexArr[i]+1,indexArr[i+1])}">${content.substring(indexArr[i],indexArr[i+1]+1)}</a>`
}
html = html + `${ content.substring(indexArr[indexArr.length-1]+1)}`;
return html
......@@ -388,7 +388,7 @@
margin-top: 26*$length;
@include fontStyle(14,24,500,#222,left);
height:auto;
span{
a{
@extend %cursorPointer;
color:#00AAE6;
margin-left:3px;
......
components/pc/userCard2.vue 0 → 100644
<template>
<div class="user-card__wrap">
<div class="right__user-item" >
<yun-avatar size="48px" border-r="24px" :src="userAvatar" :name="nickName"></yun-avatar>
<div class="right__user-item__content">
<div class="content">
<p>{{nickName}}</p>
<h6>人气{{statistics.visitedNum}}·粉丝{{statistics.fansNum}}</h6>
</div>
<div v-if="userId!==$store.state.userProfile.userId&&followedUser" class="follow1" @click="dataPostToCancelFollow">
<yun-icon name="loading" v-if="followLoading"></yun-icon><yun-icon v-if="!followLoading" name="right"></yun-icon>已关注
</div>
<div v-if="userId!==$store.state.userProfile.userId&&!followedUser" class="follow2" @click="dataPostToFollow">
<yun-icon name="loading" v-if="followLoading"></yun-icon><span v-if="!followLoading">+</span>关注
</div>
</div>
</div>
</div>
</template>
<script>
import config from '../../action/config';
export default {
name:'userCard2',
data(){
return{
userAvatar:'https://s2.ax1x.com/2020/01/15/lO2kIf.png',
nickName:'',
gender:0,
signature:'',
projectNum:6,
blogNum:6,
answerNum:6,
popularity:6,
follow:7,
fans:7,
statistics:{},
followLoading:false,
followedUser:false,
}
},
props:{
id:{
type:String,
default:'',
},
info:{
type:Object,
default: {}
}
},
created(){
if(this.userId){
this.dataGetUserInfo();
}else{
this.dataGet2UserInfo();
}
},
computed:{
from(){
if(this.userId===this.$store.state.userProfile.userId){
return 'my'
}else{
return ''
}
}
},
watch:{
info(val){
this.dataGet2UserInfo()
},
userId(val){
this.dataGetUserInfo()
}
},
methods:{
dataGetUserInfo(){
this.followLoading=true;
this.$axios.$get(config.api.get.User.otherInfo+this.userId+'/baseinfo').then((response) => {
if(response.code===0){
let data = response.data;
this.userId = response.userId;
this.nickName=data.nickName;
this.gender= data.gender;
this.signature = data.signature;
this.userAvatar = data.userAvatar;
this.statistics = data.statistics || {};
this.followLoading=false;
this.followedUser = data.followedUser;
}
})
},
dataGet2UserInfo(){
let data = this.info;
this.nickName=data.nickName;
this.userId = data.userId;
this.gender= data.gender;
this.signature = data.signature;
this.userAvatar = data.userAvatar;
this.statistics = data.statistics || {};
this.followLoading=false;
this.followedUser = data.followedUser;
},
dataPostToFollow(){
this.followLoading=true;
this.$axios.$post(config.api.post.User.follow+this.userId+'/follower').then((response)=>{
if(response.code===0){
this.$message({
type:'success',
message:response.msg
})
}else{
this.$message({
type:'warning',
message:response.msg
})
}
this.followLoading=false;
this.followedUser = true;
})
},
dataPostToCancelFollow(){
this.followLoading=true;
this.$axios.$delete(config.api.delete.User.unfollow+this.userId+'/follower').then((response)=>{
if(response.code===0){
this.$message({
type:'success',
message:response.msg
})
}else{
this.$message({
type:'warning',
message:response.msg
})
}
this.followLoading=false;
this.followedUser = false;
})
},
dataPostToBlack(){
this.$axios.$post(config.api.post.User.shielding+this.userId).then((response)=>{
if(response.code===0){
this.$message({
type:'success',
message:response.msg
})
}else{
this.$message({
type:'warning',
message:response.msg
})
}
})
},
dataPostToCancelBlack(){
this.$axios.$delete(config.api.post.User.shielding+this.userId).then((response)=>{
if(response.code===0){
this.$message({
type:'success',
message:response.msg
})
}else{
this.$message({
type:'warning',
message:response.msg
})
}
})
},
},
}
</script>
<style lang="scss" scoped>
.user-card__wrap{
width:302*$length;
.right__user-item{
padding:8*$length 16*$length;
width:302*$length;
height:64*$length;
box-sizing: border-box;
@extend %flex-row-spb;
justify-content: flex-start;
.right__user-item__content{
margin-left:10*$length;
width:210*$length;
@extend %flex-row-spb;
.content{
width:150*$length;
p{
@include fontStyle(14,19,500,#2F2F2F,left);
@extend %nowrap;
}
h6{
margin-top:10*$length;
@include fontStyle(12,16,500,#999999,left);
@extend %nowrap;
}
}
.follow1{
@include fontStyle(14,19,500,#999999,center);
@extend %animate-transition;
@extend %cursorPointer;
&:hover{
color: #13ce66;}
}
.follow2{
@include fontStyle(14,19,500,#13ce66,center);
@extend %animate-transition;
@extend %cursorPointer;
&:hover{
color:#e7faf0
}
}
}
}
}
</style>
pages/answer/release/index.vue
......@@ -66,14 +66,27 @@
import config from "../../../action/config";
export default {
async asyncData({$axios, query}) {
const questionClass = await $axios.$get(config.api.get.QuestionCategory.list);
let classList = [];
questionClass.data.forEach(item => {
classList.push({
tag: item.category,
tagId: item.categoryId
})
});
console.log(classList);
if (query.hasOwnProperty('id')) {
const response = await $axios.$get(config.api.get.Question.detail + query.id);
console.log(response);
return {
response:response,
classList
}
}else{
return {classList}
}
},
mounted(){
if (this.$route.query.id) {
this.content=this.response.data.content;
......@@ -136,7 +149,7 @@
questionDetail:'',
questionTitle:'',
lastSaveTime: new Date(),
classList: [{tagId:1,tag:"web"}, {tagId:2,tag:"java"},{tagId:3,tag:"javascript"}],
// classList: [{tagId:1,tag:"web"}, {tagId:2,tag:"java"},{tagId:3,tag:"javascript"}],
contentHtml:'',
}
},
......
pages/blog/index.vue
......@@ -14,11 +14,12 @@
:title="labelTitle"
>
<empty-card v-if="blogList.length===0" height="556px"></empty-card>
<blog-card v-for="(val,index) in blogList" :key="val.blogId" :info="val"></blog-card>
</card-container>
<div class="pagination">
<pagination style="margin: 0 auto;" :pages="pages" v-on:listenPageChange="changePage"></pagination>
<pagination style="margin: 0 auto;" :pages="pages" ref="pagination" v-on:listenPageChange="changePage"></pagination>
</div>
</div>
<div class="blog-container__right">
......@@ -35,8 +36,15 @@
title="热门标签"
width="302px"
height="446px"
style="margin-top: 16px"
></card-container>
style="margin-top: 16px;"
>
<div class="tags-wrap">
<div class="tag-box" v-for="(item, index) in hotTagsList" :key="item.tagId">
<span>{{item.tagName}}</span>
<span>（{{item.referenceCount}}）</span>
</div>
</div>
</card-container>
</div>
</div>
</div>
......@@ -49,70 +57,100 @@ import CardContainer from "../../components/pc/cardContainer";
import Pagination from "../../components/pc/pagination";
import config from '../../action/config';
import BlogCard from "../../components/pc/projectCard";
import EmptyCard from "../../components/pc/emptyCard";
export default {
components: {Pagination, CardContainer, NavWrap,BlogCard},
components: {EmptyCard, Pagination, CardContainer, NavWrap,BlogCard},
async asyncData({$axios}){
let typeList = await $axios.$get(config.api.get.BlogCategory.list);
return {typeList:typeList.data}
},
data(){
return{
blogList:[],
currentPage:1,
pages:1,
hotBlogList: [],
hotTagsList: [],
labelTitle:'',
showPagination:true,
showPaginationTimer:null,
list: [
{
label: '全部类型',
address: '/blog',
id: '全部类型'
},
{
label: '程序人生',
address: '/blog',
id: '程序人生'
},
{
label: '移动开发',
label: '全部项目',
address: '/blog',
id: '移动开发'
type: 'all'
},
{
label: '前端',
address: '/blog',
id: '前端'
},
{
label: '其他',
address: '/blog',
id: '其他'
}
]
],
}
},
created() {
this.$router.replace({
path: '/blog',
query: {
id: '全部类型'
type: 'all'
}
});
this.dataGetBlogCategory();
this.getLabelTitle();
this.dataGetHotTagsList();
},
computed: {
labelTitle: function () {
return this.$route.query.id
watch: {
$route: function () {
this.restartPagination();
this.dataGetBlogList(1);
this.getLabelTitle();
}
},
methods: {
dataGetBlogCategory(){
this.typeList.map((val,index)=>{
this.list.push({
label: val.category,
address: '/blog',
type: val.categoryId
})
})
dataGetBlogList(currentPage){
this.$axios.$get(config.api.get.Blog.list,{
params:{
page:currentPage,
size:7,
},
getLabelTitle(){
let type = this.$route.query.type;
this.list.map((val,index)=>{
if(val.type===type){
this.labelTitle = val.label
}
}).then((response)=>{
this.blogList=response.data.dataList;
this.pages = response.data.totalPage;
})
},
restartPagination(){
if(process.browser){
this.$refs.pagination.setCurrentPage(1)
}
},
dataGetBlogList(currentPage){
let params={
page:currentPage,
size:7
};
if(this.$route.query.type && this.$route.query.type!=='all' ){
params.categoryId = this.$route.query.type
}
this.$axios.$get(config.api.get.Blog.list, {params:params})
.then((response)=>{
this.blogList=response.data.dataList;
this.pages = response.data.totalPage;
})
},
dataGetHotTagsList(){
let params={
page:1,
size:7
};
this.$axios.$get(config.api.get.Tag.hotTags,{params:params})
.then((response)=>{
this.hotTagsList = response.data.dataList;
})
},
toRelease(){
this.$router.push('/blog/release')
......@@ -153,6 +191,24 @@ export default {
background-color: #00AAE6;
}
}
.tags-wrap{
padding: 10*$length;
.tag-box{
display: inline-block;
margin-right: 10*$length;
margin-bottom: 10*$length;
padding: 2*$length 9*$length;
background-color: #F4F8FA;
@include border-radius(2*$length);
@extend %cursorPointer;
@extend %animate-transition;
@include fontStyle(12, 22, 500, #999, center);
&:hover {
color: #fff;
background-color: #00AAE6;
}
}
}
}
}
}
......
pages/dynamic/index.vue
......@@ -10,10 +10,14 @@
<release-card @listenReleaseState="dataGetDynamic(1)"></release-card>
<social-card @listenSocialCardState="dataGetDynamic(1)" v-for="(val,index) in postList" :key="val.postId" :info="val"></social-card>
<pagination :paginationReset="paginationReset" :paginationState="paginationState" :type="2" key="container5" style="margin:20px auto;" :pages="pages" v-on:listenPageChange="changePage"></pagination>
</div>
<div class="dynamic-container__right">
<card-container title="话题热搜榜" label="换一换" more="更多">
<card-container title="话题热搜榜" label="实时更新" @listenCardConMore="$router.push('/topic')" more="更多">
<nuxt-link tag="div" :to="'/topic/detail/'+val.topicName" class="topic-content__c" v-for="(val,index) in topicList" :key="val.topicId" >
<p>#{{val.topicName}}#</p>
<h6>{{val.referenceCount}}</h6>
</nuxt-link>
</card-container>
<card-container style="margin-top:16px" title="推荐用户" label="换一换" more="更多">
......@@ -96,6 +100,7 @@
pages:1,
paginationState:'complate',
paginationReset:true,
topicList:[],
}
},
components:{
......@@ -109,6 +114,8 @@
id: '推荐'
}
});
this.dataGetHotTopic();
},
methods:{
......@@ -139,6 +146,17 @@
})
},
dataGetHotTopic(){
this.$axios.$get(config.api.get.Topic.hotList,{
params:{
page:1,
size:10
}
}).then((response)=>{
this.topicList = response.data.dataList;
})
},
changePage(currentPage){
//返回页数 请求新的数据
this.dataGetDynamic(currentPage);
......@@ -170,6 +188,28 @@
.dynamic-container__right{
width:302*$length;
.topic-content__c{
@extend %flex-row-spb;
@extend %cursorPointer;
padding:0 16*$length;
box-sizing: border-box;
margin-top:20*$length;
p{
width:190*$length;
@include fontStyle(12,16,500,#333,left);
@extend %nowrap;
@extend %animate-transition;
&:hover{
color:#00AAE6
}
}
h6{
@include fontStyle(12,16,500,#ccc,left);
@extend %nowrap;
}
}
}
}
......
pages/project/index.vue
......@@ -54,6 +54,11 @@ import EmptyCard from '../../components/pc/emptyCard';
export default {
components: {Pagination, ProjectCard, CardContainer, NavWrap,EmptyCard},
async asyncData({$axios}){
let typeList = await $axios.$get(config.api.get.ProjectCategory.list);
return {typeList:typeList.data}
},
data(){
return{
list: [
......@@ -96,7 +101,6 @@ export default {
toRelease(){
this.$router.push('/project/release')
},
restartPagination(){
if(process.browser){
this.$refs.pagination.setCurrentPage(1)
......@@ -110,17 +114,15 @@ export default {
}
})
},
dataGetProjectCategory(){
this.$axios.$get(config.api.get.ProjectCategory.list).then((response)=>{
response.data.map((val,index)=>{
this.typeList.map((val,index)=>{
this.list.push({
label: val.category,
address: '/project',
type: val.categoryId
})
})
})
},
dataGetHotProjectList(){
let params={
......@@ -150,7 +152,6 @@ export default {
//返回页数 请求新的数据
this.dataGetProjectList(currentPage);
},
}
}
</script>
......
pages/topic/detail/_id.vue deleted 100644 → 0
<template>
<div class="topic-detail-container">
<div class="topic-detail-container__search">
<div class="search-box">
<input type="text" />
<div class="icon-box">
<yun-icon name="search"></yun-icon>
</div>
</div>
</div>
<div class="topic-detail-container__main">
<div class="main__part1">
<topic-card :activeRouteFunc="false" :info="topicCardInfo" style="border-radius: 4px;overflow: hidden"></topic-card>
<div class="part1__bottom">
<div class="__left">
<nav-wrap
width="106px"
:list="list"
></nav-wrap>
</div>
<div class="__right">
<release-card></release-card>
<social-contact-card></social-contact-card>
<social-contact-card></social-contact-card>
<social-contact-card></social-contact-card>
<social-contact-card></social-contact-card>
<social-contact-card></social-contact-card>
</div>
</div>
</div>
<div class="main-part2">
<card-container
title="话题发起人"
more="更多"
width="302px"
></card-container>
<card-container
title="活跃用户"
label="换一换"
more="更多"
width="302px"
style="margin-top: 16px"
></card-container>
</div>
</div>
</div>
</template>
<script>
import NavWrap from "../../../components/pc/nav/navWrap";
import CardContainer from "../../../components/pc/cardContainer";
import Pagination from "../../../components/pc/pagination";
import TopicCard from "../../../components/pc/topicCard";
import ReleaseCard from '../../../components/pc/releaseCard';
import SocialContactCard from '../../../components/pc/socialContactCard';
import config from '../../../action/config'
export default {
components: {TopicCard, Pagination, CardContainer, NavWrap,ReleaseCard,SocialContactCard},
data(){
return{
list: [
{
label: '推荐',
address: '/topic/detail',
id: '推荐'
},
{
label: '热门',
address: '/topic/detail',
id: '热门'
},
{
label: '关注',
address: '/topic/detail',
id: '关注'
},
{
label: '我的',
address: '/topic/detail',
id: '我的'
},
{
label: '文字',
address: '/topic/detail',
id: '文字'
},
{
label: '视频',
address: '/topic/detail',
id: '视频'
},
{
label: '图片',
address: '/topic/detail',
id: '图片'
},
{
label: '项目',
address: '/topic/detail',
id: '项目'
},
{
label: '代码',
address: '/topic/detail',
id: '代码'
},
],
topicCardInfo:{},
}
},
created() {
let path = this.$route.path;
let index = path.lastIndexOf('/');
let id = path.substring(index+1);
this.dataGetTopicInfo(id);
this.$router.replace({
path: path,
query: {
id: '推荐'
}
});
},
computed: {
labelTitle: function () {
return this.$route.query.id + '话题'
}
},
methods:{
dataGetTopicInfo(id){
if(id!=='detail'){
this.$axios.$get(config.api.get.Topic.detail+id).then((response)=>{
console.log(response.data);
this.topicCardInfo = response.data;
})
}
}
},
}
</script>
<style lang="scss" scoped>
.topic-detail-container{
> .topic-detail-container__search{
width: 100%;
height:160*$length;
background-image: url("../../../assets/img/search_bg.png");
background-position: 50% 50%;
background-size: 100% 100%;
background-repeat: repeat;
@extend %flex-row-center;
.search-box{
width:408*$length;
height:40*$length;
@extend %flex-row-spb;
border-radius: 4*$length;
overflow: hidden;
input{
width: 318*$length;
height:40*$length;
padding:12*$length 16*$length;
@include fontStyle(12,40,500,#333,left);
}
.icon-box{
width:90*$length;
height:40*$length;
@extend %flex-row-center;
background-color: #00AAE6;
@include fontStyle(12,40,500,#333,left);
@extend %cursorPointer;
i{
color:#fff;
font-size: 12*$font-size;
}
}
}
}
> .topic-detail-container__main{
width: $pageWidth;
margin: 0 auto;
padding-bottom: 32*$length;
@extend %flex-row-spb;
align-items: start;
margin-top: 24*$length;
.main__part1{
width:938*$length;
.part1__bottom{
@extend %flex-row-spb;
align-items: flex-start;
margin-top: 16*$length;
.__left{
width:106*$length;
}
.__right{
width:816*$length;
}
}
}
.main__part2{
width:302*$length;
}
}
}
</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