useredirectto
This commit is contained in:
WanP
322
src/pages/post.vue
Normal file
322
src/pages/post.vue
Normal file
@@ -0,0 +1,322 @@
|
||||
<template>
|
||||
<view class="page">
|
||||
|
||||
<Head></Head>
|
||||
<!-- 内容区 -->
|
||||
<view class="content">
|
||||
<!-- 动态区域 -->
|
||||
<view class="moment">
|
||||
<!-- 用户栏 -->
|
||||
<view class="userbar">
|
||||
<image :src="post.userImg" mode="aspectFill" class="userimg" alt="用户头像" />
|
||||
<text class="username">{{ post.userName }}</text>
|
||||
<button class="follow" @tap="common.openapp">
|
||||
<uni-icons v-if="post.isfollow" type="checkmarkempty" size="20" color="#333"></uni-icons>
|
||||
<text v-else>关注</text>
|
||||
</button>
|
||||
</view>
|
||||
|
||||
<!-- 轮播图 -->
|
||||
<swiper v-if="post.imgs && post.imgs.length" :indicator-dots="false" :autoplay="false" :interval="3000"
|
||||
:duration="1000" :circular="true" class="swiper-banner" @change="onChange">
|
||||
<swiper-item v-for="(item, i) in post.imgs" :key="i">
|
||||
<view class="swiper-center">
|
||||
<image v-if="item.type === 'img'" :src="item.src" class="swiper-item" mode="aspectFit" alt="动态图片内容" />
|
||||
<video v-else :src="item.src" class="swiper-item" object-fit="contain" muted style="pointer-events:none;"
|
||||
alt="动态视频内容" />
|
||||
<cover-view class="swiper-mask" @tap="common.openapp">
|
||||
</cover-view>
|
||||
</view>
|
||||
</swiper-item>
|
||||
</swiper>
|
||||
|
||||
<!-- 外部指示点:2个及以上才显示 -->
|
||||
<view v-if="post.imgs && post.imgs.length > 1" class="dots-bar">
|
||||
<view v-for="(dot, i) in post.imgs" :key="i" class="dot" :class="{ active: i === current }" />
|
||||
</view>
|
||||
|
||||
<!-- 底部文案 -->
|
||||
<view v-if="post.copywriting && post.date" class="momentbottom">
|
||||
<text class="copywriting">{{ post.copywriting }}</text>
|
||||
<uni-dateformat :date="Date.parse(post.date.replace(/-/g, '/'))" :threshold="[0, 0]" format="yyyy-MM-dd"
|
||||
class="date-text" />
|
||||
</view>
|
||||
|
||||
</view>
|
||||
|
||||
</view>
|
||||
|
||||
<!-- 评论区域 + 互动区域 -->
|
||||
<Comments :comments="post.comments" :showInteraction="true" :collectsum="post.collectsum" :likesum="post.likesum" />
|
||||
|
||||
<!-- Findmore -->
|
||||
<Findmore />
|
||||
|
||||
</view>
|
||||
</template>
|
||||
|
||||
<script setup>
|
||||
import { ref } from 'vue'
|
||||
import { onLoad } from '@dcloudio/uni-app'
|
||||
import { useCommonStore } from '@/stores/common.js'
|
||||
import Head from '@/pages/head/head.vue'
|
||||
import Comments from '@/pages/comments/comments.vue'
|
||||
import Findmore from '@/pages/findmore/findmore.vue'
|
||||
const common = useCommonStore()
|
||||
|
||||
// 当前 dot
|
||||
const current = ref(0)
|
||||
const onChange = e => current.value = e.detail.current
|
||||
|
||||
// 动态数据
|
||||
const post = ref({})
|
||||
|
||||
// 模拟获取数据函数
|
||||
const fetchPostData = async () => {
|
||||
try {
|
||||
// 使用uni.request替代axios
|
||||
const response = await new Promise((resolve, reject) => {
|
||||
uni.request({
|
||||
url: '', // 这里可以填写实际API地址
|
||||
method: 'GET',
|
||||
timeout: 1000,
|
||||
success: resolve,
|
||||
fail: reject
|
||||
})
|
||||
})
|
||||
|
||||
// 处理数据...
|
||||
const mockData = {
|
||||
userId: 1000011,
|
||||
userName: 'Kun Chang-Min',
|
||||
userImg: '/static/logo.png',
|
||||
date: '2024-12-03',
|
||||
copywriting: '智能体是人类智慧的延伸，它们将成为我们最强大的工具，也是最亲密的朋友。',
|
||||
isfollow: false,
|
||||
collectsum: 114514,
|
||||
likesum: 114514,
|
||||
imgs: [
|
||||
{ type: 'img', src: '/static/logo.png' },
|
||||
{ type: 'video', src: '/static/videos/beauty.mp4' },
|
||||
{ type: 'img', src: '/static/imgs/comment.webp' },
|
||||
{ type: 'img', src: '/static/imgs/image-138.webp' }
|
||||
],
|
||||
comments: [
|
||||
{
|
||||
id: 101,
|
||||
userName: 'Brad Lewin',
|
||||
atUsers: ['JackyLove'],
|
||||
content: '今天天气真不错~',
|
||||
date: '2024-12-01',
|
||||
likeCount: 99999,
|
||||
showChild: false,
|
||||
children: [
|
||||
{ id: 201, userName: 'Alice', content: '快智能体是人类智慧的延伸，它们将成为我们最强大的工具，也是最亲密的朋友。智能体是人类智慧的延伸', atUsers: ['Brad Lewin', 'JackyLove'], date: '2024-12-01', likeCount: 2 },
|
||||
{ id: 202, userName: 'Bob', content: '我同意你的观点。我记得喜欢这个版本。这个新版本对我来说Nothing好处', atUsers: [], date: '2024-12-01', likeCount: 1 }
|
||||
]
|
||||
},
|
||||
{
|
||||
id: 102,
|
||||
userName: 'Leanne Simpson',
|
||||
atUsers: ['Theshy'],
|
||||
content: '有人一起开黑吗？',
|
||||
date: '2024-12-02',
|
||||
likeCount: 1145140,
|
||||
showChild: false,
|
||||
children: [
|
||||
{ id: 203, userName: 'Carol', content: '带我一个', atUsers: [], date: '2024-12-02', likeCount: 3 }
|
||||
]
|
||||
},
|
||||
{
|
||||
id: 103,
|
||||
userName: 'Tom Hardy',
|
||||
atUsers: [],
|
||||
content: '主评论3：分享一张今晚的月亮。',
|
||||
date: '2024-12-03',
|
||||
likeCount: 999,
|
||||
showChild: false,
|
||||
children: []
|
||||
}
|
||||
]
|
||||
}
|
||||
|
||||
// 将模拟数据赋值给post
|
||||
post.value = mockData
|
||||
|
||||
} catch (error) {
|
||||
console.error('获取数据失败:', error)
|
||||
// 如果获取失败，使用默认数据
|
||||
post.value = {
|
||||
userId: 1000011,
|
||||
userName: 'Kun Chang-Min',
|
||||
userImg: '/static/logo.png',
|
||||
date: '2024-12-03',
|
||||
copywriting: '智能体是人类智慧的延伸，它们将成为我们最强大的工具，也是最亲密的朋友。',
|
||||
isfollow: false,
|
||||
collectsum: 114514,
|
||||
likesum: 114514,
|
||||
imgs: [
|
||||
{ type: 'img', src: '/static/logo.png' }
|
||||
],
|
||||
comments: []
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
// 组件挂载时获取数据
|
||||
onLoad(() => {
|
||||
fetchPostData()
|
||||
})
|
||||
|
||||
</script>
|
||||
|
||||
<style scoped>
|
||||
page,
|
||||
.page {
|
||||
width: 100%;
|
||||
max-width: 430px;
|
||||
height: auto;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
margin: 0 auto;
|
||||
position: relative;
|
||||
}
|
||||
|
||||
.content {
|
||||
flex-shrink: 0;
|
||||
overflow: hidden;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
}
|
||||
|
||||
.moment {
|
||||
width: 100%;
|
||||
flex-shrink: 0;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
box-sizing: border-box;
|
||||
}
|
||||
|
||||
.userbar {
|
||||
width: 100%;
|
||||
padding: 16px 16px 8px;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
box-sizing: border-box;
|
||||
gap: 10px
|
||||
}
|
||||
|
||||
.userimg {
|
||||
width: 34px;
|
||||
height: 34px;
|
||||
border-radius: 50%;
|
||||
}
|
||||
|
||||
.username {
|
||||
flex: 1;
|
||||
font-size: 17px;
|
||||
font-weight: 600;
|
||||
color: #333
|
||||
}
|
||||
|
||||
.follow {
|
||||
width: 60px;
|
||||
height: 32px;
|
||||
flex-shrink: 0;
|
||||
font-size: 14px;
|
||||
font-weight: 600;
|
||||
line-height: 32px;
|
||||
border-radius: 8px;
|
||||
background-color: rgba(51, 51, 51, .05);
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
}
|
||||
|
||||
.follow::after {
|
||||
border: none;
|
||||
}
|
||||
|
||||
.swiper-banner {
|
||||
width: 100%;
|
||||
height: 357px
|
||||
}
|
||||
|
||||
swiper-item {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center
|
||||
}
|
||||
|
||||
.swiper-center {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center
|
||||
}
|
||||
|
||||
.swiper-item {
|
||||
width: 100%;
|
||||
height: 100%
|
||||
}
|
||||
|
||||
.swiper-center {
|
||||
position: relative;
|
||||
}
|
||||
|
||||
.swiper-mask {
|
||||
position: absolute;
|
||||
left: 0;
|
||||
top: 0;
|
||||
right: 0;
|
||||
bottom: 0;
|
||||
background: transparent;
|
||||
}
|
||||
|
||||
.dots-bar {
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
gap: 6px;
|
||||
padding: 8px 0 0;
|
||||
}
|
||||
|
||||
.dot {
|
||||
width: 6px;
|
||||
height: 6px;
|
||||
border-radius: 50%;
|
||||
background: rgba(0, 0, 0, .2);
|
||||
transition: background .3s
|
||||
}
|
||||
|
||||
.dot.active {
|
||||
background: #333
|
||||
}
|
||||
|
||||
.momentbottom {
|
||||
padding: 16px 16px 0;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 10px;
|
||||
}
|
||||
|
||||
.copywriting {
|
||||
font-size: 15px;
|
||||
font-weight: normal;
|
||||
font-stretch: normal;
|
||||
font-style: normal;
|
||||
line-height: normal;
|
||||
letter-spacing: normal;
|
||||
text-align: left;
|
||||
color: #000;
|
||||
}
|
||||
|
||||
.date-text {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
height: 17px;
|
||||
line-height: 17px;
|
||||
font-size: 12px;
|
||||
color: #b1aeb2;
|
||||
}
|
||||
</style>
|
||||
Reference in New Issue
Block a user