lcoco/pages/my/model/my-praise.vue

<template>
  <view class="my-praise-box">
    <view class="praise-item" v-for="(item,itemIndex) in list">
      <view class="praise-left">
        <image class="praise-head" src="/static/img/temporary/3.png" mode="aspectFill"></image>
      </view>
      <view class="praise-right">
        <view class="praise-top-data">
          <view class="praise-top-left">
            <view class="praise-top-left-title">
              <view class="left-title-text sys-height-44 sys-color-black sys-weight-600">WWWWW</view>
              <view class="left-title-vip">
                <image class="left-title-vip-img" src="/static/img/my/vip.png" mode="heightFix"></image>
              </view>

            </view>
            <view class="left-title-time sys-color-gray-9">2021-04-18 15:53发布.<100m</view>
          </view>
          <view class="praise-top-right">
            <view class="praise-top-right-icon">
              <image class="praise-top-right-img" src="/static/img/circle/Group-100243@2x.png" mode="aspectFill"></image>
            </view>
            <view class="praise-top-right-text sys-weight-600 sys-color-black">打招呼</view>
          </view>
        </view>

        <view class="right-text sys-color-black sys-weight-400">
          我是阳光大男孩
        </view>
        <view class="right-img">
          <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="right-tag-list" 	>
          <dynamic-tag :list="item.tag" :tag-bg="tagBg" :tag-color="tagColor"></dynamic-tag>
        </view>
        <view class="right-operation-list">
          <view class="operation-share">
            <view class="operation-item">
              <view class="operation-icon"><text class="iconfont"  :style="{'color':operateColor}">&#xe624;</text></view>
              <view class="operation-text sys-weight-400" :style="{'color':operateColor}">分享</view>
            </view>
          </view>
          <view class="operation-items">
            <view class="operation-item">
              <view class="operation-icon" @click="setLike(itemIndex)">
                <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">
              <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>

  </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";
export default {
  name: "my-praise",
  components: {DynamicTag, ImgThree, ImgTwo, ImgOne},
  props: {},
  data() {
    return {
      tagBg:'#F2F2F2',
      tagColor:'#999999',
      operateColor:'#999999',
      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">
.my-praise-box{
  .praise-item{
    margin : 40rpx 0 4rpx 0;
    border-bottom: 1rpx solid #F2F2F2;
    display: flex;
    justify-content: space-between;
    .praise-left{
      width: 80rpx;
      .praise-head{
        width: 80rpx;
        height: 80rpx;
        border-radius: 60rpx;
      }
    }
    .praise-right{
      width: calc(100% - 80rpx);
      padding-left: 22rpx;
      .praise-top-data{
        display: flex;
        justify-content: space-between;
        .praise-top-left{
          .praise-top-left-title{
            display: flex;
            justify-content: flex-start;
            align-items: center;
            .left-title-text{
              font-size: 32rpx;
              margin-right: 8rpx;
            }
            .left-title-vip-img{
              height: 28rpx;
            }
          }
          .left-title-time{
            margin-top: 8rpx;
            line-height: 34rpx;
            font-size: 24rpx;
          }
        }
        .praise-top-right{
          height: 40rpx;
          border-radius: 200rpx;
          border: 2rpx solid #141414;
          padding: 8rpx 16rpx;
          display: flex;
          justify-content: space-between;
          .praise-top-right-img{
            width: 40rpx;
            height: 40rpx;
            margin-right: 8rpx;
          }
          .praise-top-right-text{
            font-size: 28rpx;
            line-height: 40rpx;
          }
        }
      }
      .right-text{
        margin-top: 24rpx;
        font-size: 28rpx;
        height: 40rpx;
        line-height: 40rpx;
      }
      .right-img{
        margin-top: 16rpx;
      }
      .right-tag-list{
        margin-top: 8rpx;
      }
      .right-operation-list{
        margin-top: 44rpx;
        padding-bottom: 42rpx;
        display: flex;
        justify-content: space-between;
        .operation-share{
          .operation-item:first-child{
            .operation-icon{
              text{
                font-size: 30rpx;
              }
            }
          }
        }
        .operation-items{
          display: flex;
          justify-content: flex-start;
          .operation-item:first-child{
            .operation-text{
              width: 100rpx;
            }
          }
          .operation-item:last-child{
            .operation-text{
              width: 80rpx;
            }
          }

        }
        .operation-item{
          display: flex;
          justify-content: flex-start;
          .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>