|
|
@@ -1,285 +0,0 @@
|
|
|
-<template>
|
|
|
- <view class="dynamic-item-box">
|
|
|
- <view class="dynamic-item" v-show="showAdd">
|
|
|
- <view class="dynamic-title">
|
|
|
- <view class="dynamic-title-left">
|
|
|
- <text class="dynamic-title-text sys-weight-600" :style="{'color':textColor}">今天</text>
|
|
|
- </view>
|
|
|
- </view>
|
|
|
- <view class="dynamic-data" :style="{'border-left':' 1rpx solid '+divisionColor}">
|
|
|
- <view class="data-issue">
|
|
|
- <view class="issue-left">
|
|
|
- <image class="left-one" mode="aspectFill" src="/static/img/temporary/2.png" ></image>
|
|
|
- <view class="left-two">
|
|
|
- <view class="two-title sys-color-black sys-weight-600">发布动态</view>
|
|
|
- <view class="two-text sys-color-gray-9">认识更多朋友</view>
|
|
|
- </view>
|
|
|
- </view>
|
|
|
- <view class="issue-right sys-color-black sys-weight-600">去发布</view>
|
|
|
- </view>
|
|
|
- </view>
|
|
|
- </view>
|
|
|
- {{dynamicList.length}}
|
|
|
- <view class="dynamic-item" v-for="(item,itemIndex) in dynamicList">
|
|
|
- 12121
|
|
|
- <view class="dynamic-title">
|
|
|
- <view class="dynamic-title-left">
|
|
|
- <text class="dynamic-title-text sys-weight-600" :style="{'color':textColor}">item.dateArr[2]</text>
|
|
|
- <text class="dynamic-title-text sys-weight-400" :style="{'color':textColor}">item.dateArr[1]月</text>
|
|
|
- <text class="dynamic-title-text sys-weight-400" :style="{'color':textColor}">item.dateArr[0]年</text>
|
|
|
- </view>
|
|
|
- <view class="dynamic-title-right">
|
|
|
- <image class="dynamic-right-img" mode="aspectFill" src="/static/img/index/dynamic-all.png" ></image>
|
|
|
- </view>
|
|
|
- </view>
|
|
|
- <view class="dynamic-data" :style="{'border-left':' 1rpx solid '+divisionColor}">
|
|
|
- <view class="data-text">
|
|
|
- <text class="text-item" :style="{'color':textColor}">{{item.content}}</text>
|
|
|
- </view>
|
|
|
-
|
|
|
- <view class="data-img" v-if="item.galleryUrls.length>0">
|
|
|
- <view class="one-img" v-if="item.galleryUrls.length===1">
|
|
|
- <img-one :file-list="item.galleryUrls"></img-one>
|
|
|
- </view>
|
|
|
- <view class="two-img" v-else-if="item.galleryUrls.length===2 || item.galleryUrls.length===4">
|
|
|
- <img-two :file-list="item.galleryUrls"></img-two>
|
|
|
- </view>
|
|
|
- <view class="three-img" v-else>
|
|
|
- <img-three :file-list="item.galleryUrls"></img-three>
|
|
|
- </view>
|
|
|
-
|
|
|
- </view>
|
|
|
- <view class="data-tag-list" v-if="false" >
|
|
|
- <dynamic-tag :list="item.tag" :tag-bg="tagBg" :tag-color="tagColor"></dynamic-tag>
|
|
|
-
|
|
|
- </view>
|
|
|
- <view class="data-operation">
|
|
|
- <view class="operation-item" @click="setLike(itemIndex)">
|
|
|
-<!-- <image class="operation-img" mode="aspectFill" :src="'/static/img/index/like-'+(item.isLike?'ok':'no')+'.png'" ></image>-->
|
|
|
- <view class="operation-icon">
|
|
|
- <text class="iconfont icon-dianzan" v-if="!item.liked" :style="{'color':operateColor}"> </text>
|
|
|
- <text class="iconfont icon-dianzan1" v-else :style="{'color':'#ED301D'}"> </text>
|
|
|
- </view>
|
|
|
- <view class="operation-text sys-weight-400" :style="{'color':operateColor}">{{item.likeCount>0?item.likeCount:'点赞'}}</view>
|
|
|
- </view>
|
|
|
- <view class="operation-item">
|
|
|
-<!-- <image class="operation-img" mode="aspectFill" src="/static/img/index/evaluate.png" ></image>-->
|
|
|
- <view class="operation-icon"><text class="iconfont icon-pinglun" :style="{'color':operateColor}"></text></view>
|
|
|
- <view class="operation-text sys-weight-400" :style="{'color':operateColor}">{{item.commentCount>0?item.commentCount:'评论'}}</view>
|
|
|
- </view>
|
|
|
- </view>
|
|
|
-
|
|
|
- </view>
|
|
|
- </view>
|
|
|
-
|
|
|
- </view>
|
|
|
-</template>
|
|
|
-
|
|
|
-<script>
|
|
|
-import ImgOne from "@/pages/common/img/img-one";
|
|
|
-import ImgTwo from "@/pages/common/img/img-two";
|
|
|
-import ImgThree from "@/pages/common/img/img-three";
|
|
|
-import DynamicTag from "@/pages/common/tag/dynamic-tag";
|
|
|
-import {getMoments} from "@/api/discovery";
|
|
|
-import tools from "@/service/tools";
|
|
|
-export default {
|
|
|
- name: "dynamic-items",
|
|
|
- components: {DynamicTag, ImgThree, ImgTwo, ImgOne},
|
|
|
- props: {
|
|
|
- 'userId':{
|
|
|
- default:0
|
|
|
- },
|
|
|
- textColor:{
|
|
|
- type:String,
|
|
|
- default:'#fff'
|
|
|
- },
|
|
|
- tagColor:{
|
|
|
- type:String,
|
|
|
- default:'#282828'
|
|
|
- },
|
|
|
- tagBg:{
|
|
|
- type:String,
|
|
|
- default:'rgba(255,255,255,0.4)'
|
|
|
- },
|
|
|
- operateColor:{
|
|
|
- type:String,
|
|
|
- default:'#fff'
|
|
|
- },
|
|
|
- divisionColor:{
|
|
|
- type:String,
|
|
|
- default:'rgba(255,255,255,0.2)'
|
|
|
- },
|
|
|
- showAdd:{
|
|
|
- type:Boolean,
|
|
|
- default:false
|
|
|
- },
|
|
|
- },
|
|
|
- data() {
|
|
|
- return {
|
|
|
- page:1,
|
|
|
- total:undefined,
|
|
|
- isAjax:false,
|
|
|
- dynamicList:[]
|
|
|
- }
|
|
|
- },
|
|
|
- watch: {
|
|
|
- 'userId':function () {
|
|
|
- // this.startList()
|
|
|
- }
|
|
|
- },
|
|
|
- mounted() {
|
|
|
- this.startList()
|
|
|
- },
|
|
|
- methods: {
|
|
|
- startList(){
|
|
|
- if(this.userId<=0){
|
|
|
- return false
|
|
|
- }
|
|
|
- // this.dynamicList=[]
|
|
|
- this.isAjax=false
|
|
|
- this.total=undefined
|
|
|
- this.page=1
|
|
|
- this.getMoments()
|
|
|
- },
|
|
|
- getMoments(){
|
|
|
- if(this.isAjax){
|
|
|
- return
|
|
|
- }
|
|
|
- this.isAjax=true
|
|
|
- let that=this
|
|
|
- getMoments({'userId':this.userId,'pageNo':this.page,'pageSize':20}).then((res)=>{
|
|
|
- this.isAjax=false
|
|
|
- if(res.code===0){
|
|
|
- // console.log(this.dynamicList)
|
|
|
- res.data.data.forEach((item)=>{
|
|
|
- item.dateArr=tools.getDateArr(item.createdAt)
|
|
|
- console.log(that.dynamicList)
|
|
|
- that.dynamicList.push(item)
|
|
|
- })
|
|
|
- // console.log( this.dynamicList)
|
|
|
- // console.log( this.dynamicList.length)
|
|
|
- ++that.page
|
|
|
- that.total=res.data.total
|
|
|
- }
|
|
|
- })
|
|
|
- },
|
|
|
- setLike(index){
|
|
|
- this.dynamicList[index].liked=!this.dynamicList[index].liked
|
|
|
- if(this.dynamicListdynamicList[index].liked){
|
|
|
- ++this.dynamicList[index].likeCount
|
|
|
- }else {
|
|
|
- --this.dynamicList[index].likeCount
|
|
|
- }
|
|
|
- }
|
|
|
- }
|
|
|
-}
|
|
|
-</script>
|
|
|
-
|
|
|
-<style scoped lang="scss">
|
|
|
-@import "/static/css/en-iconfont.css";
|
|
|
-.dynamic-item-box{
|
|
|
- .dynamic-item{
|
|
|
- margin-top: 16rpx;
|
|
|
- .dynamic-title{
|
|
|
- display: flex;
|
|
|
- justify-content: space-between;
|
|
|
- .dynamic-title-left{
|
|
|
- display:table-cell;
|
|
|
- vertical-align:bottom;
|
|
|
- .dynamic-title-text{
|
|
|
- font-size: 28rpx;
|
|
|
- }
|
|
|
- .dynamic-title-text:first-child{
|
|
|
- font-size: 48rpx;
|
|
|
- margin-right: 12rpx;
|
|
|
- }
|
|
|
- }
|
|
|
- .dynamic-title-right{
|
|
|
- .dynamic-right-img{
|
|
|
- width: 6rpx;
|
|
|
- height: 26rpx;
|
|
|
- }
|
|
|
- }
|
|
|
- }
|
|
|
- .dynamic-data{
|
|
|
- margin-left: 26rpx;
|
|
|
- border-left: 1rpx solid rgba(255,255,255,0.2);
|
|
|
- padding: 4rpx 0 44rpx 40rpx;
|
|
|
- .data-issue{
|
|
|
- display: flex;
|
|
|
- justify-content: space-between;
|
|
|
- align-items: center;
|
|
|
- height: 92rpx;
|
|
|
- .issue-left{
|
|
|
- display: flex;
|
|
|
- justify-content: flex-start;
|
|
|
- .left-one{
|
|
|
- border-radius: 8rpx;
|
|
|
- height: 92rpx;
|
|
|
- width: 92rpx;
|
|
|
- margin-right: 22rpx;
|
|
|
- }
|
|
|
- .left-two{
|
|
|
- .two-title{
|
|
|
- font-size: 32rpx;
|
|
|
- }
|
|
|
- .two-text{
|
|
|
- font-size: 28rpx;
|
|
|
- }
|
|
|
- }
|
|
|
- }
|
|
|
- .issue-right{
|
|
|
- border: 2rpx solid #E0E0E0;
|
|
|
- border-radius: 200rpx;
|
|
|
- padding: 8rpx 24rpx;
|
|
|
- font-size: 28rpx;
|
|
|
- }
|
|
|
- }
|
|
|
- .data-text{
|
|
|
- .text-item{
|
|
|
- font-size: 28rpx;
|
|
|
- }
|
|
|
-
|
|
|
- }
|
|
|
- .data-img{
|
|
|
- margin-top: 30rpx;
|
|
|
- }
|
|
|
- .data-tag-list{
|
|
|
- margin-top: 28rpx;
|
|
|
- }
|
|
|
- .data-operation{
|
|
|
- margin-top: 40rpx;
|
|
|
- display: flex;
|
|
|
- justify-content: flex-start;
|
|
|
- .operation-item{
|
|
|
- width: 200rpx;
|
|
|
- display: flex;
|
|
|
- justify-content: flex-start;
|
|
|
- .operation-img{
|
|
|
- width: 40rpx;
|
|
|
- height: 40rpx;
|
|
|
- margin-right: 8rpx;
|
|
|
- }
|
|
|
- .operation-icon{
|
|
|
- width: 40rpx;
|
|
|
- height: 40rpx;
|
|
|
- margin-right: 8rpx;
|
|
|
- text{
|
|
|
- font-size: 40rpx;
|
|
|
- line-height: 40rpx;
|
|
|
- }
|
|
|
- }
|
|
|
- .operation-text{
|
|
|
- height: 40rpx;
|
|
|
- line-height: 41rpx;
|
|
|
- font-size: 26rpx;
|
|
|
-
|
|
|
- }
|
|
|
-
|
|
|
- }
|
|
|
- }
|
|
|
-
|
|
|
- }
|
|
|
- }
|
|
|
-}
|
|
|
-</style>
|
BF-202210271038\Administrator