KindergartenAppletUI/pages/Viewprescription/Viewprescription.vue

<template>
	<view class="top">
		<view class="content">
			<view class="topitemm" v-for="item in getchildlist">
				<view class="itemback">
					<view class="bindtitle">
						批次编号：{{item.batchCode}}
					</view>
					<view class="time">
						{{item.batchDate}}
					</view>
				</view>
				<view class="name">
					{{item.studentName}}
				</view>
				<view class="grade">
					{{item.totalFraction}}
					<span>分</span>
				</view>
				<view class="baogao" @tap='lookbook(item)'>
					<view class="image">
					</view>
					<view class="look" v-if="item.existFlag==false">暂无报告</view>
					<view class="lookreport" v-else>查看报告</view>
				</view>
			</view>
			<view class="prescription" v-if="list==0">
				<view class="exerciseitem">
					<view class="zanwu">
						<image src="../../static/zanwu.png" mode=""></image>
					</view>
				</view>
			</view>
			<view class="prescription" v-for="item in list" v-else>
				<view class="sportsitem">
					<!-- <view class="xuhao">
						1
					</view> -->
					<view class="sports">
						{{item.motionType}}
					</view>
				</view>
				<view class="exerciseitem">
					<view class="exercise">
						运动程度
					</view>
					<view class="gradeitem">
						{{item.degreeMovement}}
					</view>
					<view class="exercise">
						测试分类
					</view>
					<view class="gradeitem">
						{{item.physicalQualityName}}
					</view>
				</view>
				<view class="Motion ">
					<view class="sport">
						<span>运动频率：</span>
						{{item.motionFrequency}}
					</view>
					<view class="sport">
						<span>运动强度：</span>
						{{item.motionStrength}}
					</view>
					<view class="sport">
						<span>运动时间：</span>
						{{item.motionTime}}
					</view>
					<view class="sport">
						<span>运动量：</span>
						{{item.motionCapacity}}
					</view>
				</view>
				<view class="Advanced">
					<view class="Advancedtime">
						<span>进阶时间（可选择）：</span>
						{{item.advancedTime}}
					</view>
					<view class="Advancedtime">
						<span>进阶方案：</span>
						{{item.advancedScheme}}
					</view>
					<view class="videoitem">
						<video v-for="uitem in item.motionPrescriptionVideoInfoVOList" :src="uitem.prescriptionVideoUrl"
							:autoplay="false" @tap='look(uitem)'></video>
					</view>
				</view>
			</view>
		</view>
		<u-toast ref="uToast" />
	</view>
</template>

<script>
	import {
		getInfoByPhone,
		getMotionPrescription,
		getChildrenResultScore,
		prescriptionVideoLogging,
		prescriptionLogging
	} from '@/api/index/index.js'
	import baseurl from '@/api/baseurl.js'
	export default {
		data() {
			return {
				motionPrescriptionVideoInfoVOList: [],
				batchCode: "",
				studentId: "",
				list: [],
				getchildlist: [],
				bgColor: '#37A97B',
			}
		},
		onLoad(options) {
			var that = this
			this.batchCode = options.batchCode
			this.studentId = options.studentId
			getMotionPrescription(options.studentId, options.batchCode).then(res => {
				this.list = res.data
				this.list.forEach(e => {
					e.motionPrescriptionVideoInfoVOList.forEach(el => {
						el.count = 0
						el.prescriptionVideoUrl = baseurl + el.prescriptionVideoUrl
					})
				})
			})
			const phone = uni.getStorageSync('phone');
			getInfoByPhone(phone).then(res => {
				if (res.code == 200) {
					var obj = {
						studentIdList: []
					}
					res.data.studentInfoList.forEach(e => {
						obj.studentIdList.push(e.studentId)
					})
					let items = JSON.stringify(res.data);
					uni.setStorageSync("this.DATAList", items)
					getChildrenResultScore(obj).then(res => {
						res.data.forEach(e => {
							if (e.batchCode == options.batchCode && e.studentId == options
								.studentId) {
								this.getchildlist.push(e)
							}
						})
					})
					this.infolist();
				} else {}
			})
		},
		methods: {
			infolist() {
				const items = uni.getStorageSync("this.DATAList");
				prescriptionLogging(items).then(res => {})
			},
			look(uitem) {
				if (uitem.count == 0) {
					uitem.count++
					const items = JSON.parse(uni.getStorageSync("this.DATAList"));
					items["prescriptionVideoId"] = uitem.motionPrescriptionVideoId
					prescriptionVideoLogging(items).then(res => {})
				}
			},
			showToast() {
				this.$refs.uToast.show({
					title: "暂无报告",
					type: 'error',
					duration: 1000
				})
			},
			lookbook(item) {
				if (item.existFlag == false) {
					this.$refs.uToast.show({
						title: "暂无报告",
						type: 'error',
						duration: 1000
					})
				} else {
					uni.showLoading({
						title: '获取报告中'
					});
					var that = this
					wx.downloadFile({
						url: baseurl + item.downloadAddress,
						success: function(res) {
							var filePath = res.tempFilePath;
							wx.openDocument({
								filePath: filePath,
								showMenu: true,
								success: function(res) {
									uni.hideLoading();
								},
								fail: function(err) {
									uni.hideLoading();
								}
							});
						},
						fail: function(err) {
							uni.hideLoading();
							that.$refs.uToast.show({
								title: '请求报告失败',
								type: 'error'
							})
						}
					});
				}
			},
		}
	}
</script>

<style lang="scss">
	// background: {
	// 	backgroundColor: 'red' //设置背景为透明
	// }
	.top {
		background-image: linear-gradient(#D7EEE8, #fff);
		width: 100%;
		height: 600rpx;

		.content {
			width: 100%;
			height: 376rpx;
			background: #37A97B;
			position: relative;

			.prescription {
				width: 90%;
				background: #FFFFFF;
				box-shadow: 0rpx 3rpx 18rpx 0rpx rgba(161, 220, 211, 0.43);
				border-radius: 10rpx;
				margin: 0 auto;
				margin-top: 3%;

				.Advanced {
					line-height: 48rpx;
					padding: 3%;
					margin: 15rpx auto;
					width: 90%;
					// background-color: red;
					background: #F9F9FA;
					border-radius: 10rpx;

					.videoitem {
						display: flex;
						width: 100%;
						flex-wrap: wrap;

						video {
							width: 47%;
							margin-left: 3%;
							height: 194rpx;

						}

					}

					.Advancedtime {
						font-size: 26rpx;

						span {
							font-family: Source Han Sans CN;
							font-weight: 500;
							color: #000000;
						}
					}
				}

				.Motion {
					// width: 665rpx;
					height: 227rpx;
					background: #F9F9FA;
					border-radius: 10rpx;
					width: 90%;
					padding: 2%;
					margin: 0 auto;

					.sport {
						width: 585rpx;
						font-size: 26rpx;
						line-height: 48rpx;

						span {
							font-family: Source Han Sans CN;
							font-weight: 500;
						}
					}
				}

				.exerciseitem {
					display: flex;
					margin: 3%;

					.zanwu {
						margin: 0 auto;

						image {
							width: 200rpx;
							height: 200rpx;
						}
					}

					.exercise {
						width: 130rpx;
						height: 41rpx;
						margin-left: 5%;
						background: #35A97A;
						border-radius: 5rpx;
						color: white;
						font-size: 26rpx;
						text-align: center;
					}

					.gradeitem {
						margin-left: 2%;
						font-size: 26rpx;
						color: #000000;
						font-family: Source Han Sans CN;
						font-weight: 500;
					}
				}

				.sportsitem {
					width: 90%;
					height: 56rpx;
					margin: 0 auto;
					display: flex;
					padding: 2%;
					border-bottom: 1rpx solid #E6E6E6;

					.sports {
						font-size: 30rpx;
						font-family: Source Han Sans CN;
						font-weight: 500;
						color: #000000;
						margin-top: 2%;
						// width: 34rpx;
						// height: 34rpx;
						// background: #35A97A;
						// border-radius: 50%;
						// color: #FFFFFF;
						// margin-left: 2%;
						// line-height: 34rpx;
						// text-align: center;
						// margin-left: 3%;
					}

					.xuhao {
						margin-top: 3%;

					}
				}
			}

			.topitemm {
				background: #fff;
				box-shadow: 0px 3px 18px 0px rgba(182, 218, 213, 0.43);
				width: 90%;
				margin: 0 auto 20rpx; // text-align: center;
				height: 268rpx;
				border-radius: 10rpx;
				position: relative;



				.name {
					width: 250rpx;
					height: 50rpx;
					font-size: 28rpx;
					font-family: Source Han Sans CN;
					font-weight: 500;
					color: #000000;
					line-height: 48rpx;
					top: 50%;
					left: 20rpx;
					position: absolute;


				}

				.baogao {
					font-size: 26rpx;
					font-family: Source Han Sans CN;
					font-weight: 400;
					color: #000;

					.image {
						width: 35rpx;
						// background-size：62rpx 50rpx;
						height: 38rpx;
						background: url(../../static/tijianbaogao.png) no-repeat center center;
						background-size: 100% 100%;
						left: 80%;
						top: 50%;
						position: absolute;
					}

					.look {
						left: 75%;
						top: 65%;
						position: absolute;
					}

					.lookreport {
						left: 75%;
						top: 65%;
						position: absolute;
						color: green;
					}

				}

				.grade {
					font-size: 70rpx;
					font-family: Source Han Sans CN;
					font-weight: 500;
					color: #35A97A;
					line-height: 67rpx;
					top: 50%;
					left: 40%;
					position: absolute;

					span {
						font-size: 30rpx;
					}
				}

				.itemback {
					width: 95%;
					height: 70rpx;
					margin: 0 auto;
					display: flex;
					border-bottom: 1rpx solid #CDC9C9;

					.time {
						float: right;
						font-size: 24rpx;
						font-family: Source Han Sans CN;
						font-weight: 400;
						color: #9B9A9A;
						line-height: 70rpx;
					}

					.bindtitle {
						width: 500rpx;
						height: 50rpx;
						line-height: 70rpx;
						font-size: 24rpx;
						font-family: Source Han Sans CN;
						font-weight: 400;
						color: #9B9A9A;
					}
				}
			}
		}
	}
</style>