personal.vue 84 KB

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