Skip to content

basic-uniapp-v3
basic-uniapp-v3
提交 9a27ac00 作者: 方治民
操作

fix: 修复视频播放次数图标渲染异常问题

上级 842975b1
正在显示 包含 82 行增加 和 82 行删除
src/pages/knowledgeVideo/detail.vue
<template>
<view class="p-3" style="font-family: '思源黑体'; font-weight: 400">
<view class="w-full text-28">
<view class="mb-1">
<video class="w-full" :src="!isNull(detail) ? detail?.url : ''" controls loop />
</view>
</view>
<view class="flex flex-col justify-between mt-1 mb-6">
<view class="text-35 color-#333333 mb-3">{{ detail?.title }}</view>
<view class="flex flex-col text-25 color-#686868">
<view class="flex flex-row justify-between">
<text>{{
!isNull(detail) ? '时间: ' + dayjs(detail?.publishDate).format('YYYY年MM月DD日') : ''
}}</text>
<view class="mr-1">
<image v-show="detail?.viewCount" class="mr-1" src="/static/images/news/views.png" />
<text>{{ detail?.viewCount }}</text>
</view>
</view>
</view>
</view>
</view>
</template>
<script setup lang="ts"> <script setup lang="ts">
import dayjs from 'dayjs'
import * as videoApi from '@/api/model/knowledgeVideo' import * as videoApi from '@/api/model/knowledgeVideo'
import { isNull } from '@/utils/is' import { isNull } from '@/utils/is'
import dayjs from 'dayjs'
const detail = ref<any>() const detail = ref<any>()
const getInfo = async (id: string) => { async function getInfo(id: string) {
await videoApi.getDetail({ id }).then((res) => { await videoApi.getDetail({ id }).then((res) => {
detail.value = res detail.value = res
addViewCount(id) addViewCount(id)
...@@ -40,7 +16,7 @@ ...@@ -40,7 +16,7 @@
}) })
} }
const addViewCount = async (id: string) => { async function addViewCount(id: string) {
videoApi.addViewCount({ id }) videoApi.addViewCount({ id })
} }
...@@ -48,3 +24,27 @@ ...@@ -48,3 +24,27 @@
await getInfo(options.id) await getInfo(options.id)
}) })
</script> </script>
<template>
<view class="p-3" style="font-family: '思源黑体'; font-weight: 400">
<view class="w-full text-28">
<view class="mb-1">
<video class="w-full" :src="!isNull(detail) ? detail?.url : ''" controls loop></video>
</view>
</view>
<view class="flex flex-col justify-between mt-1 mb-6">
<view class="text-35 color-#333333 mb-3">{{ detail?.title }}</view>
<view class="flex flex-col text-25 color-#686868">
<view class="flex flex-row justify-between">
<text>{{
!isNull(detail) ? `时间: ${dayjs(detail?.publishDate).format('YYYY年MM月DD日')}` : ''
}}</text>
<view class="mr-1 flex-center" v-show="detail?.viewCount">
<image class="mr-1 w-30 h-26" src="/static/images/news/views.png" />
<view class="flex-center text-24 lh-24rpx">{{ detail?.viewCount }}</view>
</view>
</view>
</view>
</view>
</view>
</template>
src/pages/knowledgeVideo/index.vue
<template>
<view class="bg-#E6F5E8 pt-3" style="font-family: '思源黑体'; font-weight: 400">
<fui-waterfall leftGap="20" rightGap="20" topGap="20">
<fui-waterfall-item
v-for="(item, index) in videoList"
:key="index"
:src="item.thumbnailPath"
@click="toPlay(item.id)"
>
<view class="flex flex-col justify-between pl-2 pr-2 pb-2">
<view class="text-25 mt-1 mb-2">{{ item.title }}</view>
<view class="flex justify-between text-25 color-#686868">
<view class="mr-1">
<image class="mr-1" src="/static/images/news/views.png" />
<text>{{ item.viewCount }}</text>
</view>
<text>{{ dayjs(item.publishDate).format('MM-DD') }}</text>
</view>
</view>
<video
:id="`video${item.id}`"
:src="item.url"
:poster="item.thumbnailPath"
:title="item.title"
:controls="true"
style="width: 654rpx; height: 358rpx"
:autoplay="false"
:muted="false"
:loop="true"
:show-play-btn="true"
:show-center-play-btn="true"
:enable-progress-gesture="true"
:show-progress="true"
object-fit="contain"
@loadedmetadata="handleMetadataLoaded"
@play="handleVideoPlay(item.id)"
@pause="handleVideoPause(item.id)"
@fullscreenchange="handleFullscreenChange($event, item.id)"
class="!hidden"
></video>
</fui-waterfall-item>
</fui-waterfall>
</view>
</template>
<script setup lang="ts"> <script setup lang="ts">
import * as videoApi from '@/api/model/knowledgeVideo'
import dayjs from 'dayjs' import dayjs from 'dayjs'
import * as videoApi from '@/api/model/knowledgeVideo'
const model = reactive({ const model = reactive({
params: { params: {
...@@ -59,7 +14,7 @@ ...@@ -59,7 +14,7 @@
}) })
const videoList = ref([]) const videoList = ref([])
const getVideoList = (params) => { function getVideoList(params) {
if (model.loading) return if (model.loading) return
model.loading = true model.loading = true
videoApi.getList(params).then((res) => { videoApi.getList(params).then((res) => {
...@@ -80,7 +35,7 @@ ...@@ -80,7 +35,7 @@
model.loading = false model.loading = false
} }
const resetData = () => { function resetData() {
model.params.pageNo = 1 model.params.pageNo = 1
model.hasMore = true model.hasMore = true
model.loading = false model.loading = false
...@@ -114,7 +69,7 @@ ...@@ -114,7 +69,7 @@
}) })
} }
const toPlay = (id) => { function toPlay(id) {
// uni.navigateTo({ // uni.navigateTo({
// url: `/pages/knowledgeVideo/detail?id=${id}`, // url: `/pages/knowledgeVideo/detail?id=${id}`,
// }) // })
...@@ -127,7 +82,7 @@ ...@@ -127,7 +82,7 @@
addViewCount(id) addViewCount(id)
} }
const addViewCount = async (id: string) => { async function addViewCount(id: string) {
videoApi.addViewCount({ id }) videoApi.addViewCount({ id })
} }
...@@ -143,3 +98,48 @@ ...@@ -143,3 +98,48 @@
getVideoList(model.params) getVideoList(model.params)
}) })
</script> </script>
<template>
<view class="bg-#E6F5E8 pt-3" style="font-family: '思源黑体'; font-weight: 400">
<fui-waterfall leftGap="20" rightGap="20" topGap="20">
<fui-waterfall-item
v-for="(item, index) in videoList"
:key="index"
:src="item.thumbnailPath"
@click="toPlay(item.id)"
>
<view class="flex flex-col justify-between pl-2 pr-2 pb-2">
<view class="text-25 mt-1 mb-2">{{ item.title }}</view>
<view class="flex justify-between text-25 color-#686868">
<view class="mr-1 flex-center">
<image class="mr-1 w-30 h-26" src="/static/images/news/views.png" />
<view class="flex-center text-24 lh-24rpx">{{ item.viewCount }}</view>
</view>
<text>{{ dayjs(item.publishDate).format('MM-DD') }}</text>
</view>
</view>
<video
:id="`video${item.id}`"
:src="item.url"
:poster="item.thumbnailPath"
:title="item.title"
:controls="true"
style="width: 654rpx; height: 358rpx"
:autoplay="false"
:muted="false"
:loop="true"
:show-play-btn="true"
:show-center-play-btn="true"
:enable-progress-gesture="true"
:show-progress="true"
object-fit="contain"
@loadedmetadata="handleMetadataLoaded"
@play="handleVideoPlay(item.id)"
@pause="handleVideoPause(item.id)"
@fullscreenchange="handleFullscreenChange($event, item.id)"
class="!hidden"
></video>
</fui-waterfall-item>
</fui-waterfall>
</view>
</template>
src/pages/news/detail.vue
...@@ -52,8 +52,8 @@ ...@@ -52,8 +52,8 @@
!isNull(detail) ? `时间: ${dayjs(detail?.publishDate).format('YYYY年MM月DD日')}` : '' !isNull(detail) ? `时间: ${dayjs(detail?.publishDate).format('YYYY年MM月DD日')}` : ''
}}</text> }}</text>
<view class="mr-1 flex-center"> <view class="mr-1 flex-center">
<image v-show="detail?.viewCount" class="mr-1 w-30 h-26" src="/static/images/news/views.png" /> <image class="mr-1 w-30 h-26" src="/static/images/news/views.png" />
<text>{{ detail?.viewCount }}</text> <view class="flex-center text-24 lh-24rpx">{{ detail?.viewCount }}</view>
</view> </view>
</view> </view>
</view> </view>
......
src/pages/news/index.vue
...@@ -123,9 +123,9 @@ ...@@ -123,9 +123,9 @@
<view class="text-28 color-#333333">{{ news.title }}</view> <view class="text-28 color-#333333">{{ news.title }}</view>
<view class="flex flex-row justify-between text-25 color-#686868"> <view class="flex flex-row justify-between text-25 color-#686868">
<text>{{ news.publishDate }}</text> <text>{{ news.publishDate }}</text>
<view class="mr-1"> <view class="mr-1 flex-center">
<image class="mr-1" src="/static/images/news/views.png" /> <image class="mr-1 w-30 h-26" src="/static/images/news/views.png" />
<text>{{ news.viewCount }}</text> <view class="flex-center text-24 lh-24rpx">{{ news.viewCount }}</view>
</view> </view>
</view> </view>
</view> </view>
......
Markdown 格式
0% 或
您添加了 0 人 到此讨论。请谨慎行事。
请先完成此评论的编辑！
请 注册 或者 后发表评论