Skip to content

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

优化逻辑

parent c0c3df06
Expand all 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
This diff is collapsed.
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