Skip to content

basic-uniapp-v3
basic-uniapp-v3
提交 a8c8a9f4 作者: 吴佳伟
操作

fix: 农知农技视频接口对接

上级 c4259475
正在显示 包含 277 行增加 和 69 行删除
src/api/model/knowledgeVideo.ts 0 → 100644
// 上传请求
import { otherHttp } from '/@/utils/http/axios'
enum Api {
list = '/video/list',
detail = '/video/detail',
viewCount = '/video/viewCount',
}
/**
* @description: 获取列表
*/
export function getList(params) {
return otherHttp.get({ url: Api.list, params })
}
/**
* @description: 获取详情
*/
export function getDetail(params) {
return otherHttp.get({ url: Api.detail, params })
}
/**
* @description: 记录浏览次数
*/
export function addViewCount(params) {
return otherHttp.post({
url: Api.viewCount,
params,
headers: {
'Content-Type': 'application/x-www-form-urlencoded'
}
})
}
src/pages.json
......@@ -486,6 +486,18 @@
"style": {
"navigationBarTitleText": "新闻内容"
}
},
{
"path": "pages/knowledgeVideo/index",
"style": {
"navigationBarTitleText": "农知农技视频"
}
},
{
"path": "pages/knowledgeVideo/detail",
"style": {
"navigationBarTitleText": "视频详情"
}
}
],
"easycom": {
......
src/pages/knowledgeVideo/detail.vue 0 → 100644
<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">
<img v-show="detail?.viewCount" class="mr-1" src="/src/static/images/news/views.png" />
<text>{{ detail?.viewCount }}</text>
</view>
</view>
</view>
</view>
</view>
</template>
<script setup lang="ts">
import * as videoApi from '@/api/model/knowledgeVideo'
import { isNull } from '@/utils/is'
import dayjs from 'dayjs'
const detail = ref<any>()
const getInfo = async (id: string) => {
await videoApi.getDetail({ id }).then((res) => {
detail.value = res
addViewCount(id)
const videoContext = uni.createVideoContext(`video${id}`)
videoContext.requestFullScreen()
videoContext.play()
})
}
const addViewCount = async (id: string) => {
videoApi.addViewCount({ id })
}
onLoad(async (options) => {
await getInfo(options.id)
})
</script>
src/pages/knowledgeVideo/index.vue 0 → 100644
<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">
<img class="mr-1" src="/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">
import { getList } from '@/api/model/knowledgeVideo'
import dayjs from 'dayjs'
const model = reactive({
params: {
pageNo: 1,
pageSize: 10,
classify: null
}, // 分页参数
hasMore: true, // 是否还有更多数据
loading: false, // 是否正在加载
time: '',
})
const videoList = ref([])
const getVideoList = (params) => {
if (model.loading) return
model.loading = true
getList(params).then((res) => {
if (res.records.length > 0) {
const { records } = res
if (model.params.pageNo === 1) {
videoList.value = records
} else {
videoList.value = [...videoList.value, ...records]
}
model.hasMore = records.length === model.params.pageSize
model.params.pageNo++
} else {
model.hasMore = false
}
})
model.loading = false
}
const resetData = () => {
model.params.pageNo = 1
model.hasMore = true
model.loading = false
videoList.value = []
}
// 视频暂停事件处理
function handleVideoPause(id) {
console.log(`视频${id}暂停`)
}
function handleFullscreenChange(e: any, id) {
console.log(`视频${id}全屏状态改变`)
if (!e.detail.fullScreen) {
const videoContext = uni.createVideoContext(`video${id}`)
videoContext.pause()
}
}
// 获取视频时长
function handleMetadataLoaded(e: any) {
model.time = e.target.duration
}
// 解决轮播视频切换时，上一个视频不停止播放的问题
function handleVideoPlay(id) {
videoList.value.forEach((_, index) => {
if (index !== id) {
const videoContext = uni.createVideoContext(`video${index}`)
videoContext.pause()
}
})
}
const toPlay = (id) => {
// uni.navigateTo({
// url: `/pages/knowledgeVideo/detail?id=${id}`,
// })
const videoContext = uni.createVideoContext(`video${id}`)
videoContext.requestFullScreen()
videoContext.play()
}
onReachBottom(() => {
if (model.hasMore) {
getVideoList(model.params)
}
})
onLoad((options) => {
model.params.classify = options.classify
resetData()
getVideoList(model.params)
})
</script>
src/pages/nongchang/nongchang.vue
......@@ -6,6 +6,7 @@
import * as HomeAPI from '@/api/model/home'
import * as NongChangAPI from '@/api/model/nongchang'
import { useUserStore } from '@/store/modules/user'
import { getList as getVideoList } from '@/api/model/knowledgeVideo'
const userStore = useUserStore()
onShow(() => {
......@@ -196,7 +197,7 @@
// 农技学习
agricultureClass: {
title: '专家实录—鸡饲养技术',
title: '',
time: '',
videoList: [],
},
......@@ -248,11 +249,9 @@
})
}
function getAgricultureClassList() {
HomeAPI.agricultureClassList({
status: 1,
}).then((res) => {
getVideoList({ pageNo: 1, pageSize: 3, status: 1, classify: 3 }).then((res) => {
const { records } = res
pageData.agricultureClass.videoList = records.reverse()
pageData.agricultureClass.videoList = records
pageData.agricultureClass.title = records[0]?.title
})
}
......@@ -363,10 +362,11 @@
Navigate.to('/pages/zhunongjinrong/zhunongjinrong')
}
// 查看更多农技学习
// 查看更多农技课堂
function onViewMoreClass() {
console.log('查看更多农技学习')
// 在这里添加具体的查看逻辑
uni.navigateTo({
url: '/pages/knowledgeVideo/index?classify=3',
})
}
// 点击常用工具
......@@ -801,15 +801,15 @@
>
<swiper-item v-for="(video, index) in pageData.agricultureClass.videoList" :key="index">
<image
:src="video.cover_image"
:src="video.thumbnailPath"
mode="scaleToFill"
class="w-654rpx h-358rpx"
@click="playVideo(index)"
/>
<video
:id="`video${index}`"
:src="video.media_video"
:poster="video.cover_image"
:src="video.url"
:poster="video.thumbnailPath"
:title="video.title"
:controls="true"
style="width: 654rpx; height: 358rpx"
......@@ -827,11 +827,10 @@
@fullscreenchange="handleFullscreenChange($event, index)"
class="!hidden"
></video>
</swiper-item>
</swiper>
</fui-swiper-dot>
<view class="describe relative">
<text class="codefun-self-start font text_34">{{ pageData.agricultureClass.title }}</text>
<text class="codefun-self-start font text_34">{{
pageData.agricultureClass.title
}}</text>
<view
class="codefun-flex-row codefun-justify-between codefun-items-center codefun-self-stretch mt-13"
>
......@@ -839,46 +838,15 @@
src="/static/images/codefun/play.png"
mode="scaleToFill"
class="absolute w-64 h-64 top--150 left-275"
@click="playVideo(index)"
/>
<text class="font_14 text_36">{{ pageData.agricultureClass.time }}</text>
</view>
</view>
</swiper-item>
</swiper>
</fui-swiper-dot>
</view>
<!-- <view class="codefun-flex-col section_20">
<text class="codefun-self-start font_2 text_68">{{ pageData.agricultureClass.title }}</text>
<view
class="codefun-flex-row codefun-justify-between codefun-items-center codefun-self-stretch group_31"
>
<view class="codefun-flex-row codefun-items-center">
<image
class="codefun-shrink-0 image_16"
src="/static/images/codefun/893f216142f5ca20cf9f2496d9b793c8.png"
/>
<text class="font_15 text_69 ml-5">{{ pageData.agricultureClass.expert }}</text>
</view>
<text class="font_15 text_70">{{ pageData.agricultureClass.info }}</text>
</view>
<view class="codefun-flex-row codefun-justify-center codefun-self-stretch group_32">
<view class="section_21" />
<view
class="codefun-ml-8 codefun-flex-row codefun-justify-start codefun-items-center image-wrapper_3"
>
<image
class="image_17"
src="/static/images/codefun/d2f4116cc0ab402e57bdbd7aa4dead94.png"
/>
</view>
<view class="codefun-ml-8 section_22" />
<view
class="codefun-ml-8 codefun-flex-row codefun-justify-start codefun-items-center image-wrapper_3"
>
<image
class="image_17"
src="/static/images/codefun/d2f4116cc0ab402e57bdbd7aa4dead94.png"
/>
</view>
</view>
</view> -->
</view>
</view>
</view>
......@@ -1897,8 +1865,8 @@
.describe {
width: 88%;
position: absolute;
bottom: 52rpx;
left: 40rpx;
bottom: 0rpx;
left: 10rpx;
z-index: 1;
.text_34 {
......
src/pages/shouye/shouye.vue
......@@ -10,6 +10,7 @@
import Navigate from '@/utils/page/navigate'
import * as AreaDict from '@/utils/dict/area'
import { getList } from '@/api/model/news'
import { getList as getVideoList } from '@/api/model/knowledgeVideo'
const dictStore = useDictStore()
const model = reactive({
......@@ -319,9 +320,7 @@
})
}
function getAgricultureClassList() {
HomeAPI.agricultureClassList({
status: 1,
}).then((res) => {
getVideoList({ pageNo: 1, pageSize: 3, status: 1 }).then((res) => {
const { records } = res
pageData.agricultureClass.videoList = records
pageData.agricultureClass.title = records[0]?.title
......@@ -336,7 +335,7 @@
}
function getNews() {
getList({ pageNo: 1, pageSize: 2}).then((res) => {
getList({ pageNo: 1, pageSize: 2 }).then((res) => {
const { records } = res
pageData.newsItems = records
})
......@@ -388,8 +387,9 @@
// 查看更多农技课堂
function onViewMoreClass() {
console.log('查看全部农技课堂')
// 在这里添加具体的查看逻辑
uni.navigateTo({
url: '/pages/knowledgeVideo/index',
})
}
// 轮播视频切换的时候触发
......@@ -698,7 +698,7 @@
<view class="codefun-flex-row codefun-justify-between codefun-items-baseline group_12">
<text class="font_6">热点新闻</text>
<text class="text-28 font-extralight color-#5DB66F mr-4" @click="toNewsList">
更多<fui-icon name="right" size="30" color="#5DB66F"/>
更多<fui-icon name="right" size="30" color="#5DB66F" />
</text>
</view>
<view class="codefun-flex-col equal-division bg-#fff border-rd-lg">
......@@ -710,7 +710,9 @@
>
<view class="w-70% flex flex-col justify-between" :class="news.image ? 'w-70%' : 'w-full'">
<view class="text-25 color-#333333">{{ news.title }}</view>
<view class="text-25 color-#686868">{{ dayjs(news.publishDate).format('YYYY年MM月DD日') }}</view>
<view class="text-25 color-#686868">{{
dayjs(news.publishDate).format('YYYY年MM月DD日')
}}</view>
</view>
<view v-show="news.image" class="w-30% h-150">
<img class="w-full h-full border-rd" :src="news.image" />
......@@ -775,15 +777,15 @@
>
<swiper-item v-for="(video, index) in pageData.agricultureClass.videoList" :key="index">
<image
:src="video.cover_image"
:src="video.thumbnailPath"
mode="scaleToFill"
class="w-654rpx h-358rpx"
@click="playVideo(index)"
/>
<video
:id="`video${index}`"
:src="video.media_video"
:poster="video.cover_image"
:src="video.url"
:poster="video.thumbnailPath"
:title="video.title"
:controls="true"
style="width: 654rpx; height: 358rpx"
......@@ -801,11 +803,10 @@
@fullscreenchange="handleFullscreenChange($event, index)"
class="!hidden"
></video>
</swiper-item>
</swiper>
</fui-swiper-dot>
<view class="describe relative">
<text class="codefun-self-start font text_34">{{ pageData.agricultureClass.title }}</text>
<text class="codefun-self-start font text_34">{{
pageData.agricultureClass.title
}}</text>
<view
class="codefun-flex-row codefun-justify-between codefun-items-center codefun-self-stretch mt-13"
>
......@@ -813,10 +814,14 @@
src="/static/images/codefun/play.png"
mode="scaleToFill"
class="absolute w-64 h-64 top--150 left-275"
@click="playVideo(index)"
/>
<text class="font_14 text_36">{{ pageData.agricultureClass.time }}</text>
</view>
</view>
</swiper-item>
</swiper>
</fui-swiper-dot>
</view>
</view>
</view>
......@@ -1604,8 +1609,8 @@
.describe {
width: 88%;
position: absolute;
bottom: 52rpx;
left: 40rpx;
bottom: 0rpx;
left: 10rpx;
z-index: 1;
}
......
Markdown 格式
0% 或
您添加了 0 人 到此讨论。请谨慎行事。
请先完成此评论的编辑！
请 注册 或者 后发表评论