Skip to content

U
uniapp_vedio
Commit 60ee181c authored by jyx's avatar jyx
Browse files
Options

代码优化

parent d0926dc0
Hide whitespace changes
Inline Side-by-side
Showing with 76 additions and 95 deletions
vedio/components/home/index.vue
View file @ 60ee181c
<template>
<view class="body">
<view v-if="showMask" class="show-mask flex-v" @click="showMask=false">
<view class="mt-30" style="width: 90%;text-align: right;">
<image style="width: 30rpx;height: 30rpx;padding:6rpx;
......@@ -12,10 +13,10 @@
<image :src="maskImage2" mode="widthFix"></image>
</view>
<z-paging class="flex-1" ref="paging" v-model="dataList" @query="queryList">
<scroll-view v-if="clientHeight != 0" scroll-y="true" :style="{'height': clientHeight + 'px'}"
@scroll="onScroll">
<view class="content">
<swiper class="banner" :style="'margin-top:'+statusBarHeight+'px;'" :indicator-dots="true"
:autoplay="true" :interval="2000" :duration="500">
<swiper class="banner" :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>
......@@ -32,14 +33,8 @@
<view style="position: relative;">
<view style="position: absolute;z-index: 10;margin-left: 20rpx;">
<view style="position: relative;">
<view style="
position: absolute;
z-index: 10;
width: 50rpx;
text-align: center;
margin-top: 8rpx;
font-size: 24rpx;
color: white;">
<view
style="position: absolute;z-index: 10;width: 50rpx;text-align: center;margin-top: 8rpx;font-size: 24rpx;color: white;">
{{index+1}}
</view>
<image v-if="index==0"
......@@ -62,14 +57,8 @@
:src="item.coverImage" mode="aspectFill"></image>
</view>
<view style="
position: absolute;
bottom: 10rpx;
background-color: black;
width: 100%;
opacity: 0.5;
">
<view
style="position: absolute;bottom: 10rpx;background-color: black;width: 100%;opacity: 0.5;">
<view style="display: flex;align-items: center;margin-left: 10rpx;">
<image
style="width: 20rpx;height: 20rpx;display: flex;align-items: right;margin-right: 10rpx;"
......@@ -104,14 +93,8 @@
<view style="position: relative;">
<image class="img" :src="item.coverImage" mode="aspectFill"></image>
<view style="
position: absolute;
bottom: 10rpx;
width: 95%;
padding: 10rpx;
background-color: black;
opacity: 0.5;
">
<view
style="position: absolute;bottom: 10rpx;width: 95%;padding: 10rpx;background-color: black;opacity: 0.5;">
<view style="display: flex;flex-direction: row;justify-content:space-between;">
<view style="display: flex;align-items: center;">
<image
......@@ -127,20 +110,13 @@
<view style="font-size: 30rpx;margin-top: 10rpx;margin-left: 12rpx;">{{item.title}}</view>
<!-- <view style="font-size: 22rpx;margin-top: 10rpx;margin-left: 12rpx;">{{item.vedioDesc}}</view> -->
</view>
<view class="item-wrap" v-for="(item, i) in dataList" :key="i" v-if="i % 2 == 1"
@click="handleInfo(item)">
<view style="position: relative;">
<image class="img" :src="item.coverImage" mode="aspectFill"></image>
<view style="
position: absolute;
bottom: 10rpx;
width: 95%;
padding: 10rpx;
background-color: black;
opacity: 0.5;
">
<view
style="position: absolute;bottom: 10rpx;width: 95%;padding: 10rpx;background-color: black;opacity: 0.5;">
<view style="display: flex;flex-direction: row;justify-content:space-between;">
<view style="display: flex;align-items: center;">
<image
......@@ -159,14 +135,12 @@
</view>
</view>
<u-loadmore :status="loadStatus" @loadmore="loadMore"></u-loadmore>
</view>
</z-paging>
</scroll-view>
<view v-if="newRecordBean!=null"
style="width: 97%;height: 150rpx;margin: 10rpx;opacity: 0.8;background-color: black;z-index: 20;position: absolute;bottom: 0;border-radius:10rpx;">
<view style="display: flex;margin-left: 10rpx;">
<view style="flex-grow: 2;display: flex;align-items: center;">
<image style="border-radius:10rpx; width: 100rpx;height: 130rpx;margin-top: 10rpx;"
......@@ -187,19 +161,10 @@
</view>
<view style="display: flex;flex-direction: column;align-items: flex-end;">
<image @click="handleBottomClose()"
style="width: 30rpx;height: 30rpx;display: flex;align-items: right;margin: 10rpx;"
<image @click="handleBottomClose()" style="width: 30rpx;height: 30rpx;display: flex;margin: 10rpx;"
src="../../static/index/ic_quit_white.png" mode="aspectFill"></image>
<view @click="handleBottomPlay(newRecordBean)" style="
width: 160rpx;
height: 50rpx;
line-height: 50rpx;
text-align: center;
background-color: red;
border-radius:30rpx;
color: white;
font-size: 24rpx;
margin-right: 20rpx;">
<view @click="handleBottomPlay(newRecordBean)"
style="width: 160rpx;height: 50rpx;margin-top: 8rpx;line-height: 50rpx;color: white;text-align: center;background-color: red;border-radius:30rpx;margin-right: 20rpx;">
继续观看
</view>
</view>
......@@ -207,29 +172,6 @@
</view>
</view>
<!-- <uni-popup type="center" ref="select">
<view>
<view style="font-size: 30rpx;font-weight: 777;color: white;">刚刚看的</view>
<view style="text-align: center;">
<view>
<video :id="recommendBean.vedioId" :loop="true" :enable-progress-gesture="false"
:show-loading="true" :show-fullscreen-btn="false"
style="width:100%; height:100%;background: #f56c6c;" :src="recommendBean.vedioUrl"
:poster="recommendBean.coverImage" play-btn-position="center" object-fit="contain" />
</view>
<view>123</view>
<view @click="handleVipPay"
style="width: 350rpx;height: 80rpx;background-color: #f2575b;border-radius:20rpx;color: white;font-size: 26rpx;justify-content: center;align-items: center;display: flex;">
立即试看
</view>
</view>
</view>
</uni-popup> -->
</view>
</template>
<script>
......@@ -267,10 +209,34 @@
showMask: false,
maskImage1: 'https://mints-web.oss-cn-beijing.aliyuncs.com/images/bg_find1.png',
maskImage2: 'https://mints-web.oss-cn-beijing.aliyuncs.com/images/bg_find2.png',
statusBarHeight: app.globalData.statusBarHeight,
clientHeight: 0,
page: 1,
size: 10,
loadStatus: 'loadmore'
};
},
mounted() {
let that = this
uni.getSystemInfo({
success: (res => {
this.clientHeight = res.windowHeight - 50;
})
});
// 匹配视频
this.showFirstDialog();
},
methods: {
onScroll(event) {
// 获取scrollview已滚动的高度
const scrollTop = event.detail.scrollTop;
// 获取内容的总高度
const contentHeight = event.detail.scrollHeight;
// 判断是否滑动到底部（已滚动的高度 + 视图高度 >= 内容高度）
if ((scrollTop + this.clientHeight + 50) >= contentHeight) {
this.loadMore()
}
},
showMaskFuc() {
let showFollowMask = uni.getStorageSync('show-follow-mask') || '';
......@@ -286,8 +252,6 @@
show() {
this.showMaskFuc()
// 匹配视频
this.showFirstDialog();
// 轮播图
this.post({
url: '/vedio/topTabs',
......@@ -308,6 +272,7 @@
this.topList = data.list;
}
});
// 最近观看剧
this.post({
url: '/vedio/newest',
......@@ -322,40 +287,56 @@
}
});
if (this.$refs.paging != null) {
this.$refs.paging.refresh();
}
},
hide() {
this.page = 1
this.size = 10
this.loadList()
},
queryList(page, size) {
hide() {},
loadList() {
// 推荐列表
this.post({
url: '/vedio/list',
data: {
page,
size
page: this.page,
size: this.size
},
showLoading: false,
success: ({
data
}) => {
this.$refs.paging.complete(data.list);
this.loadStatus = data.list.size < this.size ? 'nomore' : 'loadmore';
if (data.list.size <= 10) {
this.dataList = [...this.dataList, ...data.list];
return
}
if (this.page == 1) {
this.dataList = data.list
} else {
this.dataList = [...this.dataList, ...data.list];
}
}
});
},
handleBanner(item) {
loadMore() {
if (this.loadStatus === 'loading' || this.loadStatus === 'nomore') return;
this.loadStatus = 'loading'
this.page = ++this.page
this.loadList()
},
handleBanner(item) {
gotoVideoPlayerPage(item)
},
handleInfo(item) {
gotoVideoPlayerPage(item)
},
handleTop(item) {
gotoVideoPlayerPage(item)
handleTop(item) {
gotoVideoPlayerPage(item)
},
handleBottomPlay(item) {
gotoVideoPlayerPage(item)
handleBottomPlay(item) {
gotoVideoPlayerPage(item)
},
handleBottomClose() {
this.newRecordBean = null;
......@@ -383,8 +364,8 @@
success: ({
data
}) => {
if (data.vedioMsg != null) {
gotoVideoPlayerPage(data.vedioMsg)
if (data.vedioMsg != null) {
gotoVideoPlayerPage(data.vedioMsg)
// 重置短视频挂载id
uni.setStorage({
......
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