personal.vue 82 KB

1234567891011121314151617181920212223242526272829303132333435363738394041424344454647484950515253545556575859606162636465666768697071727374757677787980818283848586878889909192939495969798991001011021031041051061071081091101111121131141151161171181191201211221231241251261271281291301311321331341351361371381391401411421431441451461471481491501511521531541551561571581591601611621631641651661671681691701711721731741751761771781791801811821831841851861871881891901911921931941951961971981992002012022032042052062072082092102112122132142152162172182192202212222232242252262272282292302312322332342352362372382392402412422432442452462472482492502512522532542552562572582592602612622632642652662672682692702712722732742752762772782792802812822832842852862872882892902912922932942952962972982993003013023033043053063073083093103113123133143153163173183193203213223233243253263273283293303313323333343353363373383393403413423433443453463473483493503513523533543553563573583593603613623633643653663673683693703713723733743753763773783793803813823833843853863873883893903913923933943953963973983994004014024034044054064074084094104114124134144154164174184194204214224234244254264274284294304314324334344354364374384394404414424434444454464474484494504514524534544554564574584594604614624634644654664674684694704714724734744754764774784794804814824834844854864874884894904914924934944954964974984995005015025035045055065075085095105115125135145155165175185195205215225235245255265275285295305315325335345355365375385395405415425435445455465475485495505515525535545555565575585595605615625635645655665675685695705715725735745755765775785795805815825835845855865875885895905915925935945955965975985996006016026036046056066076086096106116126136146156166176186196206216226236246256266276286296306316326336346356366376386396406416426436446456466476486496506516526536546556566576586596606616626636646656666676686696706716726736746756766776786796806816826836846856866876886896906916926936946956966976986997007017027037047057067077087097107117127137147157167177187197207217227237247257267277287297307317327337347357367377387397407417427437447457467477487497507517527537547557567577587597607617627637647657667677687697707717727737747757767777787797807817827837847857867877887897907917927937947957967977987998008018028038048058068078088098108118128138148158168178188198208218228238248258268278288298308318328338348358368378388398408418428438448458468478488498508518528538548558568578588598608618628638648658668678688698708718728738748758768778788798808818828838848858868878888898908918928938948958968978988999009019029039049059069079089099109119129139149159169179189199209219229239249259269279289299309319329339349359369379389399409419429439449459469479489499509519529539549559569579589599609619629639649659669679689699709719729739749759769779789799809819829839849859869879889899909919929939949959969979989991000100110021003100410051006100710081009101010111012101310141015101610171018101910201021102210231024102510261027102810291030103110321033103410351036103710381039104010411042104310441045104610471048104910501051105210531054105510561057105810591060106110621063106410651066106710681069107010711072107310741075107610771078107910801081108210831084108510861087108810891090109110921093109410951096109710981099110011011102110311041105110611071108110911101111111211131114111511161117111811191120112111221123112411251126112711281129113011311132113311341135113611371138113911401141114211431144114511461147114811491150115111521153115411551156115711581159116011611162116311641165116611671168116911701171117211731174117511761177117811791180118111821183118411851186118711881189119011911192119311941195119611971198119912001201120212031204120512061207120812091210121112121213121412151216121712181219122012211222122312241225122612271228122912301231123212331234123512361237123812391240124112421243124412451246124712481249125012511252125312541255125612571258125912601261126212631264126512661267126812691270127112721273127412751276127712781279128012811282128312841285128612871288128912901291129212931294129512961297129812991300130113021303130413051306130713081309131013111312131313141315131613171318131913201321132213231324132513261327132813291330133113321333133413351336133713381339134013411342134313441345134613471348134913501351135213531354135513561357135813591360136113621363136413651366136713681369137013711372137313741375137613771378137913801381138213831384138513861387138813891390139113921393139413951396139713981399140014011402140314041405140614071408140914101411141214131414141514161417141814191420142114221423142414251426142714281429143014311432143314341435143614371438143914401441144214431444144514461447144814491450145114521453145414551456145714581459146014611462146314641465146614671468146914701471147214731474147514761477147814791480148114821483148414851486148714881489149014911492149314941495149614971498149915001501150215031504150515061507150815091510151115121513151415151516151715181519152015211522152315241525152615271528152915301531153215331534153515361537153815391540154115421543154415451546154715481549155015511552155315541555155615571558155915601561156215631564156515661567156815691570157115721573157415751576157715781579158015811582158315841585158615871588158915901591159215931594159515961597159815991600160116021603160416051606160716081609161016111612161316141615161616171618161916201621162216231624162516261627162816291630163116321633163416351636163716381639164016411642164316441645164616471648164916501651165216531654165516561657165816591660166116621663166416651666166716681669167016711672167316741675167616771678167916801681168216831684168516861687168816891690169116921693169416951696169716981699170017011702170317041705170617071708170917101711171217131714171517161717171817191720172117221723172417251726172717281729173017311732173317341735173617371738173917401741174217431744174517461747174817491750175117521753175417551756175717581759176017611762176317641765176617671768176917701771177217731774177517761777177817791780178117821783178417851786178717881789179017911792179317941795179617971798179918001801180218031804180518061807180818091810181118121813181418151816181718181819182018211822182318241825182618271828182918301831183218331834183518361837183818391840184118421843184418451846184718481849185018511852185318541855185618571858185918601861186218631864186518661867186818691870187118721873187418751876187718781879188018811882188318841885188618871888188918901891189218931894189518961897189818991900190119021903190419051906190719081909191019111912191319141915191619171918191919201921192219231924192519261927192819291930193119321933193419351936193719381939194019411942194319441945194619471948194919501951195219531954195519561957195819591960196119621963196419651966196719681969197019711972197319741975197619771978197919801981198219831984198519861987198819891990199119921993199419951996199719981999200020012002200320042005200620072008200920102011201220132014201520162017201820192020202120222023202420252026202720282029203020312032203320342035203620372038203920402041204220432044204520462047204820492050205120522053205420552056205720582059206020612062206320642065206620672068206920702071207220732074207520762077207820792080208120822083208420852086208720882089209020912092209320942095209620972098209921002101210221032104210521062107210821092110211121122113211421152116211721182119212021212122212321242125212621272128212921302131213221332134213521362137213821392140214121422143214421452146214721482149215021512152215321542155215621572158215921602161216221632164216521662167216821692170217121722173217421752176217721782179218021812182218321842185218621872188218921902191219221932194219521962197219821992200220122022203220422052206220722082209221022112212221322142215221622172218221922202221222222232224222522262227222822292230223122322233223422352236223722382239224022412242224322442245224622472248224922502251225222532254225522562257225822592260226122622263226422652266226722682269227022712272227322742275227622772278227922802281228222832284228522862287228822892290229122922293229422952296229722982299230023012302230323042305230623072308230923102311231223132314231523162317231823192320232123222323232423252326232723282329233023312332233323342335233623372338233923402341234223432344234523462347234823492350235123522353235423552356235723582359236023612362236323642365236623672368236923702371237223732374237523762377237823792380238123822383238423852386238723882389239023912392239323942395239623972398239924002401240224032404240524062407240824092410241124122413241424152416241724182419242024212422242324242425242624272428242924302431243224332434243524362437243824392440244124422443244424452446244724482449245024512452245324542455245624572458245924602461246224632464246524662467246824692470247124722473247424752476247724782479248024812482248324842485248624872488248924902491249224932494249524962497249824992500250125022503250425052506250725082509251025112512251325142515251625172518251925202521252225232524252525262527252825292530253125322533253425352536253725382539254025412542254325442545254625472548254925502551255225532554255525562557255825592560256125622563256425652566256725682569257025712572257325742575257625772578257925802581258225832584258525862587258825892590259125922593259425952596259725982599260026012602260326042605260626072608260926102611261226132614261526162617261826192620262126222623262426252626262726282629263026312632263326342635263626372638263926402641264226432644264526462647264826492650265126522653265426552656265726582659266026612662266326642665266626672668266926702671267226732674267526762677267826792680268126822683268426852686268726882689269026912692269326942695269626972698269927002701270227032704270527062707270827092710271127122713271427152716271727182719272027212722272327242725272627272728272927302731273227332734273527362737273827392740274127422743274427452746274727482749275027512752275327542755275627572758275927602761276227632764276527662767276827692770277127722773277427752776277727782779278027812782278327842785278627872788278927902791279227932794279527962797279827992800280128022803280428052806280728082809281028112812281328142815281628172818281928202821282228232824282528262827282828292830283128322833283428352836283728382839284028412842284328442845284628472848284928502851285228532854285528562857285828592860286128622863286428652866286728682869287028712872287328742875287628772878287928802881288228832884288528862887288828892890289128922893289428952896289728982899290029012902290329042905290629072908290929102911291229132914291529162917291829192920292129222923292429252926292729282929293029312932293329342935293629372938293929402941294229432944294529462947294829492950295129522953295429552956295729582959296029612962296329642965296629672968296929702971297229732974297529762977297829792980298129822983298429852986298729882989299029912992299329942995299629972998299930003001300230033004300530063007300830093010301130123013301430153016301730183019302030213022302330243025302630273028302930303031303230333034303530363037303830393040304130423043304430453046304730483049305030513052305330543055305630573058305930603061306230633064306530663067306830693070307130723073307430753076307730783079308030813082308330843085308630873088308930903091309230933094309530963097309830993100310131023103310431053106
  1. <template>
  2. <view class="bg-person " :class="bEFHitShake?' screen-jitter ':''">
  3. <!-- :title="title" @clickRight="onNavAppInfo() title="PK模式"" -->
  4. <!-- 自定义导航栏 backgroundColor="rgba(164, 136, 220, 1)" @clickRight="onSyncData" @clickRight="onTestShare"-->
  5. <uni-nav-bar id="nav-bar" status-bar="true" backgroundColor="rgba(153, 150, 252, 255)" <!-- #ifdef APP-PLUS -->
  6. @clickLeft="showDrawer()"
  7. <!-- #endif -->
  8. <!-- #ifdef H5 || MP-WEIXIN -->
  9. @clickLeft="showClickEvent()"
  10. <!-- #endif -->
  11. color="#FFFFFF" fixed="true" :border="false">
  12. <view slot="left">
  13. <view class=" flex align-center margin-left">
  14. <image class="png-more" src="/static/more.png"></image>
  15. </view>
  16. </view>
  17. <!-- @clickRight="onNavFcGame()" -->
  18. <view slot="middle">
  19. <!-- <view style="position: relative; border: 1rpx solid #FFFFFF;">
  20. <view
  21. style="position: absolute;top: 0;left: -155rpx;right: 0;bottom: 0;margin: auto; width: 194rpx;height: 52rpx; border-radius: 26rpx 0 0 26rpx; background-color: rgba(255,255,255,0.12);"
  22. class="flex align-center justify-center">
  23. <image style="width: 26rpx;height: 24rpx; margin-right: 12rpx;"
  24. src="/static/personal/linkWhite.png"></image>
  25. <view class="text-14px ">连接设备</view>
  26. </view>
  27. </view> -->
  28. <view class="flex justify-center align-center" style="margin-left: 160rpx; ">
  29. <view class="flex align-center"
  30. style="margin-right: 40rpx; padding: 0 18px; height: 56rpx; background-color: rgba(255,255,255,0.11); border-radius: 13.5px;">
  31. <image class="png-more" style="margin-right: 16rpx;" src="/static/common/sideBar/sGold.png">
  32. </image>
  33. <view class="text-14px" style="line-height: 28rpx;">{{cGold}}</view>
  34. </view>
  35. <view class="flex align-center"
  36. style="padding: 0 18px; height: 56rpx; background-color: rgba(255,255,255,0.11); border-radius: 13.5px;">
  37. <image class="png-more" style="margin-right: 16rpx; " src="/static/common/sideBar/sDiamond.png">
  38. </image>
  39. <view class="text-14px" style="line-height: 28rpx;">{{cDiamond}}</view>
  40. </view>
  41. </view>
  42. </view>
  43. </uni-nav-bar>
  44. <!-- 导航栏下面滚动区域 -->
  45. <scroll-view class="scroll-class" @scroll="mainScroll" :scroll-top="scrollTop" :scroll-into-view="toView"
  46. scroll-y="true" :style="{ height: scrollviewHight + 'px' }">
  47. <view class="flex align-center">
  48. <view class="justify-center">
  49. <!-- 计划显示 区域 topScrollHight :style="{ height: + '100%' }"-->
  50. <scroll-view scroll-y="true" style="height: 100%; width: 100%;">
  51. <view class="plan-view">
  52. <!-- 拳击模块 -->
  53. <view v-if="currentMode == 'pkMode' && 0 === currentModeIndex"
  54. style="display: flex; flex-direction: row; height: 200rpx; margin-top: 140rpx; justify-content: space-around;align-items: center;">
  55. <view>
  56. <view class="cu-avatar-group" style="position: relative;">
  57. <view class="cu-avatar round xl" :class="bAiHitShake?' screen-jitter':''"
  58. :style="[{ backgroundImage:'url('+avatarUrl+')' }]"></view>
  59. <HitEffect ref="aiHitEffectRef"></HitEffect>
  60. </view>
  61. <view style="margin-top: 20rpx; width: 165rpx;" class="text-cut text-white">
  62. {{userName}}
  63. </view>
  64. </view>
  65. <view>
  66. <image style="width: 104rpx; height: 42rpx ;margin-bottom: 60rpx;"
  67. src="/static/personal/pk@2x.png"></image>
  68. </view>
  69. <view>
  70. <view class="cu-avatar-group" style="position: relative;">
  71. <view class="cu-avatar round xl" :class="bHitShake?' screen-jitter':''"
  72. :style="[{ backgroundImage:'url('+aiObj.avatar+')' }]"></view>
  73. <HitEffect ref="hitEffectRef"></HitEffect>
  74. </view>
  75. <view style="margin-top: 20rpx; width: 165rpx;" class="text-cut text-white">
  76. {{aiObj.name}}
  77. </view>
  78. </view>
  79. <view
  80. style="position: absolute;left: 0;right: 0;top: 0;bottom: 0; height: 200rpx; margin-top: 120rpx;">
  81. <HitFistEffect ref="hitFistRef"></HitFistEffect>
  82. </view>
  83. </view>
  84. <!-- pk模式下的跳绳 -->
  85. <view v-if="currentMode == 'pkMode' && 1 === currentModeIndex" class="flex justify-center "
  86. style="height: 180rpx; margin-top: 20rpx;">
  87. <view class="flex flex-direction justify-center align-center">
  88. <view class="cu-avatar-group" style="position: relative;">
  89. <view class="cu-avatar round xl" :class="bAiHitShake?' screen-jitter':''"
  90. :style="[{ backgroundImage:'url('+avatarUrl+')' }]"></view>
  91. <HitEffect ref="aiHitEffectRef"></HitEffect>
  92. </view>
  93. <view style="margin-top: 20rpx; width: 165rpx; "
  94. class="text-cut text-white text-center">
  95. {{userName}}
  96. </view>
  97. </view>
  98. <view class="flex justify-center align-center " style=" width: 300rpx;">
  99. <LEDFont style="" :showValue='myAcionJumpScore' :size="30" color='#FFFFFF'>
  100. </LEDFont>
  101. <view class="text-white text-bold">:</view>
  102. <LEDFont style="" :showValue='otherActionJumpScore' :size="30" color='#FFFFFF'>
  103. </LEDFont>
  104. </view>
  105. <view v-if="finallySelectFriendInfo"
  106. class="flex flex-direction justify-center align-center"
  107. @click="onNavToSelectFriend()">
  108. <view class="cu-avatar-group" style="position: relative;">
  109. <view class="cu-avatar round xl" :class="bHitShake?' screen-jitter':''"
  110. :style="[{ backgroundImage:'url('+finallySelectFriendInfo.avatarUrl+')' }]">
  111. </view>
  112. <HitEffect ref="hitEffectRef"></HitEffect>
  113. </view>
  114. <view style="margin-top: 20rpx; width: 165rpx;"
  115. class="text-cut text-white text-center">
  116. {{finallySelectFriendInfo.username}}
  117. </view>
  118. </view>
  119. <view v-else class="flex flex-direction justify-center align-center"
  120. @click="onNavToSelectFriend()">
  121. <image style="width: 100rpx ;height: 100rpx;" src="/static/friend/friend-add.png">
  122. </image>
  123. <view style="margin-top: 20rpx; width: 165rpx;"
  124. class="text-cut text-white text-center">
  125. 选择好友
  126. </view>
  127. </view>
  128. <view
  129. style="position: absolute;left: 0;right: 0;top: 0;bottom: 0; height: 200rpx; margin-top: 120rpx;">
  130. <HitFistEffect ref="hitFistRef"></HitFistEffect>
  131. </view>
  132. </view>
  133. <!-- 圆形进度条 -->
  134. <view
  135. v-if="(currentMode == 'pkMode' && 1 === currentModeIndex)||currentMode== 'calorieMode'"
  136. class="qiun-charts-arcbar">
  137. <!-- 进度条 -->
  138. <canvas canvas-id="canvasArcbar" id="canvasArcbar" class="charts-arcbar "></canvas>
  139. <!-- 图标 -->
  140. <view class="personal-fruit-container">
  141. <image style="width: 36rpx;height: 56rpx; margin-top: -120px;"
  142. src="../../../static/modal/action-jump/arcbarJumpIcon.png"></image>
  143. </view>
  144. <!-- 图标 -->
  145. <view class="personal-fruit-container">
  146. <view class="text-13px text-white" style="margin-top: -50px;">
  147. 失误:{{actionJumpFaultCount}}</view>
  148. </view>
  149. <!-- 水果卡路里-->
  150. <!-- <view class="personal-fruit-container">
  151. <fruit ref="personalFruitRef" :calorie="planData.allCalorie"></fruit>
  152. </view> -->
  153. <!-- 计划运动时间提示 -->
  154. <view class="personal-fruit-container">
  155. <LEDFont style="margin-top: 40px;" :showValue='actionJumpAllCount' :size="60"
  156. color='#FFFFFF'>
  157. </LEDFont>
  158. <!-- <view style="margin-top: 130px;font-size:12px;color: #FFFFFF;">计划时间{{planData.sportTime}}分钟</view> -->
  159. </view>
  160. <!-- 计划按钮 -->
  161. <!-- <view id="projectButtonView" style="position: absolute;left: 0;top: 18px;">
  162. <view class="flex justify-center" style="width: 100%;">
  163. <view class="charts-pring-button make-line-bPurple " :class="bPlanExpired?'breathing-lamp':''" style="background-color: #FFFFFF;"
  164. @tap="openPlan">
  165. <image src="/static/reform.png" class="p-data-png" mode="aspectFit"></image>
  166. <view class="text-11px">改计划</view>
  167. </view>
  168. </view>
  169. </view> -->
  170. <!-- 计时器 -->
  171. <view class="personal-fruit-container">
  172. <arcbarCountDown
  173. style="margin-top: 150px; border: 1rpx solid rgba(255,255,255,0.33); padding: 0 10px; border-radius: 40rpx;"
  174. ref="arcbarCountDownRef" :show-day="false" :second="actionJumpCountDown"
  175. color="#FFFFFF" background-color="rgba(255,255,255,0);" border-color="#007AFF"
  176. :size="18" splitorColor="#FFFFFF" />
  177. </view>
  178. <!-- 卡路里提示 -->
  179. <!-- <view class="personal-fruit-container">
  180. <prompt-box :calorie="planData.allCalorie"></prompt-box>
  181. </view> -->
  182. </view>
  183. <!-- 钻石和金币部分 -->
  184. <!-- <view class="charts-pring-bottom" style="margin-top: 34rpx;">
  185. <view class="flex justify-center align-center"
  186. style="height: 52rpx; width: 412rpx; background-color: rgba(255,255,255,0.11); border-radius: 12rpx;">
  187. <view class=" flex align-center justify-center" style="color: #fff;">
  188. <view class="flex align-center">
  189. <image class="png-more" style="margin-right: 18rpx;"
  190. src="/static/personal/cDiamond.png"></image>
  191. <view>{{cDiamond}}</view>
  192. </view>
  193. <view class="flex align-center" style="margin-left: 60rpx;">
  194. <image class="png-more" style="margin-right: 18rpx;"
  195. src="/static/personal/cGold.png"></image>
  196. <view>{{cGold}}</view>
  197. </view>
  198. </view>
  199. </view>
  200. </view> -->
  201. <!-- 用于定位 -->
  202. <!-- <view id="boxingHitID" style="position: absolute;top: 180rpx; pointer-events: none;" ></view> -->
  203. <view id="boxingHitID" v-if="currentModeIndex == 0" class="charts-pring-bottom">
  204. <!-- 添加一个 ConnectBindingDevice 测试 -->
  205. <boxing-hit ref="boxingPostRef"
  206. :bUpdate="!bHide&&(ConnectBindingDevice!=null)||(cIndex!=-1 && BLEConnectDevice!=null &&
  207. (BLEConnectDevice.deviceType == 'mySelf'||BLEConnectDevice.deviceType == 'BLEHandle' || BLEConnectDevice.deviceType == 'BLERope' ))"
  208. :showTime="localSportTime"
  209. :bRebound="BLEConnectDevice&&BLEConnectDevice.limitType == 'rebound'"
  210. @updateCalorie="boxingUpdateCalorie" @boxingPostCheck="onPersonalCheck"
  211. @shake="onScreenShake" @updateSportTime="onUpdateSportTime"
  212. @boxingGuideFinish="onBoxingGuideFinish"
  213. @boxingPostControlPlay="onBoxingPostControlPlay" @modeEvent="onModeEvent"
  214. @hitEvent="onHitEvent" @aiHitEvent="onAiHitEvent" @gameOver="onBoxingGameOver"
  215. @closeBoxingControl="onCloseBoxingHit"></boxing-hit>
  216. </view>
  217. <view id='actionJumpID' v-if="true" class="charts-pring-bottom">
  218. <action-jump ref="actionJumpRef" @actionJumpCheck="onPersonalCheck"
  219. @actionJumpControllerPlay="onBoxingPostControlPlay"
  220. @actionJumpDataUpdate="onActionJumpDataUpdate"
  221. @actionJumpCountDownUpdate="onActionJumpCountDownUpdate"></action-jump>
  222. </view>
  223. <!-- <button @tap="onTestAddLocalCalorie">11</button> -->
  224. </view>
  225. </scroll-view>
  226. <!-- <view class="margin flex flex-direction">
  227. <view class="title">当前游戏链接:{{LocationGameUrl}}</view>
  228. <input style="border: 1rpx solid #000000;margin: 10rpx;" @input="onKeyInput" placeholder="输入同步到view中" />
  229. </view> -->
  230. <!-- <button @tap="onShowBoxingHitTip">11</button> -->
  231. </view>
  232. </view>
  233. <modal-mask></modal-mask>
  234. <view class="example">
  235. <view class="example-title">从左侧滑出</view>
  236. <button @click="showDrawer">显示抽屉</button>
  237. </view>
  238. <view class="example">
  239. <view class="example-title">从上侧竖向滑出</view>
  240. <button @click="showPopup">显示 弹出层</button>
  241. </view>
  242. <view style="height: 100rpx;"></view>
  243. </scroll-view>
  244. <!-- 底部中间上滑按钮 -->
  245. <view class="flex flex-direction justify-center align-center task-up-button">
  246. <image style="width: 156rpx; height: 32rpx;" src="../../../static/personal/slideUp.png" @tap="showModal"
  247. data-target="slideUpModal"></image>
  248. <view style="width: 100%;,height: 36rpx; background-color: #FFFFFF; color: #FFFFFF;">|</view>
  249. </view>
  250. <!-- 右下角导航栏 -->
  251. <round-fab :connect="cIndex!=-1 && BLEConnectDevice!=null" @fabClick="fabClick"></round-fab>
  252. <!-- 底部操作条 -->
  253. <!-- <myTabbar style="position:fixed;bottom:0;width:100%;left:0;right:0;" ></myTabbar> -->
  254. <!-- 侧边栏 -->
  255. <sideBar ref="sideBar"></sideBar>
  256. <!-- 训练卡 -->
  257. <view class="cu-modal" :class="modalName == 'sportCompletion' ? 'show' : ''">
  258. <view style="
  259. position: relative;
  260. width: 586rpx;
  261. height: 766rpx;
  262. background-color: #FFFFFF;
  263. border-radius: 25px;
  264. display: inline-block;
  265. vertical-align: middle;
  266. margin-left: auto;
  267. margin-right: auto;
  268. overflow: hidden;">
  269. <view style="position: relative; width: 100%; height: 328rpx;">
  270. <image style="position: absolute;top: 0;left: 0; width: 100%;height: 100%;"
  271. src="../../../static/sidebar_top_bg.png"></image>
  272. <view class="flex flex-direction justify-around align-center"
  273. style="position: relative; height: 100%;">
  274. <view class="text-white">已在哔嘣健身训练了</view>
  275. <view class="text-white"><span style="font-size: 43px;">{{sportData.time}}</span> 分钟</view>
  276. <view class="text-white">本次达标率{{sportData.percent}}%</view>
  277. </view>
  278. </view>
  279. <view class="flex justify-around">
  280. <view class="flex flex-direction justify-around align-center"
  281. style="position: relative; height: 162rpx;">
  282. <view class="text-grey">消耗</view>
  283. <view class="text-grey"><span
  284. style="font-size: 18px; color: #000000;">{{sportData.calorie}}</span> 卡</view>
  285. </view>
  286. <view class="flex flex-direction justify-around align-center"
  287. style="position: relative; height: 162rpx;">
  288. <view class="text-grey">踩中</view>
  289. <view class="text-grey"><span style="font-size: 18px; color: #000000;">{{sportData.hit}}</span>
  290. 次</view>
  291. </view>
  292. <view class="flex flex-direction justify-around align-center"
  293. style="position: relative; height: 162rpx;">
  294. <view class="text-grey">失误</view>
  295. <view class="text-grey"><span style="font-size: 18px; color: #000000;">{{sportData.miss}}</span>
  296. 次</view>
  297. </view>
  298. </view>
  299. <view class="flex flex-direction justify-around align-center margin-top-sm">
  300. <view style="position: relative; width: 500rpx; border:1rpx solid #EEEEEE ;"></view>
  301. </view>
  302. <view class="flex flex-direction justify-around align-center" style="height: 230rpx;">
  303. <view class="text-black text-16px">非常优秀,继续加油!</view>
  304. <view class="flex justify-center align-center text-white make-bg-bPurple round text-16px"
  305. style="width: 300rpx;height: 80rpx;" @tap="hideModal">确定</view>
  306. </view>
  307. </view>
  308. </view>
  309. <!-- :class="modalName == 'jumpAnimation' ? 'show' : ''" -->
  310. <view class="cu-modal " :class="modalName == 'jumpAnimation' ? '' : ''">
  311. <view style="
  312. position: relative;
  313. width: 586rpx;
  314. height: 400rpx;
  315. background-color: #FFFFFF;
  316. border-radius: 4px;
  317. display: inline-block;
  318. vertical-align: middle;
  319. margin-left: auto;
  320. margin-right: auto;
  321. overflow: hidden;">
  322. <view style="height: 100%;display: flex;justify-content: center;align-items: center;">
  323. <character></character>
  324. </view>
  325. </view>
  326. </view>
  327. <!-- 引导蒙层 bGuidePages guideCurrent-->
  328. <code-elf-guide ref="codeElfGuide" v-if="bGuidePages" @hide="guideHide" @change="onGuideChange"
  329. :current="guideCurrent" :currentMode="currentMode"></code-elf-guide>
  330. <!-- <view v-if="bStartBoxingPost" class="CountDownMask">
  331. {{BoxingPostCountDownText}}
  332. </view> -->
  333. <view class="cu-modal " :class="modalName=='showPlanTipModal'?'show':''"
  334. @touchmove.stop.prevent="moveBoxingHandle">
  335. <view class="cu-bind-modal">
  336. <view style="position: absolute; top: 0; left: 0; width: 100%; height:100%;">
  337. <image style="position: absolute;top: 0;left: 0; width: 100%;height: 100%;"
  338. src="/static/modelBg.png"></image>
  339. </view>
  340. <view class="flex flex-direction justify-between " style="position: relative; height: 100%;">
  341. <view class="flex justify-around justify-center align-center" style="margin: 170rpx 30rpx 0 30rpx;">
  342. <view style="width: 80rpx;height: 2rpx;border-radius: 2px; background-color: #cbcdcf;"></view>
  343. <view class="make-text-bPurple" style=" font-size: 20px;">提示</view>
  344. <view style="width: 80rpx;height: 2rpx;border-radius: 2px;background-color: #cbcdcf;"></view>
  345. </view>
  346. <view class="text-16px" style="align-self: center; max-width: 200px; word-break: break-all;">
  347. {{planTip[planTipIndex]}}
  348. </view>
  349. <view class="flex justify-around align-center"
  350. style=" border-top: 1rpx solid #EEEEEE; margin-bottom: 2px;">
  351. <view class="flex justify-center align-center text-16px" style="width: 100%;height: 123rpx;"
  352. @tap="hidePlanTipModal">取消</view>
  353. <view style="height: 123rpx;width: 1px;background-color: #EEEEEE;"></view>
  354. <view class="flex justify-center align-center text-16px" style="width: 100%;height: 123rpx;"
  355. @tap="confirmPlanTipModal">确定</view>
  356. </view>
  357. </view>
  358. </view>
  359. </view>
  360. <ModalTip ref='modalTipRef' :class="modalName=='showModalTip'?' show':''" @hide="onModalTipHide"
  361. @confirm="onModalTipConfirm"></ModalTip>
  362. <!-- 任务栏 -->
  363. <view class="cu-modal bottom-modal" :class="modalName=='slideUpModal'?'show':''" @tap="hideModal">
  364. <view class="cu-dialog bg-white" style="border-radius: 15px 15px 0 0 ;" @tap.stop="">
  365. <view class="flex justify-center align-center" style="width: 100%; height: 60rpx;" @tap="hideModal">
  366. <view class="text-blue make-bg-bPurple radius" style="width: 80rpx; height: 4px;"></view>
  367. </view>
  368. <view class="flex justify-between" style="width: 100%; padding: 34rpx 60rpx 46rpx 81rpx;">
  369. <view class="flex align-center justify-center">
  370. <view class="text-16px text-bold make-text-bPurple"
  371. style="line-height: 32rpx; margin-right: 18rpx;">PK模式</view>
  372. <image style="width: 42rpx;height: 24rpx;" src="/static/common/modal/right-arrow.png"></image>
  373. </view>
  374. <view>
  375. <button class="make-bg-bPurple flex justify-center align-center">
  376. <view class="flex align-center justify-center" style="width: 190rpx;height: 60rpx;">
  377. <image style="width: 24rpx;height: 22rpx; margin-right: 18rpx;"
  378. src="/static/personal/switchWhite.png"></image>
  379. <view class="text-14px text-white" style="line-height: 28rpx;">健身模式</view>
  380. </view>
  381. </button>
  382. </view>
  383. </view>
  384. <scroll-view scroll-y="true" style="height: 800rpx; max-height: 800rpx;min-height: 460rpx;"
  385. :style="{ height: modalHeight + 'px' }" :scroll-into-view="taskIntoView"
  386. :scroll-top="taskScrollTop">
  387. <view class="my-column-cu-steps">
  388. <view class="cu-item" :class="index>basics?'':'make-text-bPurple'"
  389. v-for="(item,index) in basicsList" :key="index" :id='"task_"+index'
  390. @click="selectTask(index,item)">
  391. <image v-if="index>basics" class="my-column-cu-image"
  392. src="../../../static/common/modal/lock.png"></image>
  393. <image v-else class="my-column-cu-image" src="../../../static/common/modal/unLock.png">
  394. </image>
  395. <view class="content">
  396. <!-- 这是第一次,我家的铲屎官走了这么久。久到足足有三天!! -->
  397. <view class="text-15px text-bold text-cut text-left "
  398. style="margin-left: 48rpx; width: 360rpx;">
  399. {{index+1}}. 拉伸运动拉伸运动拉伸运动拉伸运动
  400. </view>
  401. <view class="flex justify-start align-center" style="margin-left: 86rpx;">
  402. <!-- 居中绘制星星样式 -->
  403. <view class="flex align-center justify-center"
  404. style="margin-right: 36rpx;margin-top: 4rpx;">
  405. <image style="width: 24rpx;height: 26rpx; margin-right: 18rpx;"
  406. src="/static/common/modal/reward.png"></image>
  407. <view class="text-13px" style="line-height: 26rpx;">{{cDiamond}}</view>
  408. </view>
  409. <view class="flex flex-direction align-center" v-for="(item, index) in 5"
  410. :key="index">
  411. <image style="width: 34rpx;height: 32rpx;"
  412. src="../../../static/modal/action-jump/stars.png">
  413. </image>
  414. </view>
  415. </view>
  416. <view class="text-13px text-grey text-left" style="margin: 20rpx 20rpx 0 86rpx;">
  417. 本关卡是为了让用户开始放松,需要在两分钟内跳100下</view>
  418. </view>
  419. <image class="my-column-cu-right-image" src="../../../static/common/modal/medal.png">
  420. </image>
  421. </view>
  422. </view>
  423. </scroll-view>
  424. <button class="cu-btn make-bg-bPurple text-white margin-top margin-bottom"
  425. style="width: 604rpx;height: 88rpx;" @tap="BasicsSteps">开始</button>
  426. </view>
  427. </view>
  428. </view>
  429. </template>
  430. <script>
  431. // import uniNavBar from '@/components/uni-nav-bar/uni-nav-bar.vue';
  432. import uCharts from '@/components/u-charts/u-charts.js';
  433. import myPicker from '@/components/slambb-picker/slambb-picker.vue';
  434. import pickerData from '@/components/slambb-picker/picker.js';
  435. import date from '@/util/util-js/date.js';
  436. import sideBar from '@/components/side-bar/side-bar.vue';
  437. import reqUtil from '@/util/util-js/requstUtil.js';
  438. import config from '@/common/config.js';
  439. import uniCountDown from '@/components/uni-count-down/uni-count-down.vue'
  440. import character from "@/components/electAni/character.vue"
  441. import fruit from "@/components/fruitMachine/fruitMachine.vue"
  442. import promptBox from "@/components/prompt-box/prompt-box.vue"
  443. import roundFab from "@/components/round-fab/round-fab.vue"
  444. import myTabbar from "@/components/hans-tabbar/hans-tabbar.vue"
  445. import codeElfGuide from '@/components/code-elf-guide/code-elf-guide.vue'
  446. import boxingPost from "@/components/modal/boxing-post/boxing-post.vue"
  447. import boxingHit from "@/components/modal/boxing-hit/boxing-hit.vue"
  448. import actionJump from "@/components/modal/action-jump/action-jump.vue"
  449. import AccAndOri from "@/util/util-js/AccAndOri.js"
  450. import AvatarConfig from "@/util/util-js/avatar.js"
  451. import HitEffect from "@/components/effectHit/hitEffect.vue"
  452. import HitFistEffect from "@/components/effectHit/hitFistEffect.vue"
  453. import ModalTip from "@/components/modal-tip/modalTip.vue"
  454. import keyboardListener from '@/components/keyboard-listener/keyboard-listener.vue'
  455. import LEDFont from '@/components/LEDFont/LEDFont.vue'
  456. import arcbarCountDown from '@/components/uni-count-down/uni-count-down.vue'
  457. import modalMask from '@/components/modal-mask/modal-mask.vue'
  458. // 获取 module
  459. // var testModule = uni.requireNativePlugin("MyAttitude")
  460. // const modal = uni.requireNativePlugin('modal');
  461. import {
  462. mapState,
  463. mapMutations
  464. } from 'vuex';
  465. var _self;
  466. var canvaArcbar1;
  467. export default {
  468. computed: mapState(['bCanvasShow', 'forcedLogin', 'hasLogin', 'userName', 'avatarUrl', 'days', 'remainingDays',
  469. 'signature', 'weight', 'height', 'planData', 'BLEDeviceShowList', 'BLEConnectDevice', 'bPlanExpired',
  470. 'bPlanFinish',
  471. 'bGuidePages',
  472. 'globalAcc', 'globalOri', 'DeviceBindingList', 'ConnectBindingDevice', 'cIndex', 'bNewGuide',
  473. 'localSportTime',
  474. 'currentModeIndex', 'oldArcbarProCalorie', 'oldArcbarAllCalorie', 'bOpenBluetooth', 'bOpenSuccess',
  475. 'bListenAdapterStateChange', 'bConnection', 'bVerifiedConnection', 'currentInstruction',
  476. 'instructionState',
  477. 'LocationGameUrl',
  478. 'bPhoneMatched',
  479. 'versionCodeState',
  480. 'platform',
  481. 'systemInfo', 'navHeight', 'tabbarHeight',
  482. 'cDiamond', 'cGold',
  483. 'finallySelectFriendInfo',
  484. 'currentJumpTask'
  485. ]),
  486. components: {
  487. // uniNavBar,
  488. myPicker,
  489. sideBar,
  490. uniCountDown,
  491. character,
  492. fruit,
  493. roundFab,
  494. myTabbar,
  495. codeElfGuide,
  496. boxingPost,
  497. boxingHit,
  498. promptBox,
  499. HitEffect,
  500. HitFistEffect,
  501. ModalTip,
  502. keyboardListener,
  503. actionJump,
  504. LEDFont,
  505. arcbarCountDown,
  506. modalMask
  507. },
  508. data() {
  509. return {
  510. title: 'pk模式', //pk模式 健身模式
  511. modalName: null,
  512. originalDate: '', //记录new date
  513. currentDate: '', //当前日期
  514. cWidthArcbar: '', //圆弧进度图
  515. cHeightArcbar: '', //圆弧进度图
  516. arcbarWidth: '', //圆弧进度图,进度条宽度,此设置可使各端宽度一致
  517. pixelRatio: 1,
  518. // textarea: '',
  519. // arcbarImagePath: '/static/logo.png',
  520. // cWidth: '',
  521. // cHeight: '',
  522. scrollviewHight: '',
  523. // 顶部区域部分
  524. topScrollHight: '',
  525. // 选择器
  526. pickerObj: {},
  527. // lineAImagePath: '/static/logo.png',
  528. // visible: true,
  529. // indicatorStyle: `height: ${Math.round(uni.getSystemInfoSync().screenWidth / (750 / 100))}px;`,
  530. //设备列表
  531. deviceList: [{
  532. name: '蹦床',
  533. icon: '/static/trampoline.png'
  534. }],
  535. cState: 1,
  536. //游戏列表
  537. gameList: [],
  538. //视频列表,现在视频是和游戏一起管理
  539. videoList: [],
  540. //运动数据
  541. sportData: {
  542. calorie: 0,
  543. hit: 0,
  544. miss: 0,
  545. percent: 0,
  546. time: 0,
  547. allData: 0
  548. },
  549. //设置滚动栏高度
  550. scrollTop: 0,
  551. //scroll view 跳转到对应的组件上
  552. toView: '',
  553. guideCurrent: 0,
  554. bHide: false,
  555. //屏幕抖动
  556. bEFHitShake: false,
  557. bStartBoxingPost: false,
  558. BoxingPostCountDownText: 3,
  559. b_countDown: null,
  560. countDownUrl: [
  561. "/static/personal/audio/GO.mp3",
  562. "/static/personal/audio/1.mp3",
  563. "/static/personal/audio/2.mp3",
  564. "/static/personal/audio/3.mp3"
  565. ],
  566. threeUrl: "/static/personal/audio/3.mp3",
  567. twoUrl: "/static/personal/audio/2.mp3",
  568. oneUrl: "/static/personal/audio/1.mp3",
  569. goUrl: "/static/personal/audio/GO.mp3",
  570. dangdang: "/static/personal/audio/dangdang.mp3",
  571. personalAudioContext: null,
  572. planTip: [
  573. '您今天的目标已经达成,是否进行自由训练.',
  574. '您今天的目标还没完成,是否结束训练.'
  575. ],
  576. planTipIndex: 0,
  577. //匹配的ai信息
  578. aiObj: {
  579. name: '匿名',
  580. avatar: '/static/defaultAvatar.png'
  581. },
  582. aiOldObj: {
  583. name: '匿名',
  584. avatar: '/static/defaultAvatar.png'
  585. },
  586. currentMode: 'pkMode', //pkMode calorieMode
  587. bHitShake: false,
  588. bAiHitShake: false,
  589. //限制重连,比如去了对应硬件连接页面,限制这个页面的重连操作
  590. bLimitReconnection: false,
  591. /**
  592. * 首页这里连接了蓝牙,然后选择框回来后show会触发,触发时候检测一下是否有对应的
  593. * 匹配蓝牙
  594. */
  595. bGetBondTesting: false,
  596. basicsList: [{
  597. cuIcon: 'usefullfill',
  598. name: '开始',
  599. bLock: false,
  600. }, {
  601. cuIcon: 'radioboxfill',
  602. name: '等待',
  603. bLock: true,
  604. },
  605. {
  606. cuIcon: 'roundclosefill',
  607. name: '错误'
  608. }, {
  609. cuIcon: 'roundcheckfill',
  610. name: '完成'
  611. },
  612. {
  613. cuIcon: 'roundcheckfill',
  614. name: '完成'
  615. },
  616. {
  617. cuIcon: 'roundcheckfill',
  618. name: '完成'
  619. },
  620. ],
  621. basics: 3,
  622. currentTask: null, //当前选择的任务
  623. taskIntoView: '',
  624. taskScrollTop: 0,
  625. /**
  626. * actionJump 模块对应的交互参数
  627. */
  628. actionJumpAllCount: 0,
  629. actionJumpFaultCount: 0,
  630. actionJumpCountDown: 0,
  631. myAcionJumpScore: 1000,
  632. otherActionJumpScore: 80,
  633. /**
  634. * 任务参数
  635. */
  636. modalHeight: 300,
  637. };
  638. },
  639. onLoad() {
  640. //设置self
  641. _self = this;
  642. // 圆形进度条样式
  643. this.cWidthArcbar = uni.upx2px(415); //这里要与样式的宽高对应
  644. this.cHeightArcbar = uni.upx2px(440); //这里要与样式的宽高对应
  645. this.arcbarWidth = uni.upx2px(14);
  646. // 体重数据样式
  647. // this.cWidth = uni.upx2px(750);
  648. // this.cHeight = uni.upx2px(300);
  649. // #ifdef APP-PLUS || H5
  650. //监听
  651. uni.$on('updateArcbarData', this.updateArcbarData);
  652. // #endif
  653. //监听
  654. uni.$on('callbackCloseBLE', this.callbackCloseBLE);
  655. // uni.$on('callbackBLEState', this.callbackBLEState);
  656. //获得游戏列表
  657. reqUtil
  658. .requestData(config.URL.GAMERECOMMENDBYPLATFORM, {
  659. recommendType: 2,
  660. endTime: config.endTime
  661. })
  662. .then(
  663. res => {
  664. // console.log('GAMERECOMMEND =====', res);
  665. if (res.code == 0) {
  666. if (res.data.gameList.length > 3) {
  667. this.gameList = this.gameList.concat(res.data.gameList.slice(0, 3));
  668. } else {
  669. this.gameList = this.gameList.concat(res.data.gameList);
  670. }
  671. }
  672. },
  673. e => {
  674. console.log(e);
  675. }
  676. );
  677. //获得视频列表
  678. reqUtil
  679. .requestData(config.URL.GAMERECOMMENDBYPLATFORM, {
  680. recommendType: 1,
  681. endTime: config.endTime
  682. })
  683. .then(
  684. res => {
  685. if (res.code == 0) {
  686. if (res.data.gameList.length > 3) {
  687. this.videoList = this.videoList.concat(res.data.gameList.slice(0, 3));
  688. } else {
  689. this.videoList = this.videoList.concat(res.data.gameList);
  690. }
  691. }
  692. },
  693. e => {
  694. console.log(e);
  695. }
  696. );
  697. //初始化后设置一下pickerObj
  698. this.pickerObj = {
  699. pickerLeftList: pickerData.getWeightList().leftList,
  700. pickerRightList: pickerData.getWeightList().rightList,
  701. pickerType: 'doubleItem',
  702. pickerUnit: '公斤',
  703. pickerTitle: '记体重',
  704. defaultValue: this.weight,
  705. showInput: true,
  706. };
  707. this.getPlanData(function() {
  708. // 如果个人页面直接获取数据
  709. _self.showArcbar();
  710. });
  711. this.personalAudioContext = uni.createInnerAudioContext();
  712. this.personalAudioContext.autoplay = false;
  713. this.personalAudioContext.src = this.dangdang;
  714. this.personalAudioContext.volume = 1;
  715. //获取本地记录的运动时间
  716. uni.getStorage({
  717. key: 'localSportTime',
  718. success: function(res) {
  719. // console.log("本地的时间:",res.data);
  720. _self.$store.state.localSportTime = res.data;
  721. }
  722. });
  723. //获取设备信息,上报服务器
  724. this.gOnAddClientInfo();
  725. // 接收 popup 的消息
  726. uni.$on('popup-page', (data) => {
  727. switch (data.type) {
  728. case 'interactive':
  729. uni.showModal({
  730. title: '来自Popup的消息',
  731. content: data.info
  732. })
  733. break;
  734. default:
  735. uni.showToast({
  736. title: data.title,
  737. })
  738. break;
  739. }
  740. })
  741. // 监听 drawer 消息
  742. uni.$on('drawer-page', (data) => {
  743. uni.showToast({
  744. title: '点击了第' + data + '项',
  745. icon: "none"
  746. });
  747. })
  748. /**
  749. * 更新任务滚动位置
  750. */
  751. this.updateTaskScroll();
  752. },
  753. onShow() {
  754. _self.bHide = false;
  755. if (canvaArcbar1)
  756. _self.updateArcbarData();
  757. //this.bConnection &&
  758. if (this.bVerifiedConnection && this.BLEConnectDevice) {
  759. this.updateBLECIndex();
  760. // setTimeout(() => {
  761. // /**
  762. // * 如果是首页连接,则检测
  763. // */
  764. // if (this.bGetBondTesting) {
  765. // this.onGetBondDevice();
  766. // this.bGetBondTesting = false;
  767. // }
  768. // }, 5000)
  769. }
  770. //如果是测试数据
  771. if (this.ConnectBindingDevice) {
  772. if (this.$refs.boxingPostRef) {
  773. this.$refs.boxingPostRef.onSetMode('pkMode');
  774. } else {
  775. setTimeout(() => {
  776. this.$refs.boxingPostRef.onSetMode('pkMode');
  777. }, 500)
  778. }
  779. }
  780. console.log('personal show');
  781. this.bLimitReconnection = false;
  782. //测试环境检测,给个modal提示 active
  783. // if (config.active == 'dev') {
  784. // function thanDate(date2) {
  785. // var oDate1 = new Date();
  786. // console.log("检测日期", oDate1);
  787. // var oDate2 = new Date(date2);
  788. // if (oDate1.getTime() > oDate2.getTime()) {
  789. // return true;
  790. // } else {
  791. // return false;
  792. // }
  793. // }
  794. // if (thanDate('2021-05-31 13:10:36')) {
  795. // uni.showModal({
  796. // title: "提示",
  797. // content: "此版本为测试版本,有需要请和开发者联系。微信 sweetdontcry"
  798. // })
  799. // }
  800. // }
  801. },
  802. onReady() {
  803. // 计算屏幕剩余高度 填补剩余高度
  804. let phoneHeight = this.systemInfo.windowHeight;
  805. console.log('计算屏幕剩余高度 ===:', phoneHeight);
  806. // 计算组件的高度
  807. _self.scrollviewHight = phoneHeight - this.navHeight - this.tabbarHeight - 16;
  808. // let view = uni.createSelectorQuery().select('#nav-bar');
  809. // view.boundingClientRect(data => {
  810. // // console.log('data===:', data);
  811. // if (data != null) {
  812. // _self.navHeight = data.height;
  813. // _self.scrollviewHight = _self.phoneHeight - _self.navHeight;
  814. // _self.topScrollHight = _self.phoneHeight - _self.navHeight - 30;
  815. // }
  816. // }).exec();
  817. },
  818. onUnload() {
  819. console.log("personal ********* onUnload *********");
  820. // #ifndef APP-PLUS||H5
  821. //监听
  822. console.log('移除监听');
  823. uni.$off('updateArcbarData', this.updateArcbarData);
  824. // #endif
  825. //*****注释蓝牙操作******
  826. uni.$off('callbackCloseBLE', this.callbackCloseBLE);
  827. // uni.$off('callbackBLEState', this.callbackBLEState);
  828. uni.$off('updateBLEDeviceData', this.callbackUpdateBLEData);
  829. //unload 时候清除timeout
  830. this.onUnloadCreateBLEConnectionTimeout();
  831. uni.$off('popup-page')
  832. uni.$off('drawer-page')
  833. },
  834. onHide() {
  835. _self.bHide = true;
  836. console.log("personal ******* onHide *******");
  837. //时间暂停 ,隐藏了 需要判断是否为空
  838. if (_self.$refs.countDownObj)
  839. _self.$refs.countDownObj.timePause('pause');
  840. //心电图暂停
  841. if (_self.$refs.electRef)
  842. _self.$refs.electRef.pausedElect(true);
  843. },
  844. methods: {
  845. ...mapMutations(['accountLogin', 'getPlanData', 'addlocalCalorie', 'setLocalCalorie', 'setShowCalorie',
  846. 'syncLocalDataToServer', 'syncRequestEvent', 'setLocalSportTime',
  847. 'initAdapter', 'onCreateBLEConnection', 'onUnloadCreateBLEConnectionTimeout', 'onCloseBLEConnection',
  848. 'gOnAddClientInfo', 'onWriteBLEConnectionValue',
  849. 'gCreateFilterObj', 'gUpdateFilter', 'B_GetBondedDevices', 'B_OpenBLESetting', 'B_OpenRopeSkipping',
  850. 'B_CloseRopeSkipping',
  851. 'gCreateSandbagAlgorithm', 'gUpdateSandbagAlgorithm', 'gStartSimulateBLEUpdate',
  852. 'gStopSimulateBLEUpdate',
  853. 'getActionJumpTask',
  854. 'setActionJumpTask'
  855. ]),
  856. BasicsSteps() {
  857. this.basics = this.basics == this.basicsList.length - 1 ? 0 : this.basics + 1
  858. },
  859. onKeyDown(e) {
  860. console.log(e);
  861. },
  862. showClickEvent() {
  863. this.$refs.sideBar.showModal();
  864. this.$store.state.bCanvasShow = false;
  865. },
  866. showModal(e) {
  867. this.modalName = e.currentTarget.dataset.target;
  868. this.$store.state.bCanvasShow = false;
  869. if(this.modalName == "slideUpModal"){
  870. this.updateTaskScroll();
  871. }
  872. },
  873. hideModal(e) {
  874. if (this.modalName == "sportCompletion") {
  875. console.log("关闭卡片");
  876. this.sportData = {
  877. calorie: 0,
  878. hit: 0,
  879. miss: 0,
  880. percent: 0,
  881. time: 0,
  882. allData: 0,
  883. }
  884. }
  885. this.modalName = null;
  886. this.$store.state.bCanvasShow = true;
  887. },
  888. onTestAddLocalCalorie() {
  889. let _add = (10 * 1.875) / (4 * 30);
  890. console.log(_add);
  891. this.onUpdateCaloriePlane(10);
  892. },
  893. // 进度条数据
  894. arcbarData(_planData) {
  895. let showCal = 0,
  896. showLCal = 0,
  897. LCalTip = '',
  898. showTip = '';
  899. let series = [{
  900. name: showTip,
  901. data: 0,
  902. color: '#2fc25b'
  903. }];
  904. //这里区分进度条数据
  905. if (0 == this.currentModeIndex) {
  906. showCal = _planData.calorie;
  907. showLCal = _planData.allCalorie;
  908. LCalTip = '大卡';
  909. showTip = '(未达标)';
  910. // 如果运动的卡路里大于目标卡路里,设置为目标卡路里值,即为Max
  911. if (showLCal >= showCal) {
  912. showTip = '(达标)';
  913. }
  914. series = [{
  915. name: showTip,
  916. data: _planData.allCalorie == 0 ? 0 : _planData.allCalorie / showCal,
  917. color: '#2fc25b'
  918. }];
  919. } else if (1 == this.currentModeIndex) {
  920. showCal = _planData.calorie;
  921. showLCal = _planData.allCalorie;
  922. LCalTip = '大卡';
  923. showTip = '(未达标)';
  924. // 如果运动的卡路里大于目标卡路里,设置为目标卡路里值,即为Max
  925. if (showLCal >= showCal) {
  926. showTip = '(达标)';
  927. }
  928. series = [{
  929. name: showTip,
  930. data: this.actionJumpAllCount == 0 ? 0 : this.actionJumpAllCount / 200,
  931. color: '#2fc25b'
  932. }];
  933. console.log(series);
  934. }
  935. return {
  936. showCal,
  937. showLCal,
  938. LCalTip,
  939. showTip,
  940. series
  941. }
  942. },
  943. // 圆形进度条
  944. showArcbar() {
  945. let {
  946. showCal,
  947. showLCal,
  948. LCalTip,
  949. series
  950. } = this.arcbarData(_self.planData);
  951. // console.log("series==", series[0]);
  952. canvaArcbar1 = new uCharts({
  953. $this: _self,
  954. canvasId: 'canvasArcbar',
  955. type: 'myGradualChangeArcbar',
  956. fontSize: 11,
  957. legend: {
  958. show: false
  959. },
  960. background: '#FFFFFF',
  961. pixelRatio: 1,
  962. series: series,
  963. animation: false,
  964. width: _self.cWidthArcbar,
  965. height: _self.cHeightArcbar,
  966. dataLabel: true,
  967. // Math.round(chartData.series[0].data * 100) + '%'
  968. // title: {
  969. // // arcbarDate: date.formatDate(_self.originalDate),
  970. // name: showLCal,
  971. // molecularUnit: LCalTip, //单位的分子部分
  972. // denominatorUnit: showCal, //单位的分母部分
  973. // unitFontSize: 11, //单位字符大小
  974. // color: 'rgba(255, 255, 255, 1)',
  975. // fontSize: 28,
  976. // offsetX: -30,
  977. // offsetY: 10
  978. // },
  979. // subtitle: {
  980. // name: series[0].name,
  981. // color: 'rgba(255, 255, 255, 1)',
  982. // fontSize: 13,
  983. // offsetY: -75
  984. // },
  985. extra: {
  986. arcbar: {
  987. type: 'default',
  988. backgroundColor: 'rgba(234, 234, 255, 1)',
  989. backgroundEndColor: 'rgba(234, 234, 255, 1)',
  990. backgroundMiddle: '#9291FF', //'rgba(158, 158, 255, 1)',
  991. width: _self.arcbarWidth, //圆弧的宽度
  992. lineColor: '#51EDFE',
  993. lineEndColor: '#F7C75D'
  994. }
  995. }
  996. });
  997. // 更新位置同步
  998. this.syncLocalDataToServer((res) => {
  999. this.originalDate = res.newDate;
  1000. this.currentDate = date.formatTime(res.newDate);
  1001. this.updateArcbarData();
  1002. });
  1003. },
  1004. updateArcbarData(data) {
  1005. // if (data == "plan") {
  1006. // // 加入设置的卡路里小于本地,则更新本地最小值
  1007. // _self.addlocalCalorie(0);
  1008. // console.log("**************updateArcbarData");
  1009. // // 如果是计划设置好后
  1010. // // this.$store.state.bPlanFinish = true;
  1011. // // setTimeout(() => {
  1012. // // this.$store.state.bPlanFinish = false;
  1013. // // }, 10000)
  1014. // }
  1015. // console.log("updateArcbarData:",this.planData);
  1016. let {
  1017. showCal,
  1018. showLCal,
  1019. LCalTip,
  1020. series
  1021. } = _self.arcbarData(_self.planData);
  1022. if (showCal == _self.oldArcbarProCalorie && showLCal == _self.oldArcbarAllCalorie) {
  1023. // console.log("没有改变值,不刷新表盘:", showCal, _self.oldArcbarProCalorie, showLCal, _self.oldArcbarAllCalorie);
  1024. return;
  1025. }
  1026. //这个是显示当前的总卡路里
  1027. _self.$store.state.oldArcbarAllCalorie = showLCal;
  1028. //这个是计划的卡路里
  1029. _self.$store.state.oldArcbarProCalorie = showCal;
  1030. canvaArcbar1.updateData({
  1031. series: series,
  1032. // title: {
  1033. // //这里的文案是自定义的,不写是不变的
  1034. // name: showLCal,
  1035. // molecularUnit: LCalTip, //单位的分子部分
  1036. // denominatorUnit: showCal, //单位的分母部分
  1037. // }
  1038. //,
  1039. // subtitle: {
  1040. // //这里的文案是自定义的,不写是不变的
  1041. // name: series[0].name
  1042. // }
  1043. });
  1044. },
  1045. updateArcbarDataFromActionJump(data) {
  1046. let {
  1047. showCal,
  1048. showLCal,
  1049. LCalTip,
  1050. series
  1051. } = _self.arcbarData(_self.planData);
  1052. canvaArcbar1.updateData({
  1053. series: series
  1054. });
  1055. },
  1056. //没有限制下的更新表盘
  1057. updateNoLimit() {
  1058. let {
  1059. showCal,
  1060. showLCal,
  1061. LCalTip,
  1062. series
  1063. } = _self.arcbarData(_self.planData);
  1064. //这个是显示当前的总卡路里
  1065. _self.$store.state.oldArcbarAllCalorie = showLCal;
  1066. //这个是计划的卡路里
  1067. _self.$store.state.oldArcbarProCalorie = showCal;
  1068. canvaArcbar1.updateData({
  1069. series: series,
  1070. // title: {
  1071. // //这里的文案是自定义的,不写是不变的
  1072. // name: showLCal,
  1073. // molecularUnit: LCalTip, //单位的分子部分
  1074. // denominatorUnit: showCal, //单位的分母部分
  1075. // }
  1076. // ,
  1077. // subtitle: {
  1078. // //这里的文案是自定义的,不写是不变的
  1079. // name: series[0].name
  1080. // }
  1081. });
  1082. },
  1083. // 跳转计划页面
  1084. openPlan(e) {
  1085. // console.log(e);
  1086. uni.navigateTo({
  1087. url: '../plan/plan?newsid=' + 11,
  1088. success: res => {},
  1089. fail: () => {},
  1090. complete: () => {}
  1091. });
  1092. },
  1093. // 跳转转换页面
  1094. onNavConver() {
  1095. uni.reLaunch({
  1096. url: '../../conversion-page/conversion/conversion',
  1097. success: res => {},
  1098. fail: () => {},
  1099. complete: () => {}
  1100. });
  1101. },
  1102. // 跳转我的页面
  1103. onNavMyPage() {
  1104. uni.navigateTo({
  1105. url: '../../my-page/homepage/homepage',
  1106. success: res => {},
  1107. fail: () => {},
  1108. complete: () => {}
  1109. });
  1110. },
  1111. updateBLECIndex() {
  1112. for (let i = 0; i < this.BLEDeviceShowList.length; i++) {
  1113. let eq = this.BLEDeviceShowList[i];
  1114. if ((eq.ename.indexOf("mobilePhoneBandage") > -1 && this.BLEConnectDevice.id == 0) ||
  1115. (eq.ename.indexOf("hotman") > -1 && this.BLEConnectDevice.id == 1) ||
  1116. (eq.ename.indexOf("BLEHandle") > -1 && this.BLEConnectDevice.id == 2) ||
  1117. (eq.ename.indexOf("rope") > -1 && this.BLEConnectDevice.id == 3)) {
  1118. eq.bRatio = true;
  1119. this.$store.state.cIndex = i;
  1120. }
  1121. if (eq.ename.indexOf("hotman") > -1 && this.BLEConnectDevice.id == 1) {
  1122. if (this.$refs.boxingPostRef) {
  1123. this.$refs.boxingPostRef.onSetMode('pkMode');
  1124. } else {
  1125. setTimeout(() => {
  1126. this.$refs.boxingPostRef.onSetMode('pkMode');
  1127. }, 500)
  1128. }
  1129. } else if (eq.ename.indexOf("BLEHandle") > -1 && this.BLEConnectDevice.id == 2) {
  1130. if (this.$refs.boxingPostRef) {
  1131. this.$refs.boxingPostRef.onSetMode('calorieMode');
  1132. } else {
  1133. setTimeout(() => {
  1134. this.$refs.boxingPostRef.onSetMode('calorieMode');
  1135. }, 500)
  1136. }
  1137. } else if (eq.ename.indexOf("rope") > -1 && this.BLEConnectDevice.id == 3) {
  1138. //todo 暂时设置兼容跑步模式
  1139. // if (this.$refs.boxingPostRef) {
  1140. // this.$refs.boxingPostRef.onSetMode('ropeMode');
  1141. // } else {
  1142. // setTimeout(() => {
  1143. // this.$refs.boxingPostRef.onSetMode('ropeMode');
  1144. // }, 500)
  1145. // }
  1146. }
  1147. }
  1148. },
  1149. /**
  1150. * 蓝牙断开连接时候
  1151. */
  1152. callbackCloseBLE() {
  1153. if (0 == this.currentModeIndex) {
  1154. //蓝牙断开连接后,直接关闭
  1155. this.$refs.boxingPostRef.onCloseDevices();
  1156. }
  1157. },
  1158. //蓝牙状态回调
  1159. callbackBLEState(res) {
  1160. console.log("callbackBLEState==", res);
  1161. if (this.cState != res.state) this.cState = res.state;
  1162. },
  1163. //设备回调事件
  1164. callbackUpdateBLEData(data) {
  1165. //如果在监听状态时候隐藏页面,返回
  1166. if (_self.bHide) return;
  1167. // console.log("callbackDeviceState==", data);
  1168. if (this.ConnectBindingDevice) {
  1169. this.gUpdateSandbagAlgorithm({
  1170. data: data,
  1171. callback: (res) => {
  1172. if (res.type == 'hit') {
  1173. this.$refs.boxingPostRef.onBLEHotmanUpdate(res);
  1174. }
  1175. }
  1176. });
  1177. return;
  1178. }
  1179. //连接了手柄模式
  1180. //没有开启指令不刷新
  1181. if (!this.instructionState.bOpen) return;
  1182. if (this.BLEConnectDevice.usageMode == "hotman") {
  1183. this.gUpdateFilter({
  1184. data: data,
  1185. callback: (res) => {
  1186. if (res.type == 'hit') {
  1187. this.$refs.boxingPostRef.onBLEHotmanUpdate(res);
  1188. }
  1189. }
  1190. });
  1191. } else if (this.BLEConnectDevice.usageMode == "general") {
  1192. //这个是普通打击模式
  1193. this.$refs.boxingPostRef.onBLEHandleUpdate(data);
  1194. } else if (this.BLEConnectDevice.usageMode == "ropeSkipping") {
  1195. //跳绳蓝牙反馈
  1196. this.$refs.actionJumpRef.onBLERopeUpdate(data);
  1197. }
  1198. },
  1199. //绑定设备函数
  1200. onBindingDevice(item, index) {
  1201. if (item == null) {
  1202. item = this.DeviceBindingList[0];
  1203. }
  1204. if (this.BLEConnectDevice) {
  1205. uni.showToast({
  1206. icon: "none",
  1207. title: "已连接硬件设备",
  1208. duration: 1000
  1209. })
  1210. return;
  1211. }
  1212. if (this.ConnectBindingDevice) {
  1213. this.$store.state.ConnectBindingDevice = null;
  1214. setTimeout(() => {
  1215. uni.showToast({
  1216. icon: "none",
  1217. title: "断开连接",
  1218. duration: 1000
  1219. })
  1220. }, 300)
  1221. } else {
  1222. this.$store.state.ConnectBindingDevice = item;
  1223. setTimeout(() => {
  1224. uni.showToast({
  1225. icon: "none",
  1226. title: "已连接",
  1227. duration: 1000
  1228. })
  1229. }, 300)
  1230. //连接后保存最近连接的设备
  1231. }
  1232. //刷新状态
  1233. this.$refs.boxingPostRef.onSetMode('pkMode');
  1234. },
  1235. //关闭设备函数
  1236. onCloseBindingDevice(item, e) {
  1237. if (e.currentTarget.dataset.index == this.cIndex) {
  1238. uni.showModal({
  1239. title: '设备状态',
  1240. content: '是否断开连接',
  1241. ConfirmColor: '#A488DC',
  1242. success: res => {
  1243. if (res.confirm) {
  1244. this.$store.state.cIndex = -1;
  1245. this.$store.state.ConnectBindingDevice = null;
  1246. }
  1247. }
  1248. });
  1249. }
  1250. },
  1251. onNavBindingDevice() {
  1252. this.toView = "addDeviceView";
  1253. },
  1254. onDevice(item, e) {
  1255. if (this.ConnectBindingDevice) {
  1256. uni.showToast({
  1257. title: '当前已开启数据',
  1258. icon: 'none',
  1259. mask: true
  1260. })
  1261. return;
  1262. }
  1263. if (this.cIndex !== -1) {
  1264. uni.showToast({
  1265. title: '当前已连接设备',
  1266. icon: 'none',
  1267. mask: true
  1268. })
  1269. return;
  1270. }
  1271. //连接蓝牙
  1272. this.onCreateBLEConnection({
  1273. item: item,
  1274. index: e.currentTarget.dataset.index,
  1275. initItem: true,
  1276. getinitAdapter: () => {
  1277. this.onDevice(item, e);
  1278. },
  1279. getSuccess: () => {
  1280. if (this.bHide) {
  1281. //弹出框时候,是隐藏状态
  1282. this.bGetBondTesting = true;
  1283. } else {
  1284. //没有弹出框时候,直接检测
  1285. // setTimeout(() => {
  1286. // this.onGetBondDevice();
  1287. // }, 5000)
  1288. }
  1289. //刷新状态
  1290. if (this.cIndex != -1) {
  1291. let eq = this.BLEDeviceShowList[this.cIndex];
  1292. // console.log(eq,this.BLEConnectDevice);
  1293. if (eq.ename.indexOf("hotman") > -1 && this.BLEConnectDevice.id == 1) {
  1294. this.$refs.boxingPostRef.onSetMode('pkMode');
  1295. } else if (eq.ename.indexOf("BLEHandle") > -1 && this.BLEConnectDevice.id == 2) {
  1296. this.$refs.boxingPostRef.onSetMode('calorieMode');
  1297. } else if (eq.ename.indexOf("rope") > -1 && this.BLEConnectDevice.id == 3) {
  1298. // this.$refs.boxingPostRef.onSetMode('ropeMode');
  1299. }
  1300. }
  1301. }
  1302. });
  1303. },
  1304. /**
  1305. * 检测获取匹配的设备
  1306. */
  1307. onGetBondDevice() {
  1308. /**
  1309. * 假如手机没有匹配,断开连接
  1310. */
  1311. console.log("****", this.BLEConnectDevice);
  1312. if (!this.BLEConnectDevice) return;
  1313. this.B_GetBondedDevices({
  1314. deviceId: this.BLEConnectDevice.deviceId,
  1315. success: (bondedDevice) => {
  1316. // console.error("===========", bondedDevice);
  1317. // uni.hideToast();
  1318. if (bondedDevice == null) {
  1319. // if (plus.os.name == 'Android')
  1320. {
  1321. //此问题 华为手机容易出现
  1322. //android手机已配对的设备 不存在,但是app 又直接连接成功了。提示,并且断开app连接
  1323. //1.关闭当前连接
  1324. this.onCloseBLEConnection({
  1325. getSuccess: () => {}
  1326. });
  1327. uni.hideToast();
  1328. //2.跳转蓝牙设置
  1329. uni.showModal({
  1330. title: '蓝牙配对失败',
  1331. content: '请跳转后点击配对BGBox_2020,成功后手动跳转回哔蹦重新连接。',
  1332. success: (res) => {
  1333. if (res.confirm) {
  1334. this.B_OpenBLESetting();
  1335. }
  1336. }
  1337. })
  1338. }
  1339. }
  1340. }
  1341. });
  1342. },
  1343. openDeviceList(e) {
  1344. if (this.ConnectBindingDevice) {
  1345. uni.showToast({
  1346. title: '当前已开启数据',
  1347. icon: 'none',
  1348. mask: true
  1349. })
  1350. return;
  1351. }
  1352. //先判断蓝牙是否初始化
  1353. /**
  1354. * 蓝牙部分操作,转全局变量操作
  1355. * */
  1356. console.log("openDeviceList bOpenBluetooth", this.bOpenBluetooth);
  1357. // #ifdef APP-PLUS
  1358. if (!this.bOpenBluetooth) {
  1359. this.initAdapter(() => {
  1360. uni.navigateTo({
  1361. // url: '../devices-category/devices-category',
  1362. url: '../devices-hardware/devices-hardware',
  1363. success: res => {
  1364. this.bLimitReconnection = true;
  1365. },
  1366. fail: () => {},
  1367. complete: () => {}
  1368. });
  1369. });
  1370. return;
  1371. }
  1372. // #endif
  1373. uni.navigateTo({
  1374. url: '../devices-hardware/devices-hardware',
  1375. success: res => {
  1376. this.bLimitReconnection = true;
  1377. },
  1378. fail: () => {},
  1379. complete: () => {}
  1380. });
  1381. },
  1382. onNavToMore() {
  1383. uni.navigateTo({
  1384. url: '../more/more?index=' + this.cIndex,
  1385. success: res => {},
  1386. fail: () => {},
  1387. complete: () => {}
  1388. });
  1389. },
  1390. onAddDevice() {
  1391. let deviceItem = {
  1392. name: '蹦床',
  1393. icon: '/static/trampoline.png'
  1394. };
  1395. if (this.deviceList.length != 0) {
  1396. this.deviceList = this.deviceList.concat(deviceItem);
  1397. } else {
  1398. this.deviceList = deviceItem;
  1399. }
  1400. },
  1401. onCloseDevice(item, e) {
  1402. //如果不是连接状态,则删除
  1403. if (e.currentTarget.dataset.index != this.cIndex) {
  1404. if (this.cIndex != -1) {
  1405. uni.showToast({
  1406. icon: 'none',
  1407. title: "请先断开已连接设备",
  1408. duration: 2000,
  1409. mask: true
  1410. })
  1411. return;
  1412. }
  1413. uni.showModal({
  1414. title: '设备状态',
  1415. content: '是否删除设备?',
  1416. ConfirmColor: '#A488DC',
  1417. success: res => {
  1418. if (res.confirm) {
  1419. this.$store.commit('deleteBLEDevice', e.currentTarget.dataset.index);
  1420. }
  1421. }
  1422. });
  1423. return;
  1424. }
  1425. uni.showModal({
  1426. title: '设备状态',
  1427. content: '是否断开连接?',
  1428. /**
  1429. * 如果需要强制,不显示取消按钮
  1430. */
  1431. showCancel: true,
  1432. ConfirmColor: '#A488DC',
  1433. success: res => {
  1434. if (res.confirm) {
  1435. this.onCloseBLEConnection({
  1436. getSuccess: () => {}
  1437. });
  1438. }
  1439. }
  1440. });
  1441. },
  1442. onNavDetail(item) {
  1443. console.log(item);
  1444. let temItem = encodeURIComponent(JSON.stringify(item));
  1445. // return;
  1446. uni.navigateTo({
  1447. url: '../../game-page/game-detail/game-detail?item=' + temItem
  1448. });
  1449. },
  1450. onNavToGameMore(e) {
  1451. uni.reLaunch({
  1452. url: '../../game-page/game/game?type=' + e.currentTarget.dataset.type
  1453. });
  1454. },
  1455. //判断是否有其他限制
  1456. onStartCheck() {
  1457. //#ifdef H5
  1458. // 直接走测试,如果是h5
  1459. if (0 === this.currentModeIndex) {
  1460. this.onBoxingGuideFinish();
  1461. } else if (1 === this.currentModeIndex) {
  1462. //调用开始
  1463. this.$refs.actionJumpRef.onActionJumpPlay();
  1464. }
  1465. return;
  1466. //#endif
  1467. //分类型判断
  1468. if (0 === this.currentModeIndex) {
  1469. //拳击运动类型
  1470. // 1.检测是否有对应设备,没有ConnectBindingDevice,再进行下一步
  1471. if (this.ConnectBindingDevice == null) {
  1472. uni.showToast({
  1473. title: '开启连接数据',
  1474. icon: 'none'
  1475. })
  1476. this.toView = "openAccGyroView";
  1477. return;
  1478. }
  1479. // TODO,目前去掉蓝牙设备
  1480. // //2.检测是否有设备
  1481. // if (this.BLEDeviceShowList.length == 0) {
  1482. // this.$store.state.bGuidePages = true;
  1483. // this.guideCurrent = 3;
  1484. // uni.showToast({
  1485. // title: '请添加蓝牙设备',
  1486. // icon: 'none'
  1487. // })
  1488. // this.toView = "addDeviceView";
  1489. // return;
  1490. // }
  1491. // //2.检测是否连接设备 || this.BLEConnectDevice.ename !== 'BT04'
  1492. // if (this.cIndex == -1) {
  1493. // //没有连接设备,提示去连接设备
  1494. // uni.showToast({
  1495. // title: '请连接蓝牙设备',
  1496. // icon: 'none'
  1497. // })
  1498. // this.toView = "addDeviceView";
  1499. // return;
  1500. // }
  1501. } else if (1 === this.currentModeIndex) {
  1502. //2.检测是否连接设备 || this.BLEConnectDevice.ename !== 'BT04'
  1503. if (this.cIndex == -1) {
  1504. //没有连接设备,提示去连接设备
  1505. uni.showToast({
  1506. title: '请连接蓝牙设备',
  1507. icon: 'none'
  1508. })
  1509. this.toView = "addDeviceView";
  1510. return;
  1511. }
  1512. }
  1513. //3.检测一下计划日期
  1514. console.log(this.remainingDays);
  1515. // if (this.planData.startTime > this.planData.endTime || this.remainingDays == 0) {
  1516. // if (!this.$store.state.bPlanExpired) {
  1517. // this.$store.state.bPlanExpired = true;
  1518. // setTimeout(() => {
  1519. // this.$store.state.bPlanExpired = false;
  1520. // }, 3000)
  1521. // uni.showToast({
  1522. // title: "计划到期,请制定计划。",
  1523. // icon: 'none'
  1524. // })
  1525. // }
  1526. // this.$store.state.bGuidePages = true;
  1527. // setTimeout(() => {
  1528. // this.$refs.codeElfGuide.setCurrent(0);
  1529. // }, 0)
  1530. // this.toView = "projectButtonView";
  1531. // return;
  1532. // }
  1533. if (0 === this.currentModeIndex) {
  1534. //如果新手,调用新手教程
  1535. console.log("this.bNewGuide:", this.bNewGuide);
  1536. // this.$store.state.bNewGuide = true;
  1537. if (this.bNewGuide) {
  1538. // this.$refs.boxingPostRef.onGuideBoxingPostPlay();
  1539. // 拳击的新手提示
  1540. this.$store.state.bGuidePages = true;
  1541. this.guideCurrent = 5;
  1542. this.toView = "boxingHitID";
  1543. this.$store.state.bNewGuide = false;
  1544. } else {
  1545. if (this.ConnectBindingDevice) {
  1546. //假如有连接bingding设备
  1547. this.gCreateSandbagAlgorithm();
  1548. this.gStartSimulateBLEUpdate();
  1549. } else {
  1550. //todo 跳绳模式 发送开启指令
  1551. if (this.BLEConnectDevice.usageMode == "ropeSkipping") {
  1552. //打开跳绳模式
  1553. this.B_OpenRopeSkipping();
  1554. } else {
  1555. //初始化filter快速打击对象
  1556. if (this.BLEConnectDevice.usageMode == "hotman") {
  1557. this.gCreateFilterObj();
  1558. }
  1559. //打开加速计
  1560. this.onWriteBLEConnectionValue({
  1561. value: "3"
  1562. });
  1563. // setTimeout(() => {
  1564. // //设置加速计b:20ms a:10ms
  1565. // this.onWriteBLEConnectionValue({
  1566. // value: config.refreshRate
  1567. // });
  1568. // }, 1000)
  1569. }
  1570. }
  1571. //监听蓝牙回调
  1572. uni.$on('updateBLEDeviceData', this.callbackUpdateBLEData);
  1573. this.onBoxingGuideFinish();
  1574. }
  1575. } else if (1 == this.currentModeIndex) {
  1576. if (this.BLEConnectDevice.usageMode == "ropeSkipping") {
  1577. //打开跳绳模式
  1578. // this.B_OpenRopeSkipping();
  1579. this.onWriteBLEConnectionValue({
  1580. value: "3"
  1581. });
  1582. }
  1583. //监听蓝牙回调
  1584. uni.$on('updateBLEDeviceData', this.callbackUpdateBLEData);
  1585. //调用开始
  1586. this.$refs.actionJumpRef.onActionJumpPlay();
  1587. }
  1588. },
  1589. onShowBoxingHitTip() {
  1590. this.$store.state.bGuidePages = true;
  1591. this.guideCurrent = 5;
  1592. this.toView = "boxingHitID";
  1593. this.$store.state.bNewGuide = false;
  1594. },
  1595. //检测是否符合要求,没有的话进行新手提示
  1596. onPersonalCheck() {
  1597. // //判断一下,是否达标,给moadal 提示
  1598. // if (this.planData.allCalorie >= this.planData.calorie) {
  1599. // this.modalName = 'showPlanTipModal';
  1600. // this.planTipIndex = 0;
  1601. // } else {
  1602. // //如果是一开始,还没达标,就不给modal 提示
  1603. // this.onStartCheck();
  1604. // }
  1605. this.onStartCheck();
  1606. },
  1607. //
  1608. onBoxingGuideFinish() {
  1609. if (this.b_countDown) {
  1610. clearInterval(this.b_countDown);
  1611. this.b_countDown = null;
  1612. }
  1613. if (this.currentMode == 'calorieMode' || this.currentMode == 'ropeMode') {
  1614. this.personalAudioContext.stop();
  1615. this.personalAudioContext.play();
  1616. setTimeout(() => {
  1617. this.$refs.boxingPostRef.onBoxingPostPlay(true);
  1618. }, 600);
  1619. } else {
  1620. this.BoxingPostCountDownText = 3;
  1621. this.$refs.boxingPostRef.onSetRingAnimation(true);
  1622. uni.showToast({
  1623. title: '匹配中...',
  1624. mask: true,
  1625. icon: 'loading',
  1626. duration: 2000
  1627. })
  1628. setTimeout(() => {
  1629. //ai信息
  1630. this.onGetAiRandom();
  1631. // this.b_countDown = setInterval(() => {
  1632. // if (this.BoxingPostCountDownText <= 1) {
  1633. // if (this.b_countDown) {
  1634. // clearInterval(this.b_countDown);
  1635. // this.b_countDown = null;
  1636. // }
  1637. // setTimeout(() => {
  1638. // this.personalAudioContext.stop();
  1639. // this.personalAudioContext.play();
  1640. // this.$refs.boxingPostRef.onBoxingPostPlay(true);
  1641. // this.$refs.boxingPostRef.onSetRingAnimation(false);
  1642. // uni.hideToast();
  1643. // }, 800)
  1644. // }
  1645. // this.BoxingPostCountDownText--;
  1646. // }, 1000)
  1647. setTimeout(() => {
  1648. this.personalAudioContext.stop();
  1649. this.personalAudioContext.play();
  1650. this.$refs.boxingPostRef.onBoxingPostPlay(true);
  1651. this.$refs.boxingPostRef.onSetRingAnimation(false);
  1652. uni.hideToast();
  1653. }, 800)
  1654. }, 2000);
  1655. }
  1656. },
  1657. //运动时间
  1658. onUpdateSportTime(res) {
  1659. // console.log("同步的运动时间",res);
  1660. this.setLocalSportTime(res);
  1661. },
  1662. //更新运动数据
  1663. onUpdateCaloriePlane(data) {
  1664. // 记录卡路里到本地
  1665. this.addlocalCalorie(data);
  1666. this.updateArcbarData();
  1667. },
  1668. onRoundTrigger(data) {
  1669. // console.log("onRoundTrigger==", data);
  1670. // return;
  1671. let url = '';
  1672. switch (data.item.type) {
  1673. case "personal":
  1674. //个人中心页面
  1675. url = '../../personal-page/personal/personal';
  1676. break;
  1677. case "game":
  1678. url = '../../game-page/game/game';
  1679. break;
  1680. default:
  1681. url = '../../personal-page/personal/personal';
  1682. break;
  1683. }
  1684. uni.reLaunch({
  1685. url: url,
  1686. success: res => {},
  1687. fail: () => {},
  1688. complete: () => {}
  1689. });
  1690. },
  1691. /**
  1692. * 同步本地数据到服务器
  1693. */
  1694. onSyncData() {
  1695. this.syncRequestEvent({
  1696. success: () => {
  1697. this.updateArcbarData();
  1698. }
  1699. });
  1700. // 更新显示日期
  1701. this.originalDate = new Date();
  1702. this.currentDate = date.formatTime(this.originalDate);
  1703. },
  1704. hidePlanTipModal() {
  1705. this.modalName = null;
  1706. if (this.planTipIndex === 1) {
  1707. // 您今天的目标还没完成 是否结束训练
  1708. this.onBoxingPause(false);
  1709. }
  1710. },
  1711. confirmPlanTipModal() {
  1712. this.modalName = null;
  1713. if (this.planTipIndex === 0) {
  1714. this.onStartCheck()
  1715. } else if (this.planTipIndex === 1) {
  1716. // 您今天的目标还没完成 是否结束训练
  1717. this.onBoxingPause(true);
  1718. }
  1719. },
  1720. //断开连接时候,关闭
  1721. onCloseBoxingHit() {
  1722. console.log('关闭训练');
  1723. if (this.currentMode == 'pkMode') {
  1724. this.$refs.hitEffectRef.onStop();
  1725. }
  1726. this.onBoxingPause(true);
  1727. },
  1728. //点击暂停时候,判断一下是否完成目标
  1729. onBoxingPostControlPlay(bPlay) {
  1730. if (!bPlay) {
  1731. if (this.planData.allCalorie < this.planData.calorie) {
  1732. this.modalName = 'showPlanTipModal';
  1733. this.planTipIndex = 1;
  1734. } else {
  1735. //假如完成了目标,更新卡路里
  1736. this.onBoxingPause(true);
  1737. }
  1738. }
  1739. },
  1740. //点击切换模式
  1741. onModeEvent(data) {
  1742. console.log("当前模式:", data);
  1743. this.currentMode = data.mode;
  1744. this.title = data.name;
  1745. if (this.currentMode == 'calorieMode' || this.currentMode == 'ropeMode') {
  1746. setTimeout(() => {
  1747. this.updateNoLimit();
  1748. }, 0)
  1749. }
  1750. },
  1751. onAiHitEvent(bloodPoint) {
  1752. // this.onPlay({
  1753. // bloodPoint: num,
  1754. // createType: 'red',
  1755. // callback: (res) => {
  1756. // console.log("红色拳头击中对方:", res);
  1757. // }
  1758. // });
  1759. this.$refs.hitFistRef.onPlay({
  1760. bloodPoint: bloodPoint,
  1761. createType: 'red',
  1762. callback: () => {
  1763. if (this.bAiHitShake) return;
  1764. this.bAiHitShake = true;
  1765. this.$refs.aiHitEffectRef.onPlay();
  1766. this.$refs.aiHitEffectRef.onAIHit();
  1767. setTimeout(() => {
  1768. this.bAiHitShake = false;
  1769. }, 500)
  1770. }
  1771. });
  1772. },
  1773. //打击时候头像修改
  1774. onHitEvent(bloodPoint) {
  1775. // console.log("this.bHitShake:",this.bHitShake);
  1776. this.$refs.hitFistRef.onPlay({
  1777. bloodPoint: bloodPoint,
  1778. createType: 'blue',
  1779. callback: () => {
  1780. if (this.bHitShake) return;
  1781. this.bHitShake = true;
  1782. this.$refs.hitEffectRef.onPlay();
  1783. this.$refs.hitEffectRef.onMyHit();
  1784. setTimeout(() => {
  1785. this.bHitShake = false;
  1786. }, 500)
  1787. }
  1788. }
  1789. );
  1790. },
  1791. //弹出目标提示后,进行下一步
  1792. onBoxingPause(bFinish) {
  1793. if (bFinish) {
  1794. if (this.ConnectBindingDevice) {
  1795. this.gStopSimulateBLEUpdate();
  1796. } else {
  1797. if (this.BLEConnectDevice.usageMode == "ropeSkipping") {
  1798. this.B_CloseRopeSkipping();
  1799. } else {
  1800. console.log("停止时候,上传卡路里");
  1801. this.$refs.boxingPostRef.onBoxingPostStop();
  1802. //停止时候,重置ai信息
  1803. this.aiObj.name = this.aiOldObj.name;
  1804. this.aiObj.avatar = this.aiOldObj.avatar;
  1805. //停止蓝牙加速计
  1806. this.onWriteBLEConnectionValue({
  1807. value: "4"
  1808. });
  1809. }
  1810. }
  1811. uni.$off('updateBLEDeviceData', this.callbackUpdateBLEData);
  1812. this.syncRequestEvent({
  1813. success: () => {
  1814. this.updateArcbarData();
  1815. }
  1816. });
  1817. } else {
  1818. if (this.BLEConnectDevice.usageMode == "ropeSkipping") {
  1819. this.$refs.actionJumpRef.onActionJumpPlay();
  1820. } else {
  1821. //如果不是,继续调用播放
  1822. this.$refs.boxingPostRef.onBoxingPostPlay(true);
  1823. }
  1824. }
  1825. },
  1826. /**
  1827. * 新手任务引导
  1828. */
  1829. onGuideChange(e) {
  1830. let tempCurrent = e.detail.current;
  1831. if (tempCurrent == 1) {
  1832. _self.toView = "addDeviceView";
  1833. } else if (tempCurrent == 0) {
  1834. _self.toView = "projectButtonView";
  1835. }
  1836. },
  1837. guideHide(e) {
  1838. this.$store.state.bGuidePages = false;
  1839. if (e.current == 0 && !e.onlyHide) {
  1840. //跳转计划页面
  1841. this.openPlan();
  1842. } else if (e.current == 1 && !e.onlyHide) {
  1843. console.log('guideHide:', e.current);
  1844. //跳转搜索设备页面
  1845. // this.openDeviceList();
  1846. } else if (e.current == 3 && !e.onlyHide) {
  1847. //新手引导跳转扫码页面,直接走绑定 再check
  1848. // this.openQRCode((res) => {
  1849. // setTimeout(() => {
  1850. // this.onPersonalCheck();
  1851. // }, 200);
  1852. // });
  1853. // 跳转连接蓝牙页面
  1854. this.openDeviceList();
  1855. } else if (e.current == 4 && !e.onlyHide) {
  1856. //连接绑定设备
  1857. // this.openQRCode();
  1858. console.log(e);
  1859. let _index = Number(e.device.dataset.index);
  1860. this.onBindingDevice(this.DeviceBindingList[_index], _index);
  1861. //连接设备后,再
  1862. setTimeout(() => {
  1863. this.onPersonalCheck();
  1864. }, 200);
  1865. } else if (e.current == 5 && !e.onlyHide) {
  1866. console.log("==:", e);
  1867. //todo 跳绳模式 新手引导
  1868. if (this.BLEConnectDevice.usageMode == "ropeSkipping") {
  1869. this.B_OpenRopeSkipping();
  1870. } else {
  1871. //初始化filter快速打击对象
  1872. if (this.BLEConnectDevice.usageMode == "hotman") {
  1873. this.gCreateFilterObj();
  1874. }
  1875. //打开加速计
  1876. this.onWriteBLEConnectionValue({
  1877. value: "3"
  1878. });
  1879. // setTimeout(() => {
  1880. // //设置加速计b:20ms a:10ms
  1881. // this.onWriteBLEConnectionValue({
  1882. // value: config.refreshRate
  1883. // });
  1884. // }, 1000)
  1885. }
  1886. //监听蓝牙回调
  1887. uni.$on('updateBLEDeviceData', this.callbackUpdateBLEData);
  1888. this.onBoxingGuideFinish();
  1889. }
  1890. },
  1891. mainScroll(e) {
  1892. if (_self.toView == "addDeviceView") {
  1893. _self.toView = "";
  1894. if (!_self.bGuidePages) return;
  1895. let view = uni.createSelectorQuery().select('#addDeviceView');
  1896. view.boundingClientRect(data => {
  1897. _self.$refs.codeElfGuide.setDeviceObj(data);
  1898. }).exec();
  1899. } else if (_self.toView == "projectButtonView") {
  1900. _self.toView = "";
  1901. if (!_self.bGuidePages) return;
  1902. _self.onGetProjectView();
  1903. } else if (_self.toView == "QRDeviceView") {
  1904. _self.toView = "";
  1905. if (!_self.bGuidePages) return;
  1906. let view = uni.createSelectorQuery().select('#QRDeviceView');
  1907. view.boundingClientRect(data => {
  1908. _self.$refs.codeElfGuide.setDeviceObj(data);
  1909. }).exec();
  1910. } else if (_self.toView == "bing-boxingPost") {
  1911. _self.toView = "";
  1912. if (!_self.bGuidePages) return;
  1913. let view = uni.createSelectorQuery().select('#bing-boxingPost');
  1914. view.boundingClientRect(data => {
  1915. _self.$refs.codeElfGuide.setDeviceObj(data);
  1916. console.log(data);
  1917. }).exec();
  1918. } else if (_self.toView == "boxingHitID") {
  1919. _self.toView = "";
  1920. // let view = uni.createSelectorQuery().select('#boxingHitID');
  1921. // view.boundingClientRect(data => {
  1922. // _self.$refs.codeElfGuide.setModalObj(data);
  1923. // console.log(data);
  1924. // }).exec();
  1925. } else if (_self.toView == "openAccGyroView") {
  1926. _self.toView = "";
  1927. }
  1928. },
  1929. onGetProjectView() {
  1930. let view = uni.createSelectorQuery().select('#projectButtonView');
  1931. view.boundingClientRect(data => {
  1932. _self.$refs.codeElfGuide.setProjectObj(data);
  1933. }).exec();
  1934. },
  1935. //拳击模块的回调
  1936. boxingUpdateCalorie(calorie) {
  1937. if (this.currentMode != 'pkMode') {
  1938. //这里调用一下设置可以播放音效
  1939. this.$refs.personalFruitRef.onCanPlay();
  1940. }
  1941. this.onUpdateCaloriePlane(calorie);
  1942. },
  1943. //扫码添加设备
  1944. openQRCode(callback) {
  1945. let that = this;
  1946. // 允许从相机和相册扫码
  1947. uni.scanCode({
  1948. success: function(res) {
  1949. // console.log('条码类型:' + res.scanType);
  1950. // console.log('条码内容:' + res.result);
  1951. let obj = JSON.parse(res.result)
  1952. let data = {
  1953. type: obj.type,
  1954. uuid: obj.uuid,
  1955. }
  1956. }
  1957. });
  1958. },
  1959. //屏幕抖动
  1960. onScreenShake() {
  1961. this.bEFHitShake = true;
  1962. setTimeout(() => {
  1963. this.bEFHitShake = false;
  1964. }, 500)
  1965. },
  1966. onGetAiRandom() {
  1967. let _self = this;
  1968. let avatarlist = AvatarConfig.getAvatarList().avatarList;
  1969. let _length = avatarlist.length;
  1970. let _index = Math.floor(Math.random() * _length);
  1971. console.log(avatarlist);
  1972. _self.aiObj.name = avatarlist[_index].name;
  1973. _self.aiObj.avatar = avatarlist[_index].url;
  1974. },
  1975. onBoxingGameOver(res) {
  1976. this.$refs.hitEffectRef.onStop();
  1977. this.onBoxingPause(true);
  1978. let _title = res.myWin ? "胜利" : "失败";
  1979. let _context = res.myWin ? "你已经赢得PK胜利!" : "你在PK中被打败了!";
  1980. this.modalName = "showModalTip"
  1981. this.$refs.modalTipRef.setShowData({
  1982. title: _title,
  1983. context: _context
  1984. });
  1985. },
  1986. onModalTipHide() {
  1987. this.modalName = null;
  1988. },
  1989. onModalTipConfirm() {
  1990. this.modalName = null;
  1991. //再来一局
  1992. },
  1993. onTestShare() {
  1994. uni.share({
  1995. provider: "weixin",
  1996. scene: "WXSenceTimeline",
  1997. type: 2,
  1998. imageUrl: "https://img-cdn-qiniu.dcloud.net.cn/uniapp/images/uni@2x.png",
  1999. success: function(res) {
  2000. console.log("success:" + JSON.stringify(res));
  2001. },
  2002. fail: function(err) {
  2003. console.log("fail:" + JSON.stringify(err));
  2004. }
  2005. });
  2006. },
  2007. openAcc() {
  2008. if (!this.globalAcc) {
  2009. AccAndOri.bindAcc((accId) => {
  2010. this.$store.state.globalAcc = accId;
  2011. console.log("初始化:globalAcc=", this.globalAcc);
  2012. });
  2013. }
  2014. if (!this.globalOri) {
  2015. AccAndOri.bindOri((oriId) => {
  2016. this.$store.state.globalOri = oriId;
  2017. console.log("初始化:globalOri=", this.globalOri);
  2018. });
  2019. }
  2020. },
  2021. closeAcc() {
  2022. AccAndOri.unBindAcc(this.globalAcc);
  2023. this.$store.state.globalAcc = null;
  2024. AccAndOri.unBindOri(this.globalOri);
  2025. this.$store.state.globalOri = null;
  2026. },
  2027. outGyro(o) {
  2028. console.log("Orientation\nAlpha:" + o.alpha + "\nBeta:" + o.beta + "\nGamma:" + o.gamma);
  2029. },
  2030. openGyro() {
  2031. if (!this.globalOri) {
  2032. AccAndOri.bindOri((oriId) => {
  2033. this.$store.state.globalOri = oriId;
  2034. console.log("初始化:globalOri=", this.globalOri);
  2035. });
  2036. }
  2037. uni.$on('watchOrientation', this.outGyro);
  2038. },
  2039. stopGyro() {
  2040. uni.$off('watchOrientation', this.outGyro);
  2041. AccAndOri.unBindOri(this.globalOri);
  2042. this.$store.state.globalOri = null;
  2043. },
  2044. onKeyInput: function(event) {
  2045. this.$store.state.LocationGameUrl = event.target.value
  2046. },
  2047. onNavFcGame() {
  2048. // console.log(0);
  2049. uni.navigateTo({
  2050. url: "../../fc-page/fc/fc"
  2051. })
  2052. },
  2053. onNavAppInfo() {
  2054. uni.navigateTo({
  2055. url: '../../info-page/app-info/app-info'
  2056. })
  2057. },
  2058. getBLEDeviceServices() {
  2059. console.log("getBLEDeviceServices");
  2060. // uni.getBLEDeviceServices({
  2061. // deviceId: "C5:5C:19:04:00:30",
  2062. // success: res => {
  2063. // console.log("getBLEDeviceServices==", JSON.stringify(res));
  2064. // },
  2065. // fail: failRes => {
  2066. // console.log('device services:', failRes)
  2067. // }
  2068. // });
  2069. },
  2070. // testAsyncFunc() {
  2071. // // 调用异步方法
  2072. // testModule.testAsyncFunc({
  2073. // 'name': 'unimp',
  2074. // 'age': 1
  2075. // },
  2076. // (ret) => {
  2077. // modal.toast({
  2078. // message: ret,
  2079. // duration: 1.5
  2080. // });
  2081. // })
  2082. // },
  2083. // startSyncFunc() {
  2084. // // 调用同步方法
  2085. // var ret = testModule.onStartAccAndGyro({
  2086. // 'name': 'unimp',
  2087. // 'age': 1
  2088. // })
  2089. // modal.toast({
  2090. // message: ret,
  2091. // duration: 1.5
  2092. // });
  2093. // },
  2094. // stopSyncFunc() {
  2095. // // 调用同步方法
  2096. // var ret = testModule.onStopAccAndGyro({
  2097. // 'name': 'unimp',
  2098. // 'age': 1
  2099. // })
  2100. // modal.toast({
  2101. // message: ret,
  2102. // duration: 1.5
  2103. // });
  2104. // },
  2105. onNavToSelectFriend() {
  2106. uni.navigateTo({
  2107. url: '../../friend-page/select/select'
  2108. })
  2109. },
  2110. /**
  2111. * 悬停按钮
  2112. */
  2113. fabClick() {
  2114. // uni.showToast({
  2115. // title: '点击了悬浮按钮',
  2116. // icon: 'none'
  2117. // })
  2118. if (this.cIndex != -1 && this.BLEConnectDevice != null) {
  2119. //先检测
  2120. uni.showModal({
  2121. title: '设备状态',
  2122. content: '是否断开连接?',
  2123. /**
  2124. * 如果需要强制,不显示取消按钮
  2125. */
  2126. showCancel: true,
  2127. ConfirmColor: '#A488DC',
  2128. success: res => {
  2129. if (res.confirm) {
  2130. this.onCloseBLEConnection({
  2131. getSuccess: () => {}
  2132. });
  2133. }
  2134. }
  2135. });
  2136. } else {
  2137. this.openDeviceList();
  2138. }
  2139. },
  2140. /**
  2141. * action 模块相关数据更新
  2142. */
  2143. onActionJumpDataUpdate(obj) {
  2144. console.log(obj);
  2145. this.actionJumpAllCount = obj.eliminationCount + obj.faultCount;
  2146. this.actionJumpFaultCount = obj.faultCount;
  2147. this.updateArcbarDataFromActionJump();
  2148. },
  2149. onActionJumpCountDownUpdate(obj) {
  2150. // console.log(obj);
  2151. this.actionJumpCountDown = obj.countDown;
  2152. },
  2153. showDrawer() {
  2154. uni.getSubNVueById('personal-drawer').show('slide-in-left', 200);
  2155. },
  2156. showPopup() {
  2157. // 向 popup 传递消息
  2158. uni.$emit('page-popup', {
  2159. title: '请阅读软件内容',
  2160. content: 'uni-app 是一个使用 Vue.js 开发跨平台应用的前端框架,开发者编写一套代码,可编译到iOS、Android、H5、小程序等多个平台。'
  2161. });
  2162. const subNVue = uni.getSubNVueById('personal-popup')
  2163. subNVue.show('slide-in-top', 250)
  2164. },
  2165. /**
  2166. * 任务相关
  2167. */
  2168. selectTask(_index, _item) {
  2169. console.log('taskSelect=', _index);
  2170. this.setActionJumpTask(_index);
  2171. },
  2172. updateTaskScroll(){
  2173. /**
  2174. * 获取任务对象
  2175. */
  2176. this.getActionJumpTask();
  2177. // console.error('当前的任务对象===========:' + this.currentJumpTask);
  2178. if (this.currentJumpTask != null) {
  2179. let _index = this.currentJumpTask-1<0?0:this.currentJumpTask-1;
  2180. this.taskIntoView = "task_" + _index ;
  2181. console.log(this.taskScrollTop);
  2182. // this.taskIntoView = '';
  2183. }
  2184. }
  2185. }
  2186. };
  2187. </script>
  2188. <style>
  2189. .bg-person {
  2190. background-color: #9797ff;
  2191. }
  2192. .plan-view {
  2193. overflow: hidden;
  2194. background-color: #9797ff;
  2195. }
  2196. .plan-l-tip-view {
  2197. border-radius: 80upx 0 0 80upx;
  2198. background-color: rgba(255, 255, 255, 0.05);
  2199. }
  2200. .plan-r-tip-view {
  2201. border-radius: 0 80upx 80upx 0;
  2202. background-color: rgba(255, 255, 255, 0.05);
  2203. }
  2204. .bottom-view {
  2205. background-color: rgba(246, 243, 249, 255);
  2206. padding-bottom: 20rpx;
  2207. border-radius: 80rpx 80rpx 0 0;
  2208. width: 750rpx;
  2209. overflow: hidden;
  2210. }
  2211. .time-view {
  2212. width: 100%;
  2213. margin-top: 53rpx;
  2214. /* border: 1rpx solid #DD514C; */
  2215. }
  2216. /*样式的width和height一定要与定义的cWidth和cHeight相对应*/
  2217. .qiun-charts-arcbar {
  2218. /* padding: 20rpx 15rpx; */
  2219. /* margin-top: 60rpx; */
  2220. height: 480rpx;
  2221. position: relative;
  2222. width: 750rpx;
  2223. /* border: 1rpx solid #fff; */
  2224. }
  2225. .charts-arcbar {
  2226. position: absolute;
  2227. /* margin-left: 81upx;
  2228. */
  2229. left: 0;
  2230. right: 0;
  2231. top: 0;
  2232. bottom: 0;
  2233. margin: auto;
  2234. width: 490rpx;
  2235. height: 480rpx;
  2236. /* border: 1rpx solid #FFFFFF; */
  2237. }
  2238. .charts-arcbar-img {
  2239. position: absolute;
  2240. left: 135upx;
  2241. width: 480upx;
  2242. height: 480upx;
  2243. }
  2244. .charts-pring-bottom {
  2245. position: relative;
  2246. width: 100%;
  2247. display: flex;
  2248. flex-direction: column;
  2249. justify-content: center;
  2250. align-items: center;
  2251. }
  2252. .charts-pring-button {
  2253. width: 178rpx;
  2254. height: 64rpx;
  2255. display: flex;
  2256. flex-direction: row;
  2257. justify-content: start;
  2258. align-items: center;
  2259. border-radius: 0 25px 25px 0;
  2260. }
  2261. /* 心电图 */
  2262. /* .qiun-charts-elect {
  2263. width: 500rpx;
  2264. height: 136rpx;
  2265. } */
  2266. .charts-elect {
  2267. width: 464rpx;
  2268. height: 96rpx;
  2269. border: 1rpx solid #000000;
  2270. }
  2271. .e-button {
  2272. background-color: rgba(255, 255, 255, 0.25);
  2273. border-radius: 45px;
  2274. margin: 5px 12px;
  2275. box-shadow: 1px 1px 3px #888888;
  2276. display: flex;
  2277. justify-content: center;
  2278. }
  2279. /* 曲线图 */
  2280. .qiun-charts-area {
  2281. width: calc(750rpx - 40rpx);
  2282. height: 300upx;
  2283. /* background-color: #007AFF; */
  2284. position: relative;
  2285. }
  2286. .charts-area {
  2287. position: absolute;
  2288. width: 750upx;
  2289. height: 300upx;
  2290. }
  2291. .qiun-charts-bottom-container {
  2292. height: 63px;
  2293. position: relative;
  2294. width: 100%;
  2295. justify-content: center;
  2296. align-items: center;
  2297. display: flex;
  2298. flex-direction: row;
  2299. }
  2300. .qiun-charts-bottom-right {
  2301. position: absolute;
  2302. left: calc(50% + 50rpx);
  2303. top: 15px;
  2304. margin-left: 20rpx;
  2305. }
  2306. /* picker */
  2307. .mpvue-picker-view {
  2308. width: calc(50% - 5px);
  2309. height: 300px;
  2310. /* background-color: rgba(255, 255, 255, 1); */
  2311. border-radius: 20px;
  2312. }
  2313. .item {
  2314. text-align: center;
  2315. width: calc(100% - 0px);
  2316. background-color: rgba(255, 255, 255, 1);
  2317. height: 88upx;
  2318. line-height: 88upx;
  2319. text-overflow: ellipsis;
  2320. white-space: nowrap;
  2321. font-size: 40upx;
  2322. }
  2323. .picker-unit {
  2324. position: absolute;
  2325. right: 70px;
  2326. top: 43%;
  2327. }
  2328. .left-button,
  2329. .right-button {
  2330. margin: 20px 0;
  2331. padding: 10px 30px;
  2332. background-color: #ffffff;
  2333. }
  2334. .left-button {
  2335. border-top-left-radius: 20px;
  2336. border-bottom-left-radius: 20px;
  2337. border-right: 1px solid #e6e6e6;
  2338. }
  2339. .right-button {
  2340. border-top-right-radius: 20px;
  2341. border-bottom-right-radius: 20px;
  2342. }
  2343. .png-size-28 {
  2344. width: 24px;
  2345. height: 24px;
  2346. margin-bottom: 4px;
  2347. }
  2348. .png-size-32 {
  2349. width: 32px;
  2350. height: 32px;
  2351. }
  2352. .png-size-34 {
  2353. width: 34px;
  2354. height: 34px;
  2355. }
  2356. /* 图标大小 */
  2357. .data-play {
  2358. width: 16px;
  2359. height: 16px;
  2360. margin-top: 10rpx;
  2361. }
  2362. .p-data-png {
  2363. width: 16px;
  2364. height: 16px;
  2365. margin: 5rpx 20rpx;
  2366. }
  2367. .data-png {
  2368. width: 16px;
  2369. height: 16px;
  2370. margin: 5rpx;
  2371. }
  2372. .data-png-20 {
  2373. width: 20px;
  2374. height: 20px;
  2375. margin: 0 14rpx;
  2376. }
  2377. .data-png-54 {
  2378. width: 54px;
  2379. height: 54px;
  2380. margin: 0 14rpx;
  2381. }
  2382. .data-png-add {
  2383. position: absolute;
  2384. left: 0;
  2385. top: 0;
  2386. right: 0;
  2387. bottom: 0;
  2388. margin: auto;
  2389. width: 34px;
  2390. height: 37px;
  2391. }
  2392. .time-container {
  2393. margin-top: 13px;
  2394. width: 100%;
  2395. height: 218rpx;
  2396. position: relative;
  2397. /* border: 1rpx solid #007AFF; */
  2398. }
  2399. .time-png {
  2400. width: 503rpx;
  2401. height: 222rpx;
  2402. position: absolute;
  2403. left: 0;
  2404. right: 0;
  2405. top: 0;
  2406. bottom: 0;
  2407. margin: auto;
  2408. z-index: 1;
  2409. }
  2410. .time-text {
  2411. font-size: 9px;
  2412. z-index: 10;
  2413. position: relative;
  2414. height: 100%;
  2415. display: flex;
  2416. justify-content: center;
  2417. align-items: center;
  2418. color: #FFFFFF;
  2419. }
  2420. .padding {
  2421. padding: 10rpx;
  2422. }
  2423. .logo {
  2424. height: 200rpx;
  2425. width: 200rpx;
  2426. margin-top: 200rpx;
  2427. margin-left: auto;
  2428. margin-right: auto;
  2429. margin-bottom: 50rpx;
  2430. }
  2431. .float-png {
  2432. position: absolute;
  2433. right: 15px;
  2434. bottom: 200px;
  2435. width: 56px;
  2436. height: 56px;
  2437. }
  2438. .moveCanvas {
  2439. position: fixed;
  2440. top: 9999rpx;
  2441. left: 0;
  2442. width: 188rpx;
  2443. height: 188rpx;
  2444. }
  2445. .scroll-class {
  2446. width: 100%;
  2447. overflow-x: hidden;
  2448. box-sizing: border-box;
  2449. /* border: 1rpx solid #000000; */
  2450. }
  2451. .homepage-grid-square {
  2452. width: 250rpx;
  2453. /* height: 250rpx; */
  2454. align-items: start;
  2455. }
  2456. .homepage-grid-square image {
  2457. width: 176rpx;
  2458. height: 176rpx;
  2459. }
  2460. .border {
  2461. /* width: 176rpx; */
  2462. font-size: 30rpx;
  2463. color: rgba(175, 175, 175, 1);
  2464. font-weight: 400;
  2465. text-align: center;
  2466. margin-top: 22rpx;
  2467. margin-bottom: 40rpx;
  2468. }
  2469. .item-img {
  2470. border-radius: 20rpx;
  2471. /* border: 1rpx solid #EEEEEE; */
  2472. box-shadow: 0px 1px 2px 0px rgba(113, 113, 219, 0.23);
  2473. }
  2474. .plan-Tip-child {
  2475. height: 120rpx;
  2476. }
  2477. .plan-mode-tip {
  2478. height: 90rpx;
  2479. }
  2480. .plan-grid-square {
  2481. width: 250rpx;
  2482. /* height: 250rpx; */
  2483. align-items: start;
  2484. }
  2485. .plan-grid-square image {
  2486. width: 168rpx;
  2487. height: 58rpx;
  2488. }
  2489. .plan-mode {
  2490. /* height: 54px; */
  2491. border-radius: 10px;
  2492. padding: 3px;
  2493. margin: 0 5px 10px 5px;
  2494. border: 1rpx solid #eeeeee;
  2495. /* box-shadow: 0px 1px 2px 0px rgba(113, 113, 219, 0.23); */
  2496. position: relative;
  2497. }
  2498. .plan-mode-selected {
  2499. /* height: 54px; */
  2500. padding: 3px;
  2501. margin: 0 5px 10px 5px;
  2502. background-size: contain;
  2503. background-clip: border-box;
  2504. background-repeat: no-repeat;
  2505. background-image: url(../../../static/plan-select-bg.png);
  2506. /* box-shadow: 0px 1px 2px 0px rgba(113, 113, 219, 0.23); */
  2507. position: relative;
  2508. }
  2509. .plan-mode-border {
  2510. /* width: 176rpx; */
  2511. font-size: 26rpx;
  2512. color: rgba(151, 151, 255, 1);
  2513. font-weight: 400;
  2514. text-align: center;
  2515. }
  2516. .button-fav {
  2517. background-color: rgba(153, 150, 252, 255);
  2518. color: #ffffff;
  2519. /* border-radius: 10px; */
  2520. /* width: 184rpx; */
  2521. height: 122rpx;
  2522. display: flex;
  2523. justify-content: center;
  2524. text-align: center;
  2525. align-items: center;
  2526. font-size: 14px;
  2527. }
  2528. .card-view-small {
  2529. /* border: 1rpx solid #000000; */
  2530. width: 80%;
  2531. border-radius: 20px;
  2532. margin-left: 50rpx;
  2533. overflow: hidden;
  2534. background-color: #ffffff;
  2535. box-shadow: 0px 2px 4px 0px rgba(113, 113, 219, 0.23);
  2536. }
  2537. .right-bg {
  2538. /* border: 1rpx solid #000000; */
  2539. border-radius: 8px;
  2540. background-color: #9797ff;
  2541. padding: 15rpx;
  2542. position: absolute;
  2543. right: 5%;
  2544. margin-top: 4%;
  2545. }
  2546. .plan-small-child {
  2547. background-color: #f5f5ff;
  2548. border-radius: 20px;
  2549. width: 480rpx;
  2550. height: 90rpx;
  2551. margin: 0 0 30rpx 30rpx;
  2552. /* margin-top: 60rpx; */
  2553. }
  2554. .cu-btn-plan {
  2555. position: relative;
  2556. border: 0upx;
  2557. display: inline-flex;
  2558. align-items: center;
  2559. justify-content: center;
  2560. box-sizing: border-box;
  2561. padding: 4upx 25upx 4upx 4upx;
  2562. margin-left: 5px;
  2563. font-size: 22upx;
  2564. height: 64upx;
  2565. line-height: 1;
  2566. text-align: center;
  2567. text-decoration: none;
  2568. overflow: visible;
  2569. margin-left: initial;
  2570. transform: translate(0upx, 0upx);
  2571. margin-right: initial;
  2572. }
  2573. .cu-btn-plan-child {
  2574. position: relative;
  2575. border: 0upx;
  2576. display: inline-flex;
  2577. align-items: center;
  2578. justify-content: center;
  2579. box-sizing: border-box;
  2580. padding: 0 4upx;
  2581. font-size: 22upx;
  2582. height: 56upx;
  2583. line-height: 1;
  2584. text-align: center;
  2585. text-decoration: none;
  2586. overflow: visible;
  2587. margin-left: initial;
  2588. transform: translate(0upx, 0upx);
  2589. margin-right: initial;
  2590. }
  2591. .cu-btn-plan-right {
  2592. position: relative;
  2593. border: 0upx;
  2594. display: inline-flex;
  2595. align-items: center;
  2596. justify-content: center;
  2597. box-sizing: border-box;
  2598. padding: 4upx 4upx 4upx 19upx;
  2599. margin-left: 5px;
  2600. font-size: 22upx;
  2601. height: 64upx;
  2602. line-height: 1;
  2603. text-align: center;
  2604. text-decoration: none;
  2605. overflow: visible;
  2606. margin-left: initial;
  2607. transform: translate(0upx, 0upx);
  2608. margin-right: initial;
  2609. }
  2610. /* 粗线条 */
  2611. .line-make {
  2612. margin-top: 11px;
  2613. margin-left: 8px;
  2614. border: 4rpx solid #FFFFFF;
  2615. width: 152rpx;
  2616. border-radius: 3px;
  2617. }
  2618. /* 头像背景处理 */
  2619. .avatar-bg-personal {
  2620. width: 34px;
  2621. height: 34px;
  2622. border-radius: 45px;
  2623. border: 2px solid #9997fc;
  2624. background-color: #9997fc;
  2625. box-sizing: border-box;
  2626. }
  2627. .avatar-bg-arrow {
  2628. position: absolute;
  2629. top: 12px;
  2630. left: calc(50% - 10px);
  2631. border-left: 10px solid transparent;
  2632. border-right: 10px solid transparent;
  2633. border-bottom: 10px solid #9997fc;
  2634. }
  2635. .elect-round-image {
  2636. width: 48px;
  2637. height: 48px;
  2638. z-index: 10;
  2639. box-shadow: 1px 1px 3px #888888;
  2640. border-radius: 45px;
  2641. }
  2642. .elect-personal {
  2643. /* width: 100%; */
  2644. height: 120rpx;
  2645. /* margin: 50rpx 0; */
  2646. margin-bottom: 50rpx;
  2647. border-radius: 45px;
  2648. padding: 10rpx;
  2649. border: 1rpx solid rgba(255, 255, 255, 0.11);
  2650. display: flex;
  2651. justify-content: center;
  2652. align-items: center;
  2653. position: relative;
  2654. }
  2655. /* 呼吸灯 */
  2656. .breathing-lamp {
  2657. animation-duration: 1s;
  2658. animation-timing-function: ease-out;
  2659. animation-fill-mode: inherit;
  2660. animation-iteration-count: infinite;
  2661. animation-name: run-lamp;
  2662. animation-play-state: running;
  2663. }
  2664. @keyframes run-lamp {
  2665. 0%,
  2666. 100% {
  2667. opacity: 1;
  2668. transform: scale(1);
  2669. }
  2670. 50% {
  2671. opacity: 0.6;
  2672. transform: scale(0.9);
  2673. }
  2674. }
  2675. .personal-fruit-container {
  2676. position: absolute;
  2677. left: 0;
  2678. top: 0;
  2679. bottom: 0;
  2680. right: 0;
  2681. margin: auto;
  2682. display: flex;
  2683. align-items: center;
  2684. justify-content: center;
  2685. /* border: 1rpx solid #F0F0F0; */
  2686. }
  2687. .screen-jitter {
  2688. animation-duration: 1s;
  2689. animation-timing-function: ease-out;
  2690. animation-fill-mode: inherit;
  2691. animation-iteration-count: infinite;
  2692. animation-name: personal-shake;
  2693. animation-play-state: running;
  2694. }
  2695. .screen-red {
  2696. border: 1rpx solid #ff0000;
  2697. }
  2698. @keyframes personal-shake {
  2699. 0%,
  2700. 100% {
  2701. transform: translateX(0)
  2702. }
  2703. 10% {
  2704. transform: translateX(-9px)
  2705. }
  2706. 20% {
  2707. transform: translateX(8px)
  2708. }
  2709. 30% {
  2710. transform: translateX(-7px)
  2711. }
  2712. 40% {
  2713. transform: translateX(6px)
  2714. }
  2715. 50% {
  2716. transform: translateX(-5px)
  2717. }
  2718. 60% {
  2719. transform: translateX(4px)
  2720. }
  2721. 70% {
  2722. transform: translateX(-3px)
  2723. }
  2724. 80% {
  2725. transform: translateX(2px)
  2726. }
  2727. 90% {
  2728. transform: translateX(-1px)
  2729. }
  2730. }
  2731. .CountDownMask {
  2732. position: absolute;
  2733. top: 0;
  2734. bottom: 0;
  2735. right: 0;
  2736. left: 0;
  2737. background-color: rgba(0, 0, 0, 0.5);
  2738. z-index: 1000;
  2739. display: flex;
  2740. justify-content: center;
  2741. align-items: center;
  2742. font-size: 100px;
  2743. font-weight: bold;
  2744. color: #FFFFFF;
  2745. }
  2746. /**
  2747. * 任务样式
  2748. */
  2749. .task-up-button {
  2750. z-index: 10;
  2751. /* #ifndef APP-PLUS-NVUE */
  2752. position: absolute;
  2753. /* #endif */
  2754. /* #ifdef APP-PLUS-NVUE */
  2755. position: fixed;
  2756. /* #endif */
  2757. bottom: -10px;
  2758. right: 0;
  2759. left: 0;
  2760. margin: auto;
  2761. width: 750rpx;
  2762. height: 68rpx;
  2763. }
  2764. </style>