cansnow
289 lines
7.6 KiB
Vue
289 lines
7.6 KiB
Vue
<template>
|
||
<view class="content-circle-box" :index="index">
|
||
<view @tap="linkToBusinessCard(item.user_id)">
|
||
<MyAvatar :src="item.user.avatar" :desc="item.user.nickname || item.user.id" :isGroup="false" size="66"></MyAvatar>
|
||
</view>
|
||
<view class="content">
|
||
<view class="content-name" @tap="linkToBusinessCard(item.user_id)">{{ item.user.nickname || item.user.remark }}</view>
|
||
<view class="content-desc">{{ item.body }}</view>
|
||
<!-- 图片,视频 -->
|
||
<view class="content-img" v-if="item.files!=null&&item.files.length>0">
|
||
<!-- //只有一张图时候 -->
|
||
<view v-if="item.files.length==1&&item.releaseType==1" class="u-flex u-row-left u-col-center"
|
||
style="width:100%;min-height: 200rpx;">
|
||
<u-image width="280rpx" :src="cdn(item.files[0])" mode="widthFix"
|
||
@tap="previewImg(0, item)">
|
||
<u-loading slot="loading"></u-loading>
|
||
<view slot="error" class="u-flex u-row-left u-col-center"
|
||
style="font-size: 24rpx;width: 200rpx;height: 100rpx;margin-top: -50rpx;">
|
||
<u-icon name="photo" size="100" label="加载失败" label-pos="bottom"></u-icon>
|
||
</view>
|
||
</u-image>
|
||
</view>
|
||
<!-- 有多张图的时候 -->
|
||
<view v-if="item.files.length > 1&&item.releaseType==1">
|
||
<view class="content-img-more u-m-b-20">
|
||
<u-grid :col="3" :border="false" hover-class="none">
|
||
<u-grid-item v-for="(src, index) in item.files" :index="index" :custom-style="girdItemCustomStyle">
|
||
<view @tap="previewImg(index, item)" class="slot-btn">
|
||
<u-image :src="cdn(src)" width="180rpx" height="180rpx" mode="aspectFill" border-radius="10"></u-image>
|
||
</view>
|
||
</u-grid-item>
|
||
</u-grid>
|
||
</view>
|
||
</view>
|
||
|
||
|
||
<!-- 视频 -->
|
||
<view class="u-m-b-30 u-m-t-30 u-flex u-row-left u-col-center"
|
||
v-if="item.fileList.length > 0&&item.releaseType==2" @tap="previewImg(0, item)">
|
||
<view v-if="vuex_OSPlat=='ios'">
|
||
<u-image width="280rpx" :src="getVideoPoster(item.fileList[0])" mode="widthFix">
|
||
<u-loading slot="loading"></u-loading>
|
||
</u-image>
|
||
</view>
|
||
<view v-else class="u-flex u-row-center u-col-center"
|
||
style="border: 1rpx solid #36648b;width:280rpx;height:120rpx;border-radius: 16rpx;">
|
||
<u-icon name="play-circle" size="48" color="#36648b"
|
||
label="点击查看视频" label-pos="bottom"></u-icon>
|
||
</view>
|
||
</view>
|
||
</view>
|
||
|
||
<!-- 地点 -->
|
||
<view v-if="(item.address&&item.address.chooseFlag)==true" class="u-line-2 u-m-t-10 u-m-b-10" style="font-size: 30rpx;color: #36648b;">
|
||
<u-icon name="map" color="#36648b" size="30" :custom-style="{marginLeft:'-4rpx'}"></u-icon>
|
||
<text> {{ item.address.name}}</text>
|
||
</view>
|
||
|
||
<!-- 相对时间 点赞按钮等 -->
|
||
<view class="relavivetime" :id="`comment-${'null'}-${index}`">
|
||
<view class="time u-flex u-col-center">
|
||
<view>{{ item.created_at }}</view>
|
||
<view @click="deleteCircle(item,index)" style="color:#36648b;margin-left: 20rpx;" v-if="item.user_id==selfInfo.userID">删除</view>
|
||
</view>
|
||
|
||
<view class="icon-box u-flex u-row-between u-col-center">
|
||
<view @tap="clickThumb(item,index)" class="u-m-r-6 u-p-t-4">
|
||
<u-icon v-if="item.isPraise==false" size="38" name="heart" color="#36648b"></u-icon>
|
||
<u-icon v-if="item.isPraise==true" size="38" name="heart-fill" color="#36648b"></u-icon>
|
||
</view>
|
||
<view @tap="handleComment(item.id, null, index)" class="u-m-l-6 u-p-t-2">
|
||
<u-icon size="40" name="chat" color="#36648b"></u-icon>
|
||
</view>
|
||
</view>
|
||
</view>
|
||
|
||
<!-- 点赞人 评论 -->
|
||
<view class="msg-box">
|
||
<view class="thumbinfo u-border-bottom" v-if="item.praise!=null&&item.praise.length">
|
||
<uni-icons size="30" type="heart" color="#36648b" class="u-m-r-10"></uni-icons>
|
||
<text class="thumbinfo-name" v-for="(userInfo, pindex) in item.praise" :index="pindex"
|
||
:key="pindex" @tap="linkToBusinessCard(userInfo.userId)">
|
||
{{ userInfo.nickame }}{{ pindex != item.praise.length - 1 ? '，' : '' }}
|
||
</text>
|
||
</view>
|
||
<view class="comment" v-if="item.comments!=null&&item.comments.length">
|
||
<view class="comment-box" v-for="(comment, commentIndex) in item.comments" :index="commentIndex"
|
||
:key="commentIndex" hover-class="comment-hover-class"
|
||
:id="`comment-${item.id}-${index}`"
|
||
@tap="handleComment(item.id, comment, index)">
|
||
<text class="comment-box-name" v-if="!comment.reply_user_id">{{ comment.replyUser.nickname }}：</text>
|
||
<text class="comment-box-name" v-if="comment.reply_user_id">
|
||
{{ comment.replyUser.nickname }}
|
||
<text class="callback u-m-l-4 u-m-r-4">回复</text>
|
||
</text>
|
||
<text v-if="comment.reply_user_id" class="comment-box-name">{{ comment.replyUser.nickname }}：</text>
|
||
<text class="comment-box-content">{{ comment.content }}</text>
|
||
</view>
|
||
</view>
|
||
</view>
|
||
</view>
|
||
</view>
|
||
</template>
|
||
|
||
<script>
|
||
import MyAvatar from "@/components/MyAvatar/index.vue";
|
||
import videoPlayer from '@/components/videoPlayer.vue';
|
||
export default{
|
||
components:{videoPlayer ,MyAvatar},
|
||
props:{
|
||
index:{
|
||
type:Number,
|
||
default:0
|
||
},
|
||
item:{
|
||
type:Object,
|
||
default(){
|
||
return {};
|
||
}
|
||
}
|
||
},
|
||
computed:{
|
||
selfInfo() {
|
||
return this.$store.getters.storeSelfInfo;
|
||
},
|
||
},
|
||
data(){
|
||
console.log(this.item);
|
||
return {
|
||
|
||
}
|
||
},
|
||
methods:{
|
||
|
||
}
|
||
}
|
||
</script>
|
||
|
||
<style scoped lang="scss">
|
||
|
||
.content-circle-box {
|
||
padding: 18rpx 30rpx;
|
||
border-bottom: 1rpx solid #f2eeee;
|
||
display: flex;
|
||
flex-direction: row;
|
||
justify-content: flex-start;
|
||
align-items: flex-start;
|
||
|
||
.headimg {
|
||
width: 80rpx;
|
||
height: 80rpx;
|
||
|
||
.img {
|
||
width: 100%;
|
||
height: 100%;
|
||
border-radius: 10rpx;
|
||
}
|
||
}
|
||
|
||
.content {
|
||
flex: 1;
|
||
padding-left: 18rpx;
|
||
font-size: 32rpx;
|
||
|
||
&-name {
|
||
color: #36648b;
|
||
font-weight: bold;
|
||
font-size: 32rpx;
|
||
}
|
||
|
||
&-desc {
|
||
color: #000000;
|
||
padding-top: 4rpx;
|
||
//line-height: 36rpx;
|
||
font-size: 32rpx;
|
||
}
|
||
|
||
&-img {
|
||
margin-top: 10rpx;
|
||
|
||
.img-1 {
|
||
will-change: transform;
|
||
width: 280rpx;
|
||
height: auto;
|
||
max-height: 400rpx;
|
||
}
|
||
|
||
&-more {
|
||
display: flex;
|
||
flex-wrap: wrap;
|
||
.img-more {
|
||
display: block;
|
||
width: 160rpx;
|
||
height: 160rpx;
|
||
margin: 4rpx;
|
||
}
|
||
|
||
.img-3 {
|
||
margin: 4rpx 4rpx 4rpx 0;
|
||
}
|
||
}
|
||
}
|
||
|
||
.msg-box {
|
||
width: 100%;
|
||
background-color: #FFF;
|
||
margin-top: 15rpx;
|
||
border-radius: 4rpx;
|
||
|
||
.thumbinfo {
|
||
// border-bottom: 1rpx solid gray;
|
||
padding: 6rpx;
|
||
display: flex;
|
||
align-items: center;
|
||
flex-wrap: wrap;
|
||
|
||
&-icon {
|
||
width: 28rpx;
|
||
height: 28rpx;
|
||
line-height: 28rpx;
|
||
margin-right: 15rpx;
|
||
text-align: center;
|
||
vertical-align: middle;
|
||
padding-left: 10rpx;
|
||
}
|
||
|
||
&-name {
|
||
font-size: 28rpx;
|
||
color: #36648b;
|
||
}
|
||
}
|
||
|
||
.comment {
|
||
padding: 6rpx 8rpx;
|
||
color: $uni-text-color;
|
||
font-size: 28rpx;
|
||
|
||
&-box {
|
||
padding: 4rpx 0;
|
||
|
||
&-name {
|
||
color: #36648b;
|
||
|
||
.callback {
|
||
color: $uni-text-color;
|
||
}
|
||
}
|
||
|
||
&-content {
|
||
word-break: break-all;
|
||
}
|
||
}
|
||
}
|
||
}
|
||
}
|
||
|
||
.relavivetime {
|
||
display: flex;
|
||
justify-content: space-between;
|
||
align-items: center;
|
||
font-size: 26rpx;
|
||
|
||
.time {
|
||
color: $uni-text-color-grey;
|
||
}
|
||
|
||
.icon-box {
|
||
display: flex;
|
||
align-items: center;
|
||
|
||
&-item {
|
||
//background-color: #F8F8F8;
|
||
padding: 4rpx 12rpx;
|
||
border-radius: 6rpx;
|
||
|
||
&.thumb {
|
||
margin-right: 10rpx;
|
||
}
|
||
}
|
||
|
||
.img {
|
||
width: 34rpx;
|
||
height: 34rpx;
|
||
}
|
||
}
|
||
}
|
||
}
|
||
|
||
</style> |