slambb_tplat/components/modal/boxing-hit/boxing-hit.vue

<template>
	<view style="width:100%; margin-bottom: 50rpx;">

		<!-- 计时器 -->
		<view class="hitBoxingTimer flex justify-center">
			<boxingCountDown ref="boxingCountDownRef" :show-day="false" :second="showSportTime" color="#9695f7" background-color="#FFFFFF"
			 border-color="#007AFF" splitorColor="#FFFFFF" />
		</view>


		<view v-if="mode == 'pkMode'" style="height: 50rpx;"></view>
		<view v-else style="height: 20rpx;"></view>

		<view style="display: flex; flex-direction: column; justify-content: center;align-items: center;
		 position: relative; width: 100%;">

			<!-- 波动 -->
			<view v-if="mode !== 'pkMode'" class="flex justify-around align-center" style="width: 600rpx;height: 100rpx; margin: 20rpx;">
				<view style="height: 1rpx;width: 80rpx;background-color: #FFFFFF;"></view>
				<view style="display: flex; justify-content: center; align-self: center; height: 100%;">
					<view style="display: flex; justify-content: center; align-items: center;">
						<view class="wave-d-item  " v-for="(item, index) in wave_d_time" :key="index" :class="wave_d_play?'hit-wave':''"
						 :style="{'--time': item.run * wave_run_ratio,'--delay':item.delay * wave_run_ratio,'height': wave_d_play?item.sHeight+'rpx':'20rpx'}"></view>
					</view>
					<view style="display: flex; justify-content: center; align-items: center; flex-direction: row-reverse;">
						<view class="wave-d-item  " v-for="(item, index) in wave_d_time" :key="index" :class="wave_d_play?'hit-wave':''"
						 :style="{'--time': item.run * wave_run_ratio,'--delay':item.delay * wave_run_ratio,'height': wave_d_play?item.sHeight+'rpx':'20rpx'}"></view>
					</view>
				</view>

				<view style="height: 1rpx;width: 80rpx;background-color: #FFFFFF;"></view>
			</view>
			<view v-if="mode == 'pkMode'" style="height: 30rpx;"></view>

			<!-- 当前拳击力-->
			<view v-if="mode == 'pkMode'" class="flex justify-center align-center " style="margin-top: 40rpx; background-color: rgba(255,255,255,0.1); width: 420rpx; height: 90rpx;border-radius: 60rpx;">
				<image src="/static/modal/boxing-hit/b.png" style="width: 50rpx; height: 50rpx;" mode="aspectFit"></image>

				<view class="hit-current-count">
					{{currentHitStrength}}
				</view>
			</view>
			<!-- <view v-else style="position: relative; width: 100%;" :style="{'opacity': hitStrengthOpacity}">
				<view style="position: absolute;
				left: 0;
				top: 0;
				bottom: 0;
				right: 0;" class="flex justify-center">
					<view class="flex justify-center align-center " style="background-color: rgba(0,0,0,0.4); width: 300rpx; height: 90rpx;border-radius: 60rpx;">
						<view class="hit-current-count-power">力量</view>
						<view class="hit-current-count">
							{{currentHitStrength}}
						</view>
					</view>
				</view>
			</view> -->


			<view v-if="mode == 'pkMode'" style="height: 110rpx;"></view>
			<view v-else style="height: 20rpx;"></view>

			<!-- 控制按钮 -->
			<view class="flex justify-center " :class="mode == 'pkMode'?'big':''" style="margin-top: 40rpx;" @tap="onControlPlay">
				<view style="position: relative; width: 260rpx; height: 260rpx;">
					<image style="width: 100%; height: 100%;" src="/static/modal/boxing-hit/hit-button-bg.png"></image>
					<image class="hit-button-rotate " :class="bRingAnimation?'hit-button-bg-play':'hit-button-bg-paused'" style="position: absolute;top: 10%;left: 10%;bottom: 0;right: 0;width: 80%; height: 80%;"
					 src="/static/modal/boxing-hit/hit-button-ef.png"></image>
					<view style="position: absolute;top: 0;left: 0;bottom: 0;right: 0;width: 100%; height: 100%; display: flex;justify-content: center; align-items: center;">
						<image style="width: 50rpx; height: 50rpx; transform: scale(-1,1);" :src="bControlRun?'/static/modal/boxing-hit/hit-pause.png':'/static/modal/boxing-hit/hit-play.png'"></image>
					</view>
				</view>
			</view>
			<!-- <view v-if="mode == 'pkMode'" style="height: 160rpx;"></view> -->
			<!-- <view style="margin-top: 40rpx;width: 310rpx; height: 90rpx;"></view> -->
			<!-- 模式按钮  @tap="onChangeMode"-->
			<!-- <view class="flex justify-center " style="margin-top: 40rpx;">
				<view style="position: relative; width: 310rpx; height: 90rpx;background-color: #FFFFFF; display: flex;flex-direction: row;justify-content: center;align-items: center; border-radius: 50rpx;">
					<image style="width: 45rpx; height: 45rpx;" src="/static/personal/switch.png"></image>
					<view style="margin-left: 20rpx;color:#9797FF; font-weight: bold;font-size: 17px;">{{mode=="pkMode"?'健身模式':'PK模式'}}
					</view>
				</view>
			</view> -->
			<!-- <view v-if="mode == 'pkMode'" style="height: 20rpx;"></view> -->
			<view v-if="mode == 'pkMode'" style="height: 170rpx;"></view>
			<!-- <view v-else style="height: 110rpx;"></view> -->
			<view v-else style="height: 80rpx;"></view>

			<view v-if="mode == 'pkMode'" class="hit-vertical-container" :style="{'top': mode == 'pkMode'?'-120rpx':'-300rpx'}">
				<view class="hit-vertical-bar">
					<view class="hit-vertical-child" v-for="(item, index) in 25" :key="index">
						<view :class="25-aiShowCount>=index+1? 'hit-vertical-active':'hit-vertical-inactive'"></view>
						<view :class="index%5 == 0?'':'hit-text-hidden'" class="hit-vertical-text">{{index+1}}</view>
					</view>
				</view>
				<view class="hit-vertical-bar">
					<view class="hit-vertical-child" v-for="(item, index) in 25" :key="index">
						<view :class="index%5 == 0?'':'hit-text-hidden'" class="hit-vertical-text">{{index+1}}</view>
						<view :class="25-myShowCount>=index+1? 'hit-vertical-active':'hit-vertical-inactive'"></view>
					</view>
				</view>
			</view>
			<view v-else class="hit-vertical-container" :style="{'top': mode == 'pkMode'?'-120rpx':'-300rpx'}">
				<view class="hit-vertical-bar">
					<view class="hit-vertical-child" v-for="(item, index) in 25" :key="index">
						<view :class="showCount>=index+1? 'hit-vertical-active':'hit-vertical-inactive'"></view>
						<view :class="index%5 == 0?'':'hit-text-hidden'" class="hit-vertical-text">{{(index+1)*2}}</view>
					</view>
				</view>
				<view class="hit-vertical-bar">
					<view class="hit-vertical-child" v-for="(item, index) in 25" :key="index">
						<view :class="index%5 == 0?'':'hit-text-hidden'" class="hit-vertical-text">{{(index+26)*2}}</view>
						<view :class="showCount>=index+26? 'hit-vertical-active':'hit-vertical-inactive'"></view>
					</view>
				</view>
			</view>
		</view>

		<!-- <button style="margin-top: 100rpx;" @tap="onTestHit('left')">击中</button> -->

		<!-- 显示数据 -->
		<view v-if="mode == 'pkMode'" class="flex justify-around " style="margin: 0rpx 15rpx;">
			<view class="boxing-item-bg">
				<image src="/static/modal/boxing-hit/f.png" class="boxing-hit-png " mode="aspectFit"></image>
				<view class="text-white text-13px" style="margin: 10rpx 0;">最大力量</view>
				<view class="hit-count">
					{{mode == 'pkMode'?PKMaxStrength:maxStrength}}
				</view>
			</view>
			<view class="boxing-item-bg">
				<image src="/static/modal/boxing-hit/b.png" class="boxing-hit-png " mode="aspectFit"></image>
				<view class="text-white text-13px" style="margin: 10rpx 0;">平均力量</view>
				<view class="hit-count">
					{{mode == 'pkMode'?PKAverageStrength:averageStrength}}
				</view>
			</view>
			<view class="boxing-item-bg">
				<image src="/static/modal/boxing-hit/e.png" class="boxing-hit-png " mode="aspectFit"></image>
				<view class="text-white text-13px" style="margin: 10rpx 0;">平均速度</view>
				<view class="hit-count">
					{{mode == 'pkMode'?PKAverageSpeed:averageSpeed}}
				</view>
			</view>
			<view class="boxing-item-bg">
				<image src="/static/modal/boxing-hit/n.png" class="boxing-hit-png " mode="aspectFit"></image>
				<view class="text-white text-13px" style="margin: 10rpx 0;">击打数</view>
				<view class="hit-count">
					{{mode == 'pkMode'?PKAllShowHitCount:allShowHitCount}}
				</view>
			</view>
		</view>
		<view v-else class="flex margin-bottom-sm justify-center align-center">
			<view class="flex align-center">
				<view class="flex justify-start flex-direction align-center">
					<image src="/static/mileageIcon-w.png" class="data-png-26 margin-sm" mode="aspectFit"></image>
					<text style="text-align: start; line-height: 24px; font-weight: 400;color: #FFFFFF;">里程</text>
				</view>
				<view class="flex justify-start flex-direction">
					<view style="height: 26px;" class="margin-top-sm margin-bottom-sm">
						<view class="cu-progress" style="height: 6rpx; width: 140rpx; border-radius: 45rpx;"></view>
					</view>
					<text style="text-align: start; line-height: 24px; font-weight: 400;color: #FFFFFF;">{{runMileage}}km</text>
				</view>
			</view>
			<view style="width: 40rpx;"></view>
			<view class="flex align-center">
				<view class="flex justify-start flex-direction align-center">
					<image src="/static/icon-run-normal.png" class="data-png-26 margin-sm" mode="aspectFit"></image>
					<text style="text-align: start; line-height: 24px; font-weight: 400; color: #FFFFFF;">速度</text>
				</view>
				<view class="flex justify-start flex-direction">
					<view style="height: 26px;" class="margin-top-sm margin-bottom-sm">
						<view class="cu-progress" style="height: 6rpx; width: 140rpx; border-radius: 45rpx;"></view>
					</view>
					<text style="text-align: start; line-height: 24px; font-weight: 400;color: #FFFFFF;">{{runSpeed}}m/s</text>
				</view>
			</view>
		</view>

	</view>
</template>

<script>
	import boxingCountDown from '@/components/uni-count-down/uni-count-down.vue'

	import hitCharts from '@/components/u-charts/u-charts.js';

	import puchConfig from "@/util/util-js/puchConfig.js"

	import EquipmentAction from "@/util/util-js/EquipmentAction.js"


	export default {
		components: {
			boxingCountDown
		},
		props: {
			bUpdate: {
				type: Boolean,
				default: false
			},
			showTime: {
				type: Number,
				default: 0
			},
			//默认是防回弹更新
			bRebound: {
				type: Boolean,
				default: true,
			}
		},
		data() {
			return {
				mode: 'calorieMode', //pkMode calorieMode
				//满格的数值是 25
				maxShowCount: 25,
				//pk模式下,两边涨的区分,自己和ai
				myShowCount: 0,
				myPowerCount: 0,
				aiShowCount: 0,
				aiPowerCount: 0,

				//显示的点
				showCount: 0,
				//记录打击的次数
				powerCount: 0,
				//当前打击的最大值
				powerMaxCount: 0,

				xA1: 0,
				yA1: 0,
				zA1: 0,

				xA: 0,
				yA: 0,
				zA: 0,
				xO: 0,
				yO: 0,
				zO: 0,

				mass: 5,

				//大概消耗的卡路里
				calorie: 0,
				//与加速度相关的卡路里
				otherCalorie: 0,

				//大概消耗的卡路里
				PKCalorie: 0,
				//与加速度相关的卡路里
				PKOtherCalorie: 0,

				leftHookUrl: "/static/modal/boxing-post/left-hook.mp3",
				rightHookUrl: "/static/modal/boxing-post/right-hook.mp3",
				straightHookUrl: "/static/modal/boxing-post/straight-hook.mp3",
				hookAudioContext: null,
				//新手语音提示
				leftTipUrl: "/static/modal/boxing-post/tipLeft.mp3",
				rightTipUrl: "/static/modal/boxing-post/tipRight.mp3",
				straightTipUrl: "/static/modal/boxing-post/tipStraight.mp3",
				greatTipUrl: "/static/modal/boxing-post/tipGreat.mp3",
				giveGoTipUrl: "/static/modal/boxing-post/tipGiveItAGo.mp3",
				startTraining: "/static/modal/boxing-post/tipStartTraining.mp3",
				//击打状态音效
				hitUrl: "/static/elect/hit.mp3",
				missUrl: "/static/elect/miss.mp3",


				//是否在播放
				bPlay: false,
				//新手
				bGuide: false,
				//是否是特殊拳击
				bGuideEF: false,

				//运动时间
				showSportTime: this.showTime,
				sportTimeInterval: null,

				//拳击数据判断对象
				EquipmentActionObj: null,

				wave_array: [{
						wPlay: false
					},
					{
						wPlay: false
					},
					{
						wPlay: false
					},
					{
						wPlay: false
					},
				],
				wave_run_array: [],

				wave_time: [{
						run: 0.5,
						delay: 3,
						height: 20
					},
					{
						run: 1,
						delay: 3,
						height: 30
					},
					{
						run: 2,
						delay: 3,
						height: 80
					},
					{
						run: 0.5,
						delay: 2,
						height: 50
					},
					{
						run: 1,
						delay: 2,
						height: 35
					},
					{
						run: 2,
						delay: 2,
						height: 20
					}
				],

				wave_d_play: false,
				wave_d_timeout: null,

				wave_run_ratio: 0.4,

				wave_d_time: [{
						run: 1,
						delay: 1.1,
						height: 20,
						sHeight: 20,
						play: false
					},
					{
						run: 1,
						delay: 1,
						height: 30,
						sHeight: 20,
						play: true
					},
					{
						run: 1,
						delay: 0.9,
						height: 15,
						sHeight: 20,
						play: true
					},
					{
						run: 1,
						delay: 0.8,
						height: 50,
						sHeight: 20,
						play: true
					},
					{
						run: 1.3,
						delay: 0.7,
						height: 35,
						sHeight: 20,
						play: true
					},
					{
						run: 1.4,
						delay: 0.6,
						height: 20,
						sHeight: 20,
						play: true
					},
					{
						run: 1.5,
						delay: 0.5,
						height: 25,
						sHeight: 20,
						play: true
					},
					{
						run: 1.6,
						delay: 0.4,
						height: 40,
						sHeight: 20,
						play: true
					},
					{
						run: 1.7,
						delay: 0.3,
						height: 60,
						sHeight: 20,
						play: true
					},
					{
						run: 1.8,
						delay: 0.2,
						height: 50,
						sHeight: 20,
						play: true
					},
					{
						run: 1.9,
						delay: 0.1,
						height: 80,
						sHeight: 20,
						play: true
					},
					{
						run: 1.8,
						delay: 0,
						height: 70,
						sHeight: 20,
						play: true
					}
				],

				bControlRun: false,
				bRingAnimation: false,

				maxStrength: 0,
				averageStrength: 0,
				allStrength: 0,
				averageSpeed: 0,
				averageSpeedInterval: null,
				tempHitCount: 0,
				allTempHitCount: 0,
				allShowHitCount: 0,

				currentHitStrength: 0,
				
				// testHitInterval: null,
				aiHitInterval: null,
				//击打时候动画对象
				hitStrengthOpacityInterval: null,
				hitStrengthOpacity: 0,

				//pk 模式下的数据
				PKMaxStrength: 0,
				PKAverageStrength: 0,
				PKAllStrength: 0,
				PKAverageSpeed: 0,
				PKAverageSpeedInterval: null,
				PKTempHitCount: 0,
				PKAllTempHitCount: 0,
				PKAllShowHitCount: 0,

				BLENum: 0,
				BLEACX: 0,
				BLEACYL: 0,
				
				/** 跑步参数*/
				runMileage:0,
				runSpeed:0,
				runTempCount:0,
				runAllTempCount:0,
				runAllCount:0,

			}
		},
		watch: {
			bUpdate(val) {

			},
			showTime(val) {
				this.showSportTime = val;
			}
		},
		created() {
			let _self = this;

			_self.hookAudioContext = uni.createInnerAudioContext();
			_self.hookAudioContext.autoplay = false;
			_self.hookAudioContext.src = _self.straightHookUrl;
			_self.hookAudioContext.volume = 0.5;

			console.log(" ***** boxing-post created ******");
			_self.onBindAcc();

			_self.EquipmentActionObj = new EquipmentAction();
			_self.EquipmentActionObj.addEventListener("resultantHit", (e) => {

				// console.log("acc:",this.xA,this.yA,this.zA);
				// console.log("data:", this.xA1, this.yA1, this.zA1);

				if (this.mode == "pkMode") {
					this._pkHitOnly(e.acc, e.power);
				} else {
					this._HitOnly(e.acc, e.power);
				}
			})

			if (this.averageSpeedInterval) {
				clearInterval(this.averageSpeedInterval);
				this.averageSpeedInterval = null;
			}

			//计算平均速度
			this.averageSpeedInterval = setInterval(() => {
				if (this.mode == 'PKMode') {
					this.PKAverageSpeed = this.PKTempHitCount;
					this.PKTempHitCount = 0;
				} else {
					this.averageSpeed = this.tempHitCount;
					this.tempHitCount = 0;
					
					//跑步速度 70cm步长 速度：步长*步数/5秒
					this.runSpeed = this.runTempCount * 70 / 100;
					this.runTempCount = 0;
				}

			}, 5000)

		},
		beforeDestroy() {
			console.log(" ***** boxing-post destroyed ******");
			this.onUnbindAcc();
			// this.onUnbindOri();

			let _self = this;



			if (_self.hookAudioContext)
				_self.hookAudioContext.destroy();

			if (_self.sportTimeInterval) {
				clearInterval(_self.sportTimeInterval);
				_self.sportTimeInterval = null;
			}



			if (_self.averageSpeedInterval) {
				clearInterval(_self.averageSpeedInterval);
				_self.averageSpeedInterval = null;
			}


			// if (_self.testHitInterval) {
			// 	clearInterval(_self.testHitInterval);
			// 	_self.testHitInterval = null;
			// }

			if (this.aiHitInterval) {
				clearInterval(this.aiHitInterval);
				this.aiHitInterval = null;
			}
		},
		methods: {

			onSetRingAnimation(booleanValue) {
				this.bRingAnimation = booleanValue;
			},
			moveBoxingHandle() {
				return;
			},
			//测试打击
			onTestHit(data) {
				let _self = this;
				let maxPower = Math.floor(Math.random() * 13);
				// console.log("maxPower:", maxPower);

				if (this.mode == "pkMode") {
					this._pkHitOnly(maxPower, maxPower * 10);
				} else {
					for(let i=0;i<100;i++){
						this._HitOnly(maxPower, maxPower * 10);
					}
				}
			},
			//平时击打的力量槽动画播放
			onPlayPowerAnimation(bGreat) {
				if (bGreat) {
					this.hookAudioContext.stop();
					this.hookAudioContext.src = this.greatTipUrl;
					this.hookAudioContext.play();
				} else {
					this.hookAudioContext.stop();
					this.hookAudioContext.src = this.hitUrl;
					this.hookAudioContext.play();
				}
				let _self = this;

				if (_self.powerInterval) {
					clearInterval(_self.powerInterval);
					_self.powerInterval = null;
				}

				let bAdd = true;
				let _oldPowerCount = _self.powerCount;
				let _currentMaxCount = _oldPowerCount + 10;
				let _duraciotn = 300 / _currentMaxCount;

				_self.powerInterval = setInterval(function() {

					if (_self.showCount >= _currentMaxCount) {
						bAdd = false;
					} else if (_self.showCount <= _oldPowerCount && !bAdd) {
						_self.showCount = _self.powerCount;
						clearInterval(_self.powerInterval);
						_self.powerInterval = null;
						return;
					}

					if (bAdd)
						_self.showCount++;
					else
						_self.showCount--;

				}, _duraciotn); //300ms/40格
			},
			//pk模式击打的力量槽动画播放
			onPKModePlayPowerAnimation(bGreat) {
				if (bGreat) {
					this.hookAudioContext.stop();
					this.hookAudioContext.src = this.greatTipUrl;
					this.hookAudioContext.play();
				} else {
					this.hookAudioContext.stop();
					this.hookAudioContext.src = this.hitUrl;
					this.hookAudioContext.play();
				}



				let _self = this;
				_self.myShowCount = _self.myPowerCount;
				// if (_self.powerInterval) {
				// 	clearInterval(_self.powerInterval);
				// 	_self.powerInterval = null;
				// }

				// let bAdd = true;
				// let _oldPowerCount = _self.myPowerCount;
				// let _currentMaxCount = _oldPowerCount + 10;
				// let _duraciotn = 300 / _currentMaxCount;

				// _self.powerInterval = setInterval(function() {

				// 	if (_self.myShowCount >= _currentMaxCount) {
				// 		bAdd = false;
				// 	} else if (_self.myShowCount <= _oldPowerCount && !bAdd) {
				// 		_self.myShowCount = _self.myPowerCount;
				// 		clearInterval(_self.powerInterval);
				// 		_self.powerInterval = null;
				// 		return;
				// 	}

				// 	if (bAdd)
				// 		_self.myShowCount++;
				// 	else
				// 		_self.myShowCount--;

				// }, _duraciotn); //300ms/40格
			},
			onBindAcc(globalAcc) {
				uni.$on('watchAcceleration', this.updateAcc);
			},
			onUnbindAcc() {
				uni.$off('watchAcceleration', this.updateAcc);
			},
			onBindOri(globalOri) {
				uni.$on('watchOrientation', this.updateOri);
			},
			onUnbindOri() {
				uni.$off('watchOrientation', this.updateOri);
			},
			updateAcc(acc) {

				// console.log("acc:" ,acc.xAxis,acc.yAxis,acc.zAxis);


				this.xA = acc.xAxis;
				this.yA = acc.yAxis;
				this.zA = acc.zAxis;

				// return;
				if (!this.bUpdate || !this.bPlay) return;

				this.EquipmentActionObj.updateAcc({
					xA: acc.xAxis,
					zA: acc.yAxis,
					yA: acc.zAxis,
					bLimitRebound: this.bRebound
				})


			},
			//旧的蓝牙模块更新数据
			onBLEUpdate(data) {

				if (!this.bPlay) return;

				if (data.num)
					this.BLENum = data.num;

				if (data.acx)
					this.BLEACX = data.acx;

				if (data.acy) {
					this.BLEACYL = data.acy;

					// let acc = Math.ceil((Math.abs(this.BLEACX) + Math.abs(this.BLEACYL))*0.0005);
					let _abs = (Math.abs(this.BLEACX) + Math.abs(this.BLEACYL));
					let _ratioAbs = _abs > 65000 ? 1 : _abs / 65000;
					// console.log("当前值:",(Math.abs(this.BLEACX) + Math.abs(this.BLEACYL)),acc,this._onReducedBlood(acc),_ratioAbs,Math.ceil(_ratioAbs*30));
					let acc = Math.ceil(_ratioAbs * 30);
					if (this.mode == "pkMode") {
						this._pkHitOnly(acc, acc * 10);
					} else {
						this._HitOnly(acc, acc * 10);
					}
				}



			},
			//hotman 情景下刷新
			onBLEHotmanUpdate(data) {
				if (!this.bUpdate || !this.bPlay) return;

				let {
					hit
				} = data;
				let power = parseInt(hit);
				let acc = power * 0.1;

				if (this.mode == "pkMode") {
					this._pkHitOnly(acc, power);
				} else {
					this._HitOnly(acc, power);
				}
			},
			//蓝牙更新数据
			onBLEHandleUpdate(data) {

				if (!this.bUpdate || !this.bPlay) return;

				let {
					ax,
					ay,
					az
				} = data.acc;

				let xA = ax * 9.80665;
				let yA = ay * 9.80665;
				let zA = az * 9.80665;

				this.xA1 = xA;
				this.yA1 = yA;
				this.zA1 = zA;
				// console.log("data:" ,xA,yA,zA);
				// updateAcc updateTriaxialAcc
				this.EquipmentActionObj.updateTriaxialAcc({
					xA: xA,
					zA: yA,
					yA: zA,
					bLimitRebound: true
				})
			},

			updateOri(ori) {
				this.xO = ori.beta;
				this.zO = ori.alpha;
				this.yO = ori.gamma;
			},
			onControlPlay() {
				this._customControlPlay({
					bControlRun: this.bControlRun
				});
			},
			onCloseDevices() {
				let _self = this;

				if (!_self.bPlay) return;

				if (_self.sportTimeInterval) {
					clearInterval(_self.sportTimeInterval);
					_self.sportTimeInterval = null;
				}
				if (_self.aiHitInterval) {
					clearInterval(_self.aiHitInterval);
					_self.aiHitInterval = null;
				}
				_self.bPlay = false;
				_self.bControlRun = false;

				//如果是新手教程，也直接停掉
				_self.bGuide = false;
				_self.bGuideEF = false;

				if (_self.mode == "pkMode") {
					_self.myShowCount = 0;
					_self.myPowerCount = 0;
					_self.aiShowCount = 0;
					_self.aiPowerCount = 0;
				}

				_self.$emit("closeBoxingControl");
			},
			onHitPlay(bPlaying) {
				if (bPlaying) {
					this.bControlRun = bPlaying;
				} else {
					this.bControlRun = !this.bControlRun;
				}
			},
			_customControlPlay(data) {
				let _self = this;
				//1.检查是否符合要求，再进行训练
				if (data.bControlRun) {

					if (_self.sportTimeInterval) {
						clearInterval(_self.sportTimeInterval);
						_self.sportTimeInterval = null;
					}

					this.bPlay = false;
					// this.$refs.customControlButtons.onPlay();
					this.onHitPlay();

					//如果是新手教程，也直接停掉
					this.bGuide = false;
					this.bGuideEF = false;


					// if (this.testHitInterval) {
					// 	clearInterval(this.testHitInterval);
					// 	this.testHitInterval = null;
					// }

					if (this.mode == "pkMode") {
						this.myShowCount = 0;
						this.myPowerCount = 0;
						this.aiShowCount = 0;
						this.aiPowerCount = 0;
					}


					if (this.aiHitInterval) {
						clearInterval(this.aiHitInterval);
						this.aiHitInterval = null;
					}

					this.$emit("boxingPostControlPlay", false);
				} else {
					this.$emit("boxingPostCheck");
				}

			},

			_PKOver(data) {
				let _self = this;
				//1.检查是否符合要求，再进行训练
				if (_self.sportTimeInterval) {
					clearInterval(_self.sportTimeInterval);
					_self.sportTimeInterval = null;
				}
				this.bPlay = false;
				this.onHitPlay();

				//如果是新手教程，也直接停掉
				this.bGuide = false;
				this.bGuideEF = false;

				if (this.aiHitInterval) {
					clearInterval(this.aiHitInterval);
					this.aiHitInterval = null;
				}
			},
			//新手引导
			onGuideBoxingPostPlay() {
				console.log("onGuideBoxingPostPlay");
				let _self = this;
				_self.bPlay = true;
				//
				_self.bGuide = true;
				// 按钮事件
				// _self.$refs.customControlButtons.onPlay();
				_self.onHitPlay();

			},
			//训练退出时候，重新信息
			onBoxingPostStop() {


			},

			//调用播放
			onBoxingPostPlay(bPlaying) {
				let _self = this;

				//判断是否是pk模式，如果是pk模式，则用pk模式播放

				if (bPlaying) {
					_self.bPlay = true;
					// 按钮事件
					// _self.$refs.customControlButtons.onPlay(true);
					_self.onHitPlay(true);

					// if (_self.testHitInterval) {
					// 	clearInterval(_self.testHitInterval);
					// 	_self.testHitInterval = null;
					// }
					// _self.testHitInterval = setInterval(() => {
					// 	this.onTestHit();
					// }, 300)

					if (_self.sportTimeInterval) {
						clearInterval(_self.sportTimeInterval);
						_self.sportTimeInterval = null;
					}

					if (this.mode == 'pkMode') {
						if (this.aiHitInterval) {
							clearInterval(this.aiHitInterval);
							this.aiHitInterval = null;
						}
						this.aiHitInterval = setInterval(() => {
							let _random = Math.floor(Math.random() * 10);
							if (_random < 5) {
								this.onAiHitEvent();
							}
						}, 500)
					}

					//play true 时候，开启时间计算
					_self.sportTimeInterval = setInterval(() => {
						_self.showSportTime++;
						if (_self.showSportTime >= 20 && _self.showSportTime % 20 == 0) {
							_self.$emit("updateSportTime", _self.showSportTime);
						}
					}, 1000)
				}
			},
			//自由模式下的打击
			//首页现在尝试用于跑步
			_HitOnly(acc, power) {

				//动画的高度
				let _ratio = acc / 10;
				if (_ratio > 1) _ratio = 1;
				if (_ratio < 0.5) _ratio = 0.5;

				for (let i = 0; i < this.wave_d_time.length; i++) {
					this.wave_d_time[i].sHeight = this.wave_d_time[i].height * _ratio;
				}

				this.onPlayPowerAnimation();

				// this.allTempHitCount++;
				this.runAllTempCount++;
				this.allShowHitCount++;
				this.tempHitCount++;
				
				this.runTempCount ++;
				
				this.runAllCount = this.allShowHitCount;
				//里面转换千米
				//175公分的bai成人一般两步间距du为70厘米，zhi170公分为65厘米，180公分为75厘米。
				this.runMileage =  this.runAllCount*70 / 100000;

				this.currentHitStrength = power;
				if (this.maxStrength < power) {
					this.maxStrength = power;
				}
				this.allStrength += power;
				
				this.averageStrength = (this.allStrength / this.allShowHitCount).toFixed(1);

				//跑步的卡路里，allTempHiCount
				this.calorie = puchConfig.getRunCalorie(this.runAllTempCount);
				//击打的加速度添加的卡路里，是额外计算的卡路里
				// this.otherCalorie += puchConfig.getAccCalorie(acc);
				let _all = this.calorie;// this.calorie.add(this.otherCalorie);

				//100 大卡，为一个周期 分50份
				//现在显示1格子是2大卡，所以 _all要 除去一半
				this.powerCount = parseInt(_all / 2);

				if (this.powerCount >= 50) {
					console.log("同步卡路里");
					console.log("this.calorie:", this.calorie, this.otherCalorie, _all);
					this.$emit('updateCalorie', _all);
					// this.allTempHitCount = 0;
					this.runAllTempCount = 0;
					this.powerCount = 0;
					// this.otherCalorie = 0;
				}

				if (!this.wave_d_play) {
					if (this.wave_d_timeout) {
						clearTimeout(this.wave_d_timeout);
						this.wave_d_timeout = null;
					}

					this.wave_d_play = true;
					this.wave_d_timeout = setTimeout(() => {
						this.wave_d_play = false;
					}, 1000 * this.wave_run_ratio)
				}

				if (this.hitStrengthOpacityInterval) {
					clearTimeout(this.hitStrengthOpacityInterval);
					this.hitStrengthOpacityInterval = null;
				}
				this.hitStrengthOpacity = 1;
				this.hitStrengthOpacityInterval = setTimeout(() => {
					this.hitStrengthOpacity = 0;
				}, 1000)
			},

			//pk模式下的打击
			_pkHitOnly(acc, power) {

				this.onPKModePlayPowerAnimation();

				this.PKAllTempHitCount++;
				this.PKAllShowHitCount++;
				this.PKTempHitCount++;

				this.currentHitStrength = power;
				if (this.PKMaxStrength < power) {
					this.PKMaxStrength = power;
				}
				this.PKAllStrength += power;

				this.PKAverageStrength = (this.PKAllStrength / this.PKAllShowHitCount).toFixed(1);

				//击打次数一个卡路里，就是基础卡路里
				this.PKCalorie = puchConfig.getBoxingCalorie(this.PKAllTempHitCount);
				//击打的加速度添加的卡路里，是额外计算的卡路里
				// this.PKOtherCalorie += puchConfig.getAccCalorie(acc);
				// console.log( puchConfig.getAccCalorie(acc),this.calorie);
				let _all = this.PKCalorie; // this.PKCalorie.add(this.PKOtherCalorie);

				//10 大卡，为一个周期 分25份
				// this.myPowerCount = parseInt(_all * 2.5 * 20);

				//中一个小拳头扣一滴血，中一个中拳头去2滴血，中一个大拳头去3滴血。
				let _myBloodPoint = this._onReducedBlood(acc);
				this.myPowerCount += _myBloodPoint;

				//用户打击完成
				if (this.myPowerCount >= this.maxShowCount) {
					console.log("this.calorie:", this.PKCalorie, this.PKOtherCalorie, _all);
					this.$emit('updateCalorie', _all);
					this.PKAllTempHitCount = 0;
					this.myPowerCount = 0;
					this.myShowCount = 0;
					this.PKOtherCalorie = 0;
					//通知结果

					this.$emit('gameOver', {
						myWin: true
					});
					this._PKOver();

					this.aiPowerCount = 0;
					this.aiShowCount = 0;
				}

				this.$emit('hitEvent', _myBloodPoint);
			},

			onAiHitEvent() {
				let _acc = Math.ceil(Math.random() * 30);
				let _aiBloodPoint = this._onReducedBlood(_acc);
				this.aiPowerCount += _aiBloodPoint;
				// this.aiPowerCount += 20;

				this.$emit('aiHitEvent', _aiBloodPoint);
				this.aiShowCount = this.aiPowerCount; // parseInt(this.aiPowerCount / 10);

				if (this.aiShowCount >= this.maxShowCount) {
					this.$emit('gameOver', {
						myWin: false
					});
					this._PKOver();
					this.aiPowerCount = 0;
					this.aiShowCount = 0;
					this.myPowerCount = 0;
					this.myShowCount = 0;
				}
			},
			//根据加速度计算血量
			_onReducedBlood(acc) {
				let _ratio = acc > 30 ? 1 : acc / 30;
				// console.log("_ratio:", _ratio);
				if (_ratio > 0.9) {
					//大拳头
					return 3;
				} else if (_ratio > 0.7) {
					//中拳头
					return 2;
				} else {
					//小拳头
					return 1;
				}
			},
			onChangeMode() {
				//todo 切换模式时候，停止当前运行状态
				if (this.bControlRun) {
					uni.showToast({
						title: '先停止,再切换模式',
						mask: true,
						icon: 'none',
						duration: 2000,
					})

					return;
				}
				//当前的拳击力设置为0
				this.currentHitStrength = 0;

				let _name = 'pk模式';
				if (this.mode == 'pkMode') {
					this.mode = 'calorieMode';
					_name = '长跑模式'; //健身模式
				} else if (this.mode == 'calorieMode') {
					this.mode = 'pkMode';
					_name = 'pk模式';
				}
				let _data = {
					mode: this.mode,
					name: _name

				}
				this.$emit('modeEvent', _data);
			},
			//设置一个切换模式
			onSetMode(modeValue) {
				console.log("modeValue =====", modeValue);
				//todo 切换模式时候，停止当前运行状态
				if (this.bControlRun) {
					uni.showToast({
						title: '先停止,再切换模式',
						mask: true,
						icon: 'none',
						duration: 2000,
					})

					return;
				}
				//当前的拳击力设置为0
				this.currentHitStrength = 0;

				let _name = 'pk模式';
				if (modeValue == 'calorieMode') {
					this.mode = 'calorieMode';
					_name = '长跑模式';
				} else if (modeValue == 'pkMode') {
					this.mode = 'pkMode';
					_name = 'pk模式';
				}
				let _data = {
					mode: this.mode,
					name: _name

				}
				this.$emit('modeEvent', _data);
			}

		}
	}
</script>

<style>
	/* Loader Bar */
	.hit-vertical-container {
		position: absolute;
		top: -50rpx;
		left: 0;
		right: 0;
		display: flex;
		justify-content: space-between;
		/* border: 1rpx solid #000000; */
		pointer-events: none;
	}

	.hit-vertical-bar {
		display: flex;
		flex-direction: column-reverse;
	}

	.hit-vertical-child {
		/* position: relative; */
		width: 70rpx;
		height: 20rpx;
		margin: 14rpx 24rpx 0 24rpx;
		display: flex;
		/* align-content: center; */
		justify-content: space-between;


	}

	.hit-vertical-text {
		color: #FFFFFF;
		font-size: 8px;
	}

	.hit-text-hidden {
		visibility: hidden;
	}

	.hit-vertical-active {
		background-color: #FFFFFF;
		width: 30rpx;
		height: 100%;
	}

	.hit-vertical-inactive {
		width: 30rpx;
		height: 100%;
		background: rgba(144, 141, 246, 1);
	}

	.boxing-item-bg {
		border-radius: 15rpx;
		background-color: rgba(255, 255, 255, 0.1);
		display: flex;
		flex-direction: column;
		align-items: center;
		/* width: 160rpx; */
	}

	.hit-count {
		width: 160rpx;
		height: 60rpx;
		font-size: 22px;
		font-weight: bold;
		color: #FFFFFF;
		line-height: 60rpx;
	}

	.hit-current-count-power {
		/* margin: 0 5rpx; */
		font-size: 19px;
		line-height: 60rpx;

		/* font-weight: bold; */
		color: #FFFFFF;
	}

	.hit-current-count {
		/* width: 160rpx; */
		/* height: 100rpx; */
		margin: 0 30rpx;
		font-size: 22px;
		line-height: 60rpx;
		font-weight: bold;
		color: #FFFFFF;
		/* line-height: 22px; */
	}

	#loadbar {
		list-style: none;
		width: 400rpx;
		margin: 0 20rpx;
	}

	#loadbar-child {
		float: left;
		position: relative;
		width: 60rpx;
		height: 10rpx;
		margin-left: 1px;
		background: rgba(255, 255, 255, 0.5);
	}

	#loadbar-child:first-child {
		margin-left: 0;
	}

	.bar {
		background-color: #FFFFFF;
		width: 60rpx;
		height: 10rpx;
	}


	.show-png {
		width: 78rpx;
		height: 78rpx;
		margin: 0 10px;
	}

	.boxing-hit-png {
		margin-top: 40rpx;
		width: 50rpx;
		height: 50rpx;
		transition: transform 0.15s;
	}

	.boxing-change {
		transform: scale(1.58);
	}


	.hitBoxingTimer {
		position: absolute;
		top: -60rpx;
		left: 0;
		right: 0;
	}


	.wave-item {
		width: 8rpx;
		height: 20rpx;
		margin: 5rpx;
		background-color: #FFFFFF;
		border-radius: 10rpx;
		transition: height 0.5s;
	}

	.wave-d-item {
		width: 8rpx;
		height: 20rpx;
		margin: 5rpx;
		background-color: #FFFFFF;
		border-radius: 10rpx;
		transition: height 0.5s;
	}



	.hit-wave {
		animation: hit-d-scale calc(var(--time) * 0.5s) linear calc(var(--delay) * 1s) 1 alternate;
	}

	.wave-play {
		animation-play-state: running;
	}

	.wave-pause {
		animation-play-state: paused;
	}

	@keyframes hit-scale {
		0% {
			transform: scale(1, 1);
			/* background-color: #999; */
		}

		100% {
			transform: scale(1, 3);
			/* background-color: #333; */
		}
	}


	@keyframes hit-d-scale {
		0% {
			transform: scale(1, 1);
		}

		25% {
			transform: scale(1, 3);
		}

		50% {
			transform: scale(1, 1);
		}

		75% {
			transform: scale(1, 3);
		}

		100% {
			transform: scale(1, 1);
		}
	}


	.hit-button-rotate {
		animation: hit-rotate 2s steps(16, end) infinite;
	}

	.hit-button-bg-play {
		animation-play-state: running;
	}

	.hit-button-bg-paused {
		animation-play-state: paused;
	}

	@keyframes hit-rotate {
		from {
			transform: rotate(0deg);
		}

		to {
			transform: rotate(360deg);
		}
	}

	.big {
		transform: scale(1.2);
	}
	

	/* .progress-bar-container{
		
	} */
</style>