Commit 7d3346d1 authored by jyx's avatar jyx

代码优化

parent 81606868
<template>
<view>
<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="showTab" :current="myTabIndex" :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="myTabIndex" :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>
</view>
</template>
<script>
export default {
name: 'episodePopup',
props: {
windowWidth: Number,
windowHeight: Number,
originIndex: Number,
tabIndex: Number,
tabs: Array,
subList: Array,
originList: Array,
},
data() {
return {
myTabIndex: this.tabIndex,
showTab: false
};
},
methods: {
show() {
this.$refs.select.open();
this.showTab = true
},
popHandleChange(event) {
this.myTabIndex = event.index
},
popSwiperChange(event) {
const {
current
} = event.detail;
this.myTabIndex = current
},
down() {
this.$refs.select.close();
},
selectThisVideo(index) {
this.$emit('selectVideo', index);
this.$refs.select.close();
}
}
}
</script>
<style>
.swiper {
width: 100%;
height: 100%;
}
</style>
\ No newline at end of file
...@@ -310,17 +310,21 @@ ...@@ -310,17 +310,21 @@
} }
}); });
}, },
handleBanner(item) { handleBanner(item) {
navigateTo(`/pagesC/video/newVideoDetail?data=` + encodeURIComponent(JSON.stringify(item))); // navigateTo(`/pagesC/video/newVideoDetail?data=` + encodeURIComponent(JSON.stringify(item)));
}, navigateTo(`/pagesC/ttvideo/ttVideoDetail?data=` + encodeURIComponent(JSON.stringify(item)));
handleInfo(item) { },
navigateTo(`/pagesC/video/newVideoDetail?data=` + encodeURIComponent(JSON.stringify(item))); handleInfo(item) {
}, // navigateTo(`/pagesC/video/newVideoDetail?data=` + encodeURIComponent(JSON.stringify(item)));
handleTop(item) { navigateTo(`/pagesC/ttvideo/ttVideoDetail?data=` + encodeURIComponent(JSON.stringify(item)));
navigateTo(`/pagesC/video/newVideoDetail?data=` + encodeURIComponent(JSON.stringify(item))); },
}, handleTop(item) {
handleBottomPlay(item) { // navigateTo(`/pagesC/video/newVideoDetail?data=` + encodeURIComponent(JSON.stringify(item)));
navigateTo(`/pagesC/video/newVideoDetail?data=` + encodeURIComponent(JSON.stringify(item))); navigateTo(`/pagesC/ttvideo/ttVideoDetail?data=` + encodeURIComponent(JSON.stringify(item)));
},
handleBottomPlay(item) {
// navigateTo(`/pagesC/video/newVideoDetail?data=` + encodeURIComponent(JSON.stringify(item)));
navigateTo(`/pagesC/ttvideo/ttVideoDetail?data=` + encodeURIComponent(JSON.stringify(item)));
}, },
handleBottomClose() { handleBottomClose() {
this.newRecordBean = null; this.newRecordBean = null;
...@@ -351,7 +355,7 @@ ...@@ -351,7 +355,7 @@
data data
}) => { }) => {
if (data.vedioMsg != null) { if (data.vedioMsg != null) {
navigateTo(`/pagesC/video/newVideoDetail?data=` + navigateTo(`/pagesC/ttvideo/ttVideoDetail?data=` +
encodeURIComponent( encodeURIComponent(
JSON.stringify(data.vedioMsg))); JSON.stringify(data.vedioMsg)));
} }
......
...@@ -11,7 +11,6 @@ ...@@ -11,7 +11,6 @@
</view> </view>
</template> </template>
<script> <script>
import uniTransition from '@/components/uni-transition/uni-transition.vue'
/** /**
* PopUp 弹出层 * PopUp 弹出层
* @description 弹出层组件,为了解决遮罩弹层的问题 * @description 弹出层组件,为了解决遮罩弹层的问题
...@@ -27,9 +26,6 @@ ...@@ -27,9 +26,6 @@
export default { export default {
name: 'UniPopup', name: 'UniPopup',
components: {
uniTransition
},
props: { props: {
// 开启动画 // 开启动画
animation: { animation: {
......
<!-- 底部弹窗需要组件(分享) -->
<template>
<view v-if="isShow" ref="ani" class="uni-transition" :class="[ani.in]" :style="'transform:' +transform+';'+stylesObject"
@click="change">
<slot></slot>
</view>
</template>
<script>
// #ifdef APP-NVUE
const animation = uni.requireNativePlugin('animation');
// #endif
/**
* Transition 过渡动画
* @description 简单过渡动画组件
* @tutorial https://ext.dcloud.net.cn/plugin?id=985
* @property {Boolean} show = [false|true] 控制组件显示或隐藏
* @property {Array} modeClass = [fade|slide-top|slide-right|slide-bottom|slide-left|zoom-in|zoom-out] 过渡动画类型
* @value fade 渐隐渐出过渡
* @value slide-top 由上至下过渡
* @value slide-right 由右至左过渡
* @value slide-bottom 由下至上过渡
* @value slide-left 由左至右过渡
* @value zoom-in 由小到大过渡
* @value zoom-out 由大到小过渡
* @property {Number} duration 过渡动画持续时间
* @property {Object} styles 组件样式,同 css 样式,注意带’-‘连接符的属性需要使用小驼峰写法如:`backgroundColor:red`
*/
export default {
name: 'uniTransition',
props: {
show: {
type: Boolean,
default: false
},
modeClass: {
type: Array,
default () {
return []
}
},
duration: {
type: Number,
default: 300
},
styles: {
type: Object,
default () {
return {}
}
}
},
data() {
return {
isShow: false,
transform: '',
ani: { in: '',
active: ''
}
};
},
watch: {
show: {
handler(newVal) {
if (newVal) {
this.open()
} else {
this.close()
}
},
immediate: true
}
},
computed: {
stylesObject() {
let styles = {
...this.styles,
'transition-duration': this.duration / 1000 + 's'
}
let transfrom = ''
for (let i in styles) {
let line = this.toLine(i)
transfrom += line + ':' + styles[i] + ';'
}
return transfrom
}
},
created() {
// this.timer = null
// this.nextTick = (time = 50) => new Promise(resolve => {
// clearTimeout(this.timer)
// this.timer = setTimeout(resolve, time)
// return this.timer
// });
},
methods: {
change() {
this.$emit('click', {
detail: this.isShow
})
},
open() {
clearTimeout(this.timer)
this.isShow = true
this.transform = ''
this.ani.in = ''
for (let i in this.getTranfrom(false)) {
if (i === 'opacity') {
this.ani.in = 'fade-in'
} else {
this.transform += `${this.getTranfrom(false)[i]} `
}
}
this.$nextTick(() => {
setTimeout(() => {
this._animation(true)
}, 50)
})
},
close(type) {
clearTimeout(this.timer)
this._animation(false)
},
_animation(type) {
let styles = this.getTranfrom(type)
// #ifdef APP-NVUE
if(!this.$refs['ani']) return
animation.transition(this.$refs['ani'].ref, {
styles,
duration: this.duration, //ms
timingFunction: 'ease',
needLayout: false,
delay: 0 //ms
}, () => {
if (!type) {
this.isShow = false
}
this.$emit('change', {
detail: this.isShow
})
})
// #endif
// #ifndef APP-NVUE
this.transform = ''
for (let i in styles) {
if (i === 'opacity') {
this.ani.in = `fade-${type?'out':'in'}`
} else {
this.transform += `${styles[i]} `
}
}
this.timer = setTimeout(() => {
if (!type) {
this.isShow = false
}
this.$emit('change', {
detail: this.isShow
})
}, this.duration)
// #endif
},
getTranfrom(type) {
let styles = {
transform: ''
}
this.modeClass.forEach((mode) => {
switch (mode) {
case 'fade':
styles.opacity = type ? 1 : 0
break;
case 'slide-top':
styles.transform += `translateY(${type?'0':'-100%'}) `
break;
case 'slide-right':
styles.transform += `translateX(${type?'0':'100%'}) `
break;
case 'slide-bottom':
styles.transform += `translateY(${type?'0':'100%'}) `
break;
case 'slide-left':
styles.transform += `translateX(${type?'0':'-100%'}) `
break;
case 'zoom-in':
styles.transform += `scale(${type?1:0.8}) `
break;
case 'zoom-out':
styles.transform += `scale(${type?1:1.2}) `
break;
}
})
return styles
},
_modeClassArr(type) {
let mode = this.modeClass
if (typeof(mode) !== "string") {
let modestr = ''
mode.forEach((item) => {
modestr += (item + '-' + type + ',')
})
return modestr.substr(0, modestr.length - 1)
} else {
return mode + '-' + type
}
},
// getEl(el) {
// console.log(el || el.ref || null);
// return el || el.ref || null
// },
toLine(name) {
return name.replace(/([A-Z])/g, "-$1").toLowerCase();
}
}
}
</script>
<style>
.uni-transition {
transition-timing-function: ease;
transition-duration: 0.3s;
transition-property: transform, opacity;
}
.fade-in {
opacity: 0;
}
.fade-active {
opacity: 1;
}
.slide-top-in {
/* transition-property: transform, opacity; */
transform: translateY(-100%);
}
.slide-top-active {
transform: translateY(0);
/* opacity: 1; */
}
.slide-right-in {
transform: translateX(100%);
}
.slide-right-active {
transform: translateX(0);
}
.slide-bottom-in {
transform: translateY(100%);
}
.slide-bottom-active {
transform: translateY(0);
}
.slide-left-in {
transform: translateX(-100%);
}
.slide-left-active {
transform: translateX(0);
opacity: 1;
}
.zoom-in-in {
transform: scale(0.8);
}
.zoom-out-active {
transform: scale(1);
}
.zoom-out-in {
transform: scale(1.2);
}
</style>
// export default {
// created() {
// //#ifdef MP-WEIXIN
// wx.showShareMenu({
// withShareTicket: true,
// menus: ['shareAppMessage', 'shareTimeline']
// });
// //#endif
// },
// }
export default { export default {
data() { data() {
return { return {
share: { share: {
title: '更多好剧,等你来看', title: '更多好剧,等你来看',
imageUrl: 'https://mints-pkg.oss-cn-beijing.aliyuncs.com/pkg/img/ic_movie.png', imageUrl: 'https://mints-pkg.oss-cn-beijing.aliyuncs.com/pkg/img/ic_movie.png',
path: '/pages/loading?shareId=' path: '/pages/loading?shareId='
// path: '/pages/loading?shareId=' + getApp().globalData.userId,
} }
} }
}, },
......
...@@ -13,7 +13,7 @@ ...@@ -13,7 +13,7 @@
"path": "pages/loading", "path": "pages/loading",
"style": { "style": {
"navigationStyle": "default", "navigationStyle": "default",
"navigationBarBackgroundColor": "#F2F1FF", "navigationBarBackgroundColor": "#F2F1FF",
"navigationBarTextStyle": "#000000" "navigationBarTextStyle": "#000000"
} }
}, },
...@@ -22,14 +22,14 @@ ...@@ -22,14 +22,14 @@
"path": "pages/home", "path": "pages/home",
"style": { "style": {
"navigationStyle": "default", "navigationStyle": "default",
"navigationBarBackgroundColor": "#ffffff", "navigationBarBackgroundColor": "#ffffff",
"navigationBarTextStyle": "#000000" "navigationBarTextStyle": "#000000"
} }
}, { }, {
"path": "pages/index/index", "path": "pages/index/index",
"style": { "style": {
"navigationStyle": "default", "navigationStyle": "default",
"navigationBarBackgroundColor": "#ffffff", "navigationBarBackgroundColor": "#ffffff",
"navigationBarTextStyle": "#000000" "navigationBarTextStyle": "#000000"
} }
}, },
...@@ -37,35 +37,35 @@ ...@@ -37,35 +37,35 @@
"path": "pages/my/my", "path": "pages/my/my",
"style": { "style": {
"navigationStyle": "default", "navigationStyle": "default",
"navigationBarBackgroundColor": "#ffffff", "navigationBarBackgroundColor": "#ffffff",
"navigationBarTextStyle": "#000000" "navigationBarTextStyle": "#000000"
} }
}, { }, {
"path": "pages/brower/brower", "path": "pages/brower/brower",
"style": { "style": {
"navigationStyle": "default", "navigationStyle": "default",
"navigationBarBackgroundColor": "#ffffff", "navigationBarBackgroundColor": "#ffffff",
"navigationBarTextStyle": "black" "navigationBarTextStyle": "black"
} }
}, { }, {
"path": "pages/recommend/recommend", "path": "pages/recommend/recommend",
"style": { "style": {
"navigationStyle": "default", "navigationStyle": "default",
"navigationBarBackgroundColor": "#000000", "navigationBarBackgroundColor": "#000000",
"navigationBarTextStyle": "#ffffff" "navigationBarTextStyle": "#ffffff"
} }
}, { }, {
"path": "pages/recommend/follow", "path": "pages/recommend/follow",
"style": { "style": {
"navigationStyle": "default", "navigationStyle": "default",
"navigationBarBackgroundColor": "#ffffff", "navigationBarBackgroundColor": "#ffffff",
"navigationBarTextStyle": "#000000" "navigationBarTextStyle": "#000000"
} }
}, { }, {
"path": "pages/recommend/recommendVideo", "path": "pages/recommend/recommendVideo",
"style": { "style": {
"navigationStyle": "default", "navigationStyle": "default",
"navigationBarBackgroundColor": "#000000", "navigationBarBackgroundColor": "#000000",
"navigationBarTextStyle": "#ffffff" "navigationBarTextStyle": "#ffffff"
} }
} }
...@@ -84,17 +84,17 @@ ...@@ -84,17 +84,17 @@
}, { }, {
"root": "pagesC", "root": "pagesC",
"pages": [{ "pages": [{
"path": "video/videoDetail", "path": "ttvideo/ttVideoDetail",
"style": { "style": {
"navigationStyle": "default", "navigationStyle": "default",
"navigationBarBackgroundColor": "#000000", "navigationBarBackgroundColor": "#000000",
"navigationBarTextStyle": "#ffffff" "navigationBarTextStyle": "#ffffff"
} }
}, { }, {
"path": "video/newVideoDetail", "path": "video/newVideoDetail",
"style": { "style": {
"navigationStyle": "default", "navigationStyle": "default",
"navigationBarBackgroundColor": "#000000", "navigationBarBackgroundColor": "#000000",
"navigationBarTextStyle": "#ffffff" "navigationBarTextStyle": "#ffffff"
} }
}] }]
...@@ -102,31 +102,31 @@ ...@@ -102,31 +102,31 @@
"root": "pagesD", "root": "pagesD",
"pages": [{ "pages": [{
"path": "watchRecord/watchRecord", "path": "watchRecord/watchRecord",
"style": { "style": {
"navigationBarTitleText": "观看记录", "navigationBarTitleText": "观看记录",
"navigationStyle": "default", "navigationStyle": "default",
"navigationBarBackgroundColor": "#ffffff", "navigationBarBackgroundColor": "#ffffff",
"navigationBarTextStyle": "black" "navigationBarTextStyle": "black"
} }
}, { }, {
"path": "payRecord/payRecord", "path": "payRecord/payRecord",
"style": { "style": {
"navigationBarTitleText": "我的订单", "navigationBarTitleText": "我的订单",
"navigationStyle": "default", "navigationStyle": "default",
"navigationBarBackgroundColor": "#ffffff", "navigationBarBackgroundColor": "#ffffff",
"navigationBarTextStyle": "black" "navigationBarTextStyle": "black"
} }
}, { }, {
"path": "dotRecord/dotRecord", "path": "dotRecord/dotRecord",
"style": { "style": {
"navigationBarTitleText": "看点记录", "navigationBarTitleText": "看点记录",
"navigationStyle": "default", "navigationStyle": "default",
"navigationBarBackgroundColor": "#ffffff", "navigationBarBackgroundColor": "#ffffff",
"navigationBarTextStyle": "black" "navigationBarTextStyle": "black"
} }
}, { }, {
"path": "useDotRecord/useDotRecord", "path": "useDotRecord/useDotRecord",
"style": { "style": {
"navigationBarTitleText": "消费记录", "navigationBarTitleText": "消费记录",
"navigationStyle": "default", "navigationStyle": "default",
"navigationBarBackgroundColor": "#ffffff", "navigationBarBackgroundColor": "#ffffff",
...@@ -139,16 +139,17 @@ ...@@ -139,16 +139,17 @@
// 当我们进入了pages/home页面以后就会预下载pagesA分包 // 当我们进入了pages/home页面以后就会预下载pagesA分包
"pages/home": { "pages/home": {
"network": "all", //在指定网络下预下载,可选值为:all(不限网络)、wifi(仅wifi下预下载) "network": "all", //在指定网络下预下载,可选值为:all(不限网络)、wifi(仅wifi下预下载)
"packages": ["pagesA"] //进入页面后预下载分包 "packages": ["pagesA","pagesC","pagesD"] //进入页面后预下载分包
}, }
"pages/recommend/recommend": { // ,
"network": "all", //在指定网络下预下载,可选值为:all(不限网络)、wifi(仅wifi下预下载) // "pages/recommend/recommend": {
"packages": ["pagesC"] //进入页面后预下载分包 // "network": "all", //在指定网络下预下载,可选值为:all(不限网络)、wifi(仅wifi下预下载)
}, // "packages": ["pagesC"] //进入页面后预下载分包
"pages/my/my": { // },
"network": "all", //在指定网络下预下载,可选值为:all(不限网络)、wifi(仅wifi下预下载) // "pages/my/my": {
"packages": ["pagesD"] //进入页面后预下载分包 // "network": "all", //在指定网络下预下载,可选值为:all(不限网络)、wifi(仅wifi下预下载)
} // "packages": ["pagesD"] //进入页面后预下载分包
// }
}, },
"globalStyle": { "globalStyle": {
"backgroundColor": "#232325", "backgroundColor": "#232325",
......
<template> <template>
<view style="width: 100%;height: 100%;"> <view style="width: 100%;height: 100%;">
<status-title style="position: absolute;" iconColor="white" :showBack="true"></status-title> <!-- <status-title style="position: absolute;" iconColor="white" :showBack="true" /> -->
<swiper class="swiper" circular @change="swiperChange" :current="current" :vertical="true"> <swiper class="swiper" circular @change="swiperChange" :current="current" :vertical="true" :duration="duration">
<swiper-item v-for="(list, index) in displaySwiperList" :key="index" :style="'width:100%; height:100%;'"> <swiper-item v-for="(list, index) in displaySwiperList" :key="index">
<view :style="'width:100%; height:100%;'"> <block>
<video v-if="Math.abs(displayIndex-index)==0 && list.vedioUrl" :id="list.vedioId" <video-player v-if="canUseTTPlayer" :id="list.vedioIndex" :album-id="list.vedioIndex"
:controls="controls" :loop="!isplay" :enable-progress-gesture="false" :show-loading="true" :episode-id="list.vedioIndex" object-fit="contain" :controls="controls"
:show-fullscreen-btn="false" @ended="ended" @controlstoggle="controlstoggle" @click="tapVides()" :poster="data.coverImage" :loop="!isplay" :autoplay="!list.lock"
@timeupdate="timeupdate" style="width:100%; height:100%;background: #f56c6c;" :enable-progress-gesture="false" :show-loading="true" :show-fullscreen-btn="false"
:src="list.vedioUrl" :poster="data.coverImage" class="tsvideo" play-btn-position="center" @controlstoggle="controlstoggle" @timeupdate="timeUpdate" @ended="ended" @click="tapVides()"
object-fit="contain" /> version="1" />
<view v-if="!isqp" class="userInfo">
<!-- 点赞 --> <video v-else :id="list.vedioIndex" @ended="ended" :controls="controls" :loop="!isplay"
<view class="flex" style="opacity: 0.9; margin-top: 10rpx;"> :enable-progress-gesture="false" :show-loading="true" :show-fullscreen-btn="false"
<image @click.stop="collect(data.vedioId,index)" v-if="data.collect==0" @controlstoggle="controlstoggle" :poster="data.coverImage" @click="tapVides()"
src="@/static/home_collect_img_0.png" /> @timeupdate="timeupdate" :autoplay="!list.lock" :src="list.vedioUrl" class="tsvideo"
<image @click.stop="cancelCollect(data.vedioId,index)" v-if="data.collect==1" play-btn-position="center" object-fit="contain" />
src="@/static/home_collect_img_1.png" />
<text <view v-if="originList[originIndex].lock || !list.vedioUrl" class="videoHover tsimg"
style="margin: 0 auto;margin-top: 110rpx;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="originIndex>=data.unlockIndex || !list.vedioUrl" class="videoHover tsimg"
@click.stop="tapVideoHover(index,list.pays)" @click.stop="tapVideoHover(index,list.pays)"
:style="'width: '+ windowWidth +'px; height:'+100+'%;'"> :style="'width: '+ windowWidth +'px; height:'+100+'%;'">
<image :src="data.coverImage" <image :src="data.coverImage"
...@@ -50,80 +25,48 @@ ...@@ -50,80 +25,48 @@
mode="aspectFit" /> mode="aspectFit" />
<image class="playState" src="@/static/video/play.png" /> <image class="playState" src="@/static/video/play.png" />
</view> </view>
</view> </block>
</swiper-item> </swiper-item>
</swiper> </swiper>
<uni-popup type="bottom" ref="select">
<view v-if="fenji==1" <view v-if="!isqp" class="userInfo">
:style="'width: '+ windowWidth +'px; height: 860rpx; background-color: #202020; border-top-left-radius: 20rpx; border-top-right-radius: 20rpx;'"> <!-- 点赞 -->
<view style="height: 70rpx;display: flex; flex-direction: row;align-items: center;"> <view class="flex" style="opacity: 0.9; margin-top: 10rpx;">
<image src="@/static/video/layers.png" style="width: 40rpx; height: 40rpx; margin-left: 20rpx;" /> <image @click.stop="collect(data.vedioId,index)" v-if="data.collect==0"
<view src="@/static/home_collect_img_0.png" />
:style="'font-size: 30rpx; font-weight: bold; color: #FFFFFF; margin-left: 20rpx; overflow: hidden;'"> <image @click.stop="cancelCollect(data.vedioId,index)" v-if="data.collect==1"
当前播放第{{ Number(originIndex+1) }} src="@/static/home_collect_img_1.png" />
</view> <text style="margin: 0 auto;margin-top: 120rpx;color: #FFFFFF;font-size: 26rpx;font-weight: bold;"
<image @click="down" src="@/static/video/down.png" :class="{'likeNumActive':data.collect!=0}">{{data.hot}}</text>
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="(index2+1 + (index1%30*30))>data.unlockIndex"
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> </view>
<view v-if="fenji==2" <!-- 分享 -->
:style="'width: '+ windowWidth +'px; background-color: #202020; border-top-left-radius: 10px; border-top-right-radius: 10px;'"> <view v-show="false" class="flex" style="opacity: 0.9; margin-top: 10rpx;">
<view style="height: 70rpx;display: flex; flex-direction: row;align-items: center;"> <image src="@/static/video/share-fill.png" />
<image src="@/static/video/layers.png" style="width: 40rpx; height: 40rpx; margin-left: 20rpx;"> <text
</image> style="margin: 0 auto;margin-top: 110rpx; color: #FFFFFF;font-size: 26rpx; font-weight: bold;">分享</text>
<view <button open-type="share"
:style="'font-size: 30rpx; font-weight: bold; color: #FFFFFF; margin-left: 20rpx; overflow: hidden;'"> style="position: absolute;;background: none; width: 80rpx; height: 80rpx; right: 10rpx;"
当前视频 没有权限播放 @click.stop="reShare" />
</view>
<image @click="downbuy" src="@/static/video/down.png"
style="width: 50rpx; height: 50rpx; margin:0 20rpx 0 auto; ">
</image>
</view>
<view style="color: white;text-align: center;margin-top: 20rpx;">
{{'解锁 '+data.title+' 全集'}}
</view>
<view @click="govip()" class="button" style="margin:30rpx auto 50rpx auto;color: white;">开通VIP</view>
</view> </view>
</uni-popup> </view>
<!-- 最底下的文字部分 -->
<view v-if="!isqp" class="contentcd flex">
<text class="userName">{{data.title}}</text>
<text class="words">{{'第'+Number(originIndex+1)+'集'}}</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>
<episodePopup ref="episodePopup" @selectVideo="selectThisVideo" :windowWidth="windowWidth"
:windowHeight="windowHeight" :tabIndex="tabIndex" :tabs="tabs" :subList="subList" :originList="originList"
:originIndex="originIndex" />
<coin-popup :show="showCoinPop" :point="data.point" :vedioId="data.vedioId" @close="showCoinPop = false"
@paySuccess="paySuccess" />
</view> </view>
</template> </template>
...@@ -134,7 +77,8 @@ ...@@ -134,7 +77,8 @@
getSubList getSubList
} from "@/utils/utils.js" } from "@/utils/utils.js"
import uniPopup from '@/components/uni-popup/uni-popup.vue'; import coinPopup from '@/components/coin-popup/coin-popup.vue';
import episodePopup from '@/components/episode-popup/episode-popup.vue';
import { import {
navigateTo, navigateTo,
...@@ -146,23 +90,18 @@ ...@@ -146,23 +90,18 @@
ref ref
} from "vue"; } from "vue";
let audo = uni.createInnerAudioContext() import videoPlayer from '@/ttcomponents/video-player'
export default { export default {
name: "videoDetail", name: "ttVideoDetail",
mixins: [common], mixins: [common],
components: { components: {
uniPopup coinPopup,
episodePopup,
videoPlayer
}, },
data() { data() {
return { return {
sharedata: {
type: 2,
strShareUrl: "",
strShareTitle: "分享标题",
strShareSummary: "分享总结",
strShareImageUrl: ""
},
fenji: 1,
controls: false, controls: false,
originList: [], // 源数据 originList: [], // 源数据
displaySwiperList: [], // swiper需要的数据 displaySwiperList: [], // swiper需要的数据
...@@ -170,23 +109,24 @@ ...@@ -170,23 +109,24 @@
originIndex: 0, // 记录源数据的下标 originIndex: 0, // 记录源数据的下标
windowWidth: 0, windowWidth: 0,
windowHeight: 0, windowHeight: 0,
current: 0, current: 0, // swiper 下标
oid: 0, oid: 0,
isplay: true, //是否自动播放下一个视频 isplay: true, //是否自动播放下一个视频
duration: 500, duration: 500,
isqp: false, isqp: false,
mid: 0,
safeArea: 0, safeArea: 0,
ttuop: 0, ttuop: 0,
heightxw: 100,
userinfo: [],
moneyList: [],
data: {}, data: {},
isPlayNext: 0, isPlayNext: 0,
tabIndex: 0, tabIndex: 0,
tabs: [], tabs: [],
subList: [], subList: [],
showTap: false, showTap: false,
showCoinPop: false,
vipBackPage: '',
canUseTTPlayer: true,
ttPreloadAlbumId: '',
ttPreloadEpisodeId: '',
}; };
}, },
onLoad(options) { onLoad(options) {
...@@ -197,78 +137,171 @@ ...@@ -197,78 +137,171 @@
uni.getSystemInfo({ uni.getSystemInfo({
success: res => { success: res => {
this.safeArea = res.safeAreaInsets.bottom; this.safeArea = res.safeAreaInsets.bottom;
if (this.safeArea > 0) {
this.heightxw = 97
}
} }
}) })
// #ifdef MP-TOUTIAO // #ifdef MP-TOUTIAO
this.canUseTTPlayer = tt.canIUse('video-player')
if (this.canUseTTPlayer && tt.canIUse('preloadResourceVideo')) {
this.preloadplaylet()
}
this.ttuop = 64 this.ttuop = 64
// #endif // #endif
this.windowWidth = uni.getSystemInfoSync().windowWidth this.windowWidth = uni.getSystemInfoSync().windowWidth
this.windowHeight = uni.getSystemInfoSync().windowHeight - this.safeArea - this.ttuop this.windowHeight = uni.getSystemInfoSync().windowHeight - this.safeArea - this.ttuop
console.log(this.windowHeight)
},
onShow() {
// 从VIP页面返回关闭弹框
this.down()
this.downbuy()
this.getData() this.getData()
}, },
onShow() {
// 从VIP页面返回关闭弹框
this.$refs.episodePopup.down();
},
// 分享
onShareAppMessage() {
let result = {
title: this.data.title,
imageUrl: this.data.coverImage,
path: `/pageC/ttvideo/ttVideoDetail?bookId=${this.bookData.id}`
}
return result;
},
methods: { methods: {
govip() { preloadplaylet() {
navigateTo(`/pagesA/vipPay/vipPay`) // 抖音预加载
}, tt.preloadResourceVideo({
timeupdate(event) { albumId: this.data.albumId,
if (event.detail.currentTime > 0 && this.originList[this.originIndex].vedioIndex > this.data.unlockIndex) { episodeId: this.data.episodeId,
uni.createVideoContext(this.originList[this.originIndex].vedioId, this).seek(0); cloudType: 1,
uni.createVideoContext(this.originList[this.originIndex].vedioId, this).pause(); version: 1,
this.fenji = 2 success: () => {
this.$refs.select.open('bottom'); this.setData({
} playletshow: true,
});
},
fail: (error) => {
console.log("短剧预加载失败", error);
this.setData({
playletshow: true,
});
},
});
}, },
selectThisVideo(index) { paySuccess(largeType) {
this.down(); // largeType=vip 开通vip
if (this.originList[this.originIndex].vedioIndex > this.data.unlockIndex) { // largeType=point 购买看点
this.fenji = 2 // largeType=curVedio 解锁当前剧所有集
this.$refs.select.open('bottom'); if (largeType == 'vip') {
this.vipBackPage = this.originIndex
this.getData()
} else if (largeType == 'point') {
this.unlock(this.originIndex)
} else { } else {
console.log("AAAAAAA" + index) this.vipBackPage = this.originIndex
this.duration = 20; this.getData()
this.originIndex = index
this.initSwiperData(this.originIndex);
setTimeout(() => {
this.duration = 500;
}, 500)
} }
}, },
down() { showPayDialog() {
this.$refs.select.close(); // 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`)
}, },
downbuy() { timeupdate(event) {},
this.$refs.select.close(); selectThisVideo(index) {
if (this.originIndex == index) {
return
}
this.oid = this.originIndex
this.duration = 20;
this.originIndex = index
this.initSwiperData(this.originIndex);
setTimeout(() => {
this.duration = 500;
}, 500)
}, },
sellxj() { sellxj() {
this.fenji = 1 this.$refs.episodePopup.show();
this.$refs.select.open('bottom');
this.$nextTick(() => { this.$nextTick(() => {
this.tabIndex = parseInt(this.originIndex / 30) this.tabIndex = parseInt(this.originIndex / 30)
// 延迟渲染,否则位置错乱 // 延迟渲染,否则位置错乱
this.showTap = true
}) })
}, },
tapVideoHover(index, pays) { tapVideoHover(index, pays) {
this.fenji = 2 if (this.originList[this.originIndex].lock) {
this.$refs.select.open('bottom'); this.unlock(this.originIndex)
}
}, },
tapVides() { tapVides() {
if (this.controls) return if (this.controls) return
this.isqp = true this.isqp = true
this.controls = 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(() => {
tt.createVideoContext('' + that.originList[that.originIndex]
.vedioIndex,
that)
.play();
that.commitVideo()
}, 500)
} else if (data.code == 301) {
that.originList[that.originIndex].lock = false
setTimeout(() => {
tt.createVideoContext('' + that.originList[that.originIndex]
.vedioIndex,
that)
.play();
that.commitVideo()
}, 500)
} else if (data.code == 302) {
that.originList[that.originIndex].lock = false
setTimeout(() => {
tt.createVideoContext('' + that.originList[that.originIndex]
.vedioIndex,
that)
.play();
that.commitVideo()
}, 500)
} else if (data.code == 303) {
that.showPayDialog()
}
}
});
},
getData() { getData() {
let that = this
this.originList = [] this.originList = []
this.post({ this.post({
url: '/vedio/getIndexList', url: '/vedio/getIndexList',
...@@ -279,26 +312,27 @@ ...@@ -279,26 +312,27 @@
success: ({ success: ({
data data
}) => { }) => {
this.originList = data.list that.originList = data.list
if (this.isPlayNext == 1) { if (that.vipBackPage != '') {
this.originIndex = this.data.recommendIndex - 1 that.originIndex = that.vipBackPage
if (this.originIndex >= this.data.unlockIndex - 1) { that.vipBackPage = ''
this.originIndex = this.data.unlockIndex - 1
}
} else { } else {
this.originIndex = this.data.seeIndex - 1 if (that.isPlayNext == 1) {
} that.originIndex = that.data.recommendIndex - 1
if (this.originIndex >= this.data.vedioTotal || this.originIndex < 0) { } else {
this.originIndex = 0 that.originIndex = that.data.seeIndex - 1
}
if (that.originIndex >= that.data.vedioTotal || that.originIndex < 0) {
that.originIndex = 0
}
} }
this.data = data.vedioMsg that.data = data.vedioMsg
this.initSwiperData(this.originIndex); that.initSwiperData(that.originIndex);
this.initEpisode() that.initEpisode()
} }
}); });
}, },
ended() { ended() {
//console.log('isplay----',this.isplay)
// 1.播放当前视频结束时触发,自动切换下一个视频 // 1.播放当前视频结束时触发,自动切换下一个视频
if (this.isplay) { if (this.isplay) {
if (this.displayIndex < 2) { if (this.displayIndex < 2) {
...@@ -328,8 +362,6 @@ ...@@ -328,8 +362,6 @@
]; ];
this.displaySwiperList = displayList; this.displaySwiperList = displayList;
audo.pause()
if (this.oid >= this.originList.length) { if (this.oid >= this.originList.length) {
this.oid = 0 this.oid = 0
} }
...@@ -337,16 +369,13 @@ ...@@ -337,16 +369,13 @@
this.oid = this.originList.length - 1 this.oid = this.originList.length - 1
} }
console.log('++++++++++++上一条播放数据 Index:', this.oid) console.log('++++++++++++上一条播放数据 Index:', this.oid)
uni.createVideoContext("" + this.originList[this.oid].vedioId, this).stop(); tt.createVideoContext('' + this.originList[this.oid].vedioIndex, this).pause();
if (this.originList[originIndex].vedioIndex > this.data.unlockIndex) { if (this.originList[originIndex].lock) {
this.fenji = 2 this.unlock(this.originIndex)
this.$refs.select.open('bottom');
} else { } else {
setTimeout(() => { setTimeout(() => {
console.log('qqqqqq:', this.originList[originIndex].vedioId) tt.createVideoContext('' + this.originList[originIndex].vedioIndex, this).play();
// audo.play()
uni.createVideoContext("" + this.originList[originIndex].vedioId, this).play();
this.commitVideo() this.commitVideo()
}, 500) }, 500)
} }
...@@ -375,9 +404,9 @@ ...@@ -375,9 +404,9 @@
console.log('---', this.originIndex) console.log('---', this.originIndex)
this.oid = this.originIndex + 1 this.oid = this.originIndex + 1
this.initSwiperData(this.originIndex); this.initSwiperData(this.originIndex);
} }
this.controls = false this.controls = false
this.isqp = false this.isqp = false
}, },
initEpisode() { initEpisode() {
...@@ -386,21 +415,13 @@ ...@@ -386,21 +415,13 @@
this.subList = getSubList(30, this.originList) this.subList = getSubList(30, this.originList)
for (let i = 0; i < this.subList.length; i++) { for (let i = 0; i < this.subList.length; i++) {
this.tabs.push({ this.tabs.push({
name: Number(1 + (i % 30 * 30)) + "-" + Number(this.subList[i].length + (i % 30 * 30)), 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) { controlstoggle(e) {
if (!this.controls) return if (!this.controls) return
this.isqp = e.detail.show this.isqp = e.detail.show
}, },
collect(vedioId, index) { collect(vedioId, index) {
...@@ -491,13 +512,13 @@ ...@@ -491,13 +512,13 @@
z-index: 99; z-index: 99;
bottom: 30%; bottom: 30%;
right: 10px; right: 10px;
width: 90rpx; width: 100rpx;
display: flex; display: flex;
flex-direction: column; flex-direction: column;
image { image {
width: 70rpx; width: 76rpx;
height: 70rpx; height: 76rpx;
position: absolute; position: absolute;
right: 10rpx; right: 10rpx;
} }
...@@ -534,7 +555,9 @@ ...@@ -534,7 +555,9 @@
} }
.tsvideo { .tsvideo {
/* animation:showDivAni 1s 1; */ width: 100%;
height: 100%;
animation: showDivAni 1s 1;
} }
@keyframes showDivAni { @keyframes showDivAni {
...@@ -548,7 +571,7 @@ ...@@ -548,7 +571,7 @@
} }
.tsimg { .tsimg {
/* animation:fadenum12 10s 1; */ // animation: fadenum12 10s 1;
} }
.contentcd { .contentcd {
...@@ -556,7 +579,6 @@ ...@@ -556,7 +579,6 @@
left: 4%; left: 4%;
width: 92%; width: 92%;
position: absolute; position: absolute;
// bottom: 36px;
bottom: 30rpx; bottom: 30rpx;
color: #ffffff; color: #ffffff;
flex-direction: column; flex-direction: column;
......
// 自定义组件参考:https://mp.kuaishou.com/docs/develop/frame/custom_comp/component_constructor.html
// video 参考:https://bytedance.larkoffice.com/docx/TsJmdbX6co33uJxi7j9cfYc2nnd
Component({
// 外部样式属性定义,其实也就是把内部需要外部支持的 class 名称放这里导出
// 在外部直接使用导出的名称字段关联即可,可以同时导出多个,这里是数组 ['','',...]
externalClasses: ['inner-class'],
// 对内参数
data: {
},
// 对外参数(prop)
properties: {
// 内部样式
innerStyle: {
type: String,
value: ''
},
// 唯一标识符
id: {
type: String,
value: ''
},
// 原片id
albumId: {
type: String,
value: ''
},
// 剧集id
episodeId: {
type: String,
value: ''
},
// 废弃字段。为了兼容老版本,请传 1
version: {
type: String,
value: '1'
},
// 使用cdn类型,1: 抖音云 2: 三方云
cloudType: {
type: Number,
value: 1
},
// 播放地址,cloudType 为 2 时生效,传入第三方播放地址 http://vjs.zencdn.net/v/oceans.mp4
src: {
type: String,
value: ''
},
// 自动播放
autoplay: {
type: Boolean,
value: false
},
// 显示默认播放控件(播放/暂停按钮、播放进度、时间)
controls: {
type: Boolean,
value: true
},
// 循环播放
loop: {
type: Boolean,
value: false
},
// 静音播放
muted: {
type: Boolean,
value: false
},
// 指定视频初始播放位置
initialTime: {
type: Number,
value: 0
},
// 指定视频时长
duration: {
type: Number,
value: 0
},
// 'contain' | 'fill' | 'cover'
objectFit: {
type: String,
value: 'contain'
},
// 若不设置,宽度大于 240 时才会显示
showProgress: {
type: Boolean,
value: true
},
// 是否显示全屏按钮
// 在同层渲染模式下仅支持控制竖屏状态(非全屏)下的「全屏按钮」的显示,横屏状态(全屏)不显示「退出全屏按钮」,只能通过标题旁边的箭头退出全屏
showFullscreenBtn: {
type: Boolean,
value: true
},
// 是否显示视频底部控制栏的播放按钮
showPlayBtn: {
type: Boolean,
value: true
},
// 是否开启控制进度的手势
enableProgressGesture: {
type: Boolean,
value: true
},
// 是否显示静音按钮
showMuteBtn: {
type: Boolean,
value: false
}
},
methods: {
// 加载 ref
refHandler(ref) {
this.triggerEvent('ref', ref)
},
// 当开始/继续播放时触发 play 事件
handlePlay(e) {
this.triggerEvent('play', e)
},
// 当暂停播放时触发 pause 事件
handlePause(e) {
this.triggerEvent('pause', e)
},
// 当播放到末尾时触发 ended 事件
handleEnded(e) {
this.triggerEvent('ended', e)
},
// 播放进度变化时触发,event.detail = {currentTime, duration} 。触发频率 250ms 一次
handleTimeupdate(e) {
this.triggerEvent('timeupdate', e)
},
// 视频进入和退出全屏时触发,event.detail = {fullScreen, direction},direction 有效值为 vertical 或 horizontal
handleFullscreenchange(e) {
this.triggerEvent('fullscreenchange', e)
},
// 视频播放出错时触发
handleError(e) {
this.triggerEvent('error', e)
}
}
})
\ No newline at end of file
{
"component": true,
"usingComponents": {
"video-player":"ext://industry/video-player"
}
}
\ No newline at end of file
<video-player
id="{{ id }}"
tt:ref="refHandler"
class="video-player-view inner-class"
style="{{ innerStyle }}"
album-id="{{ albumId }}"
episode-id="{{ episodeId }}"
version="{{ version }}"
cloud-type="{{ cloudType }}"
three-party-cloud="{{ src }}"
autoplay="{{ autoplay }}"
controls="{{ controls }}"
loop="{{ loop }}"
muted="{{ muted }}"
initial-time="{{ initialTime }}"
duration="{{ duration }}"
object-fit="{{ objectFit }}"
show-progress="{{ showProgress }}"
show-fullscreen-btn="{{ showFullscreenBtn }}"
show-play-btn="{{ showPlayBtn }}"
enable-progress-gesture="{{ enableProgressGesture }}"
show-mute-btn="{{ showMuteBtn }}"
bindplay="handlePlay"
bindpause="handlePause"
bindended="handleEnded"
bindtimeupdate="handleTimeupdate"
bindfullscreenchange="handleFullscreenchange"
binderror="handleError"
></video-player>
\ No newline at end of file
/* 兼容 uniapp 第三方混编使用,不需要可移除,详细查看 README.md */
.video-player-view {
width: 100%;
height: 100%;
}
\ No newline at end of file
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