no message

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

@@ -0,0 +1,285 @@
+<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}"> &#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";
+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>