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>
    <view class="dynamic-item" v-for="(item,itemIndex) in list">
      <view class="dynamic-title">
        <view class="dynamic-title-left">
          <text class="dynamic-title-text  sys-weight-600" :style="{'color':textColor}">12</text>
          <text class="dynamic-title-text  sys-weight-400" :style="{'color':textColor}">04月</text>
          <text class="dynamic-title-text  sys-weight-400" :style="{'color':textColor}">2020年</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.text}}</text>
        </view>

        <view class="data-img" v-if="item.img.length>0">
          <view class="one-img" v-if="item.img.length===1">
            <img-one :file-list="item.img"></img-one>
          </view>
          <view class="two-img" v-else-if="item.img.length===2 || item.img.length===4">
            <img-two :file-list="item.img"></img-two>
          </view>
          <view class="three-img" v-else>
            <img-three :file-list="item.img"></img-three>
          </view>

        </view>
        <view class="data-tag-list" 	>
          <view class="data-tag" v-for="tag in item.tag" :style="{'background':tagBg}">
<!--            <image  class="data-tag-img"   mode="aspectFill" :src="tag.icon" ></image>-->
            <view class="data-tag-icon">
              <text class="iconfont icon-dingweixiao" v-if="tag.icon==='1'"  :style="{'color':tagColor}"> &#xe87e;</text>
              <text class="iconfont icon-canyuhuati" v-else  :style="{'color':tagColor}"> &#xe61e;</text>
            </view>
            <view class="data-tag-text  sys-weight-400"  :style="{'color':tagColor}">{{tag.text}}</view>
          </view>
        </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.isLike"  :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.likeNum>0?item.likeNum:'点赞'}}</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.evaluateNum>0?item.evaluateNum:'评论'}}</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";
export default {
  name: "dynamic-items",
  components: {ImgThree, ImgTwo, ImgOne},
  props: {
      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:[
        {'text':'我是阳光大男孩我','img':['/static/img/temporary/1.png'],'tag':[{'text':'南亭新都会商场','icon':'1'},{'text':'你好认识一哈','icon':'2'}],'likeNum':1,'evaluateNum':0,'isLike':true},
        {'text':'我是阳光大男孩我','img':['/static/img/temporary/1.png','/static/img/temporary/2.png','/static/img/temporary/3.png','/static/img/temporary/2.png'],'tag':[{'text':'南亭新都会商场','icon':'1'},{'text':'你好认识一哈','icon':'2'}],'likeNum':0,'evaluateNum':20,'isLike':false},
        {'text':'我是阳光大男孩我','img':[
            '/static/img/temporary/1.png',
            '/static/img/temporary/3.png',
            '/static/img/temporary/2.png',
            '/static/img/temporary/1.png',
            '/static/img/temporary/3.png',
            '/static/img/temporary/2.png',
          ],'tag':[{'text':'南亭新都会商场','icon':'1'},{'text':'你好认识一哈','icon':'2'}],'likeNum':10,'evaluateNum':20,'isLike':true},
      ]
    }
  },
  watch: {},
  mounted() {

  },
  methods: {
    setLike(index){
      this.list[index].isLike=!this.list[index].isLike
      if(this.list[index].isLike){
        ++this.list[index].likeNum
      }else {
        --this.list[index].likeNum
      }
    }
  }
}
</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;
        display: flex;
        flex-wrap: wrap;
        .data-tag{
          margin-top: 26rpx;
          margin-right: 20rpx;
          border-radius: 200rpx;
          background: rgba(255,255,255,0.4);
          display: flex;
          justify-content: center;
          padding: 4rpx 12rpx;
          .data-tag-img{
            width: 32rpx;
            height: 32rpx;
            margin-right: 8rpx;
          }
          .data-tag-icon{
            width: 32rpx;
            height: 32rpx;
            margin-right: 8rpx;
            text-align: center;
            line-height: 32rpx;
            text{
              font-size: 28rpx;
              line-height: 32rpx;
            }
          }
          .data-tag-text{
            font-size: 24rpx;
            height: 32rpx;
            line-height: 32rpx;
          }
        }
      }
      .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>