Skip to content

B
beyond-clouds-front
Commit d56487e8 by yanju
Options

完成动态的发布、删除、动态展示

parent ca1257e6
Showing with 533 additions and 105 deletions
action/config.js
......@@ -214,6 +214,9 @@ export default {
listenPopupValue:'listenpopupvalue',
listenCardConMore:'listenCardConMore',
listenCardConLabel:'listenCardConLabel',
listenReleaseState:'listenReleaseState',
listenSocialCardState:'listenSocialCardState',
},
default_data: {
......
components/pc/dropdown.vue 0 → 100644
<template>
<div class="dropdown-card__wrap" >
<ul class="dropdown-card">
<slot></slot>
</ul>
</div>
</template>
<script>
export default {
}
</script>
<style lang="scss">
.dropdown-card__wrap{
position: absolute;
.dropdown-card{
list-style: none;
padding: 6*$length 0;
margin: 0;
box-sizing: border-box;
border: solid 1px #dfe4ed;
border-radius: 4px;
background-color:#fff;
box-shadow: 0 2px 12px 0 rgba(0,0,0,0.1);
& li{
font-size: 14px;
padding: 0 20px;
position: relative;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
color:
#606266;
height: 34px;
line-height: 34px;
-webkit-box-sizing: border-box;
box-sizing: border-box;
cursor: pointer;
@extend %cursorPointer;
@extend %animate-transition;
&:hover{
background-color: #F5F7FA;
}
}
}
}
</style>
components/pc/loading.vue 0 → 100644
<template>
<div :class="type===1?'Loading1':'Loading2'">
<div>
</div>
<div>
</div>
<div>
</div>
</div>
</template>
<script>
export default {
name:'loading',
props:{
type:{
default:1,
type:Number
}
},
}
</script>
<style lang="scss">
.Loading2{
display: flex;
justify-content: center;
height: 80*$length;
width: 80*$length;
align-items: center;
& >div {
width: 10*$length;
height: 10*$length;
border-radius: 50%;
background: #00AAE6;
opacity: .5;
margin: 4*$length;
color: #fff;
text-align: center;
line-height: 33px;
font-size: 1.5rem;
animation: loading2 0.8s infinite alternate;
}
& >div:nth-child(2) {
animation-delay: 0.4s
}
& >div:nth-child(3) {
animation-delay: 0.6s;
}
}
.Loading1{
display: flex;
justify-content: center;
height: 80*$length;
width: 80*$length;
align-items: center;
& >div {
width: 10*$length;
height: 10*$length;
border-radius: 50%;
background: #00AAE6;
opacity: .5;
margin: 4*$length;
color: #fff;
text-align: center;
line-height: 33px;
font-size: 1.5rem;
animation: loading2 1.2s infinite alternate;
}
& >div:nth-child(2) {
animation-delay: 0.4s
}
& >div:nth-child(3) {
animation-delay: 0.6s;
}
}
@keyframes loading2 {
0% {
opacity: 0.1;
transform: translateX(.2rem);
}
50%{
opacity: 1;
transform: translateX(0rem);
}
100% {
opacity: 0.1;
transform: translateX(-.2rem);
}
}
@keyframes loading1 {
from {
opacity: 1;
transform: translateY(.5rem);
}
to {
opacity: 0.1;
transform: translateY(-.5rem);
}
}
</style>
components/pc/pagination.vue
<template>
<div class="pagination-container__wrap" v-show= "show">
<div class="pagination-container">
<div class="pagination-container__wrap" ref="paginationCon" v-show= "show">
<div class="pagination-container" v-if="type===1">
<p class="left-arrow" @click="clickToGetPrevPage" v-if="currentPage>1">
<yun-icon name="left_arrow" size="12px"></yun-icon>
</p>
......@@ -14,17 +14,41 @@
<yun-icon name="left_arrow" size="12px"></yun-icon>
</p>
</div>
<div class="pagination-container2" v-if="type===2">
<div class="box" v-if="paginationState==='loading'">
<loading :type=2></loading>
</div>
<div class="box" v-if="paginationState==='over'">已经到底了~</div>
</div>
</div>
</template>
<script>
import config from '../../action/config';
import Loading from '../../components/pc/loading';
export default {
name:'pagination',
components:{
Loading
},
props:{
pages:[Number,String],
pages:{
type:[Number,String],
default:1,
},
type:{
type:Number,
default:1
},
paginationState:{
type:String,
default:'over'
},
},
data(){
return {
......@@ -39,7 +63,10 @@
},
created(){
this.$emit(config.event.listenPageChange,this.currentPage)
this.$emit(config.event.listenPageChange,this.currentPage);
if(this.type===2){
this.scrollToGetNext();
}
},
watch:{
currentPage(pre,now){
......@@ -66,6 +93,42 @@
methods:{
getElementToPageTop(el) {
if(el.parentElement) {
return this.getElementToPageTop(el.parentElement) + el.offsetTop
}
return el.offsetTop
},
//
scrollToGetNext(){
if(process.browser){
document.addEventListener('scroll',()=>{
if(this.$refs.paginationCon){
let pageConTop = this.getElementToPageTop (this.$refs.paginationCon);
let scrollTop = document.documentElement.scrollTop ||document.body.scrollTop;
let screenTop = scrollTop + window.innerHeight ;
if(screenTop>=pageConTop){
if(this.currentPage<this.pages){
this.currentPage = this.currentPage+1;
// this.paginationState = 'loading';
}else{
// this.paginationState = 'over';
}
}else{
// this.paginationState = 'complete';
}
}
})
}
},
// 跳到下一页
clickToGetNextPage(){
let {pages,centerFirstPage,currentPage} = this;
......@@ -108,12 +171,10 @@
let {centerFirstPage,pages} = this;
if(centerFirstPage+5+6<pages){
console.log(1);
this.currentPage = centerFirstPage +6;
this.centerFirstPage = centerFirstPage +6;
}
else if(centerFirstPage+5+6>=pages){
console.log(2);
this.currentPage = pages-5;
this.centerFirstPage = pages-5;
}
......@@ -234,5 +295,18 @@
}
}
.pagination-container2{
.box{
height:40*$length;
@extend %flex-row-center;
background: #fff;
border-radius: 4*$length;
color:#999;
font-size: 12px;
}
}
}
</style>
components/pc/releaseCard.vue
......@@ -76,7 +76,7 @@
<yun-icon name="down_arrow" size="6px" color="#999" pb="1px"></yun-icon>
</div>
<p class="send-box">
<p class="send-box" @click="dataPostContent">
发布
</p>
</div>
......@@ -97,9 +97,11 @@
<yun-icon name="close1" size="12px" color="#fff"></yun-icon>
</div>
</div>
<p class="add-box" :style="{margin:(imgArr.length+1)%9===0? '6px 0 0 0':'6px 6px 0 0'}">添加图片
<input type="file" @change="(e)=>openCropper(e)">
</p>
<div class="add-box" :style="{margin:(imgArr.length+1)%9===0? '6px 0 0 0':'6px 6px 0 0'}">
<input type="file" v-if="!addingPic" @change="(e)=>dataPostPic(e)">
<span v-if="!addingPic">添加图片</span>
<loading :type=2 v-if="addingPic"></loading>
</div>
</div>
</div>
</transition>
......@@ -112,34 +114,41 @@
</div>
<div class="video-container">
<p class="add-box" v-if="!showVideoUploadP">上传视频
<input type="file" @change="(e)=>changeToUploadVideo(e)">
<p class="add-box" v-if="!video">
<span v-if="!showVideoUploadP">上传视频</span>
<input v-if="!showVideoUploadP" type="file" @change="(e)=>dataPostVideo(e)">
<loading :type=2 v-if="showVideoUploadP"></loading>
</p>
<div class="video-upload" v-if="showVideoUploadP">
<div class="video-upload__word">
<p>文件名.mp4</p>
<h6>上传中55%</h6>
</div>
<div class="video-upload__progress">
<p></p>
</div>
</div>
<p class="add-box" v-if="!showCoverUploadP">上传封面
<input type="file" @change="e=>changeToUploadCover(e)">
</p>
<div class="video-upload" v-if="showCoverUploadP">
<div class="video-upload__word">
<p>文件名.mp4</p>
<h6>上传中55%</h6>
</div>
<div class="video-upload__progress">
<p></p>
</div>
<div class="add-box" v-if="video">
<video controls :src="video"></video>
<p class="cancel-video" @click="video=''">取消上传</p>
</div>
<!--<div class="video-upload" >-->
<!--<div class="video-upload__word">-->
<!--<p>{{videoName}}</p>-->
<!--<h6>上传中55%</h6>-->
<!--</div>-->
<!--<div class="video-upload__progress">-->
<!--<p></p>-->
<!--</div>-->
<!--</div>-->
<!--<p class="add-box" v-if="!showCoverUploadP">上传封面-->
<!--<input type="file" @change="e=>changeToUploadCover(e)">-->
<!--</p>-->
<!--<div class="video-upload" v-if="showCoverUploadP">-->
<!--<div class="video-upload__word">-->
<!--<p>文件名.mp4</p>-->
<!--<h6>上传中55%</h6>-->
<!--</div>-->
<!--<div class="video-upload__progress">-->
<!--<p></p>-->
<!--</div>-->
<!--</div>-->
</div>
</div>
</transition>
<yun-cropper :file="addFile" :addImg="this.getCroppedPic"></yun-cropper>
</div>
......@@ -147,14 +156,17 @@
<script>
import config from '../../action/config'
import config from '../../action/config';
import Loading from '../../components/pc/loading';
export default {
name:'releaseCard',
components:{
Loading
},
data(){
return {
releaseWord:'',
postContent:'',
topicsArr:[],
linksArr:[],
emojiArr:config.default_data.emojiArrs.emojiArr1,
......@@ -167,33 +179,20 @@
addFile:{},
TopicValue:'',
imgArr:[
'http://i1.sinaimg.cn/ent/d/2008-06-04/U105P28T3D2048907F326DT20080604225106.jpg',
'https://yundingweb.oss-cn-beijing.aliyuncs.com/yunding/20190828/22e2d91201a2478683044f116d1d8186-file',
'https://yundingweb.oss-cn-beijing.aliyuncs.com/yunding/20190828/161fecb3d8b441c5b340319c62508513-file',
'https://s2.ax1x.com/2020/01/13/lHpvY4.png',
'http://i1.sinaimg.cn/ent/d/2008-06-04/U105P28T3D2048907F326DT20080604225106.jpg',
'https://yundingweb.oss-cn-beijing.aliyuncs.com/yunding/20190828/22e2d91201a2478683044f116d1d8186-file',
'https://yundingweb.oss-cn-beijing.aliyuncs.com/yunding/20190828/161fecb3d8b441c5b340319c62508513-file',
'https://s2.ax1x.com/2020/01/13/lHpvY4.png',
],
video:'',
showVideoUploadP:false,
showCoverUploadP:false,
topicList:[],
addingPic:false,
}
},
computed:{
},
// watch:{
// topicList:{
// deep:true,
// handleChange(val){
//
// }
// }
//
// },
watch:{
},
created(){
this.dataGetTopicList();
if(process.browser){
......@@ -221,26 +220,11 @@
clickToAddEmoji(value){
this.releaseWord = this.releaseWord +value
},
openCropper(e){
console.log(e.target.files[0]);
this.addFile = e.target.files[0];;
},
getCroppedPic(pic){
this.imgArr.push(pic)
},
clickToDeleteImg(index){
let arr1 = this.imgArr.slice(0,index);
let arr2 = this.imgArr.slice(index+1)
this.imgArr = [...arr1,...arr2]
},
changeToUploadVideo(e){
console.log(e.target);
//let file = e.target.files[0];
//上传函数
this.showVideoUploadP = true;
},
changeToUploadCover(e){
console.log(e.target);
//let file = e.target.files[0];
......@@ -300,15 +284,60 @@
},
clickToAddTopic(id,name){
this.releaseWord = this.releaseWord +"##";
this.topicList.push({id:id,name:name});
this.showTopicCard = false;
this.releaseWord = this.releaseWord +"#"+name+"#";
},
dataPostVideo(e){
this.showVideoUploadP=true;
let a = new FormData();
let type = 0;
//0-用户头像
//1-博客封面
// 2-项目封面
a.append('file',e.target.files[0]);
a.append('type',type); //0是头像
this.$axios.$post(config.api.post.Resource.file,a).then((res)=>{
if(res.code === 0){
this.video =res.data;
}else{
this.$message({
message:res.msg,
type:'warning'
})
}
this.showVideoUploadP=false;
})
},
dataPostPic(e){
this.addingPic=true;
let a = new FormData();
let type = 0;
//0-用户头像
//1-博客封面
// 2-项目封面
a.append('file',e.target.files[0]);
a.append('type',type); //0是头像
this.$axios.$post(config.api.post.Resource.file,a).then((res)=>{
if(res.code === 0){
this.imgArr.push(res.data);
}else{
this.$message({
message:res.msg,
type:'warning'
})
}
this.addingPic=false;
})
},
dataPostContent(){
let postFrom = {
"content": this.releaseWord,
}
};
if(this.imgArr.length>0){
postFrom.pictures = this.imgArr;
......@@ -316,7 +345,44 @@
if(this.video){
postFrom.video = this.video
}
this.$axios.$post(config.api.post.Post.release,postFrom).then(()=>{
if(!this.releaseWord){
this.$message({
type:'warning',
message:'请输入动态的文字内容！'
})
return false;
}
if(this.imgArr.length>0&&this.video){
this.$message({
type:'warning',
message:'只能单独上传视频或者图片！'
})
return false;
}
this.$axios.$post(config.api.post.Post.release,postFrom).then((response)=>{
if(response.code===0){
this.$emit(config.event.listenReleaseState,1);
this.releaseWord = '';
this.showPhotoCard = false;
this.showVideoCard = false;
this.imgArr = [];
this.$message({
type:'success',
message:'动态发表成功！'
})
}else{
this.$message({
type:'warning',
message:'动态发表失败！'
})
}
})
},
......@@ -609,6 +675,7 @@
border:1px dashed #dadbff;
@extend %cursorPointer;
@include fontStyle(12,252,500,#666,center);
@extend %flex-row-center;
& input{
position:absolute;
@extend %cursorPointer;
......@@ -619,6 +686,25 @@
width:100%;
}
& video {
width:100%;
height:auto;
background-color:#B9A3D2 ;
}
.cancel-video{
position: absolute;
left:500*$length;
top:222*$length;
width:80*$length;
@include fontStyle(12,40,500,#666,center);
@extend %cursorPointer;
@extend %animate-transition;
&:hover{
color: #00AAE6
}
}
}
.video-upload{
.video-upload__word{
......
components/pc/socialContactCard.vue
......@@ -20,11 +20,14 @@
</div>
<div class="header-r">
<yun-icon name="down_arrow" size="6px" color="#999"></yun-icon>
<yun-icon name="down_arrow" size="6px" color="#999" @click.native.stop="clickToShowDrop"></yun-icon>
<dropdown v-if="showDrop">
<li @click="dateDeleteCard(postId)" ref="deleteButton">删除</li>
</dropdown>
</div>
</div>
<p class="card-content__word">{{content}}</p>
<p class="card-content__word" v-html="handledContent"></p>
<div class="card-content__img1" v-if="pictures.length>1&&pictures.length<=4&&!showBanner">
<div class="img-box" @click="clickToOpenBanner(index)" v-for="(value,index) in pictures"
......@@ -60,7 +63,7 @@
</p>
<banner v-if="showBanner" :currentImg2="currentImg" style="padding-top: 16px" :autoPlay=false :bannerType=2 :imgArr="pictures"></banner>
<video controls v-if="video" class="dynamic-video" src="http://clips.vorwaerts-gmbh.de/big_buck_bunny.mp4"></video>
<video controls v-if="video" class="dynamic-video" :src="video"></video>
<div class="card-footer">
......@@ -89,13 +92,14 @@
<script>
import Banner from './banner';
import Dropdown from '../../components/pc/dropdown'
import {dateConvert} from "../../action/utils/dataConvert";
import config from '../../action/config';
export default {
name:'socialContactCard',
components:{
Banner
Banner,Dropdown
},
props:{
......@@ -103,6 +107,10 @@
type:Object,
default: () => ({})
},
pageType:{
type:String,
default:''
}
},
data(){
......@@ -110,22 +118,16 @@
//return
return {
src:'https://s2.ax1x.com/2020/01/15/lO2kIf.png',
showDrop:false,
name:'我我欸',
postId:'',
content:'这个是二级评论的内容这个是二级评论的内容这个是二级评论的内容这个是二级评论的内容这个是二级评论的内容这个是二级评论的内容这个是二级评论的内容这个是二级评论的内容这个是二级评论的内容这个是二级评论的内容这个是二级评论的内容这个是二级评论的内容这个是二级评论的内容这个是二级评论的内容这个是二级评论的内容',
content:'打发手动阀#dfasdfasf1##dfasdfasf2#手动阀#dfasdfasf3#fadsfasdf',
createTime:'3小时前',
pictures:[
'https://yundingweb.oss-cn-beijing.aliyuncs.com/yunding/20190828/22e2d91201a2478683044f116d1d8186-file',
'https://yundingweb.oss-cn-beijing.aliyuncs.com/yunding/20190828/161fecb3d8b441c5b340319c62508513-file',
'https://s2.ax1x.com/2020/01/13/lHpvY4.png',
'http://i1.sinaimg.cn/ent/d/2008-06-04/U105P28T3D2048907F326DT20080604225106.jpg',
// 'https://yundingweb.oss-cn-beijing.aliyuncs.com/yunding/20190828/22e2d91201a2478683044f116d1d8186-file',
// 'https://yundingweb.oss-cn-beijing.aliyuncs.com/yunding/20190828/161fecb3d8b441c5b340319c62508513-file',
// 'https://s2.ax1x.com/2020/01/13/lHpvY4.png',
// 'https://s2.ax1x.com/2020/01/13/lHpvY4.png',
// 'https://yundingweb.oss-cn-beijing.aliyuncs.com/yunding/20190828/161fecb3d8b441c5b340319c62508513-file',
// 'https://s2.ax1x.com/2020/01/13/lHpvY4.png',
// 'https://s2.ax1x.com/2020/01/13/lHpvY4.png',
],
video:'',
userId:'',
......@@ -161,24 +163,66 @@
return false
}
}
}
},
handledContent(){
let content = this.content===null?'':this.content;
let indexArr = [];
let html=``;
for (let i = 0; i <content.length ; i++) {
let index = content.indexOf("#",i);
if(index!==-1&&index===i){
indexArr.push(index)
}
}
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(indexArr[indexArr.length-1]+1)}`;
return html
}
else{
return content;
}
},
},
created(){
this.dateGet2Info();
},
if(process.browser){
document.addEventListener('click',(e)=>{
if(this.$refs.deleteButton){
if(!this.$refs.deleteButton.contains(e.target)){
this.showDrop = false;
}
}
})
}
},
methods:{
clickToOpenBanner(index){
this.showBanner = true;
this.currentImg = index
},
clickToShowDrop(){
this.pageType==='my'?(this.showDrop=!this.showDrop):null
},
dateGet2Info(){
let info = this.info;
if(this.info.postId){
this.content = info.content;
this.postId = info.postId;
this.pictures = info.pictures;
this.pictures = info.pictures===null?[]:info.pictures;
this.video = info.video;
this.createTime = dateConvert(info.createTime);
this.userId = info.userId;
......@@ -186,6 +230,25 @@
this.userAvatar = info.userAvatar;
}
},
dateDeleteCard(id){
this.$axios.$delete(config.api.delete.Post.delete+id).then((response)=>{
if(response.code===0){
this.$emit(config.event.listenSocialCardState,1);
this.$message({
type:'success',
message:'删除成功！'
})
}else{
this.$message({
type:'warning',
message:'删除失败！'
})
}
})
},
},
......@@ -194,7 +257,7 @@
</script>
<style lang="scss" scoped>
<style lang="scss" >
.social-card__wrap{
margin-top: 16*$length;
.social-card{
......@@ -243,6 +306,9 @@
}
}
}
.header-r{
position:relative;
}
}
.card-content__word{
......@@ -250,7 +316,10 @@
@include fontStyle(14,24,500,#222,left);
height:auto;
span{
@extend %cursorPointer;
color:#00AAE6;
margin-left:3px;
margin-right: 3px;
}
}
......
pages/dynamic/index.vue
......@@ -7,12 +7,11 @@
></nav-wrap>
</div>
<div class="dynamic-container__center">
<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>
<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 :paginationState="paginationState" :type="2" key="container5" style="margin:20px auto;" :pages="pages" v-on:listenPageChange="changePage"></pagination>
</div>
<div class="dynamic-container__right">
......@@ -30,11 +29,11 @@
<script>
import ReleaseCard from '../../components/pc/releaseCard';
import SocialContactCard from '../../components/pc/socialContactCard';
import SocialCard from '../../components/pc/socialContactCard';
import CardContainer from '../../components/pc/cardContainer';
import NavWrap from "../../components/pc/nav/navWrap";
import Pagination from '../../components/pc/pagination';
import config from '../../action/config'
export default {
......@@ -96,8 +95,14 @@
id: '代码'
},
],
postList:[],
pages:1,
paginationState:'complate'
}
},
components:{
ReleaseCard,SocialCard,CardContainer,NavWrap,Pagination
},
created() {
this.$router.replace({
......@@ -108,9 +113,36 @@
});
},
components:{
ReleaseCard,SocialContactCard,CardContainer,NavWrap
methods:{
dataGetDynamic(currentPage){
this.paginationState = 'loading';
this.$axios.$get(config.api.get.Post.list,{
params:{
page:currentPage,
size:10
}
}).then((response)=>{
let list = response.data.dataList
for(let i = 0;i<list.length;i++){
this.postList.push(list[i]);
this.paginationState = 'over';
}
this.pages = response.data.totalPage;
})
},
changePage(currentPage){
//返回页数 请求新的数据
this.dataGetDynamic(currentPage);
}
},
}
......
pages/personal-center/account/info.vue
......@@ -171,6 +171,7 @@
this.$store.commit('userProfile/setUser', user);
this.getDataUserInfo();
this.isEdit = false;
this.isEdit2 = false;
this.$message({
message:response.msg,
type:'success'
......
pages/personal-center/home/dynamic.vue
<template>
<div>
<div>
<release-card style="margin-top: 16px"></release-card>
<social-card v-for="(val,index) in rightList" :key="val.blogId" :info="val"></social-card>
<div >
<release-card 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>
<pagination key="container5" style="margin:20px auto;" :pages="pages" v-on:listenPageChange="changePage"></pagination>
</div>
</div>
</template>
<script>
import SocialCard from '../../../components/pc/socialContactCard';
......
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