personal.vue 82 KB

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