426 lines
14 KiB
Plaintext
426 lines
14 KiB
Plaintext
<style lang="less">
|
|
scroll-view {
|
|
height: 100%;
|
|
box-sizing: border-box;
|
|
}
|
|
|
|
.ui-user-pic {
|
|
width: 80rpx;
|
|
min-width: 80rpx;
|
|
height: 80rpx;
|
|
border-radius: 50%;
|
|
background-position: center;
|
|
background-size: cover;
|
|
background-repeat: no-repeat;
|
|
}
|
|
|
|
.ui-time {
|
|
position: absolute;
|
|
right: 30rpx;
|
|
top: 30rpx;
|
|
}
|
|
|
|
.ui-name {
|
|
width: auto;
|
|
max-width: 300rpx;
|
|
overflow: hidden;
|
|
white-space: nowrap;
|
|
text-overflow: ellipsis;
|
|
height: 40rpx;
|
|
font-size: 30rpx;
|
|
font-weight: 600;
|
|
color: #333333;
|
|
line-height: 40rpx;
|
|
}
|
|
.ui-identification{
|
|
color: #f3903b;
|
|
padding: 4rpx 12rpx;
|
|
line-height: 32rpx;
|
|
border-radius: 20rpx;
|
|
background: #fff9f4;
|
|
margin-left: 14rpx;
|
|
.ui-identification-icon{
|
|
width: 24rpx;
|
|
height: 24rpx;
|
|
display: block;
|
|
}
|
|
}
|
|
|
|
.referencesIcon {
|
|
width: 124rpx;
|
|
height: 36rpx;
|
|
display: block;
|
|
margin-left: 16rpx;
|
|
margin-top: 2rpx;
|
|
}
|
|
|
|
.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-right: 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;
|
|
}
|
|
}
|
|
|
|
.ui-line{
|
|
margin: 0 30rpx;
|
|
height: 2rpx;
|
|
background: #f5f5f5;
|
|
}
|
|
</style>
|
|
<template>
|
|
<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="ui-user-pic" style="{{'background-image:url(' + (item.user.photo || 'https://image.fulllinkai.com/202203/09/cc1c73eb1a4941fef25a15cd1ff2f9df.png') + ')'}}" @tap.stop="jumpPath(`/pages/home/information?id=${item.user_id}`)"></view>
|
|
<view class="~color999 ~font_24 ui-time">{{ item.create_time }}</view>
|
|
<view class="~ui-pl-16">
|
|
<view class="~f-fc">
|
|
<view class="~f-fcl">
|
|
<view class="ui-name">{{ item.user.nickname || '未设置名称' }}</view>
|
|
<view v-if="item.work_user_tag" class="ui-identification ~font_22 ~f-fcc">
|
|
<image class="ui-identification-icon" src="https://image.fulllinkai.com/202307/21/eb5c30d676eac58af4235bad8e6d8c43.png" mode="widthFix"></image>
|
|
{{item.work_user_tag}}
|
|
</view>
|
|
</view>
|
|
<!-- <image class="referencesIcon" src="https://image.fulllinkai.com/202207/19/7e78a1dd367f1250d4cba4e85bfd60f1.png" mode="widthFix" v-if="item.user.type != 'single'"></image>-->
|
|
<view class="~font_24 ~ui-ml-24 ~color-theme" v-if="item.vote_id > 0">
|
|
参与了投票：
|
|
</view>
|
|
</view>
|
|
<view class="~font_24 ~f-fbc">
|
|
<view class="~f-fcl">
|
|
<view class="~font_24 ~color-999">{{ item.u_year }}</view>
|
|
<view class="~font_24 ~color-999" v-if="item.profile && item.profile.stature"><text decode> </text>· {{ item.profile.stature }}cm
|
|
</view>
|
|
<view class="~font_24 ~color-999" v-if="item.profile && item.profile.degree"><text decode> </text>· {{ item.profile.degree }}</view>
|
|
</view>
|
|
<view class="~color-theme" v-if="item.is_audited == 0">审核中</view>
|
|
<view class="~color-theme" v-if="item.is_audited == -1">审核失败</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', display: videoIndex == index ? 'none' : 'block'}" 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" :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 == false" lazy-load="true" class="ui-like-icon-v2" src="https://images.ufutx.com/202106/10/a97c7c76f3aaf7065e7f7a5fe2abc081.png"></image>
|
|
<image v-else class="ui-img2_gif" src="{{item.is_like ? gifurl : 'https://images.ufutx.com/202106/07/b227f3ecf9cbd080fb814450b667b5ce.gif'}}"></image>
|
|
{{ item.liker_count }}
|
|
</view>
|
|
<view class="~ui-pl-20 ~ui-pr-6" style="margin-right: -20rpx">
|
|
<image class="ui-cuIcon-moreandroid" src="https://image.fulllinkai.com/202409/05/fdb58839d1909d75f636941d6aea6cb5.png" mode="widthFix" @tap.stop="changeOperation(item, index)"></image>
|
|
</view>
|
|
</view>
|
|
</view>
|
|
</view>
|
|
<view class="ui-line"></view>
|
|
</block>
|
|
</template>
|
|
<script>
|
|
import wepy from '@wepy/core'
|
|
import base from '../mixins/base'
|
|
import https from '../mixins/https'
|
|
import {service} from '../config'
|
|
|
|
wepy.component({
|
|
mixins: [https, base],
|
|
props: {
|
|
dynamicList: {
|
|
type: Array,
|
|
default: []
|
|
},
|
|
from: {
|
|
type: String,
|
|
default: ''
|
|
}
|
|
},
|
|
watch: {
|
|
dynamicList() {
|
|
let vm = this
|
|
if (vm.dynamicList && vm.dynamicList.length > 0) {
|
|
vm.list = vm.dynamicList
|
|
vm.textAll(vm.dynamicList)
|
|
}
|
|
}
|
|
},
|
|
data: {
|
|
list: [],
|
|
videoIndex: -1,
|
|
videoContext: null,
|
|
gifurl: 'https://images.ufutx.com/202106/11/d40b92e053a693f30eb197bf6374af95.gif'
|
|
},
|
|
methods: {
|
|
// 文字超出展示全文
|
|
textAll(e) {
|
|
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) {
|
|
e[i].readmore = {
|
|
status: false,
|
|
auto: true,
|
|
tip: '全文'
|
|
}
|
|
}
|
|
}
|
|
vm.list = JSON.parse(JSON.stringify(e))
|
|
})
|
|
}, 300)
|
|
})
|
|
},
|
|
// 点赞
|
|
upvote(e, index) {
|
|
let vm = this
|
|
// 校验是否完成注册资料
|
|
if (!vm.$signInVerify()) {
|
|
vm.$emit('signInVerify')
|
|
return
|
|
}
|
|
let nowTime = new Date()
|
|
vm.$post({url: `${service.host}/moment/${e.id}/like`}).then(({code}) => {
|
|
wx.hideLoading()
|
|
if (code == 0) {
|
|
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)
|
|
if (vm.list[index].is_like) {
|
|
vm.gifurl = `${vm.gifurl}?${nowTime}`
|
|
}
|
|
}
|
|
}).catch(() => {
|
|
wx.hideLoading()
|
|
})
|
|
},
|
|
// 选择动态操作
|
|
changeOperation(e, index) {
|
|
let vm = this
|
|
// 校验是否完成注册资料
|
|
if (!vm.$signInVerify()) {
|
|
vm.$emit('signInVerify')
|
|
return
|
|
}
|
|
vm.$emit('changeSelect', e, index)
|
|
},
|
|
// 展开全文或收起
|
|
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 ? '全文' : '收起'
|
|
},
|
|
// 播放视频
|
|
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', vm.$wx)
|
|
vm.videoContext.requestFullScreen()
|
|
setTimeout(function() {
|
|
// 将点击视频进行播放
|
|
vm.videoContext = wx.createVideoContext('video', vm.$wx)
|
|
vm.videoContext.play()
|
|
}, 1200)
|
|
},
|
|
// 关闭视频
|
|
leaveVideo(e) {
|
|
let vm = this
|
|
let fullScreen = e.$wx.detail.fullScreen
|
|
if (!fullScreen) {
|
|
vm.videoContext.stop()
|
|
vm.videoContext = null
|
|
vm.videoIndex = -1
|
|
}
|
|
},
|
|
jumpPath(url, type) {
|
|
let vm = this
|
|
// 校验是否完成注册资料
|
|
if (!vm.$signInVerify()) {
|
|
vm.$emit('signInVerify')
|
|
return
|
|
}
|
|
console.log(vm.from, url, type, '7777')
|
|
if (vm.from != 'dynamic' && type != 'vote' && vm.from != 'hotTopic') {
|
|
return
|
|
}
|
|
wx.navigateTo({url: url})
|
|
}
|
|
},
|
|
created() {}
|
|
})
|
|
</script>
|