XDProjects/pages/index/index.vue

<template>
	<view class="wrap">
		<view class="motionType-conatiner">
			<view class="title">选择运动类型</view>
			<div class="motionType-list">
				<div class="item" v-for="(item,index) in motionType" :key="index" @click="changeMotionType(item)">
					<image class="icon" :src="sportType===item.value?item.selectedIconPath:item.icon"></image>
					<view class="name">{{item.text}}</view>
				</div>				
			</div>
		</view>
		<div class="preview-conatiner">
			<view class="title">上传视频</view>
			<view class="preview">
				<video v-if="videoSrc" id="video" :src="videoSrc" @error="videoErrorCallback" controls></video>
				<uni-icons color="#AEAEAE" type="videocam-filled" size="70" v-else></uni-icons>
			</view>			
		</div>
		<view class="content">				
			<button class="upload-bt" @click="upload">上传视频</button>
			<view  class="search-bt-container" v-if="!isEmpty(gradeId)">
				<button class="search-bt" @click="search" size="mini">
					<uni-icons type="search" size="12" color="#fff"></uni-icons>
					<text>查询评分结果</text>
				</button>
			</view>
			<view class="result" v-if="status===1">
				<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>
		<getPhone ref="getPhone" v-if="!isLogin" showByPlatform />
	</view>
</template>
<script>
	import {setToken} from '@/libs/auth.js'
	import getPhone from '@/components/getPhone.vue'
	import {uploadApi} from '@/api/upload.js'
	import {updateSportVide,getSportGradeById,login} from '@/api/user.js'
	export default {
		data() {
			return {
				collapseVal:['0'],
				videoSrc: '',
				status:0,
				iscollapse:false,
				gradeId:undefined,
				result:{sportGrade:undefined},
				isLogin:false,
				sportType:undefined,
				motionType:[
					{ 
						value: "0000",
						text: "引体向上",
						icon:'/static/index/ytxs.png',
						selectedIconPath:'/static/index/ytxsCk.png'
					},
					{ 
						value: "0001",
						text: "仰卧起坐",
						icon:'/static/index/ywqz.png',
						selectedIconPath:'/static/index/ywqzCk.png'
					},
					{ 
						value: "0002",
						text: "跳远",
						icon:'/static/index/ty.png',
						selectedIconPath:'/static/index/tyCk.png'
					},
					{ 
						value: "0003",
						text: "坐位体前屈",
						icon:'/static/index/tqq.png',
						selectedIconPath:'/static/index/tqqCk.png'
					},
					{
						value: "0004",
						text: "健身动作",
						icon:'/static/index/jsdz.png',
						selectedIconPath:'/static/index/jsdzCk.png'
					},
					{
						value: "0005",
						text: "高抬腿",
						icon:'/static/index/gtt.png',
						selectedIconPath:'/static/index/gttCk.png'
					},
					{
						value: "0006",
						text: "排球垫球",
						icon:'/static/index/pqdq.png',
						selectedIconPath:'/static/index/pqdqCk.png'
					},
					{
						value: "0007",
						text: "足球垫球",
						icon:'/static/index/zqdq.png',
						selectedIconPath:'/static/index/zqdqCk.png'
					}
				]
			}
		},
		components:{
			getPhone
		},
		onShow() {
			this.initPhoneModal()			
		},
		destroyed() {
			this.status=0;
			this.videoSrc="";
			this.result={}
			this.gradeId=undefined
		},
		methods: {
			initPhoneModal(){
				const accountName=uni.getStorageSync('phone')
				if(!accountName){
					this.isLogin=false
					this.$nextTick(()=>{
						this.$refs['getPhone'].isAuthorize=false
					})
				}else{
					this.isLogin=true
				}			
			},			
			upload(){
				const sportType=this.sportType
				if(!sportType){
						uni.showToast({
							icon:'error',
							title: "请选择运动类型"
						})	
					return;
				}
				uni.chooseVideo({
					sourceType: ['camera', 'album'],
					success: (res)=>{
						 this.uploadSubmit(res.tempFilePath)
					},
					fail(res) {
						uni.showToast({
							icon:'none',
							title:res.errMsg
						})
					}
				});
			},
			uploadSubmit(filePath) {
				uni.showLoading({
					mask:true,
					title:"上传中……"
				})
				const sportType=this.sportType;
				const accountName=uni.getStorageSync('phone')
				uploadApi({formData:{sportType}, filePath }).then((res) => {
					let result=JSON.parse(res);
					uni.hideLoading()
					if(result.code==="0000"){
						updateSportVide({
							accountName,
							sportType,
							sportVedioPath:result.data.sportVedioPath,
							sportVedioId:result.data.sportVedioId
						}).then((res)=>{
							if(res.code===0){
								uni.showToast({
									icon:'none',
									duration:2000,
									title: "上传成功,系统正在评分请稍等"
								})
							    this.gradeId=res.data
								this.videoSrc=filePath;																						
							}						
						})				 
					}else{
						uni.showToast({
							icon:'error',
							title: result.msg||"上传失败"
						})						
					}
				}).catch((msg) => {
					uni.hideLoading()
					uni.showToast({
						icon:'error',
						title: "上传失败"
					})
				})
			},	
			search(){
				let gradeId=this.gradeId;
				if(!gradeId){
					uni.showToast({
						icon:'none',
						title:"请先上传视频！"
					})
					return
				}
				getSportGradeById({
					gradeId
				}).then((res)=>{
					this.status=1;	
					this.result=res.data
				})
			},	
			videoErrorCallback: function(e) {
				uni.showModal({
					content: e.target.errMsg,
					showCancel: false
				})
			},
			changeMotionType(item){
				this.sportType=item.value
			},
			formateSportRetReport(items){
				try{
				  if(this.isEmpty(items)) return []
				  return Array.isArray(items)?items: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;
		}
	}	
	.motionType-conatiner{	
		.motionType-list{
			display: flex;
			justify-content: flex-start;
			align-items: center;
			flex-wrap: wrap;
			padding: 0 20rpx 44rpx 20rpx;
			.item{
				width: 25%;
				display: flex;
				justify-content:center;
				align-items: center;
				flex-direction: column;	
				padding-top: 20rpx;
				&:nth-child(-n+4){
					padding-top:0;
				}
				.icon{
					display: block;
					width: 104rpx;
					height: 104rpx;
				}
				.name{
					width: 100%;
					font-size: 28rpx;
					height: 40rpx;
					line-height: 40rpx;
					color: #333;
					font-weight: bold;
					padding-top: 16rpx;
					overflow: hidden;
					white-space: nowrap;
					text-overflow: ellipsis;
					text-align: center;
				}
			}
		}
	}
	.flex-between-center{
		display: flex;
		justify-content:space-between;
		align-items: center;
		&.search-conatiner{
			padding-bottom: 20rpx;
			.custom-select{
				width: 300rpx;
			}
		}
	}
	.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;
		}		
	}
	.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: 90%;
					height: 40px;
					font-size: 28rpx;
					font-family: PingFang SC;
					font-weight: 400;
					line-height: 40px;
					color: #FFFFFF;		
					text-align: center;
					white-space:nowrap;
					overflow:hidden;
					text-overflow:ellipsis;
					margin: 0 auto;
				}
			}
			.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>