455 lines
14 KiB
Vue
455 lines
14 KiB
Vue
<template>
|
|
<view>
|
|
<navbar :backopen="false"></navbar>
|
|
<view class="u-p-l-30 u-p-r-30" @click="$u.route('/pagesA/index/search')">
|
|
<u-search @click="$u.route('/pagesA/index/search')" placeholder="搜短剧名/演员名，免费看短剧" :showAction="false"
|
|
disabled borderColor="#C81F22" searchIconColor="#C81F22"
|
|
:inputStyle="{backgroundColor:'#fff'}"></u-search>
|
|
</view>
|
|
<view class="u-p-t-20 u-p-l-30 u-p-r-30">
|
|
<u-swiper :list="bannerList" IconShow keyName="src" @click="clickSwiper" radius="6" circular indicator
|
|
indicatorStyle="right: 20px" indicatorMode="dot" indicatorActiveColor="#C81F22"></u-swiper>
|
|
|
|
<view class="gitGiF u-m-t-30" v-if="dy_seek == '1'">
|
|
<view class="imtext">
|
|
<view class="leftTriangle"></view>
|
|
<view class="seek">
|
|
如何找到我们
|
|
</view>
|
|
<view class="rightTriangle"></view>
|
|
</view>
|
|
<image class="homeGif" :src="home_gif" mode=""></image>
|
|
</view>
|
|
|
|
<view class="u-b-f u-m-t-30 u-radius-20 u-p-t-30 u-p-b-30 u-p-l-20">
|
|
<u-tabs :list="videoMenuList" IconShow keyName="name" lineWidth="0" :curennt="curennt"
|
|
:activeStyle="{padding:'0rpx 20rpx',fontSize:'30rpx'}"
|
|
:inactiveStyle="{padding:'0rpx 20rpx',color:'#86909C',fontSize:'24rpx'}" @click="TabsClick">
|
|
<view slot="right" class="u-flex u-p-r-20" @click="$u.route('/pagesA/index/charts')">
|
|
<view class="u-color-666 u-font-24 u-m-r-10">全部</view>
|
|
<u-icon name="arrow-right"></u-icon>
|
|
</view>
|
|
</u-tabs>
|
|
<scroll-view scroll-x class="w-100">
|
|
<view class="u-flex u-col-top">
|
|
<view v-if="index<4" class="u-m-r-20" v-for="(item,index) in recommendList" :key="index">
|
|
<view @click.stop="govideo(item1.id)" class="u-flex u-col-top u-m-t-30 u-w-300 "
|
|
v-for="(item1,index1) in item" :key="index1">
|
|
<view class="u-relative">
|
|
<u-image :src="apiUrl+ item1.img" width="100rpx" height="140rpx"
|
|
radius="5"></u-image>
|
|
<image v-show="index == 0 && index1==0" src="/static/image/icon8.png"
|
|
class="u-w-40 u-h-40 u-absolute u-index-1" style="top: 0px;left:-2px;"></image>
|
|
<image v-show="index == 0 && index1==1" src="/static/image/icon9.png"
|
|
class="u-w-40 u-h-40 u-absolute u-index-1" style="top: 0px;left:-2px;"></image>
|
|
<image v-show="index == 0 && index1==2" src="/static/image/icon10.png"
|
|
class="u-w-40 u-h-40 u-absolute u-index-1" style="top: 0px;left:-2px;"></image>
|
|
<view v-show="index != 0"
|
|
class="u-w-40 u-h-40 u-b-F9E1E9 u-text-center u-lh-40 u-font-20 u-absolute u-index-1"
|
|
style="border-radius:0 0 20rpx 0 ;top: 0px;left:0px;">{{3*index+index1+1}}
|
|
</view>
|
|
</view>
|
|
<view class="u-flex-1 u-m-l-16 u-flex-col u-h-140 u-row-between">
|
|
<view class="u-word-break u-line-2 u-font-26">{{item1.name}}</view>
|
|
<view class="u-color-999 u-font-24">
|
|
<!-- {{item1.album_status == 1?'未上映':item1.album_status == 2?'更新中':'已完结'}} -->
|
|
共{{item1.sum}}集
|
|
</view>
|
|
</view>
|
|
</view>
|
|
</view>
|
|
</view>
|
|
</scroll-view>
|
|
</view>
|
|
|
|
<view v-if="list.length>0" class="u-m-t-20 u-b-f u-radius-20 u-p-t-30 u-p-b-30 u-p-l-20 ">
|
|
<view class="u-flex">
|
|
<image src="/static/image/icon7.png" class="u-w-50 u-h-50"></image>
|
|
<view class="u-m-l-10 u-font-30">100分好剧</view>
|
|
</view>
|
|
<view class="u-flex u-flex-wrap u-col-top">
|
|
<view @click.stop="govideo(item.id)" class="u-m-t-30 u-m-r-20 u-w-200" v-for="(item,index) in list"
|
|
:key="index">
|
|
<view class="u-relative">
|
|
<u-image :src="apiUrl+ item.img" width="200rpx" height="280rpx" radius="6"></u-image>
|
|
<view
|
|
class="u-b-9505FF-09A7FF u-absolute u-index-1 u-w-72 u-h-40 u-text-center u-lh-40 u-color-f u-font-22"
|
|
style="border-radius: 12rpx 0 20rpx 0;top: 0px;left:0px;">{{item.video_tag}}</view>
|
|
</view>
|
|
<view class="u-m-t-10 u-word-break u-line-1 u-font-24">{{item.name}}</view>
|
|
<view class="u-m-t-10 u-word-break u-line-1 u-font-22 u-color-999">
|
|
<!-- {{item.album_status == 1?'未上映':item.album_status == 2?'更新中':'已完结'}} · -->
|
|
共{{item.sum}}集
|
|
</view>
|
|
</view>
|
|
</view>
|
|
</view>
|
|
<u-tabs :list="tabsList" lineWidth="0" :curennt="onTabsIndex"
|
|
:activeStyle="{background:'linear-gradient(to right,#FF5205,#FF0591)',color:'#fff',borderRadius:'10rpx',padding:'8rpx 20rpx'}"
|
|
:inactiveStyle="{background:'#ECECEC',padding:'8rpx 20rpx',borderRadius:'10rpx'}"
|
|
@click="onTabsClick"></u-tabs>
|
|
<view v-if="CatList.length>0" class="u-flex u-flex-wrap u-col-top">
|
|
<view @click.stop="govideo(item.id)" class="u-m-t-30 u-m-r-16 u-w-210" v-for="(item,index) in CatList"
|
|
:key="index">
|
|
<view class="u-relative">
|
|
<u-image :src="apiUrl+ item.img" width="210rpx" height="280rpx" radius="6"></u-image>
|
|
<view v-show="item.type_text && item.type_text!=''"
|
|
class="yichu u-b-FF5205-FF0591 u-absolute u-index-1 u-text-center u-lh-40 u-color-f u-font-22 u-p-t-4 u-p-b-4 u-p-l-10 u-p-r-10"
|
|
style="border-radius: 12rpx 0 20rpx 0;top: 0px;left:0px;">
|
|
<span>{{item.type_text.split(",")[0]}}</span>
|
|
</view>
|
|
<view class="u-absolute u-index-1 u-color-f u-font-20 u-word-break"
|
|
style="bottom:6rpx;right:6rpx;">{{item.views}}人看过</view>
|
|
</view>
|
|
<view class="u-m-t-10 u-word-break u-line-1 u-font-24">{{item.name}}</view>
|
|
<view class="u-m-t-10 u-word-break u-line-1 u-font-22 u-color-999">
|
|
{{item.album_status == 1?'未上映':item.album_status == 2?'更新中':'已完结'}} · 共{{item.sum}}集
|
|
</view>
|
|
</view>
|
|
</view>
|
|
<empty v-if="CatList.length<1"></empty>
|
|
<u-loadmore v-if="CatList.length>0" :status="status" icon-color="#999999" color="#999999" icon-type="circle"
|
|
margin-top="30" margin-bottom="30" />
|
|
</view>
|
|
|
|
<view v-if="show" class="u-fixed w-100 u-index-2" style="bottom: 40rpx;">
|
|
<view class="u-p-l-20 u-p-r-20">
|
|
<view class="u-b-383636 u-radius-20 u-p-t-10 u-p-b-10 u-p-l-20 u-p-r-20 u-flex u-col-top u-row-between">
|
|
<view class="u-flex">
|
|
<u-image :src="item.img" width="80rpx" height="120rpx" radius="6"></u-image>
|
|
<view class="u-flex-1 u-m-l-20 u-h-100 u-flex-col u-row-between u-p-t-10 u-p-b-10 u-color-f">
|
|
<view class="u-font-24 u-word-break u-line-1">{{LookInfo.vname}}</view>
|
|
<view class="u-font-20">{{LookInfo.mid}}集</view>
|
|
</view>
|
|
</view>
|
|
<view class="u-flex-col u-col-bottom">
|
|
<u-icon @click="show=false" stop name="close" color="#999" size="16"></u-icon>
|
|
<view @click.stop="govideo(LookInfo.vid)"
|
|
class="u-bnt-tabbar-FF5205-FF0591 u-radius-40 u-p-l-20 u-p-r-20 u-p-t-10 u-p-b-10 u-font-24 u-m-t-10">
|
|
继续播放</view>
|
|
</view>
|
|
</view>
|
|
</view>
|
|
</view>
|
|
</view>
|
|
</template>
|
|
|
|
<script>
|
|
import navbar from '@/components/navbar.vue'
|
|
export default {
|
|
components: {
|
|
navbar,
|
|
},
|
|
data() {
|
|
return {
|
|
bannerList: [], //轮播图
|
|
videoMenuList: [], //剧栏目
|
|
curennt: 0, //剧栏目tab切换事件
|
|
recommendList: [], //剧栏目数据
|
|
list: [], //100分好剧列表数据
|
|
tabsList: [], //分类tab
|
|
onTabsIndex: 0, //分类tab当前索引
|
|
CatList: [], //列表
|
|
status: 'loadmore', //加载更多
|
|
parameter: {
|
|
limit: 20, //每页的总条数
|
|
page: 1, //页码
|
|
cat_id: '0', //分类id 全部=0
|
|
},
|
|
show: false, //底部最近观看短剧显示隐藏
|
|
LookInfo: {}, //最近观看短剧信息
|
|
apiUrl: '', //域名
|
|
home_gif: "",
|
|
dy_seek: ""
|
|
}
|
|
},
|
|
onLoad(e) {
|
|
this.config()
|
|
},
|
|
onShow() {
|
|
this.videoMenu()
|
|
this.VideoCatList()
|
|
// this.getVideoGroupList()
|
|
this.videoLookGive()
|
|
},
|
|
// 下拉到底事件
|
|
onReachBottom() {
|
|
//避免多次触发
|
|
if (this.status == 'loading' || this.status == 'nomore') {
|
|
return;
|
|
}
|
|
this.getVideoList()
|
|
},
|
|
methods: {
|
|
// 公共参数
|
|
config() {
|
|
let that = this;
|
|
that.$httpRequest({
|
|
url: '/api/video/indexdata',
|
|
method: 'GET',
|
|
data: {},
|
|
isLoading: true,
|
|
}).then(res => {
|
|
if (res.config.name) {
|
|
uni.setNavigationBarTitle({
|
|
title: res.config.name
|
|
});
|
|
}
|
|
uni.setStorageSync("config", res.config)
|
|
|
|
this.bannerList = res.config.banner //轮播图
|
|
|
|
|
|
// this.config = res.config;
|
|
// this.banners = res.config.banner
|
|
// this.listbz = res.listbz
|
|
// this.listjq = res.listjq
|
|
// // this.datasa = res.new
|
|
// this.hotdata = res.hotdata
|
|
// this.givedata = res.givedata
|
|
// this.freedata = res.freedata;
|
|
}).catch(err => {
|
|
console.log(err)
|
|
})
|
|
|
|
},
|
|
clickSwiper(index) {
|
|
console.log('ok')
|
|
console.log(url)
|
|
var fxpid = 1
|
|
if (uni.getStorageSync("userinfo")) {
|
|
fxpid = uni.getStorageSync("userinfo").id
|
|
}
|
|
uni.navigateTo({
|
|
url: '/' + vlid + '?mid=' + 0 + '&fxpid=' + fxpid
|
|
})
|
|
},
|
|
// 剧栏目新剧 那个
|
|
async videoMenu() {
|
|
let that = this;
|
|
await that.$httpRequest({
|
|
url: '/api/pno/videoMenu',
|
|
method: 'GET',
|
|
isLoading: true,
|
|
}).then(res => {
|
|
if (res.code == 1) {
|
|
res.data[0].after_image = require('@/static/image/icon2.png')
|
|
res.data[0].before_image = require('@/static/image/icon1.png')
|
|
res.data[1].after_image = require('@/static/image/icon4.png')
|
|
res.data[1].before_image = require('@/static/image/icon3.png')
|
|
res.data[2].after_image = require('@/static/image/icon6.png')
|
|
res.data[2].before_image = require('@/static/image/icon5.png')
|
|
this.videoMenuList = res.data
|
|
this.videoGroupList()
|
|
}
|
|
})
|
|
},
|
|
// 剧栏目tab切换事件
|
|
TabsClick(e) {
|
|
this.curennt = e.index
|
|
this.videoGroupList()
|
|
},
|
|
// 剧栏目列表数据
|
|
videoGroupList() {
|
|
this.$httpRequest({
|
|
url: '/api/pno/videoGroupList',
|
|
method: 'GET',
|
|
data: {
|
|
menu_id: this.videoMenuList[this.curennt].id
|
|
},
|
|
isLoading: true,
|
|
}).then(res => {
|
|
if (res.code == 1) {
|
|
// 使用reduce方法进行分组
|
|
let groupedArray = res.data.data.reduce((acc, curr, index) => {
|
|
// 检查当前索引是否能被3整除，以确定是否需要开始一个新的分组
|
|
if (index % 3 === 0) {
|
|
acc.push([curr]); // 开始新的分组并添加当前元素
|
|
} else {
|
|
// 将当前元素添加到最后一个分组中
|
|
acc[acc.length - 1].push(curr);
|
|
}
|
|
return acc;
|
|
}, []); // 初始值是一个空数组
|
|
this.recommendList = groupedArray
|
|
}
|
|
})
|
|
},
|
|
// 100分好剧
|
|
getVideoGroupList() {
|
|
this.$httpRequest({
|
|
url: '/api/pno/videoGroupList',
|
|
method: 'GET',
|
|
data: {
|
|
is_top: 1,
|
|
limit: 99
|
|
},
|
|
isLoading: true,
|
|
}).then(res => {
|
|
if (res.code == 1) {
|
|
this.list = res.data.data
|
|
}
|
|
})
|
|
},
|
|
// 分类tab列表数据
|
|
VideoCatList() {
|
|
this.$httpRequest({
|
|
url: '/api/pno/VideoCatList',
|
|
method: 'GET',
|
|
isLoading: true,
|
|
}).then(res => {
|
|
if (res.code == 1) {
|
|
res.data.unshift({
|
|
name: '全部',
|
|
id: 0
|
|
})
|
|
this.tabsList = res.data
|
|
this.clear()
|
|
}
|
|
})
|
|
},
|
|
// 分类tab切换事件
|
|
onTabsClick(e) {
|
|
this.onTabsIndex = e.index
|
|
this.clear()
|
|
},
|
|
clear() {
|
|
this.parameter.cat_id = this.tabsList[this.onTabsIndex].id
|
|
this.parameter.page = 1
|
|
this.CatList = []
|
|
this.getVideoList()
|
|
},
|
|
// 分类tab列表数据下拉刷新和上拉加载更多
|
|
getVideoList() {
|
|
this.$httpRequest({
|
|
url: '/api/pno/videoGroupList',
|
|
method: 'GET',
|
|
data: {
|
|
...this.parameter
|
|
},
|
|
isLoading: true,
|
|
}).then(res => {
|
|
if (res.code == 1) {
|
|
if (res.data.data.length < this.parameter.limit) {
|
|
this.status = 'nomore';
|
|
} else {
|
|
this.parameter.page = this.parameter.page + 1;
|
|
this.status = 'loadmore';
|
|
}
|
|
this.CatList = this.CatList.concat(res.data.data);
|
|
uni.stopPullDownRefresh();
|
|
}
|
|
})
|
|
|
|
// this.$api.videoGroupList(this.parameter).then(res => {
|
|
// if (res.code == 1) {
|
|
// if (res.data.data.length < this.parameter.limit) {
|
|
// this.status = 'nomore';
|
|
// } else {
|
|
// this.parameter.page = this.parameter.page + 1;
|
|
// this.status = 'loadmore';
|
|
// }
|
|
// this.CatList = this.CatList.concat(res.data.data);
|
|
// uni.stopPullDownRefresh();
|
|
// }
|
|
// })
|
|
},
|
|
// 底部最近观看短剧数据
|
|
async videoLookGive() {
|
|
// this.$api.videoLookGive().then(res => {
|
|
// if (res.code == 1) {
|
|
// if (res.data.id) {
|
|
// this.show = true
|
|
// this.LookInfo = res.data
|
|
// }
|
|
// }
|
|
// })
|
|
|
|
await this.$httpRequest({
|
|
url: "/api/video/videolog",
|
|
methods: "GET",
|
|
data: {
|
|
limit: 1,
|
|
page: this.page
|
|
}
|
|
}).then(res => {
|
|
if (res.total == 1) {
|
|
this.show = true
|
|
this.LookInfo = res.rows[0]
|
|
}
|
|
})
|
|
|
|
},
|
|
// 进入短剧播放页面
|
|
govideo(vlid) {
|
|
uni.navigateTo({
|
|
url: '/pagesA/player/detailPlayer?vid=' + vlid + '&mid=' + 0
|
|
})
|
|
},
|
|
}
|
|
}
|
|
</script>
|
|
|
|
<style scoped lang="scss">
|
|
.yichu {
|
|
display: -webkit-box;
|
|
/*将对象转为弹性盒模型展示*/
|
|
-webkit-box-orient: vertical;
|
|
/*设置弹性盒模型子元素的排列方式*/
|
|
-webkit-line-clamp: 1;
|
|
/*限制文本行数*/
|
|
overflow: hidden;
|
|
/*超出隐藏*/
|
|
}
|
|
|
|
::v-deep .u-tabs__wrapper__nav__item {
|
|
padding: 0 6rpx !important;
|
|
}
|
|
|
|
::v-deep .u-search__content {
|
|
background-color: #ffffff !important;
|
|
}
|
|
|
|
.gitGiF {
|
|
background-color: #fff;
|
|
padding: 20rpx;
|
|
border-radius: 20rpx;
|
|
font-size: 0rpx
|
|
}
|
|
|
|
.imtext {
|
|
display: flex;
|
|
justify-content: center;
|
|
margin-top: -30rpx;
|
|
margin-bottom: 12rpx;
|
|
}
|
|
|
|
.seek {
|
|
font-size: 24rpx;
|
|
background-color: #FE2C55;
|
|
color: #ffffff;
|
|
height: 32rpx;
|
|
line-height: 32rpx;
|
|
}
|
|
|
|
.leftTriangle {
|
|
width: 0;
|
|
height: 0;
|
|
border-top: 32rpx solid #FE2C55;
|
|
border-right: 32rpx solid #FE2C55;
|
|
border-left: 32rpx solid transparent;
|
|
}
|
|
|
|
.rightTriangle {
|
|
width: 0;
|
|
height: 0;
|
|
border-top: 32rpx solid #FE2C55;
|
|
border-right: 32rpx solid transparent;
|
|
border-left: 32rpx solid #FE2C55;
|
|
}
|
|
|
|
.homeGif {
|
|
width: 100%;
|
|
height: 320rpx;
|
|
}
|
|
</style> |