You can not select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
321 lines
8.2 KiB
321 lines
8.2 KiB
<template>
|
|
<cu-custom bgColor="bg-white" :isBack="true">
|
|
<template #backText></template>
|
|
<template #content>朋友圈</template>
|
|
</cu-custom>
|
|
<!-- #ifdef APP-PLUS -->
|
|
<scroll-view scroll-y @scrolltolower="scrollbot" :lower-threshold="0" refresher-enabled="true" :refresher-triggered="refreshing"
|
|
:refresher-threshold="50" @refresherrefresh="onRefresh" style="height: 88vh;">
|
|
<!-- #endif -->
|
|
<!-- #ifdef H5 -->
|
|
<scroll-view scroll-y @scrolltolower="scrollbot" :lower-threshold="0" refresher-enabled="true" :refresher-triggered="refreshing"
|
|
:refresher-threshold="50" @refresherrefresh="onRefresh" style="height: 93vh;">
|
|
<!-- #endif -->
|
|
<view>
|
|
<view class="im-friend-header">
|
|
<view class="im-friend-bg">
|
|
<image class="im-friend-image" src="/static/image/user-card-bg.jpg" style="width: 750rpx;height: 460rpx;"></image>
|
|
</view>
|
|
<view class="im-user im-flex im-justify-content-start align-center">
|
|
<text class="text-white mr-5">{{name}}</text>
|
|
<image class="radius-10" style="width:120rpx;height:120rpx" :src="urlimg" mode="widthFix"></image>
|
|
</view>
|
|
</view>
|
|
</view>
|
|
|
|
<view class="viewtop" v-if="userInfo.user_id==userid">
|
|
<view class="flex view_mar">
|
|
<view class="view_text">今天</view>
|
|
<view class="view_icons">
|
|
<uni-icons @tap="tomoments" type="camera-filled" size="30" color="#8a8a8a" style="padding: 30px;"></uni-icons>
|
|
</view>
|
|
</view>
|
|
</view>
|
|
|
|
<view v-for="(yearGroup, year) in groupedList" :key="year" class="year-group">
|
|
<!-- 年份标题 -->
|
|
<view class="year-title" @click="toggleYear(year)">
|
|
<text class="year-text">{{ year }}年</text>
|
|
</view>
|
|
|
|
<!-- 动态内容（展开时显示） -->
|
|
<view v-if="!collapsedYears.includes(year)" class="moments-list">
|
|
<view v-for="(item, index) in yearGroup" :key="item.id" class="moment-item" @click="JumpDetails(item.id)">
|
|
<view class="meta-info" style="width: 120rpx;">
|
|
<text class="time">{{ formatTime(item.create_time) }}</text>
|
|
</view>
|
|
<view class="content1">
|
|
<view v-if="item.files" v-for="(items, indexs) in item.files" :key="indexs">
|
|
<view v-if="items.type==1"><image :src="configurl+items.src" :data-src="configurl+items.src" class="post-image" mode="aspectFill" @tap.stop="previewImage"/></view>
|
|
<view v-if="items.type==2&&items.privacy">
|
|
<view class='course-video' style="width: 80px;height: 90px;">
|
|
<view class="relative-shadow" @tap.stop="handlePlay(items)">
|
|
<view class="cuIcon-video icon-center f-28 c-white"></view>
|
|
<!-- <view class="video-duration f-10 c-white" v-if="item.extends && item.extends.duration">{{$util.videoFormatTime(item.extends.duration)}}</view> -->
|
|
</view>
|
|
<im-image v-if="configurl+items.privacy" :src="configurl+items.privacy"></im-image>
|
|
</view>
|
|
|
|
<!-- <image :src="configurl+items.privacy" :data-src="configurl+items.privacy" class="post-image1" mode="aspectFill" @tap.stop="previewImage"/> -->
|
|
</view>
|
|
</view>
|
|
<view style="margin-left: 20rpx;width: 320rpx;" class="container">
|
|
<mp-html container-style="overflow: hidden;display:inline;word-break: break-word;" :content="emojiToHtml(item.content)"/>
|
|
</view>
|
|
</view>
|
|
</view>
|
|
</view>
|
|
</view>
|
|
</scroll-view>
|
|
</template>
|
|
|
|
<script>
|
|
import { useloginStore } from '@/store/login'
|
|
import config from '@/common/config.js'
|
|
import {chat} from '@/mixins/chat.js'
|
|
import imImage from '@/components/message/im-image.vue';
|
|
|
|
const loginStore = useloginStore()
|
|
export default {
|
|
components: {
|
|
imImage
|
|
},
|
|
mixins: [chat],
|
|
data() {
|
|
return {
|
|
page: 1,
|
|
limit: 20,
|
|
list: [],
|
|
// groupedList: {},
|
|
collapsedYears: [],
|
|
status: 'more', //状态
|
|
refreshing: false,
|
|
configurl:config.apiUrl,
|
|
urlimg:'',
|
|
name:'',
|
|
userid:'',
|
|
//显示的状态
|
|
contentText: {
|
|
contentdown: '查看更多',
|
|
contentrefresh: '加载中....',
|
|
contentnomore: '没有更多咯'
|
|
},
|
|
userInfo:loginStore.userInfo,
|
|
}
|
|
},
|
|
computed: {
|
|
// 计算属性保持不变...
|
|
groupedList() {
|
|
return this.groupDataByYear(this.list)
|
|
}
|
|
},
|
|
// watch: {
|
|
// list: {
|
|
// handler(newVal) {
|
|
// this.groupedList = this.groupDataByYear(newVal)
|
|
// },
|
|
// immediate: true,
|
|
// deep: true
|
|
// }
|
|
// },
|
|
onLoad(val) {
|
|
this.urlimg = val.avatar
|
|
this.name = val.realname
|
|
this.userid = val.user_id
|
|
},
|
|
onShow() {
|
|
if(this.userInfo.user_id==this.userid){
|
|
this.init()
|
|
}else{
|
|
this.init(this.userid)
|
|
}
|
|
},
|
|
methods: {
|
|
JumpDetails(id){
|
|
uni.navigateTo({
|
|
url:`/pages/compass/friendscircledetails?posts_id=${id}&userid=${this.userid}`
|
|
})
|
|
},
|
|
tomoments(){
|
|
uni.navigateTo({
|
|
url:'/pages/compass/sendtoMoments'
|
|
})
|
|
},
|
|
formatTime(timeStr) {
|
|
const date = new Date(timeStr)
|
|
return `${(date.getMonth() + 1).toString().padStart(2, '0')}-${date.getDate().toString().padStart(2, '0')}`
|
|
},
|
|
groupDataByYear(data) {
|
|
return data.reduce((acc, item) => {
|
|
const year = new Date(item.create_time).getFullYear()
|
|
if (!acc[year]) acc[year] = []
|
|
acc[year].push(item)
|
|
return acc
|
|
}, {})
|
|
},
|
|
previewImage(e) {
|
|
//预览图片
|
|
var current = e.target.dataset.src
|
|
uni.previewImage({
|
|
current: current,
|
|
urls: [current]
|
|
})
|
|
},
|
|
init(id){
|
|
if (this.page > 1) {
|
|
this.page = 1
|
|
}
|
|
let params = {page: this.page,limit: this.limit,friend_user_id: id?+id:''}
|
|
this.status = 'loading'; // 加载中
|
|
this.$api.compaApi.myPosts(params).then(res => {
|
|
res.data.forEach((res) => {
|
|
const [latitudeStr, longitudeStr] = res.location.split('+');
|
|
const location = {
|
|
latitude: +latitudeStr,
|
|
longitude: +longitudeStr
|
|
};
|
|
res.location = location
|
|
})
|
|
if (this.page == 1) {
|
|
this.list.length = 0
|
|
this.list = res.data
|
|
} else {
|
|
this.list = this.list.concat(res.data);
|
|
}
|
|
// 判断是否还有更多数据
|
|
if (res.data.length < res.count) {
|
|
this.status = 'noMore'; // 没有更多数据
|
|
} else {
|
|
this.status = 'more'; // 还有更多数据
|
|
}
|
|
})
|
|
},
|
|
onRefresh() {
|
|
this.page = 1
|
|
// this.wechatMomentsList()
|
|
if (this.refreshing) return;
|
|
this.refreshing = true;
|
|
setTimeout(() => {
|
|
this.refreshing = false;
|
|
}, 1000)
|
|
},
|
|
scrollbot(){
|
|
if (this.status == 'noMore') {
|
|
return;
|
|
}
|
|
this.page++
|
|
// this.wechatMomentsList()
|
|
// console.log('已触发底部事件');
|
|
},
|
|
}
|
|
}
|
|
</script>
|
|
|
|
<style scoped lang="scss">
|
|
.im-friend-header{
|
|
width:100%;height:400rpx;position: relative;
|
|
.im-friend-bg{
|
|
width:100%;height:400rpx;overflow: hidden;
|
|
.im-friend-image{
|
|
width:100%;height:400rpx;
|
|
}
|
|
}
|
|
}
|
|
.im-user{
|
|
position: absolute;
|
|
right:60rpx;
|
|
top:210rpx;
|
|
overflow: hidden;
|
|
}
|
|
.icon{
|
|
top: -440rpx;
|
|
left: -170rpx;
|
|
width: 400rpx;
|
|
height: 400rpx;
|
|
position: absolute;
|
|
border-radius: 10rpx;
|
|
background-color: #fff;
|
|
box-shadow:0px 0px 5px rgba(0, 0, 0, 0.2);
|
|
|
|
.im-emoji-item{
|
|
padding:22rpx;
|
|
}
|
|
}
|
|
.viewtop{
|
|
padding: 0px 30rpx;
|
|
|
|
.view_mar{
|
|
margin-top: 100rpx;
|
|
|
|
.view_text{
|
|
font-size: 34rpx;
|
|
font-weight: bold;
|
|
}
|
|
.view_icons{
|
|
display: flex;
|
|
margin-left: 40rpx;
|
|
align-items: center;
|
|
justify-content: center;
|
|
background-color: #c3c3c3;
|
|
}
|
|
}
|
|
}
|
|
.year-group {
|
|
padding: 0px 30rpx;
|
|
margin-top: 40rpx;
|
|
|
|
.year-title{
|
|
font-size: 38rpx;
|
|
}
|
|
|
|
.moment-item{
|
|
display: flex;
|
|
margin-top: 40rpx;
|
|
|
|
.meta-info{
|
|
font-size: 36rpx;
|
|
margin-right: 40rpx;
|
|
margin-left: 20rpx;
|
|
}
|
|
}
|
|
}
|
|
.content1{
|
|
display: flex;
|
|
|
|
.post-image{
|
|
width: 160rpx;
|
|
height: 160rpx;
|
|
}
|
|
.post-image1{
|
|
width: 160rpx;
|
|
height: 160rpx;
|
|
}
|
|
}
|
|
.course-video{
|
|
overflow: hidden;
|
|
position: relative;
|
|
}
|
|
.relative-shadow{
|
|
z-index:1;
|
|
width:100%;
|
|
height:100%;
|
|
position: absolute;
|
|
background: #8383833d;
|
|
}
|
|
.icon-center{
|
|
position: absolute;
|
|
top: 50%;
|
|
z-index: 4;
|
|
transform: translate(-50%, -50%);
|
|
left: 50%;
|
|
padding: 0 4rpx 0 6rpx;
|
|
}
|
|
.container {
|
|
display: -webkit-box;
|
|
-webkit-box-orient: vertical;
|
|
-webkit-line-clamp: 5; /* 根据行高计算，约5行（假设行高20px） */
|
|
overflow: hidden;
|
|
text-overflow: ellipsis;
|
|
max-height: 100px; /* 最大高度限制 */
|
|
}
|
|
</style>
|