|
@@ -0,0 +1,369 @@
|
|
|
+<template>
|
|
|
+ <view class="shortVideo">
|
|
|
+ <!-- 导航部分 -->
|
|
|
+ <cu-custom class="lj-navbar" bgColor="" :isBack="true" :isSearch="true" @searchEmit="handleSearch">
|
|
|
+ <block slot="content">优医视频</block>
|
|
|
+ </cu-custom>
|
|
|
+
|
|
|
+ <swiper class="swiper" :vertical="true" :current="currentIndex" @change="handleSwiperChange">
|
|
|
+ <swiper-item v-for="(item, index) in videoList" :key="index" class="swiper-item">
|
|
|
+ <!-- 自定义视频播放组件 -->
|
|
|
+ <view class="video-wrapper">
|
|
|
+ <videoPlayer :videoUrl="item.videoUrl" :play="item.play" @tap.native="handleTap(index)" @onTimeupdate="handleTimeupdate"></videoPlayer>
|
|
|
+ <menuButton class="lj-menu-button" :videoList="videoList[currentIndex]" @onStart="handleStart" @onShare="handleShare"
|
|
|
+ @onShowComment="handleShowComment" @onAddAttention="handleAddAttention" @jumpToDoctorDetail="handleJumpDoctorDetail"></menuButton>
|
|
|
+ <doctorInfo class="doctorInfo-wrap" :videoList="item"></doctorInfo>
|
|
|
+ </view>
|
|
|
+ </swiper-item>
|
|
|
+ </swiper>
|
|
|
+ <!-- 评论组件 -->
|
|
|
+ <ljReview @close="closeReview" :show="showReview" :videoList="videoList[currentIndex]" :commentList="commentList"
|
|
|
+ :pager="commentTotal"> </ljReview>
|
|
|
+ </view>
|
|
|
+</template>
|
|
|
+
|
|
|
+<script>
|
|
|
+ import cuCustom from '@/colorui/components/cu-custom.vue'
|
|
|
+ import videoPlayer from '@/components/video-player/video-player.vue'
|
|
|
+ import menuButton from '@/components/menu-button/menu-button.vue'
|
|
|
+ import doctorInfo from '@/components/doctor-info/doctor-info.vue'
|
|
|
+ import ljReview from '@/components/review/review.vue'
|
|
|
+ import {
|
|
|
+ reqGetVideoList,
|
|
|
+ reqLikeVideo,
|
|
|
+ reqCancelLikeVideo,
|
|
|
+ reqCancelAttentionDoctor,
|
|
|
+ reqAddVideoPlayerCount,
|
|
|
+ reqAttentionDoctor,
|
|
|
+ reqGetVideoListHasToken,
|
|
|
+ reqGetCommentList
|
|
|
+ } from '../../api/index.js'
|
|
|
+
|
|
|
+import {reqGetMyLikeList} from '../../api/home.js'
|
|
|
+
|
|
|
+
|
|
|
+ export default {
|
|
|
+ name: "videoPlayer",
|
|
|
+ components: {
|
|
|
+ cuCustom,
|
|
|
+ videoPlayer,
|
|
|
+ menuButton,
|
|
|
+ doctorInfo,
|
|
|
+ ljReview
|
|
|
+ },
|
|
|
+ data() {
|
|
|
+ return {
|
|
|
+ prePageIndex: 0, // 上一页分页值
|
|
|
+ nextPageIndex: 0, // 下一页分页值
|
|
|
+ currentVideoIndex: 0,// 当前视频索引值
|
|
|
+ source: "", // 页面来源
|
|
|
+ commentTotal: 0, // 评论总数量
|
|
|
+ commentParams: {
|
|
|
+ pageIndex: 1,
|
|
|
+ pageSize: 10,
|
|
|
+ id: '' // 视频id
|
|
|
+ },
|
|
|
+ commentList: [], // 评论列表
|
|
|
+ showReview: false, // 是否显示评论组件
|
|
|
+ videoList: [], // 短视频数据
|
|
|
+ videoParams: { // 短视频请求参数
|
|
|
+ pageIndex: 1, // 页码
|
|
|
+ pageSize: 5, // 每页显示记录数
|
|
|
+ id: "" // 搜索关键字
|
|
|
+ },
|
|
|
+ videoTotal: 0, // 短视频总数
|
|
|
+ currentIndex: 0, // 当前短视频的索引
|
|
|
+ }
|
|
|
+ },
|
|
|
+ methods: {
|
|
|
+ // 根据页面跳转来源调用对应的接口函数
|
|
|
+ switchVaild(){
|
|
|
+ switch(this.source){
|
|
|
+ case "myLike":
|
|
|
+ this.getVideoList(reqGetMyLikeList)
|
|
|
+ }
|
|
|
+ },
|
|
|
+
|
|
|
+ // 获取视频列表数据
|
|
|
+ async getVideoList(fn){
|
|
|
+ if(this.videoList.length >= this.videoTotal){
|
|
|
+ uni.showToast({
|
|
|
+ title: '没有更多数据了',
|
|
|
+ icon: 'none'
|
|
|
+ })
|
|
|
+ return
|
|
|
+ }
|
|
|
+ const response = await fn(this.videoParams)
|
|
|
+ if(response.isSuccess && response.resultCode === 200) {
|
|
|
+ response.resultObject.forEach(item=>item.play=false)
|
|
|
+ if(this.currentIndex <= 0 && this.prePageIndex > 0) {
|
|
|
+ this.currentIndex = response.resultObject.length
|
|
|
+ // 加载上一页视频数据
|
|
|
+ this.videoList = [...response.resultObject, ...this.videoList]
|
|
|
+ this.prePageIndex--
|
|
|
+ return
|
|
|
+ }
|
|
|
+ // 加载下一页视频数据
|
|
|
+ this.videoList = [...this.videoList, ...response.resultObject]
|
|
|
+ this.nextPageIndex++
|
|
|
+ }
|
|
|
+
|
|
|
+
|
|
|
+ },
|
|
|
+
|
|
|
+ // 视频进度变化的处理函数
|
|
|
+ handleTimeupdate(currentTime) {
|
|
|
+ try{
|
|
|
+ currentTime = parseInt(currentTime)
|
|
|
+ if (currentTime === 10) {
|
|
|
+ // 添加防抖
|
|
|
+ clearTimeout(this.TimeId)
|
|
|
+ this.TimeId = setTimeout(async _ => {
|
|
|
+ const res = await reqAddVideoPlayerCount({
|
|
|
+ id: this.videoList[this.currentIndex].id
|
|
|
+ })
|
|
|
+ }, 2000)
|
|
|
+ }
|
|
|
+ }catch(e){
|
|
|
+ }
|
|
|
+ },
|
|
|
+
|
|
|
+ // 跳转医生详情页面
|
|
|
+ handleJumpDoctorDetail(id) {
|
|
|
+ uni.navigateTo({
|
|
|
+ url: `/pages/doctorDetail/doctorDetail?DoctorId=${id}`
|
|
|
+ })
|
|
|
+ },
|
|
|
+
|
|
|
+ // 关注医生
|
|
|
+ async handleAddAttention(id) {
|
|
|
+ try {
|
|
|
+ if (this.videoList[this.currentIndex].isFollow) return
|
|
|
+ const res = await reqAttentionDoctor({
|
|
|
+ id
|
|
|
+ })
|
|
|
+ if (res.isSuccess) {
|
|
|
+ this.videoList[this.currentIndex].isFollow = this.videoList[this.currentIndex].isFollow ? false : true;
|
|
|
+ uni.showToast({
|
|
|
+ title: "关注成功",
|
|
|
+ icon: 'success'
|
|
|
+ })
|
|
|
+ } else {
|
|
|
+ uni.showToast({
|
|
|
+ title: '服务器异常,关注失败!',
|
|
|
+ icon: "none"
|
|
|
+ })
|
|
|
+ }
|
|
|
+ } catch (e) {
|
|
|
+ }
|
|
|
+ },
|
|
|
+
|
|
|
+ // 监听评论按钮点击事件
|
|
|
+ async handleShowComment() {
|
|
|
+ this.commentParams.id = this.videoList[this.currentIndex].id
|
|
|
+ const response = await reqGetCommentList(this.commentParams)
|
|
|
+ if(response.isSuccess && response.resultCode === 200 ){
|
|
|
+ this.commentList = response.resultObject
|
|
|
+ this.commentTotal = response.pager.totalItemCount
|
|
|
+ }
|
|
|
+ this.showReview = true
|
|
|
+ },
|
|
|
+
|
|
|
+ // 监听关闭评论按钮点击事件
|
|
|
+ closeReview(e){
|
|
|
+ this.videoList[this.currentIndex].commentFrequency = e.commentCount
|
|
|
+ this.showReview = false
|
|
|
+ },
|
|
|
+
|
|
|
+ // 分享处理函数
|
|
|
+ handleShare() {
|
|
|
+ uni.showToast({
|
|
|
+ title: "分享",
|
|
|
+ icon: "none"
|
|
|
+ })
|
|
|
+ },
|
|
|
+
|
|
|
+ // 点赞处理函数
|
|
|
+ async handleStart() {
|
|
|
+ try {
|
|
|
+ if (this.videoList[this.currentIndex].isLike) {
|
|
|
+ // 已经点赞了,取消点赞
|
|
|
+ const response = await reqCancelLikeVideo({
|
|
|
+ id: this.videoList[this.currentIndex].id
|
|
|
+ })
|
|
|
+ if (response.isSuccess && response.resultCode === 200) {
|
|
|
+ this.videoList[this.currentIndex].isLike = false
|
|
|
+ this.videoList[this.currentIndex].likeFrequency--;
|
|
|
+ } else {
|
|
|
+ uni.showToast({
|
|
|
+ title: response.resultMsg,
|
|
|
+ icon: 'none'
|
|
|
+ })
|
|
|
+ }
|
|
|
+ } else {
|
|
|
+ // 没有点过赞,进行点赞行为
|
|
|
+ const response = await reqLikeVideo({
|
|
|
+ id: this.videoList[this.currentIndex].id
|
|
|
+ })
|
|
|
+ if (response.isSuccess && response.resultCode === 200) {
|
|
|
+ this.videoList[this.currentIndex].isLike = true
|
|
|
+ this.videoList[this.currentIndex].likeFrequency++;
|
|
|
+ } else {
|
|
|
+ uni.showToast({
|
|
|
+ title: '服务器异常,点赞失败!',
|
|
|
+ icon: 'none'
|
|
|
+ })
|
|
|
+ }
|
|
|
+ }
|
|
|
+ } catch (e) {
|
|
|
+ }
|
|
|
+
|
|
|
+ },
|
|
|
+
|
|
|
+ // 点击暂停或播放视频
|
|
|
+ handleTap(index) {
|
|
|
+ this.videoList[index].play ? this.videoList[index].play = false : this.videoList[index].play = true;
|
|
|
+ },
|
|
|
+
|
|
|
+ // 视频切换后的处理函数
|
|
|
+ handleSwiperChange(e) {
|
|
|
+ let videoIndex = e.target.current
|
|
|
+ if(videoIndex < this.currentIndex) {
|
|
|
+ // pre operation
|
|
|
+ console.log("上滑操作...")
|
|
|
+ if(videoIndex === 0) {
|
|
|
+ // 第一个视频
|
|
|
+ this.videoParams.pageIndex = this.prePageIndex
|
|
|
+ this.switchVaild()
|
|
|
+ }
|
|
|
+
|
|
|
+ }else if (videoIndex > this.currentIndex) {
|
|
|
+ // next operation
|
|
|
+ console.log("下滑操作...")
|
|
|
+ if(videoIndex === this.videoList.length-1) {
|
|
|
+ // 最后一个视频
|
|
|
+ this.videoParams.pageIndex = this.nextPageIndex
|
|
|
+ this.switchVaild()
|
|
|
+ }
|
|
|
+ }
|
|
|
+ this.currentIndex = e.target.current
|
|
|
+ // 暂停其他视频,播放当前视频
|
|
|
+ this.videoList.forEach(item => item.play = false)
|
|
|
+ this.videoList[this.currentIndex].play = true;
|
|
|
+ },
|
|
|
+
|
|
|
+ // 跳转搜索页面
|
|
|
+ handleSearch() {
|
|
|
+ uni.navigateTo({
|
|
|
+ url: '/pages/search/search',
|
|
|
+ })
|
|
|
+ }
|
|
|
+ },
|
|
|
+
|
|
|
+ onShow() {
|
|
|
+ let videoListJumpParams = getApp().globalData.videoListJumpParams
|
|
|
+ this.source = videoListJumpParams.source
|
|
|
+ this.prePageIndex = videoListJumpParams.currentPageIndex - 1
|
|
|
+ this.nextPageIndex = videoListJumpParams.currentPageIndex + 1
|
|
|
+ this.currentVideoIndex = videoListJumpParams.currentVideoIndex
|
|
|
+ console.log("prePageIndex: ", this.prePageIndex)
|
|
|
+ console.log("nextPageIndex: ", this.nextPageIndex)
|
|
|
+ console.log("currentVideoIndex: ", this.currentVideoIndex)
|
|
|
+ this.videoTotal = videoListJumpParams.videoTotal
|
|
|
+ this.videoList = videoListJumpParams.videoList.map(item=>{
|
|
|
+ return {
|
|
|
+ ...item,
|
|
|
+ play: false
|
|
|
+ }
|
|
|
+ })
|
|
|
+ // $nextTick经典应用,不加你试试:)
|
|
|
+ this.$nextTick(_=>{
|
|
|
+ this.videoList[this.currentVideoIndex].play = true
|
|
|
+ })
|
|
|
+ this.currentIndex = this.currentVideoIndex
|
|
|
+ this.commentParams.pageIndex = 1
|
|
|
+ // 获取视频搜索页面用户输入的搜索关键词
|
|
|
+ this.videoParams.id = videoListJumpParams.userKey
|
|
|
+ }
|
|
|
+ }
|
|
|
+</script>
|
|
|
+
|
|
|
+<style lang="less">
|
|
|
+ /* #ifndef APP-PLUS */
|
|
|
+ page {
|
|
|
+ width: 100%;
|
|
|
+ min-height: 100%;
|
|
|
+ display: flex;
|
|
|
+ }
|
|
|
+
|
|
|
+ /* #endif */
|
|
|
+
|
|
|
+ .shortVideo {
|
|
|
+ flex: 1;
|
|
|
+ width: 750rpx;
|
|
|
+ background-color: #000;
|
|
|
+ }
|
|
|
+
|
|
|
+ .swiper {
|
|
|
+ flex: 1;
|
|
|
+ height: 100%;
|
|
|
+ background-color: transparent;
|
|
|
+ }
|
|
|
+
|
|
|
+ .swiper-item {
|
|
|
+ display: flex;
|
|
|
+ flex-direction: column;
|
|
|
+ flex: 1;
|
|
|
+ flex-shrink: 0;
|
|
|
+ flex-grow: 0;
|
|
|
+ flex-basis: auto;
|
|
|
+ align-items: stretch;
|
|
|
+ align-content: flex-start;
|
|
|
+
|
|
|
+ .video-wrapper {
|
|
|
+ display: flex;
|
|
|
+ justify-content: center;
|
|
|
+ height: 100vh;
|
|
|
+ }
|
|
|
+ }
|
|
|
+
|
|
|
+ .video {
|
|
|
+ position: relative;
|
|
|
+ flex: 1;
|
|
|
+ /* #ifndef APP-PLUS */
|
|
|
+ width: 100%;
|
|
|
+ /* #endif */
|
|
|
+ }
|
|
|
+
|
|
|
+ .lj-navbar {
|
|
|
+ position: fixed;
|
|
|
+ z-index: 99;
|
|
|
+
|
|
|
+ .cu-bar {
|
|
|
+ flex-direction: row;
|
|
|
+ color: #fff;
|
|
|
+ }
|
|
|
+
|
|
|
+ .cu-bar .action:first-child {
|
|
|
+ margin-left: 50rpx;
|
|
|
+ }
|
|
|
+ }
|
|
|
+
|
|
|
+ /* 菜单部分 */
|
|
|
+ .lj-menu-button {
|
|
|
+ position: absolute;
|
|
|
+ right: 20rpx;
|
|
|
+ bottom: 260rpx;
|
|
|
+ z-index: 999;
|
|
|
+ }
|
|
|
+
|
|
|
+ /* 医生信息部分 */
|
|
|
+ .doctorInfo-wrap {
|
|
|
+ position: absolute;
|
|
|
+ width: 562rpx;
|
|
|
+ height: 186rpx;
|
|
|
+ color: #fff;
|
|
|
+ bottom: 80rpx;
|
|
|
+ left: 30rpx;
|
|
|
+ }
|
|
|
+</style>
|