Skip to content

U
uniapp_vedio
Commit 002ae124 authored by jyx's avatar jyx
Browse files
Options

优化逻辑

parent c0c3df06
Hide whitespace changes
Inline Side-by-side
Showing with 407 additions and 230 deletions
vedio/pages/home.vue
View file @ 002ae124
......@@ -2,10 +2,11 @@
<view class="body">
<view style="height: 100%;">
<indexPage v-show="currentPage==0" ref="index" />
<recommendPage v-on:showEditBarH="showEditBarH" v-show="currentPage==1" ref="recommend" />
<recommendPage v-on:showEditBarH="showEditBarH" v-on:changeBottomBarColor="changeBottomBarColor"
v-show="currentPage==1" ref="recommend" />
<userPage v-show="currentPage==2" ref="user" />
</view>
<view class="tabs-bar">
<view v-if="!isShowBlackBar" class="tabs-bar">
<view :class="currentPage==0?'tab active': 'tab'" :style="'padding-bottom:' + bottomSafePadding + 'px;'"
@click="tabChange(0)">
<view style="margin: 16rpx 0 11rpx;">
......@@ -14,7 +15,7 @@
</image>
<image v-else class="tabs-image" src="/static/tab/index_unselected.png" mode="heightFix"></image>
</view>
剧场
剧场
</view>
<view :class="currentPage == 1?'tab active': 'tab'" :style="'padding-bottom:' + bottomSafePadding + 'px;'"
@click="tabChange(1)">
......@@ -35,12 +36,43 @@
我的
</view>
</view>
<view v-if="showEditBar" class="editBar">
<view class="editItem" @click="!isFullChoice?fullChoice():noChoice()"
:style="'padding-bottom:' + bottomSafePadding + 'px;'">
<view v-if="isShowBlackBar" class="tabs-bar2">
<view :class="currentPage==0?'tab active': 'tab'" :style="'padding-bottom:' + bottomSafePadding + 'px;'"
@click="tabChange(0)">
<view style="margin: 16rpx 0 11rpx;">
<image v-if="currentPage==0" class="tabs-image" src="/static/tab/index_selected.png"
mode="heightFix">
</image>
<image v-else class="tabs-image" src="/static/tab/index_unselected.png" mode="heightFix"></image>
</view>
剧场
</view>
<view :class="currentPage == 1?'tab active': 'tab'" :style="'padding-bottom:' + bottomSafePadding + 'px;'"
@click="tabChange(1)">
<view style="margin: 16rpx 0 11rpx;">
<image v-if="currentPage==1" class="tabs-image" src="/static/tab/promote_selected.png"
mode="heightFix"></image>
<image v-else class="tabs-image" src="/static/tab/promote_unselected.png" mode="heightFix"></image>
</view>
推荐
</view>
<view :class="currentPage == 2?'tab active': 'tab'" :style="'padding-bottom:' + bottomSafePadding + 'px;'"
@click="tabChange(2)">
<view style="margin: 16rpx 0 11rpx;">
<image v-if="currentPage==2" class="tabs-image" src="/static/tab/my_selected.png" mode="heightFix">
</image>
<image v-else class="tabs-image" src="/static/tab/my_unselected.png" mode="heightFix"></image>
</view>
我的
</view>
</view>
<view v-if="showEditBar" class="editBar" :style="'padding-bottom:' + bottomSafePadding + 'px;'">
<view class="editItem" @click="!isFullChoice?fullChoice():noChoice()">
{{!isFullChoice?'全选':'全不选'}}
</view>
<view class="editItem" @click="deleteCollect" :style="'padding-bottom:' + bottomSafePadding + 'px;'">
<view class="editItem" @click="deleteCollect">
删除
</view>
</view>
......@@ -73,7 +105,8 @@
isFirstLoad: true,
currentPage: 0,
showEditBar: false,
isFullChoice: false
isFullChoice: false,
isShowBlackBar: false
}
},
onLoad(options) {
......@@ -108,14 +141,25 @@
this.loadComponentData();
},
loadComponentData() {
if (this.currentPage == 0) {
this.$refs.index.show();
} else if (this.currentPage == 1) {
this.$refs.recommend.show();
} else if (this.currentPage == 2) {
this.$refs.user.show();
if (this.currentPage == 0) {
this.changeBottomBarColor(false)
this.$refs.index.show();
this.$refs.recommend.hide();
this.$refs.user.hide();
} else if (this.currentPage == 1) {
this.$refs.recommend.show();
this.$refs.index.hide();
this.$refs.user.hide();
} else if (this.currentPage == 2) {
this.changeBottomBarColor(false)
this.$refs.user.show();
this.$refs.index.hide();
this.$refs.recommend.hide();
}
},
changeBottomBarColor(b) {
this.isShowBlackBar = b
},
showEditBarH(b) {
this.showEditBar = b
this.isFullChoice = false
......@@ -155,4 +199,21 @@
width: 50%;
}
}
.tabs-bar2 {
display: flex;
background-color: black;
.tab {
flex: 1;
text-align: center;
font-size: 26rpx;
font-weight: bold;
color: white;
&.active {
color: #F8425A;
}
}
}
</style>
\ No newline at end of file
vedio/pages/index/index.vue
View file @ 002ae124
......@@ -2,8 +2,8 @@
<view class="body">
<z-paging class="flex-1" ref="paging" v-model="dataList" @query="queryList">
<view class="content">
<swiper class="banner" style="margin-top: 20rpx;" :indicator-dots="true" :autoplay="true"
:interval="2000" :duration="500">
<swiper class="banner" :style="'margin-top:'+statusBarHeight+'px;'" :indicator-dots="true"
:autoplay="true" :interval="2000" :duration="500">
<swiper-item v-for="banner in bannerList" :key="banner.vedioId" @click="handleBanner(banner)">
<image class="banner-img" :src="banner.tabImage" mode="aspectFill"></image>
</swiper-item>
......@@ -110,14 +110,15 @@
src="http://sh.mints-id.com/vedioApp/vedio/ZhiZunLongZhu/zzlzshu.jpg" mode="aspectFill"></image>
<view style="margin: 20rpx;">
<view style="font-size: 30rpx; color: white;">{{newRecordBean.title}}</view>
<view style="font-size: 24rpx;margin-top: 6rpx;color: white;">上次观看至第{{newRecordBean.seeIndex}}集</view>
<view style="font-size: 22rpx;"
v-if="newRecordBean.orderTags!=null&&newRecordBean.orderTags.length>0">
<scroll-view scroll-x="true">
<block v-for="t in newRecordBean.orderTags" :key="newRecordBean.orderTags">
<view style="display:inline-block;margin-right: 4rpx;">{{t}} </view>
</block>
</scroll-view>
<view style="font-size: 24rpx;margin-top: 6rpx;color: white;">上次观看至第{{newRecordBean.seeIndex}}集
</view>
<view style="font-size: 22rpx;"
v-if="newRecordBean.orderTags!=null&&newRecordBean.orderTags.length>0">
<scroll-view scroll-x="true">
<block v-for="t in newRecordBean.orderTags" :key="newRecordBean.orderTags">
<view style="display:inline-block;margin-right: 4rpx;">{{t}} </view>
</block>
</scroll-view>
</view>
</view>
</view>
......@@ -164,7 +165,8 @@
dataList: [],
bannerList: [],
newRecordBean: null,
topList: []
topList: [],
statusBarHeight: app.globalData.statusBarHeight,
};
},
methods: {
......@@ -191,17 +193,20 @@
});
// 最近观看剧
this.post({
url: '/vedio/newest',
url: '/vedio/newest',
data: {},
showLoading: false,
success: ({
data
}) => {
if (data.vedio != null ) {
if (data.vedio != null) {
this.newRecordBean = data.vedio;
}
}
});
},
hide() {
},
queryList(page, size) {
// 推荐列表
......@@ -234,7 +239,7 @@
handleBottomClose() {
this.newRecordBean = null;
this.post({
url: '/vedio/colseNewest',
url: '/vedio/colseNewest',
data: {},
showLoading: false,
success: ({
......
vedio/pages/my/my.vue
View file @ 002ae124
<template>
<view class="body">
<view
style="display: flex;flex-direction: row;align-items: center;margin: 20rpx;padding-left: 10rpx;padding-top: 40rpx;">
:style="'display: flex;flex-direction: row;align-items: center;margin: 20rpx;padding-left: 10rpx;margin-top:'+statusBarHeight+'px;'">
<image class="avatar" src="https://mints-pkg.oss-cn-beijing.aliyuncs.com/pkg/bg_my_vip.png"></image>
<view>
<view style="font-size: 26rpx;color: black;margin-left: 20rpx;">用户ID：{{userBean.idcode}}</view>
......@@ -13,7 +13,8 @@
style="display: flex;flex-direction: row;background: #f5ca86;margin: 20rpx;padding: 40rpx;border-radius:20rpx;align-items: center;justify-content:space-between;">
<view style="display: flex;flex-direction: column;justify-content: center;">
<view style="font-size: 34rpx;color: #5b1500;font-weight: 777;">
{{userBean.expireTime<=0 ? '开通VIP会员' : 'VIP会员'}}</view>
{{userBean.expireTime<=0 ? '开通VIP会员' : 'VIP会员'}}
</view>
<view v-if="userBean.expireTime<=0" style="font-size: 24rpx;color: #5b1500;margin-top: 12rpx;">
解锁全部短剧
......@@ -50,7 +51,8 @@
</view>
<view style="display: flex;justify-content: center;margin-top: 20rpx;font-size: 26rpx;color: gray;">
{{ versionName }}</view>
{{ versionName }}
</view>
</view>
</template>
......@@ -78,13 +80,14 @@
mixins: [common],
data() {
return {
statusBarHeight: app.globalData.statusBarHeight,
userBean: null,
versionName: app.globalData.versionName
};
},
methods: {
show() {
// loadData() {
// loadData() {
this.post({
url: '/user/baseMsg',
showLoading: false,
......@@ -94,6 +97,9 @@
this.userBean = data;
}
});
},
hide() {
},
handleWatchRecord() {
navigateTo(`/pagesD/watchRecord/watchRecord`)
......
vedio/pages/recommend/follow.vue
View file @ 002ae124
<template>
<view style="background: white;">
<view style="position: absolute;left: 20rpx;top: 26rpx;" @click="isEditStyle = !isEditStyle">
<image style="width: 60rpx;height: 60rpx;" mode="widthFix"
:src="isEditStyle?'/static/video/scRed.png':'/static/video/aixinRed.png'" />
</view>
<scroll-view scroll-y="true" :style="'height: '+(windowHeight -120)+'px;margin-top:50px;'">
<scroll-view scroll-y="true"
:style="'height: '+(windowHeight -120)+'px;margin-top:'+(titleBarHeight +statusBarHeight)+'px;'">
<view class="flex space" style="display:flex; flex-wrap:wrap;">
<block v-for="(value,key) in dataList" :key="key">
<view class="mt-10"
style="width:31%; position: relative; border-radius:20rpx;margin-bottom: 10rpx;margin-left: 14rpx;"
@click="click(value.id,key)" @longpress="longClick(key)">
<image class="integral-mall-goods" mode="aspectFill" :src="value.img"></image>
<view class="text" style="font-size: 26rpx;color: black;">{{value.name}}</view>
<view class="text" style="font-size: 22rpx;color: gray;">{{value.name}}</view>
<view v-if="isEditStyle" @click.stop="cbClick(key)"
style="position: absolute;background: #000000; opacity: 0.6;;width: 100%;height: 100%;top: 0;border-radius:20rpx;
@click.stop="click(value.id,key)" @longpress.stop="longClick(key)">
<image class="integral-mall-goods" mode="aspectFill" :src="value.coverImage"></image>
<view class="text" style="font-size: 26rpx;color: black;">{{value.title}}</view>
<view class="text" style="font-size: 22rpx;color: gray;">{{value.vedioDesc}}</view>
<view v-if="isEditStyle" @click.stop="cbClick(key)" style="position: absolute;background: #000000; opacity: 0.6;width: 92%;height: 100%;top: 0;border-radius:20rpx;
padding-left: 20rpx;padding-top: 20rpx;">
<u-checkbox-group @change="onChange(key)">
<u-checkbox active-color="red" shape="circle" :checked="value.isChecked" />
......@@ -35,11 +29,16 @@
import {
navigateTo,
} from '@/utils/fun.js';
const app = getApp();
export default {
name: "follow",
mixins: [common],
data() {
return {
titleBarHeight: app.globalData.titleBarHeight,
statusBarHeight: app.globalData.statusBarHeight,
windowHeight: 0,
dataList: [],
isEditStyle: false
......@@ -56,7 +55,7 @@
methods: {
show() {
this.windowHeight = uni.getSystemInfoSync().windowHeight
this.queryList()
this.loadData()
},
loadData() {
// 收藏记录
......@@ -70,9 +69,12 @@
}
});
},
changeEditStyle(b) {
this.isEditStyle = b
},
click(id, key) {
// this.isEditStyle = true
// this.dataList[key].isChecked = true
this.isEditStyle = true
this.dataList[key].isChecked = true
},
longClick(key) {
this.isEditStyle = true
......@@ -97,7 +99,7 @@
deleteCollect() {
let list = []
for (let i = 0; i < this.dataList.length; i++) {
list.add(this.dataList[i])
list.push(this.dataList[i])
}
// 取消收藏
......
vedio/pages/recommend/recommend.vue
View file @ 002ae124
<template>
<view class="body">
<view class="tabContainer">
<tabs-center class="center" :tabs="tabs" v-model="current" @change="handleChange" />
</view>
<view class="tabContainer" :style="
'height:' +
titleBarHeight +
'px;line-height:' +
titleBarHeight +
'px;padding-top:' +
statusBarHeight +
'px;background-color:transparent'
">
<view v-if="current==0" :style="'position: absolute;left: 20rpx;top:'+ (statusBarHeight + 10) + 'px'"
@click.stop="showEditBar = !showEditBar">
<image style="width: 50rpx;height: 50rpx;" mode="widthFix"
:src="showEditBar?'/static/video/close.png':'/static/video/edit.png'" />
</view>
<view v-show="showEditBar" style="width: 300rpx;background: white;z-index: 999;">
<view
style="font-size: 36rpx;text-align: center;align-items: center;height:100rpx;line-height: 100rpx;">
追剧
</view>
</view>
<view v-if="(!showEditBar && showTap)">
<u-tabs :list="tabs" :current="current" @change="handleChange" lineWidth="30" :scrollable="false"
:lineColor="current==0?'#f56c6c':'#ffffff'" :activeStyle="{
color: current==0?'#000000':'#ffffff',
fontWeight: 'bold',
transform: 'scale(1.05)'
}" :inactiveStyle="{
color: '#606266',
transform: 'scale(1)'
}" />
<view v-if="showEditBar"
style="position: absolute;top:0;left:50%;width: 300rpx;margin-left:-150rpx;background: white;z-index: 999;">
<view style="font-size: 36rpx;text-align: center;align-items: center;height:100rpx;line-height: 100rpx;">追剧
</view>
</view>
<swiper class="swiper" @change="swiperChange" :current="current" :disable-touch="showEditBar">
......@@ -35,6 +60,8 @@
navigateTo,
} from '@/utils/fun.js';
const app = getApp();
export default {
name: "recommend",
mixins: [common],
......@@ -47,32 +74,46 @@
current: 1,
tabIndex: 1,
tabs: [{
title: '追剧',
value: 0
name: '追剧'
}, {
title: '推荐',
value: 1
name: '推荐'
}],
showEditBar: false,
showTap: false,
titleBarHeight: app.globalData.titleBarHeight,
titleButtonWidth: app.globalData.titleButtonWidth,
statusBarHeight: app.globalData.statusBarHeight,
}
},
onLoad(e) {
},
watch: {
showEditBar: {
handler(newValue, oldValue) {
this.$refs.follow.changeEditStyle(newValue);
}
},
},
methods: {
hide() {
this.$refs.recommendVideo.stop();
},
show() {
this.$nextTick(() => {
// 延迟渲染，否则位置错乱
this.showTap = true
})
if (this.current == 0) {
this.$refs.follow.show();
this.$refs.recommendVideo.stop();
this.$emit("changeBottomBarColor", false);
} else if (this.current == 1) {
this.$refs.recommendVideo.show();
this.$emit("changeBottomBarColor", true);
}
},
handleChange(event) {
this.current = event.value;
this.current = event.index;
this.show()
},
swiperChange(event) {
......@@ -104,18 +145,18 @@
}
.tabContainer {
width: 100%;
position: absolute;
margin-top: 30rpx;
width: 400rpx;
left: 50%;
margin-left: -200rpx;
.v-tabs {
height: 70rpx;
}
z-index: 100;
display: flex;
align-items: center;
overflow: hidden;
justify-content: center;
}
.swiper {
height: 100%;
}
.recommendTitle {}
</style>
\ No newline at end of file
vedio/pages/recommend/recommendVideo.vue
View file @ 002ae124
<template>
<view class="body">
<!-- <status-title :showBack="false">推荐</status-title> -->
<swiper class="swiper" circular @change="swiperChange" :current="current" :vertical="true" duration="300">
<swiper-item v-for="(list, index) in displaySwiperList" :key="index">
<view v-if="Math.abs(displayIndex-index)!=0" style="z-index: 999;height: 100%;">
<video muted="muted" v-if="Math.abs(displayIndex-index)!=0" :id="''+list.vedioId"
:controls="controls" :autoplay="false" :loop="false" @ended="ended"
@controlstoggle="controlstoggle" :show-fullscreen-btn="false" @click="tapVideoHover()"
:style="'width:100%; height:100%;'" :src="list.recommendUrl">
</video>
<video v-if="Math.abs(displayIndex-index)!=0" :id="''+list.vedioId" :controls="controls"
:loop="false" @ended="ended" @controlstoggle="controlstoggle" :show-fullscreen-btn="false"
@click="tapVideoHover()" :style="'width:100%; height:100%;'" :src="list.recommendUrl"
play-btn-position="center" object-fit="fill" />
</view>
<view v-if="Math.abs(displayIndex-index)==0" style="height: 100%;">
<video muted="muted" v-if="Math.abs(displayIndex-index)==0" :id="''+list.vedioId"
:controls="controls" :isplay="true" :loop="!isplay" @ended="ended"
@controlstoggle="controlstoggle" :show-fullscreen-btn="false" @click="tapVideoHover()"
:enable-progress-gesture="false" :style="'width:100%; height:100%;'" :src="list.recommendUrl">
</video>
<video v-if="Math.abs(displayIndex-index)==0" :id="''+list.vedioId" :controls="controls"
:isplay="true" :loop="!isplay" @ended="ended" @controlstoggle="controlstoggle"
:show-fullscreen-btn="false" @click="tapVideoHover()" :enable-progress-gesture="false"
:style="'width:100%; height:100%;'" :src="list.recommendUrl" play-btn-position="center"
object-fit="fill" />
</view>
<view v-if="isqp" class="userInfo flex">
<!-- 点赞 -->
......@@ -85,7 +83,7 @@
playCount: 2, // 剩余多少视频加载视频列表
nodate: true, // true 有数据
issp: '',
isqp: true, // 是否全屏
isqp: false, // 是否全屏
page: 1,
urls: "https://xjc.demo.hongcd.com/api/video/videoRecommend?page=1&uid=0",
dataList: [],
......@@ -382,27 +380,28 @@
z-index: 99;
width: 100%;
position: absolute;
bottom: 32px;
// bottom: 32px;
bottom: 0;
color: #ffffff;
flex-direction: column;
align-items: flex-start;
}
.userName {
font-size: 30rpx;
font-size: 36rpx;
color: #ffffff;
margin-left: 10rpx;
}
.wordss {
font-size: 26rpx;
font-size: 30rpx;
color: #ffffff;
margin-left: 10rpx;
}
.wordss2 {
width: 100%;
height: 60rpx;
height: 80rpx;
opacity: 0.6;
background: black;
display: flex;
......@@ -419,18 +418,18 @@
.wordsss {
margin-right: 10rpx;
margin-left: auto;
font-size: 22rpx;
font-size: 26rpx;
color: #ffffff;
padding: 3rpx 10rpx;
padding: 4rpx 12rpx;
border-radius: 30rpx;
background: red;
background: darkgrey;
}
}
.words {
margin-top: 20rpx;
margin-left: 10rpx;
font-size: 26rpx;
font-size: 30rpx;
color: #ffffff;
}
</style>
\ No newline at end of file
vedio/pagesC/video/videoDetail.vue
View file @ 002ae124
<template>
<view class="content">
<swiper class="swiper" circular @change="swiperChange" :current="current" :vertical="true" duration="300">
<status-title style="position: absolute;" iconColor="white" :showBack="true"></status-title>
<swiper class="swiper" circular @change="swiperChange" :current="current" :vertical="true">
<swiper-item v-for="(list, index) in displaySwiperList" :key="index" :style="'width:100%; height:100%;'">
<view :style="'width:100%; height:100%;'">
<video v-if="Math.abs(displayIndex-index)==0 && list.vedioUrl" :id="list.vedioId"
......@@ -8,9 +9,8 @@
:show-center-play-btn="false" :show-loading="true" :show-fullscreen-btn="false" @ended="ended"
@controlstoggle="controlstoggle" @click="tapVides()" @timeupdate="timeupdate"
:style="'width:100%; height:100%;'" :src="list.vedioUrl" :poster="data.coverImage"
class="tsvideo">
</video>
<view v-if="isqp" class="userInfo">
class="tsvideo" play-btn-position="center" object-fit="fill" />
<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"
......@@ -28,18 +28,18 @@
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"></button>
@click.stop="reShare" />
</view>
</view>
<!-- 最底下的文字部分 -->
<view v-if="isqp" class="contentcd flex">
<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"></image>
<image class="wordsss" src="@/static/up.png" />
</view>
</view>
<view v-if="Math.abs(displayIndex-index)!=0 || !list.vedioUrl" class="videoHover tsimg"
......@@ -47,8 +47,8 @@
:style="'width: '+ windowWidth +'px; height:'+heightxw+'vh;'">
<image :src="data.coverImage"
:style="'width: 100%; height:'+heightxw+'%; background-color: #000; position: absolute;'"
mode="aspectFit"></image>
<image class="playState" src="@/static/video/play.png"></image>
mode="aspectFit" />
<image class="playState" src="@/static/video/play.png" />
</view>
</view>
......@@ -56,70 +56,66 @@
</swiper>
<uni-popup type="bottom" ref="select">
<view v-if="fenji==1"
:style="'width: '+ windowWidth +'px; height: '+ (windowHeight/1.6) +'px; background-color: #202020; border-top-left-radius: 10px; border-top-right-radius: 10px;'">
<view :style="'width: '+ windowWidth +'px; height: 35px;'">
<view style="display: flex; flex-direction: row;">
<view style="display: flex; flex-direction: column;">
<view style="display: flex; flex-direction: row;">
<image src="@/static/video/layers.png"
style="width: 40rpx; height: 40rpx; margin-top: 20rpx; margin-left: 20rpx;"></image>
<view
:style="'font-size: 30rpx; font-weight: bold; color: #FFFFFF; margin-top: 20rpx; height: 40rpx; margin-left: 20rpx; width: '+ (windowWidth*0.6) +'px; overflow: hidden;'">
当前播放第{{ Number(originIndex+1) }}个视频
</view>
</view>
</view>
<image @click="down" src="@/static/video/down.png"
style="width: 50rpx; height: 50rpx; margin-top: 20rpx; position: absolute; right: 20rpx;">
</image>
: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;">
<image src="@/static/video/layers.png" style="width: 40rpx; height: 40rpx; margin-left: 20rpx;">
</image>
<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>
<scroll-view :style="'width: '+ (windowWidth) +'px; height: '+ ((windowHeight/1.6)*0.85) +'px;'"
:scroll-y="true" :scroll-top="scrollTop">
<block v-for="(list,index) in originList">
<view @click="selectThisVideo(index,list.pays)"
:style="'width: '+ (windowWidth) +'px; display: flex; flex-direction: row;'">
<image :src="data.coverImage" mode="aspectFill"
style="width: 100rpx; height: 120rpx; margin-top: 20rpx; margin-left: 20rpx; border-radius: 10rpx;">
</image>
<view style="display: flex; flex-direction: column; margin-top: 20rpx; margin-left: 20rpx;">
<view :style="'font-size: 26rpx; color: #FFFFFF; margin-top: 20rpx; overflow: hidden;'">
{{data.title}}
</view>
<view
:style="'font-size: 26rpx; color: #FFFFFF; margin-top: 10rpx; overflow: hidden; opacity: 0.6;'">
{{list.title}}
</view>
</view>
<view v-if="index == originIndex"
style="font-size: 26rpx; color: #FFFFFF;margin-left:30rpx;margin-top:30rpx;">
{{'正在播放中...'}}
<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="(index+1)>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="@/static/video/playing.png"
style="width:30rpx;height:30rpx;position:absolute;left:5rpx;bottom:5rpx;" />
</view>
</block>
</view>
<image v-if="(index+1)>data.unlockIndex" src="@/static/video/lock.png"
style="width: 50rpx; height: 50rpx; margin: auto 20rpx auto auto;"></image>
</view>
</block>
<view style="width: 1px; height: 1px; margin-top: 30px;"></view>
</scroll-view>
</scroll-view>
</swiper-item>
</swiper>
</view>
<view v-if="fenji==2"
:style="'width: '+ windowWidth +'px; background-color: #202020; border-top-left-radius: 10px; border-top-right-radius: 10px;'">
<view :style="'width: '+ windowWidth +'px; height: 35px;'">
<view style="display: flex; flex-direction: row;">
<view style="display: flex; flex-direction: column;">
<view style="display: flex; flex-direction: row;">
<image src="@/static/video/lock.png"
style="width: 40rpx; height: 40rpx; margin-top: 20rpx; margin-left: 20rpx;"></image>
<view
:style="'font-size: 30rpx; font-weight: bold; color: #FFFFFF; margin-top: 20rpx; margin-left: 20rpx; height: 40rpx; width: '+ (windowWidth*0.6) +'px; overflow: hidden;'">
当前视频 没有权限播放
</view>
</view>
</view>
<image @click="downbuy" src="@/static/video/down.png"
style="width: 50rpx; height: 50rpx; margin-top: 20rpx; position: absolute; right: 20rpx;">
</image>
<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;">
</image>
<view
:style="'font-size: 30rpx; font-weight: bold; color: #FFFFFF; margin-left: 20rpx; overflow: hidden;'">
当前视频 没有权限播放
</view>
<image @click="downbuy" src="@/static/video/down.png"
style="width: 50rpx; height: 50rpx; margin:0 20rpx 0 auto; ">
</image>
</view>
<view @click="govip()" class="gdfgjh mt-30">开通VIP</view>
</view>
......@@ -131,6 +127,10 @@
<script>
import common from '@/mixins/common';
import {
getSubList
} from "@/utils/utils.js"
import uniPopup from '@/components/uni-popup/uni-popup.vue';
import {
......@@ -169,8 +169,7 @@
isplay: true, //是否自动播放下一个视频
duration: 500,
issp: '',
isqp: true,
scrollTop: 0,
isqp: false,
mid: 0,
safeArea: 0,
ttuop: 0,
......@@ -178,7 +177,11 @@
userinfo: [],
moneyList: [],
data: {},
isPlayNext: 0
isPlayNext: 0,
tabIndex: 0,
tabs: [],
subList: [],
showTap: false,
};
},
onLoad(options) {
......@@ -202,10 +205,10 @@
this.windowHeight = uni.getSystemInfoSync().windowHeight - this.safeArea - this.ttuop
console.log(this.windowHeight)
this.Recommend();
this.getData();
},
onShow() {
this.Recommend()
this.getData()
},
methods: {
govip() {
......@@ -221,17 +224,17 @@
},
selectThisVideo(index, pays) {
this.down();
if (pays == 1) {
this.fenji = 2
this.$refs.select.open('bottom');
} else {
this.duration = 20;
this.originIndex = index
this.initSwiperData(index);
setTimeout(() => {
this.duration = 500;
}, 500)
}
// if (pays == 1) {
// this.fenji = 2
// this.$refs.select.open('bottom');
// } else {
this.duration = 20;
this.originIndex = index
this.initSwiperData(index);
setTimeout(() => {
this.duration = 500;
}, 500)
// }
},
down() {
this.$refs.select.close();
......@@ -243,9 +246,8 @@
this.fenji = 1
this.$refs.select.open('bottom');
this.$nextTick(() => {
let num1 = (this.windowHeight / 1.6) * 0.85;
let num2 = num1 / 4.78;
this.scrollTop = num2 * Number(this.originIndex);
// 延迟渲染，否则位置错乱
this.showTap = true
})
},
tapVideoHover(index, pays) {
......@@ -255,7 +257,7 @@
tapVides() {
this.isqp = !this.isqp
},
Recommend() {
getData() {
this.originList = []
this.post({
url: '/vedio/getIndexList',
......@@ -280,6 +282,8 @@
}
this.data = data.vedioMsg
this.initSwiperData(this.originIndex);
this.initEpisode()
}
});
},
......@@ -337,6 +341,8 @@
console.log('qqqqqq:', this.originList[originIndex + 1].vedioId)
// audo.play()
uni.createVideoContext("" + this.originList[originIndex + 1].vedioId, this).play();
this.commitVideo()
}, 500)
}
},
......@@ -367,6 +373,25 @@
}
},
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) {
console.log(e.detail.show);
this.issp = e.detail.show
......@@ -398,7 +423,22 @@
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>
......@@ -475,7 +515,6 @@
color: red;
}
.gdfgjh {
font-size: 30rpx;
font-weight: 600;
......@@ -511,28 +550,29 @@
z-index: 99;
width: 100%;
position: absolute;
bottom: 36px;
// bottom: 36px;
bottom: 0;
color: #ffffff;
flex-direction: column;
align-items: flex-start;
}
.userName {
font-size: 30rpx;
font-size: 36rpx;
color: #ffffff;
margin-left: 10rpx;
}
.wordss {
font-size: 26rpx;
font-size: 30rpx;
color: #ffffff;
margin-left: 10rpx;
}
.wordss2 {
width: 100%;
height: 60rpx;
// opacity: 0.6;
height: 80rpx;
opacity: 0.8;
background: black;
display: flex;
flex-direction: row;
......@@ -541,23 +581,23 @@
margin-top: 20rpx;
image {
margin-left: 10rpx;
width: 30rpx;
height: 30rpx;
margin-left: 20rpx;
width: 40rpx;
height: 40rpx;
}
.wordsss {
margin-right: 10rpx;
margin-right: 20rpx;
margin-left: auto;
width: 40rpx;
height: 40rpx;
width: 50rpx;
height: 50rpx;
}
}
.words {
margin-top: 20rpx;
margin-left: 10rpx;
font-size: 26rpx;
font-size: 30rpx;
color: #ffffff;
}
......
vedio/utils/utils.js
View file @ 002ae124
......@@ -271,44 +271,67 @@ export function imageCompress(file) {
})
})
}
//压缩base64图片
export function base64Compress(base64String, w, quality) {
var getMimeType = (urlData) => {
var arr = urlData.split(",");
var mime = arr[0].match(/:(.*?);/)[1];
// return mime.replace("image/", "");
return mime;
};
var newImage = new Image();
var imgWidth, imgHeight;
var promise = new Promise((resolve) => (newImage.onload = resolve));
newImage.src = base64String;
return promise.then(() => {
imgWidth = newImage.width;
imgHeight = newImage.height;
var canvas = document.createElement("canvas");
var ctx = canvas.getContext("2d");
if (Math.max(imgWidth, imgHeight) > w) {
if (imgWidth > imgHeight) {
canvas.width = w;
canvas.height = (w * imgHeight) / imgWidth;
} else {
canvas.height = w;
canvas.width = (w * imgWidth) / imgHeight;
}
} else {
canvas.width = imgWidth;
canvas.height = imgHeight;
}
ctx.clearRect(0, 0, canvas.width, canvas.height);
ctx.drawImage(newImage, 0, 0, canvas.width, canvas.height);
var base64 = canvas.toDataURL(getMimeType(base64String), quality);
console.log(base64);
return base64;
});
}
}
//压缩base64图片
export function base64Compress(base64String, w, quality) {
var getMimeType = (urlData) => {
var arr = urlData.split(",");
var mime = arr[0].match(/:(.*?);/)[1];
// return mime.replace("image/", "");
return mime;
};
var newImage = new Image();
var imgWidth, imgHeight;
var promise = new Promise((resolve) => (newImage.onload = resolve));
newImage.src = base64String;
return promise.then(() => {
imgWidth = newImage.width;
imgHeight = newImage.height;
var canvas = document.createElement("canvas");
var ctx = canvas.getContext("2d");
if (Math.max(imgWidth, imgHeight) > w) {
if (imgWidth > imgHeight) {
canvas.width = w;
canvas.height = (w * imgHeight) / imgWidth;
} else {
canvas.height = w;
canvas.width = (w * imgWidth) / imgHeight;
}
} else {
canvas.width = imgWidth;
canvas.height = imgHeight;
}
ctx.clearRect(0, 0, canvas.width, canvas.height);
ctx.drawImage(newImage, 0, 0, canvas.width, canvas.height);
var base64 = canvas.toDataURL(getMimeType(base64String), quality);
console.log(base64);
return base64;
});
}
export function getSubList(length, list) {
var size = list.length
var temp = size / length + 1
var result = (size % length) == 0
var subList = []
for (let i = 0; i < temp; i++) {
if (i == temp - 1) {
if (result) {
break
}
let tempList = list.slice(length * i, size)
if (tempList.length > 0) {
subList.push(tempList)
}
} else {
let tempList = list.slice(length * i, length * (i + 1))
if (tempList.length > 0) {
subList.push(tempList)
}
}
}
return subList
}
\ 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