changetousecli
This commit is contained in:
WanP
482
src/pages/components/comments/comments.vue
Normal file
482
src/pages/components/comments/comments.vue
Normal file
@@ -0,0 +1,482 @@
|
||||
<template>
|
||||
<!-- 评论区域 -->
|
||||
<view v-if="comments" class="comment">
|
||||
<!-- 评论头部信息 -->
|
||||
<view class="commenthead">
|
||||
<text class="commentcount">{{ totalCommentCount }}条评论</text>
|
||||
<view class="headswitch">
|
||||
<text class="inact" @tap="handleOpenApp">默认</text>
|
||||
<view class="act" @tap="handleOpenApp">最新</view>
|
||||
</view>
|
||||
</view>
|
||||
|
||||
<!-- 评论主体 -->
|
||||
<view v-for="commentItem in highlightedList" :key="commentItem.id" class="commentdetail" @tap="onDelegateTap">
|
||||
<!-- 头像 -->
|
||||
<view class="commentdetailleft">
|
||||
<image src="/static/logo.png" mode="aspectFill" alt="用户头像"></image>
|
||||
</view>
|
||||
|
||||
<!-- 右侧主评论 + 子评论 + 展开条 -->
|
||||
<view class="commentdetailright">
|
||||
<!-- 父评论 -->
|
||||
<view class="maincomment">
|
||||
<view class="commentdetailcontent">
|
||||
<text class="commentusername">{{ commentItem.userName }}</text>
|
||||
<rich-text class="commentusercontent" :nodes="commentItem.renderNodes" />
|
||||
<view class="date-reply">
|
||||
<uni-dateformat :date="Date.parse(commentItem.date.replace(/-/g, '/'))" :threshold="[0, 0]"
|
||||
format="yyyy-MM-dd" class="date-text" />
|
||||
<text class="replytext" @tap.stop="handleOpenApp">回复</text>
|
||||
</view>
|
||||
</view>
|
||||
<view class="spacerview"></view>
|
||||
<view class="commentlike">
|
||||
<uni-icons type="heart" size="16" color="#999" @tap.stop="handleOpenApp"></uni-icons>
|
||||
<text class="commentlikecount">{{ formatCount(commentItem.likeCount) }}</text>
|
||||
</view>
|
||||
</view>
|
||||
|
||||
<!-- 子评论列表（仅展开时显示） -->
|
||||
<view v-if="commentItem.showChild" class="commentchildcontainer">
|
||||
<view v-for="child in commentItem.children" :key="child.id" class="commentchild">
|
||||
<view class="commentchildleft">
|
||||
<image src="/static/logo.png" mode="aspectFill" alt="用户头像"></image>
|
||||
</view>
|
||||
<view class="commentchildright">
|
||||
<text class="commentusername">{{ child.userName }}</text>
|
||||
<rich-text class="commentusercontent" :nodes="child.renderNodes" />
|
||||
<view class="date-reply">
|
||||
<uni-dateformat :date="Date.parse(child.date.replace(/-/g, '/'))" :threshold="[0, 0]"
|
||||
format="yyyy-MM-dd" class="date-text" />
|
||||
<text class="replytext" @tap.stop="handleOpenApp">回复</text>
|
||||
</view>
|
||||
</view>
|
||||
<view class="commentlike">
|
||||
<uni-icons type="heart" size="16" color="#999" @tap.stop="handleOpenApp"></uni-icons>
|
||||
<text class="commentlikecount">{{ formatCount(child.likeCount) }}</text>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
|
||||
<!-- 展开/收起按钮 -->
|
||||
<view v-if="commentItem.children.length" class="expandcomment">
|
||||
<view style="width:20px;height:1px;background:rgba(65,60,67,.2)"></view>
|
||||
<text class="expandcommenttext" :data-cid="commentItem.id">
|
||||
{{ commentItem.showChild ? '收起' : `展开${commentItem.children.length}条回复` }}
|
||||
</text>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
|
||||
</view>
|
||||
|
||||
<!-- 占位 -->
|
||||
<view class="spacerview"></view>
|
||||
|
||||
<!-- 互动区域 -->
|
||||
<view v-if="showInteraction" class="interaction">
|
||||
<view class="editarea" @tap="handleOpenApp">
|
||||
<image src="/static/imgs/editicon/icon@2x.webp" mode="aspectFit" class="editicon" alt="编辑标签"></image>
|
||||
<text class="edittext">快来互动吧…</text>
|
||||
</view>
|
||||
<view class="spacerview"></view>
|
||||
<view class="collection" @tap="handleOpenApp">
|
||||
<image src="@/static/imgs/staricon/icon@3x.webp" mode="aspectFit" class="collectionicon" alt="收藏标签"></image>
|
||||
<text class="collectioncount">{{ formatCount(collectsum) }}</text>
|
||||
</view>
|
||||
<view class="spacerview"></view>
|
||||
<view class="like" @tap="handleOpenApp">
|
||||
<image src="@/static/imgs/likeicon/icon@3x.webp" mode="aspectFit" class="likeicon" alt="点赞标签"></image>
|
||||
<text class="likecount">{{ formatCount(likesum) }}</text>
|
||||
</view>
|
||||
</view>
|
||||
</template>
|
||||
|
||||
<script setup>
|
||||
import { ref, computed } from 'vue'
|
||||
import { useCommonStore } from '@/stores/common.js'
|
||||
|
||||
const props = defineProps({
|
||||
comments: {
|
||||
type: Array,
|
||||
default: () => []
|
||||
},
|
||||
showInteraction: {
|
||||
type: Boolean,
|
||||
default: false
|
||||
},
|
||||
collectsum: {
|
||||
type: Number,
|
||||
default: 0
|
||||
},
|
||||
likesum: {
|
||||
type: Number,
|
||||
default: 0
|
||||
}
|
||||
})
|
||||
|
||||
const emit = defineEmits(['comment-tap'])
|
||||
|
||||
const common = useCommonStore()
|
||||
|
||||
// 处理评论点击事件
|
||||
function onDelegateTap(e) {
|
||||
const cid = e.target?.dataset?.cid
|
||||
if (!cid || !props.comments) return
|
||||
const item = props.comments.find(v => v.id == cid)
|
||||
if (!item || !item.children || !item.children.length) return
|
||||
item.showChild = !item.showChild
|
||||
}
|
||||
|
||||
// 处理打开应用事件
|
||||
function handleOpenApp() {
|
||||
common.openapp()
|
||||
}
|
||||
|
||||
// 格式化数字显示
|
||||
function formatCount(count) {
|
||||
return common.formatCount(count)
|
||||
}
|
||||
|
||||
// 处理评论数据，添加渲染节点
|
||||
const highlightedList = computed(() =>
|
||||
props.comments ? props.comments.map(c => ({
|
||||
...c,
|
||||
renderNodes: [
|
||||
...common.atUsersToNodes(c.atUsers),
|
||||
{ type: 'text', text: c.content }
|
||||
],
|
||||
children: c.children ? c.children.map(child => ({
|
||||
...child,
|
||||
renderNodes: [
|
||||
...common.atUsersToNodes(child.atUsers),
|
||||
{ type: 'text', text: child.content }
|
||||
]
|
||||
})) : []
|
||||
})) : []
|
||||
)
|
||||
|
||||
// 总评论数 = 主评论条数 + 所有子评论条数
|
||||
const totalCommentCount = computed(() =>
|
||||
props.comments ? props.comments.reduce(
|
||||
(sum, c) => sum + 1 + (c.children ? c.children.length : 0),
|
||||
0
|
||||
) : 0
|
||||
)
|
||||
|
||||
</script>
|
||||
|
||||
<style scoped>
|
||||
.spacerview {
|
||||
flex: 1;
|
||||
height: 0;
|
||||
pointer-events: none
|
||||
}
|
||||
|
||||
.comment {
|
||||
padding: 16px;
|
||||
}
|
||||
|
||||
.commenthead {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
width: 100%;
|
||||
height: 29px;
|
||||
margin-bottom: 28px;
|
||||
}
|
||||
|
||||
.commentcount {
|
||||
width: fit-content;
|
||||
height: 100%;
|
||||
font-family: PingFangSC;
|
||||
font-size: 14px;
|
||||
font-weight: 500;
|
||||
font-stretch: normal;
|
||||
font-style: normal;
|
||||
line-height: normal;
|
||||
letter-spacing: normal;
|
||||
text-align: left;
|
||||
color: #333;
|
||||
}
|
||||
|
||||
.headswitch {
|
||||
width: 102px;
|
||||
height: 100%;
|
||||
flex-grow: 0;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: space-around;
|
||||
border-radius: 24px;
|
||||
padding: 2px;
|
||||
box-sizing: border-box;
|
||||
background-color: #f0eef1;
|
||||
}
|
||||
|
||||
.headswitch .inact,
|
||||
.act {
|
||||
width: 48px;
|
||||
height: 23px;
|
||||
font-size: 12px;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
font-family: PingFangSC;
|
||||
font-weight: normal;
|
||||
font-stretch: normal;
|
||||
font-style: normal;
|
||||
line-height: normal;
|
||||
letter-spacing: normal;
|
||||
color: #110c13;
|
||||
}
|
||||
|
||||
.headswitch .inact {
|
||||
border-radius: 24px;
|
||||
background-color: #fff;
|
||||
}
|
||||
|
||||
.commentdetail {
|
||||
width: 100%;
|
||||
margin-bottom: 12px;
|
||||
display: flex;
|
||||
}
|
||||
|
||||
.commentdetailleft {
|
||||
width: 31.7px;
|
||||
height: 31.7px;
|
||||
margin-right: 12.2px;
|
||||
}
|
||||
|
||||
.commentdetailleft image {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
border-radius: 50%;
|
||||
}
|
||||
|
||||
.commentdetailright {
|
||||
flex: 1;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 8px;
|
||||
}
|
||||
|
||||
.maincomment {
|
||||
display: flex;
|
||||
flex: 1;
|
||||
flex-direction: row;
|
||||
}
|
||||
|
||||
.commentdetailcontent {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
}
|
||||
|
||||
.commentusername {
|
||||
width: fit-content;
|
||||
height: 18px;
|
||||
font-family: PingFangSC;
|
||||
font-size: 13px;
|
||||
font-weight: normal;
|
||||
font-stretch: normal;
|
||||
font-style: normal;
|
||||
line-height: normal;
|
||||
letter-spacing: normal;
|
||||
text-align: left;
|
||||
color: #b1aeb2;
|
||||
}
|
||||
|
||||
.commentusercontent {
|
||||
font-family: PingFangSC;
|
||||
font-size: 13px;
|
||||
font-weight: normal;
|
||||
font-stretch: normal;
|
||||
font-style: normal;
|
||||
line-height: normal;
|
||||
letter-spacing: normal;
|
||||
text-align: left;
|
||||
margin: 4px 0 10px;
|
||||
color: #000;
|
||||
}
|
||||
|
||||
.date-reply {
|
||||
height: 17px;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 8px;
|
||||
}
|
||||
|
||||
.date-text,
|
||||
.replytext {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
height: 17px;
|
||||
line-height: 17px;
|
||||
font-size: 12px;
|
||||
}
|
||||
|
||||
.date-text {
|
||||
color: #b1aeb2;
|
||||
}
|
||||
|
||||
.replytext {
|
||||
color: #918e93;
|
||||
}
|
||||
|
||||
.commentlike {
|
||||
height: 43px;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
gap: 6.7px;
|
||||
padding: 2px 0;
|
||||
box-sizing: border-box;
|
||||
}
|
||||
|
||||
.commentlikecount {
|
||||
min-width: 40px;
|
||||
height: 17px;
|
||||
font-family: PingFangSC;
|
||||
font-size: 12px;
|
||||
font-weight: normal;
|
||||
font-stretch: normal;
|
||||
font-style: normal;
|
||||
line-height: 17px;
|
||||
letter-spacing: normal;
|
||||
text-align: center;
|
||||
padding: 0 4px;
|
||||
color: #918e93;
|
||||
}
|
||||
|
||||
.commentchildcontainer {
|
||||
width: 100%;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
margin: 14px 0 0;
|
||||
}
|
||||
|
||||
.commentchild {
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
margin-bottom: 8px;
|
||||
}
|
||||
|
||||
.commentchildleft {
|
||||
width: 23.5px;
|
||||
height: 23.5px;
|
||||
margin-right: 8.2px;
|
||||
}
|
||||
|
||||
.commentchildleft image {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
border-radius: 50%;
|
||||
}
|
||||
|
||||
.commentchildright {
|
||||
flex: 1;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
}
|
||||
|
||||
.expandcomment {
|
||||
width: 96px;
|
||||
height: 17px;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
flex-direction: row;
|
||||
gap: 8px;
|
||||
}
|
||||
|
||||
.expandcommenttext {
|
||||
flex: 1;
|
||||
font-family: PingFangSC;
|
||||
font-size: 12px;
|
||||
font-weight: normal;
|
||||
font-stretch: normal;
|
||||
font-style: normal;
|
||||
line-height: normal;
|
||||
letter-spacing: normal;
|
||||
text-align: left;
|
||||
color: #110c13;
|
||||
}
|
||||
|
||||
.interaction {
|
||||
width: 100%;
|
||||
border: solid 1px #faf9fb;
|
||||
background-color: #faf9fb;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
padding: 11.5px 16px;
|
||||
flex-direction: row;
|
||||
box-sizing: border-box;
|
||||
}
|
||||
|
||||
.editarea {
|
||||
flex: 1;
|
||||
height: 40px;
|
||||
background-color: #fff;
|
||||
border-radius: 24px;
|
||||
gap: 12px;
|
||||
padding: 0 20px;
|
||||
box-sizing: border-box;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
.editicon {
|
||||
width: 13.3px;
|
||||
height: 14.6px;
|
||||
flex-shrink: 0;
|
||||
align-self: center;
|
||||
}
|
||||
|
||||
.edittext {
|
||||
flex: 1;
|
||||
flex-grow: 0;
|
||||
font-family: PingFangSC;
|
||||
font-size: 14px;
|
||||
font-weight: normal;
|
||||
font-stretch: normal;
|
||||
font-style: normal;
|
||||
line-height: 40px;
|
||||
letter-spacing: normal;
|
||||
text-align: left;
|
||||
color: #918e93;
|
||||
white-space: nowrap;
|
||||
}
|
||||
|
||||
.collection,
|
||||
.like {
|
||||
height: 40px;
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
align-items: center;
|
||||
gap: 5px;
|
||||
}
|
||||
|
||||
.collectionicon,
|
||||
.likeicon {
|
||||
width: 24px;
|
||||
height: 24px;
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
.collectioncount,
|
||||
.likecount {
|
||||
height: 17px;
|
||||
font-family: SFPro;
|
||||
font-size: 17px;
|
||||
font-weight: 500;
|
||||
font-stretch: normal;
|
||||
font-style: normal;
|
||||
line-height: normal;
|
||||
letter-spacing: normal;
|
||||
text-align: left;
|
||||
color: #000;
|
||||
}
|
||||
</style>
|
||||
42
src/pages/components/findmore/findmore.vue
Normal file
42
src/pages/components/findmore/findmore.vue
Normal file
@@ -0,0 +1,42 @@
|
||||
<template>
|
||||
<view class="findmore" @tap="common.openapp">
|
||||
<text class="openapptext">APP查看更多</text>
|
||||
</view>
|
||||
</template>
|
||||
|
||||
<script setup>
|
||||
import { useCommonStore } from '@/stores/common.js'
|
||||
const common = useCommonStore()
|
||||
</script>
|
||||
|
||||
<style scoped>
|
||||
.findmore {
|
||||
position: fixed;
|
||||
bottom: 88px;
|
||||
left: 50%;
|
||||
transform: translateX(-50%);
|
||||
width: 177px;
|
||||
height: 52px;
|
||||
border-radius: 43px;
|
||||
background-image: linear-gradient(97deg, #7c45ed 1%, #7c68ef 20%, #7bd8f8 92%);
|
||||
z-index: 5;
|
||||
text-align: center;
|
||||
line-height: 52px;
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
.openapptext {
|
||||
width: 96px;
|
||||
height: 22px;
|
||||
font-family: PingFangSC;
|
||||
font-size: 16px;
|
||||
font-weight: 600;
|
||||
font-stretch: normal;
|
||||
font-style: normal;
|
||||
line-height: normal;
|
||||
letter-spacing: normal;
|
||||
text-align: center;
|
||||
color: #fff;
|
||||
display: inline-block;
|
||||
}
|
||||
</style>
|
||||
54
src/pages/components/head/head.vue
Normal file
54
src/pages/components/head/head.vue
Normal file
@@ -0,0 +1,54 @@
|
||||
<template>
|
||||
<view class="head">
|
||||
<image src="/static/imgs/h5logo/h5logo@3x.webp" mode="aspectFit" class="applogo" alt="官网logo" />
|
||||
<view class="spacerview"></view>
|
||||
<view class="download" @tap="common.download">下载应用</view>
|
||||
</view>
|
||||
</template>
|
||||
|
||||
<script setup>
|
||||
import { useCommonStore } from '@/stores/common.js'
|
||||
const common = useCommonStore()
|
||||
</script>
|
||||
|
||||
<style scoped>
|
||||
.head {
|
||||
width: 100%;
|
||||
height: 57px;
|
||||
padding: 14px 16px;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
background: #fff;
|
||||
box-sizing: border-box;
|
||||
flex-shrink: 0;
|
||||
border-bottom: 1px solid rgba(0, 0, 0, .08);
|
||||
margin: 0 auto;
|
||||
z-index: 1;
|
||||
}
|
||||
|
||||
.applogo {
|
||||
width: 128px;
|
||||
height: 33px;
|
||||
}
|
||||
|
||||
.spacerview {
|
||||
flex: 1;
|
||||
height: 0;
|
||||
pointer-events: none
|
||||
}
|
||||
|
||||
.download {
|
||||
width: 97px;
|
||||
height: 35px;
|
||||
border-radius: 29px;
|
||||
background-image: linear-gradient(156deg, #7c45ed -1%, #7c68ef 19%, #7bd8f8 97%);
|
||||
color: #fff;
|
||||
font-family: PingFangSC;
|
||||
font-size: 14px;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
cursor: pointer;
|
||||
}
|
||||
</style>
|
||||
631
src/pages/components/postpage/postpage.vue
Normal file
631
src/pages/components/postpage/postpage.vue
Normal file
@@ -0,0 +1,631 @@
|
||||
<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>
|
||||
|
||||
<!-- 外部指示点 -->
|
||||
<view v-if="post.imgs && post.imgs.length" 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"
|
||||
/>
|
||||
|
||||
|
||||
</view>
|
||||
</template>
|
||||
|
||||
<script setup>
|
||||
import { ref, onMounted } from 'vue'
|
||||
import { useCommonStore } from '@/stores/common.js'
|
||||
import Head from '@/pages/components/head/head.vue'
|
||||
import Comments from '@/pages/components/comments/comments.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: '智能体是人类智慧的延伸，它们将成为我们最强大的工具，也是最亲密的朋友。',
|
||||
current: 0,
|
||||
isfollow: false,
|
||||
collectsum: 114514,
|
||||
likesum: 114514,
|
||||
imgs: [
|
||||
{ type: 'img', src: '/static/logo.png' },
|
||||
{ type: 'video', src: '/static/videos/啊米诺斯.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: '智能体是人类智慧的延伸，它们将成为我们最强大的工具，也是最亲密的朋友。',
|
||||
current: 0,
|
||||
isfollow: false,
|
||||
collectsum: 114514,
|
||||
likesum: 114514,
|
||||
imgs: [
|
||||
{ type: 'img', src: '/static/logo.png' }
|
||||
],
|
||||
comments: []
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
// 组件挂载时获取数据
|
||||
onMounted(() => {
|
||||
fetchPostData()
|
||||
})
|
||||
|
||||
</script>
|
||||
|
||||
<style scoped>
|
||||
page,
|
||||
.page {
|
||||
display: flex;
|
||||
position: relative;
|
||||
flex-direction: column;
|
||||
margin: 0;
|
||||
height: 100vh;
|
||||
}
|
||||
|
||||
.spacerview {
|
||||
flex: 1;
|
||||
height: 0;
|
||||
pointer-events: none
|
||||
}
|
||||
|
||||
.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-family: PingFangSC;
|
||||
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;
|
||||
font-family: PingFangSC;
|
||||
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-family: PingFangSC;
|
||||
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 {
|
||||
color: #b1aeb2;
|
||||
}
|
||||
|
||||
.comment {
|
||||
padding: 16px;
|
||||
}
|
||||
|
||||
.commenthead {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
width: 100%;
|
||||
height: 29px;
|
||||
margin-bottom: 28px;
|
||||
}
|
||||
|
||||
.commentcount {
|
||||
width: fit-content;
|
||||
height: 100%;
|
||||
font-family: PingFangSC;
|
||||
font-size: 14px;
|
||||
font-weight: 500;
|
||||
font-stretch: normal;
|
||||
font-style: normal;
|
||||
line-height: normal;
|
||||
letter-spacing: normal;
|
||||
text-align: left;
|
||||
color: #333;
|
||||
}
|
||||
|
||||
.headswitch {
|
||||
width: 102px;
|
||||
height: 100%;
|
||||
flex-grow: 0;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: space-around;
|
||||
border-radius: 24px;
|
||||
padding: 2px;
|
||||
box-sizing: border-box;
|
||||
background-color: #f0eef1;
|
||||
}
|
||||
|
||||
.headswitch .inact,
|
||||
.act {
|
||||
width: 48px;
|
||||
height: 23px;
|
||||
font-size: 12px;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
font-family: PingFangSC;
|
||||
font-weight: normal;
|
||||
font-stretch: normal;
|
||||
font-style: normal;
|
||||
line-height: normal;
|
||||
letter-spacing: normal;
|
||||
color: #110c13;
|
||||
}
|
||||
|
||||
.headswitch .inact {
|
||||
border-radius: 24px;
|
||||
background-color: #fff;
|
||||
}
|
||||
|
||||
.commentdetail {
|
||||
width: 100%;
|
||||
margin-bottom: 12px;
|
||||
display: flex;
|
||||
}
|
||||
|
||||
.commentdetailleft {
|
||||
width: 31.7px;
|
||||
height: 31.7px;
|
||||
margin-right: 12.2px;
|
||||
}
|
||||
|
||||
.commentdetailleft image {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
border-radius: 50%;
|
||||
}
|
||||
|
||||
.commentdetailright {
|
||||
flex: 1;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 8px;
|
||||
}
|
||||
|
||||
.maincomment {
|
||||
display: flex;
|
||||
flex: 1;
|
||||
flex-direction: row;
|
||||
}
|
||||
|
||||
.commentdetailcontent {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
}
|
||||
|
||||
.commentusername {
|
||||
width: fit-content;
|
||||
height: 18px;
|
||||
font-family: PingFangSC;
|
||||
font-size: 13px;
|
||||
font-weight: normal;
|
||||
font-stretch: normal;
|
||||
font-style: normal;
|
||||
line-height: normal;
|
||||
letter-spacing: normal;
|
||||
text-align: left;
|
||||
color: #b1aeb2;
|
||||
}
|
||||
|
||||
.commentusercontent {
|
||||
font-family: PingFangSC;
|
||||
font-size: 13px;
|
||||
font-weight: normal;
|
||||
font-stretch: normal;
|
||||
font-style: normal;
|
||||
line-height: normal;
|
||||
letter-spacing: normal;
|
||||
text-align: left;
|
||||
margin: 4px 0 10px;
|
||||
color: #000;
|
||||
}
|
||||
|
||||
.date-reply {
|
||||
height: 17px;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 8px;
|
||||
}
|
||||
|
||||
.date-text,
|
||||
.replytext {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
height: 17px;
|
||||
line-height: 17px;
|
||||
font-size: 12px;
|
||||
}
|
||||
|
||||
.date-text {
|
||||
color: #b1aeb2;
|
||||
}
|
||||
|
||||
.replytext {
|
||||
color: #918e93;
|
||||
}
|
||||
|
||||
.commentlike {
|
||||
height: 43px;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
gap: 6.7px;
|
||||
padding: 2px 0;
|
||||
box-sizing: border-box;
|
||||
}
|
||||
|
||||
.commentlikecount {
|
||||
min-width: 40px;
|
||||
height: 17px;
|
||||
font-family: PingFangSC;
|
||||
font-size: 12px;
|
||||
font-weight: normal;
|
||||
font-stretch: normal;
|
||||
font-style: normal;
|
||||
line-height: 17px;
|
||||
letter-spacing: normal;
|
||||
text-align: center;
|
||||
padding: 0 4px;
|
||||
color: #918e93;
|
||||
}
|
||||
|
||||
.commentchildcontainer {
|
||||
width: 100%;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
margin: 14px 0 0;
|
||||
}
|
||||
|
||||
.commentchild {
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
margin-bottom: 8px;
|
||||
}
|
||||
|
||||
.commentchildleft {
|
||||
width: 23.5px;
|
||||
height: 23.5px;
|
||||
margin-right: 8.2px;
|
||||
}
|
||||
|
||||
.commentchildleft image {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
border-radius: 50%;
|
||||
}
|
||||
|
||||
.commentchildright {
|
||||
flex: 1;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
}
|
||||
|
||||
.expandcomment {
|
||||
width: 96px;
|
||||
height: 17px;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
flex-direction: row;
|
||||
gap: 8px;
|
||||
}
|
||||
|
||||
.expandcommenttext {
|
||||
flex: 1;
|
||||
font-family: PingFangSC;
|
||||
font-size: 12px;
|
||||
font-weight: normal;
|
||||
font-stretch: normal;
|
||||
font-style: normal;
|
||||
line-height: normal;
|
||||
letter-spacing: normal;
|
||||
text-align: left;
|
||||
color: #110c13;
|
||||
}
|
||||
|
||||
.interaction {
|
||||
width: 100%;
|
||||
border: solid 1px #faf9fb;
|
||||
background-color: #faf9fb;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
padding: 11.5px 16px;
|
||||
flex-direction: row;
|
||||
box-sizing: border-box;
|
||||
}
|
||||
|
||||
.editarea {
|
||||
flex: 1;
|
||||
height: 40px;
|
||||
background-color: #fff;
|
||||
border-radius: 24px;
|
||||
gap: 12px;
|
||||
padding: 0 20px;
|
||||
box-sizing: border-box;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
.editicon {
|
||||
width: 13.3px;
|
||||
height: 14.6px;
|
||||
flex-shrink: 0;
|
||||
align-self: center;
|
||||
}
|
||||
|
||||
.edittext {
|
||||
flex: 1;
|
||||
flex-grow: 0;
|
||||
font-family: PingFangSC;
|
||||
font-size: 14px;
|
||||
font-weight: normal;
|
||||
font-stretch: normal;
|
||||
font-style: normal;
|
||||
line-height: 40px;
|
||||
letter-spacing: normal;
|
||||
text-align: left;
|
||||
color: #918e93;
|
||||
white-space: nowrap;
|
||||
}
|
||||
|
||||
.collection,
|
||||
.like {
|
||||
height: 40px;
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
align-items: center;
|
||||
gap: 5px;
|
||||
}
|
||||
|
||||
.collectionicon,
|
||||
.likeicon {
|
||||
width: 24px;
|
||||
height: 24px;
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
.collectioncount,
|
||||
.likecount {
|
||||
height: 17px;
|
||||
font-family: SFPro;
|
||||
font-size: 17px;
|
||||
font-weight: 500;
|
||||
font-stretch: normal;
|
||||
font-style: normal;
|
||||
line-height: normal;
|
||||
letter-spacing: normal;
|
||||
text-align: left;
|
||||
color: #000;
|
||||
}
|
||||
</style>
|
||||
618
src/pages/components/videopage/videopage.vue
Normal file
618
src/pages/components/videopage/videopage.vue
Normal file
@@ -0,0 +1,618 @@
|
||||
<template>
|
||||
<view class="videopage">
|
||||
|
||||
<Head></Head>
|
||||
<video id="videoid" ref="videoRef" :src="videoData.videoUrl" :danmu-list="videoData.danmuList" enable-danmu loop
|
||||
:muted="isMuted" :show-mute-btn="true" :controls="false" object-fit="contain" @tap="pausevideo"></video>
|
||||
|
||||
<!-- 播放按钮 - 使用浏览器复制的样式 -->
|
||||
<view v-if="!isPlaying" class="uni-video-cover" @tap="pausevideo">
|
||||
<view class="uni-video-cover-play-button uni-video-icon"></view>
|
||||
</view>
|
||||
|
||||
<!-- 视频信息 -->
|
||||
<view class="videoinfo">
|
||||
<view class="vedioinfohead">
|
||||
<text class="username">@{{ videoData.userName }}</text>
|
||||
<text class="datetime">{{ formatDate(videoData.date) }}</text>
|
||||
</view>
|
||||
|
||||
<view class="content-container">
|
||||
<text class="content" :class="{ 'expanded': isExpanded }">{{ videoData.copywriting }}</text>
|
||||
<view class="flodbtncontainer">
|
||||
<image v-if="videoData.copywriting.length > 30" class="expand-btn" :class="{ 'rotated': isExpanded }"
|
||||
:src="isExpanded ? '/static/imgs/foldicon/flodicon@3x.webp' : '/static/imgs/foldicon/flodicon@3x.webp'"
|
||||
mode="aspectFit" @tap="toggleExpand"></image>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
|
||||
<!-- 右侧交互按钮 -->
|
||||
<view class="interaction-panel">
|
||||
<!-- 头像+关注 -->
|
||||
<view class="user-section">
|
||||
<image :src="videoData.userImg" class="user-avatar" mode="aspectFill"></image>
|
||||
<view class="follow-btn-container" @tap="toggleFollow">
|
||||
<image src="/static/imgs/followbtn/btn@3x.webp" mode="aspectFit"></image>
|
||||
</view>
|
||||
</view>
|
||||
|
||||
<!-- 点赞按钮 -->
|
||||
<view class="action-btn" @tap="toggleLike">
|
||||
<image src="/static/imgs/likeicon2/icon-2@3x.webp" class="action-icon" mode="aspectFit"></image>
|
||||
<text class="action-count">{{ formatCount(videoData.likesum) }}</text>
|
||||
</view>
|
||||
|
||||
<!-- 评论按钮 -->
|
||||
<view class="action-btn" @tap="openComments">
|
||||
<image src="/static/imgs/commenticon/icon-2@3x.webp" class="action-icon" mode="aspectFit"></image>
|
||||
<text class="action-count">{{ formatCount(videoData.commentsum) }}</text>
|
||||
</view>
|
||||
|
||||
<!-- 分享按钮 -->
|
||||
<view class="action-btn" @tap="shareVideo">
|
||||
<image src="/static/imgs/shareicon/icon-2@3x.webp" class="action-icon" mode="aspectFit"></image>
|
||||
<text class="action-count">{{ formatCount(videoData.sharesum) }}</text>
|
||||
</view>
|
||||
|
||||
<!-- 静音按钮 -->
|
||||
<image :src="isMuted ? '/static/imgs/mutebtn/mutebtn@3x.webp' : '/static/imgs/unmutebtn/unmutebtn@3x.webp'"
|
||||
class="mutebtn" mode="aspectFit" @tap="toggleMute"></image>
|
||||
|
||||
</view>
|
||||
</view>
|
||||
<!-- 评论区域 + 互动区域 -->
|
||||
<Comments :comments="videoData.comments" :showInteraction="true" :collectsum="videoData.collectsum"
|
||||
:likesum="videoData.likesum" />
|
||||
|
||||
|
||||
</template>
|
||||
|
||||
<script setup>
|
||||
import { ref, reactive, getCurrentInstance } from 'vue'
|
||||
import { useCommonStore } from '@/stores/common.js'
|
||||
import Head from '@/pages/components/head/head.vue'
|
||||
import Comments from '@/pages/components/comments/comments.vue'
|
||||
|
||||
const common = useCommonStore()
|
||||
const formatCount = common.formatCount
|
||||
const formatDate = common.formatDate
|
||||
|
||||
// 折叠展开状态
|
||||
const isExpanded = ref(false)
|
||||
const videoRef = ref(null)
|
||||
const ctx = ref(null)
|
||||
// 静音状态
|
||||
const isMuted = ref(false)
|
||||
// 播放状态
|
||||
const isPlaying = ref(true) // 默认播放状态
|
||||
|
||||
// 视频数据（包含弹幕）
|
||||
const videoData = reactive({
|
||||
userId: 1000012,
|
||||
userName: '蔡徐坤',
|
||||
userImg: '/static/logo.png',
|
||||
date: '2024-01-15',
|
||||
copywriting: '鸡你太美！练习时长两年半的个人练习生!鸡你太美！练习时长两年半的个人练习生!鸡你太美！练习时长两年半的个人练习生!',
|
||||
current: 0,
|
||||
isfollow: false,
|
||||
likesum: 1145140,
|
||||
collectsum: 114514,
|
||||
commentsum: 114514,
|
||||
sharesum: 1145,
|
||||
videoUrl: '/static/videos/beauty.mp4',
|
||||
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: []
|
||||
}
|
||||
],
|
||||
danmuList: [
|
||||
{ text: '鸡你太美！', color: '#FFFFFF', time: 1 },
|
||||
{ text: '练习时长两年半', color: '#FF0000', time: 1 },
|
||||
{ text: '个人练习生', color: '#00FF00', time: 1 },
|
||||
{ text: '坤坤加油！', color: '#FFFF00', time: 3 },
|
||||
{ text: '篮球高手', color: '#FFA500', time: 3 },
|
||||
{ text: '坤坤跳舞真帅', color: '#FF69B4', time: 5 },
|
||||
{ text: '这舞步绝了', color: '#00FFFF', time: 5 },
|
||||
{ text: '音乐太洗脑了', color: '#FFD700', time: 7 },
|
||||
{ text: '坤坤我爱你', color: '#FF1493', time: 7 },
|
||||
{ text: '练习生之光', color: '#7CFC00', time: 9 },
|
||||
{ text: '这节奏太上头', color: '#FF6347', time: 9 },
|
||||
{ text: '坤坤的招牌动作', color: '#9370DB', time: 11 },
|
||||
{ text: '鸡你太美循环中', color: '#20B2AA', time: 11 },
|
||||
{ text: '两年半的功力', color: '#FF4500', time: 13 },
|
||||
{ text: '坤坤的舞姿', color: '#DA70D6', time: 13 },
|
||||
{ text: '这歌太魔性了', color: '#32CD32', time: 15 },
|
||||
{ text: '练习生天花板', color: '#FF8C00', time: 15 },
|
||||
{ text: '坤坤的台风', color: '#00BFFF', time: 17 },
|
||||
{ text: '鸡你太美经典', color: '#FF00FF', time: 17 },
|
||||
{ text: '坤坤的舞台魅力', color: '#FFDAB9', time: 19 },
|
||||
{ text: '这舞步太经典', color: '#98FB98', time: 19 },
|
||||
{ text: '坤坤的招牌笑容', color: '#FFB6C1', time: 21 },
|
||||
{ text: '练习生传奇', color: '#87CEFA', time: 21 },
|
||||
{ text: '坤坤的舞蹈功底', color: '#FFA07A', time: 23 },
|
||||
{ text: '坤坤太帅了', color: '#FF1493', time: 25 },
|
||||
{ text: '这舞步太丝滑', color: '#00CED1', time: 25 },
|
||||
{ text: '坤坤的节奏感', color: '#FF69B4', time: 27 },
|
||||
{ text: '鸡你太美神曲', color: '#32CD32', time: 27 },
|
||||
{ text: '坤坤的舞台表现', color: '#FF4500', time: 29 },
|
||||
{ text: '这舞蹈太经典', color: '#9370DB', time: 29 },
|
||||
{ text: '坤坤的粉丝来了', color: '#FFD700', time: 2 },
|
||||
{ text: '鸡你太美循环播放', color: '#00BFFF', time: 4 },
|
||||
{ text: '坤坤的舞蹈功底', color: '#FF6347', time: 6 },
|
||||
{ text: '这歌太魔性了', color: '#20B2AA', time: 8 },
|
||||
{ text: '坤坤的招牌动作', color: '#FF8C00', time: 10 },
|
||||
{ text: '练习时长两年半', color: '#FF00FF', time: 12 },
|
||||
{ text: '坤坤的舞台魅力', color: '#98FB98', time: 14 },
|
||||
{ text: '鸡你太美经典', color: '#FFB6C1', time: 16 },
|
||||
{ text: '坤坤的舞姿', color: '#87CEFA', time: 18 },
|
||||
{ text: '这节奏太上头', color: '#FFA07A', time: 20 },
|
||||
{ text: '坤坤的台风', color: '#FF1493', time: 22 },
|
||||
{ text: '鸡你太美神曲', color: '#00CED1', time: 24 },
|
||||
{ text: '坤坤的舞蹈功底', color: '#FF69B4', time: 26 },
|
||||
{ text: '这舞步太丝滑', color: '#32CD32', time: 28 },
|
||||
{ text: '坤坤太帅了', color: '#FF4500', time: 30 }
|
||||
]
|
||||
})
|
||||
|
||||
// 切换展开状态
|
||||
const toggleExpand = () => {
|
||||
isExpanded.value = !isExpanded.value
|
||||
}
|
||||
|
||||
//暂停/播放
|
||||
const pausevideo = () => {
|
||||
// 获取VideoContext实例
|
||||
const videoCtx = uni.createVideoContext('videoid', getCurrentInstance());
|
||||
// 检查视频状态并切换播放/暂停
|
||||
if (videoCtx) {
|
||||
// 使用一个状态变量来跟踪播放状态
|
||||
if (isPlaying.value) {
|
||||
videoCtx.pause()
|
||||
isPlaying.value = false
|
||||
} else {
|
||||
videoCtx.play()
|
||||
isPlaying.value = true
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
// 关注
|
||||
const toggleFollow = () => {
|
||||
common.openapp();
|
||||
}
|
||||
|
||||
// 点赞
|
||||
const toggleLike = () => {
|
||||
common.openapp();
|
||||
}
|
||||
|
||||
// 打开评论
|
||||
const openComments = () => {
|
||||
common.openapp();
|
||||
}
|
||||
|
||||
// 分享视频
|
||||
const shareVideo = () => {
|
||||
common.openapp();
|
||||
}
|
||||
|
||||
// 切换静音
|
||||
const toggleMute = () => {
|
||||
isMuted.value = !isMuted.value;
|
||||
// 获取VideoContext实例
|
||||
const videoCtx = uni.createVideoContext('videoid', getCurrentInstance());
|
||||
if (videoCtx && typeof videoCtx.volume === 'function') {
|
||||
// H5平台使用volume方法控制音量
|
||||
videoCtx.volume(isMuted.value ? 0 : 1);
|
||||
}
|
||||
}
|
||||
|
||||
</script>
|
||||
|
||||
<style scoped>
|
||||
.videopage {
|
||||
width: 100%;
|
||||
height: 100vh;
|
||||
min-height: 684px;
|
||||
max-height: 932px;
|
||||
max-height: 932px;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
position: relative;
|
||||
}
|
||||
|
||||
.videopage video {
|
||||
width: 100%;
|
||||
flex: 1;
|
||||
object-fit: cover;
|
||||
}
|
||||
|
||||
::v-deep .uni-video-cover {
|
||||
background-color: transparent;
|
||||
}
|
||||
|
||||
::v-deep .uni-video-cover-play-button {
|
||||
width: 100% !important;
|
||||
height: 100% !important;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
}
|
||||
|
||||
/* 弹幕区域 */
|
||||
::v-deep .uni-video-danmu {
|
||||
height: 15% !important;
|
||||
height: 15% !important;
|
||||
z-index: 2;
|
||||
margin: 32px 0 0;
|
||||
}
|
||||
|
||||
.user-nickname {
|
||||
font-size: 16px;
|
||||
font-weight: 600;
|
||||
text-shadow: 0 1px 2px rgba(0, 0, 0, 0.8);
|
||||
}
|
||||
|
||||
.content {
|
||||
font-size: 14px;
|
||||
line-height: 1.4;
|
||||
text-shadow: 0 1px 2px rgba(0, 0, 0, 0.8);
|
||||
}
|
||||
|
||||
.publish-time {
|
||||
font-size: 12px;
|
||||
color: rgba(255, 255, 255, 0.8);
|
||||
text-shadow: 0 1px 2px rgba(0, 0, 0, 0.8);
|
||||
}
|
||||
|
||||
/* 右侧交互面板 */
|
||||
.interaction-panel {
|
||||
position: absolute;
|
||||
right: 16px;
|
||||
bottom: 16px;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
gap: 16px;
|
||||
z-index: 2;
|
||||
}
|
||||
|
||||
/* 用户信息区域 */
|
||||
.user-section,
|
||||
.action-btn,
|
||||
.mutebtn {
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
.user-section {
|
||||
width: 48px;
|
||||
height: 60px;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
position: relative;
|
||||
}
|
||||
|
||||
.user-avatar {
|
||||
width: 48px;
|
||||
height: 48px;
|
||||
border-radius: 50%;
|
||||
border: 2px solid rgba(255, 255, 255, 0.8);
|
||||
}
|
||||
|
||||
.follow-btn-container {
|
||||
position: absolute;
|
||||
bottom: 0;
|
||||
width: 24px;
|
||||
height: 24px;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
backdrop-filter: blur(10px);
|
||||
border-radius: 50%;
|
||||
}
|
||||
|
||||
.follow-icon {
|
||||
width: 20px;
|
||||
height: 20px;
|
||||
border-radius: 50%;
|
||||
}
|
||||
|
||||
/* 交互按钮 */
|
||||
.action-btn {
|
||||
width: 30px;
|
||||
height: 47px;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
gap: 4px;
|
||||
padding: 8px;
|
||||
border-radius: 8px;
|
||||
transition: background-color 0.3s;
|
||||
}
|
||||
|
||||
.action-icon {
|
||||
width: 30px;
|
||||
height: 30px;
|
||||
}
|
||||
|
||||
.action-count {
|
||||
font-size: 12px;
|
||||
color: #fff;
|
||||
font-weight: 600;
|
||||
text-shadow: 0 1px 2px rgba(0, 0, 0, 0.5);
|
||||
}
|
||||
|
||||
.mutebtn {
|
||||
width: 40px;
|
||||
height: 40px;
|
||||
}
|
||||
|
||||
/* 视频信息区域 */
|
||||
.videoinfo {
|
||||
width: 294px;
|
||||
height: auto;
|
||||
margin: 0 0 17px 16px;
|
||||
position: absolute;
|
||||
left: 0;
|
||||
bottom: 0;
|
||||
z-index: 2;
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
align-items: flex-start;
|
||||
gap: 8px;
|
||||
}
|
||||
|
||||
.vedioinfohead {
|
||||
height: 24px;
|
||||
display: flex;
|
||||
gap: 8px;
|
||||
}
|
||||
|
||||
.username {
|
||||
font-family: PingFangSC;
|
||||
font-size: 17px;
|
||||
font-weight: 600;
|
||||
font-stretch: normal;
|
||||
font-style: normal;
|
||||
line-height: normal;
|
||||
letter-spacing: normal;
|
||||
color: #fff;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
height: 24px;
|
||||
white-space: nowrap;
|
||||
flex-shrink: 0;
|
||||
}
|
||||
|
||||
.datetime {
|
||||
font-family: PingFangSC;
|
||||
font-size: 11px;
|
||||
font-weight: normal;
|
||||
font-stretch: normal;
|
||||
font-style: normal;
|
||||
line-height: normal;
|
||||
letter-spacing: normal;
|
||||
color: rgba(255, 255, 255, 0.6);
|
||||
display: flex;
|
||||
align-items: center;
|
||||
height: 24px;
|
||||
white-space: nowrap;
|
||||
flex-shrink: 0;
|
||||
}
|
||||
|
||||
.content {
|
||||
font-family: PingFangSC;
|
||||
font-size: 13px;
|
||||
font-weight: normal;
|
||||
font-stretch: normal;
|
||||
font-style: normal;
|
||||
line-height: 1.69;
|
||||
letter-spacing: normal;
|
||||
color: rgba(255, 255, 255, 0.8);
|
||||
max-width: 250px;
|
||||
overflow: hidden;
|
||||
text-overflow: ellipsis;
|
||||
white-space: nowrap;
|
||||
height: 22px;
|
||||
flex-shrink: 0;
|
||||
transition: all 0.3s ease;
|
||||
}
|
||||
|
||||
.content.expanded {
|
||||
white-space: normal;
|
||||
overflow: visible;
|
||||
text-overflow: clip;
|
||||
height: auto;
|
||||
max-height: none;
|
||||
}
|
||||
|
||||
.content-container {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 4px;
|
||||
max-width: 273px;
|
||||
}
|
||||
|
||||
/* 自定义播放按钮 */
|
||||
.custom-play-button {
|
||||
position: absolute;
|
||||
top: 50%;
|
||||
left: 50%;
|
||||
transform: translate(-50%, -50%);
|
||||
width: 80px;
|
||||
height: 80px;
|
||||
background: rgba(0, 0, 0, 0.5);
|
||||
border-radius: 50%;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
z-index: 10;
|
||||
cursor: pointer;
|
||||
transition: all 0.3s ease;
|
||||
}
|
||||
|
||||
.custom-play-button:hover {
|
||||
background: rgba(0, 0, 0, 0.7);
|
||||
transform: translate(-50%, -50%) scale(1.1);
|
||||
}
|
||||
|
||||
.play-icon {
|
||||
font-size: 40px;
|
||||
color: white;
|
||||
margin-left: 5px;
|
||||
}
|
||||
|
||||
/* 自定义播放按钮 */
|
||||
.custom-play-button {
|
||||
position: absolute;
|
||||
top: 50%;
|
||||
left: 50%;
|
||||
transform: translate(-50%, -50%);
|
||||
width: 80px;
|
||||
height: 80px;
|
||||
background: rgba(0, 0, 0, 0.5);
|
||||
border-radius: 50%;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
z-index: 10;
|
||||
cursor: pointer;
|
||||
transition: all 0.3s ease;
|
||||
}
|
||||
|
||||
.custom-play-button:hover {
|
||||
background: rgba(0, 0, 0, 0.7);
|
||||
transform: translate(-50%, -50%) scale(1.1);
|
||||
}
|
||||
|
||||
.play-icon {
|
||||
font-size: 40px;
|
||||
color: white;
|
||||
margin-left: 5px;
|
||||
}
|
||||
|
||||
.flodbtncontainer {
|
||||
height: 22px;
|
||||
width: 16px;
|
||||
display: flex;
|
||||
align-self: flex-start;
|
||||
flex-shrink: 0;
|
||||
}
|
||||
|
||||
.expand-btn {
|
||||
width: 16px;
|
||||
height: 16px;
|
||||
object-fit: contain;
|
||||
flex-shrink: 0;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
transition: transform 0.3s ease;
|
||||
}
|
||||
|
||||
.expand-btn.rotated {
|
||||
transform: rotate(180deg);
|
||||
}
|
||||
|
||||
.uni-video-cover {
|
||||
position: absolute;
|
||||
top: 0;
|
||||
left: 0;
|
||||
bottom: 0;
|
||||
width: 100%;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
z-index: 1;
|
||||
}
|
||||
|
||||
.uni-video-icon {
|
||||
font-family: 'uni-video-icon';
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.uni-video-cover-play-button {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
line-height: 75px;
|
||||
font-size: 56px;
|
||||
color: rgba(255, 255, 255, 0.5);
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
.uni-video-cover-play-button::after {
|
||||
content: '\ea24';
|
||||
}
|
||||
|
||||
.uni-video-cover {
|
||||
position: absolute;
|
||||
top: 0;
|
||||
left: 0;
|
||||
bottom: 0;
|
||||
width: 100%;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
z-index: 1;
|
||||
}
|
||||
|
||||
.uni-video-icon {
|
||||
font-family: 'uni-video-icon';
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.uni-video-cover-play-button {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
line-height: 75px;
|
||||
font-size: 56px;
|
||||
color: rgba(255, 255, 255, 0.5);
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
.uni-video-cover-play-button::after {
|
||||
content: '\ea24';
|
||||
}
|
||||
</style>
|
||||
90
src/pages/index/index.vue
Normal file
90
src/pages/index/index.vue
Normal file
@@ -0,0 +1,90 @@
|
||||
<template>
|
||||
<view class="page">
|
||||
<!-- 内容区 -->
|
||||
<view class="maincontent">
|
||||
<!-- <Postpage /> -->
|
||||
<Videopage />
|
||||
</view>
|
||||
|
||||
<!-- Findmore组件 -->
|
||||
<Findmore />
|
||||
|
||||
</view>
|
||||
</template>
|
||||
|
||||
<script setup>
|
||||
import Postpage from '@/pages/components/postpage/postpage.vue'
|
||||
import Videopage from '@/pages/components/videopage/videopage.vue';
|
||||
import Findmore from '@/pages/components/findmore/findmore.vue';
|
||||
|
||||
import { useCommonStore } from '@/stores/common.js'
|
||||
const common = useCommonStore()
|
||||
|
||||
</script>
|
||||
|
||||
<style scoped>
|
||||
page,
|
||||
.page {
|
||||
width: 100%;
|
||||
max-width: 430px;
|
||||
height: auto;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
margin: 0 auto;
|
||||
position: relative;
|
||||
}
|
||||
|
||||
.head {
|
||||
width: 100%;
|
||||
padding: 14px 16px;
|
||||
box-sizing: border-box;
|
||||
border-bottom: 1px solid rgba(0, 0, 0, .08);
|
||||
flex-shrink: 0;
|
||||
}
|
||||
|
||||
.applogo {
|
||||
width: 128px;
|
||||
height: 33px;
|
||||
display: inline-block;
|
||||
vertical-align: middle;
|
||||
}
|
||||
|
||||
.spacerview {
|
||||
display: inline-block;
|
||||
width: 0;
|
||||
height: 0;
|
||||
pointer-events: none;
|
||||
}
|
||||
|
||||
.download {
|
||||
width: 97px;
|
||||
height: 35px;
|
||||
border-radius: 29px;
|
||||
background-image: linear-gradient(156deg, #7c45ed -1%, #7c68ef 19%, #7bd8f8 97%);
|
||||
color: #fff;
|
||||
font-family: PingFangSC;
|
||||
font-size: 14px;
|
||||
display: inline-block;
|
||||
text-align: center;
|
||||
line-height: 35px;
|
||||
vertical-align: middle;
|
||||
}
|
||||
|
||||
.maincontent {
|
||||
width: 100%;
|
||||
flex: 1;
|
||||
height: auto;
|
||||
min-height: auto;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
position: relative;
|
||||
overflow-y: auto;
|
||||
scrollbar-width: none;
|
||||
-ms-overflow-style: none;
|
||||
}
|
||||
|
||||
/* Webkit浏览器隐藏滚动条 */
|
||||
.maincontent::-webkit-scrollbar {
|
||||
display: none;
|
||||
}
|
||||
</style>
|
||||
Reference in New Issue
Block a user