XDProjects/pages/history/detail/detail.vue

<template>
	<view class="wrap">
		<div class="preview-conatiner">
			<view class="title">视频详情</view>
			<view class="preview">
				<video v-if="result.sportVedioPath" id="video" :src="result.sportVedioPath" @error="videoErrorCallback" controls></video>
				<uni-icons color="#AEAEAE" type="videocam-filled" size="70" v-else></uni-icons>
			</view>			
		</div>
		<view class="content">				
			<view class="result">
				<view class="title">识别结果</view>
				<view class="result-conatiner">
					<h3>{{!isEmpty(result.sportGrade)?'':'正在评分中请稍后重试'}}</h3>
					<view class="collapse-item-content" v-if="!isEmpty(result.sportGrade)">
						<div class="sportGrade-card">
							<div class="sportGrade">
								<text>{{result.sportGrade}}</text>
								<text class="util">分</text>
							</div>
							<view class="text">{{result.sportSuggestion}}</view>							
						</div>
						<view class="text" >
							<view class="text-item" v-for="(item,key) in formateSportRetReport(result.sportRetReport)" :key="key">
								<view class="explain-title">{{item.explain}}</view>
								<video class="sportVideo" :src="item.url"></video>									
							</view>
						</view>
					</view>
				</view>
			</view>			
		</view>
	</view>
</template>

<script>
	export default{
		data(){
			return{
				result:{
					sportGrade:undefined,
					sportSuggestion:"",
					sportRetReport:[]
				}
			}
		},
		onShow() {
			let info=uni.getStorageSync('detail-info')
			this.result=info
		},
		onUnload() {
			uni.removeStorageSync('detail-info')
		},
		methods:{
			formateSportRetReport(items){
				try{
				  if(this.isEmpty(items)) return []
				  return JSON.parse(items)					
				}catch(e){
					return []
				}
			},
			isEmpty(val){
				if(val!=="undefined"&&val!==undefined&&val!==""&&val!==null){
					return false
				}
				return true
			}			
		}
	}
</script>

<style lang="scss" scoped>
*{
	padding: 0;
	margin: 0;
}
.wrap{	
	padding:20rpx;
	.title{
		height: 40rpx;
		font-size: 28rpx;
		font-family: PingFang SC;
		font-weight: bold;
		line-height: 40rpx;
		color: #333333;
		opacity: 1;	
		padding:0 0 36rpx 20rpx;
		position: relative;
		&::after{
			width: 12rpx;
			height: 28rpx;
			background:#2A83EF;
			opacity: 1;
			border-radius: 6px;					
			content: "";
			display: block;
			position: absolute;
			left: 0;
			top: 8rpx;
		}
	}	
	.preview{
		width: 670rpx;
		display: flex;
		justify-content: center;
		align-items: center;
		background-color: #ccc;
		height: 300rpx;
		margin: 0 auto;
		background:#E8E8E8;
		opacity: 1;
		border-radius: 20rpx;
		#video{
			width:750rpx;
			height: 300rpx;
			display: block;
			border-radius: 20rpx;
		}		
	}
	.content{
		padding: 10rpx;
		margin-top: 24rpx;
		.upload-bt{
			width: 446rpx;
			height: 66rpx;
			line-height: 66rpx;
			font-size: 28rpx;
			color: #fff;
			background-color: #409eff;
			border-color: #409eff;
			text-align: center;
			margin: 0 auto;
			border-radius: 42rpx;
		}	
		.search-bt-container{
			padding: 24rpx 0 42rpx 0;
		}
		.search-bt{
			width: 446rpx;
			height: 66rpx;
			line-height: 66rpx;
			font-size: 28rpx;
			color: #fff;
			background-color: #ED834A;
			border-color: #ED834A;
			text-align: center;
			margin: 0 auto;
			display: block;
			border-radius: 42rpx;
		}
		.result{
			.sportGrade-card{
				&{
					width: 670rpx;
					background-image: url('/static/index/sportGradeBg.png');
					background-repeat: no-repeat;
					background-size: 100% 100%;
					margin: 0 auto 40rpx;
				}
				.sportGrade{
					font-size: 120rpx;
					font-family: PingFang SC;
					font-weight: bold;
					line-height: 168rpx;
					color: #FFFFFF;
					text-align: center;
					.util{
						font-size: 32rpx;
						font-family: PingFang SC;
						font-weight: bold;
						line-height: 44rpx;
						color: #FFFFFF;					
					}							
				}	
				.text{
					width: 94%;
					min-height: 40rpx;
					font-size: 28rpx;
					font-family: PingFang SC;
					font-weight: 400;
					line-height: 40rpx;
					color: #FFFFFF;		
					text-align: center;
					// white-space:nowrap;
					// overflow:hidden;
					// text-overflow:ellipsis;
					margin: 0 auto;
					padding-bottom: 20rpx;
				}
			}
			.text-item{
				padding-bottom: 10px;
				.explain-title{
					height: 40rpx;
					font-size: 28rpx;
					font-family: PingFang SC;
					font-weight: bold;
					line-height: 40rpx;
					color: #333333;
					padding:0 0 24rpx 20rpx;
					position: relative;
					&::after{
						width: 12rpx;
						height: 12rpx;
						background:#2A83EF;
						border-radius: 50%;				
						content: "";
						display: block;
						position: absolute;
						left: 0;
						top: 16rpx;
					}					
				}
				.sportVideo{
					width:100%;
					height: 293rpx;
					display: block;
					border-radius: 20rpx;
				}
			}
		}
	}	
}
</style>