wangfukang
1 week ago
7 changed files with 1585 additions and 258 deletions
@ -0,0 +1,414 @@ |
|||||
|
<template> |
||||
|
<view class="my-space-page"> |
||||
|
<view class="top-safe" :style="{ height: menuButtonInfo.top + 'px' }"></view> |
||||
|
<view class="float-bar"> |
||||
|
<view class="home-back" @tap="back"> |
||||
|
<text class="home-back-icon">‹</text> |
||||
|
<text>返回资料</text> |
||||
|
</view> |
||||
|
</view> |
||||
|
|
||||
|
<view class="space-hero"> |
||||
|
<image class="hero-avatar-img" v-if="profile.avatarUrl" :src="profile.avatarUrl" mode="aspectFill"></image> |
||||
|
<view class="hero-avatar" v-else>{{ profile.avatarText || '我' }}</view> |
||||
|
<view class="hero-main"> |
||||
|
<view class="hero-title-row"> |
||||
|
<view class="hero-title">我的个人空间</view> |
||||
|
<view class="publish-btn" @tap="openComposer">+ 发动态</view> |
||||
|
</view> |
||||
|
<view class="hero-sub">{{ profile.anonymousName || '半匿名漂流者' }} · {{ profile.currentMode === 'e' ? '轻轻热闹' : '安静陪伴' }}</view> |
||||
|
</view> |
||||
|
</view> |
||||
|
|
||||
|
<view class="moment-empty" v-if="!moments.length && !loadingMoments">还没有动态，发一条让同频的人认识你</view> |
||||
|
<view class="moment-card" v-for="item in moments" :key="item.id"> |
||||
|
<view class="moment-top"> |
||||
|
<text class="moment-time">{{ momentTime(item.createTime) }}</text> |
||||
|
<text class="moment-state blocked" v-if="item.localState === 'failed'">{{ item.failTip || '发布失败' }}</text> |
||||
|
<text class="moment-state auditing" v-else-if="item.status === 0">审核中</text> |
||||
|
<text class="moment-state blocked" v-else-if="item.status === 2">未通过审核</text> |
||||
|
<text class="moment-del" @tap="removeMoment(item)">删除</text> |
||||
|
</view> |
||||
|
<view class="moment-text" v-if="item.content">{{ item.content }}</view> |
||||
|
<view class="moment-grid" v-if="item.imageList && item.imageList.length" :class="'g' + item.imageList.length"> |
||||
|
<image v-for="(img, idx) in item.imageList" :key="idx" :src="img" mode="aspectFill" @tap="previewMomentImages(item, idx)"></image> |
||||
|
</view> |
||||
|
<view class="moment-video" v-if="item.videoUrl" @tap="playMomentVideo(item)"> |
||||
|
<image class="moment-video-poster" v-if="item.videoPoster" :src="item.videoPoster" mode="aspectFill"></image> |
||||
|
<view class="moment-video-holder" v-else></view> |
||||
|
<view class="moment-play">▶</view> |
||||
|
</view> |
||||
|
</view> |
||||
|
<view class="moment-more" v-if="loadingMoments">加载中...</view> |
||||
|
<view class="moment-more" v-else-if="hasMoreMoments && moments.length" @tap="loadMoments(false)">查看更早的动态</view> |
||||
|
<view class="moment-more" v-else-if="!hasMoreMoments && moments.length">没有更多动态了</view> |
||||
|
|
||||
|
<view class="composer-mask" v-if="showComposer" @tap="closeComposer"> |
||||
|
<view class="composer" @tap.stop> |
||||
|
<view class="composer-title">发动态</view> |
||||
|
<textarea class="composer-input" v-model="composeText" maxlength="1000" |
||||
|
placeholder="此刻想说点什么..." :show-confirm-bar="false"></textarea> |
||||
|
<view class="composer-grid"> |
||||
|
<view class="composer-thumb" v-for="(img, idx) in composeImages" :key="idx" @tap="retryComposeImage(img)"> |
||||
|
<image :src="img.local" mode="aspectFill"></image> |
||||
|
<view class="thumb-state" v-if="img.status === 'uploading'">上传中</view> |
||||
|
<view class="thumb-state failed" v-else-if="img.status === 'failed'">失败·点我重试</view> |
||||
|
<view class="thumb-del" @tap.stop="removeComposeImage(idx)">×</view> |
||||
|
</view> |
||||
|
<view class="composer-thumb" v-if="composeVideo" @tap="retryComposeVideo"> |
||||
|
<image v-if="composeVideo.poster" :src="composeVideo.poster" mode="aspectFill"></image> |
||||
|
<view class="thumb-video-mark">▶ 视频</view> |
||||
|
<view class="thumb-state" v-if="composeVideo.status === 'uploading'">上传中</view> |
||||
|
<view class="thumb-state failed" v-else-if="composeVideo.status === 'failed'">失败·点我重试</view> |
||||
|
<view class="thumb-del" @tap.stop="composeVideo = null">×</view> |
||||
|
</view> |
||||
|
<view class="composer-add" v-if="canAddMedia" @tap="chooseMomentMedia">＋</view> |
||||
|
</view> |
||||
|
<view class="composer-tip">最多 5 张图片，或 1 个视频 · 内容需通过审核</view> |
||||
|
<view class="composer-submit" :class="{ disabled: publishing }" @tap="submitMoment">发布</view> |
||||
|
</view> |
||||
|
</view> |
||||
|
</view> |
||||
|
</template> |
||||
|
|
||||
|
<script> |
||||
|
import { getIeProfile, pageIeMoments, publishIeMoment, deleteIeMoment } from '@/common/ieApi.js' |
||||
|
import tui from '@/common/httpRequest.js' |
||||
|
|
||||
|
export default { |
||||
|
data() { |
||||
|
return { |
||||
|
menuButtonInfo: { top: 44 }, |
||||
|
profile: {}, |
||||
|
moments: [], |
||||
|
momentPage: 1, |
||||
|
hasMoreMoments: true, |
||||
|
loadingMoments: false, |
||||
|
showComposer: false, |
||||
|
composeText: '', |
||||
|
composeImages: [], |
||||
|
composeVideo: null, |
||||
|
publishing: false |
||||
|
} |
||||
|
}, |
||||
|
computed: { |
||||
|
canAddMedia() { |
||||
|
if (this.composeVideo) return false |
||||
|
return this.composeImages.length < 5 |
||||
|
} |
||||
|
}, |
||||
|
onLoad() { |
||||
|
if (uni.getMenuButtonBoundingClientRect) this.menuButtonInfo = uni.getMenuButtonBoundingClientRect() |
||||
|
this.loadProfile() |
||||
|
this.loadMoments(true) |
||||
|
}, |
||||
|
onReachBottom() { |
||||
|
this.loadMoments(false) |
||||
|
}, |
||||
|
async onPullDownRefresh() { |
||||
|
try { |
||||
|
await Promise.all([ |
||||
|
this.loadProfile(), |
||||
|
this.loadMoments(true, true) |
||||
|
]) |
||||
|
} finally { |
||||
|
uni.stopPullDownRefresh() |
||||
|
} |
||||
|
}, |
||||
|
methods: { |
||||
|
back() { |
||||
|
uni.navigateBack({ fail: () => uni.redirectTo({ url: '/package1/ieBrowser/universe' }) }) |
||||
|
}, |
||||
|
async loadProfile() { |
||||
|
const profile = await getIeProfile() |
||||
|
if (profile) this.profile = profile |
||||
|
}, |
||||
|
async loadMoments(reset, force = false) { |
||||
|
if (this.loadingMoments && !force) return |
||||
|
if (!reset && !this.hasMoreMoments) return |
||||
|
this.loadingMoments = true |
||||
|
try { |
||||
|
const page = reset ? 1 : this.momentPage |
||||
|
const result = await pageIeMoments(null, page, 10) |
||||
|
const records = (result && result.records) || [] |
||||
|
this.moments = reset ? records : this.moments.concat(records) |
||||
|
this.hasMoreMoments = records.length >= 10 |
||||
|
this.momentPage = page + 1 |
||||
|
} finally { |
||||
|
this.loadingMoments = false |
||||
|
} |
||||
|
}, |
||||
|
momentTime(timeStr) { |
||||
|
if (!timeStr) return '' |
||||
|
const time = new Date(String(timeStr).replace(/-/g, '/')).getTime() |
||||
|
if (!time) return '' |
||||
|
const diff = Date.now() - time |
||||
|
if (diff < 60000) return '刚刚' |
||||
|
if (diff < 3600000) return Math.floor(diff / 60000) + ' 分钟前' |
||||
|
if (diff < 86400000) return Math.floor(diff / 3600000) + ' 小时前' |
||||
|
if (diff < 172800000) return '昨天' |
||||
|
const d = new Date(time) |
||||
|
return (d.getMonth() + 1) + '月' + d.getDate() + '日' |
||||
|
}, |
||||
|
previewMomentImages(item, index) { |
||||
|
uni.previewImage({ urls: item.imageList || [], current: item.imageList[index] }) |
||||
|
}, |
||||
|
playMomentVideo(item) { |
||||
|
if (item.status === 0) { |
||||
|
uni.showToast({ title: '视频审核中，通过后对方可见', icon: 'none' }) |
||||
|
} |
||||
|
if (!item.videoUrl) return |
||||
|
uni.navigateTo({ url: '/package1/ieBrowser/videoPreview?url=' + encodeURIComponent(item.videoUrl) }) |
||||
|
}, |
||||
|
removeMoment(item) { |
||||
|
if (String(item.id).indexOf('local-') === 0) { |
||||
|
this.moments = this.moments.filter(m => m.id !== item.id) |
||||
|
return |
||||
|
} |
||||
|
uni.showModal({ |
||||
|
title: '删除动态', |
||||
|
content: '删除后无法恢复，确定删除吗？', |
||||
|
success: async (res) => { |
||||
|
if (!res.confirm) return |
||||
|
await deleteIeMoment(item.id) |
||||
|
this.moments = this.moments.filter(m => m.id !== item.id) |
||||
|
} |
||||
|
}) |
||||
|
}, |
||||
|
openComposer() { |
||||
|
this.showComposer = true |
||||
|
}, |
||||
|
closeComposer() { |
||||
|
this.showComposer = false |
||||
|
}, |
||||
|
removeComposeImage(index) { |
||||
|
this.composeImages.splice(index, 1) |
||||
|
}, |
||||
|
addComposeImages(paths) { |
||||
|
const items = (paths || []) |
||||
|
.filter(p => !!p) |
||||
|
.slice(0, 5 - this.composeImages.length) |
||||
|
.map(p => ({ local: p, url: '', status: 'uploading' })) |
||||
|
if (!items.length) return |
||||
|
this.composeImages = this.composeImages.concat(items) |
||||
|
items.forEach(item => this.uploadComposeImage(item)) |
||||
|
}, |
||||
|
async uploadComposeImage(item) { |
||||
|
item.status = 'uploading' |
||||
|
try { |
||||
|
item.url = await this.silentUpload(item.local) |
||||
|
item.status = 'done' |
||||
|
} catch (e) { |
||||
|
item.status = 'failed' |
||||
|
} |
||||
|
}, |
||||
|
retryComposeImage(item) { |
||||
|
if (item.status === 'failed') this.uploadComposeImage(item) |
||||
|
}, |
||||
|
async uploadComposeVideo() { |
||||
|
const video = this.composeVideo |
||||
|
if (!video) return |
||||
|
video.status = 'uploading' |
||||
|
try { |
||||
|
video.url = await this.silentUpload(video.local) |
||||
|
if (video.poster) { |
||||
|
try { video.posterUrl = await this.silentUpload(video.poster) } catch (e) { video.posterUrl = '' } |
||||
|
} |
||||
|
video.status = 'done' |
||||
|
} catch (e) { |
||||
|
video.status = 'failed' |
||||
|
} |
||||
|
}, |
||||
|
retryComposeVideo() { |
||||
|
if (this.composeVideo && this.composeVideo.status === 'failed') this.uploadComposeVideo() |
||||
|
}, |
||||
|
chooseMomentMedia() { |
||||
|
const hasImages = this.composeImages.length > 0 |
||||
|
if (!uni.chooseMedia) { |
||||
|
uni.chooseImage({ |
||||
|
count: 5 - this.composeImages.length, |
||||
|
success: (res) => { |
||||
|
this.addComposeImages(res.tempFilePaths || []) |
||||
|
} |
||||
|
}) |
||||
|
return |
||||
|
} |
||||
|
uni.chooseMedia({ |
||||
|
count: hasImages ? 5 - this.composeImages.length : 5, |
||||
|
mediaType: hasImages ? ['image'] : ['image', 'video'], |
||||
|
maxDuration: 60, |
||||
|
success: (res) => { |
||||
|
const files = res.tempFiles || [] |
||||
|
if (!files.length) return |
||||
|
if (res.type === 'video') { |
||||
|
const file = files[0] |
||||
|
if (file.size > 100 * 1024 * 1024) { |
||||
|
uni.showToast({ title: '视频不能超过100MB，请先剪辑', icon: 'none' }) |
||||
|
return |
||||
|
} |
||||
|
if (file.duration && file.duration > 61) { |
||||
|
uni.showToast({ title: '视频不能超过60秒', icon: 'none' }) |
||||
|
return |
||||
|
} |
||||
|
this.composeVideo = { |
||||
|
local: file.tempFilePath, |
||||
|
poster: file.thumbTempFilePath || '', |
||||
|
size: file.size, |
||||
|
url: '', |
||||
|
posterUrl: '', |
||||
|
status: 'uploading' |
||||
|
} |
||||
|
this.uploadComposeVideo() |
||||
|
return |
||||
|
} |
||||
|
const oversize = files.find(f => f.size > 10 * 1024 * 1024) |
||||
|
if (oversize) { |
||||
|
uni.showToast({ title: '单张图片不能超过10MB', icon: 'none' }) |
||||
|
return |
||||
|
} |
||||
|
this.addComposeImages(files.map(f => f.tempFilePath)) |
||||
|
} |
||||
|
}) |
||||
|
}, |
||||
|
silentUpload(filePath) { |
||||
|
return new Promise((resolve, reject) => { |
||||
|
uni.uploadFile({ |
||||
|
url: tui.interfaceUrl() + '/upload/file', |
||||
|
filePath, |
||||
|
name: 'file', |
||||
|
timeout: 300000, |
||||
|
header: { accessToken: uni.getStorageSync('hiver_token') }, |
||||
|
success: (res) => { |
||||
|
try { |
||||
|
const d = JSON.parse(String(res.data || '{}').replace(/\ufeff/g, '')) |
||||
|
const fileObj = d.result !== undefined ? d.result : d.data |
||||
|
const url = typeof fileObj === 'string' ? fileObj : (fileObj && (fileObj.url || fileObj.fileUrl || fileObj.path || fileObj.fullPath)) |
||||
|
if (d.code % 100 === 0 && url) resolve(url) |
||||
|
else reject(new Error(d.message || '上传失败')) |
||||
|
} catch (e) { |
||||
|
reject(e) |
||||
|
} |
||||
|
}, |
||||
|
fail: () => reject(new Error('上传失败')) |
||||
|
}) |
||||
|
}) |
||||
|
}, |
||||
|
async waitComposeUploads(images, video) { |
||||
|
const uploading = () => images.some(item => item.status === 'uploading') || |
||||
|
(video && video.status === 'uploading') |
||||
|
while (uploading()) { |
||||
|
await new Promise(resolve => setTimeout(resolve, 500)) |
||||
|
} |
||||
|
if (images.some(item => item.status !== 'done')) throw new Error('图片上传失败') |
||||
|
if (video && video.status !== 'done') throw new Error('视频上传失败') |
||||
|
}, |
||||
|
async submitMoment() { |
||||
|
if (this.publishing) return |
||||
|
const content = this.composeText.trim() |
||||
|
if (!content && !this.composeImages.length && !this.composeVideo) { |
||||
|
uni.showToast({ title: '写点什么或选张图片吧', icon: 'none' }) |
||||
|
return |
||||
|
} |
||||
|
const images = this.composeImages |
||||
|
const video = this.composeVideo |
||||
|
if (images.some(item => item.status === 'failed') || (video && video.status === 'failed')) { |
||||
|
uni.showToast({ title: '有图片/视频上传失败，点缩略图重试', icon: 'none' }) |
||||
|
return |
||||
|
} |
||||
|
this.publishing = true |
||||
|
const localCard = { |
||||
|
id: 'local-' + Date.now(), |
||||
|
content, |
||||
|
imageList: images.map(item => item.local), |
||||
|
videoUrl: video ? video.local : '', |
||||
|
videoPoster: video ? video.poster : '', |
||||
|
status: 1, |
||||
|
localState: 'publishing', |
||||
|
failTip: '', |
||||
|
createTime: this.formatNow() |
||||
|
} |
||||
|
this.moments.unshift(localCard) |
||||
|
this.showComposer = false |
||||
|
this.composeText = '' |
||||
|
this.composeImages = [] |
||||
|
this.composeVideo = null |
||||
|
this.publishing = false |
||||
|
uni.showToast({ title: '已发布', icon: 'none' }) |
||||
|
try { |
||||
|
await this.waitComposeUploads(images, video) |
||||
|
const payload = { content, images: images.map(item => item.url) } |
||||
|
if (video) { |
||||
|
payload.videoUrl = video.url |
||||
|
payload.videoPoster = video.posterUrl || '' |
||||
|
} |
||||
|
const moment = await publishIeMoment(payload) |
||||
|
if (!moment) throw new Error('发布失败，请稍后再试') |
||||
|
const index = this.moments.findIndex(m => m.id === localCard.id) |
||||
|
if (index >= 0) { |
||||
|
moment.imageList = localCard.imageList.length ? localCard.imageList : moment.imageList |
||||
|
moment.videoPoster = localCard.videoPoster || moment.videoPoster |
||||
|
this.moments.splice(index, 1, moment) |
||||
|
} |
||||
|
} catch (e) { |
||||
|
localCard.localState = 'failed' |
||||
|
localCard.failTip = (e && e.message) || '发布失败' |
||||
|
uni.showToast({ title: localCard.failTip, icon: 'none' }) |
||||
|
} |
||||
|
}, |
||||
|
formatNow() { |
||||
|
const d = new Date() |
||||
|
const pad = n => (n < 10 ? '0' + n : '' + n) |
||||
|
return d.getFullYear() + '-' + pad(d.getMonth() + 1) + '-' + pad(d.getDate()) + ' ' + |
||||
|
pad(d.getHours()) + ':' + pad(d.getMinutes()) + ':' + pad(d.getSeconds()) |
||||
|
} |
||||
|
} |
||||
|
} |
||||
|
</script> |
||||
|
|
||||
|
<style lang="scss" scoped> |
||||
|
page { background: #f7f9ff; } |
||||
|
.my-space-page { min-height: 100vh; padding: 0 32rpx 80rpx; box-sizing: border-box; color: #161b2e; background: radial-gradient(circle at 50% 8%, rgba(169,255,231,.36), transparent 320rpx), radial-gradient(circle at 86% 30%, rgba(255,184,209,.2), transparent 340rpx), linear-gradient(180deg, #fbfdff, #eef4ff 62%, #fff4e8); } |
||||
|
.float-bar { position: relative; z-index: 5; display: flex; align-items: center; } |
||||
|
.home-back { display: flex; align-items: center; height: 58rpx; padding: 0 22rpx 0 12rpx; border: 1rpx solid rgba(255,255,255,.88); border-radius: 999rpx; color: rgba(22,27,46,.66); background: rgba(255,255,255,.66); backdrop-filter: blur(20rpx); box-shadow: 0 14rpx 36rpx rgba(96,112,160,.12), inset 0 1rpx 0 rgba(255,255,255,.95); font-size: 23rpx; font-weight: 800; } |
||||
|
.home-back-icon { margin-right: 6rpx; padding-bottom: 6rpx; font-size: 40rpx; line-height: 50rpx; font-weight: 400; } |
||||
|
.publish-btn { flex-shrink: 0; height: 54rpx; line-height: 54rpx; padding: 0 20rpx; border-radius: 999rpx; color: #11162a; background: #a9ffe7; font-size: 22rpx; font-weight: 900; box-shadow: 0 12rpx 28rpx rgba(96,200,170,.24); } |
||||
|
.space-hero { display: flex; align-items: center; margin-top: 28rpx; padding: 30rpx; border-radius: 38rpx; background: rgba(255,255,255,.66); border: 1rpx solid rgba(255,255,255,.82); box-shadow: 0 22rpx 70rpx rgba(96,112,160,.14); } |
||||
|
.hero-avatar, .hero-avatar-img { flex-shrink: 0; width: 112rpx; height: 112rpx; margin-right: 24rpx; border-radius: 50%; } |
||||
|
.hero-avatar { line-height: 112rpx; text-align: center; color: #11162a; background: linear-gradient(145deg, #effffb, #a9ffe7); font-size: 38rpx; font-weight: 900; } |
||||
|
.hero-main { flex: 1; min-width: 0; } |
||||
|
.hero-title-row { display: flex; align-items: center; justify-content: space-between; gap: 16rpx; } |
||||
|
.hero-title { font-size: 36rpx; font-weight: 900; } |
||||
|
.hero-sub { margin-top: 10rpx; color: rgba(22,27,46,.48); font-size: 23rpx; } |
||||
|
.moment-empty { margin-top: 60rpx; text-align: center; color: rgba(22,27,46,.4); font-size: 25rpx; } |
||||
|
.moment-card { margin-top: 24rpx; padding: 26rpx; border-radius: 28rpx; background: rgba(255,255,255,.85); border: 1rpx solid rgba(255,255,255,.9); box-shadow: 0 12rpx 32rpx rgba(96,112,160,.08); } |
||||
|
.moment-top { display: flex; align-items: center; } |
||||
|
.moment-time { flex: 1; color: rgba(22,27,46,.42); font-size: 21rpx; } |
||||
|
.moment-state { margin-right: 16rpx; padding: 4rpx 14rpx; border-radius: 999rpx; font-size: 20rpx; font-weight: 700; } |
||||
|
.moment-state.auditing { color: #b07b1f; background: rgba(255,196,87,.18); } |
||||
|
.moment-state.blocked { color: #d2486a; background: rgba(255,107,146,.14); } |
||||
|
.moment-del { color: rgba(22,27,46,.38); font-size: 22rpx; padding: 4rpx 8rpx; } |
||||
|
.moment-text { margin-top: 14rpx; font-size: 27rpx; line-height: 42rpx; word-break: break-all; } |
||||
|
.moment-grid { display: flex; flex-wrap: wrap; margin-top: 16rpx; } |
||||
|
.moment-grid image { width: 196rpx; height: 196rpx; margin: 0 10rpx 10rpx 0; border-radius: 16rpx; background: rgba(22,27,46,.05); } |
||||
|
.moment-grid.g1 image { width: 400rpx; height: 400rpx; border-radius: 22rpx; } |
||||
|
.moment-grid.g2 image { width: 300rpx; height: 300rpx; } |
||||
|
.moment-video { position: relative; margin-top: 16rpx; width: 440rpx; height: 290rpx; border-radius: 22rpx; overflow: hidden; background: #1a2034; } |
||||
|
.moment-video-poster, .moment-video-holder { width: 100%; height: 100%; } |
||||
|
.moment-play { position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); width: 84rpx; height: 84rpx; line-height: 84rpx; text-align: center; border-radius: 50%; color: #fff; background: rgba(0,0,0,.45); font-size: 32rpx; } |
||||
|
.moment-more { margin-top: 26rpx; text-align: center; color: rgba(22,27,46,.36); font-size: 22rpx; padding: 12rpx 0; } |
||||
|
.composer-mask { position: fixed; inset: 0; z-index: 120; display: flex; align-items: flex-end; background: rgba(13,17,32,.5); backdrop-filter: blur(10rpx); } |
||||
|
.composer { width: 100%; padding: 36rpx 32rpx calc(40rpx + env(safe-area-inset-bottom)); border-radius: 40rpx 40rpx 0 0; background: #ffffff; box-sizing: border-box; } |
||||
|
.composer-title { font-size: 32rpx; font-weight: 800; text-align: center; } |
||||
|
.composer-input { width: 100%; height: 200rpx; margin-top: 24rpx; padding: 22rpx; border-radius: 22rpx; background: #f4f6fc; font-size: 27rpx; box-sizing: border-box; } |
||||
|
.composer-grid { display: flex; flex-wrap: wrap; margin-top: 20rpx; } |
||||
|
.composer-thumb { position: relative; width: 150rpx; height: 150rpx; margin: 0 14rpx 14rpx 0; border-radius: 16rpx; overflow: hidden; background: #1a2034; } |
||||
|
.composer-thumb image { width: 100%; height: 100%; } |
||||
|
.thumb-del { position: absolute; right: 0; top: 0; width: 40rpx; height: 40rpx; line-height: 36rpx; text-align: center; color: #fff; background: rgba(0,0,0,.55); border-radius: 0 0 0 16rpx; font-size: 26rpx; } |
||||
|
.thumb-video-mark { position: absolute; left: 0; bottom: 0; right: 0; padding: 4rpx 0; text-align: center; color: #fff; background: rgba(0,0,0,.45); font-size: 20rpx; } |
||||
|
.thumb-state { position: absolute; left: 0; top: 0; right: 0; bottom: 0; display: flex; align-items: center; justify-content: center; color: #fff; background: rgba(0,0,0,.42); font-size: 20rpx; } |
||||
|
.thumb-state.failed { color: #ffd9e2; background: rgba(160,30,60,.55); } |
||||
|
.composer-add { width: 150rpx; height: 150rpx; line-height: 146rpx; text-align: center; border-radius: 16rpx; border: 2rpx dashed rgba(22,27,46,.18); color: rgba(22,27,46,.34); font-size: 52rpx; box-sizing: border-box; } |
||||
|
.composer-tip { margin-top: 8rpx; color: rgba(22,27,46,.38); font-size: 21rpx; } |
||||
|
.composer-submit { margin-top: 28rpx; height: 92rpx; line-height: 92rpx; text-align: center; border-radius: 999rpx; color: #11162a; background: linear-gradient(135deg, #a9ffe7, #7be3c8); font-size: 30rpx; font-weight: 800; box-shadow: 0 14rpx 32rpx rgba(96,200,170,.32); } |
||||
|
.composer-submit.disabled { opacity: .6; } |
||||
|
</style> |
||||
@ -0,0 +1,137 @@ |
|||||
|
<template> |
||||
|
<view class="space-page"> |
||||
|
<view class="nav" :style="{ paddingTop: menuButtonInfo.top + 'px' }"> |
||||
|
<view class="back" @tap="back">‹</view> |
||||
|
<view class="nav-title">{{ ownerName }}的空间</view> |
||||
|
</view> |
||||
|
|
||||
|
<view class="owner-card"> |
||||
|
<image class="owner-avatar-img" v-if="ownerAvatarUrl" :src="ownerAvatarUrl" mode="aspectFill"></image> |
||||
|
<view class="owner-avatar" v-else>{{ ownerAvatarText }}</view> |
||||
|
<view class="owner-name">{{ ownerName }}</view> |
||||
|
<view class="owner-mode">{{ ownerMode === 'e' ? 'e 人 · 轻轻热闹' : 'i 人 · 安静陪伴' }}</view> |
||||
|
</view> |
||||
|
|
||||
|
<view class="moment-empty" v-if="!moments.length && !loading">TA 还没有发过动态</view> |
||||
|
<view class="moment-card" v-for="item in moments" :key="item.id"> |
||||
|
<view class="moment-time">{{ momentTime(item.createTime) }}</view> |
||||
|
<view class="moment-text" v-if="item.content">{{ item.content }}</view> |
||||
|
<view class="moment-grid" v-if="item.imageList && item.imageList.length" :class="'g' + item.imageList.length"> |
||||
|
<image v-for="(img, idx) in item.imageList" :key="idx" :src="img" mode="aspectFill" @tap="previewImages(item, idx)"></image> |
||||
|
</view> |
||||
|
<view class="moment-video" v-if="item.videoUrl" @tap="playVideo(item)"> |
||||
|
<image class="moment-video-poster" v-if="item.videoPoster" :src="item.videoPoster" mode="aspectFill"></image> |
||||
|
<view class="moment-video-holder" v-else></view> |
||||
|
<view class="moment-play">▶</view> |
||||
|
</view> |
||||
|
</view> |
||||
|
<view class="load-line" v-if="loading">加载中...</view> |
||||
|
<view class="load-line" v-else-if="!hasMore && moments.length">没有更多动态了</view> |
||||
|
</view> |
||||
|
</template> |
||||
|
|
||||
|
<script> |
||||
|
import { pageIeMoments } from '@/common/ieApi.js' |
||||
|
|
||||
|
export default { |
||||
|
data() { |
||||
|
return { |
||||
|
menuButtonInfo: { top: 44 }, |
||||
|
userId: null, |
||||
|
roomId: '', |
||||
|
ownerName: 'TA', |
||||
|
ownerAvatarText: 'TA', |
||||
|
ownerAvatarUrl: '', |
||||
|
ownerMode: 'i', |
||||
|
moments: [], |
||||
|
page: 1, |
||||
|
hasMore: true, |
||||
|
loading: false |
||||
|
} |
||||
|
}, |
||||
|
onLoad(options = {}) { |
||||
|
if (uni.getMenuButtonBoundingClientRect) this.menuButtonInfo = uni.getMenuButtonBoundingClientRect() |
||||
|
this.userId = options.userId || null |
||||
|
this.roomId = options.roomId || '' |
||||
|
if (options.name) this.ownerName = decodeURIComponent(options.name) |
||||
|
if (options.avatar) this.ownerAvatarText = decodeURIComponent(options.avatar) |
||||
|
if (options.avatarUrl) this.ownerAvatarUrl = decodeURIComponent(options.avatarUrl) |
||||
|
if (options.mode) this.ownerMode = options.mode |
||||
|
this.loadMoments(true) |
||||
|
}, |
||||
|
onReachBottom() { |
||||
|
this.loadMoments(false) |
||||
|
}, |
||||
|
methods: { |
||||
|
back() { |
||||
|
uni.navigateBack({ fail: () => uni.redirectTo({ url: '/package1/ieBrowser/index' }) }) |
||||
|
}, |
||||
|
async loadMoments(reset) { |
||||
|
if (this.loading) return |
||||
|
if (!reset && !this.hasMore) return |
||||
|
if (!this.userId) return |
||||
|
this.loading = true |
||||
|
try { |
||||
|
const result = await pageIeMoments(this.userId, reset ? 1 : this.page, 10, this.roomId) |
||||
|
const records = (result && result.records) || [] |
||||
|
this.moments = reset ? records : this.moments.concat(records) |
||||
|
this.hasMore = records.length >= 10 |
||||
|
this.page = (reset ? 1 : this.page) + 1 |
||||
|
const first = records.find(item => item.anonymousName) |
||||
|
if (first) { |
||||
|
this.ownerName = first.anonymousName || this.ownerName |
||||
|
this.ownerAvatarText = first.avatarText || this.ownerAvatarText |
||||
|
this.ownerAvatarUrl = first.avatarUrl || this.ownerAvatarUrl |
||||
|
this.ownerMode = first.currentMode || this.ownerMode |
||||
|
} |
||||
|
} finally { |
||||
|
this.loading = false |
||||
|
} |
||||
|
}, |
||||
|
momentTime(timeStr) { |
||||
|
if (!timeStr) return '' |
||||
|
const time = new Date(String(timeStr).replace(/-/g, '/')).getTime() |
||||
|
if (!time) return '' |
||||
|
const diff = Date.now() - time |
||||
|
if (diff < 60000) return '刚刚' |
||||
|
if (diff < 3600000) return Math.floor(diff / 60000) + ' 分钟前' |
||||
|
if (diff < 86400000) return Math.floor(diff / 3600000) + ' 小时前' |
||||
|
if (diff < 172800000) return '昨天' |
||||
|
const d = new Date(time) |
||||
|
return (d.getMonth() + 1) + '月' + d.getDate() + '日' |
||||
|
}, |
||||
|
previewImages(item, index) { |
||||
|
uni.previewImage({ urls: item.imageList || [], current: item.imageList[index] }) |
||||
|
}, |
||||
|
playVideo(item) { |
||||
|
if (!item.videoUrl) return |
||||
|
uni.navigateTo({ url: '/package1/ieBrowser/videoPreview?url=' + encodeURIComponent(item.videoUrl) }) |
||||
|
} |
||||
|
} |
||||
|
} |
||||
|
</script> |
||||
|
|
||||
|
<style lang="scss" scoped> |
||||
|
page { background: #f7f9ff; } |
||||
|
.space-page { min-height: 100vh; padding: 0 32rpx 80rpx; box-sizing: border-box; color: #161b2e; background: radial-gradient(circle at 50% 8%, rgba(169,255,231,.36), transparent 320rpx), linear-gradient(180deg, #fbfdff, #eef4ff 62%, #fff4e8); } |
||||
|
.nav { display: flex; align-items: center; padding-bottom: 16rpx; } |
||||
|
.back { width: 64rpx; height: 64rpx; line-height: 58rpx; text-align: center; border-radius: 50%; background: rgba(255,255,255,.7); font-size: 44rpx; color: rgba(22,27,46,.66); box-shadow: 0 10rpx 26rpx rgba(96,112,160,.12); } |
||||
|
.nav-title { margin-left: 20rpx; font-size: 32rpx; font-weight: 800; } |
||||
|
.owner-card { margin-top: 10rpx; padding: 34rpx; text-align: center; border-radius: 36rpx; background: rgba(255,255,255,.66); border: 1rpx solid rgba(255,255,255,.8); box-shadow: 0 20rpx 60rpx rgba(96,112,160,.12); } |
||||
|
.owner-avatar, .owner-avatar-img { width: 120rpx; height: 120rpx; margin: 0 auto; border-radius: 50%; } |
||||
|
.owner-avatar { line-height: 120rpx; text-align: center; background: linear-gradient(145deg, #effffb, #a9ffe7); font-size: 40rpx; font-weight: 800; color: #11162a; } |
||||
|
.owner-name { margin-top: 18rpx; font-size: 34rpx; font-weight: 800; } |
||||
|
.owner-mode { margin-top: 8rpx; color: #6c69d8; font-size: 23rpx; } |
||||
|
.moment-empty { margin-top: 60rpx; text-align: center; color: rgba(22,27,46,.4); font-size: 25rpx; } |
||||
|
.moment-card { margin-top: 24rpx; padding: 26rpx; border-radius: 28rpx; background: rgba(255,255,255,.85); border: 1rpx solid rgba(255,255,255,.9); box-shadow: 0 12rpx 32rpx rgba(96,112,160,.08); } |
||||
|
.moment-time { color: rgba(22,27,46,.42); font-size: 21rpx; } |
||||
|
.moment-text { margin-top: 14rpx; font-size: 27rpx; line-height: 42rpx; word-break: break-all; } |
||||
|
.moment-grid { display: flex; flex-wrap: wrap; margin-top: 16rpx; } |
||||
|
.moment-grid image { width: 196rpx; height: 196rpx; margin: 0 10rpx 10rpx 0; border-radius: 16rpx; background: rgba(22,27,46,.05); } |
||||
|
.moment-grid.g1 image { width: 400rpx; height: 400rpx; border-radius: 22rpx; } |
||||
|
.moment-grid.g2 image { width: 300rpx; height: 300rpx; } |
||||
|
.moment-video { position: relative; margin-top: 16rpx; width: 440rpx; height: 290rpx; border-radius: 22rpx; overflow: hidden; background: #1a2034; } |
||||
|
.moment-video-poster, .moment-video-holder { width: 100%; height: 100%; } |
||||
|
.moment-play { position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); width: 84rpx; height: 84rpx; line-height: 84rpx; text-align: center; border-radius: 50%; color: #fff; background: rgba(0,0,0,.45); font-size: 32rpx; } |
||||
|
.load-line { margin-top: 26rpx; text-align: center; color: rgba(22,27,46,.36); font-size: 22rpx; } |
||||
|
</style> |
||||
Loading…
Reference in new issue