|
|
<!-- 自定义下拉刷新与上拉加载演示(vue) -->
|
|
|
<template>
|
|
|
<view class="wrap">
|
|
|
<!-- 视频播放 -->
|
|
|
<view class="playvideo" v-if="playvideo">
|
|
|
<view class="playvideowrap">
|
|
|
<video ref="videos-wrap" id="videos-wrap" :autoplay="true" @play="playFullScreen" :src="videoUrl"
|
|
|
play-btn-position="center"></video>
|
|
|
<view class="closevideo" @click="playvideo=false,videoUrl=''">X</view>
|
|
|
</view>
|
|
|
<!-- <u-icon name="photo" color="#fff" size="30"></u-icon> -->
|
|
|
</view>
|
|
|
|
|
|
<z-paging ref="paging" v-model="dataList" @query="queryList">
|
|
|
<!-- 需要固定在顶部不滚动的view放在slot="top"的view中，如果需要跟着滚动，则不要设置slot="top" -->
|
|
|
<!-- 注意！此处的z-tabs为独立的组件，可替换为第三方的tabs，若需要使用z-tabs，请在插件市场搜索z-tabs并引入，否则会报插件找不到的错误 -->
|
|
|
<template #top>
|
|
|
<view class="navBarBox" :style="{height:navBarBoxHeight+'px'}">
|
|
|
<!-- 状态栏占位 -->
|
|
|
<view class="statusBar" :style="{paddingTop: navBarTop+'px'}"></view>
|
|
|
<!-- 真正的导航栏内容 -->
|
|
|
<view class="navBar" :style="{'height':navBarHeight+'px','line-height':navBarHeight+'px'}">
|
|
|
<view class="back" @click="goback">
|
|
|
<u-icon name="arrow-left"></u-icon>
|
|
|
</view>
|
|
|
<view>{{menutitle}}</view>
|
|
|
</view>
|
|
|
</view>
|
|
|
<!-- <z-tabs :list="tabList" @change="tabChange" /> -->
|
|
|
</template>
|
|
|
|
|
|
<!-- 如果希望其他view跟着页面滚动，可以放在z-paging标签内 -->
|
|
|
<view class="item" v-for="(item,index) in dataList" :key="index" @click="itemClick(item)">
|
|
|
<view class="item-wrap">
|
|
|
<view v-if="item.audio.poster" class="item-posters">
|
|
|
<image class="item-poster" :src="item.audio.poster"></image>
|
|
|
<view class="item-poster-mask">
|
|
|
<u-icon size="36" color="#e50015" name="play-right"></u-icon>
|
|
|
</view>
|
|
|
</view>
|
|
|
<view class="item-title">
|
|
|
{{item.audio.title}}
|
|
|
<span v-if="item.source">（{{item.audio.source}}）</span>
|
|
|
</view>
|
|
|
</view>
|
|
|
|
|
|
<view class="item-time">
|
|
|
学习时间：{{item.created_at}}
|
|
|
</view>
|
|
|
<view class="item-line"></view>
|
|
|
</view>
|
|
|
</z-paging>
|
|
|
</view>
|
|
|
</template>
|
|
|
|
|
|
<script>
|
|
|
import {
|
|
|
shareInfo
|
|
|
} from "@/common/util.js"
|
|
|
export default {
|
|
|
data() {
|
|
|
return {
|
|
|
// v-model绑定的这个变量不要在分页请求结束中自己赋值！！！
|
|
|
dataList: [],
|
|
|
list:[],
|
|
|
navBarBoxHeight: 0,
|
|
|
navBarHeight:0,
|
|
|
navBarTop:0,
|
|
|
menutitle: '学习记录',
|
|
|
playvideo:false,
|
|
|
videoUrl:'',
|
|
|
|
|
|
}
|
|
|
},
|
|
|
onShareAppMessage() {
|
|
|
return shareInfo
|
|
|
},
|
|
|
onShareTimeline(){
|
|
|
return shareInfo
|
|
|
},
|
|
|
onLoad() {
|
|
|
const MenuButton = uni.getMenuButtonBoundingClientRect()
|
|
|
this.navBarTop = MenuButton.top //左侧文字与右侧胶囊对齐
|
|
|
this.navBarHeight = MenuButton.height
|
|
|
this.navBarBoxHeight = this.navBarTop + this.navBarHeight + 10
|
|
|
},
|
|
|
methods: {
|
|
|
goback(){
|
|
|
uni.switchTab({
|
|
|
url:'/pages/me/me'
|
|
|
})
|
|
|
},
|
|
|
playFullScreen(){
|
|
|
let videoContext = uni.createVideoContext('videos-wrap', this)
|
|
|
console.log("videoContext",videoContext)
|
|
|
videoContext.requestFullScreen()
|
|
|
},
|
|
|
queryList(pageNo, pageSize) {
|
|
|
// 组件加载时会自动触发此方法，因此默认页面加载时会自动触发，无需手动调用
|
|
|
// 这里的pageNo和pageSize会自动计算好，直接传给服务器即可
|
|
|
// 模拟请求服务器获取分页数据，请替换成自己的网络请求
|
|
|
const params = {
|
|
|
page: pageNo,
|
|
|
page_size: pageSize
|
|
|
}
|
|
|
this.$u.api.getMyAudios(params).then(res => {
|
|
|
this.$refs.paging.complete(res.data);
|
|
|
this.firstLoaded = true;
|
|
|
})
|
|
|
},
|
|
|
itemClick(item) {
|
|
|
console.log(item.audio.audio_file)
|
|
|
if (item.audio.audio_file) {
|
|
|
this.videoUrl = item.audio.audio_file
|
|
|
this.playvideo = true
|
|
|
} else {
|
|
|
uni.navigateTo({
|
|
|
url: '/pages/detail/detail?id=' + item.audio.id
|
|
|
})
|
|
|
}
|
|
|
}
|
|
|
}
|
|
|
}
|
|
|
</script>
|
|
|
|
|
|
<style lang="scss">
|
|
|
.wrap {
|
|
|
.navBarBox {
|
|
|
// position: fixed;
|
|
|
// top: 0;
|
|
|
// left: 0;
|
|
|
// z-index: 999;
|
|
|
width: 100%;
|
|
|
|
|
|
padding: 0 20rpx;
|
|
|
background: linear-gradient(to right, #da212d, #f96666);
|
|
|
// margin-bottom:24rpx;
|
|
|
.navBar {
|
|
|
color: #fff;
|
|
|
font-size: 32rpx;
|
|
|
text-align: center;
|
|
|
|
|
|
.back {
|
|
|
position: absolute;
|
|
|
left: 20rpx;
|
|
|
|
|
|
}
|
|
|
}
|
|
|
}
|
|
|
|
|
|
.swiper {
|
|
|
height: 100%;
|
|
|
|
|
|
}
|
|
|
::v-deep .zp-paging-container-content{
|
|
|
padding-bottom:20rpx;
|
|
|
}
|
|
|
.loadmore{
|
|
|
font-size: 15px;
|
|
|
margin: 0px 3px;
|
|
|
color:rgb(164, 164, 164);
|
|
|
text-align: center;
|
|
|
height:80rpx;
|
|
|
line-height: 80rpx;
|
|
|
}
|
|
|
}
|
|
|
|
|
|
.item {
|
|
|
position: relative;
|
|
|
/* height: 150rpx; */
|
|
|
margin: 0rpx 30rpx;
|
|
|
|
|
|
|
|
|
}
|
|
|
.item-wrap{
|
|
|
display: flex;
|
|
|
align-items: center;
|
|
|
justify-content: flex-start;
|
|
|
padding: 30rpx 5rpx;
|
|
|
padding-bottom:10rpx;
|
|
|
font-size: 0;
|
|
|
}
|
|
|
.item-time{
|
|
|
color:#999;
|
|
|
font-size: 28rpx;
|
|
|
padding:0 5rpx;
|
|
|
padding-bottom:10rpx;
|
|
|
}
|
|
|
.item-title {
|
|
|
display: -webkit-box;
|
|
|
-webkit-box-orient: vertical;
|
|
|
-webkit-line-clamp: 2;
|
|
|
overflow: hidden;
|
|
|
text-overflow: ellipsis;
|
|
|
font-size: 28rpx;
|
|
|
line-height: 1.8;
|
|
|
}
|
|
|
|
|
|
.item-line {
|
|
|
position: absolute;
|
|
|
bottom: 0rpx;
|
|
|
left: 0rpx;
|
|
|
height: 1px;
|
|
|
width: 100%;
|
|
|
background-color: #eeeeee;
|
|
|
}
|
|
|
.item-posters{
|
|
|
position: relative;
|
|
|
}
|
|
|
.item-poster {
|
|
|
width: 196rpx;
|
|
|
height: 129rpx;
|
|
|
margin-right: 24rpx;
|
|
|
position: relative;
|
|
|
}
|
|
|
.item-poster-mask{
|
|
|
position: absolute;
|
|
|
top:0;
|
|
|
left:0;
|
|
|
width: 196rpx;
|
|
|
height: 129rpx;
|
|
|
background-color: rgba(0,0,0,0.5);
|
|
|
text-align: center;
|
|
|
line-height: 129rpx;
|
|
|
}
|
|
|
.playvideo {
|
|
|
width: 100%;
|
|
|
height: 100%;
|
|
|
position: absolute;
|
|
|
top: 0;
|
|
|
left: 0;
|
|
|
z-index: 11;
|
|
|
background-color: rgba(0, 0, 0, 0.6);
|
|
|
|
|
|
&>.playvideowrap {
|
|
|
width: 95%;
|
|
|
position: absolute;
|
|
|
top: 50%;
|
|
|
left: 50%;
|
|
|
transform: translate(-50%, -50%);
|
|
|
|
|
|
video {
|
|
|
width: 100%
|
|
|
}
|
|
|
|
|
|
.closevideo {
|
|
|
color: #fff;
|
|
|
width: 50rpx;
|
|
|
height: 50rpx;
|
|
|
border: 1px solid #fff;
|
|
|
border-radius: 50rpx;
|
|
|
position: absolute;
|
|
|
text-align: center;
|
|
|
line-height: 50rpx;
|
|
|
/* display: inline-block; */
|
|
|
right: 0rpx;
|
|
|
top: -25rpx // transform: translate(0,-50%);
|
|
|
}
|
|
|
}
|
|
|
|
|
|
}
|
|
|
</style>
|
