no message

pages/my/index.vue

@@ -103,7 +103,7 @@
             <dynamic-items text-color="#141414" operate-color="#999999" tag-color="#999999" tag-bg="#F2F2F2" division-color="#F2F2F2" :show-add="true"></dynamic-items>
           </view>
           <view class="my-praise">
-
+            <my-praise></my-praise>
           </view>
         </view>
 
@@ -116,12 +116,13 @@
 <script>
 import MyNav from "@/pages/my/model/my-nav";
 import DynamicItems from "@/pages/common/dynamic/dynamic-items";
+import MyPraise from "@/pages/my/model/my-praise";
 export default {
-  components: {DynamicItems, MyNav},
+  components: {MyPraise, DynamicItems, MyNav},
   data() {
     return {
       navHeight:0,
-      tagNum:0
+      tagNum:1
     }
   },
   methods: {

pages/my/model/my-praise.vue

@@ -1,27 +1,201 @@
 <template>
-  <view>
+  <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="right-name sys-color-black sys-weight-600">
+          WWWWW
+        </view>
+        <view class="right-time sys-color-gray-9 sys-weight-400">
+          2021-04-18 15:53发布.<100m
+        </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: {},
+  components: {DynamicTag, ImgThree, ImgTwo, ImgOne},
   props: {},
   data() {
-    return {}
+    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;
+      .right-name{
+        height: 40rpx;
+        line-height: 40rpx;
+        font-size: 32rpx;
+      }
+      .right-time{
+        margin-top: 8rpx;
+        font-size: 24rpx;
+        height: 34rpx;
+        line-height: 34rpx;
+      }
+      .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>