XDProjects/pages/history/history.vue

<template>
	<view class="history-container">
		<view class="item-list">
			<view class="item" v-for="(item,index) in items" :key="index">
				<view class="time">{{formatTime(item.createDate)}}</view>
				<div class="item-cont" @click="linkTo(item)">
					<view class="logo">
						<img :src="formatImage(item.sportVedioPath)" v-if="item.sportVedioPath" >
						<uni-icons type="videocam" size="30" v-else></uni-icons>
					</view>
					<view class="center">
						<view class="sportType">
							<text>{{formatSportType(item.sportType)}}</text>
							<view class="camera-box" @click.stop="onClick(item)">
								<image class="camera" src="/static/history/camera.png" ></image>
							</view>
						</view>
					</view>
					<view class="rt">
						<text class="name">评分：</text>
						<template>
							<text class="score" v-if="item.sportGrade">{{item.sportGrade}}</text>
							<text class="score" v-else>--</text>
						</template>
					</view>				
				</div>
			</view>
		</view>
		<template>
			<view class="pagination-box" v-if="total>0">
				<uni-pagination @change="changePageNumber"
				:pageSize="limit" :current="page"
				:total="total"></uni-pagination>				
			</view>
			<template v-else>
				<view class="isEmpty" >
					<p class="word">没有数据 ^_^ </p>
				</view>
			</template>
		</template>
		<uni-popup ref="video-popup" type="center" :animation="false" is-mask-click>
			<video id="video" :src="sportVedioPath" controls></video>
		</uni-popup>
		<getPhone ref="getPhone" v-if="!isLogin" showByPlatform />
	</view>
</template>

<script>
	import config from "@/config/index.js"
	const baseUrl = process.env.NODE_ENV === 'development' ? config.base.dev : config.base.pro;
	import {getSportGradeByPage,getSportGradeById} from '@/api/user.js'
	import getPhone from '@/components/getPhone.vue'
	export default {
		data() {
			return {
				time:new Date(),
				note:"18743733582",
				page:1,
				limit:15,
				total:0,
				items:[],
				sportVedioPath:"",
				isLogin:true
			}
		},
		components:{
			getPhone
		},
		onShow() {
			this.getSportGrade()
			this.init()
		},
		methods: {
			initPhoneModal(){
				const accountName=uni.getStorageSync('phone')
				if(!accountName){
					this.isLogin=false
					this.$nextTick(()=>{
						this.$refs['getPhone'].isAuthorize=false
					})
				}else{
					this.isLogin=true
				}			
			},			
			getSportGrade(){
				let page=this.page;
				let limit=this.limit;
				const accountName=uni.getStorageSync('phone')
				if(!accountName){
					this.isLogin=false
					return
				}else{
					this.isLogin=true
				}
				getSportGradeByPage({
					accountName,
					page, limit
				}).then((res)=>{
					this.items=res.data
					this.total=res.total;
				})
			},
			init(){
				if(this.sportVedioPath){
					this.sportVedioPath="";
					this.$refs['video-popup'].close()
				}
				this.items=[]
				this.total=0
				this.limit=15
				this.page=1
				// this.initPhoneModal()
			},
			onClick(item){
				let gradeId=item.gradeId
				let sportVedioPath=item.sportVedioPath;
				this.sportVedioPath=sportVedioPath
				if(this.sportVedioPath){
					this.$refs['video-popup'].open()
				}
				return
			}
			,formatTime(date) {
			  if (!date) return null
			  if(typeof(date)==="string"){date = new Date(date)}
			  var y = date.getFullYear()
			  var M = date.getMonth() + 1
			  var d = date.getDate()
			  var H = date.getHours()
			  var m = date.getMinutes()
			  var s = date.getSeconds()
			  M = M > 9 ? M : '0' + M; d = d > 9 ? d : '0' + d; H = H > 9 ? H : '0' + H
			  m = m > 9 ? m : '0' + m; s = s > 9 ? s : '0' + s
			  return `${y}-${M}-${d} ${H}:${m}:${s}`
			},
			formatImage(path){
				if(!path) return
				let fileName=path.substring(0,path.lastIndexOf('.'))
				return `${fileName}.jpg`;
			},
			formatSportType(val){
				if(this.isEmpty(val)) return '--';
				var enums={
					'0000':"引体向上",
					'0001':"仰卧起坐",
					'0002':"跳远",
					'0003':"坐位体前屈",
					'0004':"健身动作",
					'0005':"高抬腿",
					'0006':"排球垫球",
					'0007':"足球垫球",
				}
				return enums[val];
			},			
			changePageNumber({type,current}){
				this.page=current
				this.getSportGrade()
			},
			linkTo(item){
				uni.setStorageSync('detail-info',item)
				uni.navigateTo({
					url:'/pages/history/detail/detail'
				})
			},
			isEmpty(val){
				if(val!=="undefined"&&val!==undefined&&val!==""&&val!==null){
					return false
				}
				return true
			}			
		}
	}
</script>

<style lang="scss" scoped>
.history-container{
	background:#E4F0FB;
}
.pagination-box{
	margin: 40rpx 0;
	background-color: #fff;
}
.isEmpty{
	width: 100%;
	height: 100vh;
	background-image: url(data:image/svg+xml;base64,PHN2ZyB2aWV3Qm94PSIwIDAgNzkgODYiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgeG1sbnM6eGxpbms9Imh0dHA6Ly93d3cudzMub3JnLzE5OTkveGxpbmsiPjxkZWZzPjxsaW5lYXJHcmFkaWVudCBpZD0iYSIgeDE9IjM4Ljg1JSIgeTE9IjAlIiB4Mj0iNjEuMTUlIiB5Mj0iMTAwJSI+PHN0b3Agc3RvcC1jb2xvcj0iI0ZDRkNGRCIgb2Zmc2V0PSIwJSIvPjxzdG9wIHN0b3AtY29sb3I9IiNFRUVGRjMiIG9mZnNldD0iMTAwJSIvPjwvbGluZWFyR3JhZGllbnQ+PGxpbmVhckdyYWRpZW50IGlkPSJiIiB4MT0iMCUiIHkxPSI5LjUlIiB5Mj0iOTAuNSUiPjxzdG9wIHN0b3AtY29sb3I9IiNGQ0ZDRkQiIG9mZnNldD0iMCUiLz48c3RvcCBzdG9wLWNvbG9yPSIjRTlFQkVGIiBvZmZzZXQ9IjEwMCUiLz48L2xpbmVhckdyYWRpZW50PjxwYXRoIGlkPSJjIiBkPSJNMCAwaDE3djM2SDB6Ii8+PC9kZWZzPjxnIGZpbGw9Im5vbmUiIGZpbGwtcnVsZT0iZXZlbm9kZCI+PHBhdGggZD0iTTM5LjUgODZDNjEuMzE1IDg2IDc5IDgzLjkxIDc5IDgxLjMzM1M1Ny4zMTUgNzggMzUuNSA3OCAwIDc4Ljc1NiAwIDgxLjMzM0MwIDgzLjkxMSAxNy42ODUgODYgMzkuNSA4NnoiIGZpbGw9IiNGN0Y4RkMiLz48cGF0aCBmaWxsPSIjRTVFN0U5IiBkPSJNMTMgNDVoNDBMNDIgNThIMnpNNjUuNTUxIDI5Ljk4bC0xNi4zMTMtNy42MDctMi44NDEtNS43MzggMTYuMzEzIDcuNjA3eiIvPjxwYXRoIGZpbGw9IiNFREVFRjIiIGQ9Ik02NS41NTEgMjkuOThsLTM0LjQ0LTE2LjA1OS0xNS4yMTQgMzIuNjI3IDM0LjQ0IDE2LjA2eiIvPjxwYXRoIGZpbGw9InVybCgjYSkiIHRyYW5zZm9ybT0icm90YXRlKDI1IDI3LjQ0NiAtNDMuNDE2KSIgZD0iTTM4IDdoMTd2MzZIMzh6Ii8+PHBhdGggZmlsbD0iI0Y4RjlGQiIgZD0iTTE1LjcwNSA2LjczN2wxNS40MDcgNy4xODQgMTUuNjQ2LS40MjctMTUuNDA3LTcuMTg1eiIvPjxwYXRoIGZpbGw9InVybCgjYikiIGQ9Ik0xMyA0NWg0MHYzNkgxM3oiLz48ZyB0cmFuc2Zvcm09InRyYW5zbGF0ZSg1MyA0NSkiPjxtYXNrIGlkPSJkIiBmaWxsPSIjZmZmIj48dXNlIHhsaW5rOmhyZWY9IiNjIi8+PC9tYXNrPjx1c2UgZmlsbD0iI0UwRTNFOSIgdHJhbnNmb3JtPSJtYXRyaXgoLTEgMCAwIDEgMTcgMCkiIHhsaW5rOmhyZWY9IiNjIi8+PHBhdGggZmlsbD0iI0Q1RDdERSIgbWFzaz0idXJsKCNkKSIgdHJhbnNmb3JtPSJtYXRyaXgoLTEgMCAwIDEgMjQgMCkiIGQ9Ik03IDBoMTdsLTQgMTgtMjAtMnoiLz48L2c+PHBhdGggZmlsbD0iI0Y4RjlGQiIgZD0iTTcwIDQ1SDUzbDkgMTNoMTd6Ii8+PC9nPjwvc3ZnPg==);
	background-size: contain;
	background-repeat: no-repeat;
	position: relative;
	background-color: #fff;
	/* #ifndef MP-WEIXIN */
		height: calc( 100vh - 100px);	
	/* #endif */
	.word{
		width: 100%;
		text-align: center;
		position: absolute;
		top: 80vh;
		left: 0;
		color: #999;
		font-size: 28rpx;
		letter-spacing: 2rpx;
	}
}
#video{
	display: block;
	width: 720rpx;
	margin: 20rpx auto;
}
.item-list{
	.item{
		&{
			padding: 0 20rpx;
		}
		.time{
			font-size: 24rpx;
			font-family: PingFang SC;
			font-weight: 400;
			line-height: 28rpx;
			color: #666666;		
			padding: 24rpx 0;
		}
		.item-cont{
			&{
				display: flex;
				justify-content: space-between;
				align-items: center;
				padding: 20rpx 16rpx;
				background-color: #fff;
				border-radius: 20rpx;
			}
			.logo{
				width: 80rpx;
				height: 80rpx;
				border-radius: 8px;
				display: flex;
				justify-content:center;
				align-items: center;
				background-color: #e2e2e2;
				img{
					display: block;
					width: 80rpx;
					height: 80rpx;
					border-radius: 8px;
				}
			}	
			.center{
				color: #999;
				font-size: 12px;
				flex: 1;
				padding-left: 20rpx;
				.sportType{
					&{
						font-size: 28rpx;
						font-family: PingFang SC;
						font-weight: bold;
						line-height: 1;	
						display: flex;
						justify-content: flex-start;
						align-items: center;
						color: #333333;	
					}
					.camera-box{
						padding-left: 26rpx;
						.camera{
							display: block;
							width: 36rpx;
							height: 36rpx;
						}
					}
				}
			}
			.rt{
				font-size: 32rpx;
				display: flex;
				justify-content:space-between;
				align-items: center;
				.name{
					font-size: 28rpx;
					font-family: PingFang SC;
					font-weight: bold;
					color: #F97743;	
					line-height: 1;
				}
				.score{
					font-weight: 900;
					padding-right: 10rpx;
					font-size: 40rpx;
					font-family: PingFang SC;
					font-weight: bold;
					color: #FF4600;
					line-height: 1;
				}
			}			
		}
	}
}
</style>