<template> <view> <view class="dynamic"> <view v-if="type==1" class="imgs"> <image :src="item" mode="aspectFit" class="" v-for="(item,index) in itemDetail.imgs" :key="index"></image> </view> <image :src="itemDetail.imgs[0]" mode="aspectFit" class="bg" v-else></image> <view class="" style="padding: 20rpx;"> <!-- <view class="dynamic-title">{{itemDetail.forumTitle}}</view> --> <!-- <view v-if="showAuthor" class="d-flex a-center" style="margin-top: 16rpx;"> <image class="dynamic-avatar" :src="itemDetail.avatar" mode="widthFix"></image> <view class="dynamic-name">{{itemDetail.nickName}}</view> </view> --> <view class="dynamic-content text-overflow-two" v-if="itemDetail && itemDetail.forumTitle"> <!-- <u-parse :content="this.$utilsMethods.replaceSpecialCharFixed(itemDetail.content)"></u-parse> --> {{itemDetail.forumTitle}} </view> <!-- <view class="dynamic-content text-overflow-two">{{itemDetail.content}}</view> <view class="d-flex flex-wrap dynamic-picture"> <image @click="previewImage(item.picUrl)" v-for="(info,ix) in 3" class="dynamic-picture-item" src="https://img0.baidu.com/it/u=1893171979,2260795920&fm=253&fmt=auto&app=120&f=JPEG?w=506&h=500" mode="widthFix"></image> </view> --> <view class="dynamic-date">{{itemDetail.createTime}}</view> <view class="d-flex a-center j-sb mt-two" > <view class="d-flex a-center " style="width: 100%; justify-content: space-between;"> <view class="d-flex a-center" > <image class="dynamic-avatar" :src="itemDetail.avatar" mode="aspectFit"></image> <view class="dynamic-name">{{itemDetail.nickName}}</view> </view> <view class="d-flex a-center dynamic-operate"> <image @click.stop="changeLikeState(itemDetail)" :src="itemDetail.isLiked ? require('@/static/images/zan-selected.png') : require('@/static/images/zan.png')" mode=""></image> <view>{{itemDetail.likesCount||0}}</view> </view> <!-- <view class="d-flex a-center dynamic-operate"> <image @click.stop="changeCollectState(itemDetail)" :src="itemDetail.isFavorites ? require('@/static/images/collect-selected.png') : require('@/static/images/collect.png')" mode=""></image> <view>{{itemDetail.favoritesCount}}</view> </view> <view class="d-flex a-center dynamic-operate"> <image src="@/static/images/message.png" mode=""></image> <view>{{itemDetail.commentsCount}}</view> </view> --> </view> <view class="d-flex"> <view v-if="isEdit" class="dynamic-delete mr-2" @click.stop="handleEdit(itemDetail.forumId)">编辑</view> <view v-if="isDelete" class="dynamic-delete" @click.stop="handleDelete(itemDetail.forumId)">删除</view> </view> </view> </view> </view> </view> </template> <script> import { mapGetters } from 'vuex' import { likeOrUnlike, collectOrUncollect } from '@/api/workbench/index.js' export default { props:{ itemDetail:{ type:Object, default:()=>{} }, showAuthor:{ type:Boolean, default:false },//是否显示用户信息 showState:{ type:Boolean, default:true },//是否显示收藏状态 isEdit:{ type:Boolean, default:false }, isDelete:{ type:Boolean, default:false }, type:{ type:Number, default:0 } }, computed: { ...mapGetters({ userInfot: 'userInfo' }) }, methods: { // 预览图片 previewImage() {}, handleDelete(forumId){ this.$emit('delete',forumId) }, // 编辑 handleEdit(forumId){ this.$emit('edit',forumId) }, // 修改点赞状态 changeLikeState(row) { let self = this console.log(row) likeOrUnlike({ forumId: row.forumId, userId: this.userInfot.userId, isLikeType: 1, //论坛1评论2 }).then(res => { uni.showToast({ title:'操作成功!', icon:'none' }) self.$emit('refersh') }) }, // 修改收藏状态 changeCollectState(row){ let self = this collectOrUncollect({ forumId: row.forumId, userId: this.userInfot.userId, isFavoritesType: 1, // 论坛1商家2 favoriteType:'invitation' }).then(res => { uni.showToast({ title:'操作成功!', icon:'none' }) self.$emit('refersh') }) } } } </script> <style lang="scss" scoped> .dynamic { .bg{ width: 100%; height: 300rpx; display: block; border-radius: 16rpx 16rpx 0 0; } .imgs{ display: flex; flex-wrap: wrap; >image{ width: 200rpx; height: 200rpx; margin-right: 20rpx; } } &-title { font-size: 30rpx; color: #303949; font-weight: bold; display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; overflow: hidden; text-overflow: ellipsis; } &-avatar{ width: 50rpx; height: 50rpx; border-radius: 50%; } &-name{ font-size: 24rpx; color: #666666; font-weight: bold; margin: 0 8rpx; flex: 1; display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 1; overflow: hidden; text-overflow: ellipsis; } &-content { font-size: 26rpx; color: #666666; margin-top: 12rpx; height: 66rpx; display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; overflow: hidden; text-overflow: ellipsis; } &-picture { &-item { width: 200rpx; height: 200rpx; background: linear-gradient(180deg, #EEEEEE 0%, #D8D8D8 100%); border-radius: 12rpx; margin-top: 16rpx; } // 除了3倍数以外的元素 &-item:not(:nth-child(3n+3)) { margin-right: 16rpx; } } &-operate { >image { width: 40rpx; height: 40rpx; } >view { font-size: 26rpx; color: #666666; margin-left: 8rpx; } } // &-operate:not(:first-child) { // margin-left: 40rpx; // } &-picture:after { content: ''; width: 200rpx; } &-date { font-size: 24rpx; color: #999999; margin-top: 16rpx; } &-delete{ font-size: 26rpx; color: #FF3141; } } .picture { width: 200rpx; height: 200rpx; background: linear-gradient(180deg, #EEEEEE 0%, #D8D8D8 100%); border-radius: 12rpx; margin-top: 16rpx; } // 除了3倍数以外的元素 .picture:not(:nth-child(3n+3)) { margin-right: 16rpx; } </style>