123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350351352353354355356357358359360361362363364365366367368369370371372373374375376377378379380381382383384385386387388389390391392393394395396397398399400401402403404405406407408409410411412413414415416417418419420421422423424425426427428429430431432433434435436437438439440441442443444445446447448449450451452453454455456457458459460461462463464465466467468469470471472473474475476477478479480481482483484485486487488489490491492493494495496497498499500501502503504505506507508509510511512513514515516517518519520521522523524525526527528529530531532533534535536537538539540541542543544545546547548549550551552553554555556557558559560561562563564565566567568569570571572573574575576577578579580581582583584585586587588589590591592593594595596597598599600601602603604605606607608609610611612613614615616617618619620621622623624625626627628629630631632633634635636637638639640641642643644645646647648649650651652653654655656657658659660661662663664665666667668669670671672673674675676677678679680681682683684685686687688689690691692693694695696697698699700701702703704705706707708709710711712713714715716717718719720721722723724725726727728729730731732733734735736737738739740741742743744745746747748749750751752753754755756757758759760761762763764765766767768769770771772773774775776777778779780781782783784785786787788789790791792793794795796797798799800801802803804805806807808809810811812813814815816817818819820821822823824825826827828829830831832833834835836837838839840841842843844845846847848849850851852853854855856857858859860861862863864865866867868869870871872873874875876877878879880881882883884885886887888889890891892893894895896897898899900901902903904905906907908909910911912913914915916917918919920921922923924925926927928929930931932933934935936937938939940941942943944945946947948949950951952953954955956957958959960961962963964965966967968969970971972973974975976977978979980981982983984985986987988989990991992993994995996997998999100010011002100310041005100610071008100910101011101210131014101510161017101810191020102110221023102410251026102710281029103010311032103310341035103610371038103910401041104210431044104510461047104810491050105110521053105410551056105710581059106010611062106310641065106610671068106910701071107210731074107510761077107810791080108110821083108410851086108710881089109010911092109310941095109610971098109911001101110211031104110511061107110811091110111111121113111411151116111711181119112011211122112311241125112611271128112911301131113211331134113511361137113811391140114111421143114411451146114711481149115011511152115311541155115611571158115911601161116211631164116511661167116811691170117111721173117411751176117711781179118011811182118311841185118611871188118911901191119211931194119511961197119811991200120112021203120412051206120712081209121012111212121312141215121612171218121912201221122212231224122512261227122812291230123112321233123412351236123712381239124012411242124312441245124612471248124912501251125212531254125512561257125812591260126112621263126412651266126712681269127012711272127312741275127612771278127912801281128212831284128512861287128812891290129112921293129412951296129712981299130013011302130313041305130613071308130913101311131213131314131513161317131813191320132113221323132413251326132713281329133013311332133313341335133613371338133913401341134213431344134513461347134813491350135113521353135413551356135713581359136013611362136313641365136613671368136913701371137213731374137513761377137813791380138113821383138413851386138713881389139013911392139313941395139613971398139914001401140214031404140514061407140814091410141114121413141414151416141714181419142014211422142314241425142614271428142914301431143214331434143514361437143814391440144114421443144414451446144714481449145014511452145314541455145614571458145914601461146214631464146514661467146814691470147114721473147414751476147714781479148014811482148314841485148614871488148914901491149214931494149514961497149814991500150115021503150415051506150715081509151015111512151315141515151615171518151915201521152215231524152515261527152815291530153115321533153415351536153715381539154015411542154315441545154615471548154915501551155215531554155515561557155815591560156115621563156415651566156715681569157015711572157315741575157615771578157915801581158215831584158515861587158815891590159115921593159415951596159715981599160016011602160316041605160616071608160916101611161216131614161516161617161816191620162116221623162416251626162716281629163016311632163316341635163616371638163916401641164216431644164516461647164816491650165116521653165416551656165716581659166016611662166316641665166616671668166916701671167216731674167516761677167816791680168116821683168416851686168716881689169016911692169316941695169616971698169917001701170217031704170517061707170817091710171117121713171417151716171717181719172017211722172317241725172617271728172917301731173217331734173517361737173817391740174117421743174417451746174717481749175017511752175317541755175617571758175917601761176217631764176517661767176817691770177117721773177417751776177717781779178017811782178317841785178617871788178917901791179217931794179517961797179817991800180118021803180418051806180718081809181018111812181318141815181618171818181918201821182218231824182518261827182818291830183118321833183418351836183718381839184018411842184318441845184618471848184918501851185218531854185518561857185818591860186118621863186418651866186718681869187018711872187318741875187618771878187918801881188218831884188518861887188818891890189118921893189418951896189718981899190019011902190319041905190619071908190919101911191219131914191519161917191819191920192119221923192419251926192719281929193019311932193319341935193619371938193919401941194219431944194519461947194819491950195119521953195419551956195719581959196019611962196319641965196619671968196919701971197219731974197519761977197819791980198119821983198419851986198719881989199019911992199319941995199619971998199920002001200220032004200520062007200820092010201120122013201420152016201720182019202020212022202320242025202620272028202920302031203220332034203520362037203820392040204120422043204420452046204720482049205020512052205320542055205620572058205920602061206220632064206520662067206820692070207120722073207420752076207720782079208020812082208320842085208620872088208920902091209220932094209520962097209820992100210121022103210421052106210721082109211021112112211321142115211621172118211921202121212221232124212521262127212821292130213121322133213421352136213721382139214021412142214321442145214621472148214921502151215221532154215521562157215821592160216121622163216421652166216721682169217021712172217321742175217621772178217921802181218221832184218521862187218821892190219121922193219421952196219721982199220022012202220322042205220622072208220922102211221222132214221522162217221822192220222122222223222422252226222722282229223022312232223322342235223622372238223922402241224222432244224522462247224822492250225122522253225422552256225722582259226022612262226322642265226622672268226922702271227222732274227522762277227822792280228122822283228422852286228722882289229022912292229322942295229622972298229923002301230223032304230523062307230823092310231123122313231423152316231723182319232023212322232323242325232623272328232923302331233223332334233523362337233823392340234123422343234423452346234723482349235023512352235323542355235623572358235923602361236223632364236523662367236823692370237123722373237423752376237723782379238023812382238323842385238623872388238923902391239223932394239523962397239823992400240124022403240424052406240724082409241024112412241324142415241624172418241924202421242224232424242524262427242824292430243124322433243424352436243724382439244024412442244324442445244624472448244924502451245224532454245524562457245824592460246124622463246424652466246724682469247024712472247324742475247624772478247924802481248224832484248524862487248824892490249124922493249424952496249724982499250025012502250325042505250625072508250925102511251225132514251525162517251825192520252125222523252425252526252725282529253025312532253325342535253625372538253925402541254225432544254525462547254825492550255125522553255425552556255725582559256025612562256325642565256625672568256925702571257225732574257525762577257825792580258125822583258425852586258725882589259025912592259325942595259625972598259926002601260226032604260526062607260826092610261126122613261426152616261726182619262026212622262326242625262626272628262926302631263226332634263526362637263826392640264126422643264426452646264726482649265026512652265326542655265626572658265926602661266226632664266526662667266826692670267126722673267426752676267726782679268026812682268326842685268626872688268926902691269226932694269526962697269826992700270127022703270427052706270727082709271027112712271327142715271627172718271927202721272227232724272527262727272827292730273127322733273427352736273727382739274027412742274327442745274627472748274927502751275227532754275527562757275827592760276127622763276427652766276727682769277027712772277327742775277627772778277927802781278227832784278527862787278827892790279127922793279427952796279727982799280028012802280328042805280628072808280928102811281228132814281528162817281828192820282128222823282428252826282728282829283028312832283328342835283628372838283928402841284228432844284528462847284828492850285128522853285428552856285728582859286028612862286328642865286628672868286928702871287228732874287528762877287828792880288128822883288428852886288728882889289028912892289328942895289628972898289929002901290229032904290529062907290829092910291129122913291429152916291729182919292029212922292329242925292629272928292929302931293229332934293529362937293829392940294129422943294429452946294729482949295029512952295329542955295629572958295929602961296229632964296529662967296829692970297129722973297429752976297729782979298029812982298329842985298629872988298929902991299229932994299529962997299829993000300130023003300430053006300730083009301030113012301330143015301630173018301930203021302230233024302530263027302830293030303130323033303430353036303730383039304030413042304330443045304630473048304930503051305230533054305530563057305830593060306130623063306430653066306730683069307030713072307330743075307630773078307930803081308230833084308530863087308830893090309130923093309430953096309730983099 |
- <template>
- <view class="content bg-person " :class="bEFHitShake?' screen-jitter ':''">
- <!-- :title="title" @clickRight="onNavAppInfo()" -->
- <!-- 自定义导航栏 backgroundColor="rgba(164, 136, 220, 1)" @clickRight="onSyncData" @clickRight="onTestShare"-->
- <uni-nav-bar id="nav-bar" status-bar="true" backgroundColor="rgba(153, 150, 252, 255)"
- @clickLeft="showClickEvent()" title="" color="#FFFFFF" fixed="true" :border="false">
- <view slot="left">
- <view class=" flex align-center margin-left">
- <image class="png-more" src="/static/more.png"></image>
- </view>
- </view>
- <!-- @clickRight="onNavFcGame()" -->
- <!-- <view slot="right">
- </view> -->
- </uni-nav-bar>
- <view style="display: flex;position: absolute;top:30rpx;right: 40rpx; z-index: 10000;">
- <view class=" flex flex-direction" style="color: #fff;">
- <view class="flex align-center">
- <image class="png-more" style="margin-right: 18rpx;" src="/static/personal/cDiamond.png"></image>
- <view>{{cDiamond}}</view>
- </view>
- <view class="flex align-center" style="margin-top: 30rpx;">
- <image class="png-more" style="margin-right: 18rpx;" src="/static/personal/cGold.png"></image>
- <view>{{cGold}}</view>
- </view>
- </view>
- </view>
- <!-- 导航栏下面滚动区域 -->
- <scroll-view class="scroll-class" @scroll="mainScroll" :scroll-top="scrollTop" :scroll-into-view="toView"
- scroll-y="true" :style="{ height: scrollviewHight + 'px' }">
- <view class="flex align-center">
- <view class="text-center">
- <!-- 计划显示 区域 topScrollHight :style="{ height: + '100%' }"-->
- <scroll-view scroll-y="true" style="height: 100%; width: 100%;">
- <view class="plan-view">
- <!-- 拳击模块 -->
- <view v-if="currentMode == 'pkMode'"
- style="display: flex; flex-direction: row; height: 200rpx; margin-top: 140rpx; justify-content: space-around;align-items: center;">
- <view>
- <view class="cu-avatar-group" style="position: relative;">
- <view class="cu-avatar round xl" :class="bAiHitShake?' screen-jitter':''"
- :style="[{ backgroundImage:'url('+avatarUrl+')' }]"></view>
- <HitEffect ref="aiHitEffectRef"></HitEffect>
- </view>
- <view style="margin-top: 20rpx; width: 165rpx;" class="text-cut text-white">
- {{userName}}
- </view>
- </view>
- <view>
- <image style="width: 104rpx; height: 42rpx ;margin-bottom: 60rpx;"
- src="/static/personal/pk@2x.png"></image>
- </view>
- <view>
- <view class="cu-avatar-group" style="position: relative;">
- <view class="cu-avatar round xl" :class="bHitShake?' screen-jitter':''"
- :style="[{ backgroundImage:'url('+aiObj.avatar+')' }]"></view>
- <HitEffect ref="hitEffectRef"></HitEffect>
- </view>
- <view style="margin-top: 20rpx; width: 165rpx;" class="text-cut text-white">
- {{aiObj.name}}
- </view>
- </view>
- <view
- style="position: absolute;left: 0;right: 0;top: 0;bottom: 0; height: 200rpx; margin-top: 120rpx;">
- <HitFistEffect ref="hitFistRef"></HitFistEffect>
- </view>
- </view>
- <!-- 圆形进度条 -->
- <view v-else class="qiun-charts-arcbar">
- <!-- 进度条 -->
- <canvas canvas-id="canvasArcbar" id="canvasArcbar" class="charts-arcbar "></canvas>
- <!-- 图标 -->
- <view class="personal-fruit-container">
- <image style="width: 36rpx;height: 56rpx; margin-top: -100px;"
- src="../../../static/modal/action-jump/arcbarJumpIcon.png"></image>
- </view>
- <!-- 水果卡路里-->
- <!-- <view class="personal-fruit-container">
- <fruit ref="personalFruitRef" :calorie="planData.allCalorie"></fruit>
- </view> -->
- <!-- 计划运动时间提示 -->
- <view class="personal-fruit-container">
- <LEDFont style="margin-top: 50px;" :showValue='99' :size="66" color='#FFFFFF'>
- </LEDFont>
- <!-- <view style="margin-top: 130px;font-size:12px;color: #FFFFFF;">计划时间{{planData.sportTime}}分钟</view> -->
- </view>
- <!-- 计划按钮 -->
- <!-- <view id="projectButtonView" style="position: absolute;left: 0;top: 18px;">
- <view class="flex justify-center" style="width: 100%;">
- <view class="charts-pring-button make-line-bPurple " :class="bPlanExpired?'breathing-lamp':''" style="background-color: #FFFFFF;"
- @tap="openPlan">
- <image src="/static/reform.png" class="p-data-png" mode="aspectFit"></image>
- <view class="text-11px">改计划</view>
- </view>
- </view>
- </view> -->
- <!-- 卡路里提示 -->
- <view class="personal-fruit-container">
- <prompt-box :calorie="planData.allCalorie"></prompt-box>
- </view>
- </view>
- <!-- 计划按钮 -->
- <!-- <view id="projectButtonView" style="position: absolute;left: 0;top: 18px;">
- <view class="flex justify-center" style="width: 100%;">
- <view class="charts-pring-button make-line-bPurple " :class="bPlanExpired?'breathing-lamp':''" style="background-color: #FFFFFF;"
- @tap="openPlan">
- <image src="/static/reform.png" class="p-data-png" mode="aspectFit"></image>
- <view class="text-11px">改计划</view>
- </view>
- </view>
- </view> -->
- <!-- 用于定位 -->
- <!-- <view id="boxingHitID" style="position: absolute;top: 180rpx; pointer-events: none;" ></view> -->
- <view id="boxingHitID" v-if="currentModeIndex == 0" class="charts-pring-bottom">
- <!-- 添加一个 ConnectBindingDevice 测试 -->
- <boxing-hit ref="boxingPostRef"
- :bUpdate="!bHide&&(ConnectBindingDevice!=null)||(cIndex!=-1 && BLEConnectDevice!=null &&
- (BLEConnectDevice.deviceType == 'mySelf'||BLEConnectDevice.deviceType == 'BLEHandle' || BLEConnectDevice.deviceType == 'BLERope' ))"
- :showTime="localSportTime"
- :bRebound="BLEConnectDevice&&BLEConnectDevice.limitType == 'rebound'"
- @updateCalorie="boxingUpdateCalorie" @boxingPostCheck="onPersonalCheck"
- @shake="onScreenShake" @updateSportTime="onUpdateSportTime"
- @boxingGuideFinish="onBoxingGuideFinish"
- @boxingPostControlPlay="onBoxingPostControlPlay" @modeEvent="onModeEvent"
- @hitEvent="onHitEvent" @aiHitEvent="onAiHitEvent" @gameOver="onBoxingGameOver"
- @closeBoxingControl="onCloseBoxingHit"></boxing-hit>
- </view>
- <view id='actionJumpID' v-if="true" class="charts-pring-bottom">
- <action-jump ref="actionJumpRef" @onControllerPlay="onPersonalCheck"></action-jump>
- </view>
- <!-- <button @tap="onTestAddLocalCalorie">11</button> -->
- </view>
- </scroll-view>
- <!-- <view class="margin flex flex-direction">
- <view class="title">当前游戏链接:{{LocationGameUrl}}</view>
- <input style="border: 1rpx solid #000000;margin: 10rpx;" @input="onKeyInput" placeholder="输入同步到view中" />
- </view> -->
- <!-- <button @tap="onShowBoxingHitTip">11</button> -->
- <!--数据展示部分 -->
- <view class="bottom-view" style="position: relative;">
- <view
- style="position: absolute; z-index: 1; background-color: #FFFFFF; width: 100%; height: 217px; "
- class="flex justify-center">
- <view
- style="border: 3px solid #9797ff; width: 35px; height: 3px; border-radius: 5px; margin-top: 9px;">
- </view>
- </view>
- <view style="height: 26px ;"></view>
- <view class="card-view">
- <view class="flex justify-between margin-top margin-left">
- <view class="flex justify-start">
- <image src="/static/sync.png" class=" data-png" mode="aspectFit" @tap="onSyncData">
- </image>
- <view class="text-gray" style="margin-left: 10rpx;">{{ currentDate }}同步</view>
- </view>
- <!-- <view class="flex justify-start margin-right">
- <view class="text-gray">标准体重:</view>
- <view class="make-text-bPurple" style="margin-left: 10rpx;">120斤</view>
- </view> -->
- </view>
- <view class="text-xl padding">
- <view class="make-text-bPurple">
- {{ weight }}公斤
- <!-- <span class="text-11px text-gray "> (过重)</span> -->
- </view>
- </view>
- <!-- 曲线图绘制部分 -->
- <view class="qiun-charts-area">
- <canvas canvas-id="canvasLineA" id="canvasLineA" class="charts-area"
- @touchstart.prevent="touchLineA" @touchmove.prevent="moveLineA"
- @touchend.prevent="touchEndLineA"></canvas>
- </view>
- <view class="bg-white qiun-charts-bottom-container">
- <view class="avatar-bg-arrow"></view>
- <view class="avatar-bg-personal">
- <image mode="aspectFit" :src="avatarUrl"
- style="width: 100%;height: 100%; border-radius: 45px;background-color: #000000;">
- </image>
- </view>
- <view class="qiun-charts-bottom-right" @tap.prevent="showModal"
- data-target="bottomModal">
- <image src="/static/weightEdit.png" class="png-size-34" mode="aspectFit"></image>
- </view>
- </view>
- </view>
- <view class="cu-modal bottom-modal" :class="modalName == 'bottomModal' ? 'show' : ''">
- <view class="cu-dialog"
- style=" border-top-right-radius: 20rpx; border-top-left-radius: 20rpx;">
- <myPicker :pickerObj="pickerObj" @confirmEvent="onConfirm" @cancelEvent="hideModal">
- </myPicker>
- </view>
- </view>
- <view class="card-view">
- <!-- 累计消耗和计划 -->
- <view class="flex margin-top-sm margin-bottom-sm justify-center">
- <view class=" padding-sm margin-right plan-l-tip-view flex align-center">
- <image src="/static/middlePlant.png" class="data-png-26 margin-sm" mode="aspectFit">
- </image>
- <view class="flex justify-start flex-direction">
- <text
- style="text-align: start; line-height: 24px; font-weight: 400;">累计消耗</text>
- <view class="text-11px "
- style="text-align: start;font-weight: 400; line-height: 28px;">
- {{ planData.cumulativeCalorie }}/ka
- </view>
- <view class="text-gray" style="font-size: 10px;">始于{{ planData.startTime }}
- </view>
- </view>
- </view>
- <view style="height: 56px; width: 1rpx;margin-top: 16px; background-color: #EEEEEE;">
- </view>
- <view
- class="padding-sm margin-left-xs margin-right-xl plan-r-tip-view flex align-center">
- <image src="/static/middleDay.png" class="data-png-26 margin-sm" mode="aspectFit">
- </image>
- <view class="flex justify-start flex-direction">
- <text style="text-align: start; line-height: 24px;font-weight: 400;">剩余天数</text>
- <view class="text-11px "
- style="text-align: start;font-weight: 400;line-height: 28px;">
- {{ remainingDays }}/day
- </view>
- <view class="text-gray" style="font-size: 10px;">计划天数{{ days }}</view>
- </view>
- </view>
- </view>
- </view>
- <!-- 添加设备部分 -->
- <view class="card-view">
- <view class="text-left padding margin-xs flex justify-between">
- <text class="text-black text-15px margin-left">我的设备</text>
- <!-- <view @tap="onNavToMore" class="flex text-center justify-center align-center margin-right">
- <text class="text-gray text-11px">查看更多</text>
- <image style="margin-left: 6rpx; width: 24rpx;height: 22rpx;" src="/static/right-g.png"></image>
- </view> -->
- </view>
- <!-- 绑定的设备列表 拳击柱-->
- <!-- <view class="container-device">
- <view class="width-device flex align-center" v-for="(item, index) in DeviceBindingList" :key="index" @tap="onBindingDevice(item, index)"
- :data-index="index" :id="'bing-'+item.ename">
- <view style="position: relative; height: 100%;">
- <image :src="index == cIndex ? '/static/deviceBg.png' : '/static/deviceBg_off.png'" class="data-png-64" mode="aspectFit"></image>
- <image :src="index == cIndex ?item.icon:item.mIcon" class="data-png-add" mode="aspectFit"></image>
- </view>
- <view class="flex-sub text-center">
- <image :src="index == cIndex ? '/static/wifi_on.png' : '/static/wifi_off.png'" class="data-png-32" mode="aspectFit"></image>
- <view class="text-gray">{{ item.cname }}</view>
- </view>
- </view>
- <view id="QRDeviceView" class="width-device flex align-center" @tap="openQRCode">
- <view style="position: relative;height: 100%;">
- <image src="/static/deviceBg.png" class="data-png-64" mode="aspectFit"></image>
- <image src="/static/deviceAdd.png" class="data-png-add" mode="aspectFit"></image>
- </view>
- <view class="flex-sub text-center">
- <view class="text-gray">扫码添加设备</view>
- </view>
- </view>
- </view> -->
- <!-- 开启手机加速计和陀螺仪数据 -->
- <!-- <view class="container-device" id="openAccGyroView">
- <view class="width-device flex align-center" v-for="(item, index) in DeviceBindingList" @tap="onBindingDevice(item, 0)"
- :key="'key-'+index" :id="'bing-'+item.ename">
- <view style="position: relative; height: 100%;">
- <image :src="ConnectBindingDevice? '/static/deviceBg.png' : '/static/deviceBg_off.png'" class="data-png-64"
- mode="aspectFit"></image>
- <image :src="ConnectBindingDevice?item.icon:item.mIcon" class="data-png-add" mode="aspectFit"></image>
- </view>
- <view class="flex-sub text-center">
- <image :src="ConnectBindingDevice? '/static/wifi_on.png' : '/static/wifi_off.png'" class="data-png-32" mode="aspectFit"></image>
- <view class="text-gray">{{ item.cname }}</view>
- </view>
- </view>
- </view> -->
- <!-- 隐藏设备处 -->
- <view class="container-device">
- <view class="width-device flex align-center" v-for="(item, index) in BLEDeviceShowList"
- :key="index" @tap="onDevice(item, $event)" :data-index="index">
- <view style="position: relative; height: 100%;">
- <image
- :src="index == cIndex ? '/static/deviceBg.png' : '/static/deviceBg_off.png'"
- class="data-png-64" mode="aspectFit"></image>
- <image :src="item.mIcon" class="data-png-add" mode="aspectFit"></image>
- </view>
- <view class="flex-sub text-center">
- <image :src="index == cIndex ? '/static/wifi_on.png' : '/static/wifi_off.png'"
- class="data-png-32" mode="aspectFit"></image>
- <view class="text-gray">{{ item.cname }}</view>
- </view>
- <view style="position: absolute;right: 0;top: 0;"
- @tap.stop="onCloseDevice(item, $event)" :data-index="index">
- <image :src="index == cIndex ? '/static/d_on.png' : '/static/d_off.png'"
- class="data-png-26" mode="aspectFit"></image>
- </view>
- </view>
- <view id="addDeviceView" class="width-device flex align-center" @tap="openDeviceList">
- <view style="position: relative;height: 100%;">
- <image src="/static/deviceBg.png" class="data-png-64" mode="aspectFit"></image>
- <image src="/static/deviceAdd.png" class="data-png-add" mode="aspectFit">
- </image>
- </view>
- <view class="flex-sub text-center">
- <view class="text-gray">添加设备</view>
- </view>
- </view>
- </view>
- </view>
- <!-- 游戏推荐 -->
- <view class="card-view"
- v-if="ConnectBindingDevice || (cIndex != -1 && versionCodeState&&versionCodeState.showGame && gameList.length !== 0)">
- <view class="text-left padding margin-xs flex justify-between">
- <text class="text-black text-15px margin-left">游戏推荐</text>
- <view data-type="game" @tap="onNavToGameMore"
- class="flex text-center justify-center align-center margin-right">
- <view class="text-gray text-11px " style=" line-height: 12px; ">查看更多</view>
- <image style="margin-left: 6rpx; width: 24rpx;height: 22rpx; "
- src="/static/right-g.png"></image>
- </view>
- </view>
- <view class="cu-item shadow">
- <view class="cu-form-group margin-top">
- <view class="grid col-3 homepage-grid-square flex-sub ">
- <view v-for="(item, index) in gameList" :key="index" @tap="onNavDetail(item)">
- <image class="item-img" :src="item.gamePicture" mode="aspectFill"></image>
- <view class="border text-center">{{ item.gameName }}</view>
- </view>
- </view>
- </view>
- </view>
- <!-- <view @tap="onNavToGameMore" class="flex text-center justify-center align-center padding-lg make-text-bPurple solid-top margin text-15px text-bold">
- 查看更多
- <image style="margin-left: 20rpx; width: 28rpx;height: 28rpx;" src="../../../static/right-d.png"></image>
- </view> -->
- </view>
- <!-- <button class="margin" @click="onWriteBLEConnectionValue({value:'V'})">设备版本</button> -->
- <!-- <button class="margin" @click="openAcc">开启手机加速计和方向传感器</button> -->
- <!-- <button class="margin" @click="closeAcc">关闭手机加速计和方向传感器</button> -->
- <!-- <button class="margin" @click="openGyro">开启手机加速计和方向传感器</button> -->
- <!-- <button class="margin" @click="stopGyro">关闭手机加速计和方向传感器</button> -->
- <!-- <button class="margin" @click="getBLEDeviceServices">getBLEDeviceServices</button> -->
- <!-- <keyboard-listener @keydown="onKeyDown"></keyboard-listener> -->
- <!-- <button type="primary" @click="testAsyncFunc">testAsyncFunc</button>
- <button type="primary" @click="startSyncFunc">startSyncFunc</button>
- <button type="primary" @click="stopSyncFunc">stopSyncFunc</button> -->
- <!-- 视频推荐 -->
- <view class="card-view"
- v-if="ConnectBindingDevice || (cIndex != -1 && versionCodeState&&versionCodeState.showVideo && videoList.length !== 0)">
- <view class="text-left padding margin-xs flex justify-between">
- <text class="text-black text-15px margin-left">视频推荐</text>
- <view data-type="video" @tap="onNavToGameMore"
- class="flex text-center justify-center align-center margin-right">
- <view class="text-gray text-11px " style=" line-height: 12px; ">查看更多</view>
- <image style="margin-left: 6rpx; width: 24rpx;height: 22rpx; "
- src="/static/right-g.png"></image>
- </view>
- </view>
- <view class="cu-item shadow">
- <view class="cu-form-group margin-top">
- <view class="grid col-3 homepage-grid-square flex-sub ">
- <view v-for="(item, index) in videoList" :key="index" @tap="onNavDetail(item)">
- <image class="item-img" :src="item.gamePicture" mode="aspectFill"></image>
- <view class="border text-center">{{ item.gameName }}</view>
- </view>
- </view>
- </view>
- </view>
- </view>
- </view>
- </view>
- </view>
- </scroll-view>
- <!-- 右下角导航栏 -->
- <!-- <round-menu @trigger="onRoundTrigger"></round-menu> -->
- <!-- 侧边栏 -->
- <sideBar ref="sideBar"></sideBar>
- <!-- 训练卡 -->
- <view class="cu-modal" :class="modalName == 'sportCompletion' ? 'show' : ''">
- <view style="
- position: relative;
- width: 586rpx;
- height: 766rpx;
- background-color: #FFFFFF;
- border-radius: 25px;
- display: inline-block;
- vertical-align: middle;
- margin-left: auto;
- margin-right: auto;
- overflow: hidden;">
- <view style="position: relative; width: 100%; height: 328rpx;">
- <image style="position: absolute;top: 0;left: 0; width: 100%;height: 100%;"
- src="../../../static/sidebar_top_bg.png"></image>
- <view class="flex flex-direction justify-around align-center"
- style="position: relative; height: 100%;">
- <view class="text-white">已在哔嘣健身训练了</view>
- <view class="text-white"><span style="font-size: 43px;">{{sportData.time}}</span> 分钟</view>
- <view class="text-white">本次达标率{{sportData.percent}}%</view>
- </view>
- </view>
- <view class="flex justify-around">
- <view class="flex flex-direction justify-around align-center"
- style="position: relative; height: 162rpx;">
- <view class="text-grey">消耗</view>
- <view class="text-grey"><span
- style="font-size: 18px; color: #000000;">{{sportData.calorie}}</span> 卡</view>
- </view>
- <view class="flex flex-direction justify-around align-center"
- style="position: relative; height: 162rpx;">
- <view class="text-grey">踩中</view>
- <view class="text-grey"><span style="font-size: 18px; color: #000000;">{{sportData.hit}}</span>
- 次</view>
- </view>
- <view class="flex flex-direction justify-around align-center"
- style="position: relative; height: 162rpx;">
- <view class="text-grey">失误</view>
- <view class="text-grey"><span style="font-size: 18px; color: #000000;">{{sportData.miss}}</span>
- 次</view>
- </view>
- </view>
- <view class="flex flex-direction justify-around align-center margin-top-sm">
- <view style="position: relative; width: 500rpx; border:1rpx solid #EEEEEE ;"></view>
- </view>
- <view class="flex flex-direction justify-around align-center" style="height: 230rpx;">
- <view class="text-black text-16px">非常优秀,继续加油!</view>
- <view class="flex justify-center align-center text-white make-bg-bPurple round text-16px"
- style="width: 300rpx;height: 80rpx;" @tap="hideModal">确定</view>
- </view>
- </view>
- </view>
- <!-- :class="modalName == 'jumpAnimation' ? 'show' : ''" -->
- <view class="cu-modal " :class="modalName == 'jumpAnimation' ? '' : ''">
- <view style="
- position: relative;
- width: 586rpx;
- height: 400rpx;
- background-color: #FFFFFF;
- border-radius: 4px;
- display: inline-block;
- vertical-align: middle;
- margin-left: auto;
- margin-right: auto;
- overflow: hidden;">
- <view style="height: 100%;display: flex;justify-content: center;align-items: center;">
- <character></character>
- </view>
- </view>
- </view>
- <!-- 引导蒙层 bGuidePages guideCurrent-->
- <code-elf-guide ref="codeElfGuide" v-if="bGuidePages" @hide="guideHide" @change="onGuideChange"
- :current="guideCurrent" :currentMode="currentMode"></code-elf-guide>
- <!-- <view v-if="bStartBoxingPost" class="CountDownMask">
- {{BoxingPostCountDownText}}
- </view> -->
- <view class="cu-modal " :class="modalName=='showPlanTipModal'?'show':''"
- @touchmove.stop.prevent="moveBoxingHandle">
- <view class="cu-bind-modal">
- <view style="position: absolute; top: 0; left: 0; width: 100%; height:100%;">
- <image style="position: absolute;top: 0;left: 0; width: 100%;height: 100%;"
- src="/static/modelBg.png"></image>
- </view>
- <view class="flex flex-direction justify-between " style="position: relative; height: 100%;">
- <view class="flex justify-around justify-center align-center" style="margin: 170rpx 30rpx 0 30rpx;">
- <view style="width: 80rpx;height: 2rpx;border-radius: 2px; background-color: #cbcdcf;"></view>
- <view class="make-text-bPurple" style=" font-size: 20px;">提示</view>
- <view style="width: 80rpx;height: 2rpx;border-radius: 2px;background-color: #cbcdcf;"></view>
- </view>
- <view class="text-16px" style="align-self: center; max-width: 200px; word-break: break-all;">
- {{planTip[planTipIndex]}}
- </view>
- <view class="flex justify-around align-center"
- style=" border-top: 1rpx solid #EEEEEE; margin-bottom: 2px;">
- <view class="flex justify-center align-center text-16px" style="width: 100%;height: 123rpx;"
- @tap="hidePlanTipModal">取消</view>
- <view style="height: 123rpx;width: 1px;background-color: #EEEEEE;"></view>
- <view class="flex justify-center align-center text-16px" style="width: 100%;height: 123rpx;"
- @tap="confirmPlanTipModal">确定</view>
- </view>
- </view>
- </view>
- </view>
- <ModalTip ref='modalTipRef' :class="modalName=='showModalTip'?' show':''" @hide="onModalTipHide"
- @confirm="onModalTipConfirm"></ModalTip>
- </view>
- </template>
- <script>
- import uniNavBar from '@/components/uni-nav-bar/uni-nav-bar.vue';
- import uCharts from '@/components/u-charts/u-charts.js';
- import myPicker from '@/components/slambb-picker/slambb-picker.vue';
- import pickerData from '@/components/slambb-picker/picker.js';
- import date from '@/util/util-js/date.js';
- import sideBar from '@/components/side-bar/side-bar.vue';
- import reqUtil from '@/util/util-js/requstUtil.js';
- import config from '@/common/config.js';
- import uniCountDown from '@/components/uni-count-down/uni-count-down.vue'
- import elect from "@/components/electAni/electAnimation.vue"
- import character from "@/components/electAni/character.vue"
- import fruit from "@/components/fruitMachine/fruitMachine.vue"
- import promptBox from "@/components/prompt-box/prompt-box.vue"
- import roundMenu from "@/components/round-menu/round-menu.vue"
- import codeElfGuide from '@/components/code-elf-guide/code-elf-guide.vue'
- import boxingPost from "@/components/modal/boxing-post/boxing-post.vue"
- import boxingHit from "@/components/modal/boxing-hit/boxing-hit.vue"
- import actionJump from "@/components/modal/action-jump/action-jump.vue"
- import AccAndOri from "@/util/util-js/AccAndOri.js"
- import AvatarConfig from "@/util/util-js/avatar.js"
- import HitEffect from "@/components/effectHit/hitEffect.vue"
- import HitFistEffect from "@/components/effectHit/hitFistEffect.vue"
- import ModalTip from "@/components/modal-tip/modalTip.vue"
- import keyboardListener from '@/components/keyboard-listener/keyboard-listener.vue'
- import LEDFont from '@/components/LEDFont/LEDFont.vue'
- // 获取 module
- // var testModule = uni.requireNativePlugin("MyAttitude")
- // const modal = uni.requireNativePlugin('modal');
- import {
- mapState,
- mapMutations
- } from 'vuex';
- var _self;
- var canvaArcbar1;
- var canvaLineA = null;
- var sportSpeedInterval = null;
- var personalAcc = null;
- export default {
- computed: mapState(['bCanvasShow', 'forcedLogin', 'hasLogin', 'userName', 'avatarUrl', 'days', 'remainingDays',
- 'signature', 'weight', 'height', 'planData', 'BLEDeviceShowList', 'BLEConnectDevice', 'bPlanExpired',
- 'bPlanFinish',
- 'bGuidePages',
- 'globalAcc', 'globalOri', 'DeviceBindingList', 'ConnectBindingDevice', 'cIndex', 'bNewGuide',
- 'localSportTime',
- 'currentModeIndex', 'oldArcbarProCalorie', 'oldArcbarAllCalorie', 'bOpenBluetooth', 'bOpenSuccess',
- 'bListenAdapterStateChange', 'bConnection', 'bVerifiedConnection', 'currentInstruction',
- 'instructionState',
- 'LocationGameUrl',
- 'bPhoneMatched',
- 'versionCodeState',
- 'platform',
- 'cDiamond', 'cGold'
- ]),
- components: {
- uniNavBar,
- myPicker,
- sideBar,
- uniCountDown,
- elect,
- character,
- fruit,
- roundMenu,
- codeElfGuide,
- boxingPost,
- boxingHit,
- promptBox,
- HitEffect,
- HitFistEffect,
- ModalTip,
- keyboardListener,
- actionJump,
- LEDFont
- },
- data() {
- return {
- title: 'pk模式', //pk模式 健身模式
- modalName: null,
- originalDate: '', //记录new date
- currentDate: '', //当前日期
- cWidthArcbar: '', //圆弧进度图
- cHeightArcbar: '', //圆弧进度图
- arcbarWidth: '', //圆弧进度图,进度条宽度,此设置可使各端宽度一致
- pixelRatio: 1,
- // textarea: '',
- // arcbarImagePath: '/static/logo.png',
- cWidth: '',
- cHeight: '',
- scrollviewHight: '',
- // 顶部区域部分
- topScrollHight: '',
- // 选择器
- pickerObj: {},
- // lineAImagePath: '/static/logo.png',
- // visible: true,
- // indicatorStyle: `height: ${Math.round(uni.getSystemInfoSync().screenWidth / (750 / 100))}px;`,
- //设备列表
- deviceList: [{
- name: '蹦床',
- icon: '/static/trampoline.png'
- }],
- cState: 1,
- //游戏列表
- gameList: [],
- //视频列表,现在视频是和游戏一起管理
- videoList: [],
- //运动数据
- sportData: {
- calorie: 0,
- hit: 0,
- miss: 0,
- percent: 0,
- time: 0,
- allData: 0
- },
- //设置滚动栏高度
- scrollTop: 0,
- //scroll view 跳转到对应的组件上
- toView: '',
- guideCurrent: 0,
- bHide: false,
- //屏幕抖动
- bEFHitShake: false,
- bStartBoxingPost: false,
- BoxingPostCountDownText: 3,
- b_countDown: null,
- countDownUrl: [
- "/static/personal/audio/GO.mp3",
- "/static/personal/audio/1.mp3",
- "/static/personal/audio/2.mp3",
- "/static/personal/audio/3.mp3"
- ],
- threeUrl: "/static/personal/audio/3.mp3",
- twoUrl: "/static/personal/audio/2.mp3",
- oneUrl: "/static/personal/audio/1.mp3",
- goUrl: "/static/personal/audio/GO.mp3",
- dangdang: "/static/personal/audio/dangdang.mp3",
- personalAudioContext: null,
- planTip: [
- '您今天的目标已经达成,是否进行自由训练.',
- '您今天的目标还没完成,是否结束训练.'
- ],
- planTipIndex: 0,
- //匹配的ai信息
- aiObj: {
- name: '匿名',
- avatar: '/static/defaultAvatar.png'
- },
- aiOldObj: {
- name: '匿名',
- avatar: '/static/defaultAvatar.png'
- },
- currentMode: 'calorieMode', //pkMode calorieMode
- bHitShake: false,
- bAiHitShake: false,
- //限制重连,比如去了对应硬件连接页面,限制这个页面的重连操作
- bLimitReconnection: false,
- /**
- * 首页这里连接了蓝牙,然后选择框回来后show会触发,触发时候检测一下是否有对应的
- * 匹配蓝牙
- */
- bGetBondTesting: false,
- };
- },
- onLoad() {
- //设置self
- _self = this;
- // 圆形进度条样式
- this.cWidthArcbar = uni.upx2px(480); //这里要与样式的宽高对应
- this.cHeightArcbar = uni.upx2px(600); //这里要与样式的宽高对应
- this.arcbarWidth = uni.upx2px(14);
- // 体重数据样式
- this.cWidth = uni.upx2px(750);
- this.cHeight = uni.upx2px(300);
- // 心电图数据样式
- this.eWidth = uni.upx2px(464);
- this.eHeight = uni.upx2px(140);
- // #ifdef APP-PLUS || H5
- //监听
- uni.$on('personalShowLineA', this.personalShowLineA);
- uni.$on('updateArcbarData', this.updateArcbarData);
- // #endif
- // #ifdef MP
- this.personalShowLineA();
- // #endif
- //监听
- uni.$on('callbackCloseBLE', this.callbackCloseBLE);
- // uni.$on('callbackBLEState', this.callbackBLEState);
- //获得游戏列表
- reqUtil
- .requestData(config.URL.GAMERECOMMENDBYPLATFORM, {
- recommendType: 2,
- endTime: config.endTime
- })
- .then(
- res => {
- console.log('GAMERECOMMEND =====', res);
- if (res.code == 0) {
- if (res.data.gameList.length > 3) {
- this.gameList = this.gameList.concat(res.data.gameList.slice(0, 3));
- } else {
- this.gameList = this.gameList.concat(res.data.gameList);
- }
- }
- },
- e => {
- console.log(e);
- }
- );
- //获得视频列表
- reqUtil
- .requestData(config.URL.GAMERECOMMENDBYPLATFORM, {
- recommendType: 1,
- endTime: config.endTime
- })
- .then(
- res => {
- if (res.code == 0) {
- if (res.data.gameList.length > 3) {
- this.videoList = this.videoList.concat(res.data.gameList.slice(0, 3));
- } else {
- this.videoList = this.videoList.concat(res.data.gameList);
- }
- }
- },
- e => {
- console.log(e);
- }
- );
- this.personalShowLineA();
- //初始化后设置一下pickerObj
- this.pickerObj = {
- pickerLeftList: pickerData.getWeightList().leftList,
- pickerRightList: pickerData.getWeightList().rightList,
- pickerType: 'doubleItem',
- pickerUnit: '公斤',
- pickerTitle: '记体重',
- defaultValue: this.weight,
- showInput: true,
- };
- this.getPlanData(function() {
- // 如果个人页面直接获取数据
- _self.showArcbar();
- });
- this.testList = [{
- cname: "拳击柱",
- ename: "boxingPost",
- icon: "/static/modal/boxing-post/left-hook-h@2x.png",
- mIcon: "/static/modal/boxing-post/left-hook-m@2x.png",
- }];
- this.personalAudioContext = uni.createInnerAudioContext();
- this.personalAudioContext.autoplay = false;
- this.personalAudioContext.src = this.dangdang;
- this.personalAudioContext.volume = 1;
- //获取本地记录的运动时间
- uni.getStorage({
- key: 'localSportTime',
- success: function(res) {
- // console.log("本地的时间:",res.data);
- _self.$store.state.localSportTime = res.data;
- }
- });
- //获取设备信息,上报服务器
- this.gOnAddClientInfo();
- },
- onShow() {
- _self.bHide = false;
- if (canvaArcbar1)
- _self.updateArcbarData();
- //this.bConnection &&
- if (this.bVerifiedConnection && this.BLEConnectDevice) {
- this.updateBLECIndex();
- // setTimeout(() => {
- // /**
- // * 如果是首页连接,则检测
- // */
- // if (this.bGetBondTesting) {
- // this.onGetBondDevice();
- // this.bGetBondTesting = false;
- // }
- // }, 5000)
- }
- //如果是测试数据
- if (this.ConnectBindingDevice) {
- if (this.$refs.boxingPostRef) {
- this.$refs.boxingPostRef.onSetMode('pkMode');
- } else {
- setTimeout(() => {
- this.$refs.boxingPostRef.onSetMode('pkMode');
- }, 500)
- }
- }
- console.log('personal show');
- this.bLimitReconnection = false;
- //测试环境检测,给个modal提示 active
- // if (config.active == 'dev') {
- // function thanDate(date2) {
- // var oDate1 = new Date();
- // console.log("检测日期", oDate1);
- // var oDate2 = new Date(date2);
- // if (oDate1.getTime() > oDate2.getTime()) {
- // return true;
- // } else {
- // return false;
- // }
- // }
- // if (thanDate('2021-05-31 13:10:36')) {
- // uni.showModal({
- // title: "提示",
- // content: "此版本为测试版本,有需要请和开发者联系。微信 sweetdontcry"
- // })
- // }
- // }
- },
- onReady() {
- // 计算屏幕剩余高度 填补剩余高度
- uni.getSystemInfo({
- success(res) {
- _self.phoneHeight = res.windowHeight;
- // 计算组件的高度
- let view = uni.createSelectorQuery().select('#nav-bar');
- view.boundingClientRect(data => {
- // console.log('data===:', data);
- if (data != null) {
- _self.navHeight = data.height;
- _self.scrollviewHight = _self.phoneHeight - _self.navHeight;
- _self.topScrollHight = _self.phoneHeight - _self.navHeight - 30;
- }
- }).exec();
- }
- });
- },
- onUnload() {
- console.log("personal ********* onUnload *********");
- // #ifndef APP-PLUS||H5
- //监听
- console.log('移除监听');
- uni.$off('personalShowLineA', this.personalShowLineA);
- uni.$off('updateArcbarData', this.updateArcbarData);
- // #endif
- //*****注释蓝牙操作******
- uni.$off('callbackCloseBLE', this.callbackCloseBLE);
- // uni.$off('callbackBLEState', this.callbackBLEState);
- uni.$off('updateBLEDeviceData', this.callbackUpdateBLEData);
- // // 停掉对应的interval
- if (sportSpeedInterval) {
- clearInterval(sportSpeedInterval);
- sportSpeedInterval = null;
- }
- //unload 时候清除timeout
- this.onUnloadCreateBLEConnectionTimeout();
- },
- onHide() {
- _self.bHide = true;
- console.log("personal ******* onHide *******");
- //时间暂停 ,隐藏了 需要判断是否为空
- if (_self.$refs.countDownObj)
- _self.$refs.countDownObj.timePause('pause');
- //心电图暂停
- if (_self.$refs.electRef)
- _self.$refs.electRef.pausedElect(true);
- },
- methods: {
- ...mapMutations(['accountLogin', 'getPlanData', 'addlocalCalorie', 'setLocalCalorie', 'setShowCalorie',
- 'syncLocalDataToServer', 'syncRequestEvent', 'setLocalSportTime',
- 'initAdapter', 'onCreateBLEConnection', 'onUnloadCreateBLEConnectionTimeout', 'onCloseBLEConnection',
- 'gOnAddClientInfo', 'onWriteBLEConnectionValue',
- 'gCreateFilterObj', 'gUpdateFilter', 'B_GetBondedDevices', 'B_OpenBLESetting', 'B_OpenRopeSkipping',
- 'B_CloseRopeSkipping',
- 'gCreateSandbagAlgorithm', 'gUpdateSandbagAlgorithm', 'gStartSimulateBLEUpdate',
- 'gStopSimulateBLEUpdate'
- ]),
- onKeyDown(e) {
- console.log(e);
- },
- //登录的回调初始化
- personalShowLineA() {
- //获得体重列表
- reqUtil.requestData(config.URL.USERGETWEIGHT).then(
- res => {
- // console.log('USERGETWEIGHT =====', res);
- // this.$store.state.weight = res.data;
- if (res.code == 0 && res.data) {
- let list = [];
- for (let i = 0; i < res.data.timestamp.length; i++) {
- //String.fromCharCode(65 + i)
- list.push(date.getWeightDate(res.data.timestamp[i]));
- }
- let lineData = {
- // ["2012", "2013", "2014", "2015", "2016", "2017"]
- categories: list,
- series: [{
- color: '#9797FF',
- //["100", "10", "20", "50", "60", "70"]
- data: res.data.weightList,
- index: 0,
- legendShape: 'curve',
- name: '体重变化',
- pointShape: 'circle',
- show: true,
- type: 'area'
- }]
- };
- _self.showLineA('canvasLineA', lineData);
- }
- },
- e => {
- console.log(e);
- }
- );
- },
- showClickEvent() {
- this.$refs.sideBar.showModal();
- this.$store.state.bCanvasShow = false;
- },
- showModal(e) {
- this.modalName = e.currentTarget.dataset.target;
- this.$store.state.bCanvasShow = false;
- },
- hideModal(e) {
- if (this.modalName == "sportCompletion") {
- console.log("关闭卡片");
- this.sportData = {
- calorie: 0,
- hit: 0,
- miss: 0,
- percent: 0,
- time: 0,
- allData: 0,
- }
- }
- this.modalName = null;
- this.$store.state.bCanvasShow = true;
- },
- //获取体重数据
- onConfirm(e) {
- // detail.__args__[0]
- console.log('当前输出的体重:', e);
- //把体重传上服务器
- reqUtil
- .requestData(
- config.URL.USERADDWEIGHT, {
- weight: e.value
- },
- 'POST'
- )
- .then(
- res => {
- // console.log('USERADDWEIGHT =====', res);
- _self.$store.state.weight = res.data.currentWeight;
- let listData = res.data.weightList;
- let list = [];
- for (let i = 0; i < listData.timestamp.length; i++) {
- //String.fromCharCode(65 + i)
- list.push(date.getWeightDate(listData.timestamp[i]));
- }
- let lineData = {
- // ["2012", "2013", "2014", "2015", "2016", "2017"]
- categories: list,
- series: [{
- color: '#9797FF',
- data: listData.weightList,
- index: 0,
- legendShape: 'curve',
- name: '体重变化',
- pointShape: 'circle',
- show: true,
- type: 'area'
- }]
- };
- canvaLineA.updateData(lineData);
- },
- e => {
- console.log(e);
- }
- );
- this.hideModal();
- },
- onTestAddLocalCalorie() {
- let _add = (10 * 1.875) / (4 * 30);
- console.log(_add);
- this.onUpdateCaloriePlane(10);
- },
- // 进度条数据
- arcbarData(_planData) {
- let showCal = _planData.calorie,
- showLCal = _planData.allCalorie,
- LCalTip = '大卡',
- showTip = '(未达标)';
- // 如果运动的卡路里大于目标卡路里,设置为目标卡路里值,即为Max
- if (showLCal >= showCal) {
- showTip = '(达标)';
- }
- let series = [{
- name: showTip,
- data: _planData.allCalorie == 0 ? 0 : _planData.allCalorie / showCal,
- color: '#2fc25b'
- }];
- return {
- showCal,
- showLCal,
- LCalTip,
- showTip,
- series
- }
- },
- // 圆形进度条
- showArcbar() {
- let {
- showCal,
- showLCal,
- LCalTip,
- series
- } = this.arcbarData(_self.planData);
- // console.log("series==", series[0]);
- canvaArcbar1 = new uCharts({
- $this: _self,
- canvasId: 'canvasArcbar',
- type: 'myGradualChangeArcbar',
- fontSize: 11,
- legend: {
- show: false
- },
- background: '#FFFFFF',
- pixelRatio: 1,
- series: series,
- animation: true,
- width: _self.cWidthArcbar,
- height: _self.cHeightArcbar,
- dataLabel: true,
- // Math.round(chartData.series[0].data * 100) + '%'
- // title: {
- // // arcbarDate: date.formatDate(_self.originalDate),
- // name: showLCal,
- // molecularUnit: LCalTip, //单位的分子部分
- // denominatorUnit: showCal, //单位的分母部分
- // unitFontSize: 11, //单位字符大小
- // color: 'rgba(255, 255, 255, 1)',
- // fontSize: 28,
- // offsetX: -30,
- // offsetY: 10
- // },
- // subtitle: {
- // name: series[0].name,
- // color: 'rgba(255, 255, 255, 1)',
- // fontSize: 13,
- // offsetY: -75
- // },
- extra: {
- arcbar: {
- type: 'default',
- backgroundColor: 'rgba(234, 234, 255, 1)',
- backgroundEndColor: 'rgba(234, 234, 255, 1)',
- backgroundMiddle: '#9291FF', //'rgba(158, 158, 255, 1)',
- width: _self.arcbarWidth, //圆弧的宽度
- lineColor: '#51EDFE',
- lineEndColor: '#F7C75D'
- }
- }
- });
- // 更新位置同步
- this.syncLocalDataToServer((res) => {
- this.originalDate = res.newDate;
- this.currentDate = date.formatTime(res.newDate);
- this.updateArcbarData();
- });
- },
- updateArcbarData(data) {
- // if (data == "plan") {
- // // 加入设置的卡路里小于本地,则更新本地最小值
- // _self.addlocalCalorie(0);
- // console.log("**************updateArcbarData");
- // // 如果是计划设置好后
- // // this.$store.state.bPlanFinish = true;
- // // setTimeout(() => {
- // // this.$store.state.bPlanFinish = false;
- // // }, 10000)
- // }
- // console.log("updateArcbarData:",this.planData);
- let {
- showCal,
- showLCal,
- LCalTip,
- series
- } = _self.arcbarData(_self.planData);
- if (showCal == _self.oldArcbarProCalorie && showLCal == _self.oldArcbarAllCalorie) {
- // console.log("没有改变值,不刷新表盘:", showCal, _self.oldArcbarProCalorie, showLCal, _self.oldArcbarAllCalorie);
- return;
- }
- //这个是显示当前的总卡路里
- _self.$store.state.oldArcbarAllCalorie = showLCal;
- //这个是计划的卡路里
- _self.$store.state.oldArcbarProCalorie = showCal;
- canvaArcbar1.updateData({
- series: series,
- // title: {
- // //这里的文案是自定义的,不写是不变的
- // name: showLCal,
- // molecularUnit: LCalTip, //单位的分子部分
- // denominatorUnit: showCal, //单位的分母部分
- // }
- //,
- // subtitle: {
- // //这里的文案是自定义的,不写是不变的
- // name: series[0].name
- // }
- });
- },
- //没有限制下的更新表盘
- updateNoLimit() {
- let {
- showCal,
- showLCal,
- LCalTip,
- series
- } = _self.arcbarData(_self.planData);
- //这个是显示当前的总卡路里
- _self.$store.state.oldArcbarAllCalorie = showLCal;
- //这个是计划的卡路里
- _self.$store.state.oldArcbarProCalorie = showCal;
- canvaArcbar1.updateData({
- series: series,
- // title: {
- // //这里的文案是自定义的,不写是不变的
- // name: showLCal,
- // molecularUnit: LCalTip, //单位的分子部分
- // denominatorUnit: showCal, //单位的分母部分
- // }
- // ,
- // subtitle: {
- // //这里的文案是自定义的,不写是不变的
- // name: series[0].name
- // }
- });
- },
- // 数据列表
- showLineA(canvasId, chartData) {
- canvaLineA = new uCharts({
- $this: _self,
- canvasId: canvasId,
- type: 'area',
- fontSize: 11,
- padding: [15, 40, 0, 15],
- legend: {
- show: false,
- padding: 0,
- lineHeight: 10,
- margin: 0
- },
- dataLabel: true,
- dataPointShape: true,
- dataPointShapeType: 'solid',
- background: '#FFFFFF',
- pixelRatio: 1,
- categories: chartData.categories,
- series: chartData.series,
- animation: true,
- enableScroll: true, //开启图表拖拽功能
- enableBottomSolid: false,
- xAxis: {
- disableGrid: true,
- type: 'grid',
- gridType: 'dash',
- itemCount: 7,
- calibration: true,
- scrollShow: false,
- scrollAlign: 'left',
- gridColor: 'rgba(175, 175, 175, 1)',
- dashLength: 8
- // boundaryGap: 'justify' //两端不留白配置
- },
- yAxis: {
- // disabled: false,
- disableGrid: true,
- disableLine: true,
- splitNumber: 10,
- min: 0,
- // max: 50,
- format: val => {
- // console.log("=======",val)
- // return val.toFixed(0) + '斤'
- return '';
- }
- },
- width: _self.cWidth,
- height: _self.cHeight,
- extra: {
- area: {
- type: 'straight', //curve
- opacity: 1,
- addLine: true,
- gradient: true,
- width: 2
- }
- }
- });
- },
- touchLineA(e) {
- // console.log("touchLineA:", e);
- if (canvaLineA) canvaLineA.scrollStart(e);
- },
- moveLineA(e) {
- if (canvaLineA) {
- canvaLineA.scroll(e);
- }
- },
- touchEndLineA(e) {
- if (canvaLineA) {
- canvaLineA.scrollEnd(e);
- }
- },
- // 跳转计划页面
- openPlan(e) {
- // console.log(e);
- uni.navigateTo({
- url: '../plan/plan?newsid=' + 11,
- success: res => {},
- fail: () => {},
- complete: () => {}
- });
- },
- // 跳转转换页面
- onNavConver() {
- uni.reLaunch({
- url: '../../conversion-page/conversion/conversion',
- success: res => {},
- fail: () => {},
- complete: () => {}
- });
- },
- // 跳转我的页面
- onNavMyPage() {
- uni.navigateTo({
- url: '../../my-page/homepage/homepage',
- success: res => {},
- fail: () => {},
- complete: () => {}
- });
- },
- updateBLECIndex() {
- for (let i = 0; i < this.BLEDeviceShowList.length; i++) {
- let eq = this.BLEDeviceShowList[i];
- if ((eq.ename.indexOf("mobilePhoneBandage") > -1 && this.BLEConnectDevice.id == 0) ||
- (eq.ename.indexOf("hotman") > -1 && this.BLEConnectDevice.id == 1) ||
- (eq.ename.indexOf("BLEHandle") > -1 && this.BLEConnectDevice.id == 2) ||
- (eq.ename.indexOf("rope") > -1 && this.BLEConnectDevice.id == 3)) {
- eq.bRatio = true;
- this.$store.state.cIndex = i;
- }
- if (eq.ename.indexOf("hotman") > -1 && this.BLEConnectDevice.id == 1) {
- if (this.$refs.boxingPostRef) {
- this.$refs.boxingPostRef.onSetMode('pkMode');
- } else {
- setTimeout(() => {
- this.$refs.boxingPostRef.onSetMode('pkMode');
- }, 500)
- }
- } else if (eq.ename.indexOf("BLEHandle") > -1 && this.BLEConnectDevice.id == 2) {
- if (this.$refs.boxingPostRef) {
- this.$refs.boxingPostRef.onSetMode('calorieMode');
- } else {
- setTimeout(() => {
- this.$refs.boxingPostRef.onSetMode('calorieMode');
- }, 500)
- }
- } else if (eq.ename.indexOf("rope") > -1 && this.BLEConnectDevice.id == 3) {
- //todo 暂时设置兼容跑步模式
- // if (this.$refs.boxingPostRef) {
- // this.$refs.boxingPostRef.onSetMode('ropeMode');
- // } else {
- // setTimeout(() => {
- // this.$refs.boxingPostRef.onSetMode('ropeMode');
- // }, 500)
- // }
- }
- }
- },
- //蓝牙断开连接时候
- callbackCloseBLE() {
- // this.$store.state.cIndex = -1;
- //蓝牙断开连接后,直接关闭
- this.$refs.boxingPostRef.onCloseDevices();
- // if (!this.BLEConnectDevice) {
- // console.log('连接蓝牙对象为空,不进行重连!');
- // return;
- // }
- // //如果限制不走重连
- // if (this.bLimitReconnection) return;
- // //连接蓝牙
- // this.onCreateBLEConnection({
- // item: this.BLEConnectDevice,
- // initItem: false,
- // getSuccess: () => {
- // this.updateBLECIndex();
- // if (this.bHide) {
- // //弹出框时候,是隐藏状态
- // this.bGetBondTesting = true;
- // } else {
- // //没有弹出框时候,直接检测
- // setTimeout(() => {
- // this.onGetBondDevice();
- // }, 5000)
- // }
- // },
- // getinitAdapter: () => {
- // // this.onDevice(item, e);
- // // console.log("未开启蓝牙模块?");
- // }
- // });
- },
- //蓝牙状态回调
- callbackBLEState(res) {
- console.log("callbackBLEState==", res);
- if (this.cState != res.state) this.cState = res.state;
- },
- //设备回调事件
- callbackUpdateBLEData(data) {
- //如果在监听状态时候隐藏页面,返回
- if (_self.bHide) return;
- // console.log("callbackDeviceState==", data);
- if (this.ConnectBindingDevice) {
- this.gUpdateSandbagAlgorithm({
- data: data,
- callback: (res) => {
- if (res.type == 'hit') {
- this.$refs.boxingPostRef.onBLEHotmanUpdate(res);
- }
- }
- });
- return;
- }
- //连接了手柄模式
- //没有开启指令不刷新
- if (!this.instructionState.bOpen) return;
- if (this.BLEConnectDevice.usageMode == "hotman") {
- this.gUpdateFilter({
- data: data,
- callback: (res) => {
- if (res.type == 'hit') {
- this.$refs.boxingPostRef.onBLEHotmanUpdate(res);
- }
- }
- });
- } else if (this.BLEConnectDevice.usageMode == "general") {
- //这个是普通打击模式
- this.$refs.boxingPostRef.onBLEHandleUpdate(data);
- } else if (this.BLEConnectDevice.usageMode == "ropeSkipping") {
- //跳绳蓝牙反馈
- this.$refs.actionJumpRef.onBLERopeUpdate(data);
- }
- },
- //绑定设备函数
- onBindingDevice(item, index) {
- if (item == null) {
- item = this.DeviceBindingList[0];
- }
- if (this.BLEConnectDevice) {
- uni.showToast({
- icon: "none",
- title: "已连接硬件设备",
- duration: 1000
- })
- return;
- }
- if (this.ConnectBindingDevice) {
- this.$store.state.ConnectBindingDevice = null;
- setTimeout(() => {
- uni.showToast({
- icon: "none",
- title: "断开连接",
- duration: 1000
- })
- }, 300)
- } else {
- this.$store.state.ConnectBindingDevice = item;
- setTimeout(() => {
- uni.showToast({
- icon: "none",
- title: "已连接",
- duration: 1000
- })
- }, 300)
- //连接后保存最近连接的设备
- }
- //刷新状态
- this.$refs.boxingPostRef.onSetMode('pkMode');
- },
- //关闭设备函数
- onCloseBindingDevice(item, e) {
- if (e.currentTarget.dataset.index == this.cIndex) {
- uni.showModal({
- title: '设备状态',
- content: '是否断开连接',
- ConfirmColor: '#A488DC',
- success: res => {
- if (res.confirm) {
- this.$store.state.cIndex = -1;
- this.$store.state.ConnectBindingDevice = null;
- }
- }
- });
- }
- },
- onNavBindingDevice() {
- this.toView = "addDeviceView";
- },
- onDevice(item, e) {
- if (this.ConnectBindingDevice) {
- uni.showToast({
- title: '当前已开启数据',
- icon: 'none',
- mask: true
- })
- return;
- }
- if (this.cIndex !== -1) {
- uni.showToast({
- title: '当前已连接设备',
- icon: 'none',
- mask: true
- })
- return;
- }
- //连接蓝牙
- this.onCreateBLEConnection({
- item: item,
- index: e.currentTarget.dataset.index,
- initItem: true,
- getinitAdapter: () => {
- this.onDevice(item, e);
- },
- getSuccess: () => {
- if (this.bHide) {
- //弹出框时候,是隐藏状态
- this.bGetBondTesting = true;
- } else {
- //没有弹出框时候,直接检测
- // setTimeout(() => {
- // this.onGetBondDevice();
- // }, 5000)
- }
- //刷新状态
- if (this.cIndex != -1) {
- let eq = this.BLEDeviceShowList[this.cIndex];
- // console.log(eq,this.BLEConnectDevice);
- if (eq.ename.indexOf("hotman") > -1 && this.BLEConnectDevice.id == 1) {
- this.$refs.boxingPostRef.onSetMode('pkMode');
- } else if (eq.ename.indexOf("BLEHandle") > -1 && this.BLEConnectDevice.id == 2) {
- this.$refs.boxingPostRef.onSetMode('calorieMode');
- } else if (eq.ename.indexOf("rope") > -1 && this.BLEConnectDevice.id == 3) {
- // this.$refs.boxingPostRef.onSetMode('ropeMode');
- }
- }
- }
- });
- },
- /**
- * 检测获取匹配的设备
- */
- onGetBondDevice() {
- /**
- * 假如手机没有匹配,断开连接
- */
- console.log("****", this.BLEConnectDevice);
- if (!this.BLEConnectDevice) return;
- this.B_GetBondedDevices({
- deviceId: this.BLEConnectDevice.deviceId,
- success: (bondedDevice) => {
- // console.error("===========", bondedDevice);
- // uni.hideToast();
- if (bondedDevice == null) {
- // if (plus.os.name == 'Android')
- {
- //此问题 华为手机容易出现
- //android手机已配对的设备 不存在,但是app 又直接连接成功了。提示,并且断开app连接
- //1.关闭当前连接
- this.onCloseBLEConnection({
- getSuccess: () => {}
- });
- uni.hideToast();
- //2.跳转蓝牙设置
- uni.showModal({
- title: '蓝牙配对失败',
- content: '请跳转后点击配对BGBox_2020,成功后手动跳转回哔蹦重新连接。',
- success: (res) => {
- if (res.confirm) {
- this.B_OpenBLESetting();
- }
- }
- })
- }
- }
- }
- });
- },
- openDeviceList(e) {
- if (this.ConnectBindingDevice) {
- uni.showToast({
- title: '当前已开启数据',
- icon: 'none',
- mask: true
- })
- return;
- }
- //先判断蓝牙是否初始化
- /**
- * 蓝牙部分操作,转全局变量操作
- * */
- console.log("openDeviceList bOpenBluetooth", this.bOpenBluetooth);
- // #ifdef APP-PLUS
- if (!this.bOpenBluetooth) {
- this.initAdapter(() => {
- uni.navigateTo({
- // url: '../devices-category/devices-category',
- url: '../devices-hardware/devices-hardware',
- success: res => {
- this.bLimitReconnection = true;
- },
- fail: () => {},
- complete: () => {}
- });
- });
- return;
- }
- // #endif
- uni.navigateTo({
- url: '../devices-hardware/devices-hardware',
- success: res => {
- this.bLimitReconnection = true;
- },
- fail: () => {},
- complete: () => {}
- });
- },
- onNavToMore() {
- uni.navigateTo({
- url: '../more/more?index=' + this.cIndex,
- success: res => {},
- fail: () => {},
- complete: () => {}
- });
- },
- onAddDevice() {
- let deviceItem = {
- name: '蹦床',
- icon: '/static/trampoline.png'
- };
- if (this.deviceList.length != 0) {
- this.deviceList = this.deviceList.concat(deviceItem);
- } else {
- this.deviceList = deviceItem;
- }
- },
- onCloseDevice(item, e) {
- //如果不是连接状态,则删除
- if (e.currentTarget.dataset.index != this.cIndex) {
- if (this.cIndex != -1) {
- uni.showToast({
- icon: 'none',
- title: "请先断开已连接设备",
- duration: 2000,
- mask: true
- })
- return;
- }
- uni.showModal({
- title: '设备状态',
- content: '是否删除设备?',
- ConfirmColor: '#A488DC',
- success: res => {
- if (res.confirm) {
- this.$store.commit('deleteBLEDevice', e.currentTarget.dataset.index);
- }
- }
- });
- return;
- }
- uni.showModal({
- title: '设备状态',
- content: '是否断开连接?',
- /**
- * 如果需要强制,不显示取消按钮
- */
- showCancel: true,
- ConfirmColor: '#A488DC',
- success: res => {
- if (res.confirm) {
- this.onCloseBLEConnection({
- getSuccess: () => {}
- });
- }
- }
- });
- },
- onNavDetail(item) {
- console.log(item);
- let temItem = encodeURIComponent(JSON.stringify(item));
- // return;
- uni.navigateTo({
- url: '../../game-page/game-detail/game-detail?item=' + temItem
- });
- },
- onNavToGameMore(e) {
- uni.reLaunch({
- url: '../../game-page/game/game?type=' + e.currentTarget.dataset.type
- });
- },
- //判断是否有其他限制
- onStartCheck() {
- //#ifdef H5
- // 直接走测试,如果是h5
- this.onBoxingGuideFinish();
- return;
- //#endif
- //分类型判断
- if (0 === this.currentModeIndex) {
- //拳击运动类型
- // 1.检测是否有对应设备,没有ConnectBindingDevice,再进行下一步
- if (this.ConnectBindingDevice == null) {
- uni.showToast({
- title: '开启连接数据',
- icon: 'none'
- })
- this.toView = "openAccGyroView";
- return;
- }
- // TODO,目前去掉蓝牙设备
- // //2.检测是否有设备
- // if (this.BLEDeviceShowList.length == 0) {
- // this.$store.state.bGuidePages = true;
- // this.guideCurrent = 3;
- // uni.showToast({
- // title: '请添加蓝牙设备',
- // icon: 'none'
- // })
- // this.toView = "addDeviceView";
- // return;
- // }
- // //2.检测是否连接设备 || this.BLEConnectDevice.ename !== 'BT04'
- // if (this.cIndex == -1) {
- // //没有连接设备,提示去连接设备
- // uni.showToast({
- // title: '请连接蓝牙设备',
- // icon: 'none'
- // })
- // this.toView = "addDeviceView";
- // return;
- // }
- }
- //3.检测一下计划日期
- console.log(this.remainingDays);
- if (this.planData.startTime > this.planData.endTime || this.remainingDays == 0) {
- if (!this.$store.state.bPlanExpired) {
- this.$store.state.bPlanExpired = true;
- setTimeout(() => {
- this.$store.state.bPlanExpired = false;
- }, 3000)
- uni.showToast({
- title: "计划到期,请制定计划。",
- icon: 'none'
- })
- }
- this.$store.state.bGuidePages = true;
- setTimeout(() => {
- this.$refs.codeElfGuide.setCurrent(0);
- }, 0)
- this.toView = "projectButtonView";
- return;
- }
- if (0 === this.currentModeIndex) {
- //如果新手,调用新手教程
- console.log("this.bNewGuide:", this.bNewGuide);
- // this.$store.state.bNewGuide = true;
- if (this.bNewGuide) {
- // this.$refs.boxingPostRef.onGuideBoxingPostPlay();
- // 拳击的新手提示
- this.$store.state.bGuidePages = true;
- this.guideCurrent = 5;
- this.toView = "boxingHitID";
- this.$store.state.bNewGuide = false;
- } else {
- if (this.ConnectBindingDevice) {
- //假如有连接bingding设备
- this.gCreateSandbagAlgorithm();
- this.gStartSimulateBLEUpdate();
- } else {
- //todo 跳绳模式 发送开启指令
- if (this.BLEConnectDevice.usageMode == "ropeSkipping") {
- //打开跳绳模式
- this.B_OpenRopeSkipping();
- } else {
- //初始化filter快速打击对象
- if (this.BLEConnectDevice.usageMode == "hotman") {
- this.gCreateFilterObj();
- }
- //打开加速计
- this.onWriteBLEConnectionValue({
- value: "3"
- });
- setTimeout(() => {
- //设置加速计b:20ms a:10ms
- this.onWriteBLEConnectionValue({
- value: config.refreshRate
- });
- }, 1000)
- }
- }
- //监听蓝牙回调
- uni.$on('updateBLEDeviceData', this.callbackUpdateBLEData);
- this.onBoxingGuideFinish();
- }
- } else if (1 == this.currentModeIndex) {
- console.log();
- if (this.BLEConnectDevice.usageMode == "ropeSkipping") {
- //打开跳绳模式
- this.B_OpenRopeSkipping();
- }
- //监听蓝牙回调
- uni.$on('updateBLEDeviceData', this.callbackUpdateBLEData);
-
- }
- },
- onShowBoxingHitTip() {
- this.$store.state.bGuidePages = true;
- this.guideCurrent = 5;
- this.toView = "boxingHitID";
- this.$store.state.bNewGuide = false;
- },
- //检测是否符合要求,没有的话进行新手提示
- onPersonalCheck() {
- // //判断一下,是否达标,给moadal 提示
- // if (this.planData.allCalorie >= this.planData.calorie) {
- // this.modalName = 'showPlanTipModal';
- // this.planTipIndex = 0;
- // } else {
- // //如果是一开始,还没达标,就不给modal 提示
- // this.onStartCheck();
- // }
- this.onStartCheck();
- },
- //
- onBoxingGuideFinish() {
- if (this.b_countDown) {
- clearInterval(this.b_countDown);
- this.b_countDown = null;
- }
- if (this.currentMode == 'calorieMode' || this.currentMode == 'ropeMode') {
- this.personalAudioContext.stop();
- this.personalAudioContext.play();
- setTimeout(() => {
- this.$refs.boxingPostRef.onBoxingPostPlay(true);
- }, 600);
- } else {
- this.BoxingPostCountDownText = 3;
- this.$refs.boxingPostRef.onSetRingAnimation(true);
- uni.showToast({
- title: '匹配中...',
- mask: true,
- icon: 'loading',
- duration: 2000
- })
- setTimeout(() => {
- //ai信息
- this.onGetAiRandom();
- // this.b_countDown = setInterval(() => {
- // if (this.BoxingPostCountDownText <= 1) {
- // if (this.b_countDown) {
- // clearInterval(this.b_countDown);
- // this.b_countDown = null;
- // }
- // setTimeout(() => {
- // this.personalAudioContext.stop();
- // this.personalAudioContext.play();
- // this.$refs.boxingPostRef.onBoxingPostPlay(true);
- // this.$refs.boxingPostRef.onSetRingAnimation(false);
- // uni.hideToast();
- // }, 800)
- // }
- // this.BoxingPostCountDownText--;
- // }, 1000)
- setTimeout(() => {
- this.personalAudioContext.stop();
- this.personalAudioContext.play();
- this.$refs.boxingPostRef.onBoxingPostPlay(true);
- this.$refs.boxingPostRef.onSetRingAnimation(false);
- uni.hideToast();
- }, 800)
- }, 2000);
- }
- },
- //运动时间
- onUpdateSportTime(res) {
- // console.log("同步的运动时间",res);
- this.setLocalSportTime(res);
- },
- //更新运动数据
- onUpdateCaloriePlane(data) {
- // 记录卡路里到本地
- this.addlocalCalorie(data);
- this.updateArcbarData();
- },
- onRoundTrigger(data) {
- // console.log("onRoundTrigger==", data);
- // return;
- let url = '';
- switch (data.item.type) {
- case "personal":
- //个人中心页面
- url = '../../personal-page/personal/personal';
- break;
- case "game":
- url = '../../game-page/game/game';
- break;
- default:
- url = '../../personal-page/personal/personal';
- break;
- }
- uni.reLaunch({
- url: url,
- success: res => {},
- fail: () => {},
- complete: () => {}
- });
- },
- /**
- * 同步本地数据到服务器
- */
- onSyncData() {
- this.syncRequestEvent({
- success: () => {
- this.updateArcbarData();
- }
- });
- // 更新显示日期
- this.originalDate = new Date();
- this.currentDate = date.formatTime(this.originalDate);
- },
- hidePlanTipModal() {
- this.modalName = null;
- if (this.planTipIndex === 1) {
- // 您今天的目标还没完成 是否结束训练
- this.onBoxingPause(false);
- }
- },
- confirmPlanTipModal() {
- this.modalName = null;
- if (this.planTipIndex === 0) {
- this.onStartCheck()
- } else if (this.planTipIndex === 1) {
- // 您今天的目标还没完成 是否结束训练
- this.onBoxingPause(true);
- }
- },
- //断开连接时候,关闭
- onCloseBoxingHit() {
- console.log('关闭训练');
- if (this.currentMode == 'pkMode') {
- this.$refs.hitEffectRef.onStop();
- }
- this.onBoxingPause(true);
- },
- //点击暂停时候,判断一下是否完成目标
- onBoxingPostControlPlay(bPlay) {
- if (!bPlay) {
- if (this.planData.allCalorie < this.planData.calorie) {
- this.modalName = 'showPlanTipModal';
- this.planTipIndex = 1;
- } else {
- //假如完成了目标,更新卡路里
- this.onBoxingPause(true);
- }
- }
- },
- //点击切换模式
- onModeEvent(data) {
- console.log("当前模式:", data);
- this.currentMode = data.mode;
- this.title = data.name;
- if (this.currentMode == 'calorieMode' || this.currentMode == 'ropeMode') {
- setTimeout(() => {
- this.updateNoLimit();
- }, 0)
- }
- },
- onAiHitEvent(bloodPoint) {
- // this.onPlay({
- // bloodPoint: num,
- // createType: 'red',
- // callback: (res) => {
- // console.log("红色拳头击中对方:", res);
- // }
- // });
- this.$refs.hitFistRef.onPlay({
- bloodPoint: bloodPoint,
- createType: 'red',
- callback: () => {
- if (this.bAiHitShake) return;
- this.bAiHitShake = true;
- this.$refs.aiHitEffectRef.onPlay();
- this.$refs.aiHitEffectRef.onAIHit();
- setTimeout(() => {
- this.bAiHitShake = false;
- }, 500)
- }
- });
- },
- //打击时候头像修改
- onHitEvent(bloodPoint) {
- // console.log("this.bHitShake:",this.bHitShake);
- this.$refs.hitFistRef.onPlay({
- bloodPoint: bloodPoint,
- createType: 'blue',
- callback: () => {
- if (this.bHitShake) return;
- this.bHitShake = true;
- this.$refs.hitEffectRef.onPlay();
- this.$refs.hitEffectRef.onMyHit();
- setTimeout(() => {
- this.bHitShake = false;
- }, 500)
- }
- }
- );
- },
- //弹出目标提示后,进行下一步
- onBoxingPause(bFinish) {
- if (bFinish) {
- if (this.ConnectBindingDevice) {
- this.gStopSimulateBLEUpdate();
- } else {
- if (this.BLEConnectDevice.usageMode == "ropeSkipping") {
- this.B_CloseRopeSkipping();
- } else {
- //停止蓝牙加速计
- this.onWriteBLEConnectionValue({
- value: "4"
- });
- }
- }
- uni.$off('updateBLEDeviceData', this.callbackUpdateBLEData);
- console.log("停止时候,上传卡路里");
- this.$refs.boxingPostRef.onBoxingPostStop();
- this.syncRequestEvent({
- success: () => {
- this.updateArcbarData();
- }
- });
- //停止时候,重置ai信息
- this.aiObj.name = this.aiOldObj.name;
- this.aiObj.avatar = this.aiOldObj.avatar;
- } else {
- //如果不是,继续调用播放
- this.$refs.boxingPostRef.onBoxingPostPlay(true);
- }
- },
- /**
- * 新手任务引导
- */
- onGuideChange(e) {
- let tempCurrent = e.detail.current;
- if (tempCurrent == 1) {
- _self.toView = "addDeviceView";
- } else if (tempCurrent == 0) {
- _self.toView = "projectButtonView";
- }
- },
- guideHide(e) {
- this.$store.state.bGuidePages = false;
- if (e.current == 0 && !e.onlyHide) {
- //跳转计划页面
- this.openPlan();
- } else if (e.current == 1 && !e.onlyHide) {
- console.log('guideHide:', e.current);
- //跳转搜索设备页面
- // this.openDeviceList();
- } else if (e.current == 3 && !e.onlyHide) {
- //新手引导跳转扫码页面,直接走绑定 再check
- // this.openQRCode((res) => {
- // setTimeout(() => {
- // this.onPersonalCheck();
- // }, 200);
- // });
- // 跳转连接蓝牙页面
- this.openDeviceList();
- } else if (e.current == 4 && !e.onlyHide) {
- //连接绑定设备
- // this.openQRCode();
- console.log(e);
- // this.testList[e.dataset.index] DeviceBindingList
- let _index = Number(e.device.dataset.index);
- this.onBindingDevice(this.DeviceBindingList[_index], _index);
- //连接设备后,再
- setTimeout(() => {
- this.onPersonalCheck();
- }, 200);
- } else if (e.current == 5 && !e.onlyHide) {
- console.log("==:", e);
- //todo 跳绳模式 新手引导
- if (this.BLEConnectDevice.usageMode == "ropeSkipping") {
- this.B_OpenRopeSkipping();
- } else {
- //初始化filter快速打击对象
- if (this.BLEConnectDevice.usageMode == "hotman") {
- this.gCreateFilterObj();
- }
- //打开加速计
- this.onWriteBLEConnectionValue({
- value: "3"
- });
- setTimeout(() => {
- //设置加速计b:20ms a:10ms
- this.onWriteBLEConnectionValue({
- value: config.refreshRate
- });
- }, 1000)
- }
- //监听蓝牙回调
- uni.$on('updateBLEDeviceData', this.callbackUpdateBLEData);
- this.onBoxingGuideFinish();
- }
- },
- mainScroll(e) {
- if (_self.toView == "addDeviceView") {
- _self.toView = "";
- if (!_self.bGuidePages) return;
- let view = uni.createSelectorQuery().select('#addDeviceView');
- view.boundingClientRect(data => {
- _self.$refs.codeElfGuide.setDeviceObj(data);
- }).exec();
- } else if (_self.toView == "projectButtonView") {
- _self.toView = "";
- if (!_self.bGuidePages) return;
- _self.onGetProjectView();
- } else if (_self.toView == "QRDeviceView") {
- _self.toView = "";
- if (!_self.bGuidePages) return;
- let view = uni.createSelectorQuery().select('#QRDeviceView');
- view.boundingClientRect(data => {
- _self.$refs.codeElfGuide.setDeviceObj(data);
- }).exec();
- } else if (_self.toView == "bing-boxingPost") {
- _self.toView = "";
- if (!_self.bGuidePages) return;
- let view = uni.createSelectorQuery().select('#bing-boxingPost');
- view.boundingClientRect(data => {
- _self.$refs.codeElfGuide.setDeviceObj(data);
- console.log(data);
- }).exec();
- } else if (_self.toView == "boxingHitID") {
- _self.toView = "";
- // let view = uni.createSelectorQuery().select('#boxingHitID');
- // view.boundingClientRect(data => {
- // _self.$refs.codeElfGuide.setModalObj(data);
- // console.log(data);
- // }).exec();
- } else if (_self.toView == "openAccGyroView") {
- _self.toView = "";
- }
- },
- onGetProjectView() {
- let view = uni.createSelectorQuery().select('#projectButtonView');
- view.boundingClientRect(data => {
- _self.$refs.codeElfGuide.setProjectObj(data);
- }).exec();
- },
- //拳击模块的回调
- boxingUpdateCalorie(calorie) {
- if (this.currentMode != 'pkMode') {
- //这里调用一下设置可以播放音效
- this.$refs.personalFruitRef.onCanPlay();
- }
- this.onUpdateCaloriePlane(calorie);
- },
- //扫码添加设备
- openQRCode(callback) {
- let that = this;
- // 允许从相机和相册扫码
- uni.scanCode({
- success: function(res) {
- // console.log('条码类型:' + res.scanType);
- // console.log('条码内容:' + res.result);
- let obj = JSON.parse(res.result)
- let data = {
- type: obj.type,
- uuid: obj.uuid,
- }
- }
- });
- },
- //屏幕抖动
- onScreenShake() {
- this.bEFHitShake = true;
- setTimeout(() => {
- this.bEFHitShake = false;
- }, 500)
- },
- onGetAiRandom() {
- let _self = this;
- let avatarlist = AvatarConfig.getAvatarList().avatarList;
- let _length = avatarlist.length;
- let _index = Math.floor(Math.random() * _length);
- console.log(avatarlist);
- _self.aiObj.name = avatarlist[_index].name;
- _self.aiObj.avatar = avatarlist[_index].url;
- },
- onBoxingGameOver(res) {
- this.$refs.hitEffectRef.onStop();
- this.onBoxingPause(true);
- let _title = res.myWin ? "胜利" : "失败";
- let _context = res.myWin ? "你已经赢得PK胜利!" : "你在PK中被打败了!";
- this.modalName = "showModalTip"
- this.$refs.modalTipRef.setShowData({
- title: _title,
- context: _context
- });
- },
- onModalTipHide() {
- this.modalName = null;
- },
- onModalTipConfirm() {
- this.modalName = null;
- //再来一局
- },
- onTestShare() {
- uni.share({
- provider: "weixin",
- scene: "WXSenceTimeline",
- type: 2,
- imageUrl: "https://img-cdn-qiniu.dcloud.net.cn/uniapp/images/uni@2x.png",
- success: function(res) {
- console.log("success:" + JSON.stringify(res));
- },
- fail: function(err) {
- console.log("fail:" + JSON.stringify(err));
- }
- });
- },
- openAcc() {
- if (!this.globalAcc) {
- AccAndOri.bindAcc((accId) => {
- this.$store.state.globalAcc = accId;
- console.log("初始化:globalAcc=", this.globalAcc);
- });
- }
- if (!this.globalOri) {
- AccAndOri.bindOri((oriId) => {
- this.$store.state.globalOri = oriId;
- console.log("初始化:globalOri=", this.globalOri);
- });
- }
- },
- closeAcc() {
- AccAndOri.unBindAcc(this.globalAcc);
- this.$store.state.globalAcc = null;
- AccAndOri.unBindOri(this.globalOri);
- this.$store.state.globalOri = null;
- },
- outGyro(o) {
- console.log("Orientation\nAlpha:" + o.alpha + "\nBeta:" + o.beta + "\nGamma:" + o.gamma);
- },
- openGyro() {
- if (!this.globalOri) {
- AccAndOri.bindOri((oriId) => {
- this.$store.state.globalOri = oriId;
- console.log("初始化:globalOri=", this.globalOri);
- });
- }
- uni.$on('watchOrientation', this.outGyro);
- },
- stopGyro() {
- uni.$off('watchOrientation', this.outGyro);
- AccAndOri.unBindOri(this.globalOri);
- this.$store.state.globalOri = null;
- },
- onKeyInput: function(event) {
- this.$store.state.LocationGameUrl = event.target.value
- },
- onNavFcGame() {
- // console.log(0);
- uni.navigateTo({
- url: "../../fc-page/fc/fc"
- })
- },
- onNavAppInfo() {
- uni.navigateTo({
- url: '../../info-page/app-info/app-info'
- })
- },
- getBLEDeviceServices() {
- console.log("getBLEDeviceServices");
- // uni.getBLEDeviceServices({
- // deviceId: "C5:5C:19:04:00:30",
- // success: res => {
- // console.log("getBLEDeviceServices==", JSON.stringify(res));
- // },
- // fail: failRes => {
- // console.log('device services:', failRes)
- // }
- // });
- },
- // testAsyncFunc() {
- // // 调用异步方法
- // testModule.testAsyncFunc({
- // 'name': 'unimp',
- // 'age': 1
- // },
- // (ret) => {
- // modal.toast({
- // message: ret,
- // duration: 1.5
- // });
- // })
- // },
- // startSyncFunc() {
- // // 调用同步方法
- // var ret = testModule.onStartAccAndGyro({
- // 'name': 'unimp',
- // 'age': 1
- // })
- // modal.toast({
- // message: ret,
- // duration: 1.5
- // });
- // },
- // stopSyncFunc() {
- // // 调用同步方法
- // var ret = testModule.onStopAccAndGyro({
- // 'name': 'unimp',
- // 'age': 1
- // })
- // modal.toast({
- // message: ret,
- // duration: 1.5
- // });
- // },
- }
- };
- </script>
- <style>
- .bg-person {
- background-color: #9797ff;
- }
- .plan-view {
- overflow: hidden;
- background-color: #9797ff;
- }
- .plan-l-tip-view {
- border-radius: 80upx 0 0 80upx;
- background-color: rgba(255, 255, 255, 0.05);
- }
- .plan-r-tip-view {
- border-radius: 0 80upx 80upx 0;
- background-color: rgba(255, 255, 255, 0.05);
- }
- .bottom-view {
- background-color: rgba(246, 243, 249, 255);
- padding-bottom: 20rpx;
- border-radius: 80rpx 80rpx 0 0;
- width: 100%;
- overflow: hidden;
- }
- .time-view {
- width: 100%;
- margin-top: 53rpx;
- /* border: 1rpx solid #DD514C; */
- }
- /*样式的width和height一定要与定义的cWidth和cHeight相对应*/
- .qiun-charts-arcbar {
- /* padding: 20rpx 15rpx; */
- /* margin-top: 60rpx; */
- height: 600rpx;
- position: relative;
- width: 750rpx;
- /* border: 1rpx solid #000000; */
- }
- .charts-arcbar {
- position: absolute;
- /* margin-left: 81upx;
- */
- left: 0;
- right: 0;
- top: 0;
- /* bottom: 0; */
- margin: auto;
- width: 556upx;
- height: 600upx;
- /* border: 1rpx solid #FFFFFF; */
- }
- .charts-arcbar-img {
- position: absolute;
- left: 135upx;
- width: 480upx;
- height: 480upx;
- }
- .charts-pring-bottom {
- position: relative;
- width: 100%;
- display: flex;
- flex-direction: column;
- justify-content: center;
- align-items: center;
- }
- .charts-pring-button {
- width: 178rpx;
- height: 64rpx;
- display: flex;
- flex-direction: row;
- justify-content: start;
- align-items: center;
- border-radius: 0 25px 25px 0;
- }
- /* 心电图 */
- /* .qiun-charts-elect {
- width: 500rpx;
- height: 136rpx;
- } */
- .charts-elect {
- width: 464rpx;
- height: 96rpx;
- border: 1rpx solid #000000;
- }
- .e-button {
- background-color: rgba(255, 255, 255, 0.25);
- border-radius: 45px;
- margin: 5px 12px;
- box-shadow: 1px 1px 3px #888888;
- display: flex;
- justify-content: center;
- }
- /* 曲线图 */
- .qiun-charts-area {
- width: calc(750rpx - 40rpx);
- height: 300upx;
- /* background-color: #007AFF; */
- position: relative;
- }
- .charts-area {
- position: absolute;
- width: 750upx;
- height: 300upx;
- }
- .qiun-charts-bottom-container {
- height: 63px;
- position: relative;
- width: 100%;
- justify-content: center;
- align-items: center;
- display: flex;
- flex-direction: row;
- }
- .qiun-charts-bottom-right {
- position: absolute;
- left: calc(50% + 50rpx);
- top: 15px;
- margin-left: 20rpx;
- }
- /* picker */
- .mpvue-picker-view {
- width: calc(50% - 5px);
- height: 300px;
- /* background-color: rgba(255, 255, 255, 1); */
- border-radius: 20px;
- }
- .item {
- text-align: center;
- width: calc(100% - 0px);
- background-color: rgba(255, 255, 255, 1);
- height: 88upx;
- line-height: 88upx;
- text-overflow: ellipsis;
- white-space: nowrap;
- font-size: 40upx;
- }
- .picker-unit {
- position: absolute;
- right: 70px;
- top: 43%;
- }
- .left-button,
- .right-button {
- margin: 20px 0;
- padding: 10px 30px;
- background-color: #ffffff;
- }
- .left-button {
- border-top-left-radius: 20px;
- border-bottom-left-radius: 20px;
- border-right: 1px solid #e6e6e6;
- }
- .right-button {
- border-top-right-radius: 20px;
- border-bottom-right-radius: 20px;
- }
- .png-size-28 {
- width: 24px;
- height: 24px;
- margin-bottom: 4px;
- }
- .png-size-32 {
- width: 32px;
- height: 32px;
- }
- .png-size-34 {
- width: 34px;
- height: 34px;
- }
- /* 图标大小 */
- .data-play {
- width: 16px;
- height: 16px;
- margin-top: 10rpx;
- }
- .p-data-png {
- width: 16px;
- height: 16px;
- margin: 5rpx 20rpx;
- }
- .data-png {
- width: 16px;
- height: 16px;
- margin: 5rpx;
- }
- .data-png-20 {
- width: 20px;
- height: 20px;
- margin: 0 14rpx;
- }
- .data-png-54 {
- width: 54px;
- height: 54px;
- margin: 0 14rpx;
- }
- .data-png-add {
- position: absolute;
- left: 0;
- top: 0;
- right: 0;
- bottom: 0;
- margin: auto;
- width: 34px;
- height: 37px;
- }
- .time-container {
- margin-top: 13px;
- width: 100%;
- height: 218rpx;
- position: relative;
- /* border: 1rpx solid #007AFF; */
- }
- .time-png {
- width: 503rpx;
- height: 222rpx;
- position: absolute;
- left: 0;
- right: 0;
- top: 0;
- bottom: 0;
- margin: auto;
- z-index: 1;
- }
- .time-text {
- font-size: 9px;
- z-index: 10;
- position: relative;
- height: 100%;
- display: flex;
- justify-content: center;
- align-items: center;
- color: #FFFFFF;
- }
- .padding {
- padding: 10rpx;
- }
- .logo {
- height: 200rpx;
- width: 200rpx;
- margin-top: 200rpx;
- margin-left: auto;
- margin-right: auto;
- margin-bottom: 50rpx;
- }
- .float-png {
- position: absolute;
- right: 15px;
- bottom: 200px;
- width: 56px;
- height: 56px;
- }
- .moveCanvas {
- position: fixed;
- top: 9999rpx;
- left: 0;
- width: 188rpx;
- height: 188rpx;
- }
- .scroll-class {
- width: 100%;
- overflow-x: hidden;
- box-sizing: border-box;
- /* border: 1rpx solid #000000; */
- }
- .homepage-grid-square {
- width: 250rpx;
- /* height: 250rpx; */
- align-items: start;
- }
- .homepage-grid-square image {
- width: 176rpx;
- height: 176rpx;
- }
- .border {
- /* width: 176rpx; */
- font-size: 30rpx;
- color: rgba(175, 175, 175, 1);
- font-weight: 400;
- text-align: center;
- margin-top: 22rpx;
- margin-bottom: 40rpx;
- }
- .item-img {
- border-radius: 20rpx;
- /* border: 1rpx solid #EEEEEE; */
- box-shadow: 0px 1px 2px 0px rgba(113, 113, 219, 0.23);
- }
- .plan-Tip-child {
- height: 120rpx;
- }
- .plan-mode-tip {
- height: 90rpx;
- }
- .plan-grid-square {
- width: 250rpx;
- /* height: 250rpx; */
- align-items: start;
- }
- .plan-grid-square image {
- width: 168rpx;
- height: 58rpx;
- }
- .plan-mode {
- /* height: 54px; */
- border-radius: 10px;
- padding: 3px;
- margin: 0 5px 10px 5px;
- border: 1rpx solid #eeeeee;
- /* box-shadow: 0px 1px 2px 0px rgba(113, 113, 219, 0.23); */
- position: relative;
- }
- .plan-mode-selected {
- /* height: 54px; */
- padding: 3px;
- margin: 0 5px 10px 5px;
- background-size: contain;
- background-clip: border-box;
- background-repeat: no-repeat;
- background-image: url(../../../static/plan-select-bg.png);
- /* box-shadow: 0px 1px 2px 0px rgba(113, 113, 219, 0.23); */
- position: relative;
- }
- .plan-mode-border {
- /* width: 176rpx; */
- font-size: 26rpx;
- color: rgba(151, 151, 255, 1);
- font-weight: 400;
- text-align: center;
- }
- .button-fav {
- background-color: rgba(153, 150, 252, 255);
- color: #ffffff;
- /* border-radius: 10px; */
- /* width: 184rpx; */
- height: 122rpx;
- display: flex;
- justify-content: center;
- text-align: center;
- align-items: center;
- font-size: 14px;
- }
- .card-view-small {
- /* border: 1rpx solid #000000; */
- width: 80%;
- border-radius: 20px;
- margin-left: 50rpx;
- overflow: hidden;
- background-color: #ffffff;
- box-shadow: 0px 2px 4px 0px rgba(113, 113, 219, 0.23);
- }
- .right-bg {
- /* border: 1rpx solid #000000; */
- border-radius: 8px;
- background-color: #9797ff;
- padding: 15rpx;
- position: absolute;
- right: 5%;
- margin-top: 4%;
- }
- .plan-small-child {
- background-color: #f5f5ff;
- border-radius: 20px;
- width: 480rpx;
- height: 90rpx;
- margin: 0 0 30rpx 30rpx;
- /* margin-top: 60rpx; */
- }
- .cu-btn-plan {
- position: relative;
- border: 0upx;
- display: inline-flex;
- align-items: center;
- justify-content: center;
- box-sizing: border-box;
- padding: 4upx 25upx 4upx 4upx;
- margin-left: 5px;
- font-size: 22upx;
- height: 64upx;
- line-height: 1;
- text-align: center;
- text-decoration: none;
- overflow: visible;
- margin-left: initial;
- transform: translate(0upx, 0upx);
- margin-right: initial;
- }
- .cu-btn-plan-child {
- position: relative;
- border: 0upx;
- display: inline-flex;
- align-items: center;
- justify-content: center;
- box-sizing: border-box;
- padding: 0 4upx;
- font-size: 22upx;
- height: 56upx;
- line-height: 1;
- text-align: center;
- text-decoration: none;
- overflow: visible;
- margin-left: initial;
- transform: translate(0upx, 0upx);
- margin-right: initial;
- }
- .cu-btn-plan-right {
- position: relative;
- border: 0upx;
- display: inline-flex;
- align-items: center;
- justify-content: center;
- box-sizing: border-box;
- padding: 4upx 4upx 4upx 19upx;
- margin-left: 5px;
- font-size: 22upx;
- height: 64upx;
- line-height: 1;
- text-align: center;
- text-decoration: none;
- overflow: visible;
- margin-left: initial;
- transform: translate(0upx, 0upx);
- margin-right: initial;
- }
- /* 粗线条 */
- .line-make {
- margin-top: 11px;
- margin-left: 8px;
- border: 4rpx solid #FFFFFF;
- width: 152rpx;
- border-radius: 3px;
- }
- /* 头像背景处理 */
- .avatar-bg-personal {
- width: 34px;
- height: 34px;
- border-radius: 45px;
- border: 2px solid #9997fc;
- background-color: #9997fc;
- box-sizing: border-box;
- }
- .avatar-bg-arrow {
- position: absolute;
- top: 12px;
- left: calc(50% - 10px);
- border-left: 10px solid transparent;
- border-right: 10px solid transparent;
- border-bottom: 10px solid #9997fc;
- }
- .elect-round-image {
- width: 48px;
- height: 48px;
- z-index: 10;
- box-shadow: 1px 1px 3px #888888;
- border-radius: 45px;
- }
- .elect-personal {
- /* width: 100%; */
- height: 120rpx;
- /* margin: 50rpx 0; */
- margin-bottom: 50rpx;
- border-radius: 45px;
- padding: 10rpx;
- border: 1rpx solid rgba(255, 255, 255, 0.11);
- display: flex;
- justify-content: center;
- align-items: center;
- position: relative;
- }
- /* 呼吸灯 */
- .breathing-lamp {
- animation-duration: 1s;
- animation-timing-function: ease-out;
- animation-fill-mode: inherit;
- animation-iteration-count: infinite;
- animation-name: run-lamp;
- animation-play-state: running;
- }
- @keyframes run-lamp {
- 0%,
- 100% {
- opacity: 1;
- transform: scale(1);
- }
- 50% {
- opacity: 0.6;
- transform: scale(0.9);
- }
- }
- .personal-fruit-container {
- position: absolute;
- left: 0;
- top: 0;
- bottom: 0;
- right: 0;
- margin: auto;
- display: flex;
- align-items: center;
- justify-content: center;
- /* border: 1rpx solid #F0F0F0; */
- }
- .screen-jitter {
- animation-duration: 1s;
- animation-timing-function: ease-out;
- animation-fill-mode: inherit;
- animation-iteration-count: infinite;
- animation-name: personal-shake;
- animation-play-state: running;
- }
- .screen-red {
- border: 1rpx solid #ff0000;
- }
- @keyframes personal-shake {
- 0%,
- 100% {
- transform: translateX(0)
- }
- 10% {
- transform: translateX(-9px)
- }
- 20% {
- transform: translateX(8px)
- }
- 30% {
- transform: translateX(-7px)
- }
- 40% {
- transform: translateX(6px)
- }
- 50% {
- transform: translateX(-5px)
- }
- 60% {
- transform: translateX(4px)
- }
- 70% {
- transform: translateX(-3px)
- }
- 80% {
- transform: translateX(2px)
- }
- 90% {
- transform: translateX(-1px)
- }
- }
- .CountDownMask {
- position: absolute;
- top: 0;
- bottom: 0;
- right: 0;
- left: 0;
- background-color: rgba(0, 0, 0, 0.5);
- z-index: 1000;
- display: flex;
- justify-content: center;
- align-items: center;
- font-size: 100px;
- font-weight: bold;
- color: #FFFFFF;
- }
- </style>
|