no message

pages/index/model/img-one.vue

@@ -0,0 +1,42 @@
+<template>
+  <view class="img-box">
+      <image :src="fileItem" @click="previewImage(fileIndex)" v-for="(fileItem,fileIndex) in fileList" mode="widthFix"></image>
+  </view>
+</template>
+
+<script>
+export default {
+  name: "img-one",
+  components: {},
+  props: {
+    fileList:{
+      default:[]
+    }
+  },
+  data() {
+    return {}
+  },
+  watch: {},
+  mounted() {
+
+  },
+  methods: {
+    previewImage(index){
+      return;
+      uni.previewImage({
+        urls: this.fileList,
+        current:index
+      });
+    }
+  }
+}
+</script>
+
+<style scoped lang="scss">
+.img-box{
+  image{
+    width: 394rpx;
+    border-radius: 16rpx;
+  }
+}
+</style>

pages/index/model/img-three.vue

@@ -0,0 +1,59 @@
+<template>
+  <view class="img-box">
+    <view class="img-item" v-for="(fileItem,fileIndex) in fileList">
+      <image :src="fileItem" @click="previewImage(fileIndex)" mode="aspectFill"></image>
+    </view>
+  </view>
+</template>
+
+<script>
+export default {
+  name: "img-three",
+  components: {},
+  props: {
+    fileList:{
+      default:[]
+    }
+  },
+  data() {
+    return {}
+  },
+  watch: {},
+  mounted() {
+
+  },
+  methods: {
+    previewImage(index){
+      return;
+      uni.previewImage({
+        urls: this.fileList,
+        current:index
+      });
+    }
+  }
+}
+</script>
+
+<style scoped lang="scss">
+.img-box{
+  height: auto;
+  display: flex;
+  flex-wrap: wrap;
+  .img-item{
+    display: inline-block;
+    margin-right:12rpx;
+    image{
+      width: calc((100vw - 214rpx)/3);
+      height: calc((100vw - 214rpx)/3);
+      border-radius: 16rpx;
+    }
+  }
+  .img-item:nth-of-type(3n+0){
+    margin-right:0;
+  }
+  .img-item:nth-of-type(n+4){
+    margin-top:10rpx;
+  }
+
+}
+</style>

pages/index/model/img-two.vue

@@ -0,0 +1,59 @@
+<template>
+  <view class="img-box">
+    <view class="img-item" v-for="(fileItem,fileIndex) in fileList">
+      <image @click="previewImage(fileIndex)" :src="fileItem"  mode="aspectFill"></image>
+    </view>
+  </view>
+</template>
+
+<script>
+export default {
+  name: "img-two",
+  components: {},
+  props: {
+    fileList:{
+      default:[]
+    }
+  },
+  data() {
+    return {}
+  },
+  watch: {},
+  mounted() {
+
+  },
+  methods: {
+    previewImage(index){
+      return;
+      uni.previewImage({
+        urls: this.fileList,
+        current:index
+      });
+    }
+  }
+}
+</script>
+
+<style scoped lang="scss">
+.img-box{
+  height: auto;
+  display: flex;
+  flex-wrap: wrap;
+  .img-item{
+    display: inline-block;
+    margin-right:12rpx;
+    image{
+      width: calc((100vw - 200rpx)/2);
+      height: calc((100vw - 200rpx)/2);
+      border-radius: 16rpx;
+    }
+  }
+  .img-item:nth-of-type(even){
+    margin-right:0;
+  }
+  .img-item:nth-of-type(n+3){
+    margin-top:10rpx;
+  }
+
+}
+</style>

pages/index/model/user-content.vue

@@ -3,7 +3,7 @@
     <view class="content-top">
       <view class="top-left">“</view>
       <view class="top-right">
-        <image  class="right-img"   mode="aspectFill" src="/static/img/index/authentication.png" ></image>
+        <image  class="right-img"   mode="aspectFill" src="/static/img/index/like.png" ></image>
         <view class="right-text sys-color-white sys-weight-400">108喜欢</view>
       </view>
     </view>
@@ -20,7 +20,7 @@
         <view class="gift-title-left sys-weight-600">心动礼物</view>
         <view class="gift-title-right">
           <view class="gift-right-text sys-color-white sys-weight-400">全部</view>
-          <image  class="gift-right-img"   mode="aspectFill" src="/static/img/index/authentication.png" ></image>
+          <image  class="gift-right-img"   mode="aspectFill" src="/static/img/index/right.png" ></image>
         </view>
       </view>
       <view class="gift-list">
@@ -34,7 +34,7 @@
         </view>
       </view>
       <view class="dynamic-list">
-        <view class="dynamic-item">
+        <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-color-white sys-weight-400">12</text>
@@ -46,6 +46,37 @@
             </view>
           </view>
           <view class="dynamic-data">
+            <view class="data-text">
+              <text class="text-item sys-color-white ">{{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">
+                  <image  class="data-tag-img"   mode="aspectFill" :src="tag.icon" ></image>
+                  <view class="data-tag-text sys-color-black-2 sys-weight-400">{{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-text sys-color-white sys-weight-400">{{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-text sys-color-white sys-weight-400">{{item.evaluateNum>0?item.evaluateNum:'评论'}}</view>
+              </view>
+            </view>
 
           </view>
 
@@ -57,9 +88,12 @@
 </template>
 
 <script>
+import ImgOne from "@/pages/index/model/img-one";
+import ImgTwo from "@/pages/index/model/img-two";
+import ImgThree from "@/pages/index/model/img-three";
 export default {
   name: "user-content",
-  components: {},
+  components: {ImgThree, ImgTwo, ImgOne},
   props: {},
   data() {
     return {
@@ -70,6 +104,18 @@ export default {
         {'num':1,'url':'/static/img/temporary/gift1.png'},
         {'num':0,'url':'/static/img/temporary/gift2.png'},
         {'num':0,'url':'/static/img/temporary/gift3.png'},
+      ],
+      list:[
+        {'text':'我是阳光大男孩我','img':['/static/img/temporary/1.png'],'tag':[{'text':'南亭新都会商场','icon':'/static/img/index/address.png'},{'text':'你好认识一哈','icon':'/static/img/index/know.png'}],'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':'/static/img/index/address.png'},{'text':'你好认识一哈','icon':'/static/img/index/know.png'}],'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':'/static/img/index/address.png'},{'text':'你好认识一哈','icon':'/static/img/index/know.png'}],'likeNum':10,'evaluateNum':20,'isLike':true},
       ]
     }
   },
@@ -77,7 +123,16 @@ export default {
   mounted() {
 
   },
-  methods: {}
+  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>
 
@@ -159,6 +214,7 @@ export default {
           margin-right: 8rpx;
         }
         .gift-right-img{
+          margin-top: 4rpx;
           height: 24rpx;
           width: 24rpx;
         }
@@ -238,6 +294,67 @@ export default {
           }
         }
       }
+      .dynamic-data{
+        margin-left: 26rpx;
+        border-left: 1rpx solid rgba(255,255,255,0.2);
+        padding: 4rpx 0 44rpx 40rpx;
+        .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-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-text{
+              height: 40rpx;
+              line-height: 41rpx;
+              font-size: 26rpx;
+
+            }
+
+          }
+        }
+
+      }
 
     }
   }