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

<template>
  <view class="my-praise-box">
		<view class="" v-show="tagNum == 0">
				<view class="publish-box" v-show="publishBoxOff">
				<image class="publish-img sys-radius-12" src="/static/img/circle/1.png" mode=""></image>
				<view class="publish-text">
					<view class="publish-title sys-color-black-0 sys-weight-400 sys-size-34">
						不太正经的机车照片
					</view>
					<view class="sys-size-28 sys-weight-400 sys-color-gray-9">
						记录在自由路.上的轰鸣瞬间
					</view>
				</view>
				<view class="publish-button sys-background-FF9F14 sys-radius-200 sys-size-28 sys-color-white">
					去发布
				</view>
				<view class="off-button sys-background-F2F2F2 sys-radius-round-left-80" @click="publishOff">
					<image class="off-img" src="/static/img/circle/off.png" mode=""></image>
				</view>
			</view>
		</view>
	
		<scroll-view class="recommended-box" scroll-x="true" v-show="tagNum == 2">
		 <view class="recommended-list" v-for="(item,i) in listTwo" :key="i" @click="goRecommended">
		 	<image class="recommended-list-img sys-radius-16" :src="item.img" mode=""></image>
		 	<view class="recommended-list-name">
		 		<image class="list-name-img" src="../../../static/dgex-tantan/like.png" mode=""></image>
		 		<view class="sys-color-white sys-size-28">
		 			{{item.text}}
		 		</view>
		 	</view>
		 	<view class="recommended-list-text">
		 		<view class="recommended-list-text-left">
		 			<!-- <image v-for="imgs in item.icon" class="list-text-left-img sys-radius-8" :src="imgs" mode=""></image> -->
					<image v-for="imgs in item.icon" class="list-text-left-img sys-radius-8" src="/static/img/temporary/1.png" mode=""></image>
		 		</view>
				<view class="recommended-list-text-right">
					<view class="sys-size-24 sys-color-white">
						{{item.num}}人在这里
					</view>
					<uni-icons type="forward" size="12" color="#fff"></uni-icons>
				</view>
		 	</view>
		 </view>
		</scroll-view>
		
    <view class="praise-item" @click="goToDetails" 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">
           <call></call>
          </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";
import Call from "@/pages/common/call/call";
export default {
  name: "my-praise",
  components: {Call, DynamicTag, ImgThree, ImgTwo, ImgOne},
  props: {
		tagNum:{},
	},
  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},
      ],
			listTwo:[
				{'text':'24h照片营业馆','img':'/static/img/temporary/1.png','icon':['/static/img/temporary/1.png','/static/img/temporary/1.png'],'num':'815.4w'},
				{'text':'24h照片营业馆','img':'/static/img/temporary/1.png'},{'img':'/static/img/login/2.jpg','text':'24h照片营业馆'},{'img':'/static/img/login/2.jpg','text':'24h照片营业馆'},
			],
			publishBoxOff: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
      }
    },
    goToDetails(){
      uni.navigateTo({
        'url':'/pages/circle/circle'
      })
    },
		goRecommended(){
			uni.navigateTo({
			  'url':'/pages/circle/recommended'
			})
		},
		publishOff(){
			this.publishBoxOff = false
			console.log(this.publishBoxOff);
		},
  }
}
</script>

<style scoped lang="scss">
.my-praise-box{
	.publish-box {
		width: 100%;
		// height: 100%;
		display: flex;
		border-top: 20rpx solid #FAFAFA;
		border-bottom: 20rpx solid #FAFAFA;
		padding: 32rpx;
		justify-content: space-between;
		position: relative;
		align-items: center;
		box-sizing: border-box;
	
		.publish-img {
			width: 120rpx;
			height: 120rpx;
			flex-shrink: 0;
		}
	
		.publish-text {
			.publish-title {
				margin: 0 0 8rpx 0;
			}
		}
	
		.publish-button {
			flex-shrink: 0;
			padding: 6rpx 32rpx;
		}
	
		.off-button {
			position: absolute;
			right: 0;
			top: 0;
			padding: 0rpx 2rpx 6rpx 12rpx;
	
			.off-img {
				width: 24rpx;
				height: 24rpx;
			}
		}
	}
	.recommended-box{
		box-sizing: border-box;
		width: 100%;
		padding: 0 24rpx;
		display: flex;
		align-items: center;
		white-space: nowrap;
		.recommended-list{
			display: inline-block;
			width: 320rpx;
			height: 160rpx;
			margin: 0 8rpx;
			padding: 16rpx 4rpx 16rpx 12rpx;
			box-sizing: border-box;
			position: relative;
			// flex-shrink: 0;
			.recommended-list-img{
				width: 100%;
				height: 100%;
				position: absolute;
				left: 0;
				top: 0;
				z-index: -1;
			}
			.recommended-list-name{
				display: flex;
				align-items: center;
				.list-name-img{
					width: 28rpx;
					height: 28rpx;
					margin: 0 10rpx 0 0;
				}
			}
			.recommended-list-text{
				width: 100%;
				padding: 0 4rpx 0 16rpx;
				box-sizing: border-box;
				position: absolute;
				bottom: 16rpx;
				left: 0;
				display: flex;
				align-items: center;
				justify-content: space-between;
				.recommended-list-text-left{
					display: flex;
					align-items: center;
					.list-text-left-img{
						width: 40rpx;
						height: 40rpx;
						margin: 0 4rpx 0 0;
					}
				}
				.recommended-list-text-right{
					display: flex;
					align-items: center;
				}
			}
		}
	}
  .praise-item{
		padding: 0 	32rpx;
    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;
          }
        }

      }
      .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>