You can not select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
391 lines
9.7 KiB
391 lines
9.7 KiB
<template>
|
|
<view class="v-pages bgcolor tab">
|
|
<!-- tab切换 -->
|
|
<view class="v-tab-list row flex-align-center">
|
|
<view class="tab-item col-12" :class="activeTab==item.value?'active':''" v-for="(item,index) in tab_list"
|
|
:key="index" @click="activeTab=item.value">{{item.name}}</view>
|
|
</view>
|
|
|
|
<!-- 影动心声 -->
|
|
<view v-if="activeTab==1" class="v-page-tab-top">
|
|
<!-- 影动心声 热门推荐 -->
|
|
<view class="v-card container-fluid">
|
|
<view class="v-page-title circle">
|
|
<view class="inner"><text class="text">热门推荐</text></view>
|
|
</view>
|
|
<scroll-view scroll-x="true">
|
|
<view class="v-pages-suggest video row">
|
|
<view class="list_item" v-for="(item,index) in class_list" :key="index"
|
|
@click="openVideo(item)">
|
|
<view class="item_image">
|
|
<image class="img" :src="item.logo" mode="widthFix"></image>
|
|
</view>
|
|
<view class="item_title">{{item.title}}</view>
|
|
</view>
|
|
</view>
|
|
</scroll-view>
|
|
</view>
|
|
|
|
<!-- 影动心声 列表 -->
|
|
<view class="v-card container-fluid m-t-24">
|
|
<view class="v-page-title circle">
|
|
<view class="inner"><text class="text">精选视频</text></view>
|
|
</view>
|
|
<mescroll-uni :up="upOption" @down="downCallback" @up="upCallback" :fixed="false">
|
|
<view class="v-video-list row">
|
|
<view class="list_item col-12" v-for="(item,index) in data_list" :key="index"
|
|
@click="openVideo(item)">
|
|
<view class="item_box">
|
|
<view class="item_image">
|
|
<image class="img" :src="item.logo" mode="widthFix"></image>
|
|
</view>
|
|
<view class="item_content col">
|
|
<view class="title">{{item.title}}</view>
|
|
</view>
|
|
</view>
|
|
</view>
|
|
</view>
|
|
</mescroll-uni>
|
|
</view>
|
|
</view>
|
|
|
|
<!-- 音悦时光 -->
|
|
<view v-if="activeTab==2" class="v-page-tab-top">
|
|
<!-- 音悦时光 热门推荐 -->
|
|
<view class="v-card container-fluid">
|
|
<view class="v-page-title circle">
|
|
<view class="inner"><text class="text">热门推荐</text></view>
|
|
</view>
|
|
<scroll-view scroll-x="true">
|
|
<view class="v-pages-suggest audio row">
|
|
<view class="list_item" v-for="(item,index) in class_list" :key="index"
|
|
@click="openAutio(item)">
|
|
<view class="item_image">
|
|
<image class="img" :src="item.logo" mode="widthFix"></image>
|
|
</view>
|
|
<view class="item_title">{{item.title}}</view>
|
|
</view>
|
|
</view>
|
|
</scroll-view>
|
|
</view>
|
|
|
|
<!-- 音悦时光 列表 -->
|
|
<view class="v-card container-fluid m-t-24">
|
|
<view class="v-page-title circle">
|
|
<view class="inner"><text class="text">精选音频</text></view>
|
|
</view>
|
|
<mescroll-uni :up="upOption" @down="downCallback" @up="upCallback" :fixed="false">
|
|
<view class="v-audio-list">
|
|
<view class="list_item row" v-for="(item,index) in data_list" :key="index"
|
|
@click="openAutio(item)">
|
|
<view class="item_image">
|
|
<image class="img" :src="item.logo" mode="widthFix"></image>
|
|
</view>
|
|
<view class="item_content col row">
|
|
<view class="title col">{{item.title}}</view>
|
|
<view class="item_play">
|
|
</view>
|
|
</view>
|
|
</view>
|
|
</view>
|
|
</mescroll-uni>
|
|
</view>
|
|
</view>
|
|
<!-- 视频弹窗 -->
|
|
<view class="v-video-popup" v-show="videoVisible">
|
|
<view class="v-video-popup-content">
|
|
<view class="close" @click="videoVisible=false"></view>
|
|
<video controls class="video" id="myVideo" :src="activeVideo.videopath"></video>
|
|
<view class="v-video-popup-title m-t-12">{{activeVideo.title}}</view>
|
|
</view>
|
|
</view>
|
|
<!-- 音频弹窗 -->
|
|
<view class="v-video-popup" v-if="autioVisible">
|
|
<view class="v-video-popup-content">
|
|
<view class="close" @click="autioVisible=false"></view>
|
|
<SyAudio style="text-align: center" autoplay :src="activeAutio.src" :audioCover="activeAutio.poster"
|
|
:audioTitle="activeAutio.name"></SyAudio>
|
|
</view>
|
|
</view>
|
|
</view>
|
|
</template>
|
|
|
|
<script>
|
|
// 自定义的mescroll-xinlang.vue
|
|
import MescrollUni from '@/components/mescroll-diy/mescroll-xinlang.vue';
|
|
import SyAudio from '@/subPageA/components/sy-audio/sy-audio.vue';
|
|
export default {
|
|
components: {
|
|
MescrollUni,
|
|
SyAudio
|
|
},
|
|
data() {
|
|
return {
|
|
rootPath: this.$config.ROOTPATH,
|
|
//tab
|
|
activeTab: 1,
|
|
tab_list: [{
|
|
name: "影动心声",
|
|
value: 1
|
|
}, {
|
|
name: "音悦时光",
|
|
value: 2
|
|
}],
|
|
|
|
class_list: [],
|
|
data_list: [],
|
|
videoVisible: false,
|
|
activeVideo: {},
|
|
autioVisible: false,
|
|
activeAutio: {},
|
|
audioAction: {
|
|
method: 'pause'
|
|
},
|
|
//滚动
|
|
downOption: {
|
|
auto: false //是否在初始化完毕之后自动执行下拉回调callback; 默认true
|
|
},
|
|
upOption: {
|
|
auto: true //是否在初始化完毕之后自动执行下拉回调callback; 默认true
|
|
},
|
|
mescroll: '',
|
|
param: {
|
|
pagesize: 10,
|
|
pageno: 1,
|
|
noData: false,
|
|
loading: false,
|
|
finished: false,
|
|
type: 1,
|
|
userkey: this.$param.userkey,
|
|
},
|
|
};
|
|
},
|
|
watch: {
|
|
activeTab: {
|
|
// 监听器的回调函数，当属性值变化时执行
|
|
handler(newValue, oldValue) {
|
|
this.param.type = newValue
|
|
this.param.pageno = 1
|
|
this.getInitPage()
|
|
this.getListData()
|
|
},
|
|
// 是否立即触发回调函数，默认为false
|
|
immediate: false,
|
|
// 深度监听对象内部的属性变化，默认为false
|
|
deep: false
|
|
},
|
|
},
|
|
onLoad(option) {
|
|
|
|
},
|
|
onShow() {
|
|
this.getInitPage()
|
|
},
|
|
methods: {
|
|
// 页面初始化
|
|
getInitPage: function() {
|
|
this.getClassData()
|
|
},
|
|
/*下拉刷新的回调 */
|
|
downCallback() {
|
|
this.mescroll.resetUpScroll();
|
|
},
|
|
upCallback(mescroll) {
|
|
this.mescroll = mescroll
|
|
this.param.pageno = this.mescroll.num
|
|
this.getListData();
|
|
},
|
|
// 获取分类数据
|
|
getClassData() {
|
|
this.$Request.get(this.$config.getVideoList, this.param, '', '', false, '').then(res => {
|
|
this.class_list = res.data.recommendList.map((item, index) => {
|
|
return {
|
|
isrecommend: item.isrecommend,
|
|
guid: item.guid,
|
|
logo: this.rootPath + item.logo,
|
|
title: item.title,
|
|
videopath: this.rootPath + item.videopath,
|
|
soundpath: this.rootPath + item.soundpath
|
|
}
|
|
})
|
|
});
|
|
},
|
|
|
|
// 获取列表数据
|
|
getListData() {
|
|
this.$Request.get(this.$config.getVideoList, this.param, '', '', false, '').then(res => {
|
|
const curPageData = res.data.selectList || [] // 当前页数据
|
|
if (this.mescroll.num == 1) this.data_list = []; // 第一页需手动制空列表
|
|
curPageData.forEach((item, index) => {
|
|
let data = {
|
|
isrecommend: item.isrecommend,
|
|
guid: item.guid,
|
|
logo: this.rootPath + item.logo,
|
|
title: item.title,
|
|
videopath: this.rootPath + item.videopath,
|
|
soundpath: this.rootPath + item.soundpath
|
|
}
|
|
this.data_list.push(data)
|
|
})
|
|
|
|
setTimeout(() => {
|
|
this.mescroll.endSuccess(curPageData.length); // 请求成功, 结束加载
|
|
}, 1000);
|
|
}).catch(() => {
|
|
this.mescroll.endErr(); // 请求失败, 结束加载
|
|
});
|
|
},
|
|
// 获取视频 弹框
|
|
openVideo(val) {
|
|
this.videoVisible = true
|
|
this.activeVideo = val
|
|
},
|
|
// 获取音频 弹框
|
|
openAutio(val) {
|
|
this.activeAutio = {
|
|
poster: val.logo,
|
|
name: val.title,
|
|
src: val.soundpath,
|
|
}
|
|
console.log(this.activeAutio)
|
|
this.autioVisible = true
|
|
}
|
|
}
|
|
};
|
|
</script>
|
|
|
|
|
|
<style lang="scss">
|
|
.v-video-list {
|
|
flex-wrap: wrap;
|
|
margin-left: -24rpx;
|
|
|
|
.list_item {
|
|
margin-bottom: 24rpx;
|
|
|
|
.item_box {
|
|
margin-left: 24rpx;
|
|
box-sizing: border-box;
|
|
}
|
|
|
|
.item_image {
|
|
position: relative;
|
|
width: 100%;
|
|
height: 220rpx;
|
|
border-radius: 16rpx;
|
|
overflow: hidden;
|
|
|
|
&::after {
|
|
content: '';
|
|
position: absolute;
|
|
top: 50%;
|
|
left: 50%;
|
|
transform: translate(-50%, -50%);
|
|
width: 60rpx;
|
|
height: 60rpx;
|
|
background: url('https://eluyou.ailuquan.cn/upload/image/2024/mapIcon/daolan/icon-video-play.png');
|
|
background-repeat: no-repeat;
|
|
background-size: contain;
|
|
}
|
|
|
|
.img {
|
|
width: 110%;
|
|
}
|
|
}
|
|
|
|
.item_content {
|
|
.title {
|
|
margin-top: 8rpx;
|
|
font-size: 28rpx;
|
|
color: #333333;
|
|
font-weight: bold;
|
|
display: -webkit-box;
|
|
-webkit-line-clamp: 2;
|
|
-webkit-box-orient: vertical;
|
|
overflow: hidden;
|
|
}
|
|
}
|
|
}
|
|
}
|
|
|
|
.v-audio-list {
|
|
.list_item {
|
|
margin-bottom: 24rpx;
|
|
height: 100rpx;
|
|
|
|
.item_image {
|
|
width: 100rpx;
|
|
height: 100rpx;
|
|
margin-right: 20rpx;
|
|
border-radius: 16rpx;
|
|
overflow: hidden;
|
|
|
|
.img {
|
|
width: 110%;
|
|
}
|
|
}
|
|
|
|
.item_content {
|
|
border-bottom: 1rpx solid #eeeeef;
|
|
.title {
|
|
font-size: 28rpx;
|
|
color: #333333;
|
|
font-weight: bold;
|
|
display: -webkit-box;
|
|
-webkit-line-clamp: 2;
|
|
-webkit-box-orient: vertical;
|
|
overflow: hidden;
|
|
}
|
|
}
|
|
|
|
.item_play {
|
|
margin-left: 20rpx;
|
|
width: 50rpx;
|
|
height: 50rpx;
|
|
background: url('https://eluyou.ailuquan.cn/upload/image/2024/mapIcon/daolan/icon-autio-play.png');
|
|
background-repeat: no-repeat;
|
|
background-size: cover;
|
|
}
|
|
}
|
|
}
|
|
|
|
.v-video-popup {
|
|
position: fixed;
|
|
width: 100%;
|
|
height: 100%;
|
|
top: 0;
|
|
left: 0;
|
|
z-index: 99;
|
|
background-color: rgba(0, 0, 0, .85);
|
|
|
|
.v-video-popup-content {
|
|
position: absolute;
|
|
top: 50%;
|
|
left: 50%;
|
|
width: 90%;
|
|
transform: translate(-50%, -50%);
|
|
|
|
.close {
|
|
position: absolute;
|
|
top: -100rpx;
|
|
left: 50%;
|
|
right: 10rpx;
|
|
width: 80rpx;
|
|
height: 80rpx;
|
|
background: url('https://eluyou.ailuquan.cn/upload/image/2024/mapIcon/daolan/icon-close.png');
|
|
background-repeat: no-repeat;
|
|
background-size: contain;
|
|
}
|
|
|
|
.video {
|
|
width: 100%;
|
|
|
|
}
|
|
|
|
.v-video-popup-title {
|
|
text-align: center;
|
|
color: #fff;
|
|
}
|
|
}
|
|
}
|
|
</style>
|
|
|