update 个人详情动态展示

This commit is contained in:
zengBin 2024-10-30 15:43:07 +08:00
parent d4288cd7ff
commit 52dc50b915
6 changed files with 677 additions and 14 deletions

View File

@ -168,6 +168,7 @@ subPackages: [
'pages': [
'information',
'otherHalfDemand',
'personalDynamic',
'qualitySingle',
'registration',
'searchCondition',

View File

@ -35,7 +35,7 @@
<!--来自个人中心我的发布-->
<view v-if="from == 'myDynamic'" @tap.stop="deleteDynamic">删除</view>
<block v-else>
<view @tap.stop="lose">不感兴趣</view>
<view @tap.stop="lose" v-if="from != 'personalDynamic'">不感兴趣</view>
<view @tap.stop="jumpPath(`/pages/users/report?id=${selectData.id}&type=dynamic`)">举报</view>
</block>
<view @tap.stop="hideModal">取消</view>

View File

@ -232,12 +232,26 @@ page {
align-items: center;
position: relative;
margin-bottom: 20rpx;
.ui-rit{
width:10rpx;
height:20rpx;
display: block;
margin-right: 10rpx;
}
.icon{
width: 28rpx;
height: 28rpx;
margin-right: 8rpx;
}
}
.ui-dynamic-pic-box{
width: 25%;
.ui-dynamic-pic{
width: 144rpx;
height: 144rpx;
border-radius: 20rpx;
}
}
.hintMsg {
background: #FDFAF1;
padding: 12rpx 22rpx 12rpx 72rpx;
@ -578,6 +592,21 @@ page {
</view>
</view>
</view>
<!--动态展示-->
<view class="font_26 color666 ui-approve-box" @tap="jumpPath('dynamic')">
<view class="_title f-fbc">
<view>
<image src="https://images.ufutx.com/202011/26/7645858a1ae55dd7c3ef90ec7a42bfa3.png" mode="aspectFill" class="icon" ></image>
<span class="font_30 bold color333">个人动态</span>
</view>
<image class="ui-rit" src="https://images.ufutx.com/202103/11/d491373f21f5a0c5810f2167f7c961f0.png"></image>
</view>
<view class="f-fcl">
<view class="ui-dynamic-pic-box text-center" v-for="(item,index) in dynamicPhotos" :key="index">
<image :src="item" class="ui-dynamic-pic" mode="aspectFill"></image>
</view>
</view>
</view>
<block v-if="userInfo.base_profile.type == 'single'">
<view class="ui-approve-box">
<!-- 自我描述 -->
@ -784,6 +813,8 @@ wepy.page({
{name: '真人未认证', activeName: '真人已认证', activeIcon: 'https://image.fulllinkai.com/202407/30/8f2700a35614c24f578ac6b5bf6e74c6.png', active: false, icon: 'https://image.fulllinkai.com/202202/23/c8a7f144e6eb593a5c494e700a212dac.png'},
{name: '学历未认证', activeName: '学历已认证', activeIcon: 'https://image.fulllinkai.com/202407/30/8f2700a35614c24f578ac6b5bf6e74c6.png', active: false, icon: 'https://image.fulllinkai.com/202202/23/c6e970db876230df0411eddd49d9e58f.png'}
],
dynamicPhotos: [], // 个人动态图片
dynamicTotal: 0,
praiseList: [],
praisePage: 1,
selectPraise: [],
@ -825,6 +856,24 @@ wepy.page({
wx.hideLoading()
})
},
// 用户个人动态
getDynamic () {
let vm = this
vm.$get({url: `${service.host}/moment/list/other/user/${vm.id}`}).then(({code, data}) => {
if (code == 0) {
vm.dynamicTotal = data.total_pages
data.data.forEach((item) => {
item.dynamicPhotos = JSON.parse(item.photos)
if (item.dynamicPhotos && item.dynamicPhotos.length > 0 && vm.dynamicPhotos.length < 4) {
vm.dynamicPhotos.push(item.dynamicPhotos[0])
}
})
}
wx.hideLoading()
}).catch(() => {
wx.hideLoading()
})
},
// 夸夸TA换一批
refresh() {
let vm = this
@ -1247,7 +1296,9 @@ wepy.page({
vm.loginShow = true
return
}
if (type == 'chitchat') {
if (type == 'dynamic') {
wx.navigateTo({url: `/pages/home/personalDynamic?id=${vm.id}`})
} else if (type == 'chitchat') {
wx.navigateTo({url: `/pages/news/chitchat?id=${vm.id}&name=${encodeURIComponent(vm.userInfo.base_profile.nickname)}&pic=${vm.userInfo.base_profile.photo}&type=${vm.userInfo.base_profile.type}&real=${vm.userInfo.approve_profile.is_real_approved}`})
} else if (type == 'vip' && !vm.isIos) {
wx.navigateTo({url: `/pages/users/upgradeVIP`})
@ -1305,6 +1356,7 @@ wepy.page({
vm.userType = wx.getStorageSync('type')
vm.id = e.id
vm.getDetail()
vm.getDynamic()
vm.getPraiseList()
vm.getUserPraise()
vm.showNextBullet()

View File

@ -0,0 +1,607 @@
<style lang="less" scoped>
@import url(../../styles/theme.less);
page {
background-color: #ffffff;
}
.ui-personalDynamic{
padding-bottom: 120rpx;
}
.cu-avatars {
margin: 0;
padding: 0;
text-align: center;
background-color: #ccc;
color: var(--white);
white-space: nowrap;
position: relative;
background-size: cover;
background-position: center;
vertical-align: middle;
overflow: hidden;
margin-bottom: 12rpx;
.topic {
width: 100%;
height: 580rpx;
display: flex;
align-items: center;
flex-direction: column;
position: relative;
letter-spacing: 2rpx;
z-index: 10;
overflow: hidden;
.opcitys {
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
opacity: 0.3;
background: #000000;
z-index: -1;
}
.title {
width: 100%;
font-size: 36rpx;
font-weight: 500;
color: #ffffff;
margin-bottom: 70rpx;
.navbar-title {
width: 100%;
box-sizing: border-box;
height: 64rpx;
line-height: 64rpx;
text-align: center;
position: relative;
left: 0;
z-index: 10;
font-weight: bold;
overflow: hidden;
white-space: nowrap;
font-size: 36rpx;
font-weight: 500;
color: #ffffff;
.img {
position: absolute;
top: 0;
bottom: 0;
left: 50rpx;
margin: auto;
padding: 10rpx;
width: 36rpx;
height: 50rpx;
}
}
}
.titleMain {
position: relative;
.header {
width: 132rpx;
height: 132rpx;
border-radius: 50%;
border: 4rpx solid #ffffff;
}
.authentication {
width: 104rpx;
height: 32rpx;
border-radius: 50rpx;
position: absolute;
bottom: 0;
left: 0;
right: 0;
margin: auto;
background-size: cover;
background-position: center;
vertical-align: middle;
}
}
.headName {
height: 50rpx;
font-size: 36rpx;
font-weight: 500;
color: #ffffff;
line-height: 50rpx;
margin-top: 16rpx;
}
.region {
height: 34rpx;
font-size: 24rpx;
font-weight: 400;
color: #ffffff;
line-height: 34rpx;
margin-top: 10rpx;
}
}
}
.cu-avatars:after {
content: "";
width: 100%;
height: 100%;
position: absolute;
left: 0;
top: 0;
background: inherit;
filter: blur(16rpx);
z-index: 2;
overflow: hidden;
}
.ui-time{
min-width: 96rpx;
margin-top: 12rpx;
}
.ui-dynamic-content{
white-space: pre-line;
word-break: break-all;
display: -webkit-box;
}
.ui-active-content{
overflow: hidden;
margin-bottom: 15rpx;
white-space: pre-line;
word-wrap: break-word;
text-overflow: ellipsis;
display: -webkit-box;
-webkit-line-clamp: 3;
-webkit-box-orient: vertical;
}
.ui-voteItem{
width: calc(100vw - 156rpx);
background: #f8f8f8;
padding: 16rpx 18rpx;
border-radius: 8rpx;
.ui-vote-icon{
width: 32rpx;
min-width: 32rpx;
margin: 8rpx 8rpx 0 0;
display: block;
}
}
.ui-dynamic-pic-box{
.ui-only-img, .ui-grid-square{
width: 400rpx;
height: 400rpx;
border-radius: 16rpx;
margin-bottom: 10rpx;
display: block;
}
.ui-grid-square{
width: 192rpx;
height: 192rpx;
}
}
.ui-dynamic-pic-box:after{
content: '';
width: 192rpx;
}
.liveImg{
position: relative;
border-radius: 16rpx;
.ui-video-box, .ui-video-r-box{
position: relative;
width: auto;
border-radius: 16rpx;
.ui-vide-poster{
position: absolute;
top:50%;
left:50%;
transform: translate(-50%,-50%);
text-align: center;
}
.ui-video_play_icon{
width: 52rpx;
height:52rpx;
}
}
}
.ui-tags{
width: auto;
height: 50rpx;
background: #fff1f5;
border-radius: 26rpx;
.ui-img {
width: 32rpx;
height: 32rpx;
margin: 0 10rpx;
}
}
.ui-address-icon{
width: 20rpx;
min-width: 20rpx;
height: 24rpx;
margin-right: 4rpx;
margin-top: 6rpx;
}
.ui-like-box{
width: calc(100vw - 156rpx);
display: flex;
justify-content: flex-end;
align-items: center;
margin-top: 20rpx;
padding-bottom: 20rpx;
.ui-like-icon-box{
display: inline-flex;
align-items: center;
height: 30rpx;
font-size: 24rpx;
color: #666666;
position: relative;
margin-left: 50rpx;
.ui-like-icon{
width: 30rpx;
height: 30rpx;
margin-right: 8rpx;
display: block;
}
.ui-like-icon-v2{
width: 32rpx;
height: 32rpx;
margin-right: 6rpx;
margin-top: -8rpx;
display: block;
}
.ui-img2_gif {
position: relative;
left: 6rpx;
top: -10rpx;
width: 64rpx;
height: 64rpx;
margin-left: -20rpx;
}
}
.ui-cuIcon-moreandroid{
width: 6rpx;
height: 26rpx;
display: block;
}
}
.ui-line{
margin: 0 30rpx;
height: 2rpx;
background: #f5f5f5;
}
</style>
<template>
<view class="ui-personalDynamic" v-if="showLoading">
<view class="cu-avatars" style="{{'background-image:url('+ userInfo.base_profile.photo +');'}}">
<view class="topic">
<view class="opcitys"></view>
<view class="title" style="height:{{navHeight}}px;position:fixed;">
<view class="navbar-title" style="margin-top:{{navTop}}px">
<image class="img" @tap="jumpBack" src="https://images.ufutx.com/202103/16/36f988cd6f98e77a7db47d8d3a549fe9.png" alt=""/>
</view>
</view>
<view class="title" style="height:{{navHeight}}px;"></view>
<view class="titleMain">
<view v-if="userInfo.base_profile.photo" class="header cu-avatar" style="{{'background-image:url('+ userInfo.base_profile.photo +');'}}"></view>
<view v-else class="header cu-avatar" style="background:#f5f5f5;"></view>
<view v-if="userInfo.approve_profile.is_real_approved == 1" class="authentication" style="{{'background-image:url(https://images.ufutx.com/202103/11/db16977c39d8171136d1c78a79db416e.png);'}}"></view>
<view v-else class="authentication cu-avatar" style="{{'background-image:url(https://images.ufutx.com/202103/11/6f69eae5b8db8ec875b1c201d45f7167.png);'}}"></view>
</view>
<view class="headName">{{ userInfo.base_profile.nickname }}</view>
<view class="region">
{{ userInfo.base_profile.city || '--' }} · {{ userInfo.base_profile.resident_city || '--' }}
</view>
<view class="region">{{ userInfo.base_profile.year || '--' }} ·
{{ userInfo.base_profile.stature + 'cm' || '--' }} · {{ userInfo.base_profile.degree || '--' }}
</view>
</view>
</view>
<block v-for="(item,index) in list" :key="index">
<view class="f-fl ui-pl-30 ui-pr-30 ui-pt-30 ui-relative" @tap="jumpPath(`/pages/dynamic/dynamicDetail?id=${item.id}`)">
<view class="font_32 color333 bold ui-time ui-mr-10" v-if="!item.endTime">{{item.startTime}}</view>
<view class="font_32 color333 ui-time ui-mr-10" v-else>
<span class="bold">{{item.endTime}}</span>
<span class="font_24 color999">/{{item.startTime}}月</span>
</view>
<view>
<view class="ui-pt-14">
<view class="ui-dynamic-content substance color333 ui-mb-10 font_30 {{item.readmore.status == false ? 'ui-active-content' : ''}}">{{item.content}}</view>
<block v-if="item.vote_id > 0">
<view class="ui-voteItem f-fl" @tap.stop="jumpPath(`/pages/dynamic/voteDetail?id=${item.vote_id}`, 'vote')">
<image class="ui-vote-icon" src="https://image.fulllinkai.com/202206/29/7fd07d9687390a58d25ac92b55d9a9dd.png" mode="widthFix"></image>
<view class="font_28">{{item.vote.title}}</view>
</view>
</block>
<block v-else>
<view class="color-theme font_30 ui-mb-10" v-if="item.readmore.auto" @tap.stop="toggle" data-index="{{index}}">{{ item.readmore.tip }}</view>
<view v-if="item.photos.length > 0" class="ui-wrap ui-dynamic-pic-box {{item.photos.length == 2 ? 'f-fl' : 'f-fb'}}">
<image v-for="(itemV2,indexV2) in item.photos" :key="indexV2" @tap.stop="$previewImages(itemV2, item.photos)" class="{{item.photos.length == 1 ? 'ui-only-img':''}} {{item.photos.length > 1 ? 'ui-grid-square' : ''}} {{item.photos.length == 2 ? 'ui-mr-10' : ''}}" :src="itemV2" mode="aspectFill"></image>
</view>
<view v-if="item.play_url" :style="{width: item.video_width > item.video_height ? '480rpx' : '320rpx', height: item.video_width > item.video_height ? '270rpx' : '480rpx'}" class="liveImg" mode="widthFix" @tap.stop="playVideo(index, item.id)">
<image v-if="videoIndex != index" class="ui-video-box" :src="item.cover_url" :style="{width: item.video_width > item.video_height ? '480rpx' : '320rpx', height: item.video_width > item.video_height ? '270rpx' : '480rpx'}">
<view class="ui-vide-poster">
<image class="ui-video_play_icon" src="https://image.fulllinkai.com/202308/17/42c88bf039bb56f85cfcb9af0392ffb6.png"></image>
</view>
</image>
<video :id="'video-' + index" :src="item.play_url" v-if="videoIndex == index" play-btn-position="center" show-fullscreen-btn="{{false}}" controls direction="0" object-fit="{{videoIndex == index ? 'contain' : 'cover'}}" referrer-policy="origin" bindfullscreenchange="leaveVideo" class="videoCenter ui-video-r-box" :style="{width: item.video_width > item.video_height ? '480rpx' : '320rpx', height: item.video_width > item.video_height ? '270rpx' : '480rpx'}" :key="item.id">
</video>
</view>
<view class="font_24 f-fb ui-mt-10" v-if="item.topic && item.topic.name" @tap="jumpPath(`/pages/dynamic/hotTopic?id=${item.topic.id}`)">
<view class="ui-tags f-fcc color-theme ~font_24 ~ui-pr-16">
<image lazy-load="true" class="ui-img" src="https://images.ufutx.com/202102/04/dc3043df7d265ae0b2401e589405a239.png" alt=""/>
{{ item.topic.name }}
</view>
</view>
<view v-if="item.address" class="color666 font_24 f-fl ui-mt-16">
<image lazy-load="true" class="ui-address-icon" src="https://images.ufutx.com/202102/04/817a393539ee854226eef79defef2fc4.png" alt=""/>
<view>{{ item.address }}</view>
</view>
</block>
</view>
<view class="color666 font_28 ui-like-box">
<view class="ui-like-icon-box">
<image lazy-load="true" class="ui-like-icon" src="https://images.ufutx.com/202102/04/ab432de170b4e8ca1a1a59e34af9aa25.png"></image>
{{ item.commenter_count }}
</view>
<view class="ui-like-icon-box ui-mr-40" @tap.stop="upvote(item ,index)">
<image v-if="!item.is_like" class="ui-like-icon-v2" src="https://images.ufutx.com/202106/10/a97c7c76f3aaf7065e7f7a5fe2abc081.png"></image>
<image v-else class="ui-img2_gif" :src="item.likeGif"></image>
{{ item.liker_count }}
</view>
<view class="ui-pl-20 ui-pr-20" style="margin-right: -16rpx" @tap.stop="changeSelect()">
<image class="ui-cuIcon-moreandroid" src="https://image.fulllinkai.com/202409/05/fdb58839d1909d75f636941d6aea6cb5.png" mode="widthFix"></image>
</view>
</view>
</view>
</view>
<view class="ui-line" v-if="index + 1 != list.length"></view>
</block>
</view>
<!--动态操作功能selectData选择的动态数据、selectIndex选中的动态下标、admin是否管理员、from来自哪个父组件-->
<dynamicOperation :chooseShow.sync="chooseShow" :from="'personalDynamic'" @hideModal="hideModal"></dynamicOperation>
<pageScroll ref="pageScroll"></pageScroll>
</template>
<script>
import wepy from '@wepy/core'
import https from '../../mixins/https'
import base from '../../mixins/base'
import {service} from '../../config'
import {commentTimeHandle} from '../../mixins/plugins'
wepy.page({
config: {},
mixins: [https, base],
data: {
id: '',
userInfo: {},
navHeight: 0,
navTop: 0,
showLoading: false,
videoIndex: -1,
videoContext: null,
chooseShow: false,
no_more: false,
loading: false,
page: 1,
list: [] // 列表数据
},
methods: {
getDetail() {
let vm = this
vm.$showLoading('加载中...')
vm.$get({url: `${service.host}/other/user/${vm.id}`}).then(({code, data}) => {
if (code === 0) {
vm.userInfo = data
}
vm.showLoading = true
wx.hideLoading()
}).catch(err => {
wx.hideLoading()
vm.showLoading = true
console.log(err)
})
},
getList() {
let vm = this
let data = {
page: vm.page
}
vm.$showLoading('加载中...')
vm.$get({url: `${service.host}/moment/list/other/user/${vm.id}`, data}).then(({code, data}) => {
if (code === 0) {
if (data.data && data.data.length > 0) {
data.data.forEach((item, index) => {
item.readmore = {status: true, auto: false, tip: '全文'}
if (item.create_time && commentTimeHandle(item.create_time).split('-').length > 1) {
item.startTime = commentTimeHandle(item.create_time).split('-')[0]
item.endTime = commentTimeHandle(item.create_time).split('-')[1]
} else {
item.startTime = commentTimeHandle(item.create_time).split('-')[0]
}
item.likeGif = 'https://images.ufutx.com/202106/07/b227f3ecf9cbd080fb814450b667b5ce.gif'
let sty = typeof (item.photos)
if (sty == 'string') {
item.photos = JSON.parse(item.photos)
}
if ((item.is_audited == 0 || item.is_audited == -1) && item.is_self == 0) {
data.data.splice(index--, 1)
}
})
}
if (vm.list.length === 0 || vm.page === 1) {
vm.list = data.data
} else {
data.data.map(function (item) {
vm.list.push(item)
})
}
if (vm.list.length < 15 || data.data.length < 15) {
vm.no_more = true
}
vm.textAll()
setTimeout(() => {
vm.loading = true
}, 500)
}
wx.hideLoading()
}).catch(err => {
wx.hideLoading()
console.log(err)
})
},
// 文字超出展示全文
textAll() {
let vm = this
vm.$nextTick(() => {
setTimeout(() => {
const query = wx.createSelectorQuery().in(vm.$wx)
query.selectAll('.substance').boundingClientRect()
query.exec(function (res) {
let num = res[0]
for (let i = 0; i < num.length; i++) {
if (num[i].height > 75) {
vm.list[i].readmore = {
status: false,
auto: true,
tip: '全文'
}
}
}
})
}, 300)
})
},
// 展开全文或收起
toggle(e) {
let vm = this
let index = e.$wx.currentTarget.dataset.index
let status = vm.list[index].readmore.status
vm.list[index].readmore.status = !status
vm.list[index].readmore.tip = status ? '全文' : '收起'
},
// 点赞
upvote(e, index) {
let vm = this
vm.$post({url: `${service.host}/moment/${e.id}/like`}).then(({code}) => {
wx.hideLoading()
if (code == 0) {
let vm = this
let nowTime = new Date()
vm.list[index].is_like = !vm.list[index].is_like
vm.list[index].liker_count = vm.list[index].liker_count + (vm.list[index].is_like ? 1 : -1)
vm.list[index].likeGif = `${vm.list[index].likeGif}?${nowTime}`
}
}).catch(() => {
wx.hideLoading()
})
},
// 播放视频
playVideo(index, id) {
let vm = this
// 首页列表视频禁止播放
if (vm.from != 'dynamicDetail') {
wx.navigateTo({url: `/pages/dynamic/dynamicDetail?id=${id}`})
return
}
vm.videoIndex = index
vm.videoContext = wx.createVideoContext(`video-${index}`, vm.$wx)
vm.videoContext.requestFullScreen()
setTimeout(function() {
// 将点击视频进行播放
vm.videoContext.play()
}, 500)
},
// 关闭视频
leaveVideo(e) {
let vm = this
let fullScreen = e.$wx.detail.fullScreen
if (!fullScreen) {
vm.videoContext.stop()
vm.videoContext = null
vm.videoIndex = -1
}
},
// 选择某条动态操作弹框
changeSelect() {
let vm = this
vm.chooseShow = true
},
// 取消动态操作弹框
hideModal() {
let vm = this
vm.chooseShow = false
},
jumpPath(url) {
wx.navigateTo({url: url})
},
jumpBack() {
wx.navigateBack({delta: 1})
}
},
// 上拉获取更多数据
onReachBottom() {
let vm = this
if (!vm.no_more) {
vm.getList()
}
},
// 下拉刷新
onPullDownRefresh() {
let vm = this
vm.page = 1
vm.no_more = false
vm.getList()
},
onPageScroll(res) {
let vm = this
let top = res.scrollTop
vm.$refs.pageScroll.showBackTopBtn = top > 380
},
onShow() {
},
onLoad(e) {
let vm = this
let app = vm.$app.$options
vm.id = e.id
vm.getDetail()
vm.getList()
vm.navHeight = app.globalData.navBarHeight
vm.navTop = app.globalData.navTop
}
})
</script>
<config>
{
navigationBarTitleText: '个人动态',
enablePullDownRefresh: true,
navigationStyle: 'custom',
backgroundColorTop: '#ffffff',
backgroundColorBottom: '#ffffff',
usingComponents: {
dynamicOperation: '~@/components/dynamicOperation',
pageScroll: '~@/components/pageScroll'
}
}
</config>

View File

@ -549,7 +549,7 @@ page {
<block v-else>
<view class="text-center color999 font_24 ui-pb-16" v-if="item.showTime">{{item.time}}</view>
<view class="{{!item.isSelf ? 'ui-left-msg-box f-fl' : 'ui-right-msg-box f-fr'}}">
<image v-if="!item.isSelf" class="ui-user-pic" :src="item.avatar" mode="aspectFill"></image>
<image v-if="!item.isSelf" class="ui-user-pic" :src="item.avatar" mode="aspectFill" @tap="jumpPath(item)"></image>
<view class="{{!item.isSelf ? 'ui-pl-12' : 'ui-pr-12'}}">
<view class="ui-relative">
<view v-if="membersData.user_team.show_other_nick" class="font_26 color999 ui-pb-8 {{!item.isSelf ? 'text-left' : 'text-right'}}">{{item.name}}</view>
@ -1467,6 +1467,9 @@ wepy.page({
jumpDetailPath() {
let vm = this
wx.navigateTo({url: `/pages/news/groupChitchatDetail?id=${vm.otherUserId}`})
},
jumpPath(e) {
wx.navigateTo({url: `/pages/home/information?id=${e.userId}`})
}
},