czg_team/new_app
7
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

增加视频播放页面

Browse Source
This commit is contained in:
YeMingfei666
2025-01-09 09:28:14 +08:00
parent b6eb3b0d35
commit 8572bebabb
16 changed files with 3098 additions and 104 deletions
Download Patch File Download Diff File Expand all files Collapse all files

643
components/my-video-list/my-video-list.vue
View File

@@ -1,60 +1,292 @@
<template>
<view class="u-flex-1">
<!-- #ifdef H5 -->
<swiper @change="swiperChange" :current="current" :circular="true" vertical class="u-flex-1"
@transition="transition" :indicator-dots="false" :autoplay="false" :interval="0" :duration="200">
<!-- #ifdef H5 -->
<view class=" w-full box" style="width: 100vw;">
<swiper v-if="videoList.length" @change="swiperChange" :current="current" :circular="true" vertical
class="u-flex-1" @transition="transition" :indicator-dots="false" :autoplay="false" :interval="0"
:duration="200">
<swiper-item v-for="(item,index) in videoList" :key="index">
<video class="u-flex-1 video" :show-fullscreen-btn="false" @controlstoggle="controlstoggles"
v-if="current === index && item.videoUrl" @waiting="waiting()" object-fit="cover"
@play="videoPlay('myVideo'+item.courseDetailsId,item.courseDetailsId)" :play-strategy="2"
:show-loading="true" codec="software" :muted="false" :show-center-play-btn="true" :loop="false"
:enable-progress-gesture="false" :poster="item.titleImg" :ref="'myVideo'+item.courseDetailsId"
@ended="ended" :id="'myVideo'+item.courseDetailsId" :src="item.videoUrl"
:autoplay="item.autoPlay"></video>
<image class="poster" v-else @click="openShowPay(current,index,item.videoUrl)" :src="item.titleImg"
mode="aspectFill"></image>
<view class="info">
<text v-if="item.courseDetailsName">{{item.courseDetailsName}}</text>
<view v-if="item.content" v-html="item.content"></view>
<text class="u-m-t-20">
{{item.courseDetailsName}}（共{{list.length}}集）选集 >
</text>
</view>
<view class="right">
<view class="love u-m-b-40 u-flex-y-center u-flex-x-center u-text-center">
<up-icon name="heart-fill" v-if="item.isGood==1" color="red" size="30"></up-icon>
<up-icon name="heart-fill" v-else color="#ffffff" size="30"></up-icon>
<text class="text">{{item.goodNum}}</text>
</view>
<view class="share u-m-b-40 u-flex-y-center u-flex-x-center u-text-center" @click="share(item)">
<image class="icon" src="@/static/images/share.png" mode=""></image>
<text class="text">分享</text>
</view>
<view class="zhuiju u-m-b-40 u-flex-y-center u-flex-x-center u-text-center" @click="zhuijuClick">
<image class="icon" v-if="isCollect" src="@/static/images/shuqian.png" mode=""></image>
<image class="icon" v-else src="@/static/images/shuqian_s.png" mode=""></image>
<text class="text">{{isCollect?'已追':'追剧'}}</text>
</view>
</view>
<list-item-vue :total="list.length" :item="item" :current="current" :isCollect="isCollect"
:index="index" :nowIndex="nowIndex" @dianzanClick="dianzanClick(item,index)" @share="share(item)"
@zhuijuClick="zhuijuClick(item)" @popupShow="popupShow"></list-item-vue>
</swiper-item>
</swiper>
<!-- #endif -->
</view>
<!-- #endif -->
<!-- #ifdef APP -->
<list :bounce="false" :loadmoreoffset="wHeight*3" :show-scrollbar="false" ref="listBox" :pagingEnabled="true"
@loadmore="loadmore" :scrollable="true">
<cell v-for="(item,index) in list" :key="item.courseDetailsId" :ref="setRefList(index)">
<view class="swipers-items" :style="boxStyle">
<list-item-vue :total="list.length" :item="item" :current="current" :isCollect="isCollect"
:index="index" :instance="instance" :nowIndex="nowIndex" @appear="appear(item,index)"
@disappear="disappear(item,index)" @dianzanClick="dianzanClick(item,index)" @share="share(item)"
@zhuijuClick="zhuijuClick(item)" @popupShow="popupShow"></list-item-vue>
</view>
</cell>
</list>
<!-- #endif -->
<!-- 选集 -->
<up-popup :show="popup.show" :round="10" @close="popupClose('show')">
<view class="u-p-30">
<view class="u-flex u-flex-row u-row-between">
<view class="u-flex u-flex-row" style="align-items: baseline;">
<text class="color-333 u-font-32 ">{{info.title}}</text>
<text class="u-font-28 color-666 u-m-l-20">共{{list.length}}集</text>
</view>
<up-icon name="close" :size="16" color="#333" bold @click="popupClose('show')"></up-icon>
</view>
<scroll-view scroll-y="true" class="u-m-t-30" style="height: 400px;box-sizing: border-box;"
:show-scrollbar="false">
<view class="ji-list u-flex u-flex-row u-flex-wrap">
<view class="ji-item u-flex-xy-center u-text-center" @click="jiClick(item,index)"
:class="{active:nowIndex==index,'mr-0':(index+1)%3==0}" v-for="(item,index) in list"
:key="index">
<text class="u-font-28" :class="{'color-fff':nowIndex==index}">第{{index+1}}集</text>
<view class="lock u-flex-xy-center" v-if="!item.videoUrl">
<up-icon name="lock" :size="14" color="#fff"></up-icon>
</view>
<image v-if="nowIndex==index" class="playing" src="@/static/images/playIng.png" mode="">
</image>
</view>
</view>
</scroll-view>
</view>
</up-popup>
<!-- 支付 -->
<up-popup :show="popup.pay" :round="10" @close="popupClose('pay')">
<view class="u-p-30">
<view class="u-flex u-flex-row u-row-between">
<view class="u-flex u-flex-row" style="align-items: baseline;">
<text class="color-333 u-font-32 ">当前视频 没有播放权限</text>
</view>
<up-icon name="close" :size="16" color="#333" bold @click="popupClose('pay')"></up-icon>
</view>
<view class="u-m-t-30">
<text class=" color-999 u-font-24">每日前10次付款均可获取抽奖机会，抽奖保底抽中付款金额等额红包，红包可直接提现。当前为第1次付款</text>
</view>
<view class="colo-333 pay-list font-bold u-font-28 u-m-t-20">
<view class="pay-list-item" v-if="info&&info.price" @click="payBtnClick">
<image class="hot" src="@/static/images/hot.png" mode=""></image>
<text class="u-font-28 font-bold">{{info.price}}元解锁全剧</text>
</view>
<view class="pay-list-item" @click="payBtnClick">
<image class="hot" src="@/static/images/hot.png" mode=""></image>
<text class="u-font-28 font-bold">{{nowDanjiPrice*jinbiBili}}金币解锁单集视频</text>
</view>
<view class="pay-list-item" @click="payBtnClick">
<!-- <image class="hot" src="@/static/images/hot.png" mode=""></image> -->
<text class="u-font-28 font-bold">{{nowDanjiPrice}}元解锁单集视频</text>
</view>
</view>
</view>
</up-popup>
<!-- 支付确认 -->
<up-popup :show="popup.payTips" :round="10" @close="popupClose('payTips')">
<view class="u-p-30">
<view class="u-flex u-flex-row u-row-between">
<view class="u-flex u-flex-row" style="align-items: baseline;">
<text class="color-333 u-font-32 ">购买后继续观看</text>
</view>
<up-icon name="close" :size="16" color="#333" bold @click="popupClose('payTips')"></up-icon>
</view>
<view class="u-flex u-m-t-24 u-flex-row u-row-between u-font-28">
<view class="u-flex u-flex-row u-flex-y-center">
<image src="@/static/images/zhifubao.png" class="zhifubao" mode=""></image>
<text class="u-m-l-20 u-flex-xy-center u-font-28">支付宝</text>
</view>
<view>
<up-radio-group>
<up-radio :icon-size="20" :size="26" :activeColor="color.main"></up-radio>
</up-radio-group>
</view>
</view>
<view class="u-m-t-10">
<text class="font-bold u-font-26 color-333">温馨提示</text>
<text class="u-m-t-10 u-font-24 color-999">一经购买不予退款，未满18岁需在监护人的指导、同意下进行付费操作</text>
</view>
<view class="u-flex u-flex-row u-m-t-30 u-flex-y-center u-font-28">
<view class="u-flex-y-center">
<up-checkbox usedAlone shape="circle" v-model="isAgree" :activeColor="color.main"></up-checkbox>
</view>
<view class="u-flex u-flex-row u-flex-y-center">
<text class="u-font-28 color-333">我已经阅读并同意</text>
<text class="color-main u-font-28">《付费须知说明》</text>
</view>
</view>
<view class="u-m-t-30 my-bg-main payConfirm">
<text class="u-font-28 color-fff">确认支付</text>
</view>
</view>
</up-popup>
<!-- 倍速 -->
<up-popup :show="popup.speed" :round="0" @close="popupClose('speed')">
<view class="u-p-20 u-flex u-flex-row u-row-between u-flex-y-center">
<text class="font-bold color-333 u-font-28">倍速:</text>
<view class="u-flex u-flex-row speed-list">
<text class="speed-list-item u-font-28" @click="changeSpeed(index)" :class="{active:index==speeds.active}"
v-for="(item,index) in speeds.list">{{item.num}}x</text>
</view>
</view>
</up-popup>
</template>
<script setup>
import {returnShareUrl} from '@/commons/config.js'
// #ifdef APP
const domModule = uni.requireNativePlugin('dom')
// #endif
import listItemVue from './list-item.vue';
import {
returnShareUrl
} from '@/commons/config.js'
import color from '@/commons/color.js'
import {
debounce
} from 'lodash';
import * as Api from '@/api/video/index.js'
import infoBox from '@/utils/infoBox.js'
import {
computed,
reactive,
ref,
watch
watch,
nextTick,
onMounted,
getCurrentInstance
} from 'vue';
const speeds = reactive({
list: [{
name: '0.5x',
num: 0.5
}, {
name: '1x',
num: 1
}, {
name: '1.25x',
num: 1.25
}, {
name: '1.5x',
num: 1.5
}],
active: 1
})
function changeSpeed(index){
speeds.active=index
uni.showToast({
title: '已切换' + speeds[index].num + '倍播放',
icon: 'none',
duration: 2000
})
}
const instance = getCurrentInstance()
let isAgree = ref(false);
const cutomStyle = {
background: 'rgb(255, 117, 129)',
height: '100rpx',
'border-radius': '100px'
}
const popup = reactive({
show: false,
pay: false,
payTips: false,
speed: false
})
function openBs() {
}
let cacheIndex = null
function appear(item, index) {
console.log(item.courseDetailsName + 'appear');
cacheIndex = index
}
function disappear(item, index) {
console.log('disappear');
if (index == nowIndex.value && cacheIndex != null) {
nowIndex.value = cacheIndex
console.log(nowIndex.value);
cacheIndex = null
}
}
//确认支付
function payConfirm() {
if (!isAgree.value) {
return infoBox.showToast('请阅读并同意 《付费须知说明》')
}
}
function payBtnClick() {
popupClose()
popupShow('payTips')
}
function jiClick(item, index) {
let newCurrent = (current.value + 1) % 3;
videoList.value[newCurrent] = item;
current.value = newCurrent;
popupClose('show')
// #ifdef APP
goListPosition(index)
// #endif
}
let refList = ref([])
function setRefList(index) {
refList.value[index] = null;
return (el) => {
if (el) {
refList.value[index] = el;
}
};
}
//滚动到指定位置
function goListPosition(index) {
console.log('index');
console.log(index);
const el = refList.value[index]
domModule.scrollToElement(el, {
animated: false
})
const item = props.list[index]
setVideoList(item)
insertHistory()
}
function popupClose(key) {
if (key) {
popup[key] = false
return
}
for (let i in popup) {
popup[i] = false
}
}
function popupShow(key = 'show') {
popup[key] = true
}
const props = defineProps({
list: {
type: Array,
@@ -62,42 +294,117 @@
[]
}
},
isCollect: {
type: Boolean,
default: false
info: {
tpye: Object,
default: () => {
return {
collect: 0,
current: {},
list: [],
price: 0,
title: ''
}
}
}
})
function posterError(){
}
function posterSuccess(){
}
const posterData=reactive({
posterShow:false
})
let videoList = ref(props.list.slice(0, 3))
watch(() => props.list.length, (newval) => {
init()
let jinbiBili = ref(0)
let wHeight = ref(0)
async function configInit() {
const res = await Api.getJinbiBili()
jinbiBili.value = res.value
const sysInfo = uni.getSystemInfoSync()
wHeight.value = sysInfo.screenHeight
}
let isCollect = ref(props.info.collect)
watch(() => props.collect, (newval) => {
isCollect.value = newval
})
function posterError() {
}
function posterSuccess() {
}
const posterData = reactive({
show: false,
// 用户姓名
name: '小明',
// 用户头像
logo: '/static/images/share.png',
// 商品名称
title: '精美时尚苹果手机一部',
// 商品价格
money: '5200.90',
// 商品图片(小程序需要换成自己服务器白名单设置的地址)
img: '',
// 商品链接
url: 'https://www.apple.com.cn/iphone/'
})
let nowIndex = ref(0)
let current = ref(0)
let videoList = ref([])
function init() {
if (current.value === 0 && nowIndex.value == 0) {
videoList.value = [props.list[0], props.list[1], props.list[props.list.length - 1]]
} else {
videoList.value = props.list.slice(0, 3)
if (JSON.stringify(props.current) !== '{}') {
// #ifdef H5
setVideoList(props.info.current)
// #endif
// #ifdef APP
const index = props.list.findIndex(v => v.courseDetailsId == props.info.current.courseDetailsId)
console.log('index' + index);
goListPosition(index)
// #endif
}
}
const emits = defineEmits(['zhuijuClick'])
function zhuijuClick() {
emits(['zhuijuClick', 'swiperChange','share'])
const emits = defineEmits(['zhuijuClick', 'swiperChange', 'share', 'update'])
function zhuijuClick(item) {
isCollect.value = !isCollect.value
zhuiju({
courseId: item.courseId,
type: isCollect.value ? 1 : 0
})
emits('zhuijuClick')
}
const zhuiju = debounce((data) => {
Api.zhuiju(data)
}, 500)
let dianZanTimer = null
function dianzanClick(item, index) {
item.isGood = !item.isGood
const newval = item.goodNum + (item.isGood ? 1 : -1)
item.goodNum = newval < 0 ? 0 : newval
emits('update', {
index,
item
})
dianzan(item, index)
}
const dianzan = debounce((item, index) => {
Api.dianzan({
courseId: item.courseId,
courseDetailsId: item.courseDetailsId,
type: item.isGood ? 1 : 0
})
}, 500)
let showControls = ref(false)
@@ -105,7 +412,6 @@
showControls.value = true
}
let current = ref(0)
function controlstoggles() {
@@ -120,18 +426,37 @@
}
function share(item) {
emits('share',item)
const urls = returnShareUrl() + '/me/detail/detail?id=' + item.courseId + '&courseDetailsId=' + item
.courseDetailsId + '&invitation=' + uni.getStorageSync('invitationCode') + '&qdCode=' + this.qdCode;
console.log(urls);
posterData.img = item.titleImg
posterData.show = true
}
let nowIndex = ref(0)
function posterHide() {
posterData.show = false
}
const insertHistory = debounce(() => {
const item = videoList.value[current.value]
Api.insertHistory({
courseId: item.courseId,
courseDetailsId: item.courseDetailsId
})
}, 1000)
function swiperChange(e) {
console.log(e);
const direction = e.detail.current > current.value ? 'down' : 'up'
console.log(e.detail.current);
current.value = e.detail.current
const item = videoList.value[e.detail.current]
insertHistory()
setVideoList(item)
}
function setVideoList(item) {
const listLen = props.list.length
const lastIndex = listLen - 1
const index = props.list.findIndex(v => v.courseDetailsId == item.courseDetailsId)
@@ -172,6 +497,9 @@
}
}
console.log(videoList.value);
if (!item.videoUrl) {
// popupShow('pay')
}
}
function transition(e) {
@@ -185,33 +513,81 @@
function waiting() {
}
configInit()
onMounted(() => {
nextTick(() => {
init()
})
})
watch(() => props.list.length, (newval) => {
// #ifdef H5
init()
// #endif
})
const nowDanjiPrice = computed(() => {
return videoList.value[current.value].price
})
function loadmore() {
console.log('loadmore');
}
const boxStyle = computed(() => {
return {
'height': wHeight.value + 'px',
'width': '750rpx',
}
})
</script>
<style lang="scss">
<style lang="scss" scoped>
.box {
/* #ifdef H5 */
flex: 1;
/* #endif */
}
.u-flex-1 {
flex: 1;
width: 100%;
height: 100%;
}
.u-popup {
position: fixed !important;
}
::v-deep .u-popup {
position: fixed !important;
}
.video {
width: 100%;
height: 100%;
}
.poster {
/* #ifdef H5 */
position: absolute;
width: 100%;
height: 90%;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
/* #endif */
/* #ifdef APP */
width: 750rpx;
flex: 1;
/* #endif */
}
.u-text-center {
text-align: center;
}
.u-flex-row {
flex-direction: row !important;
}
.info {
width: 80%;
height: auto;
@@ -223,6 +599,17 @@
z-index: 9999;
}
.u-flex-y-center {
align-items: center !important;
}
.swipers-items {
width: 750rpx;
flex: 1;
position: relative;
background-color: #000;
}
.right {
width: 60rpx;
position: absolute !important;
@@ -246,4 +633,110 @@
.zhuiju {}
}
.poster-popup {
position: fixed !important;
left: 0;
right: 0;
top: 0;
bottom: 0;
background-color: rgba(0, 0, 0, 0.6);
z-index: 9999;
justify-content: center;
align-items: center;
}
.ji-list {
.ji-item {
width: 210rpx;
margin-bottom: 20rpx;
margin-right: 30rpx;
height: 88rpx;
font-size: 28rpx;
color: #333;
border-radius: 12rpx;
background-color: #F5F7FF;
position: relative;
&.active {
background-color: $my-main-color;
color: #fff;
}
&.mr-0 {
margin-right: 0;
}
.lock {
position: absolute;
border-radius: 0px 6px 0px 6px;
background-color: #ccc;
padding: 2rpx 4rpx;
top: 0;
right: 0;
}
.playing {
position: absolute;
width: 32rpx;
height: 24rpx;
bottom: 5px;
right: 7px;
}
}
}
.ji-item:nth-of-type(3n) {
margin-right: 0;
}
.hot {
width: 40rpx;
height: 40rpx;
}
.pay-list {
.pay-list-item {
flex-direction: row;
justify-content: center;
background-color: #F2F2F2;
padding: 24rpx;
border-radius: 20rpx;
margin-bottom: 40rpx;
}
}
.payConfirm {
border-radius: 100px;
height: 100rpx;
line-height: 100rpx;
text-align: center;
justify-content: center;
align-items: center;
}
.zhifubao {
width: 56rpx;
height: 56rpx;
}
.speed-list {
align-items: center;
background-color: #eeeeef;
padding: 5px 10px;
border-radius: 5px;
.speed-list-item {
border-radius: 3px;
width: 50px;
padding: 8px 0;
justify-content: center;
align-items: center;
text-align: center;
&.active {
background-color: #ffffff;
}
}
}
</style>