Skip to content

U
uniapp_vedio
Commit 29a1056d authored by jyx's avatar jyx
Browse files
Options

代码优化

parent fb0b06a1
Hide whitespace changes
Inline Side-by-side
Showing with 42 additions and 731 deletions
vedio/components/home/follow.vue
View file @ 29a1056d
...@@ -95,7 +95,7 @@ ...@@ -95,7 +95,7 @@
this.$emit("goRecommend") this.$emit("goRecommend")
}, },
click(detail) { click(detail) {
navigateTo(`/pagesC/video/newVideoDetail?data=` + encodeURIComponent(JSON.stringify(detail))) navigateTo(`/pagesC/video/ttVideoDetail?data=` + encodeURIComponent(JSON.stringify(detail)))
}, },
longClick(key) { longClick(key) {
this.isEditStyle = true this.isEditStyle = true
......
vedio/components/home/index.vue
View file @ 29a1056d
...@@ -311,19 +311,15 @@ ...@@ -311,19 +311,15 @@
}); });
}, },
handleBanner(item) { handleBanner(item) {
// navigateTo(`/pagesC/video/newVideoDetail?data=` + encodeURIComponent(JSON.stringify(item)));
navigateTo(`/pagesC/ttvideo/ttVideoDetail?data=` + encodeURIComponent(JSON.stringify(item))); navigateTo(`/pagesC/ttvideo/ttVideoDetail?data=` + encodeURIComponent(JSON.stringify(item)));
}, },
handleInfo(item) { handleInfo(item) {
// navigateTo(`/pagesC/video/newVideoDetail?data=` + encodeURIComponent(JSON.stringify(item)));
navigateTo(`/pagesC/ttvideo/ttVideoDetail?data=` + encodeURIComponent(JSON.stringify(item))); navigateTo(`/pagesC/ttvideo/ttVideoDetail?data=` + encodeURIComponent(JSON.stringify(item)));
}, },
handleTop(item) { handleTop(item) {
// navigateTo(`/pagesC/video/newVideoDetail?data=` + encodeURIComponent(JSON.stringify(item)));
navigateTo(`/pagesC/ttvideo/ttVideoDetail?data=` + encodeURIComponent(JSON.stringify(item))); navigateTo(`/pagesC/ttvideo/ttVideoDetail?data=` + encodeURIComponent(JSON.stringify(item)));
}, },
handleBottomPlay(item) { handleBottomPlay(item) {
// navigateTo(`/pagesC/video/newVideoDetail?data=` + encodeURIComponent(JSON.stringify(item)));
navigateTo(`/pagesC/ttvideo/ttVideoDetail?data=` + encodeURIComponent(JSON.stringify(item))); navigateTo(`/pagesC/ttvideo/ttVideoDetail?data=` + encodeURIComponent(JSON.stringify(item)));
}, },
handleBottomClose() { handleBottomClose() {
......
vedio/components/home/recommendVideo.vue
View file @ 29a1056d
...@@ -236,7 +236,7 @@ ...@@ -236,7 +236,7 @@
this.isqp = e.detail.show this.isqp = e.detail.show
}, },
detail(detail) { detail(detail) {
navigateTo(`/pagesC/video/newVideoDetail?data=` + encodeURIComponent(JSON.stringify(detail)) + navigateTo(`/pagesC/video/ttVideoDetail?data=` + encodeURIComponent(JSON.stringify(detail)) +
`&playNext=1`) `&playNext=1`)
}, },
collect(vedioId, index) { collect(vedioId, index) {
......
vedio/pages.json
View file @ 29a1056d
...@@ -84,25 +84,16 @@ ...@@ -84,25 +84,16 @@
}, { }, {
"root": "pagesC", "root": "pagesC",
"pages": [{ "pages": [{
"path": "ttvideo/ttVideoDetail", "path": "ttvideo/ttVideoDetail",
"style": { "style": {
"navigationStyle": "default", "navigationStyle": "default",
"navigationBarBackgroundColor": "#000000", "navigationBarBackgroundColor": "#000000",
"navigationBarTextStyle": "#ffffff", "navigationBarTextStyle": "#ffffff",
"usingComponents ": { "usingComponents ": {
"video-player": "ext://industry/video-player" "video-player": "ext://industry/video-player"
}
}
},
{
"path": "video/newVideoDetail",
"style": {
"navigationStyle": "default",
"navigationBarBackgroundColor": "#000000",
"navigationBarTextStyle": "#ffffff"
} }
} }
] }]
}, },
{ {
"root": "pagesD", "root": "pagesD",
...@@ -147,19 +138,18 @@ ...@@ -147,19 +138,18 @@
"pages/home": { "pages/home": {
"network": "all", //在指定网络下预下载，可选值为：all（不限网络）、wifi（仅wifi下预下载） "network": "all", //在指定网络下预下载，可选值为：all（不限网络）、wifi（仅wifi下预下载）
"packages": ["pagesA", "pagesC", "pagesD"] //进入页面后预下载分包 "packages": ["pagesA", "pagesC", "pagesD"] //进入页面后预下载分包
},
"pages/recommend/recommend": {
"network": "all", //在指定网络下预下载，可选值为：all（不限网络）、wifi（仅wifi下预下载）
"packages": ["pagesC"] //进入页面后预下载分包
},
"pages/my/my": {
"network": "all", //在指定网络下预下载，可选值为：all（不限网络）、wifi（仅wifi下预下载）
"packages": ["pagesD"] //进入页面后预下载分包
} }
// ,
// "pages/recommend/recommend": {
// "network": "all", //在指定网络下预下载，可选值为：all（不限网络）、wifi（仅wifi下预下载）
// "packages": ["pagesC"] //进入页面后预下载分包
// },
// "pages/my/my": {
// "network": "all", //在指定网络下预下载，可选值为：all（不限网络）、wifi（仅wifi下预下载）
// "packages": ["pagesD"] //进入页面后预下载分包
// }
}, },
"globalStyle": { "globalStyle": {
"backgroundColor": "#232325", "backgroundColor": "#f5f5f5",
"navigationStyle": "default", "navigationStyle": "default",
"app-plus": { "app-plus": {
"bounce": "none", "bounce": "none",
......
vedio/pages/recommend/follow.vue
View file @ 29a1056d
...@@ -95,7 +95,7 @@ ...@@ -95,7 +95,7 @@
this.$emit("goRecommend") this.$emit("goRecommend")
}, },
click(detail) { click(detail) {
navigateTo(`/pagesC/video/newVideoDetail?data=` + encodeURIComponent(JSON.stringify(detail))) navigateTo(`/pagesC/video/ttVideoDetail?data=` + encodeURIComponent(JSON.stringify(detail)))
}, },
longClick(key) { longClick(key) {
this.isEditStyle = true this.isEditStyle = true
......
vedio/pages/recommend/recommendVideo.vue
View file @ 29a1056d
...@@ -236,7 +236,7 @@ ...@@ -236,7 +236,7 @@
this.isqp = e.detail.show this.isqp = e.detail.show
}, },
detail(detail) { detail(detail) {
navigateTo(`/pagesC/video/newVideoDetail?data=` + encodeURIComponent(JSON.stringify(detail)) + navigateTo(`/pagesC/video/ttVideoDetail?data=` + encodeURIComponent(JSON.stringify(detail)) +
`&playNext=1`) `&playNext=1`)
}, },
collect(vedioId, index) { collect(vedioId, index) {
......
vedio/pagesC/ttvideo/ttVideoDetail.vue
View file @ 29a1056d
...@@ -2,23 +2,20 @@ ...@@ -2,23 +2,20 @@
<view style="width: 100%;height: 100%;"> <view style="width: 100%;height: 100%;">
<!-- <status-title style="position: absolute;" iconColor="white" :showBack="true" /> --> <!-- <status-title style="position: absolute;" iconColor="white" :showBack="true" /> -->
<swiper class="swiper" circular @change="swiperChange" :current="current" :vertical="true" :duration="duration"> <swiper class="swiper" circular @change="swiperChange" :current="current" :vertical="true" :duration="duration">
<swiper-item v-for="(list, index) in displaySwiperList" :key="index"> <swiper-item v-for="(list, index) in displaySwiperList" :key="index" @click="tapVides()">
<block> <block>
<tt-video-player v-if="canUseTTPlayer && Math.abs(displayIndex-index)==0" :id="list.vedioIndex" <tt-video-player v-if="canUseTTPlayer && Math.abs(displayIndex-index)==0" :id="list.vedioIndex"
:album-id="list.douyinAlbumId" :episode-id="list.douyinEpisodeId" :cloud-type="1" version="1" :album-id="list.douyinAlbumId" :episode-id="list.douyinEpisodeId" :cloud-type="1" version="1"
object-fit="contain" :controls="controls" :poster="data.coverImage" :loop="!isplay" object-fit="contain" :controls="controls" :poster="data.coverImage" :loop="!isplay"
@getsource="getsource" :enable-progress-gesture="false" :show-loading="true" :autoplay="!list.lock" :enable-progress-gesture="false" :show-loading="true" @play="startPlay"
:show-fullscreen-btn="false" @controlstoggle="controlstoggle" @timeupdate="timeUpdate" :show-fullscreen-btn="false" @controlstoggle="controlstoggle" @timeupdate="timeUpdate"
@ended="ended" @click="tapVides()" @error="error"> @ended="ended" />
<cover-view>{{list.douyinAlbumId}}</cover-view>
<cover-view>{{list.douyinEpisodeId}}</cover-view>
</tt-video-player>
<video v-if="!canUseTTPlayer && Math.abs(displayIndex-index)==0" :id="list.vedioIndex" <video v-if="!canUseTTPlayer && Math.abs(displayIndex-index)==0" :id="list.vedioIndex"
@ended="ended" :controls="controls" :loop="!isplay" :enable-progress-gesture="false" @ended="ended" :controls="controls" :loop="!isplay" :enable-progress-gesture="false"
:show-loading="true" :show-fullscreen-btn="false" @controlstoggle="controlstoggle" :show-loading="true" :show-fullscreen-btn="false" @controlstoggle="controlstoggle"
:poster="data.coverImage" @click="tapVides()" @timeupdate="timeupdate" :autoplay="!list.lock" :poster="data.coverImage" @timeupdate="timeupdate" :autoplay="!list.lock" :src="list.vedioUrl"
:src="list.vedioUrl" class="tsvideo" play-btn-position="center" object-fit="contain" /> class="tsvideo" play-btn-position="center" object-fit="contain" />
<view v-if="originList[originIndex].lock || !list.vedioUrl" class="videoHover tsimg" <view v-if="originList[originIndex].lock || !list.vedioUrl" class="videoHover tsimg"
@click.stop="tapVideoHover(index,list.pays)" @click.stop="tapVideoHover(index,list.pays)"
...@@ -125,8 +122,6 @@ ...@@ -125,8 +122,6 @@
showCoinPop: false, showCoinPop: false,
vipBackPage: '', vipBackPage: '',
canUseTTPlayer: true, canUseTTPlayer: true,
ttPreloadAlbumId: '',
ttPreloadEpisodeId: '',
}; };
}, },
onLoad(options) { onLoad(options) {
...@@ -142,9 +137,6 @@ ...@@ -142,9 +137,6 @@
// #ifdef MP-TOUTIAO // #ifdef MP-TOUTIAO
this.canUseTTPlayer = tt.canIUse('video-player') this.canUseTTPlayer = tt.canIUse('video-player')
if (this.canUseTTPlayer && tt.canIUse('preloadResourceVideo')) {
this.preloadplaylet()
}
this.ttuop = 64 this.ttuop = 64
// #endif // #endif
...@@ -167,27 +159,32 @@ ...@@ -167,27 +159,32 @@
return result; return result;
}, },
methods: { methods: {
startPlay() {
if (tt.canIUse('preloadResourceVideo')) {
this.preloadplaylet()
}
},
preloadplaylet() { preloadplaylet() {
var preIndex = 0
if (this.displayIndex < 2) {
preIndex = this.displayIndex + 1
} else {
preIndex = 0
}
// 抖音预加载 // 抖音预加载
tt.preloadResourceVideo({ tt.preloadResourceVideo({
albumId: '7312714531850388019', albumId: this.displaySwiperList[preIndex].douyinAlbumId,
episodeId: '7312719321847529984', episodeId: this.displaySwiperList[preIndex].douyinEpisodeId,
cloudType: 1, cloudType: 1,
version: 1, version: 1,
success: () => { success: () => {
console.log("短剧预加载成功", ); console.log("短剧预加载成功" + this.displaySwiperList[preIndex].douyinEpisodeId);
}, },
fail: (error) => { fail: (error) => {
console.log("短剧预加载失败", error); console.log("短剧预加载失败", error);
}, },
}); });
}, },
getsource(e) {
console.log('AAAAAAA ' + e)
},
error(e) {
console.log('BBBBBBB ' + e)
},
paySuccess(largeType) { paySuccess(largeType) {
// largeType=vip 开通vip // largeType=vip 开通vip
// largeType=point 购买看点 // largeType=point 购买看点
...@@ -213,8 +210,6 @@ ...@@ -213,8 +210,6 @@
// return // return
// } // }
console.log('AAAAAAA')
this.$nextTick(() => { this.$nextTick(() => {
// 延迟渲染，否则位置错乱 // 延迟渲染，否则位置错乱
this.showCoinPop = true this.showCoinPop = true
......
vedio/pagesC/video/newVideoDetail.vue deleted 100644 → 0
View file @ fb0b06a1
<template>
<view style="width: 100%;height: 100%;">
<!-- <status-title style="position: absolute;" iconColor="white" :showBack="true" /> -->
<swiper class="swiper" circular @change="swiperChange" :current="current" :vertical="true" :duration="duration">
<swiper-item v-for="(list, index) in displaySwiperList" :key="index">
<view style="width:100%; height:100%;">
<video v-if="Math.abs(displayIndex-index)==0 && list.vedioUrl" :id="list.vedioIndex" @ended="ended"
:controls="controls" :loop="!isplay" :enable-progress-gesture="false" :show-loading="true"
:show-fullscreen-btn="false" @controlstoggle="controlstoggle" :poster="data.coverImage"
@click="tapVides()" @timeupdate="timeupdate" :autoplay="!list.lock" :src="list.vedioUrl"
class="tsvideo" play-btn-position="center" object-fit="contain" />
<view v-if="!isqp" class="userInfo">
<!-- 点赞 -->
<view class="flex" style="opacity: 0.9; margin-top: 10rpx;">
<image @click.stop="collect(data.vedioId,index)" v-if="data.collect==0"
src="@/static/home_collect_img_0.png" />
<image @click.stop="cancelCollect(data.vedioId,index)" v-if="data.collect==1"
src="@/static/home_collect_img_1.png" />
<text
style="margin: 0 auto;margin-top: 120rpx;color: #FFFFFF;font-size: 26rpx;font-weight: bold;"
:class="{'likeNumActive':data.collect!=0}">{{data.hot}}</text>
</view>
<!-- 分享 -->
<view v-show="false" class="flex" style="opacity: 0.9; margin-top: 10rpx;">
<image src="@/static/video/share-fill.png" />
<text
style="margin: 0 auto;margin-top: 110rpx; color: #FFFFFF;font-size: 26rpx; font-weight: bold;">分享</text>
<button open-type="share"
style="position: absolute;;background: none; width: 80rpx; height: 80rpx; right: 10rpx;"
@click.stop="reShare" />
</view>
</view>
<!-- 最底下的文字部分 -->
<view v-if="!isqp" class="contentcd flex">
<text class="userName">{{data.title}}</text>
<text class="words">{{list.title}}</text>
<view class="wordss2" @click.stop="sellxj()">
<image src="@/static/video/layers.png" />
<text
class="wordss">{{'共'+data.vedioTotal+'集' + ((data.completeStatus==0)?' 已完结':' 更新中')}}</text>
<image class="wordsss" src="@/static/up.png" />
</view>
</view>
<view v-if="originList[originIndex].lock || !list.vedioUrl" class="videoHover tsimg"
@click.stop="tapVideoHover(index,list.pays)"
:style="'width: '+ windowWidth +'px; height:'+100+'%;'">
<image :src="data.coverImage"
:style="'width: 100%; height:'+100+'%; background-color: #000; position: absolute;'"
mode="aspectFit" />
<image class="playState" src="@/static/video/play.png" />
</view>
</view>
</swiper-item>
</swiper>
<uni-popup type="bottom" ref="select">
<view
:style="'width: '+ windowWidth +'px; height: 860rpx; background-color: #202020; border-radius:20rpx 20rpx 0 0;'">
<view style="height: 70rpx;display: flex; flex-direction: row;align-items: center;">
<image src="@/static/video/layers.png" style="width: 40rpx; height: 40rpx; margin-left: 20rpx;" />
<view
:style="'font-size: 30rpx; font-weight: bold; color: #FFFFFF; margin-left: 20rpx; overflow: hidden;'">
当前播放第{{ Number(originIndex+1) }}集
</view>
<image @click="down" src="@/static/video/down.png"
style="width: 50rpx; height: 50rpx; margin:0 20rpx 0 auto; ">
</image>
</view>
<u-tabs v-if="showTap" :current="tabIndex" :list="tabs" @change="popHandleChange" lineWidth="30"
lineColor="#f56c6c" :activeStyle="{
color: '#f56c6c',
fontWeight: 'bold',
transform: 'scale(1.05)'
}" :inactiveStyle="{
color: '#ffffff',
transform: 'scale(1)'
}"></u-tabs>
<swiper class="swiper mt-20" @change="popSwiperChange" :current="tabIndex" :vertical="false" circular>
<swiper-item v-for="(list, index1) in subList" :key="index1">
<scroll-view :style="'width: '+ (windowWidth) +'px; height: '+ ((windowHeight/1.6)*0.85) +'px;'"
:scroll-y="true">
<view class="flex space" style="display:flex; flex-wrap:wrap;">
<block v-for="(list,index2) in subList[index1]">
<view @click.stop="selectThisVideo(index2 + (index1%30*30))"
style="position: relative;width:16%;height: 120rpx; background: gray;border-radius: 10rpx;margin-left: 5rpx;margin-bottom: 5rpx;">
<image v-if="originList[
(index1 == 0 ? index2 : (index2 + (index1%30*30)))
].lock" src="@/static/video/lock.png"
style="width:30rpx;height:30rpx;position:absolute;right:5rpx;top:5rpx;" />
<view class="flex"
style="width:100%;height:100%;align-items:center;justify-content:center;">
<text v-if="(originIndex+1)==list.vedioIndex"
style="font-size: 36rpx;color: #f56c6c;">{{list.vedioIndex}}</text>
<text v-else
style="font-size: 36rpx;color: #FFFFFF;">{{list.vedioIndex}}</text>
</view>
<image v-if="(originIndex+1)==list.vedioIndex"
src="https://mints-pkg.oss-cn-beijing.aliyuncs.com/pkg/img/ic_playing.gif"
style="width:30rpx;height:30rpx;position:absolute;left:5rpx;bottom:5rpx;" />
</view>
</block>
</view>
</scroll-view>
</swiper-item>
</swiper>
</view>
</uni-popup>
<coin-popup :show="showCoinPop" :point="data.point" :vedioId="data.vedioId" @close="showCoinPop = false"
@paySuccess="paySuccess">
</coin-popup>
</view>
</template>
<script>
import common from '@/mixins/common';
import {
getSubList
} from "@/utils/utils.js"
import uniPopup from '@/components/uni-popup/uni-popup.vue';
import coinPopup from '@/components/coin-popup/coin-popup.vue';
import {
navigateTo,
} from '@/utils/fun.js';
import {
data
} from '../../uni_modules/uview-ui/libs/mixin/mixin';
import {
ref
} from "vue";
export default {
name: "newVideoDetail",
mixins: [common],
components: {
uniPopup,
coinPopup
},
data() {
return {
controls: false,
originList: [], // 源数据
displaySwiperList: [], // swiper需要的数据
displayIndex: 0, // 用于显示swiper的真正的下标数值只有：0，1，2。
originIndex: 0, // 记录源数据的下标
windowWidth: 0,
windowHeight: 0,
current: 0, // swiper 下标
oid: 0,
isplay: true, //是否自动播放下一个视频
duration: 500,
isqp: false,
safeArea: 0,
ttuop: 0,
data: {},
isPlayNext: 0,
tabIndex: 0,
tabs: [],
subList: [],
showTap: false,
showCoinPop: false,
vipBackPage: '',
};
},
onLoad(options) {
this.data = JSON.parse(decodeURIComponent(options.data));
if (decodeURIComponent(options.isPlayNext) != undefined) {
this.isPlayNext = decodeURIComponent(options.isPlayNext);
}
uni.getSystemInfo({
success: res => {
this.safeArea = res.safeAreaInsets.bottom;
}
})
// #ifdef MP-TOUTIAO
this.ttuop = 64
// #endif
this.windowWidth = uni.getSystemInfoSync().windowWidth
this.windowHeight = uni.getSystemInfoSync().windowHeight - this.safeArea - this.ttuop
console.log(this.windowHeight)
this.getData()
},
onShow() {
// 从VIP页面返回关闭弹框
this.down()
},
methods: {
paySuccess(largeType) {
// largeType=vip 开通vip
// largeType=point 购买看点
// largeType=curVedio 解锁当前剧所有集
if (largeType == 'vip') {
this.vipBackPage = this.originIndex
this.getData()
} else if (largeType == 'point') {
this.unlock(this.originIndex)
} else {
this.vipBackPage = this.originIndex
this.getData()
}
},
showPayDialog() {
// let isIOS = wx.getSystemInfoSync().platform;
// if (isIOS === 'ios') {
// uni.showToast({
// title: '暂不支持IOS系统',
// icon: 'none'
// })
// return
// }
this.$nextTick(() => {
// 延迟渲染，否则位置错乱
this.showCoinPop = true
})
},
govip() {
navigateTo(`/pagesA/vipPay/vipPay`)
},
timeupdate(event) {
// if (event.detail.currentTime > 0 && this.originList[this.originIndex].lock) {
// uni.createVideoContext('' + this.originList[this.originIndex].vedioIndex, this).seek(0);
// uni.createVideoContext('' + this.originList[this.originIndex].vedioIndex, this).pause();
// this.unlock(this.originIndex)
// }
},
selectThisVideo(index) {
this.down();
if (this.originIndex == index) {
return
}
this.oid = this.originIndex
this.duration = 20;
this.originIndex = index
this.initSwiperData(this.originIndex);
setTimeout(() => {
this.duration = 500;
}, 500)
},
down() {
try {
this.$refs.select.close();
} catch {}
},
sellxj() {
this.$refs.select.open('bottom');
this.$nextTick(() => {
this.tabIndex = parseInt(this.originIndex / 30)
// 延迟渲染，否则位置错乱
this.showTap = true
})
},
tapVideoHover(index, pays) {
if (this.originList[this.originIndex].lock) {
this.unlock(this.originIndex)
}
},
tapVides() {
if (this.controls) return
this.isqp = true
this.controls = true
},
unlock(num) {
let that = this
this.post({
url: '/vedio/unlock',
data: {
vedioId: this.data.vedioId,
num: (num + 1)
},
showLoading: false,
success: ({
data
}) => {
uni.showToast({
title: data.msg,
icon: 'none'
})
if (data.code == 200) {
that.originList[that.originIndex].lock = false
setTimeout(() => {
uni.createVideoContext('' + that.originList[that.originIndex]
.vedioIndex,
that)
.play();
that.commitVideo()
}, 500)
} else if (data.code == 301) {
that.originList[that.originIndex].lock = false
setTimeout(() => {
uni.createVideoContext('' + that.originList[that.originIndex]
.vedioIndex,
that)
.play();
that.commitVideo()
}, 500)
} else if (data.code == 302) {
that.originList[that.originIndex].lock = false
setTimeout(() => {
uni.createVideoContext('' + that.originList[that.originIndex]
.vedioIndex,
that)
.play();
that.commitVideo()
}, 500)
} else if (data.code == 303) {
that.showPayDialog()
}
}
});
},
getData() {
let that = this
this.originList = []
this.post({
url: '/vedio/getIndexList',
data: {
vedioId: this.data.vedioId
},
showLoading: false,
success: ({
data
}) => {
that.originList = data.list
if (that.vipBackPage != '') {
that.originIndex = that.vipBackPage
that.vipBackPage = ''
} else {
if (that.isPlayNext == 1) {
that.originIndex = that.data.recommendIndex - 1
} else {
that.originIndex = that.data.seeIndex - 1
}
if (that.originIndex >= that.data.vedioTotal || that.originIndex < 0) {
that.originIndex = 0
}
}
that.data = data.vedioMsg
that.initSwiperData(that.originIndex);
that.initEpisode()
}
});
},
ended() {
// 1.播放当前视频结束时触发，自动切换下一个视频
if (this.isplay) {
if (this.displayIndex < 2) {
this.current = this.displayIndex + 1
} else {
this.current = 0
}
console.log('显示swiper Index:', this.displayIndex)
}
},
/**
* 初始一个显示的swiper数据
* @originIndex 从源数据的哪个开始显示默认0，如从其他页面跳转进来，要显示第n个，这个参数就是他的下标
*/
initSwiperData(originIndex = this.originIndex) {
console.log('--------当前数据 Index:', originIndex)
const originListLength = this.originList.length; // 源数据长度
const displayList = [];
displayList[this.displayIndex] = this.originList[originIndex];
displayList[this.displayIndex - 1 == -1 ? 2 : this.displayIndex - 1] =
this.originList[
originIndex - 1 == -1 ? originListLength - 1 : originIndex - 1
];
displayList[this.displayIndex + 1 == 3 ? 0 : this.displayIndex + 1] =
this.originList[
originIndex + 1 == originListLength ? 0 : originIndex + 1
];
this.displaySwiperList = displayList;
if (this.oid >= this.originList.length) {
this.oid = 0
}
if (this.oid < 0) {
this.oid = this.originList.length - 1
}
console.log('++++++++++++上一条播放数据 Index:', this.oid)
uni.createVideoContext('' + this.originList[this.oid].vedioIndex, this).pause();
if (this.originList[originIndex].lock) {
this.unlock(this.originIndex)
} else {
setTimeout(() => {
uni.createVideoContext('' + this.originList[originIndex].vedioIndex, this).play();
this.commitVideo()
}, 500)
}
},
/**
* swiper滑动时候
*/
swiperChange(event) {
const {
current
} = event.detail;
const originListLength = this.originList.length; // 源数据长度
// =============向后==========
if (this.displayIndex - current == 2 || this.displayIndex - current == -1) {
this.originIndex =
this.originIndex + 1 == originListLength ? 0 : this.originIndex + 1;
this.displayIndex = this.displayIndex + 1 == 3 ? 0 : this.displayIndex + 1;
console.log('+++', this.originIndex)
this.oid = this.originIndex - 1
this.initSwiperData(this.originIndex);
}
// ======如果两者的差为-2或者1则是向前滑动============
else if (this.displayIndex - current == -2 || this.displayIndex - current == 1) {
this.originIndex = this.originIndex - 1 == -1 ? originListLength - 1 : this.originIndex - 1;
this.displayIndex = this.displayIndex - 1 == -1 ? 2 : this.displayIndex - 1;
console.log('---', this.originIndex)
this.oid = this.originIndex + 1
this.initSwiperData(this.originIndex);
}
this.controls = false
this.isqp = false
},
initEpisode() {
this.subList = []
this.tabs = []
this.subList = getSubList(30, this.originList)
for (let i = 0; i < this.subList.length; i++) {
this.tabs.push({
name: Number(1 + (i % 30 * 30)) + "-" + Number(this.subList[i].length + (i % 30 *
30)),
})
}
},
popSwiperChange(event) {
const {
current
} = event.detail;
this.tabIndex = current
},
popHandleChange(event) {
this.tabIndex = event.index;
},
controlstoggle(e) {
if (!this.controls) return
this.isqp = e.detail.show
},
collect(vedioId, index) {
this.data.collect = 1
// 收藏
this.post({
url: '/vedio/collect',
data: {
vedioId
},
showLoading: false,
success: ({
data
}) => {}
});
},
cancelCollect(vedioId, index) {
this.data.collect = 0
// 取消收藏
this.post({
url: '/vedio/cancelCollect',
data: {
vedioId
},
showLoading: false,
success: ({
data
}) => {}
});
},
commitVideo() {
// 提交后台
let that = this
this.post({
url: '/vedio/reportIndex',
data: {
vedioIndex: this.originList[this.originIndex].vedioIndex,
vedioId: this.data.vedioId
},
showLoading: false,
success: ({
data
}) => {}
});
},
},
};
</script>
<style lang="scss" scoped>
page {
background: #000000;
}
.title {
width: 100%;
display: flex;
justify-content: center;
align-items: center;
height: 60rpx;
}
.swiper {
width: 100%;
height: 100%;
}
.videoHover {
position: absolute;
top: 0;
left: 0;
display: flex;
background-color: rgba(0, 0, 0, 0.1);
justify-content: center;
align-items: center;
.tsimg {}
}
.playState {
width: 160rpx;
height: 160rpx;
opacity: 0.2;
}
.userInfo {
position: absolute;
z-index: 99;
bottom: 30%;
right: 10px;
width: 100rpx;
display: flex;
flex-direction: column;
image {
width: 76rpx;
height: 76rpx;
position: absolute;
right: 10rpx;
}
}
.shareIco {
width: 60rpx;
height: 60rpx;
margin-top: 15px;
}
.shareTex {
color: #ffffff;
font-size: 30rpx;
text-align: center;
margin: 5px;
}
.likeNumActive {
color: red;
}
.gdfgjh {
font-size: 30rpx;
font-weight: 600;
line-height: 90rpx;
background: #fff;
border-radius: 18rpx;
padding: 0 20rpx;
text-align: center;
margin-bottom: 50rpx;
margin-left: 50rpx;
margin-right: 50rpx;
}
.tsvideo {
width: 100%;
height: 100%;
animation: showDivAni 1s 1;
}
@keyframes showDivAni {
0% {
opacity: 0;
}
100% {
opacity: 1;
}
}
.tsimg {
// animation: fadenum12 10s 1;
}
.contentcd {
z-index: 99;
left: 4%;
width: 92%;
position: absolute;
bottom: 30rpx;
color: #ffffff;
flex-direction: column;
align-items: flex-start;
}
.userName {
font-size: 36rpx;
color: #ffffff;
margin-left: 10rpx;
}
.wordss {
font-size: 30rpx;
color: #ffffff;
margin-left: 10rpx;
}
.wordss2 {
width: 100%;
height: 80rpx;
opacity: 0.8;
background: black;
display: flex;
flex-direction: row;
align-items: center;
border-radius: 60rpx;
margin-top: 20rpx;
image {
margin-left: 20rpx;
width: 40rpx;
height: 40rpx;
}
.wordsss {
margin-right: 20rpx;
margin-left: auto;
width: 50rpx;
height: 50rpx;
}
}
.words {
margin-top: 20rpx;
margin-left: 10rpx;
font-size: 30rpx;
color: #ffffff;
}
@keyframes fadenum12 {
0% {
opacity: 1;
}
10% {
opacity: 0.8;
}
100% {
opacity: 0;
}
}
</style>
\ No newline at end of file
vedio/pagesD/watchRecord/watchRecord.vue
View file @ 29a1056d
...@@ -83,7 +83,7 @@ ...@@ -83,7 +83,7 @@
}); });
}, },
handleInfo(item) { handleInfo(item) {
navigateTo(`/pagesC/video/newVideoDetail?data=` + encodeURIComponent(JSON.stringify(item))); navigateTo(`/pagesC/video/ttVideoDetail?data=` + encodeURIComponent(JSON.stringify(item)));
}, },
handleXing(item) { handleXing(item) {
var that = this; var that = this;
......
vedio/scss/uni.scss
View file @ 29a1056d
...@@ -4,7 +4,7 @@ ...@@ -4,7 +4,7 @@
$main-color: #03E7C9; $main-color: #03E7C9;
$second-color: #413F48; $second-color: #413F48;
/* 背景颜色 */ /* 背景颜色 */
$bg-color: #232325; $bg-color: #f5f5f5;
$bg-color-gray: #f8f8f8; $bg-color-gray: #f8f8f8;
$bg-color-hover: #f1f1f1; //点击状态颜色 $bg-color-hover: #f1f1f1; //点击状态颜色
$bg-color-mask: rgba(0, 0, 0, 0.5); //遮罩颜色 $bg-color-mask: rgba(0, 0, 0, 0.5); //遮罩颜色
......
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment