martial-arts/pagesA/my-watch/my-watch.vue

<template>
	<view>
		<status-container titlet="观看记录" returnc="#FFFFFF">
			<view slot="content" style="margin-top: -20rpx;">
				<view class="pad-zy30 bacf pad-x30" v-if="total">
					<view class="pad-sx30 disac fon24 bbot" v-for="(item,index) in dataList" :key="index">
						<image class="flexs" :src="hostapi + item.course_video_cover" mode="aspectFill" style="width: 228rpx;height: 160rpx;"></image>
						<view class="disjbac fc width100 mar-z20" style="height: 160rpx;">
							<view class="fon28 col26 width100">
								<view class="clips2">{{item.course_video_title}}</view>
								<view class="fon24 mar-s10" style="color: #7f7f7f;">观看时长：{{item.duration}}</view>
							</view>
							<view class="disjbac width100">
								<view class="fon24"></view>
								<view @tap="getVideoInfo(item.course_video_id)" class="disjcac fon22 radius26" style="width: 144rpx;height: 52rpx;color: #f37717;border: 2rpx solid #f37717;">点击查看</view>
							</view>
						</view>
					</view>
				</view>
				<view class="" v-if="loading">
					<pitera :textStr="`${noMore && total > dataList.length?'上滑加载更多':'到底了'}~~`" textColor="#b0aaa9" paddingStr="40rpx 0 20rpx 0"></pitera>
				</view>
			</view>
		</status-container>
	</view>
</template>

<script>
	import swiperTab from '@/components/swiper-tab/swiper-tab.vue';
	import pitera from '@/components/nothing/pitera.vue';
	export default {
		components:{
			swiperTab,
			pitera
		},
		data() {
			return {
				dataList:[],
				page:1,
				size:20,
				total:0,
				noMore:false,
				loading:false,
				hostapi:'',// 域名
			}
		},
		onLoad() {
			this.hostapi = getApp().globalData.hostapiQi;
			// 获取课程列表
			this.getCouresList();
		},
		onReachBottom() {
			if(this.total!=this.dataList.length){
				this.page++;
				this.getCouresList();
			}
		},
		methods: {
			// 获取课程列表
			getCouresList(){
				this.loading = false;
				let params = {
					page:this.page,
					size:this.size
				}
				this.$requst.post('/api/course/course-browse-records',params).then(res=>{
					if(res.code == 0) {
						this.total = res.data.total;
						if(this.page==1){this.dataList=[];}
						this.dataList = [...this.dataList,...res.data.list];
						this.dataList.forEach((item,index)=>{
							item.duration = this.formatSeconds(item.duration)
						})
						if(this.total==this.dataList.length && this.page!=1){
							this.noMore = true;
						}
						this.loading = true;
						
					}
				})
			},
			
			getVideoInfo(id) {
				this.$requst.post('/api/course/get-course-video-info',{course_video_id:id}).then(res=>{
					console.log(res.code,'课程视频')
					if(res.code == 0) {
						uni.navigateTo({
							url:`/pagesB/course-video/course-video?id=${id}`
						})
					}else {
						uni.showToast({
							title: res.msg,//标题 必填
							icon: 'error',//图标
						})
					}
					
				})
			},
			
			// 秒数转化为时分秒
			formatSeconds(value) {
				  //  秒
				  let second = parseInt(value)
				  //  分
				  let minute = 0
				  //  小时
				  let hour = 0
				  //  天
				  //  let day = 0
				  //  如果秒数大于60，将秒数转换成整数
				  if (second > 60) {
					//  获取分钟，除以60取整数，得到整数分钟
					minute = parseInt(second / 60)
					//  获取秒数，秒数取佘，得到整数秒数
					second = parseInt(second % 60)
					//  如果分钟大于60，将分钟转换成小时
					if (minute > 60) {
					  //  获取小时，获取分钟除以60，得到整数小时
					  hour = parseInt(minute / 60)
					  //  获取小时后取佘的分，获取分钟除以60取佘的分
					  minute = parseInt(minute % 60)
					  //  如果小时大于24，将小时转换成天
					  //  if (hour > 23) {
					  //    //  获取天数，获取小时除以24，得到整天数
					  //    day = parseInt(hour / 24)
					  //    //  获取天数后取余的小时，获取小时除以24取余的小时
					  //    hour = parseInt(hour % 24)
					  //  }
					}
				  }
				
				  let result = '' + parseInt(second) + '秒'
				  if (minute > 0) {
					result = '' + parseInt(minute) + '分' + result
				  }
				  if (hour > 0) {
					result = '' + parseInt(hour) + '小时' + result
				  }
				  //  if (day > 0) {
				  //    result = '' + parseInt(day) + '天' + result
				  //  }
				  console.log('result：', result)
				  return result
			}
		}
	}
</script>

<style>
	.used-item{
		border-top: 2rpx solid ;
	}
	.noshow{
		transform: rotate(-90deg);
		transition: all .3s linear;
	}
	.isshow{
		transform: rotate(90deg);
		transition: all .3s linear;
	}
</style>