lcoco/pages/common/dynamic/dynamic-items.vue

<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>
    {{list.length}}
    <view class="dynamic-item" v-for="(item,itemIndex) in list">
      <view class="dynamic-title">
        <view class="dynamic-title-left" v-if="item.dateArr.length>0">
          <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">
          <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}"> &#xe8ad;</text>
              <text class="iconfont icon-dianzan1" v-else  :style="{'color':'#ED301D'}"> &#xe8c3;</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}">&#xe891;</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";
import {setLike, setUnLike} from "@/api/community";
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 {
      list:[],
      isAjax:false,
      total:undefined,
      page:1,
    }
  },
  watch: {
    'userId':function () {
      this.startList()
    }
  },
  mounted() {
    this.startList()
  },
  methods: {
    startList(){
      if(this.userId<=0){
        // return false
      }
      this.list=[]
      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){
          res.data.data.forEach((item)=>{
            item.dateArr=tools.getDateArr(item.createdAt)
            that.list.push(item )
          })
          ++that.page
          that.total=res.data.total
        }
      })
    },
    setLike(index){
      this.list[index].liked=!this.list[index].liked
      if(this.list[index].liked){
        ++this.list[index].likeCount
        setLike( this.list[index].id).then((res)=>{})
      }else {
        --this.list[index].likeCount
        setUnLike( this.list[index].id).then((res)=>{})
      }
    }
  }
}
</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>