hsai/im-system
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

进入uniapp

Browse Source
This commit is contained in:
luojie
2023-12-01 23:57:44 +08:00
parent a78893ea1f
commit d61f5e6c92
524 changed files with 88081 additions and 12 deletions
Download Patch File Download Diff File Expand all files Collapse all files

225
im-uniapp/components/friends-circle-person-item/friends-circle-person-item.vue Normal file
View File

@@ -0,0 +1,225 @@
<template>
<view class="friends-circle-person-item" v-for="(v, i) in content" :key="i">
<view class="friends-circle-person-item-date"><!-- -->
<text class="day">{{returnDate(v.createTime,'d')}}</text>
<text class="month">{{returnDate(v.createTime,'m')}}月</text>
<view class="year">{{returnDate(v.createTime,'y')}}</view>
<view class="year" v-if="v.location.name">{{v.location.name}}</view>
</view>
<view class="friends-circle-person-view" @click="clickItem(v)">
<view class="friends-circle-person-content" v-if="v.topicType=='IMAGE'&&v.files.length>0">
<view class="friends-circle-person-imgs">
<image v-for="(item, ii) in v.files.slice(0,4)" :key="ii" :class="'fci' + v.files.slice(0,4).length" :src="item.url" mode="aspectFill"></image>
</view>
<view class="friends-circle-person-imgs-text">
<text>{{v.text}}</text>
<view class="friends-circle-person-imgs-total">共{{v.files.length}}张</view>
</view>
</view>
<view class="friends-circle-person-content" v-if="v.topicType=='VIDEO'&&v.files.length>0">
<view class="friendsCircle-content-video">
<image class="friendsCircle-content-video-icon" src="../../static/img/bf.png" mode="aspectFill"></image>
<image class="friendsCircle-content-video-img" :src="v.files[0].url" mode="aspectFill"></image>
</view>
<view class="friends-circle-person-imgs-text">
<text>{{v.text}}</text>
</view>
</view>
<view v-if="v.topicType=='TEXT'" class="friends-circle-person-content">
<view class="friends-circle-person-text">
<text>{{v.text}}</text>
</view>
</view>
</view>
</view>
<view class="friends-circle-nodata" v-if="content.length<=0">
<view class="friends-circle-nodata-line"></view>
<view class="friends-circle-nodata-text">未发布朋友圈</view>
</view>
</template>
<script>
export default {
// 朋友圈单人列表
emits:['clickItem'],
data() {
return {
};
},
props:{
content:{
type:Array,
default:[]
}
},
methods: {
returnDate(e,format){
return this.$fc.getNewDate(format,true,e)
},
clickItem(e){
this.$emit('clickItem',e)
}
}
};
</script>
<style scoped lang="scss">
.friends-circle-person-item{
display: flex;flex-direction: row;
margin-bottom: 60rpx;
width: 100%;
}
.friends-circle-person-view{
flex: 1;
}
.friends-circle-person-item-date{
display: flex;
flex-direction: row;
flex-wrap: wrap;
margin-right: 40rpx;
width: 115rpx;
min-width: 115rpx;
line-height: 60rpx;
text-align: right;
}
.friends-circle-person-item-date .day{
flex: 1;
font-size: 43rpx;
}
.friends-circle-person-item-date .month{
font-size: 26rpx;
flex: 1;
}
.friends-circle-person-item-date .year{
width: 100%;
min-width: 100%;
font-size: 24rpx;
color: #999;
line-height: initial;
}
.friends-circle-person-content{
flex: 1;
display: flex;flex-direction: row;
}
.friends-circle-person-text{
padding: 12rpx;
background-color: #eee;
border-radius: 4rpx;
}
.friends-circle-person-text text{
font-size: 28rpx;
color: #333;
overflow: hidden;
text-overflow: ellipsis;
display: -webkit-box;
-webkit-line-clamp: 2;
-webkit-box-orient: vertical;
}
.friends-circle-person-imgs{
width: 140rpx;
min-width: 140rpx;
height: 140rpx;
margin-right: 14rpx;
}
.friends-circle-person-imgs image{float: left;}
.friends-circle-person-imgs .fci1{
width: 100%;
height: 100%;
}
.friends-circle-person-imgs .fci2{
margin-right: 2%;
width: 49%;
height: 100%;
}
.friends-circle-person-imgs .fci2:nth-child(2n){
margin-right: 0;
}
.friends-circle-person-imgs .fci3{
margin-right: 2%;
width: 49%;
height: 48%;
}
.friends-circle-person-imgs .fci3:nth-child(1){
height: 98%;
}
.friends-circle-person-imgs .fci3:nth-child(2){
margin-bottom: 2%;
}
.friends-circle-person-imgs .fci3:nth-child(2),.friends-circle-person-imgs .fci3:nth-child(3){
margin-right: 0;
}
.friends-circle-person-imgs .fci4{
margin-right: 2%;
width: 49%;
height: 49%;
margin-bottom: 2%;
}
.friends-circle-person-imgs .fci4:nth-child(2n){
margin-right: 0;
}
.friends-circle-person-imgs-text{
display: flex;
flex-direction: column;
justify-content: space-between;
}
.friends-circle-person-imgs-text text{
line-height: 1.2;
font-size: 28rpx;
color: #333;
overflow: hidden;
text-overflow: ellipsis;
display: -webkit-box;
-webkit-line-clamp: 3;
-webkit-box-orient: vertical;
}
.friends-circle-person-imgs-total{
color: #999;
font-size: 24rpx;
}
.friends-circle-nodata{
display: flex;flex-direction: column;
}
.friends-circle-nodata-line{
margin: 50rpx;
margin-bottom: 30rpx;
height: 1px;
position: relative;
background-color: #eee;
}
.friends-circle-nodata-line::after{
content: " ";
width: 13rpx;
height: 13rpx;
border-radius: 50%;
background-color: #eee;
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%,-50%);
}
.friends-circle-nodata-text{
font-size: 24rpx;
text-align: center;
color: #999;
}
.friendsCircle-content-video{
width: 140rpx;
height: 140rpx;
position: relative;
margin-right: 14rpx;
}
.friendsCircle-content-video-img{
width: 100%;
height: 100%;
}
.friendsCircle-content-video-icon{
z-index: 1;
position: absolute;
left: 50%;
top: 50%;
width: 60rpx !important;
height: 60rpx !important;
transform: translate(-50%,-50%);
}
</style>