living.vue 212 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350351352353354355356357358359360361362363364365366367368369370371372373374375376377378379380381382383384385386387388389390391392393394395396397398399400401402403404405406407408409410411412413414415416417418419420421422423424425426427428429430431432433434435436437438439440441442443444445446447448449450451452453454455456457458459460461462463464465466467468469470471472473474475476477478479480481482483484485486487488489490491492493494495496497498499500501502503504505506507508509510511512513514515516517518519520521522523524525526527528529530531532533534535536537538539540541542543544545546547548549550551552553554555556557558559560561562563564565566567568569570571572573574575576577578579580581582583584585586587588589590591592593594595596597598599600601602603604605606607608609610611612613614615616617618619620621622623624625626627628629630631632633634635636637638639640641642643644645646647648649650651652653654655656657658659660661662663664665666667668669670671672673674675676677678679680681682683684685686687688689690691692693694695696697698699700701702703704705706707708709710711712713714715716717718719720721722723724725726727728729730731732733734735736737738739740741742743744745746747748749750751752753754755756757758759760761762763764765766767768769770771772773774775776777778779780781782783784785786787788789790791792793794795796797798799800801802803804805806807808809810811812813814815816817818819820821822823824825826827828829830831832833834835836837838839840841842843844845846847848849850851852853854855856857858859860861862863864865866867868869870871872873874875876877878879880881882883884885886887888889890891892893894895896897898899900901902903904905906907908909910911912913914915916917918919920921922923924925926927928929930931932933934935936937938939940941942943944945946947948949950951952953954955956957958959960961962963964965966967968969970971972973974975976977978979980981982983984985986987988989990991992993994995996997998999100010011002100310041005100610071008100910101011101210131014101510161017101810191020102110221023102410251026102710281029103010311032103310341035103610371038103910401041104210431044104510461047104810491050105110521053105410551056105710581059106010611062106310641065106610671068106910701071107210731074107510761077107810791080108110821083108410851086108710881089109010911092109310941095109610971098109911001101110211031104110511061107110811091110111111121113111411151116111711181119112011211122112311241125112611271128112911301131113211331134113511361137113811391140114111421143114411451146114711481149115011511152115311541155115611571158115911601161116211631164116511661167116811691170117111721173117411751176117711781179118011811182118311841185118611871188118911901191119211931194119511961197119811991200120112021203120412051206120712081209121012111212121312141215121612171218121912201221122212231224122512261227122812291230123112321233123412351236123712381239124012411242124312441245124612471248124912501251125212531254125512561257125812591260126112621263126412651266126712681269127012711272127312741275127612771278127912801281128212831284128512861287128812891290129112921293129412951296129712981299130013011302130313041305130613071308130913101311131213131314131513161317131813191320132113221323132413251326132713281329133013311332133313341335133613371338133913401341134213431344134513461347134813491350135113521353135413551356135713581359136013611362136313641365136613671368136913701371137213731374137513761377137813791380138113821383138413851386138713881389139013911392139313941395139613971398139914001401140214031404140514061407140814091410141114121413141414151416141714181419142014211422142314241425142614271428142914301431143214331434143514361437143814391440144114421443144414451446144714481449145014511452145314541455145614571458145914601461146214631464146514661467146814691470147114721473147414751476147714781479148014811482148314841485148614871488148914901491149214931494149514961497149814991500150115021503150415051506150715081509151015111512151315141515151615171518151915201521152215231524152515261527152815291530153115321533153415351536153715381539154015411542154315441545154615471548154915501551155215531554155515561557155815591560156115621563156415651566156715681569157015711572157315741575157615771578157915801581158215831584158515861587158815891590159115921593159415951596159715981599160016011602160316041605160616071608160916101611161216131614161516161617161816191620162116221623162416251626162716281629163016311632163316341635163616371638163916401641164216431644164516461647164816491650165116521653165416551656165716581659166016611662166316641665166616671668166916701671167216731674167516761677167816791680168116821683168416851686168716881689169016911692169316941695169616971698169917001701170217031704170517061707170817091710171117121713171417151716171717181719172017211722172317241725172617271728172917301731173217331734173517361737173817391740174117421743174417451746174717481749175017511752175317541755175617571758175917601761176217631764176517661767176817691770177117721773177417751776177717781779178017811782178317841785178617871788178917901791179217931794179517961797179817991800180118021803180418051806180718081809181018111812181318141815181618171818181918201821182218231824182518261827182818291830183118321833183418351836183718381839184018411842184318441845184618471848184918501851185218531854185518561857185818591860186118621863186418651866186718681869187018711872187318741875187618771878187918801881188218831884188518861887188818891890189118921893189418951896189718981899190019011902190319041905190619071908190919101911191219131914191519161917191819191920192119221923192419251926192719281929193019311932193319341935193619371938193919401941194219431944194519461947194819491950195119521953195419551956195719581959196019611962196319641965196619671968196919701971197219731974197519761977197819791980198119821983198419851986198719881989199019911992199319941995199619971998199920002001200220032004200520062007200820092010201120122013201420152016201720182019202020212022202320242025202620272028202920302031203220332034203520362037203820392040204120422043204420452046204720482049205020512052205320542055205620572058205920602061206220632064206520662067206820692070207120722073207420752076207720782079208020812082208320842085208620872088208920902091209220932094209520962097209820992100210121022103210421052106210721082109211021112112211321142115211621172118211921202121212221232124212521262127212821292130213121322133213421352136213721382139214021412142214321442145214621472148214921502151215221532154215521562157215821592160216121622163216421652166216721682169217021712172217321742175217621772178217921802181218221832184218521862187218821892190219121922193219421952196219721982199220022012202220322042205220622072208220922102211221222132214221522162217221822192220222122222223222422252226222722282229223022312232223322342235223622372238223922402241224222432244224522462247224822492250225122522253225422552256225722582259226022612262226322642265226622672268226922702271227222732274227522762277227822792280228122822283228422852286228722882289229022912292229322942295229622972298229923002301230223032304230523062307230823092310231123122313231423152316231723182319232023212322232323242325232623272328232923302331233223332334233523362337233823392340234123422343234423452346234723482349235023512352235323542355235623572358235923602361236223632364236523662367236823692370237123722373237423752376237723782379238023812382238323842385238623872388238923902391239223932394239523962397239823992400240124022403240424052406240724082409241024112412241324142415241624172418241924202421242224232424242524262427242824292430243124322433243424352436243724382439244024412442244324442445244624472448244924502451245224532454245524562457245824592460246124622463246424652466246724682469247024712472247324742475247624772478247924802481248224832484248524862487248824892490249124922493249424952496249724982499250025012502250325042505250625072508250925102511251225132514251525162517251825192520252125222523252425252526252725282529253025312532253325342535253625372538253925402541254225432544254525462547254825492550255125522553255425552556255725582559256025612562256325642565256625672568256925702571257225732574257525762577257825792580258125822583258425852586258725882589259025912592259325942595259625972598259926002601260226032604260526062607260826092610261126122613261426152616261726182619262026212622262326242625262626272628262926302631263226332634263526362637263826392640264126422643264426452646264726482649265026512652265326542655265626572658265926602661266226632664266526662667266826692670267126722673267426752676267726782679268026812682268326842685268626872688268926902691269226932694269526962697269826992700270127022703270427052706270727082709271027112712271327142715271627172718271927202721272227232724272527262727272827292730273127322733273427352736273727382739274027412742274327442745274627472748274927502751275227532754275527562757275827592760276127622763276427652766276727682769277027712772277327742775277627772778277927802781278227832784278527862787278827892790279127922793279427952796279727982799280028012802280328042805280628072808280928102811281228132814281528162817281828192820282128222823282428252826282728282829283028312832283328342835283628372838283928402841284228432844284528462847284828492850285128522853285428552856285728582859286028612862286328642865286628672868286928702871287228732874287528762877287828792880288128822883288428852886288728882889289028912892289328942895289628972898289929002901290229032904290529062907290829092910291129122913291429152916291729182919292029212922292329242925292629272928292929302931293229332934293529362937293829392940294129422943294429452946294729482949295029512952295329542955295629572958295929602961296229632964296529662967296829692970297129722973297429752976297729782979298029812982298329842985298629872988298929902991299229932994299529962997299829993000300130023003300430053006300730083009301030113012301330143015301630173018301930203021302230233024302530263027302830293030303130323033303430353036303730383039304030413042304330443045304630473048304930503051305230533054305530563057305830593060306130623063306430653066306730683069307030713072307330743075307630773078307930803081308230833084308530863087308830893090309130923093309430953096309730983099310031013102310331043105310631073108310931103111311231133114311531163117311831193120312131223123312431253126312731283129313031313132313331343135313631373138313931403141314231433144314531463147314831493150315131523153315431553156315731583159316031613162316331643165316631673168316931703171317231733174317531763177317831793180318131823183318431853186318731883189319031913192319331943195319631973198319932003201320232033204320532063207320832093210321132123213321432153216321732183219322032213222322332243225322632273228322932303231323232333234323532363237323832393240324132423243324432453246324732483249325032513252325332543255325632573258325932603261326232633264326532663267326832693270327132723273327432753276327732783279328032813282328332843285328632873288328932903291329232933294329532963297329832993300330133023303330433053306330733083309331033113312331333143315331633173318331933203321332233233324332533263327332833293330333133323333333433353336333733383339334033413342334333443345334633473348334933503351335233533354335533563357335833593360336133623363336433653366336733683369337033713372337333743375337633773378337933803381338233833384338533863387338833893390339133923393339433953396339733983399340034013402340334043405340634073408340934103411341234133414341534163417341834193420342134223423342434253426342734283429343034313432343334343435343634373438343934403441344234433444344534463447344834493450345134523453345434553456345734583459346034613462346334643465346634673468346934703471347234733474347534763477347834793480348134823483348434853486348734883489349034913492349334943495349634973498349935003501350235033504350535063507350835093510351135123513351435153516351735183519352035213522352335243525352635273528352935303531353235333534353535363537353835393540354135423543354435453546354735483549355035513552355335543555355635573558355935603561356235633564356535663567356835693570357135723573357435753576357735783579358035813582358335843585358635873588358935903591359235933594359535963597359835993600360136023603360436053606360736083609361036113612361336143615361636173618361936203621362236233624362536263627362836293630363136323633363436353636363736383639364036413642364336443645364636473648364936503651365236533654365536563657365836593660366136623663366436653666366736683669367036713672367336743675367636773678367936803681368236833684368536863687368836893690369136923693369436953696369736983699370037013702370337043705370637073708370937103711371237133714371537163717371837193720372137223723372437253726372737283729373037313732373337343735373637373738373937403741374237433744374537463747374837493750375137523753375437553756375737583759376037613762376337643765376637673768376937703771377237733774377537763777377837793780378137823783378437853786378737883789379037913792379337943795379637973798379938003801380238033804380538063807380838093810381138123813381438153816381738183819382038213822382338243825382638273828382938303831383238333834383538363837383838393840384138423843384438453846384738483849385038513852385338543855385638573858385938603861386238633864386538663867386838693870387138723873387438753876387738783879388038813882388338843885388638873888388938903891389238933894389538963897389838993900390139023903390439053906390739083909391039113912391339143915391639173918391939203921392239233924392539263927392839293930393139323933393439353936393739383939394039413942394339443945394639473948394939503951395239533954395539563957395839593960396139623963396439653966396739683969397039713972397339743975397639773978397939803981398239833984398539863987398839893990399139923993399439953996399739983999400040014002400340044005400640074008400940104011401240134014401540164017401840194020402140224023402440254026402740284029403040314032403340344035403640374038403940404041404240434044404540464047404840494050405140524053405440554056405740584059406040614062406340644065406640674068406940704071407240734074407540764077407840794080408140824083408440854086408740884089409040914092409340944095409640974098409941004101410241034104410541064107410841094110411141124113411441154116411741184119412041214122412341244125412641274128412941304131413241334134413541364137413841394140414141424143414441454146414741484149415041514152415341544155415641574158415941604161416241634164416541664167416841694170417141724173417441754176417741784179418041814182418341844185418641874188418941904191419241934194419541964197419841994200420142024203420442054206420742084209421042114212421342144215421642174218421942204221422242234224422542264227422842294230423142324233423442354236423742384239424042414242424342444245424642474248424942504251425242534254425542564257425842594260426142624263426442654266426742684269427042714272427342744275427642774278427942804281428242834284428542864287428842894290429142924293429442954296429742984299430043014302430343044305430643074308430943104311431243134314431543164317431843194320432143224323432443254326432743284329433043314332433343344335433643374338433943404341434243434344434543464347434843494350435143524353435443554356435743584359436043614362436343644365436643674368436943704371437243734374437543764377437843794380438143824383438443854386438743884389439043914392439343944395439643974398439944004401440244034404440544064407440844094410441144124413441444154416441744184419442044214422442344244425442644274428442944304431443244334434443544364437443844394440444144424443444444454446444744484449445044514452445344544455445644574458445944604461446244634464446544664467446844694470447144724473447444754476447744784479448044814482448344844485448644874488448944904491449244934494449544964497449844994500450145024503450445054506450745084509451045114512451345144515451645174518451945204521452245234524452545264527452845294530453145324533453445354536453745384539454045414542454345444545454645474548454945504551455245534554455545564557455845594560456145624563456445654566456745684569457045714572457345744575457645774578457945804581458245834584458545864587458845894590459145924593459445954596459745984599460046014602460346044605460646074608460946104611461246134614461546164617461846194620462146224623462446254626462746284629463046314632463346344635463646374638463946404641464246434644464546464647464846494650465146524653465446554656465746584659466046614662466346644665466646674668466946704671467246734674467546764677467846794680468146824683468446854686468746884689469046914692469346944695469646974698469947004701470247034704470547064707470847094710471147124713471447154716471747184719472047214722472347244725472647274728472947304731473247334734473547364737473847394740474147424743474447454746474747484749475047514752475347544755475647574758475947604761476247634764476547664767476847694770477147724773477447754776477747784779478047814782478347844785478647874788478947904791479247934794479547964797479847994800480148024803480448054806480748084809481048114812481348144815481648174818481948204821482248234824482548264827482848294830483148324833483448354836483748384839484048414842484348444845484648474848484948504851485248534854485548564857485848594860486148624863486448654866486748684869487048714872487348744875487648774878487948804881488248834884488548864887488848894890489148924893489448954896489748984899490049014902490349044905490649074908490949104911491249134914491549164917491849194920492149224923492449254926492749284929493049314932493349344935493649374938493949404941494249434944494549464947494849494950495149524953495449554956495749584959496049614962496349644965496649674968496949704971497249734974497549764977497849794980498149824983498449854986498749884989499049914992499349944995499649974998499950005001500250035004500550065007500850095010501150125013501450155016501750185019502050215022502350245025502650275028502950305031503250335034503550365037503850395040504150425043504450455046504750485049505050515052505350545055505650575058505950605061506250635064506550665067506850695070507150725073507450755076507750785079508050815082508350845085508650875088508950905091509250935094509550965097509850995100510151025103510451055106510751085109511051115112511351145115511651175118511951205121512251235124512551265127512851295130513151325133513451355136513751385139514051415142514351445145514651475148514951505151515251535154515551565157515851595160516151625163516451655166516751685169517051715172517351745175517651775178517951805181518251835184518551865187518851895190519151925193519451955196519751985199520052015202520352045205520652075208520952105211521252135214521552165217521852195220522152225223522452255226522752285229523052315232523352345235523652375238523952405241524252435244524552465247524852495250525152525253525452555256525752585259526052615262526352645265526652675268526952705271527252735274527552765277527852795280528152825283528452855286528752885289529052915292529352945295529652975298529953005301530253035304530553065307530853095310531153125313531453155316531753185319532053215322532353245325532653275328532953305331533253335334533553365337533853395340534153425343534453455346534753485349535053515352535353545355535653575358535953605361536253635364536553665367536853695370537153725373537453755376537753785379538053815382538353845385538653875388538953905391539253935394539553965397539853995400540154025403540454055406540754085409541054115412541354145415541654175418541954205421542254235424542554265427542854295430543154325433543454355436543754385439544054415442544354445445544654475448544954505451545254535454545554565457545854595460546154625463546454655466546754685469547054715472547354745475547654775478547954805481548254835484548554865487548854895490549154925493549454955496549754985499550055015502550355045505550655075508550955105511551255135514551555165517551855195520552155225523552455255526552755285529553055315532553355345535553655375538553955405541554255435544554555465547554855495550555155525553555455555556555755585559556055615562556355645565556655675568556955705571557255735574557555765577557855795580558155825583558455855586558755885589559055915592559355945595559655975598559956005601560256035604560556065607560856095610561156125613561456155616561756185619562056215622562356245625562656275628562956305631563256335634563556365637563856395640564156425643564456455646564756485649565056515652565356545655565656575658565956605661566256635664566556665667566856695670567156725673567456755676567756785679568056815682568356845685568656875688568956905691569256935694569556965697569856995700570157025703570457055706570757085709571057115712571357145715571657175718571957205721572257235724572557265727572857295730573157325733573457355736573757385739574057415742574357445745574657475748574957505751575257535754575557565757575857595760576157625763576457655766576757685769577057715772577357745775577657775778577957805781578257835784578557865787578857895790579157925793579457955796579757985799580058015802580358045805580658075808580958105811581258135814581558165817581858195820582158225823582458255826582758285829583058315832583358345835583658375838583958405841584258435844584558465847584858495850585158525853585458555856585758585859586058615862586358645865586658675868586958705871587258735874587558765877587858795880588158825883588458855886588758885889589058915892589358945895589658975898589959005901590259035904590559065907590859095910591159125913591459155916591759185919592059215922592359245925592659275928592959305931593259335934593559365937593859395940594159425943594459455946594759485949595059515952595359545955595659575958595959605961596259635964596559665967596859695970597159725973597459755976597759785979598059815982598359845985598659875988598959905991599259935994599559965997599859996000600160026003600460056006600760086009601060116012601360146015601660176018601960206021602260236024602560266027602860296030603160326033603460356036603760386039604060416042604360446045604660476048604960506051605260536054605560566057605860596060606160626063606460656066606760686069607060716072607360746075607660776078607960806081608260836084608560866087608860896090609160926093609460956096609760986099610061016102610361046105610661076108610961106111611261136114611561166117611861196120612161226123612461256126612761286129613061316132613361346135613661376138613961406141614261436144614561466147614861496150615161526153615461556156615761586159616061616162616361646165616661676168616961706171617261736174617561766177617861796180618161826183618461856186618761886189619061916192619361946195619661976198619962006201620262036204620562066207620862096210621162126213621462156216621762186219622062216222622362246225622662276228622962306231623262336234623562366237623862396240624162426243624462456246624762486249625062516252625362546255625662576258625962606261626262636264626562666267626862696270627162726273627462756276627762786279628062816282628362846285628662876288628962906291629262936294629562966297629862996300630163026303630463056306630763086309631063116312631363146315631663176318631963206321632263236324632563266327632863296330633163326333633463356336633763386339634063416342634363446345634663476348634963506351635263536354635563566357635863596360636163626363636463656366636763686369637063716372637363746375637663776378637963806381638263836384638563866387638863896390639163926393639463956396639763986399640064016402640364046405640664076408640964106411641264136414641564166417641864196420642164226423642464256426642764286429643064316432643364346435643664376438643964406441644264436444644564466447644864496450645164526453645464556456645764586459646064616462646364646465646664676468646964706471647264736474647564766477647864796480648164826483648464856486648764886489649064916492649364946495649664976498649965006501650265036504650565066507650865096510651165126513651465156516651765186519652065216522652365246525652665276528652965306531653265336534653565366537653865396540654165426543654465456546654765486549655065516552655365546555655665576558655965606561656265636564656565666567656865696570657165726573657465756576657765786579658065816582658365846585658665876588658965906591659265936594659565966597659865996600660166026603660466056606660766086609661066116612661366146615661666176618661966206621662266236624662566266627662866296630663166326633663466356636663766386639664066416642664366446645664666476648664966506651665266536654665566566657665866596660666166626663666466656666666766686669667066716672667366746675667666776678667966806681668266836684668566866687668866896690669166926693669466956696669766986699670067016702670367046705670667076708670967106711671267136714671567166717671867196720672167226723672467256726672767286729673067316732673367346735673667376738673967406741674267436744674567466747674867496750675167526753675467556756675767586759676067616762676367646765676667676768676967706771677267736774677567766777677867796780678167826783678467856786678767886789679067916792679367946795679667976798679968006801680268036804680568066807680868096810681168126813681468156816681768186819682068216822682368246825682668276828682968306831683268336834683568366837683868396840684168426843684468456846684768486849685068516852685368546855685668576858685968606861686268636864686568666867686868696870687168726873687468756876687768786879688068816882688368846885688668876888688968906891689268936894689568966897689868996900690169026903690469056906690769086909691069116912691369146915691669176918691969206921692269236924692569266927692869296930693169326933693469356936693769386939694069416942694369446945694669476948694969506951695269536954695569566957695869596960696169626963696469656966696769686969697069716972697369746975697669776978697969806981698269836984698569866987698869896990699169926993699469956996699769986999700070017002700370047005700670077008700970107011701270137014701570167017701870197020702170227023702470257026702770287029703070317032703370347035703670377038703970407041704270437044704570467047704870497050705170527053705470557056705770587059706070617062706370647065706670677068706970707071707270737074707570767077707870797080708170827083708470857086708770887089709070917092709370947095709670977098709971007101710271037104710571067107710871097110711171127113711471157116711771187119712071217122712371247125712671277128712971307131713271337134713571367137713871397140714171427143714471457146714771487149715071517152715371547155715671577158715971607161716271637164716571667167716871697170717171727173717471757176717771787179718071817182718371847185718671877188718971907191719271937194719571967197719871997200720172027203720472057206720772087209721072117212721372147215721672177218721972207221722272237224722572267227722872297230723172327233723472357236723772387239724072417242724372447245724672477248724972507251725272537254725572567257725872597260726172627263726472657266726772687269727072717272727372747275727672777278727972807281728272837284728572867287728872897290729172927293729472957296729772987299730073017302730373047305730673077308730973107311731273137314731573167317731873197320732173227323732473257326732773287329733073317332733373347335733673377338733973407341734273437344734573467347734873497350735173527353735473557356735773587359736073617362736373647365736673677368736973707371737273737374737573767377737873797380738173827383738473857386738773887389739073917392739373947395739673977398739974007401740274037404740574067407740874097410741174127413741474157416741774187419742074217422742374247425742674277428742974307431743274337434743574367437743874397440744174427443744474457446744774487449745074517452745374547455745674577458745974607461746274637464746574667467746874697470747174727473747474757476747774787479748074817482748374847485748674877488748974907491749274937494749574967497749874997500750175027503750475057506750775087509751075117512751375147515751675177518
  1. <template>
  2. <view class="swiper-wrapper" :class="liveItem.showType == 1 ? 'horizontal' : ''">
  3. <view class="container">
  4. <!-- 预告直播状态 -->
  5. <view :class="liveItem.previewUrl?'trailer-box':'trailer-box2'" v-if="liveItem.status == 1">
  6. <view class="video-container2"
  7. :style="{ paddingBottom:liveItem.previewUrl?videoRatio + '%':'' ,height:auto,width:'100%'}">
  8. <video v-if="liveItem.previewUrl" :id="`myVideo_${liveId}`" class="trailer-video"
  9. :src="liveItem.previewUrl" :autoplay="true" :loop="false"
  10. :object-fit="isHeight?'contain':'fill'" :custom-cache="false" :enable-progress-gesture="false"
  11. vslide-gesture-in-fullscreen="false" :show-center-play-btn="false" :http-cache="false"
  12. @error="videoError" @loadedmetadata="onVideoMetaLoaded" @pause="onVideoPause"
  13. @play="onVideoPlay" :disable-progress="true" :enable-play-gesture="true"
  14. @waiting="onVideoWaiting" preload="auto" type="application/x-mpegURL" :controls="false"></video>
  15. </view>
  16. <image v-if="liveItem.status == 1 && !liveItem.previewUrl" class="trailer-placeholder"
  17. src="https://bjzmky-1323137866.cos.ap-chongqing.myqcloud.com/userapp/images/readyStart.png">
  18. </image>
  19. <view class="countdown-container" v-if="liveItem.status == 1 && liveCountdown">
  20. <view class="live-name" v-if="liveItem.previewUrl">{{ liveItem.liveName }}</view>
  21. <view class="countdown-display">
  22. <text class="countdown-label">距离开播还有</text>
  23. <view class="countdown-unit">
  24. {{ liveCountdown.hours || '00' }}
  25. </view>
  26. <view class="countdown-separator">:</view>
  27. <view class="countdown-unit">
  28. {{ liveCountdown.minutes || '00' }}
  29. </view>
  30. <view class="countdown-separator">:</view>
  31. <view class="countdown-unit">
  32. {{ liveCountdown.seconds || '00' }}
  33. </view>
  34. </view>
  35. </view>
  36. <view class="trailer-actions">
  37. <button open-type="share" class="button-reset share-button">
  38. <view class="action-button mr24" @click="handleAgreement">
  39. <text>分享给好友</text>
  40. </view>
  41. </button>
  42. <view class="action-button reserve-button" @click="handleAgreement">
  43. <!-- <image class="button-icon mr8" src="/static/images/trailer.png"></image> -->
  44. <text>{{ hasSubscribed ? '已预约' : '预约直播'}}</text>
  45. </view>
  46. </view>
  47. </view>
  48. <!-- 无直播状态 -->
  49. <view class="trailer-box" v-if="!liveItem">
  50. <image class="trailer-placeholder"
  51. src="https://bjzmky-1323137866.cos.ap-chongqing.myqcloud.com/userapp/images/no_live.png">
  52. </image>
  53. <view class="no-live-title">暂无直播</view>
  54. </view>
  55. <!-- 主要内容区域 -->
  56. <view class="content"
  57. :class="{ 'horizontal-content': isFocus==1, 'trailer-content': liveItem.status==1, 'fullscreen-mode': isFullscreen }">
  58. <!-- 顶部信息栏 -->
  59. <view class="top-info-bar" v-if="!isFullscreen"
  60. :class="{'horizontal-top': liveItem.showType == 1,'hidden-on-fullscreen': isFullscreen}"
  61. :style="{marginTop: menuButtonInfo.top}">
  62. <view class="user-info-section">
  63. <image v-if="!scene&&liveItem.showType==2" @click="goBack" class="back-icon mr4"
  64. src="https://bjzmky-1323137866.cos.ap-chongqing.myqcloud.com/userapp/images/return3.png" />
  65. <image v-if="!scene&&liveItem.showType==1" @click="goBack" class="w42 h42 mr4"
  66. src="/static/images/return_black.png" />
  67. <view class="user-avatar-container">
  68. <u-avatar
  69. :src="liveItem.liveImgUrl || 'https://bjzmky-1323137866.cos.ap-chongqing.myqcloud.com/userapp/images/avatar.png'"
  70. :size="32"></u-avatar>
  71. <view class="user-name ml10 mr6">
  72. <view>{{ liveItem.liveName ? truncateString(liveItem.liveName, 8) : '未命名' }}</view>
  73. </view>
  74. </view>
  75. </view>
  76. <!-- 观众头像列表 -->
  77. <!-- @click="toggleViewerList" -->
  78. <view v-if="Array.isArray(filteredViewers)" class="viewers-section">
  79. <view style="display: flex;align-items: center;">
  80. <view v-for="(item, index) in (filteredViewers ||[])" :key="index">
  81. <image v-if="item" class="viewer-avatar mr4" :src="item" />
  82. </view>
  83. <view class="viewer-count ">{{formattedWatchCount || 0 }}</view>
  84. </view>
  85. </view>
  86. <!-- v-if="!hasReachedTarget" -->
  87. <!-- v-if="hasReachedTarget!=100" -->
  88. <view class="progress-countdown end" v-if="countdownPercentage!=100">
  89. <!-- <view class="mb16 title">领取完课积分</view> -->
  90. <image class="title" src="/static/images/points_title.png"></image>
  91. <view class="progress-bar-bg">
  92. <view class="progress-bar-fill" :style="{ width: countdownPercentage + '%' }"></view>
  93. </view>
  94. <!-- 剩余 -->
  95. <view class="progress-text">
  96. 倒计时{{ formattedCountdown.hours||'00' }}:{{ formattedCountdown.minutes||'00' }}:{{ formattedCountdown.seconds||"00" }}
  97. </view>
  98. </view>
  99. </view>
  100. <!-- 视频区域 -->
  101. <view class="videolist" v-if="liveItem.status == 2" :class="isFullscreen ? 'screen' : ''">
  102. <view class="video-container"
  103. :style="{ paddingBottom: liveItem.showType==2||isFullscreen?'':videoRatio + '%',height:liveItem.showType==2?'100vh':isFullscreen?'auto':'400rpx',width:isFullscreen?'0':'100%'}"
  104. :class="{'horizontal-layout': liveItem.showType == 1,'fullscreen-mode': isFullscreen}">
  105. <video v-if="liveItem.videoUrl && liveItem.liveType == 2 && !generating"
  106. :id="`myVideo_${liveId}`" :autoplay="true" class="video-player" :src="liveItem.videoUrl"
  107. :style="{transform:liveItem.showType!==2?`scale(${scale})`:'', transformOrigin: 'center center', bottom:isFullscreen?'0':''}"
  108. :object-fit="liveItem.showType==2||isFullscreen?'contain':'fill'" :custom-cache="false"
  109. :enable-progress-gesture="false" vslide-gesture-in-fullscreen="false"
  110. :show-center-play-btn="false" :http-cache="false" loop @error="videoError"
  111. @timeupdate="onVideoTimeUpdate" @loadedmetadata="onVideoMetaLoaded" @pause="onVideoPause"
  112. @play="onVideoPlay" @waiting="onVideoWaiting" :enable-play-gesture="false"
  113. :play-strategy="1" @dblclick="preventDoubleClick" preload="auto"
  114. :enable-stash-buffer="false" :stash-initial-size="0" :stash-max-size="0" :stash-time="0"
  115. type="application/x-mpegURL" :controls="false" :show-fullscreen-btn="false" show-play-btn
  116. show-mute-btn enable-play-gesture="true" @fullscreenchange="onFullscreenChange"
  117. x5-video-player-fullscreen="false" x5-video-player-type="h5"
  118. x5-video-orientation="landscape" :webkit-playsinline="true" playsinline="true"
  119. :x5-playsinline="true">
  120. </video>
  121. <view v-else class="txt">回放生成中...</view>
  122. <view v-if="showCustomControls && liveItem.showType==1 && !isFullscreen" class="custom-controls"
  123. @click.stop="toggleFullscreen">
  124. <image src="/static/images/full_screen.png" class="control-icon" />
  125. </view>
  126. <!-- 全屏返回按钮 - 只在全屏状态下显示 -->
  127. <view v-if="isFullscreen" class="fullscreen-exit-btn" @click="exitFullscreen">
  128. <image src="/static/images/half_screen.png" class="exit-fullscreen-icon" />
  129. <text class="exit-text">退出全屏</text>
  130. </view>
  131. <!-- 投诉按钮 -->
  132. <view v-if="liveItem.showType==2||isFullscreen" class="complaint-box"
  133. :class="isFullscreen ? 'complaint-full' : ''"
  134. :style="{top:isFullscreen?'':'15%',bottom:isFullscreen?'86vw':''}"
  135. @click="navgetTo('/pages_shopping/live/complaintList') ">
  136. <image class="image w32 h32 mr10" src="/static/images/complaint.png" mode="widthFix" />
  137. <view class="fs26">投诉</view>
  138. </view>
  139. <!-- 回放标签 -->
  140. <view v-if="isPlayback" class="replay-label"
  141. :style="{top:liveItem.showType === 2?'22%':isFullscreen?'':'10%',bottom:isFullscreen?'75vw':''}"
  142. :class="isFullscreen? 'replay-full' : ''">回放
  143. </view>
  144. </view>
  145. </view>
  146. <!-- 直播结束状态 -->
  147. <!-- v-if="liveItem.status == 3" -->
  148. <view class="videolist" v-if="liveItem.status == 3">
  149. <view class="video-container" style="height: 500rpx;"
  150. :class="{'horizontal-layout': liveItem.showType == 1, 'fullscreen-mode': isFullscreen}">
  151. <view class="live-end-message" :style="{marginTop:liveItem.showType === 2?'50%':''}">直播已结束
  152. </view>
  153. </view>
  154. </view>
  155. <!-- 直播回放 -->
  156. <view class="videolist" v-if="liveItem.status == 4">
  157. <view class="video-container" :class="liveItem.showType == 1 ? 'horizontal-layout' : ''">
  158. <video v-if="liveItem.videoUrl && liveItem.liveType == 3" :id="`myVideo_${liveId}`"
  159. class="video-player" :src="liveItem.videoUrl" :autoplay="true" :controls="true"
  160. :object-fit="isFullscreen?'contain':'contain'" :custom-cache="false"
  161. :enable-progress-gesture="liveItem.isSpeedAllowed" vslide-gesture-in-fullscreen="true"
  162. :show-center-play-btn="true" :http-cache="false" loop @error="videoError"
  163. @timeupdate="onVideoTimeUpdate" @loadedmetadata="onVideoMetaLoaded" @pause="onVideoPause"
  164. @play="onVideoPlay" :enable-play-gesture="true" preload="auto" @waiting="onVideoWaiting"
  165. type="application/x-mpegURL"></video>
  166. <view v-if="liveItem.videoUrl && liveItem.liveType == 3" class="replay-label">直播回放</view>
  167. </view>
  168. </view>
  169. <view class="slide-group" v-if="!isFocus && !isFullscreen">
  170. <view class="action-button-group end">
  171. <view :class="[liveItem.showType === 1 ? 'horizontal' : 'vertical','icon-button','ml20']">
  172. <button open-type="share" class="action-icon button-reset">
  173. <image class="action-icon"
  174. src="https://bjzmky-1323137866.cos.ap-chongqing.myqcloud.com/userapp/images/weixin.png"
  175. mode="widthFix" />
  176. </button>
  177. </view>
  178. </view>
  179. <view class="action-button-group end">
  180. <view
  181. :class="[liveItem.showType === 1 ? 'horizontal' : 'vertical','icon-button','ml20','like-container']"
  182. @click="onLike">
  183. <LikeButton :initialCount="100" :heartsPerClick="5" @like="onLike" />
  184. <view class="like-count">{{formattedLikeCount||0 }}</view>
  185. </view>
  186. </view>
  187. </view>
  188. <!-- 底部聊天区域 -->
  189. <view class="chat-area-container" :class="{
  190. 'chat-area-container2': liveItem.showType == 1,
  191. 'chat-area-container3': liveItem.status == 1 && !liveItem.previewUrl && liveItem.showType == 1,
  192. 'chat-area-container4': liveItem.status == 1 && liveItem.previewUrl && liveItem.showType == 1,
  193. 'chat-area-focused': isFocus
  194. }" :style="{ '--keyboard-height': keyboardHeight + 'rpx' ,'display':isFullscreen?'none':''}">
  195. <view class="tabs_bg" v-if="liveItem.showType == 1">
  196. <u-tabs :list="listTabs" @click="clickTabs" lineColor="#02B176"
  197. :activeStyle="{color: '#02B176',fontWeight: 'bold',transform: 'scale(1.05)'}">
  198. </u-tabs>
  199. <!-- 投诉 -->
  200. <view v-if="liveItem.showType==1" class="complaint-box"
  201. @click="navgetTo('/pages_shopping/live/complaintList') ">
  202. <image class="image w32 h32 mr10" src="/static/images/complaint2.png" mode="widthFix" />
  203. <view class="fs26">投诉</view>
  204. </view>
  205. </view>
  206. <view class="chat-content-wrapper"
  207. :style="{ 'height':liveItem.status == 1 && !liveItem.previewUrl && liveItem.showType == 2?'48vh':''}"
  208. :class="{ 'chat-content-focused': isFocus }">
  209. <view class="notice-message" v-if="isShowNotice"
  210. :style="{ 'display':isFocus&&liveItem.showType == 2?'none':''}"
  211. :class="liveItem.showType == 1 ? 'horizontal-notice' : 'horizontal-notice2'">
  212. 公告消息: {{notice.msg}}
  213. </view>
  214. <scroll-view id="msgScroll" v-if="Array.isArray(talklist)" enable-flex scroll-y="true"
  215. :style="{ height: liveItem.showType === 1 || liveItem.showType == 2 && !isFocus?`calc(100% - ${commonViewHeight}px)`:'',
  216. marginTop:liveItem.showType === 1?commonViewHeight+'px':liveItem.showType == 2 && !isFocus?`calc(${commonViewHeight}px + 20rpx)`:'' }" :enhanced="true" :bounces="false"
  217. :show-scrollbar="false" :fast-deceleration="false" :enable-back-to-top="false"
  218. class="message-scroll-view" :scroll-top="scrollTop" :scroll-into-view="scrollIntoView"
  219. @scroll="onScroll" ref="scrollView">
  220. <view class="message-list" v-for="(item, talkIndex) in (talklist || [])"
  221. :key="item.uniqueId " :id="`list_${item.uniqueId }`" v-show="item.cmd != 'red' ">
  222. <view class="message-item">
  223. <view class="message-content">
  224. <text class="user-nickname">{{ item.nickName || '未命名' }}
  225. <text v-if="item.cmd != 'entry'">:</text>
  226. </text>
  227. <text class="message-text ml8">{{ item.msg }}</text>
  228. </view>
  229. </view>
  230. </view>
  231. </scroll-view>
  232. </view>
  233. <!-- 底部输入和操作区域 -->
  234. <view class="input-actions-container" :class="{ 'input-actions-focused': isFocus }">
  235. <view v-if="liveItem.status!=3&&!isPlayback" class="input-container" :class="{
  236. 'input-container-focused': isFocus,
  237. 'input-container-normal': !isFocus
  238. }">
  239. <input v-if="isIOS" type="text" :placeholder="placeholderText" v-model="value"
  240. :placeholder-style="liveItem.showType == 1 ? 'color:#999999;' : 'color:#e7e7e7;'"
  241. placeholder-class="placeholder-style" class="chat-input"
  242. :class="{ 'input-focused': isFocus }" @focus="inputFocus" @blur="inputBlur"
  243. cursor-spacing="100" :adjust-position="false" :disabled="isEnd" @confirm="sendMsg"
  244. :confirm-type="value?'send':'done'" />
  245. <input v-else :placeholder="placeholderText" v-model="value" type="text"
  246. :placeholder-style="liveItem.showType == 1 ? 'color:#999999;' : 'color:#e7e7e7;'"
  247. placeholder-class="placeholder-style" class="chat-input"
  248. :class="{ 'input-focused': isFocus }" @focus="inputFocus" @blur="inputBlur"
  249. cursor-spacing="100" :adjust-position="false" :disabled="isEnd" @confirm="sendMsg"
  250. :confirm-type="value?'send':'done'" />
  251. <!-- v-if="isFocus&&!isIOS" -->
  252. <view class="send-button" v-if="!isIOS" :class="liveItem.showType == 1 ? 'send2' : ''"
  253. @click="sendMsg()">
  254. 发送</view>
  255. </view>
  256. <!-- :class="{ 'action-buttons-hidden': isFocus }" -->
  257. <view class="action-buttons" v-if="!isFocus">
  258. <view class="action-button-group" v-if="!isFocus">
  259. <view
  260. :class="[liveItem.showType === 1 ? 'horizontal' : 'vertical','icon-button','mr40']"
  261. @click="isMore=true,shopping=false">
  262. <image :src="liveItem.showType == 1
  263. ? '/static/images/more2.png'
  264. :'https://bjzmky-1323137866.cos.ap-chongqing.myqcloud.com/userapp/images/more-icon.png'"
  265. class="action-icon" />
  266. </view>
  267. </view>
  268. <view class="icon-button mr20" @tap="openCart()">
  269. <image
  270. src="https://bjzmky-1323137866.cos.ap-chongqing.myqcloud.com/userapp/images/shopping.png"
  271. class="cart-icon" />
  272. </view>
  273. </view>
  274. </view>
  275. </view>
  276. </view>
  277. <!-- 商品卡片 -->
  278. <view class="goods-card" v-if="isShowGoods&&!isFullscreen"
  279. @click.stop="goShop(goodsCard.productId, goodsCard.goodsId)">
  280. <view class="goods-card-header">
  281. <view class="goods-status">
  282. <image class="status-icon mr8"
  283. src="https://bjzmky-1323137866.cos.ap-chongqing.myqcloud.com/userapp/images/signal.png" />
  284. 主播讲解中
  285. </view>
  286. <image @click.stop="isShowGoods = false" class="close-icon" src="/static/images/close_w.png" />
  287. </view>
  288. <image class="goods-image" :src="goodsCard.imgUrl" />
  289. <view class="goods-info">
  290. <view class="goods-title oneline-hide">{{ goodsCard.productName }}</view>
  291. <view class="goods-action">
  292. <view class="goods-price">
  293. <text class="price-symbol">¥<text class="price-integer">{{ goodsCard.price }}</text> <text
  294. class="price-decimal"></text></text>
  295. </view>
  296. <image class="shop-icon" src="/static/images/shop.png"></image>
  297. </view>
  298. </view>
  299. </view>
  300. <!-- :show="userlogo" -->
  301. <u-popup :show="userlogo" mode="bottom" round='12'>
  302. <view class="userlogo column">
  303. <view class="bold fs36 mt42">授权你的昵称信息</view>
  304. <view class=" justify-between align-center mt42">
  305. <view class="button-container">
  306. <input type="nickname" class="hidden-input"
  307. placeholder-style="color:#ffffff; font-size:32rpx;" @blur="onNickNameInput"
  308. placeholder="请点击授权微信昵称" @input="onNickNameInput" />
  309. </view>
  310. </view>
  311. <view class="submitname" @click="confimrname">确定</view>
  312. </view>
  313. </u-popup>
  314. <!-- 抽奖弹窗 -->
  315. <u-popup :show="isShowLotteryPop && countdown" round="40rpx">
  316. <view class="lottery-popup">
  317. <image class="lottery-header-image"
  318. src="https://bjzmky-1323137866.cos.ap-chongqing.myqcloud.com/userapp/images/red_head.png"
  319. mode="widthFix" />
  320. <image class="lottery-background-image"
  321. src="https://bjzmky-1323137866.cos.ap-chongqing.myqcloud.com/userapp/images/red_bg.png" />
  322. <view class="lottery-content">
  323. <view class="lottery-close-section">
  324. <view class="close-button-wrapper">
  325. <view class="close-button" @click="isShowLotteryPop = false">
  326. <u-icon class="close-icon" name="close" color="#fff" size="20"></u-icon>
  327. </view>
  328. </view>
  329. </view>
  330. <view class="lottery-main-content">
  331. <image class="lottery-title-image"
  332. src="https://bjzmky-1323137866.cos.ap-chongqing.myqcloud.com/userapp/images/red_title.png" />
  333. <view class="lottery-countdown-section">
  334. <view class="countdown-label">开奖倒计时</view>
  335. <view class="countdown-timer">
  336. <view class="countdown-number">
  337. {{ countdown.hours || '00' }}
  338. </view>
  339. <view class="countdown-number">
  340. {{ countdown.minutes || '00' }}
  341. </view>
  342. <view class="countdown-number">
  343. {{ countdown.seconds || '00' }}
  344. </view>
  345. </view>
  346. </view>
  347. <view class="lottery-products-section">
  348. <ThreeItemSwiper :products="lotteryProducts"></ThreeItemSwiper>
  349. </view>
  350. <view class="lottery-indicators">
  351. <view class="indicator-point" v-for="(item, index) in (lotteryProducts || [])"
  352. :key="index">
  353. </view>
  354. </view>
  355. <view class="lottery-tip">观看直播参与抽奖</view>
  356. <view class="lottery-action-button" @click="onClaim">参与抽奖</view>
  357. </view>
  358. </view>
  359. </view>
  360. </u-popup>
  361. <!-- 积分弹窗 -->
  362. <!-- showPoints -->
  363. <!-- :show="!!integral.status" -->
  364. <!-- :show="showPoints" -->
  365. <u-popup :show="shouldShowIntegralPopup" round="20rpx" mode="center" bgColor="#ffffff" zIndex="10076">
  366. {{receiveList}}
  367. <view class="integral-popup color9">
  368. <view class="integral-header">
  369. <view class="integral-title">观看视频领积分</view>
  370. <image class="integral-background-image"
  371. src="https://bjzmky-1323137866.cos.ap-chongqing.myqcloud.com/userapp/images/integral_bg.png"
  372. mode="widthFix" />
  373. </view>
  374. <view class="integral-content">
  375. <view class="integral-item" v-for="(item,index ) in receiveList" :key="index">
  376. <view class="integral-message">连续签到{{item.continuousDays}}天</view>
  377. <view class="integral-message">获取{{pointsAwarded}}积分</view>
  378. <view class="integral-confirm-button" @click="completionReceive(item)">领取</view>
  379. </view>
  380. </view>
  381. </view>
  382. </u-popup>
  383. <!-- 红包弹窗 -->
  384. <u-popup :show="isShowRed" round="20rpx" mode="center" zIndex="10076" bgColor="transparent">
  385. <view class="red-envelope-popup" @click="onRed()">
  386. <image class="red-envelope-close-button"
  387. src="https://bjzmky-1323137866.cos.ap-chongqing.myqcloud.com/userapp/images/close_white.png"
  388. @click.stop="isShowRed=false"></image>
  389. <image class="red-envelope-background"
  390. src="https://bjzmky-1323137866.cos.ap-chongqing.myqcloud.com/userapp/images/pop1.png">
  391. </image>
  392. <view class="red-envelope-content">
  393. <view class="red-envelope-header">
  394. <image class="header-decoration-left"
  395. src="https://bjzmky-1323137866.cos.ap-chongqing.myqcloud.com/userapp/images/top_left.png"
  396. mode="widthFix" />
  397. <view class="header-title">恭喜您可以</view>
  398. <image class="header-decoration-right"
  399. src="https://bjzmky-1323137866.cos.ap-chongqing.myqcloud.com/userapp/images/top_right.png"
  400. mode="widthFix" />
  401. </view>
  402. <view class="red-envelope-text">领红包</view>
  403. <view class="red-envelope-open-text">开</view>
  404. </view>
  405. </view>
  406. </u-popup>
  407. <!-- 抽奖弹窗2 -->
  408. <u-popup :show="isShowLottery&&countdown" round="20rpx" mode="center" zIndex="10076" bgColor="transparent">
  409. <view class="lottery-popup-v2">
  410. <image class="lottery-close-button-v2"
  411. src="https://bjzmky-1323137866.cos.ap-chongqing.myqcloud.com/userapp/images/close_white.png"
  412. @click.stop="isShowLottery=false">
  413. </image>
  414. <image class="lottery-top-image"
  415. src="https://bjzmky-1323137866.cos.ap-chongqing.myqcloud.com/userapp/images/pop_top.png"
  416. mode="widthFix"></image>
  417. <image class="lottery-background-v2"
  418. src="https://bjzmky-1323137866.cos.ap-chongqing.myqcloud.com/userapp/images/pop2.png">
  419. </image>
  420. <view class="lottery-content-v2">
  421. <view class="lottery-header-v2">
  422. <image class="lottery-header-decoration-left"
  423. src="https://bjzmky-1323137866.cos.ap-chongqing.myqcloud.com/userapp/images/top_left.png"
  424. mode="widthFix" />
  425. <view class="lottery-header-title">恭喜您可以</view>
  426. <image class="lottery-header-decoration-right"
  427. src="https://bjzmky-1323137866.cos.ap-chongqing.myqcloud.com/userapp/images/top_right.png"
  428. mode="widthFix" />
  429. </view>
  430. <view class="lottery-text-v2">参与抽奖</view>
  431. <view class="lottery-text-v2">赢好礼</view>
  432. <view class="lottery-action-button-v2" @click="onLottery()">确认</view>
  433. </view>
  434. </view>
  435. </u-popup>
  436. <!-- 红包卡片弹窗 -->
  437. <u-popup :show="isShowRedCard" round="20rpx" mode="center" bgColor="transparent" zIndex="10076">
  438. <view class="red-card-popup">
  439. <image class="red-card-image"
  440. src="https://bjzmky-1323137866.cos.ap-chongqing.myqcloud.com/userapp/images/red_card.png" />
  441. <view class="red-card-content">
  442. <view class="red-card-message">{{ redCard.msg }}</view>
  443. <view class="red-card-tip">直播惊喜积分</view>
  444. <view class="red-card-confirm-button" @click="isShowRedCard = false">确认</view>
  445. </view>
  446. </view>
  447. </u-popup>
  448. <!-- 消息弹窗 -->
  449. <u-popup :show="isShowPopMsg" round="20rpx" mode="center" zIndex="10076">
  450. <view class="message-popup">
  451. <image class="message-close-icon" src="/static/images/message_icon.png" />
  452. <view class="message-title">消息通知</view>
  453. <view class="message-content">{{popMsg}}</view>
  454. <view class="message-confirm-button" @click="isShowPopMsg = false">确认</view>
  455. <image src="/static/images/close_white_icon.png" class="close" @click="isShowPopMsg = false">
  456. </image>
  457. </view>
  458. </u-popup>
  459. <!-- 中奖和未中奖 -->
  460. <u-popup :show="isShowPrize && havePrize" round="20rpx" mode="center" bgColor="#fff" zIndex="10076">
  461. <view class="prize-popup" v-if="isCurrentUserWon">
  462. <image class="prize-header-image"
  463. src="https://bjzmky-1323137866.cos.ap-chongqing.myqcloud.com/userapp/images/red_head.png"
  464. mode="widthFix" />
  465. <view class="prize-title">恭喜您 中奖啦!</view>
  466. <view class="prize-info-section" v-for="(item, index) in (prizeInfo || [])" :key="index">
  467. <view class="prize-info-item">{{ item.userName }}</view>
  468. <view class="prize-info-item">{{ item.userId }}</view>
  469. <view class="prize-level item">{{ item.prizeLevel }}等奖</view>
  470. </view>
  471. <view class="prize-tip">请填写收货地址,主播将会将奖品发给您</view>
  472. <view class="prize-action-button"
  473. @click="navgetTo('/pages_shopping/live/confirmCreateOrder?type=win&productId='+getCurrentUserPrizeProductId+'&liveId='+liveId+'&recordId='+getCurrentUserPrizeRecordId),confirm()">
  474. 填写地址</view>
  475. </view>
  476. <view class="no-prize-popup" v-else>
  477. <image class="no-prize-image"
  478. src="https://bjzmky-1323137866.cos.ap-chongqing.myqcloud.com/userapp/images/no-prize.png"
  479. mode="widthFix" />
  480. <view class="no-prize-tip">很遗憾 您未中奖</view>
  481. <view class="no-prize-confirm-button" @click="confirm">确认</view>
  482. </view>
  483. </u-popup>
  484. <!-- 中奖记录弹窗 -->
  485. <u-popup :show="winning" @close="closeWin" round="20rpx" bgColor="#f3f5f9" zIndex="10076">
  486. <view class="winning-record-popup">
  487. <image class="winning-record-header-bg"
  488. src="https://bjzmky-1323137866.cos.ap-chongqing.myqcloud.com/userapp/images/red_head.png"
  489. mode="widthFix"></image>
  490. <image class="winning-record-background"
  491. src="https://bjzmky-1323137866.cos.ap-chongqing.myqcloud.com/userapp/images/red_bg.png">
  492. </image>
  493. <view class="winning-record-content">
  494. <view class="winning-record-title">我的中奖记录</view>
  495. <view class="winning-record-header">
  496. <view class="header-column time-column">时间</view>
  497. <view class="header-column status-column">状态</view>
  498. <view class="header-column prize-column">奖品</view>
  499. </view>
  500. <scroll-view v-if="prizeAll" enable-flex scroll-y class="winning-record-list">
  501. <view class="winning-record-item" v-for="(item, index) in (prizeAll||[])" :key="index">
  502. <view class="record-time">{{ item.createTime }}</view>
  503. <view class="record-status-button" v-if="item.orderStatus=='-9'||!item.orderStatus"
  504. @click="navgetTo('/pages_shopping/live/confirmCreateOrder?type=win&productId='+item.productId+'&liveId='+liveId+'&recordId='+item.id),winning=false">
  505. <text>填地址</text>
  506. </view>
  507. <view class="record-status" v-else>
  508. <text v-if="item.orderStatus=='1'">待支付</text>
  509. <text v-if="item.orderStatus=='2'">待发货</text>
  510. <text v-if="item.orderStatus=='3'">待收货</text>
  511. <text v-if="item.orderStatus=='4'">已完成</text>
  512. <text v-if="item.orderStatus=='-3'">已取消</text>
  513. </view>
  514. <view class="record-prize">
  515. {{ item.productName ? truncateString(item.productName, 6) : '' }}
  516. </view>
  517. </view>
  518. </scroll-view>
  519. <view v-else class="no-winning-records">暂无中奖信息</view>
  520. </view>
  521. </view>
  522. </u-popup>
  523. <!-- 更多操作弹窗 -->
  524. <u-popup :show="isMore" @close="closeMore" round="20rpx" bgColor="#f3f5f9" zIndex="10076">
  525. <view class="more-actions-popup">
  526. <view class="more-action-item"
  527. @click="navgetTo('/pages_shopping/live/integral?liveId'+liveId), (isMore = false)">
  528. <image class="action-icon"
  529. src="https://bjzmky-1323137866.cos.ap-chongqing.myqcloud.com/userapp/images/order.png" />
  530. <view class="action-label">积分</view>
  531. </view>
  532. <view class="more-action-item"
  533. @click="navgetTo('/pages_shopping/live/storeOrderRefundList?liveId=' + liveId), (isMore = false)">
  534. <image class="action-icon"
  535. src="https://bjzmky-1323137866.cos.ap-chongqing.myqcloud.com/userapp/images/after_sales.png" />
  536. <view class="action-label">售后订单</view>
  537. </view>
  538. <view class="more-action-item" @click="goMiniProgram(), (isMore = false)">
  539. <image class="action-icon"
  540. src="https://bjzmky-1323137866.cos.ap-chongqing.myqcloud.com/userapp/images/points.png" />
  541. <view class="action-label">兑换好礼</view>
  542. </view>
  543. <view class="more-action-item" @click="getMyLottery(), (isMore = false), (winning = true)">
  544. <image class="action-icon"
  545. src="https://bjzmky-1323137866.cos.ap-chongqing.myqcloud.com/userapp/images/health_sel.png" />
  546. <view class="action-label">中奖记录</view>
  547. </view>
  548. </view>
  549. </u-popup>
  550. <!-- 商品弹窗 -->
  551. <u-popup :show="shopping" @close="closeShop" round="20rpx" bgColor="#f3f5f9" zIndex="10075">
  552. <view class="shopping-popup">
  553. <view class="shopping-header">
  554. <view class="search-input-container">
  555. <image class="search-icon"
  556. src="https://bjzmky-1323137866.cos.ap-chongqing.myqcloud.com/userapp/images/search.png"
  557. mode="widthFix" />
  558. <input placeholder="请搜索商品" v-model="inputInfo" @input="handleSearchInput" />
  559. </view>
  560. <view class="x-f">
  561. <view class="shopping-action-button mr30" @click="navgetTo('/pages_shopping/live/order')">
  562. <image class="action-button-icon"
  563. src="https://bjzmky-1323137866.cos.ap-chongqing.myqcloud.com/userapp/images/carts.png" />
  564. <view class="action-button-label">订单</view>
  565. </view>
  566. <view class="shopping-action-button" @click="(isMore = true), (shopping = false)">
  567. <image class="action-button-icon"
  568. src="https://bjzmky-1323137866.cos.ap-chongqing.myqcloud.com/userapp/images/search2.png" />
  569. <view class="action-button-label">更多</view>
  570. </view>
  571. </view>
  572. </view>
  573. <scroll-view enable-flex scroll-y class="products-list">
  574. <view v-for="(item, index) in products" :key="index" class="product-item">
  575. <view class="product-image-container">
  576. <image class="product-image" :src="item.imgUrl" mode="widthFix" />
  577. <view class="product-index-label">{{ index + 1 }}</view>
  578. </view>
  579. <view class="product-info">
  580. <view class="product-name">{{ item.productName }}</view>
  581. <view class="product-sales">{{ item.sales }} 人已购</view>
  582. <view class="product-action-section">
  583. <text class="product-price">
  584. <text class="price-symbol">¥</text>
  585. <text class="price-integer">{{ Math.trunc(item.price) }}</text>
  586. .{{ getPureDecimal(item.price) ? getPureDecimal(item.price) : '00' }}
  587. </text>
  588. <view class="product-action-buttons">
  589. <view class="collect-button">
  590. <image v-if="item.isFavorite" @click="onGoodsCollect(item)"
  591. class="collect-icon"
  592. src="https://bjzmky-1323137866.cos.ap-chongqing.myqcloud.com/userapp/images/collect_select.png" />
  593. <image v-else @click="onGoodsCollect(item)" class="collect-icon"
  594. src="https://bjzmky-1323137866.cos.ap-chongqing.myqcloud.com/userapp/images/collect.png" />
  595. </view>
  596. <view v-if="item.status == 1" class="buy-button"
  597. @click="goShop(item.productId, item.goodsId)">去购买</view>
  598. <view v-else-if="item.status == 0" class="buy-button disabled">已下架</view>
  599. </view>
  600. </view>
  601. </view>
  602. </view>
  603. </scroll-view>
  604. </view>
  605. </u-popup>
  606. <!-- 优惠券弹窗 -->
  607. <view class="coupon-popup" v-if="isShowCoupon">
  608. <view class="coupon-container">
  609. <image class="coupon-background"
  610. src="https://bjzmky-1323137866.cos.ap-chongqing.myqcloud.com/userapp/images/coupon_bg.png" />
  611. <image class="coupon-header"
  612. src="https://bjzmky-1323137866.cos.ap-chongqing.myqcloud.com/userapp/images/coupon_top.png" />
  613. <image @click="isShowCoupon = false" class="coupon-close-button"
  614. src="https://bjzmky-1323137866.cos.ap-chongqing.myqcloud.com/userapp/images/close_white.png" />
  615. <view class="coupon-content">
  616. <view class="coupon-name">{{ couponInfo.couponName }}</view>
  617. <view class="coupon-price">
  618. <text class="coupon-price-integer">{{ couponInfo.couponPrice }}</text>
  619. </view>
  620. <view class="coupon-condition">满{{ couponInfo.useMinPrice }}元可用</view>
  621. <view class="coupon-description">指定商品可用</view>
  622. <view class="coupon-validity">自领取起{{ couponInfo.couponTime }}天内有效</view>
  623. <view class="coupon-get-button" @click="onCoupon()">立即领券</view>
  624. </view>
  625. </view>
  626. </view>
  627. <view v-if="liveItem.status == 1" class="ash_bg"></view>
  628. </view>
  629. </view>
  630. </template>
  631. <script>
  632. import LikeButton from '@/pages_course/components/like.vue';
  633. import ThreeItemSwiper from '@/pages_course/components/ThreeItemSwiper.vue';
  634. import CryptoJS from 'crypto-js';
  635. import {
  636. myLiveMsg,
  637. myLottery, // 我的中奖明细
  638. coupon, //领取优惠券
  639. liveLottery, // 抽奖查询
  640. claim, //抽奖
  641. liveRed, // 点击领红包
  642. liveDataLike, // 点赞
  643. collectStore, // 店铺收藏/取消收藏
  644. collectGoods, // 商品收藏/取消收藏
  645. watchUserList, //获取直播间用户(展示在线用户)
  646. liveMsg, //获取最近聊天记录
  647. // 小黄车
  648. liveStore, //店铺展示,
  649. liveOrderUser, //正在购买
  650. getLiveInfo, //获取直播间信息接口
  651. getLiveViewData, //直播间点赞、关注、在线人数数据
  652. currentActivities, //红包 卡片 抽奖
  653. getlive,
  654. subNotifyLive,
  655. internetTraffic, // 流量(缓冲百分比),
  656. liveInternetTraffic, // 直播流量(缓冲百分比),
  657. loginByMp,
  658. getUserInfo,
  659. getIsAddKf,
  660. liveWatchUser
  661. } from '@/api/living.js';
  662. import {
  663. editUser
  664. } from '@/api/user'
  665. import {
  666. nextTick
  667. } from 'vue';
  668. import {
  669. mapGetters
  670. } from 'vuex';
  671. import {
  672. TOKEN_KEYAuto,
  673. generateRandomString
  674. } from '@/utils/courseTool.js'
  675. import {
  676. completionReceive,
  677. completionUnreceived,
  678. } from '@/api/integral.js'
  679. import dayjs from 'dayjs';
  680. var isSocketOpen = false;
  681. var socket = null;
  682. export default {
  683. components: {
  684. ThreeItemSwiper,
  685. LikeButton
  686. },
  687. data() {
  688. return {
  689. hasReachedTarget: false,
  690. receiveList: [],
  691. recordId: null, //完课积分记录ID
  692. showPoints: false,
  693. remainingTime: 0, // 剩余时间(秒)
  694. watchProgressKey: '', // 存储键
  695. isCountdownActive: false, // 倒计时是否激活
  696. countdownTimer: null, // 倒计时定时器
  697. lastUpdateTime: 0, // 上次更新时间
  698. totalWatchTime: 0, // 累计观看时间(秒)
  699. watchTimeStorageKey: '', // 存储键
  700. lastSaveTime: 0, // 上次保存时间
  701. watchTimeTimer: null, // 观看时间定时器
  702. hasSubscribed: false, // 已成功订阅(永久禁用)
  703. urlOption: {},
  704. menuButtonInfo: {}, // 胶囊按钮布局信息
  705. isHeight: false,
  706. isFullscreen: false,
  707. isVideoRotated: false,
  708. showNonVideoElementsFlag: true,
  709. videoRatio: 56.25, // 默认16:9比例
  710. scale: 1,
  711. isMuted: false,
  712. showCustomControls: true,
  713. videoContext: null,
  714. isNow: false,
  715. fakeAvatar: Array.from({
  716. length: 11
  717. }, (_, i) =>
  718. `https://bjzmky-1323137866.cos.ap-chongqing.myqcloud.com/userapp/images/avatar${i + 1}.jpg`),
  719. virtualHuman: null,
  720. userlogo: false,
  721. listTabs: [{
  722. name: '讨论',
  723. }],
  724. generating: false,
  725. hasPlayback: false,
  726. isPlayback: false, //是否是回放
  727. isIOS: false,
  728. myselfFlag: false, // yhq
  729. isEnd: false,
  730. popMsg: null,
  731. // barrageList: ['支持你!', '谢谢你!', '平台真好!', '666', '欢迎回家!'], //一键弹幕列表
  732. uuId: '',
  733. totalTraffic: 0, // 总流量(字节)
  734. bitrate: 800, // 录播默认码率 0.16Mbps
  735. bitrateLive: 1600, // 直播默认码率 0.16Mbps
  736. videoLoaded: false, // 视频是否加载成功
  737. trafficStartTime: 0, // 流量计算开始时间
  738. //定时器
  739. trafficTimer: null,
  740. pingTimeoutTimer: null, // 心跳超时定时器
  741. heartBeatTimer: null, // 心跳定时器
  742. liveViewDataTimer: null,
  743. reconnectTimer: null, // 重连定时器
  744. scrollTimer: null, // 滚动防抖定时器
  745. lastScrollTime: 0, // 上次滚动时间
  746. scrollDebounceDelay: 200, // 滚动防抖延迟(毫秒)
  747. searchTimer: null, //搜索
  748. purchasePromptTimer: null, //购买提示
  749. welcomeTimer: null, //进入离开直播间定时器
  750. redTimer: null,
  751. liveStartTimer: null,
  752. lotteryTimer: null,
  753. memoryMonitorTimer: null, // 内存监控定时器
  754. networkStatusTimer: null, // 网络状态检测定时器
  755. networkRetryTimer: null, // 网络重试定时器
  756. lastHeartBeatTime: 0, // 上次心跳时间
  757. // 性能监控
  758. connectionStartTime: 0, // 连接开始时间
  759. connectionLatency: 0, // 连接延迟
  760. messageCount: 0, // 消息计数
  761. errorCount: 0, // 错误计数
  762. lastPerformanceCheck: 0, // 上次性能检查时间
  763. stayTime: 0,
  764. startTime: 0,
  765. scrollTop: 0,
  766. currentScrollTop: 0, // 当前实际滚动位置
  767. scrollIntoView: '', // scroll-into-view属性
  768. messageIdCounter: 0, // 消息ID计数器,确保每个消息有唯一ID
  769. scrollPending: false, // 滚动操作是否正在等待执行
  770. isOnload: false,
  771. isConnecting: false, // 是否正在连接中
  772. hasInitialized: false,
  773. // 请求状态标记,防止重复请求
  774. isLoadingLiveInfo: false, // 是否正在加载直播间信息
  775. isLoadingVideo: false, // 是否正在加载视频资源
  776. hasCheckedLogin: false, // 是否已检查登录状态
  777. hasLoadedLocation: false, // 是否已加载位置信息
  778. liveViewersData: [],
  779. liveUserCalled: false, //调用过watchUserList没
  780. userRandomColors: Object.create(null), // 缓存用户ID -> 随机色的映射
  781. heartBeatRetryCount: 0, // 心跳发送重试次数(避免一次失败就重连)
  782. maxHeartBeatRetries: 3, // 心跳最大重试次数(增加到3次)
  783. pingTimeout: 25000, // 心跳超时时间(25秒,适应移动网络)
  784. shownEntryUsers: new Set(), // 存储已显示过「进入提示」的用户ID
  785. socket: null, // WebSocket 实例
  786. isSocketOpen: false, // 连接是否已打开
  787. heartBeatInterval: 15000, // 心跳发送间隔(15秒)
  788. adaptiveHeartBeatInterval: 15000, // 自适应心跳间隔
  789. reconnectCount: 0, // 当前重连次数f
  790. maxReconnectAttempts: 5, // 最大重连次数(增加到5次)
  791. isManualClose: false, // 是否手动关闭(用于区分主动关闭和异常断开)
  792. networkType: 'unknown', // 当前网络类型
  793. isNetworkAvailable: true, // 网络是否可用
  794. templateId: 'IKffTm6HnbLS91hDCUnKSQpC2r4EABo3fOtThnK1dI8', //百域承品
  795. isAgreement: false,
  796. wsNewUrl: 'wss://api.fhhx.runtzh.com/ws/app/webSocket',
  797. // wsNewUrl: 'ws://192.168.10.166:7114/ws/app/webSocket',
  798. qrFrom: null,
  799. scene: '',
  800. liveCountdown: {}, //直播倒计时
  801. countdown: {}, //抽奖倒计时
  802. liveViewData: {},
  803. keyboardHeight: 0,
  804. videoCurrentTime: 0, // 当前视频播放时间
  805. videoProgressKey: '', // 存储进度的key
  806. inAndOut: {},
  807. winning: false,
  808. isShowPrize: false,
  809. isShowCoupon: false,
  810. prizeInfo: [],
  811. havePrize: uni.getStorageSync('havePrize') || false, //是否参与抽奖
  812. countDownKey: 0,
  813. lotteryProducts: [],
  814. lotteryList: [],
  815. talklist: [],
  816. isShowLotteryPop: false,
  817. liveItem: {},
  818. isSending: false,
  819. isMore: false,
  820. value: '',
  821. placeholderText: '说点什么...',
  822. prizeAll: [],
  823. isShowLottery: false,
  824. isShowRedCard: false,
  825. isShowPopMsg: false,
  826. isShowNotice: false,
  827. notice: [],
  828. redCard: null, //点击红包出现弹窗
  829. integral: {},
  830. lotteryInfo: {},
  831. goodsCard: {},
  832. couponInfo: {},
  833. redInfo: {},
  834. storeId: null,
  835. isFocus: false,
  836. shopping: false,
  837. systemInfo: null, // 缓存系统信息,避免重复调用同步API
  838. generatingTimer: null, //回访生成中
  839. getlivingTimer: null, // getliving 防抖定时器
  840. inputInfo: '',
  841. showWelcomeMessage: false,
  842. isShowGoods: false,
  843. isShowRed: false,
  844. lastClickTime: 0,
  845. videoRetryCounts: Object.create(null), // 记录每个直播间的视频重试次数,格式: { liveId: 次数 }
  846. clickDelay: 300, // 300ms内只响应一次点击
  847. liveUserTotal: 0,
  848. viewPageSize: 10, // 每页数量
  849. viewPageNum: 1, // 当前页码
  850. viewLoading: false, // 是否正在加载
  851. scrollHeight: 0,
  852. showPurchasePrompt: false,
  853. prevOrderCount: 0, // 用于记录上一次的购买人数
  854. videoUrl: null,
  855. showType: 1, //横屏1 竖屏2
  856. boxHeight: 300, //小黄车高度
  857. liveViewers: [], //观众
  858. livingUrl: '',
  859. products: [],
  860. loadingProducts: false, // 商品加载状态
  861. orderUser: {}, //正在购买
  862. userType: 0,
  863. timestamp: '',
  864. showadd: false,
  865. liveId: null,
  866. userInfo: {}, //用户信息
  867. userData: {},
  868. diffTotalTime: '',
  869. address: '',
  870. commonViewHeight: '',
  871. user: {}
  872. };
  873. },
  874. async onLoad(options) {
  875. this.getMenuButtonInfo(); // 初始化获取胶囊信息
  876. this.initTime()
  877. // 解析参数
  878. if (options.liveId) {
  879. this.liveId = options.liveId;
  880. }
  881. if (options.qwUserId) {
  882. this.urlOption.companyId = options.companyId
  883. this.urlOption.companyUserId = options.companyUserId
  884. this.urlOption.corpId = options.corpId
  885. this.urlOption.liveId = options.liveId
  886. this.urlOption.qwUserId = options.qwUserId
  887. this.urlOption.qwExternalId = options.externalId
  888. this.urlOption.chatId = options.chatId
  889. }
  890. // 扫码传来的参数
  891. if (options.scene) {
  892. this.scene = options.scene;
  893. const decodedScene = decodeURIComponent(this.scene);
  894. const params = {};
  895. decodedScene.split('&').forEach((item) => {
  896. const [key, value] = item.split('=');
  897. params[key] = value;
  898. this.liveId = params.a;
  899. });
  900. if (params.b && params.c) {
  901. console.log("扫码参数", params)
  902. this.qrFrom = `&companyId=${params.b}&companyUserId=${params.c}`;
  903. }
  904. }
  905. if (options.companyId && options.companyUserId) {
  906. this.qrFrom = `&companyId=${options.companyId}&companyUserId=${options.companyUserId}`;
  907. }
  908. this.userinfo = uni.getStorageSync('userinfo');
  909. this.hasSubscribed = uni.getStorageSync('subscribe_status_' + this.liveId) || false;
  910. console.log('全部参数', options);
  911. // 优先判断登录状态,然后加载数据
  912. // this.userData = uni.getStorageSync('userData');
  913. try {
  914. const isLogin = await this.utils.checkLiveToken();
  915. this.hasCheckedLogin = true;
  916. if (isLogin) {
  917. // 登录后:优先加载直播间信息,然后加载视频资源
  918. await this.haveLogin();
  919. } else {
  920. // 未登录:先登录,登录成功后再加载数据
  921. this.goLogin();
  922. }
  923. } catch (error) {
  924. console.error('初始化失败:', error);
  925. this.hasCheckedLogin = true;
  926. }
  927. // 异步加载位置信息(不阻塞主流程)
  928. if (!this.hasLoadedLocation) {
  929. this.getLocationByIP();
  930. }
  931. //获取键盘高度 - 针对iPhone优化(使用缓存的系统信息)
  932. uni.onKeyboardHeightChange((res) => {
  933. console.log('键盘高度变化:', res.height, '平台:', this.systemInfo.platform);
  934. if (this.systemInfo.platform === 'ios') {
  935. // iPhone特殊处理
  936. if (res.height > 0) {
  937. // 键盘弹出
  938. this.isKeyboardShow = true;
  939. // iPhone键盘高度计算优化
  940. let calculatedHeight = res.height * 2;
  941. // 根据iPhone型号进行微调
  942. if (this.systemInfo.model) {
  943. if (this.systemInfo.model.includes('iPhone X') ||
  944. this.systemInfo.model.includes('iPhone 11') ||
  945. this.systemInfo.model.includes('iPhone 12') ||
  946. this.systemInfo.model.includes('iPhone 13') ||
  947. this.systemInfo.model.includes('iPhone 14') ||
  948. this.systemInfo.model.includes('iPhone 15') ||
  949. this.systemInfo.model.includes('iPhone 16') ||
  950. this.systemInfo.model.includes('iPhone 17')) {
  951. // 刘海屏设备需要额外调整
  952. calculatedHeight = calculatedHeight + 20; // 增加20rpx补偿
  953. }
  954. }
  955. // 减去底部安全区域,避免过高
  956. const safeAreaBottom = this.systemInfo.safeAreaInsets ? this.systemInfo.safeAreaInsets
  957. .bottom : 0;
  958. if (safeAreaBottom > 0) {
  959. calculatedHeight = calculatedHeight - (safeAreaBottom * 2.0); // 微调10rpx
  960. }
  961. this.keyboardHeight = Math.max(400, calculatedHeight);
  962. } else {
  963. // 键盘隐藏
  964. this.isKeyboardShow = false;
  965. this.keyboardHeight = 0;
  966. }
  967. } else {
  968. console.log("手机型号是>>>>", this.systemInfo.model)
  969. // Android处理保持原有逻辑
  970. if (res.height > 0) {
  971. this.isKeyboardShow = true;
  972. const safeAreaBottom = this.systemInfo.safeAreaInsets ? this.systemInfo.safeAreaInsets
  973. .bottom : 0;
  974. // this.keyboardHeight = (res.height * 2)-50;
  975. // this.keyboardHeight = res.height * 2;
  976. if (this.systemInfo.brand == 'vivo') {
  977. this.keyboardHeight = res.height * 2;
  978. } else {
  979. // this.keyboardHeight = (res.height * 1.78) + 20;''
  980. this.keyboardHeight = (res.height * 1.88) + 20;
  981. }
  982. console.log("高度是", this.keyboardHeight)
  983. } else {
  984. this.isKeyboardShow = false;
  985. this.keyboardHeight = 0;
  986. }
  987. }
  988. });
  989. // 初始化网络状态监听
  990. this.initNetworkStatusListener();
  991. },
  992. async onPullDownRefresh() {
  993. // 下拉刷新时,重新加载数据
  994. if (this.liveId) {
  995. // 重置加载状态,允许重新加载
  996. this.isLoadingLiveInfo = false;
  997. await this.getliving(this.liveId);
  998. await this.getLiveMsg(this.liveItem);
  999. }
  1000. setTimeout(() => {
  1001. uni.stopPullDownRefresh();
  1002. }, 1000);
  1003. this.getliving(this.liveId);
  1004. },
  1005. mounted() {
  1006. // 获取 video 上下文
  1007. // 监听视频全屏事件
  1008. setTimeout(() => {
  1009. this.videoContext = uni.createVideoContext(`myVideo_${this.liveId}`, this);
  1010. // 添加全屏状态变化监听(更可靠的方式)
  1011. if (this.videoContext) {
  1012. // 使用 uni.onUserCaptureScreen 作为备选方案
  1013. uni.onUserCaptureScreen(() => {
  1014. console.log('用户截屏,可能是全屏状态');
  1015. });
  1016. }
  1017. }, 1000);
  1018. const systemInfo = uni.getSystemInfoSync();
  1019. this.isIOS = systemInfo.platform === 'ios';
  1020. },
  1021. async onShow() {
  1022. // 如果还没有检查过登录状态,则检查(避免重复检查)
  1023. if (!this.hasCheckedLogin) {
  1024. try {
  1025. const isLogin = await this.utils.checkLiveToken();
  1026. this.hasCheckedLogin = true;
  1027. if (isLogin) {
  1028. await this.haveLogin();
  1029. if (this.urlOption.qwUserId) {
  1030. this.getIsAddKf()
  1031. }
  1032. } else {
  1033. this.goLogin();
  1034. }
  1035. } catch (error) {
  1036. console.error('初始化失败:', error);
  1037. this.hasCheckedLogin = true;
  1038. }
  1039. }
  1040. // 位置信息只加载一次
  1041. if (!this.hasLoadedLocation) {
  1042. this.getLocationByIP();
  1043. }
  1044. this.uuId = generateRandomString(16);
  1045. const isLiveLogin = uni.getStorageSync('isLiveLogin');
  1046. this.share = uni.getStorageSync('share');
  1047. this.scene = uni.getStorageSync('scene');
  1048. if (this.share && this.share.length > 0) {
  1049. this.liveId = this.share.liveId;
  1050. this.qrFrom = `&companyId=${this.share.companyId}&companyUserId=${this.share.companyUserId}`;
  1051. uni.removeStorageSync('share');
  1052. }
  1053. if (this.scene) {
  1054. const decodedScene = decodeURIComponent(this.scene);
  1055. const params = {};
  1056. decodedScene.split('&').forEach((item) => {
  1057. const [key, value] = item.split('=');
  1058. params[key] = value;
  1059. this.liveId = params.a;
  1060. });
  1061. if (params.b && params.c) {
  1062. this.qrFrom = `&companyId=${params.b}&companyUserId=${params.c}`;
  1063. }
  1064. uni.removeStorageSync('scene');
  1065. }
  1066. // if (isLiveLogin) {
  1067. // if (this.liveId) {
  1068. // await this.getliving(this.liveId);
  1069. // this.getCurrentActivities();
  1070. // this.getliveOrder();
  1071. // this.initSocket();
  1072. // }
  1073. // this.hasInitialized = true;
  1074. // uni.removeStorageSync('isLiveLogin');
  1075. // }
  1076. // 恢复播放和连接
  1077. await this.resumePageActivity();
  1078. // 恢复观看时长统计(如果之前已经开始统计)
  1079. if (this.watchStartTime > 0 || this.accumulatedWatchDuration > 0) {
  1080. this.resumeWatchDurationTracking();
  1081. }
  1082. // this.userinfo = JSON.parse(uni.getStorageSync('userInfo'));
  1083. this.userinfo = uni.getStorageSync('userinfo');
  1084. this.isAgreement = uni.getStorageSync('isAgreement');
  1085. this.$nextTick(() => {
  1086. this.setVideoProgress();
  1087. });
  1088. if (this.lookTimer) {
  1089. clearInterval(this.lookTimer);
  1090. this.lookTimer = null;
  1091. this.stayTime = 0;
  1092. this.startTime = 0;
  1093. }
  1094. // 启动内存监控,定期清理
  1095. this.startMemoryMonitor();
  1096. if (this.trafficTimer) {
  1097. clearInterval(this.trafficTimer);
  1098. this.trafficTimer = null;
  1099. this.startTime = 0;
  1100. this.totalTraffic = 0;
  1101. }
  1102. // 重置视频加载状态和流量计算开始时间
  1103. this.videoLoaded = false;
  1104. this.trafficStartTime = 0;
  1105. this.startTimer();
  1106. this.$nextTick(() => {
  1107. console.log(444, this.userInfo);
  1108. if (!this.userInfo || !this.userInfo.nickname) {
  1109. console.log('用户信息不完整,显示授权弹窗');
  1110. this.userlogo = true;
  1111. return;
  1112. }
  1113. // // 重新计算 isNow
  1114. // const isNowCalculated = dayjs(this.userInfo.updateTime).isSame(dayjs(), 'day');
  1115. // console.log('重新计算 isNow:', isNowCalculated);
  1116. // if (!isNowCalculated) {
  1117. // console.log('不是今天更新过,显示授权弹窗');
  1118. // this.userlogo = true;
  1119. // }
  1120. setTimeout(() => {
  1121. this.videoContext = uni.createVideoContext(`myVideo_${this.liveId}`, this);
  1122. console.log('videoContext 初始化完成:', this.videoContext);
  1123. }, 1000);
  1124. });
  1125. // 初始化横屏支持
  1126. // this.initFullscreenSupport();
  1127. },
  1128. //分享给好友
  1129. onShareAppMessage() {
  1130. return {
  1131. title: '邀请你来观看直播:' + this.liveItem.liveName,
  1132. path: '/pages_course/living?companyId=-2&companyUserId=' + this.userInfo.userId + '&liveId=' + this.liveId,
  1133. imageUrl: '/static/logo.png',
  1134. success(res) {
  1135. console.log('分享成功', res);
  1136. },
  1137. fail(err) {
  1138. console.error('分享失败', err);
  1139. }
  1140. };
  1141. },
  1142. // 分享到朋友圈
  1143. onShareTimeline() {
  1144. return {
  1145. title: '邀请你来观看直播:' + this.liveItem.liveName,
  1146. query: 'companyId=-2&companyUserId=' + this.userInfo.userId + '&liveId=' + this.liveId
  1147. };
  1148. },
  1149. computed: {
  1150. shouldShowIntegralPopup() {
  1151. // 只有当 showPoints 为 true 且 receiveList 有数据时才显示
  1152. return this.showPoints && this.receiveList && this.receiveList.length > 0;
  1153. },
  1154. // 格式化后的倒计时
  1155. formattedCountdown() {
  1156. return this.formatCountdown(this.remainingTime);
  1157. },
  1158. // 倒计时百分比
  1159. countdownPercentage() {
  1160. return this.getCountdownPercentage();
  1161. },
  1162. // 环形进度条样式
  1163. circularStyle() {
  1164. const percentage = this.getCountdownPercentage();
  1165. const strokeDashoffset = 314 - (314 * percentage) / 100; // 2 * π * 50 = 314
  1166. return {
  1167. '--percentage': percentage + '%',
  1168. '--stroke-dashoffset': strokeDashoffset
  1169. };
  1170. },
  1171. // 是否显示倒计时
  1172. showCountdown() {
  1173. return !this.hasReachedTarget &&
  1174. this.liveItem?.liveType === 2 && // 只对录播显示
  1175. this.remainingTime > 0 && // 还有剩余时间
  1176. this.remainingTime < this.liveItem.duration * 0.9; // 已经开始计时
  1177. },
  1178. // 控制是否显示非视频元素
  1179. shouldShowNonVideoElements() {
  1180. return !this.isFullscreen && this.showNonVideoElementsFlag;
  1181. },
  1182. // 控制是否显示全屏按钮
  1183. shouldShowFullscreenButton() {
  1184. return this.liveItem.showType == 1 && !this.isFullscreen;
  1185. },
  1186. ...mapGetters(['coureLogin']),
  1187. appid() {
  1188. return this.$store.state.appid
  1189. },
  1190. // 观看人数
  1191. formattedWatchCount() {
  1192. return this.formatNumber(this.virtualHuman || 0);
  1193. },
  1194. //点赞人数
  1195. formattedLikeCount() {
  1196. return this.formatNumber(this.liveViewData.like || 0);
  1197. },
  1198. filteredViewers() {
  1199. // 获取3个随机假头像,而不是显示真实观众
  1200. const avatarCount = 3; // 需要显示的假头像数量
  1201. // 如果fakeAvatar数组为空或不存在,返回空数组
  1202. if (!this.fakeAvatar || !Array.isArray(this.fakeAvatar) || this.fakeAvatar.length === 0) {
  1203. return [];
  1204. }
  1205. // 从fakeAvatar中随机选择3个不同的头像
  1206. const randomAvatars = [];
  1207. const availableAvatars = [...this.fakeAvatar]; // 创建副本避免修改原数组
  1208. // 确保有足够的头像可选
  1209. if (availableAvatars.length < avatarCount) {
  1210. // 如果头像数量不足,可以重复使用
  1211. for (let i = 0; i < avatarCount; i++) {
  1212. const randomIndex = Math.floor(Math.random() * availableAvatars.length);
  1213. randomAvatars.push(availableAvatars[randomIndex]);
  1214. }
  1215. } else {
  1216. // 随机选择不重复的头像
  1217. for (let i = 0; i < avatarCount; i++) {
  1218. const randomIndex = Math.floor(Math.random() * availableAvatars.length);
  1219. randomAvatars.push(availableAvatars[randomIndex]);
  1220. availableAvatars.splice(randomIndex, 1); // 移除已选的头像,避免重复
  1221. }
  1222. }
  1223. console.log("随机选择的头像:", randomAvatars);
  1224. return randomAvatars;
  1225. },
  1226. isCurrentUserWon() {
  1227. if (!Array.isArray(this.prizeInfo) || !this.userInfo?.userId) {
  1228. return false;
  1229. }
  1230. return this.prizeInfo.some((item) => {
  1231. return String(item.userId) === String(this.userInfo.userId);
  1232. });
  1233. },
  1234. getCurrentUserPrizeProductId() {
  1235. if (!Array.isArray(this.prizeInfo) || !this.userInfo?.userId) {
  1236. return null;
  1237. }
  1238. // 在 prizeInfo 中查找当前用户的中奖记录
  1239. const userPrize = this.prizeInfo.find(item => {
  1240. return String(item.userId) == String(this.userInfo.userId);
  1241. });
  1242. // 返回商品ID,如果没有找到则返回null
  1243. return userPrize ? userPrize.productId : null;
  1244. },
  1245. getCurrentUserPrizeRecordId() {
  1246. if (!Array.isArray(this.prizeInfo) || !this.userInfo?.userId) {
  1247. console.log('条件不满足,返回null');
  1248. return null;
  1249. }
  1250. const userPrize = this.prizeInfo.find(item => {
  1251. const match = String(item.userId) == String(this.userInfo.userId);
  1252. return match;
  1253. });
  1254. return userPrize ? userPrize.recordId : null;
  1255. },
  1256. nameuser() {
  1257. return this.userInfo.nickname
  1258. },
  1259. },
  1260. onHide() {
  1261. this.stopCountdown();
  1262. if (this.watchTimeTimer) {
  1263. clearInterval(this.watchTimeTimer);
  1264. this.watchTimeTimer = null;
  1265. }
  1266. this.saveWatchTime();
  1267. // 清除所有定时器
  1268. // this.clearAllTimersEnhanced();
  1269. // this.stopHeartBeat();
  1270. // 页面隐藏时,提交当前流量数据
  1271. if (this.videoLoaded && this.trafficStartTime && this.trafficTimer) {
  1272. const watchDuration = Math.floor((Date.now() - this.trafficStartTime) / 1000);
  1273. this.submitTraffic(watchDuration);
  1274. }
  1275. if (this.trafficTimer) {
  1276. clearInterval(this.trafficTimer);
  1277. this.trafficTimer = null;
  1278. }
  1279. // 暂停观看时长统计
  1280. this.pauseWatchDurationTracking();
  1281. // 页面隐藏时清理部分数据,减少内存占用
  1282. if (this.talklist && this.talklist.length > 20) {
  1283. // 只保留最新的20条消息
  1284. this.talklist = this.talklist.slice(-20);
  1285. }
  1286. // 触发垃圾回收
  1287. // this.triggerGarbageCollection();
  1288. },
  1289. onVideoStateChange(e) {
  1290. // 这里可以根据视频状态控制倒计时
  1291. if (e.detail.code === 2004) { // 视频开始播放
  1292. this.startCountdown();
  1293. } else if (e.detail.code === 2006) { // 视频播放结束
  1294. this.stopCountdown();
  1295. }
  1296. },
  1297. onUnload() {
  1298. this.stopCountdown();
  1299. if (this.watchTimeTimer) {
  1300. clearInterval(this.watchTimeTimer);
  1301. this.watchTimeTimer = null;
  1302. }
  1303. this.saveWatchTime();
  1304. // 保存视频进度
  1305. this.saveVideoProgress();
  1306. // 停止观看时长统计
  1307. this.stopWatchDurationTracking();
  1308. // 用户退出时,再次请求一次10s流量接口
  1309. if (this.videoLoaded && this.trafficStartTime) {
  1310. const watchDuration = Math.floor((Date.now() - this.trafficStartTime) / 1000);
  1311. // 提交最后一次流量数据(至少10秒)
  1312. const finalDuration = Math.max(watchDuration, 10);
  1313. this.submitTraffic(finalDuration);
  1314. }
  1315. // 清理直播相关定时器
  1316. if (this.liveItem) {
  1317. this.pauseVideo();
  1318. // 清除直播间的时间定时器
  1319. if (this.liveItem.timeTimer) {
  1320. clearInterval(this.liveItem.timeTimer);
  1321. this.liveItem.timeTimer = null;
  1322. }
  1323. }
  1324. // 关闭WebSocket连接(会自动清理相关资源)
  1325. this.closeWebSocket(true);
  1326. // 清除 getliving 防抖定时器
  1327. if (this.getlivingTimer) {
  1328. clearTimeout(this.getlivingTimer);
  1329. this.getlivingTimer = null;
  1330. }
  1331. // 清除所有定时器(使用增强清理)
  1332. this.clearAllTimersEnhanced();
  1333. // 暂停视频
  1334. const videoId = `myVideo_${this.liveId}`;
  1335. const videoContext = uni.createVideoContext(videoId, this);
  1336. if (videoContext) {
  1337. videoContext.pause();
  1338. }
  1339. // 移除网络状态监听
  1340. try {
  1341. uni.offNetworkStatusChange();
  1342. } catch (err) {
  1343. console.warn('移除网络状态监听失败:', err);
  1344. }
  1345. // 清理大数据和状态
  1346. this.clearBigData();
  1347. this.resetAllStates();
  1348. // 解锁屏幕方向
  1349. this.unlockOrientation();
  1350. // 强制退出全屏
  1351. this.isFullscreen = false;
  1352. this.showCustomControls = true;
  1353. },
  1354. mounted() {
  1355. // 初始化系统信息缓存,避免在键盘监听器中重复调用同步API
  1356. this.systemInfo = uni.getSystemInfoSync();
  1357. console.log('系统信息:', this.systemInfo.platform, this.systemInfo.model);
  1358. this.getCurrentActivities();
  1359. this.getliveOrder();
  1360. },
  1361. watch: {
  1362. coureLogin: {
  1363. immediate: true, // 页面一进入就检查一次
  1364. handler(val) {
  1365. if (val == 2 && this.isLogin) {
  1366. this.isLogin = false
  1367. this.goLogin()
  1368. }
  1369. }
  1370. },
  1371. // 监听liveItem.status的变化
  1372. 'liveItem.status': {
  1373. handler(newStatus, oldStatus) {
  1374. if (newStatus === undefined || oldStatus === undefined) return;
  1375. if (newStatus === oldStatus) return;
  1376. if (!this.liveId) {
  1377. console.warn('liveId不存在,无法触发getliving请求');
  1378. return;
  1379. }
  1380. // 状态变化时,调用getliving更新直播间数据
  1381. // 添加防抖,避免频繁请求
  1382. if (this.getlivingTimer) {
  1383. clearTimeout(this.getlivingTimer);
  1384. }
  1385. this.getlivingTimer = setTimeout(() => {
  1386. this.getliving(this.liveId);
  1387. }, 500); // 500ms 防抖
  1388. },
  1389. deep: true
  1390. },
  1391. // 监听orderUser.count的变化
  1392. 'orderUser.count': {
  1393. handler(newVal, oldVal) {
  1394. if (newVal !== this.prevOrderCount) {
  1395. this.prevOrderCount = newVal;
  1396. this.showPurchaseMessage();
  1397. }
  1398. },
  1399. immediate: true
  1400. },
  1401. 'isShowNotice': {
  1402. handler(newVal, oldVal) {
  1403. setTimeout(() => {
  1404. this.noticeHeightFun()
  1405. }, 800)
  1406. },
  1407. immediate: true
  1408. },
  1409. 'notice.msg': {
  1410. handler(newVal, oldVal) {
  1411. const newLength = newVal.length;
  1412. const oldLength = oldVal.length;
  1413. if (newLength !== oldLength) {
  1414. setTimeout(() => {
  1415. this.noticeHeightFun()
  1416. }, 800)
  1417. }
  1418. },
  1419. deep: true
  1420. },
  1421. },
  1422. methods: { // ======================== 观看时长统计相关方法 ========================
  1423. /**
  1424. * 开始观看时长统计
  1425. * WebSocket连接成功后调用
  1426. */
  1427. startWatchDurationTracking() {
  1428. // 防止重复启动
  1429. if (this.watchStartTime > 0) {
  1430. console.log('观看时长统计已启动,跳过');
  1431. return;
  1432. }
  1433. this.watchStartTime = Date.now();
  1434. this.isPageVisible = true;
  1435. console.log('开始观看时长统计', new Date(this.watchStartTime).toLocaleString());
  1436. // 启动页面可见性监听
  1437. this.initPageVisibilityListener();
  1438. },
  1439. /**
  1440. * 获取当前累计观看时长(秒)
  1441. * @returns {number} 观看时长(秒)
  1442. */
  1443. getCurrentWatchDuration() {
  1444. if (this.watchStartTime === 0) {
  1445. return this.accumulatedWatchDuration;
  1446. }
  1447. // 如果页面可见,计算当前时段的时长
  1448. if (this.isPageVisible) {
  1449. const currentDuration = Math.floor((Date.now() - this.watchStartTime) / 1000);
  1450. return this.accumulatedWatchDuration + currentDuration;
  1451. }
  1452. // 页面不可见,返回累计时长
  1453. return this.accumulatedWatchDuration;
  1454. },
  1455. /**
  1456. * 暂停观看时长统计(页面隐藏/后台时)
  1457. */
  1458. pauseWatchDurationTracking() {
  1459. if (!this.isPageVisible || this.watchStartTime === 0) {
  1460. return;
  1461. }
  1462. // 累加本次观看的时长
  1463. const currentSessionDuration = Math.floor((Date.now() - this.watchStartTime) / 1000);
  1464. this.accumulatedWatchDuration += currentSessionDuration;
  1465. this.lastPauseTime = Date.now();
  1466. this.isPageVisible = false;
  1467. console.log(`暂停观看统计: 本次=${currentSessionDuration}秒, 累计=${this.accumulatedWatchDuration}秒`);
  1468. },
  1469. /**
  1470. * 恢复观看时长统计(页面显示/前台时)
  1471. */
  1472. resumeWatchDurationTracking() {
  1473. if (this.isPageVisible) {
  1474. return;
  1475. }
  1476. // 重新记录开始时间
  1477. this.watchStartTime = Date.now();
  1478. this.isPageVisible = true;
  1479. const pauseDuration = this.lastPauseTime > 0 ? Math.floor((Date.now() - this.lastPauseTime) / 1000) : 0;
  1480. console.log(`恢夏观看统计: 暂停了${pauseDuration}秒, 当前累计=${this.accumulatedWatchDuration}秒`);
  1481. },
  1482. /**
  1483. * 停止观看时长统计
  1484. */
  1485. stopWatchDurationTracking() {
  1486. if (this.isPageVisible && this.watchStartTime > 0) {
  1487. const currentSessionDuration = Math.floor((Date.now() - this.watchStartTime) / 1000);
  1488. this.accumulatedWatchDuration += currentSessionDuration;
  1489. }
  1490. console.log(`停止观看统计: 总时长=${this.accumulatedWatchDuration}秒`);
  1491. // 重置状态
  1492. this.watchStartTime = 0;
  1493. this.isPageVisible = true;
  1494. this.lastPauseTime = 0;
  1495. // 移除监听
  1496. this.removePageVisibilityListener();
  1497. },
  1498. /**
  1499. * 初始化页面可见性监听
  1500. */
  1501. initPageVisibilityListener() {
  1502. // uni-app 的页面生命周期已经在 onShow/onHide 中处理
  1503. // 这里主要监听小程序的前后台切换
  1504. uni.onAppShow(() => {
  1505. console.log('小程序回到前台');
  1506. this.resumeWatchDurationTracking();
  1507. });
  1508. uni.onAppHide(() => {
  1509. console.log('小程序切换到后台');
  1510. this.pauseWatchDurationTracking();
  1511. });
  1512. },
  1513. /**
  1514. * 移除页面可见性监听
  1515. */
  1516. removePageVisibilityListener() {
  1517. // uni-app 不需要手动移除监听,生命周期自动管理
  1518. console.log('页面可见性监听已移除');
  1519. },
  1520. // 初始化倒计时
  1521. initCountdown() {
  1522. // 检查 liveItem 和 duration 是否存在
  1523. if (!this.liveItem || !this.liveItem.duration) {
  1524. console.warn('直播时长数据未加载,延迟初始化倒计时');
  1525. // 延迟初始化,等待数据加载
  1526. setTimeout(() => {
  1527. if (this.liveItem && this.liveItem.duration) {
  1528. this.initCountdown();
  1529. } else {
  1530. console.error('无法获取直播时长数据');
  1531. this.remainingTime = 0;
  1532. }
  1533. }, 1000);
  1534. return;
  1535. }
  1536. // 创建基于用户ID和直播ID的存储键
  1537. const userId = this.userInfo?.userId || 'anonymous';
  1538. this.watchProgressKey = `watchProgress_${userId}_${this.liveId}`;
  1539. // 从本地存储加载观看进度
  1540. try {
  1541. const storedProgress = uni.getStorageSync(this.watchProgressKey);
  1542. this.remainingTime = storedProgress ? parseInt(storedProgress) : this.liveItem.duration * 0.9;
  1543. console.log(`加载剩余时间: ${this.remainingTime}秒`);
  1544. } catch (error) {
  1545. console.error('加载观看进度失败:', error);
  1546. this.remainingTime = this.liveItem.duration * 0.9;
  1547. }
  1548. // 如果剩余时间小于等于0,重置为总时长
  1549. if (this.remainingTime <= 0) {
  1550. console.log("超过了")
  1551. this.remainingTime = this.liveItem.duration * 0.9;
  1552. }
  1553. // 更新显示
  1554. this.updateCountdownDisplay();
  1555. },
  1556. // 开始倒计时
  1557. startCountdown() {
  1558. if (this.countdownTimer) {
  1559. clearInterval(this.countdownTimer);
  1560. }
  1561. // 如果已经完成,不启动倒计时
  1562. if (this.remainingTime <= 0) {
  1563. this.isCountdownActive = false;
  1564. return;
  1565. }
  1566. this.isCountdownActive = true;
  1567. this.lastUpdateTime = Date.now();
  1568. this.countdownTimer = setInterval(() => {
  1569. this.updateCountdown();
  1570. }, 1000); // 每秒更新一次
  1571. },
  1572. // 更新倒计时
  1573. updateCountdown() {
  1574. if (!this.isCountdownActive || this.remainingTime <= 0) {
  1575. this.stopCountdown();
  1576. return;
  1577. }
  1578. const now = Date.now();
  1579. const elapsedSeconds = Math.floor((now - this.lastUpdateTime) / 1000);
  1580. if (elapsedSeconds > 0) {
  1581. this.remainingTime = Math.max(0, this.remainingTime - elapsedSeconds);
  1582. this.lastUpdateTime = now;
  1583. // 更新显示
  1584. this.updateCountdownDisplay();
  1585. // 每10秒保存一次进度
  1586. if (this.remainingTime % 10 === 0 || this.remainingTime <= 0) {
  1587. this.saveWatchProgress();
  1588. }
  1589. // 倒计时完成
  1590. if (this.remainingTime <= 0) {
  1591. this.onCountdownComplete();
  1592. }
  1593. }
  1594. },
  1595. // 停止倒计时
  1596. stopCountdown() {
  1597. if (this.countdownTimer) {
  1598. clearInterval(this.countdownTimer);
  1599. this.countdownTimer = null;
  1600. }
  1601. this.isCountdownActive = false;
  1602. this.saveWatchProgress(); // 立即保存
  1603. },
  1604. // 倒计时完成
  1605. onCountdownComplete() {
  1606. console.log('倒计时完成!');
  1607. this.completionUnreceived()
  1608. this.stopCountdown();
  1609. this.remainingTime = 0;
  1610. this.updateCountdownDisplay();
  1611. // 触发完成事件(例如发送通知到服务器)
  1612. this.triggerWatchComplete();
  1613. },
  1614. // 触发观看完成事件
  1615. async triggerWatchComplete() {
  1616. if (!this.userInfo?.userId || !this.liveId) return;
  1617. try {
  1618. // 这里可以调用API通知服务器用户已完成观看
  1619. console.log('用户已完成观看');
  1620. // 清空进度,防止重复计算
  1621. uni.removeStorageSync(this.watchProgressKey);
  1622. } catch (error) {
  1623. console.error('触发观看完成事件失败:', error);
  1624. }
  1625. },
  1626. // 保存观看进度
  1627. saveWatchProgress() {
  1628. if (!this.watchProgressKey) return;
  1629. try {
  1630. uni.setStorageSync(this.watchProgressKey, this.remainingTime);
  1631. console.log(`保存观看进度: 剩余${this.remainingTime}秒`);
  1632. } catch (error) {
  1633. console.error('保存观看进度失败:', error);
  1634. }
  1635. },
  1636. // 重置倒计时
  1637. resetCountdown() {
  1638. this.stopCountdown();
  1639. this.remainingTime = this.liveItem.duration * 0.9;
  1640. this.updateCountdownDisplay();
  1641. uni.removeStorageSync(this.watchProgressKey);
  1642. uni.showToast({
  1643. title: '倒计时已重置',
  1644. icon: 'success',
  1645. duration: 1500
  1646. });
  1647. },
  1648. // 补零函数(确保两位数,核心依赖)
  1649. padZero(num) {
  1650. // 先转数字再处理,避免字符串/NaN问题
  1651. const n = Number(num);
  1652. return n < 10 ? `0${n}` : `${n}`;
  1653. },
  1654. // 倒计时格式化函数
  1655. formatCountdown(seconds) {
  1656. // 1. 先校验输入:确保是有效正整数,避免负数/非数字导致计算错误
  1657. const totalSeconds = Math.max(0, Math.floor(Number(seconds) || 0));
  1658. // 2. 重新梳理计算逻辑(核心修复)
  1659. const hours = Math.floor(totalSeconds / 3600);
  1660. const remainingAfterHours = totalSeconds % 3600; // 小时取余后剩余的秒数
  1661. const minutes = Math.floor(remainingAfterHours / 60);
  1662. const secs = remainingAfterHours % 60;
  1663. // 3. 返回格式化结果(补零+原始值)
  1664. return {
  1665. hours: this.padZero(hours),
  1666. minutes: this.padZero(minutes),
  1667. seconds: this.padZero(secs),
  1668. total: totalSeconds // 确保total是处理后的有效数值
  1669. };
  1670. },
  1671. getCountdownPercentage() {
  1672. // 1. 使用倒计时的 remainingTime 计算进度
  1673. if (!this.liveItem || typeof this.liveItem.duration !== 'number' || this.liveItem.duration <= 0) {
  1674. console.log('进度条计算:liveItem.duration无效', this.liveItem?.duration);
  1675. return 0;
  1676. }
  1677. // 2. 计算目标观看时间(90%的总时长)
  1678. const targetWatchTime = this.liveItem.duration * 0.9;
  1679. // 3. 如果已经达到目标,直接返回100%
  1680. if (this.hasReachedTarget || this.remainingTime <= 0) {
  1681. return 100;
  1682. }
  1683. // 4. 基于 remainingTime 计算进度
  1684. // remainingTime = 剩余需要观看的时间
  1685. // 已观看时间 = 总目标时间 - 剩余时间
  1686. const watchedTime = targetWatchTime - this.remainingTime;
  1687. // 5. 确保数值有效
  1688. if (watchedTime <= 0) {
  1689. return 0;
  1690. }
  1691. // 6. 计算百分比(已观看时间 / 目标时间)
  1692. const percentage = (watchedTime / targetWatchTime) * 100;
  1693. // 7. 限制在 0-100 范围内
  1694. return Math.min(100, Math.max(0, percentage));
  1695. },
  1696. // 更新倒计时显示(如果需要强制更新视图)
  1697. updateCountdownDisplay() {
  1698. // 如果需要,可以在这里触发视图更新
  1699. this.$forceUpdate();
  1700. },
  1701. // 补零函数
  1702. padZero(num) {
  1703. return num < 10 ? `0${num}` : num.toString();
  1704. },
  1705. // 初始化观看时间
  1706. initWatchTime() {
  1707. // 创建基于用户ID和直播ID的存储键
  1708. const userId = this.userInfo?.userId || 'anonymous';
  1709. this.watchTimeStorageKey = `watchTime_${userId}_${this.liveId}`;
  1710. // 从本地存储加载累计观看时间
  1711. try {
  1712. const storedTime = uni.getStorageSync(this.watchTimeStorageKey);
  1713. this.totalWatchTime = storedTime ? parseInt(storedTime) : 0;
  1714. console.log(`加载累计观看时间: ${this.totalWatchTime}秒`);
  1715. } catch (error) {
  1716. console.error('加载观看时间失败:', error);
  1717. this.totalWatchTime = 0;
  1718. }
  1719. },
  1720. // 开始统计观看时间
  1721. startWatchTimeCounter() {
  1722. if (this.watchTimeTimer) {
  1723. clearInterval(this.watchTimeTimer);
  1724. }
  1725. this.lastSaveTime = Date.now();
  1726. this.watchTimeTimer = setInterval(() => {
  1727. this.updateWatchTime();
  1728. }, 1000); // 每秒更新一次
  1729. },
  1730. // 更新观看时间
  1731. updateWatchTime() {
  1732. const now = Date.now();
  1733. const elapsed = Math.floor((now - this.lastSaveTime) / 1000);
  1734. if (elapsed > 0) {
  1735. this.totalWatchTime += elapsed;
  1736. this.lastSaveTime = now;
  1737. // 每10秒或每次页面隐藏时保存一次
  1738. if (this.totalWatchTime % 10 === 0) {
  1739. this.saveWatchTime();
  1740. }
  1741. }
  1742. },
  1743. // 保存观看时间到本地存储
  1744. saveWatchTime() {
  1745. if (!this.watchTimeStorageKey) return;
  1746. try {
  1747. uni.setStorageSync(this.watchTimeStorageKey, this.totalWatchTime);
  1748. console.log(`保存观看时间: ${this.totalWatchTime}秒`);
  1749. } catch (error) {
  1750. console.error('保存观看时间失败:', error);
  1751. }
  1752. },
  1753. // 格式化显示时间
  1754. formatWatchTime(seconds) {
  1755. const hours = Math.floor(seconds / 3600);
  1756. const minutes = Math.floor((seconds % 3600) / 60);
  1757. const secs = seconds % 60;
  1758. return {
  1759. hours: this.padZero(hours),
  1760. minutes: this.padZero(minutes),
  1761. seconds: this.padZero(secs),
  1762. total: seconds
  1763. };
  1764. },
  1765. padZero(num) {
  1766. return num < 10 ? `0${num}` : num.toString();
  1767. },
  1768. // 获取用户未领取的积分列表
  1769. completionUnreceived() {
  1770. if (!this.liveId) return;
  1771. const data = {
  1772. liveId: this.liveId
  1773. }
  1774. completionUnreceived(data).then((res) => {
  1775. if (res.code == 200) {
  1776. console.log("获取用户未领取的积分列表", res)
  1777. if (res.data) {
  1778. this.receiveList = res.data
  1779. this.showPoints = true
  1780. }
  1781. }
  1782. }).catch((error) => {});
  1783. },
  1784. // 领取完课积分
  1785. completionReceive(item) {
  1786. if (!item.id) return;
  1787. completionReceive(item.id).then((res) => {
  1788. if (res.code == 200) {
  1789. this.showPoints = false
  1790. console.log("领取完课积分", res)
  1791. }
  1792. }).catch((error) => {});
  1793. },
  1794. noticeHeightFun() {
  1795. const query = uni.createSelectorQuery().in(this);
  1796. query.select('.notice-message').boundingClientRect(rect => {
  1797. if (rect) {
  1798. this.commonViewHeight = rect.height;
  1799. this.forceScrollToBottomOnSend();
  1800. } else {
  1801. this.commonViewHeight = ''
  1802. }
  1803. }).exec();
  1804. },
  1805. // 获取胶囊按钮布局参数
  1806. getMenuButtonInfo() {
  1807. // 微信小程序API(Uniapp可直接用uni.getMenuButtonBoundingClientRect)
  1808. const menuBtn = uni.getMenuButtonBoundingClientRect();
  1809. if (menuBtn) {
  1810. this.menuButtonInfo = {
  1811. top: menuBtn.top + 'px', // 胶囊顶部距离
  1812. height: menuBtn.height + 'px', // 胶囊高度
  1813. centerY: (menuBtn.top + menuBtn.height / 2) + 'px', // 胶囊垂直居中Y坐标
  1814. right: menuBtn.right + 'px' // 胶囊右侧距离
  1815. };
  1816. }
  1817. },
  1818. // 退出全屏
  1819. exitFullscreen() {
  1820. console.log('执行退出全屏');
  1821. this.isFullscreen = false;
  1822. // 恢复竖屏样式
  1823. this.restoreVideoList();
  1824. // 显示非videolist元素
  1825. this.showNonVideoElements();
  1826. // 强制页面重排
  1827. this.$forceUpdate();
  1828. },
  1829. // 添加屏幕方向变化监听
  1830. addOrientationChangeListener() {
  1831. if (window.addEventListener) {
  1832. window.addEventListener('orientationchange', this.handleOrientationChange);
  1833. }
  1834. },
  1835. // 移除屏幕方向变化监听
  1836. removeOrientationChangeListener() {
  1837. if (window.removeEventListener) {
  1838. window.removeEventListener('orientationchange', this.handleOrientationChange);
  1839. }
  1840. }, // 处理屏幕方向变化
  1841. handleOrientationChange() {
  1842. uni.onWindowResize((res) => {
  1843. const windowWidth = res.size.windowWidth;
  1844. const windowHeight = res.size.windowHeight;
  1845. const isLandscape = windowWidth > windowHeight;
  1846. if (this.isFullscreen && !isLandscape) {
  1847. console.log('全屏状态下屏幕方向不正确,尝试退出全屏');
  1848. if (this.videoContext) {
  1849. this.videoContext.exitFullScreen();
  1850. }
  1851. }
  1852. });
  1853. }, // 恢复videolist盒子
  1854. restoreVideoList() {
  1855. this.isVideoRotated = false;
  1856. this.isFullscreen = false;
  1857. console.log('恢复视频容器竖屏状态');
  1858. },
  1859. // 强制横屏全屏(备用方案)
  1860. forceLandscapeFullscreen() {
  1861. // 尝试多种全屏方式
  1862. try {
  1863. // 方案1: 使用video的requestFullScreen
  1864. if (this.videoContext) {
  1865. this.videoContext.requestFullScreen({
  1866. direction: 90
  1867. });
  1868. return true;
  1869. }
  1870. } catch (e) {
  1871. console.log('方案1失败:', e);
  1872. }
  1873. try {
  1874. // 方案2: 尝试DOM全屏API
  1875. const videoElement = document.getElementById(`myVideo_${this.liveId}`);
  1876. if (videoElement && videoElement.requestFullscreen) {
  1877. videoElement.requestFullscreen();
  1878. return true;
  1879. }
  1880. } catch (e) {
  1881. console.log('方案2失败:', e);
  1882. }
  1883. try {
  1884. // 方案3: 使用Web API全屏
  1885. if (document.documentElement.requestFullscreen) {
  1886. document.documentElement.requestFullscreen();
  1887. return true;
  1888. }
  1889. } catch (e) {
  1890. console.log('方案3失败:', e);
  1891. }
  1892. console.log('所有全屏方案都失败了');
  1893. uni.showToast({
  1894. title: '无法全屏播放,请尝试手动横屏',
  1895. icon: 'none'
  1896. });
  1897. return false;
  1898. },
  1899. // 切换全屏
  1900. toggleFullscreen() {
  1901. console.log('自定义全屏按钮被点击');
  1902. if (this.isFullscreen) {
  1903. // 退出全屏
  1904. this.exitFullscreen();
  1905. } else {
  1906. // 进入全屏
  1907. this.enterFullscreen();
  1908. }
  1909. }, // 进入全屏
  1910. enterFullscreen() {
  1911. console.log('执行进入全屏');
  1912. this.isFullscreen = true;
  1913. // 设置横屏样式
  1914. this.rotateVideoList();
  1915. // 隐藏非videolist元素
  1916. this.hideNonVideoElements();
  1917. // 强制页面重排
  1918. this.$forceUpdate();
  1919. },
  1920. // 强制全屏的备用方案
  1921. forceFullscreen() {
  1922. console.log('使用备用方案进入全屏');
  1923. const videoId = `myVideo_${this.liveId}`;
  1924. // 在小程序中,只能使用 videoContext
  1925. if (this.videoContext) {
  1926. try {
  1927. this.videoContext.requestFullScreen({
  1928. direction: 90 // 横屏方向
  1929. });
  1930. } catch (error) {
  1931. console.error('请求全屏失败:', error);
  1932. uni.showToast({
  1933. title: '无法全屏播放,请尝试手动横屏',
  1934. icon: 'none'
  1935. });
  1936. }
  1937. }
  1938. }, // 隐藏非videolist元素
  1939. hideNonVideoElements() {
  1940. this.showNonVideoElementsFlag = false;
  1941. console.log('隐藏非视频元素');
  1942. },
  1943. // 显示非videolist元素
  1944. showNonVideoElements() {
  1945. this.showNonVideoElementsFlag = true;
  1946. console.log('显示非视频元素');
  1947. },
  1948. // 旋转videolist盒子
  1949. rotateVideoList() {
  1950. // 在小程序中,通过设置CSS类名来控制样式,而不是直接操作DOM
  1951. this.isVideoRotated = true;
  1952. this.isFullscreen = true;
  1953. // 在小程序中,应该通过绑定class的方式控制样式
  1954. // 而不是直接操作DOM
  1955. console.log('视频容器旋转到横屏状态');
  1956. },
  1957. // 全屏状态变化监听
  1958. onFullscreenChange(e) {
  1959. console.log('全屏状态变化事件详情:', e);
  1960. // 方法1:通过事件参数获取(小程序主要方式)
  1961. let fullScreen = false;
  1962. // 视频组件的全屏事件参数
  1963. if (e.detail && typeof e.detail.fullScreen !== 'undefined') {
  1964. fullScreen = e.detail.fullScreen;
  1965. console.log('通过e.detail.fullScreen获取全屏状态:', fullScreen);
  1966. }
  1967. // 其他可能的参数名
  1968. else if (e.detail && typeof e.detail.fullscreen !== 'undefined') {
  1969. fullScreen = e.detail.fullscreen;
  1970. console.log('通过e.detail.fullscreen获取全屏状态:', fullScreen);
  1971. } else {
  1972. // 在小程序环境中,可以通过屏幕方向判断
  1973. try {
  1974. const systemInfo = uni.getSystemInfoSync();
  1975. fullScreen = systemInfo.windowWidth > systemInfo.windowHeight;
  1976. console.log('通过屏幕方向判断全屏状态:', fullScreen);
  1977. } catch (err) {
  1978. console.error('获取系统信息失败:', err);
  1979. // 默认使用事件参数
  1980. fullScreen = e.detail || false;
  1981. }
  1982. }
  1983. this.isFullscreen = fullScreen;
  1984. console.log('最终设置isFullscreen为:', this.isFullscreen);
  1985. // 根据全屏状态显示/隐藏自定义控件
  1986. this.showCustomControls = !this.isFullscreen;
  1987. // 强制UI更新
  1988. this.$forceUpdate();
  1989. // 全屏时锁定横屏
  1990. if (this.isFullscreen) {
  1991. this.lockOrientation();
  1992. } else {
  1993. this.unlockOrientation();
  1994. }
  1995. },
  1996. // 锁定屏幕方向为横屏
  1997. lockOrientation() {
  1998. // 设置屏幕方向为横屏
  1999. try {
  2000. // 尝试锁定横屏
  2001. plus.screen.lockOrientation('landscape-primary');
  2002. } catch (e) {
  2003. console.log('锁定屏幕方向失败:', e);
  2004. // 备用方案
  2005. try {
  2006. // 使用 Web API(如果支持)
  2007. if (screen.orientation && screen.orientation.lock) {
  2008. screen.orientation.lock('landscape');
  2009. }
  2010. } catch (err) {
  2011. console.log('备用方案也失败了:', err);
  2012. }
  2013. }
  2014. }, // 解锁屏幕方向
  2015. unlockOrientation() {
  2016. try {
  2017. plus.screen.unlockOrientation();
  2018. } catch (e) {
  2019. console.log('解锁屏幕方向失败:', e);
  2020. // 备用方案
  2021. try {
  2022. if (screen.orientation && screen.orientation.unlock) {
  2023. screen.orientation.unlock();
  2024. }
  2025. } catch (err) {
  2026. console.log('备用解锁方案也失败了:', err);
  2027. }
  2028. }
  2029. },
  2030. shouquan() {
  2031. if (this.user.nickname == '') {
  2032. uni.showToast({
  2033. icon: 'none',
  2034. title: "请先授权微信昵称",
  2035. });
  2036. }
  2037. },
  2038. confimrname() {
  2039. if (this.user.nickname == '') {
  2040. uni.showToast({
  2041. icon: 'none',
  2042. title: "请授权微信昵称",
  2043. });
  2044. return
  2045. }
  2046. this.editUser();
  2047. uni.setStorageSync('userInfo', this.userInfo);
  2048. this.userlogo = false;
  2049. },
  2050. editUser() {
  2051. this.user.nickName = this.user.nickname;
  2052. editUser(this.user).then(
  2053. res => {
  2054. if (res.code == 200) {
  2055. uni.showToast({
  2056. icon: 'success',
  2057. title: "修改成功",
  2058. });
  2059. this.getUserInfo()
  2060. } else {
  2061. uni.showToast({
  2062. icon: 'none',
  2063. title: res.msg,
  2064. });
  2065. }
  2066. },
  2067. rej => {}
  2068. );
  2069. },
  2070. onNickNameInput(e) {
  2071. console.log(e)
  2072. this.user.nickname = e.detail.value
  2073. },
  2074. async haveLogin() {
  2075. // 防止重复执行
  2076. if (this.isOnload) {
  2077. return;
  2078. }
  2079. this.userInfo = uni.getStorageSync('userInfo');
  2080. if (this.userInfo) {
  2081. await this.getUserInfo();
  2082. }
  2083. if (this.liveId) {
  2084. // 优先加载直播间信息(包含视频资源URL)
  2085. await this.getliving(this.liveId);
  2086. this.isOnload = true;
  2087. await this.getLiveMsg(this.liveItem);
  2088. await this.getliveViewData();
  2089. // 然后加载其他数据(并行执行,不阻塞视频加载)
  2090. Promise.all([
  2091. this.getLiveMsg(this.liveItem),
  2092. this.getliveViewData()
  2093. ]).catch(err => {
  2094. console.error('加载数据失败:', err);
  2095. });
  2096. // 其他非关键数据异步加载
  2097. this.getCurrentActivities();
  2098. this.getliveOrder();
  2099. this.initSocket();
  2100. }
  2101. },
  2102. // 静默登录
  2103. goLogin(data) {
  2104. let provider = 'weixin'
  2105. uni.login({
  2106. provider: provider,
  2107. success: async loginRes => {
  2108. console.log(loginRes)
  2109. uni.getUserInfo({
  2110. provider: provider,
  2111. success: (infoRes) => {
  2112. uni.showToast({
  2113. title: '登录中...',
  2114. icon: 'loading'
  2115. });
  2116. loginByMp({
  2117. code: loginRes.code,
  2118. encryptedData: infoRes.encryptedData,
  2119. iv: infoRes.iv,
  2120. appId: this.appid
  2121. }).then(res => {
  2122. uni.hideLoading();
  2123. if (res.code == 200) {
  2124. uni.setStorageSync('AppToken', res.token);
  2125. uni.setStorageSync('userInfo', JSON.stringify(res
  2126. .user));
  2127. this.userInfo = uni.getStorageSync('userInfo');
  2128. // uni.setStorageSync('auto_userInfo', JSON.stringify(res.user));
  2129. // this.user = res.user
  2130. this.$store.commit('setCoureLogin', 1);
  2131. this.isLogin = true
  2132. this.haveLogin()
  2133. this.userlogo = true
  2134. // console.log("TOKEN_KEYAuto",TOKEN_KEYAuto)
  2135. if (this.urlOption.qwUserId) {
  2136. this.getIsAddKf() //this.getIsAddKf()
  2137. }
  2138. } else {
  2139. uni.showToast({
  2140. title: res.msg,
  2141. icon: 'none'
  2142. });
  2143. }
  2144. }).catch(err => {
  2145. uni.hideLoading();
  2146. uni.showToast({
  2147. icon: 'none',
  2148. title: "登录失败,请重新登录",
  2149. });
  2150. });
  2151. }
  2152. });
  2153. }
  2154. })
  2155. },
  2156. // liveWatchUser(){
  2157. // var data={
  2158. // qwUserId:this.urlOption.qwUserId,
  2159. // liveId:this.urlOption.liveId,
  2160. // userId:this.userInfo.userId,
  2161. // corpId:this.urlOption.corpId,
  2162. // companyUserId:this.urlOption.companyUserId,
  2163. // qwExternalId:this.urlOption.qwExternalId,
  2164. // companyId:this.urlOption.companyId,
  2165. // chatId:this.urlOption.chatId,
  2166. // }
  2167. // liveWatchUser(data).then(
  2168. // res => {
  2169. // if (res.code == 200) {
  2170. // } else {
  2171. // uni.showToast({
  2172. // icon: 'none',
  2173. // title: res.msg,
  2174. // });
  2175. // }
  2176. // },
  2177. // rej => {}
  2178. // );
  2179. // },
  2180. // 客服
  2181. getIsAddKf() {
  2182. // {videoId: this.videoId,qwUserId: this.qwUserId,corpId: this.corpId}
  2183. getIsAddKf(this.urlOption).then(res => {
  2184. if (res.code == 200) {
  2185. this.isAddKf = 1
  2186. //this.getH5CourseVideoDetails()
  2187. } else if (res.code == 401) {
  2188. this.isAddKf = 0
  2189. this.goLogin();
  2190. } else {
  2191. uni.showToast({
  2192. title: res.msg,
  2193. icon: 'none'
  2194. });
  2195. }
  2196. },
  2197. err => {}
  2198. );
  2199. },
  2200. clickTabs(item) {},
  2201. getLocationByIP() {
  2202. // 防止重复请求
  2203. if (this.hasLoadedLocation) {
  2204. return;
  2205. }
  2206. this.hasLoadedLocation = true;
  2207. // 高德IP定位API,需要替换成你的key
  2208. const key = '4e13632be0cc278f56825919603c07cf';
  2209. uni.request({
  2210. url: `https://restapi.amap.com/v3/ip?key=${key}`,
  2211. method: 'GET',
  2212. success: (res) => {
  2213. if (res.data && res.data.status === '1') {
  2214. // 返回数据格式:{ province: '广东省', city: '深圳市', ... }
  2215. // ${res.data.city}
  2216. this.location = `${res.data.province} `;
  2217. this.address = this.location
  2218. console.log('用户所在地:', this.location);
  2219. } else {
  2220. console.error('获取位置失败:', res.data);
  2221. this.hasLoadedLocation = false; // 失败后允许重试
  2222. }
  2223. },
  2224. fail: (err) => {
  2225. console.error('请求失败:', err);
  2226. this.hasLoadedLocation = false; // 失败后允许重试
  2227. }
  2228. });
  2229. },
  2230. formatNumber(num) {
  2231. if (typeof num !== 'number') {
  2232. num = Number(num) || 0;
  2233. }
  2234. if (num < 10000) {
  2235. return num.toString();
  2236. }
  2237. // 处理万以上的数字
  2238. const wan = num / 10000;
  2239. if (wan < 10) {
  2240. // 1万-10万之间,保留2位小数
  2241. const rounded = Math.round(wan * 100) / 100;
  2242. return rounded.toFixed(2).replace(/\.?0+$/, '') + 'w';
  2243. } else if (wan < 10000) {
  2244. // 10万-1亿之间,保留1位小数
  2245. const rounded = Math.round(wan * 10) / 10;
  2246. return rounded.toFixed(1).replace(/\.0$/, '') + 'w';
  2247. } else {
  2248. // 1亿以上,转换为亿单位
  2249. const yi = wan / 10000;
  2250. const rounded = Math.round(yi * 100) / 100;
  2251. return rounded.toFixed(2).replace(/\.?0+$/, '') + '亿';
  2252. }
  2253. },
  2254. // 重置所有状态
  2255. resetAllStates() {
  2256. this.liveUserCalled = false;
  2257. this.talklist = [];
  2258. this.liveViewersData = [];
  2259. this.liveViewers = [];
  2260. this.products = [];
  2261. this.liveItem = [];
  2262. // 重置WebSocket相关状态
  2263. this.isSocketOpen = false;
  2264. this.isConnecting = false;
  2265. this.isManualClose = true;
  2266. this.reconnectCount = 0;
  2267. this.heartBeatRetryCount = 0;
  2268. this.lastHeartBeatTime = 0;
  2269. this.adaptiveHeartBeatInterval = this.heartBeatInterval;
  2270. this.isNetworkAvailable = true;
  2271. this.networkType = 'unknown';
  2272. // 重置性能监控数据
  2273. this.connectionStartTime = 0;
  2274. this.connectionLatency = 0;
  2275. this.messageCount = 0;
  2276. this.errorCount = 0;
  2277. this.lastPerformanceCheck = 0;
  2278. },
  2279. // 获取WebSocket性能统计
  2280. getWebSocketPerformanceStats() {
  2281. const now = Date.now();
  2282. const uptime = this.connectionStartTime > 0 ? now - this.connectionStartTime : 0;
  2283. return {
  2284. connectionLatency: this.connectionLatency,
  2285. uptime: uptime,
  2286. messageCount: this.messageCount,
  2287. errorCount: this.errorCount,
  2288. errorRate: this.messageCount > 0 ? (this.errorCount / this.messageCount * 100).toFixed(2) : 0,
  2289. messagesPerSecond: uptime > 0 ? (this.messageCount / (uptime / 1000)).toFixed(2) : 0,
  2290. networkType: this.networkType,
  2291. isConnected: this.isSocketAvailable(),
  2292. reconnectCount: this.reconnectCount
  2293. };
  2294. },
  2295. // 定期检查性能并输出统计信息
  2296. performanceCheck() {
  2297. const now = Date.now();
  2298. // 每5分钟输出一次性能统计
  2299. if (now - this.lastPerformanceCheck > 300000) { // 5分钟
  2300. const stats = this.getWebSocketPerformanceStats();
  2301. console.log('WebSocket性能统计:', stats);
  2302. this.lastPerformanceCheck = now;
  2303. // 如果错误率过高,记录警告
  2304. if (stats.errorRate > 10) {
  2305. console.warn(`WebSocket错误率过高: ${stats.errorRate}%`);
  2306. }
  2307. // 如果连接延迟过高,记录警告
  2308. if (stats.connectionLatency > 5000) {
  2309. console.warn(`WebSocket连接延迟过高: ${stats.connectionLatency}ms`);
  2310. }
  2311. }
  2312. },
  2313. // 定期清理视频缓存
  2314. startVideoCacheCleanup() {
  2315. if (this.videoCleanupTimer) {
  2316. clearInterval(this.videoCleanupTimer);
  2317. }
  2318. // 每30秒清理一次视频缓存
  2319. this.videoCleanupTimer = setInterval(() => {
  2320. this.cleanupVideoCache();
  2321. }, 30000);
  2322. },
  2323. // 清理视频缓存
  2324. cleanupVideoCache() {
  2325. if (!this.liveItem || !this.liveId) return;
  2326. // 只对录播视频进行清理
  2327. if (this.liveItem.liveType === 2 && this.liveItem.videoUrl) {
  2328. this.reloadVideoPlayer();
  2329. }
  2330. },
  2331. // 重新加载视频播放器
  2332. reloadVideoPlayer() {
  2333. const videoId = `myVideo_${this.liveId}`;
  2334. const videoContext = uni.createVideoContext(videoId, this);
  2335. if (videoContext) {
  2336. const currentTime = this.videoCurrentTime;
  2337. // 暂停视频
  2338. videoContext.pause();
  2339. // 延迟重新加载
  2340. setTimeout(() => {
  2341. // 重新设置视频源,强制清理缓存
  2342. this.$set(this.liveItem, 'videoUrl', this.liveItem.videoUrl + '&t=' + Date.now());
  2343. // 恢复播放位置
  2344. setTimeout(() => {
  2345. if (videoContext.seek) {
  2346. videoContext.seek(currentTime);
  2347. }
  2348. videoContext.play();
  2349. }, 500);
  2350. }, 100);
  2351. }
  2352. },
  2353. // 启动内存监控
  2354. startMemoryMonitoring() {
  2355. if (this.memoryMonitorTimer) {
  2356. clearInterval(this.memoryMonitorTimer);
  2357. }
  2358. this.memoryMonitorTimer = setInterval(() => {
  2359. this.checkMemoryUsage();
  2360. }, 15000); // 每15秒检查一次
  2361. },
  2362. // 检查内存使用情况
  2363. checkMemoryUsage() {
  2364. try {
  2365. // 检查定时器数量
  2366. const timerCount = this.getActiveTimerCount();
  2367. if (timerCount > 10) {
  2368. console.warn(`检测到过多定时器: ${timerCount}个,可能存在内存泄漏`);
  2369. this.cleanupUnusedTimers();
  2370. }
  2371. // 检查消息队列长度
  2372. if (this.messageQueue && this.messageQueue.length > 100) {
  2373. console.warn(`消息队列过长: ${this.messageQueue.length}条,清理旧消息`);
  2374. this.messageQueue = this.messageQueue.slice(-50); // 只保留最新50条
  2375. }
  2376. // 检查用户颜色缓存
  2377. if (this.userRandomColors && Object.keys(this.userRandomColors).length > 500) {
  2378. console.warn('用户颜色缓存过大,清理部分缓存');
  2379. const keys = Object.keys(this.userRandomColors);
  2380. const keysToRemove = keys.slice(0, keys.length - 200); // 只保留最新200个
  2381. keysToRemove.forEach(key => delete this.userRandomColors[key]);
  2382. }
  2383. // 定期触发垃圾回收
  2384. if (Date.now() - this.lastPerformanceCheck > 60000) { // 每分钟一次
  2385. this.triggerGarbageCollection();
  2386. this.lastPerformanceCheck = Date.now();
  2387. }
  2388. } catch (error) {
  2389. console.error('内存检查失败:', error);
  2390. }
  2391. },
  2392. // 强制内存清理
  2393. forceMemoryCleanup() {
  2394. console.log('执行强制内存清理');
  2395. // 1. 清理视频播放器
  2396. this.cleanupVideoPlayer();
  2397. // 2. 清理大数据
  2398. this.clearBigData();
  2399. // 3. 强制垃圾回收(在支持的环境下)
  2400. this.triggerGarbageCollection();
  2401. },
  2402. // 清理视频播放器
  2403. cleanupVideoPlayer() {
  2404. const videoId = `myVideo_${this.liveId}`;
  2405. const videoContext = uni.createVideoContext(videoId, this);
  2406. if (videoContext) {
  2407. // 停止播放
  2408. videoContext.stop();
  2409. // 重置视频源
  2410. setTimeout(() => {
  2411. this.$set(this.liveItem, 'videoUrl', '');
  2412. setTimeout(() => {
  2413. this.$set(this.liveItem, 'videoUrl', this.getFreshVideoUrl());
  2414. this.playVideo();
  2415. }, 500);
  2416. }, 100);
  2417. }
  2418. },
  2419. // 获取带时间戳的新视频URL
  2420. getFreshVideoUrl() {
  2421. if (!this.liveItem.originalVideoUrl) {
  2422. this.liveItem.originalVideoUrl = this.liveItem.videoUrl;
  2423. }
  2424. // 添加时间戳参数,避免缓存
  2425. const separator = this.liveItem.originalVideoUrl.includes('?') ? '&' : '?';
  2426. return this.liveItem.originalVideoUrl + separator + 't=' + Date.now();
  2427. },
  2428. // 清理大数据
  2429. clearBigData() {
  2430. // 清理聊天记录,只保留最近50条
  2431. if (this.talklist.length > 50) {
  2432. this.talklist = this.talklist.slice(-50);
  2433. }
  2434. // 清理虚拟数据
  2435. if (this.liveViewers.length > 100) {
  2436. this.liveViewers = this.liveViewers.slice(-100);
  2437. }
  2438. // 清理商品数据
  2439. if (this.products.length > 50) {
  2440. this.products = this.products.slice(0, 50);
  2441. }
  2442. // 强制垃圾回收(如果支持)
  2443. if (typeof gc === 'function') {
  2444. gc();
  2445. }
  2446. },
  2447. // 触发垃圾回收(在支持的环境下)
  2448. triggerGarbageCollection() {
  2449. if (wx && wx.triggerGC) {
  2450. wx.triggerGC();
  2451. }
  2452. },
  2453. // 强制滚动到底部(备用方案)
  2454. forceScrollToBottom() {
  2455. // console.log('执行强制滚动到底部');
  2456. // 方案1:直接设置一个很大的scrollTop值
  2457. this.scrollTop = 999999;
  2458. // 方案2:使用scroll-into-view滚动到最后一个元素
  2459. this.$nextTick(() => {
  2460. if (this.talklist && this.talklist.length > 0) {
  2461. const lastMessage = this.talklist[this.talklist.length - 1];
  2462. const targetId = `list_${lastMessage.uniqueId || (this.talklist.length - 1)}`;
  2463. console.log(
  2464. `尝试滚动到元素: ${targetId}, 当前消息数量: ${this.talklist.length}, 最后消息ID: ${lastMessage.uniqueId}`
  2465. );
  2466. this.scrollIntoView = targetId;
  2467. // 清除scroll-into-view,避免影响后续滚动
  2468. setTimeout(() => {
  2469. this.scrollIntoView = '';
  2470. }, 200);
  2471. }
  2472. // 方案3:使用更大的延迟再次设置scrollTop
  2473. setTimeout(() => {
  2474. this.scrollTop = 999999;
  2475. console.log('延迟设置scrollTop为999999');
  2476. }, 100);
  2477. // 方案4:300ms后使用原生API作为最终备用方案
  2478. setTimeout(() => {
  2479. this.nativeScrollToBottom();
  2480. }, 300);
  2481. });
  2482. },
  2483. // 强制滚动到底部(用于发送消息,绕过防抖限制)
  2484. forceScrollToBottomOnSend() {
  2485. //console.log('执行强制滚动到底部(发送消息专用)');
  2486. // 清理之前的定时器
  2487. if (this.scrollTimer) {
  2488. clearTimeout(this.scrollTimer);
  2489. this.scrollTimer = null;
  2490. }
  2491. // 强制更新滚动时间,确保不被防抖阻止
  2492. this.lastScrollTime = Date.now();
  2493. // 清除scroll-into-view,避免冲突
  2494. this.scrollIntoView = '';
  2495. // 方案1:立即使用scroll-into-view滚动到最后一条消息
  2496. if (this.talklist.length > 0) {
  2497. const lastMessage = this.talklist[this.talklist.length - 1];
  2498. if (lastMessage && lastMessage.uniqueId) {
  2499. this.scrollIntoView = `list_${lastMessage.uniqueId}`;
  2500. //console.log(`强制滚动方案1: 设置scrollIntoView为list_${lastMessage.uniqueId}`);
  2501. }
  2502. }
  2503. // 方案2:同时设置scrollTop为一个非常大的值
  2504. const targetScrollTop = Date.now(); // 使用时间戳确保每次都不同
  2505. this.scrollTop = targetScrollTop;
  2506. //console.log('强制滚动方案2: 设置scrollTop为', targetScrollTop);
  2507. // 方案3:立即尝试原生滚动
  2508. this.nativeScrollToBottom();
  2509. // 方案4:使用nextTick确保DOM更新后再次滚动
  2510. this.$nextTick(() => {
  2511. // 清除scroll-into-view后重新设置scrollTop
  2512. this.scrollIntoView = '';
  2513. this.scrollTop = targetScrollTop + 1;
  2514. //console.log('强制滚动方案3: nextTick后重新设置scrollTop');
  2515. // 再次尝试原生滚动
  2516. setTimeout(() => {
  2517. this.nativeScrollToBottom();
  2518. }, 50);
  2519. });
  2520. // 方案5:延迟检查和强制滚动(最终保障)
  2521. this.scrollTimer = setTimeout(() => {
  2522. this.checkAndForceScroll(targetScrollTop);
  2523. this.scrollTimer = null;
  2524. }, 200);
  2525. },
  2526. // 检查并强制滚动
  2527. checkAndForceScroll(targetScrollTop) {
  2528. //console.log(`检查滚动状态: 当前位置=${this.currentScrollTop}, 目标位置=${targetScrollTop}`);
  2529. // 无论当前位置如何,都尝试强制滚动到底部
  2530. // 使用scroll-into-view滚动到最后一条消息
  2531. if (this.talklist.length > 0) {
  2532. const lastMessage = this.talklist[this.talklist.length - 1];
  2533. if (lastMessage && lastMessage.uniqueId) {
  2534. this.scrollIntoView = `list_${lastMessage.uniqueId}`;
  2535. //console.log(`最终检查: 设置scrollIntoView为list_${lastMessage.uniqueId}`);
  2536. }
  2537. }
  2538. // 设置一个新的scrollTop值
  2539. this.scrollTop = Date.now() + Math.random() * 1000;
  2540. //console.log('最终检查: 设置新的scrollTop值');
  2541. // 多次尝试原生滚动
  2542. this.nativeScrollToBottom();
  2543. setTimeout(() => {
  2544. this.nativeScrollToBottom();
  2545. }, 100);
  2546. },
  2547. // 使用原生API强制滚动(最终备用方案)
  2548. nativeScrollToBottom() {
  2549. try {
  2550. // 方案1:使用uni.createSelectorQuery直接操作DOM
  2551. const query = uni.createSelectorQuery().in(this);
  2552. query.select('#msgScroll').node((res) => {
  2553. if (res && res.node) {
  2554. // console.log('找到msgScroll节点,执行原生滚动');
  2555. const scrollHeight = res.node.scrollHeight;
  2556. res.node.scrollTop = scrollHeight;
  2557. // 确保滚动生效,延迟再次设置
  2558. setTimeout(() => {
  2559. res.node.scrollTop = scrollHeight + 100;
  2560. }, 50);
  2561. }
  2562. }).exec();
  2563. } catch (error) {
  2564. console.error('原生滚动失败:', error);
  2565. }
  2566. },
  2567. // 监听滚动事件
  2568. onScroll(e) {
  2569. this.currentScrollTop = e.detail.scrollTop;
  2570. // console.log('当前滚动位置:', this.currentScrollTop);
  2571. },
  2572. // 停止内存监控
  2573. stopMemoryMonitor() {
  2574. if (this.memoryMonitorTimer) {
  2575. clearInterval(this.memoryMonitorTimer);
  2576. this.memoryMonitorTimer = null;
  2577. }
  2578. },
  2579. // 获取活跃定时器数量
  2580. getActiveTimerCount() {
  2581. const timers = [
  2582. 'trafficTimer', 'pingTimeoutTimer', 'heartBeatTimer', 'liveViewDataTimer',
  2583. 'reconnectTimer', 'scrollTimer', 'searchTimer', 'purchasePromptTimer',
  2584. 'welcomeTimer', 'redTimer', 'liveStartTimer', 'lotteryTimer',
  2585. 'memoryMonitorTimer', 'networkStatusTimer', 'networkRetryTimer', 'generatingTimer'
  2586. ];
  2587. return timers.filter(timer => this[timer] !== null).length;
  2588. },
  2589. // 清理未使用的定时器
  2590. cleanupUnusedTimers() {
  2591. // 检查并清理可能泄漏的定时器
  2592. const timers = [
  2593. 'trafficTimer', 'pingTimeoutTimer', 'heartBeatTimer', 'liveViewDataTimer',
  2594. 'reconnectTimer', 'scrollTimer', 'searchTimer', 'purchasePromptTimer',
  2595. 'welcomeTimer', 'redTimer', 'liveStartTimer', 'lotteryTimer', 'noticeTimer',
  2596. 'networkStatusTimer', 'networkRetryTimer', 'generatingTimer'
  2597. ];
  2598. timers.forEach(timerName => {
  2599. if (this[timerName] && typeof this[timerName] === 'number') {
  2600. // 检查定时器是否还在运行
  2601. if (timerName.includes('Interval')) {
  2602. clearInterval(this[timerName]);
  2603. } else {
  2604. clearTimeout(this[timerName]);
  2605. }
  2606. this[timerName] = null;
  2607. console.log(`清理了可能泄漏的定时器: ${timerName}`);
  2608. }
  2609. });
  2610. },
  2611. // 增强的定时器清理方法
  2612. clearAllTimersEnhanced() {
  2613. // 先调用原有的清理方法
  2614. this.clearAllTimers();
  2615. // 额外清理新增的定时器
  2616. if (this.networkRetryTimer) {
  2617. clearTimeout(this.networkRetryTimer);
  2618. this.networkRetryTimer = null;
  2619. }
  2620. // 停止内存监控
  2621. this.stopMemoryMonitor();
  2622. // 清理缓存数据
  2623. this.userRandomColors = Object.create(null);
  2624. this.shownEntryUsers.clear();
  2625. // 重置性能监控数据
  2626. this.messageCount = 0;
  2627. this.errorCount = 0;
  2628. this.connectionLatency = 0;
  2629. this.lastPerformanceCheck = 0;
  2630. console.log('增强清理完成:所有定时器和缓存已清理');
  2631. },
  2632. goMiniProgram() {
  2633. uni.navigateTo({
  2634. url: '/pages_user/user/integralGoodsList'
  2635. })
  2636. },
  2637. // 阻止双击事件
  2638. preventDoubleClick(e) {
  2639. e.preventDefault();
  2640. e.stopPropagation();
  2641. return false;
  2642. },
  2643. // 清理所有定时器和内存
  2644. clearAllTimers() {
  2645. // 清理所有定时器
  2646. const timers = [
  2647. 'scrollTimer',
  2648. 'liveViewDataTimer',
  2649. 'redTimer',
  2650. 'liveStartTimer',
  2651. 'lotteryTimer',
  2652. 'noticeTimer',
  2653. 'welcomeTimer',
  2654. 'trafficInterval',
  2655. 'lookTimer',
  2656. 'trafficTimer',
  2657. 'intervalId',
  2658. 'reconnectTimer',
  2659. 'searchTimer',
  2660. 'purchasePromptTimer',
  2661. 'heartBeatTimer',
  2662. 'pingTimeoutTimer',
  2663. 'generatingTimer'
  2664. ];
  2665. timers.forEach((timer) => {
  2666. if (this[timer]) {
  2667. if (timer.includes('Interval') || timer.includes('Timer')) {
  2668. clearInterval(this[timer]);
  2669. } else {
  2670. clearTimeout(this[timer]);
  2671. }
  2672. this[timer] = null;
  2673. }
  2674. });
  2675. // 重置相关状态
  2676. this.stayTime = 0;
  2677. this.startTime = 0;
  2678. this.totalTraffic = 0;
  2679. this.scrollPending = false;
  2680. this.reconnectCount = 0;
  2681. this.heartBeatRetryCount = 0;
  2682. },
  2683. //直播计算流量
  2684. // startTrafficCalculation() {
  2685. // if (this.trafficTimer) {
  2686. // clearInterval(this.trafficTimer);
  2687. // this.trafficTimer = null;
  2688. // }
  2689. // this.startTime = Date.now();
  2690. // var that = this;
  2691. // // 计算码率
  2692. // let bitrate = this.calculateBitrate();
  2693. // this.trafficTimer = setInterval(() => {
  2694. // that.calculateTraffic(bitrate);
  2695. // }, 10000); // 每10秒计算一次
  2696. // },
  2697. //直播计算流量
  2698. startTrafficCalculation() {
  2699. // 检查必要数据
  2700. if (!this.liveItem || !this.liveItem.videoFileSize) {
  2701. console.warn('视频文件大小数据不完整,无法启动流量计算');
  2702. return;
  2703. }
  2704. // 检查视频总时长
  2705. const totalDuration = this.liveItem.videoDuration || this.liveItem.duration;
  2706. if (!totalDuration) {
  2707. console.warn('视频总时长数据不完整,无法启动流量计算');
  2708. return;
  2709. }
  2710. // 清除已有定时器
  2711. if (this.trafficTimer) {
  2712. clearInterval(this.trafficTimer);
  2713. this.trafficTimer = null;
  2714. }
  2715. // 记录流量计算开始时间
  2716. this.trafficStartTime = Date.now();
  2717. var that = this;
  2718. // 立即提交一次10s流量(模拟10秒观看)
  2719. setTimeout(() => {
  2720. that.submitTraffic(10);
  2721. }, 100); // 延迟100ms确保数据已准备好
  2722. // 启动定时器,每10秒计算并提交一次流量
  2723. this.trafficTimer = setInterval(() => {
  2724. that.calculateAndSubmitTraffic();
  2725. }, 10000); // 每10秒计算一次
  2726. },
  2727. // 计算流量
  2728. // calculateTraffic(bitrate) {
  2729. // const currentTime = Date.now();
  2730. // const duration = (currentTime - this.startTime) / 1000; // 持续时间(秒)
  2731. // // 流量 = 码率 × 时间
  2732. // // 码率单位: bps, 时间单位: 秒, 流量单位: 比特
  2733. // const trafficBits = bitrate * duration;
  2734. // // 转换为字节
  2735. // this.totalTraffic = trafficBits / 8;
  2736. // this.getLiveInternetTraffic();
  2737. // },
  2738. // calculateBitrate() {
  2739. // // 如果接口返回了视频文件大小和时长,使用这些数据计算码率
  2740. // if (this.liveItem.videoFileSize && this.liveItem.videoDuration) {
  2741. // // 码率 = 文件大小(字节) / 时长(秒) × 8 (转换为bps) × 5
  2742. // const calculatedBitrate = (this.liveItem.videoFileSize / this.liveItem.videoDuration) * 8 * 5;
  2743. // console.log(
  2744. // `使用接口数据计算码率: ${calculatedBitrate} bps (文件大小: ${this.liveItem.videoFileSize} 字节, 时长: ${this.liveItem.videoDuration} 秒)`
  2745. // );
  2746. // return calculatedBitrate;
  2747. // } else {
  2748. // // 如果任一字段为空,使用默认码率 1500 bps
  2749. // console.log('接口数据不完整,使用默认码率: 1500 bps');
  2750. // return 1500;
  2751. // }
  2752. // },
  2753. // calculateTraffic(bitrate) {
  2754. // const currentTime = Date.now();
  2755. // const duration = (currentTime - this.startTime) / 1000; // 持续时间(秒)
  2756. // // 流量 = 码率 × 时间
  2757. // // 码率单位: bps, 时间单位: 秒, 流量单位: 比特
  2758. // const trafficBits = bitrate * duration;
  2759. // // 转换为字节
  2760. // this.totalTraffic = trafficBits / 8;
  2761. // // 调用流量上报接口
  2762. // this.getLiveInternetTraffic();
  2763. // },
  2764. // 计算并提交流量
  2765. calculateAndSubmitTraffic() {
  2766. if (!this.liveItem || !this.liveItem.videoFileSize) {
  2767. const totalDuration = this.liveItem.videoDuration || this.liveItem.duration;
  2768. if (!totalDuration) {
  2769. return;
  2770. }
  2771. }
  2772. // 计算用户观看视频时长(秒)
  2773. const watchDuration = Math.floor((Date.now() - this.trafficStartTime) / 1000);
  2774. // 获取视频总时长(秒)
  2775. const totalDuration = this.liveItem.videoDuration || this.liveItem.duration || 0;
  2776. // 获取视频文件大小(字节)
  2777. const videoFileSize = this.liveItem.videoFileSize || 0;
  2778. if (totalDuration <= 0 || videoFileSize <= 0) {
  2779. console.warn('视频总时长或文件大小无效,无法计算流量');
  2780. return;
  2781. }
  2782. // 流量计算方法:用户观看视频时长/视频总时长*视频文件大小
  2783. const calculatedTraffic = (watchDuration / totalDuration) * videoFileSize;
  2784. // 更新总流量
  2785. this.totalTraffic = calculatedTraffic;
  2786. // 提交流量数据
  2787. this.submitTraffic(watchDuration);
  2788. },
  2789. // 提交流量数据到后端
  2790. submitTraffic(watchDuration) {
  2791. if (!this.liveId || !this.userInfo || !this.userInfo.userId) {
  2792. return;
  2793. }
  2794. // 计算当前观看时长对应的流量
  2795. const totalDuration = this.liveItem.videoDuration || this.liveItem.duration || 0;
  2796. const videoFileSize = this.liveItem.videoFileSize || 0;
  2797. if (totalDuration <= 0 || videoFileSize <= 0) {
  2798. console.warn('视频总时长或文件大小无效,无法提交流量', {
  2799. totalDuration,
  2800. videoFileSize,
  2801. videoDuration: this.liveItem.videoDuration,
  2802. duration: this.liveItem.duration
  2803. });
  2804. return;
  2805. }
  2806. // 流量 = 用户观看视频时长/视频总时长*视频文件大小
  2807. const traffic = (watchDuration / totalDuration) * videoFileSize;
  2808. const param = {
  2809. userId: this.userInfo.userId || '',
  2810. liveId: this.liveId || '',
  2811. uuId: dayjs().format('YYYYMMDD') + this.uuId,
  2812. internetTraffic: Math.round(traffic), // 四舍五入到整数
  2813. watchDuration: watchDuration, // 观看时长(秒)
  2814. totalDuration: totalDuration, // 视频总时长(秒)
  2815. videoFileSize: videoFileSize // 视频文件大小(字节)
  2816. };
  2817. console.log('提交流量数据:', param);
  2818. liveInternetTraffic(param).catch(err => {
  2819. console.error('流量数据提交失败:', err);
  2820. });
  2821. },
  2822. startTimer() {
  2823. this.startTime = Date.now();
  2824. this.lookTimer = setInterval(() => {
  2825. this.stayTime = Math.floor((Date.now() - this.startTime) / 1000);
  2826. }, 1000);
  2827. },
  2828. //直播、录播缓冲
  2829. getLiveInternetTraffic() {
  2830. if (!this.liveId) return;
  2831. const currentTime = (this.stayTime / this.liveItem.duration) * 100;
  2832. const param = {
  2833. userId: this.userInfo.userId || '',
  2834. liveId: this.liveId || '',
  2835. uuId: dayjs().format('YYYYMMDD') + this.uuId,
  2836. internetTraffic: this.totalTraffic
  2837. };
  2838. liveInternetTraffic(param);
  2839. },
  2840. // 回放、预告缓冲
  2841. getInternetTraffic() {
  2842. if (!this.liveId || !this.liveId || !this.userInfo.userId || !this.uuId) return;
  2843. const currentTime = (this.stayTime / this.liveItem.duration) * 100;
  2844. const param = {
  2845. videoType: this.liveItem.videoType,
  2846. videoId: this.liveItem.videoId,
  2847. userId: this.userInfo.userId,
  2848. liveId: this.liveId,
  2849. uuId: dayjs().format('YYYYMMDD') + this.uuId,
  2850. duration: this.liveItem.duration,
  2851. bufferRate: currentTime
  2852. };
  2853. if (this.liveItem.status == 1) {
  2854. param.videoType = this.liveItem.previewVideoType || '';
  2855. param.videoId = this.liveItem.previewVideoId || '';
  2856. }
  2857. if (this.liveItem.liveType == 1) {
  2858. param.bufferRate = this.totalTraffic;
  2859. }
  2860. internetTraffic(param);
  2861. },
  2862. scrollToBottom() {
  2863. const now = Date.now();
  2864. // 防抖检查:如果距离上次滚动时间太短,则忽略
  2865. if (now - this.lastScrollTime < this.scrollDebounceDelay) {
  2866. return;
  2867. }
  2868. this.lastScrollTime = now;
  2869. // 清理之前的定时器
  2870. if (this.scrollTimer) {
  2871. clearTimeout(this.scrollTimer);
  2872. this.scrollTimer = null;
  2873. }
  2874. // 直接设置滚动位置
  2875. this.scrollTop = 999999999;
  2876. },
  2877. // 启动内存监控
  2878. startMemoryMonitor() {
  2879. // 清理之前的监控
  2880. if (this.memoryMonitorTimer) {
  2881. clearInterval(this.memoryMonitorTimer);
  2882. }
  2883. // 每5分钟检查一次内存使用情况
  2884. this.memoryMonitorTimer = setInterval(() => {
  2885. this.checkAndCleanMemory();
  2886. }, 5 * 60 * 1000); // 5分钟
  2887. },
  2888. // 检查并清理内存
  2889. checkAndCleanMemory() {
  2890. try {
  2891. // 清理过多的聊天消息
  2892. if (this.talklist && this.talklist.length > 25) {
  2893. const keepCount = 20;
  2894. this.talklist.splice(0, this.talklist.length - keepCount);
  2895. }
  2896. // 清理用户颜色缓存(保留最近的50个)
  2897. if (this.userRandomColors && Object.keys(this.userRandomColors).length > 50) {
  2898. const entries = Object.entries(this.userRandomColors);
  2899. const keepEntries = entries.slice(-50);
  2900. this.userRandomColors = Object.fromEntries(keepEntries);
  2901. }
  2902. // 清理已显示用户集合(保留最近的100个)
  2903. if (this.shownEntryUsers && this.shownEntryUsers.size > 100) {
  2904. const array = Array.from(this.shownEntryUsers);
  2905. this.shownEntryUsers.clear();
  2906. array.slice(-100).forEach((id) => this.shownEntryUsers.add(id));
  2907. }
  2908. console.log('内存清理完成');
  2909. } catch (error) {
  2910. console.error('内存清理失败:', error);
  2911. }
  2912. },
  2913. // 恢复页面活动
  2914. async resumePageActivity() {
  2915. if (this.liveItem) {
  2916. await this.getliving(this.liveId);
  2917. this.startTimeTimer(this.liveItem);
  2918. }
  2919. if (!this.isSocketAvailable()) {
  2920. this.initSocket();
  2921. }
  2922. },
  2923. // 获取用户专属随机色(缓存机制:同一用户始终用同一颜色)
  2924. getUserRandomColor(userId) {
  2925. if (!userId) {
  2926. return '#8978e2'; // 默认颜色
  2927. }
  2928. //如果缓存中已有该用户的颜色,直接返回
  2929. if (this.userRandomColors[userId]) {
  2930. return this.userRandomColors[userId];
  2931. }
  2932. //为新用户生成固定颜色(基于用户ID生成,不是完全随机)
  2933. const color = this.generateStableColor(userId);
  2934. this.userRandomColors[userId] = color;
  2935. // 存储到本地缓存,确保页面刷新后颜色不变
  2936. this.saveUserColorsToStorage();
  2937. return color;
  2938. }, // 基于用户ID生成稳定颜色(不是完全随机)
  2939. generateStableColor(userId) {
  2940. // 将用户ID转换为数字种子
  2941. let seed = 0;
  2942. for (let i = 0; i < userId.length; i++) {
  2943. seed = (seed * 31 + userId.charCodeAt(i)) % 1000000;
  2944. }
  2945. const colorPool = [
  2946. '#FF6B6B',
  2947. '#4ECDC4',
  2948. '#45B7D1',
  2949. '#96CEB4',
  2950. '#FFEAA7',
  2951. '#DDA0DD',
  2952. '#98D8C8',
  2953. '#F7DC6F',
  2954. '#BB8FCE',
  2955. '#85C1E9',
  2956. '#F8C471',
  2957. '#82E0AA',
  2958. '#F1948A',
  2959. '#85C1E9',
  2960. '#D7BDE2'
  2961. ];
  2962. return colorPool[seed % colorPool.length];
  2963. },
  2964. // 保存颜色映射到本地存储
  2965. saveUserColorsToStorage() {
  2966. try {
  2967. uni.setStorageSync('userRandomColors', this.userRandomColors);
  2968. } catch (e) {
  2969. console.warn('保存用户颜色缓存失败:', e);
  2970. }
  2971. },
  2972. // 从本地存储加载颜色映射
  2973. loadUserColorsFromStorage() {
  2974. try {
  2975. const cached = uni.getStorageSync('userRandomColors');
  2976. if (cached) {
  2977. this.userRandomColors = cached;
  2978. }
  2979. } catch (e) {
  2980. console.warn('加载用户颜色缓存失败:', e);
  2981. }
  2982. },
  2983. //头像名字
  2984. getNicknameInitial(nickName) {
  2985. if (!nickName || typeof nickName !== 'string') return '未';
  2986. if (/^[\u4e00-\u9fa5]/.test(nickName[0])) {
  2987. return nickName[0];
  2988. }
  2989. return nickName[0].toUpperCase();
  2990. },
  2991. async getUserInfo() {
  2992. await getUserInfo().then(
  2993. (res) => {
  2994. if (res.code == 200) {
  2995. this.userInfo = res.user;
  2996. this.isNow = dayjs(this.userInfo.updateTime).isSame(dayjs(), 'day')
  2997. } else {
  2998. uni.showToast({
  2999. icon: 'none',
  3000. title: '请求失败'
  3001. });
  3002. }
  3003. },
  3004. (rej) => {}
  3005. );
  3006. },
  3007. //订阅消息
  3008. handleAgreement() {
  3009. const templateId = this.templateId;
  3010. if (this.hasSubscribed) return;
  3011. uni.requestSubscribeMessage({
  3012. tmplIds: [templateId],
  3013. success: (res) => {
  3014. if (res[templateId] === 'accept') {
  3015. uni.showToast({
  3016. title: '订阅成功,开播将提醒您',
  3017. icon: 'none',
  3018. duration: 2500 // 成功提示延长到2.5秒
  3019. });
  3020. // 订阅成功时
  3021. this.hasSubscribed = true;
  3022. uni.setStorageSync('subscribe_status_' + this.liveId, true);
  3023. this.callSendMessageApi();
  3024. } else if (res[templateId] === 'reject') {
  3025. uni.showToast({
  3026. title: '您已拒绝订阅,将无法收到提醒',
  3027. icon: 'none',
  3028. duration: 2500 // 成功提示延长到2.5秒
  3029. });
  3030. } else if (res[templateId] === 'ban') {
  3031. uni.showToast({
  3032. title: '您已关闭所有订阅权限,请在设置中开启',
  3033. icon: 'none',
  3034. duration: 2500 // 成功提示延长到2.5秒
  3035. });
  3036. }
  3037. },
  3038. fail: (err) => {
  3039. console.error('订阅消息失败', err);
  3040. uni.showToast({
  3041. title: '订阅失败,请重试',
  3042. icon: 'none',
  3043. duration: 2500 // 成功提示延长到2.5秒
  3044. });
  3045. }
  3046. });
  3047. },
  3048. async callSendMessageApi() {
  3049. if (!this.userInfo.userId) return;
  3050. const templateData = {
  3051. liveId: this.liveId,
  3052. userId: this.userInfo.userId,
  3053. templateId: this.templateId, // 模板ID
  3054. maOpenId: this.userInfo.maOpenId,
  3055. appId: this.appid,
  3056. data: {
  3057. thing4: this.liveItem.liveName,
  3058. time2: this.liveItem.startTime,
  3059. date7: this.liveItem.startTime
  3060. }
  3061. };
  3062. subNotifyLive(templateData).then(
  3063. (res) => {
  3064. if (res.code == 200) {
  3065. this.isAgreement = true;
  3066. uni.setStorageSync('isAgreement', true);
  3067. } else {
  3068. uni.showToast({
  3069. title: res.msg,
  3070. icon: 'none'
  3071. });
  3072. }
  3073. },
  3074. (rej) => {}
  3075. );
  3076. },
  3077. //发送心跳
  3078. sendHeartBeat() {
  3079. if (!this.isSocketAvailable() || !this.isNetworkAvailable) {
  3080. console.warn('网络不可用或Socket连接异常,跳过心跳发送');
  3081. return;
  3082. }
  3083. this.lastHeartBeatTime = Date.now();
  3084. // 计算当前累计观看时长
  3085. const currentWatchDuration = this.getCurrentWatchDuration();
  3086. try {
  3087. const heartBeatMsg = JSON.stringify({
  3088. cmd: 'heartbeat',
  3089. msg: 'ping',
  3090. userId: this.userInfo.userId || '',
  3091. liveId: this.liveId,
  3092. timestamp: this.lastHeartBeatTime,
  3093. networkType: this.networkType,
  3094. data: String(currentWatchDuration)
  3095. });
  3096. this.socket.send({
  3097. data: heartBeatMsg,
  3098. success: () => {
  3099. this.heartBeatRetryCount = 0; // 成功后重置重试次数
  3100. this.adjustHeartBeatInterval(true); // 网络良好,可适当延长间隔
  3101. this.startPingTimeout(); // 启动超时检测
  3102. },
  3103. fail: (err) => {
  3104. console.error('心跳包发送失败:', err);
  3105. this.heartBeatRetryCount++;
  3106. this.adjustHeartBeatInterval(false); // 网络不稳定,缩短间隔
  3107. // 根据网络类型调整重试策略
  3108. const retryDelay = this.getRetryDelay();
  3109. if (this.heartBeatRetryCount < this.maxHeartBeatRetries) {
  3110. setTimeout(() => this.sendHeartBeat(), retryDelay);
  3111. } else {
  3112. this.heartBeatRetryCount = 0;
  3113. this.handleReconnect(); // 重试用完才重连
  3114. }
  3115. }
  3116. });
  3117. } catch (err) {
  3118. console.error('心跳发送异常:', err);
  3119. this.heartBeatRetryCount++;
  3120. const retryDelay = this.getRetryDelay();
  3121. if (this.heartBeatRetryCount < this.maxHeartBeatRetries) {
  3122. setTimeout(() => this.sendHeartBeat(), retryDelay);
  3123. } else {
  3124. this.heartBeatRetryCount = 0;
  3125. this.handleReconnect();
  3126. }
  3127. }
  3128. },
  3129. // 根据网络状态获取重试延迟
  3130. getRetryDelay() {
  3131. const baseDelay = 2000;
  3132. const retryMultiplier = Math.pow(1.5, this.heartBeatRetryCount); // 指数退避
  3133. // 根据网络类型调整延迟
  3134. let networkMultiplier = 1;
  3135. switch (this.networkType) {
  3136. case '2g':
  3137. networkMultiplier = 3;
  3138. break;
  3139. case '3g':
  3140. networkMultiplier = 2;
  3141. break;
  3142. case '4g':
  3143. case '5g':
  3144. networkMultiplier = 1;
  3145. break;
  3146. case 'wifi':
  3147. networkMultiplier = 0.8;
  3148. break;
  3149. default:
  3150. networkMultiplier = 1.5;
  3151. }
  3152. return Math.min(baseDelay * retryMultiplier * networkMultiplier, 10000); // 最大10秒
  3153. },
  3154. // 自适应调整心跳间隔
  3155. adjustHeartBeatInterval(isSuccess) {
  3156. if (isSuccess) {
  3157. // 连接稳定,可适当延长间隔(最大30秒)
  3158. this.adaptiveHeartBeatInterval = Math.min(this.adaptiveHeartBeatInterval * 1.1, 30000);
  3159. } else {
  3160. // 连接不稳定,缩短间隔(最小10秒)
  3161. this.adaptiveHeartBeatInterval = Math.max(this.adaptiveHeartBeatInterval * 0.9, 10000);
  3162. }
  3163. },
  3164. // 启动心跳超时检测
  3165. startPingTimeout() {
  3166. // 清除现有的ping超时定时器
  3167. if (this.pingTimeoutTimer) {
  3168. clearTimeout(this.pingTimeoutTimer);
  3169. this.pingTimeoutTimer = null;
  3170. }
  3171. // 启动新的ping超时定时器
  3172. this.pingTimeoutTimer = setTimeout(() => {
  3173. console.warn('心跳超时,触发重连');
  3174. // 清理当前定时器引用
  3175. this.pingTimeoutTimer = null;
  3176. // 增加心跳重试次数
  3177. this.heartBeatRetryCount++;
  3178. // 如果重试次数未达到上限,先尝试重发心跳
  3179. if (this.heartBeatRetryCount < this.maxHeartBeatRetries) {
  3180. console.log(`心跳超时,尝试重发 (${this.heartBeatRetryCount}/${this.maxHeartBeatRetries})`);
  3181. setTimeout(() => this.sendHeartBeat(), 1000);
  3182. } else {
  3183. console.log('心跳重试次数用尽,触发重连');
  3184. this.heartBeatRetryCount = 0;
  3185. this.handleReconnect();
  3186. }
  3187. }, this.pingTimeout);
  3188. },
  3189. stopHeartBeat() {
  3190. if (this.heartBeatTimer) {
  3191. clearInterval(this.heartBeatTimer);
  3192. this.heartBeatTimer = null;
  3193. }
  3194. if (this.pingTimeoutTimer) {
  3195. clearTimeout(this.pingTimeoutTimer);
  3196. this.pingTimeoutTimer = null;
  3197. }
  3198. }, // 封装通用的连接状态校验方法
  3199. isSocketAvailable() {
  3200. // WebSocket readyState:0=CONNECTING, 1=OPEN, 2=CLOSING, 3=CLOSED
  3201. return this.socket && this.isSocketOpen && this.socket.readyState === 1;
  3202. },
  3203. // 处理重连逻辑
  3204. handleReconnect() {
  3205. if (this.isManualClose) {
  3206. console.log('手动关闭连接,不进行重连');
  3207. return;
  3208. }
  3209. // 防止重复重连
  3210. if (this.reconnectTimer) {
  3211. console.log('重连已在进行中,跳过重复重连');
  3212. return;
  3213. }
  3214. this.stopHeartBeat();
  3215. // 检查网络状态
  3216. if (!this.isNetworkAvailable) {
  3217. console.warn('网络不可用,延迟重连');
  3218. this.reconnectTimer = setTimeout(() => {
  3219. this.reconnectTimer = null;
  3220. this.handleReconnect();
  3221. }, 5000);
  3222. return;
  3223. }
  3224. if (this.reconnectCount < this.maxReconnectAttempts) {
  3225. this.reconnectCount++;
  3226. // 指数退避算法:基础延迟 * 2^(重连次数-1) + 随机抖动
  3227. const baseDelay = 1000;
  3228. const exponentialDelay = baseDelay * Math.pow(2, this.reconnectCount - 1);
  3229. const jitter = Math.random() * 1000; // 随机抖动,避免同时重连
  3230. const totalDelay = Math.min(exponentialDelay + jitter, 30000); // 最大30秒
  3231. console.log(`第${this.reconnectCount}次重连,延迟${Math.round(totalDelay)}ms,网络类型:${this.networkType}`);
  3232. this.reconnectTimer = setTimeout(() => {
  3233. this.reconnectTimer = null; // 清理定时器引用
  3234. // 重连前再次检查网络状态和连接状态
  3235. if (this.isNetworkAvailable && !this.isManualClose && !this.isSocketAvailable()) {
  3236. console.log('开始执行重连...');
  3237. this.initSocket();
  3238. } else if (this.isSocketAvailable()) {
  3239. console.log('连接已恢复,取消重连');
  3240. this.reconnectCount = 0; // 重置重连计数
  3241. } else {
  3242. console.warn('重连时网络不可用或已手动关闭');
  3243. this.handleReconnect(); // 递归重试
  3244. }
  3245. }, totalDelay);
  3246. } else {
  3247. console.log(`已达最大重连次数(${this.maxReconnectAttempts}),停止重连`);
  3248. this.showReconnectFailedMessage();
  3249. }
  3250. },
  3251. // 显示重连失败提示
  3252. showReconnectFailedMessage() {
  3253. uni.showToast({
  3254. title: '网络连接异常,请检查网络后重新进入',
  3255. icon: 'none',
  3256. duration: 3000
  3257. });
  3258. },
  3259. // 统一处理连接错误
  3260. handleConnectionError(errorType, error) {
  3261. console.error(`WebSocket ${errorType}:`, error);
  3262. // 根据错误类型进行不同处理
  3263. if (errorType === '连接请求失败') {
  3264. // 连接请求失败,可能是网络问题或服务器问题
  3265. if (!this.isNetworkAvailable) {
  3266. console.warn('网络不可用,等待网络恢复后重连');
  3267. return;
  3268. }
  3269. }
  3270. // 触发重连
  3271. this.handleReconnect();
  3272. },
  3273. // 重置重连状态
  3274. resetReconnectState() {
  3275. this.reconnectCount = 0;
  3276. this.heartBeatRetryCount = 0;
  3277. // 清理重连定时器
  3278. if (this.reconnectTimer) {
  3279. clearTimeout(this.reconnectTimer);
  3280. this.reconnectTimer = null;
  3281. }
  3282. // 重置自适应心跳间隔
  3283. this.adaptiveHeartBeatInterval = this.heartBeatInterval;
  3284. },
  3285. // 初始化网络状态监听
  3286. initNetworkStatusListener() {
  3287. // 获取当前网络状态
  3288. uni.getNetworkType({
  3289. success: (res) => {
  3290. this.networkType = res.networkType;
  3291. this.isNetworkAvailable = res.networkType !== 'none';
  3292. console.log('当前网络类型:', res.networkType);
  3293. }
  3294. });
  3295. // 监听网络状态变化
  3296. uni.onNetworkStatusChange((res) => {
  3297. const oldNetworkType = this.networkType;
  3298. const oldNetworkAvailable = this.isNetworkAvailable;
  3299. this.networkType = res.networkType;
  3300. this.isNetworkAvailable = res.isConnected;
  3301. console.log(`网络状态变化: ${oldNetworkType} -> ${res.networkType}, 连接状态: ${res.isConnected}`);
  3302. // 网络从不可用变为可用时,尝试重连
  3303. if (!oldNetworkAvailable && res.isConnected) {
  3304. console.log('网络恢复,尝试重连WebSocket');
  3305. this.resetReconnectState();
  3306. setTimeout(() => {
  3307. if (!this.isSocketAvailable()) {
  3308. this.initSocket();
  3309. }
  3310. }, 1000);
  3311. }
  3312. // 网络类型变化时,调整心跳策略
  3313. if (oldNetworkType !== res.networkType && res.isConnected) {
  3314. this.adjustHeartBeatForNetworkType(res.networkType);
  3315. }
  3316. // 网络断开时停止心跳
  3317. if (!res.isConnected) {
  3318. console.warn('网络断开,停止心跳');
  3319. this.stopHeartBeat();
  3320. }
  3321. });
  3322. },
  3323. // 根据网络类型调整心跳策略
  3324. adjustHeartBeatForNetworkType(networkType) {
  3325. let newInterval = this.heartBeatInterval;
  3326. switch (networkType) {
  3327. case '2g':
  3328. newInterval = 30000; // 2G网络,30秒间隔
  3329. break;
  3330. case '3g':
  3331. newInterval = 20000; // 3G网络,20秒间隔
  3332. break;
  3333. case '4g':
  3334. case '5g':
  3335. newInterval = 15000; // 4G/5G网络,15秒间隔
  3336. break;
  3337. case 'wifi':
  3338. newInterval = 10000; // WiFi网络,10秒间隔
  3339. break;
  3340. default:
  3341. newInterval = 15000; // 默认15秒
  3342. }
  3343. if (newInterval !== this.adaptiveHeartBeatInterval) {
  3344. this.adaptiveHeartBeatInterval = newInterval;
  3345. console.log(`根据网络类型(${networkType})调整心跳间隔为${newInterval}ms`);
  3346. // 如果当前有心跳在运行,重启心跳以应用新间隔
  3347. if (this.heartBeatTimer && this.isSocketAvailable()) {
  3348. this.startHeartBeat();
  3349. }
  3350. }
  3351. },
  3352. //输入框
  3353. inputFocus() {
  3354. // 立即更新状态,确保UI零延迟响应
  3355. this.isFocus = true;
  3356. this.isKeyboardShow = true;
  3357. this.scrollTop = 9999999
  3358. },
  3359. inputBlur() {
  3360. this.isFocus = false;
  3361. },
  3362. getTimeDifferenceInSeconds(createTimeStr) {
  3363. if (!createTimeStr) return;
  3364. const createTime = new Date(createTimeStr.replace(/-/g, '/'));
  3365. const now = new Date();
  3366. const timeDiffMs = now - createTime;
  3367. const timeDiffSeconds = Math.floor(timeDiffMs / 1000);
  3368. return Math.max(0, timeDiffSeconds);
  3369. },
  3370. // 录播时间点
  3371. onVideoMetaLoaded(e) {
  3372. console.log("录播时间点", e)
  3373. const width = e.detail.width;
  3374. const height = e.detail.height;
  3375. const res = uni.getSystemInfoSync();
  3376. const winH = res.windowHeight;
  3377. const winW = res.windowWidth;
  3378. //横屏
  3379. const wW = (winW / winH) * 100;
  3380. //竖屏
  3381. const wH = (winH / winW) * 100;
  3382. this.videoProgressKey = `videoProgress_${this.liveId}`;
  3383. this.setVideoProgress();
  3384. // 视频加载成功后,启动流量计算
  3385. if (!this.videoLoaded) {
  3386. this.videoLoaded = true;
  3387. // 延迟一下确保数据已加载
  3388. setTimeout(() => {
  3389. this.startTrafficCalculation();
  3390. }, 500);
  3391. }
  3392. },
  3393. setVideoProgress() {
  3394. // 只有录播和回放需要设置进度
  3395. if (this.liveItem.liveType !== 2 && this.liveItem.liveType !== 3) {
  3396. return;
  3397. }
  3398. let currentTime = 0;
  3399. if (this.liveItem.liveType === 2) {
  3400. // 录播:计算当前时间与开始时间的差值,对视频总时长取模
  3401. const diff = this.getTimeDifferenceInSeconds(this.liveItem.startTime);
  3402. if (diff > this.liveItem.duration) {
  3403. const storedProgress = uni.getStorageSync(this.videoProgressKey) || 0;
  3404. currentTime = storedProgress >= this.liveItem.duration ? 0 : storedProgress || 0;
  3405. this.isPlayback = true;
  3406. this.hasPlayback = true;
  3407. } else {
  3408. currentTime = diff % this.liveItem.duration;
  3409. }
  3410. } else if (this.liveItem.liveType === 3) {
  3411. // 回放:从存储中获取进度
  3412. const storedProgress = uni.getStorageSync(this.videoProgressKey);
  3413. currentTime = storedProgress || 0;
  3414. }
  3415. const videoId = `myVideo_${this.liveId}`;
  3416. const videoContext = uni.createVideoContext(videoId, this);
  3417. if (videoContext) {
  3418. videoContext.seek(currentTime);
  3419. }
  3420. },
  3421. // onVideoWaiting(e) {
  3422. // // console.log('视频等待加载', e);
  3423. // if (this.liveItem.liveType == 2) {
  3424. // this.startTrafficCalculation(this.bitrate);
  3425. // } else {
  3426. // let that = this;
  3427. // if (this.trafficInterval) {
  3428. // clearInterval(this.trafficInterval);
  3429. // this.trafficInterval = null;
  3430. // }
  3431. // this.trafficInterval = setInterval(function() {
  3432. // that.getInternetTraffic();
  3433. // }, 10000);
  3434. // }
  3435. // },
  3436. onVideoWaiting(e) {
  3437. // console.log('视频等待加载', e);
  3438. if (this.liveItem.liveType == 2) {
  3439. // 修改这里:不再传入固定码率,而是在方法内部计算
  3440. this.startTrafficCalculation();
  3441. } else {
  3442. let that = this;
  3443. if (this.trafficInterval) {
  3444. clearInterval(this.trafficInterval);
  3445. this.trafficInterval = null;
  3446. }
  3447. this.trafficInterval = setInterval(function() {
  3448. that.getInternetTraffic();
  3449. }, 10000);
  3450. }
  3451. },
  3452. // 视频时间更新
  3453. onVideoTimeUpdate(e) {
  3454. // 获取当前播放时间
  3455. this.videoCurrentTime = e.detail.currentTime;
  3456. // 每隔10秒保存一次进度(避免频繁存储)
  3457. if (Math.floor(this.videoCurrentTime) % 10 === 0) {
  3458. this.saveVideoProgress();
  3459. }
  3460. const diff = this.getTimeDifferenceInSeconds(this.liveItem.startTime)
  3461. if (diff >= this.liveItem.duration) {
  3462. if (!this.hasPlayback) {
  3463. this.generating = true;
  3464. this.pauseVideo();
  3465. setTimeout(() => {
  3466. this.playVideo();
  3467. this.generating = false;
  3468. this.hasPlayback = true;
  3469. }, 180000);
  3470. // this.closeWebSocket(true);
  3471. this.isEnd = true;
  3472. }
  3473. }
  3474. },
  3475. // 视频暂停
  3476. onVideoPause(e) {
  3477. this.stopCountdown();
  3478. if (this.liveItem.liveType === 2) {
  3479. const videoId = `myVideo_${this.liveId}`;
  3480. const videoContext = uni.createVideoContext(videoId, this);
  3481. setTimeout(() => {
  3482. videoContext.play();
  3483. }, 100);
  3484. }
  3485. // 暂停时保存进度
  3486. this.saveVideoProgress();
  3487. },
  3488. // 视频播放
  3489. onVideoPlay(e) {
  3490. this.startCountdown();
  3491. if (this.watchTimeTimer) {
  3492. clearInterval(this.watchTimeTimer);
  3493. this.watchTimeTimer = null;
  3494. this.saveWatchTime();
  3495. console.log("视频开始播放")
  3496. // 立即保存
  3497. }
  3498. },
  3499. // 设置视频当前时间
  3500. // setVideoCurrentTime(time) {
  3501. // if (!time) return;
  3502. // const videoId = `myVideo_${this.liveId}`;
  3503. // const videoContext = uni.createVideoContext(videoId, this);
  3504. // if (videoContext) {
  3505. // videoContext.seek(time);
  3506. // console.log(`设置视频播放位置: ${time}秒`);
  3507. // }
  3508. // },
  3509. // 保存视频进度
  3510. saveVideoProgress() {
  3511. if (this.videoProgressKey) {
  3512. uni.setStorage({
  3513. key: this.videoProgressKey,
  3514. data: this.videoCurrentTime,
  3515. success: () => {},
  3516. fail: (err) => {
  3517. console.error('保存视频进度失败:', err);
  3518. }
  3519. });
  3520. }
  3521. },
  3522. // 点击红包
  3523. onRed() {
  3524. if (!this.liveId) return;
  3525. if (!this.redInfo?.redId) return;
  3526. if (this.redTimer) {
  3527. clearInterval(this.redTimer);
  3528. this.redTimer = null;
  3529. }
  3530. let data = {
  3531. liveId: this.liveId,
  3532. userId: this.userInfo.userId,
  3533. redId: this.redInfo.redId
  3534. };
  3535. liveRed(data).then((res) => {
  3536. this.isShowRed = false;
  3537. this.redCard = res;
  3538. this.isShowRedCard = true;
  3539. },
  3540. (rej) => {}
  3541. );
  3542. },
  3543. //领取优惠券
  3544. onCoupon() {
  3545. if (!this.couponInfo.couponIssueId) return;
  3546. let data = {
  3547. goodsId: this.couponInfo.goodsId,
  3548. couponIssueId: this.couponInfo.couponIssueId,
  3549. liveId: this.liveId
  3550. };
  3551. coupon(data).then((res) => {
  3552. this.isShowCoupon = false;
  3553. if (res.code == 200) {
  3554. uni.showToast({
  3555. title: res.msg,
  3556. icon: 'none'
  3557. });
  3558. } else {
  3559. uni.showToast({
  3560. title: res.msg,
  3561. icon: 'none'
  3562. });
  3563. }
  3564. })
  3565. .catch((rej) => {});
  3566. },
  3567. // 我的中奖名单
  3568. getMyLottery() {
  3569. this.winning = true;
  3570. myLottery()
  3571. .then((res) => {
  3572. if (res.code == 200) {
  3573. // console.log("我的中奖名单", res)
  3574. this.prizeAll = res.data.list || {};
  3575. } else {}
  3576. })
  3577. .catch((rej) => {});
  3578. },
  3579. // 抽奖
  3580. onLottery() {
  3581. if (!this.lotteryInfo) return;
  3582. this.isShowLottery = false
  3583. let data = {
  3584. lotteryId: this.lotteryInfo.lotteryId
  3585. };
  3586. liveLottery(data)
  3587. .then((res) => {
  3588. if (res.code == 200) {
  3589. const resData = res.data || {};
  3590. this.lotteryList = Array.isArray(resData) ? resData : [];
  3591. this.lotteryProducts = Array.isArray(resData.products) ? resData.products : [];
  3592. if (resData.duration) {
  3593. this.isShowLotteryPop = true;
  3594. }
  3595. } else {
  3596. uni.showToast({
  3597. title: res.msg,
  3598. icon: 'none'
  3599. });
  3600. this.lotteryList = [];
  3601. this.lotteryProducts = [];
  3602. }
  3603. })
  3604. .catch((rej) => {
  3605. uni.showToast({
  3606. title: '获取抽奖信息失败',
  3607. icon: 'none'
  3608. });
  3609. // 失败时强制重置为数组
  3610. this.lotteryList = [];
  3611. this.lotteryProducts = [];
  3612. });
  3613. },
  3614. // 参与抽奖
  3615. onClaim() {
  3616. let data = {
  3617. liveId: this.liveId,
  3618. lotteryId: this.lotteryInfo.lotteryId
  3619. };
  3620. claim(data).then(
  3621. (res) => {
  3622. if (res.code == 200) {
  3623. uni.showToast({
  3624. title: res.msg,
  3625. icon: 'none'
  3626. });
  3627. this.isShowLotteryPop = false;
  3628. this.havePrize = true;
  3629. uni.setStorageSync('havePrize', this.havePrize);
  3630. } else {
  3631. uni.showToast({
  3632. title: res.msg,
  3633. icon: 'none'
  3634. });
  3635. }
  3636. },
  3637. (rej) => {}
  3638. );
  3639. },
  3640. confirm() {
  3641. this.isShowPrize = false;
  3642. this.havePrize = false;
  3643. uni.setStorageSync('havePrize', this.havePrize);
  3644. },
  3645. // 商品收藏
  3646. onGoodsCollect(item) {
  3647. if (!item || item.length === 0 || !item.goodsId) {
  3648. return;
  3649. }
  3650. collectGoods(item.goodsId).then(
  3651. (res) => {
  3652. if (res.code == 200) {
  3653. uni.showToast({
  3654. title: res.msg,
  3655. icon: 'none'
  3656. });
  3657. item.isFavorite = !item.isFavorite;
  3658. } else {
  3659. uni.showToast({
  3660. title: res.msg,
  3661. icon: 'none'
  3662. });
  3663. }
  3664. },
  3665. (rej) => {}
  3666. );
  3667. },
  3668. //正在购买
  3669. getliveOrder(item) {
  3670. if (!this.liveId) {
  3671. return;
  3672. }
  3673. liveOrderUser(this.liveId).then(
  3674. (res) => {
  3675. if (res.code == 200) {
  3676. this.orderUser = res;
  3677. } else {
  3678. console.log('获取正在购买用户失败');
  3679. }
  3680. },
  3681. (rej) => {}
  3682. );
  3683. },
  3684. onLiveStateChange(e, liveItem) {
  3685. // 可以根据状态码处理不同的直播状态
  3686. const stateCode = e.detail.code;
  3687. if (e.detail.code == -2301 || e.detail.code == -2302) {
  3688. this.playVideo();
  3689. } else if (e.detail.code == 2004) {
  3690. this.calculateTimeDiff(this.liveItem);
  3691. // this.startTrafficCalculation(this.bitrateLive);
  3692. this.startTrafficCalculation();
  3693. }
  3694. // 2001: 已经连接服务器
  3695. // 2002: 已经连接服务器,开始拉流
  3696. // 2003: 网络接收到首个视频数据包(IDR)
  3697. // 2004: 视频播放开始
  3698. // 2005: 视频播放进度
  3699. // 2006: 视频播放结束
  3700. // 2007: 视频播放Loading
  3701. // 2008: 解码器启动
  3702. // -2301: 网络断连,且经多次重连抢救无效,更多重试请自行重启播放
  3703. // -2302: 获取加速拉流地址失败
  3704. }, // 直播错误事件
  3705. onLiveError(e, liveItem) {
  3706. this.videoError(e, liveItem);
  3707. console.log('错误');
  3708. },
  3709. // 红包 卡片 抽奖
  3710. getCurrentActivities() {
  3711. if (!this.liveId) return;
  3712. currentActivities(this.liveId).then(
  3713. (res) => {
  3714. if (res.code === 200) {
  3715. // 提取数据(默认空数组/对象避免报错)
  3716. this.redInfo = (Array.isArray(res.red) ? res.red : [])[0] || {};
  3717. this.lotteryInfo = (Array.isArray(res.lottery) ? res.lottery : [])[0] || {};
  3718. this.goodsCard = res.goods || {};
  3719. this.notice = res.topMsg || {};
  3720. this.isShowGoods = this.goodsCard && this.goodsCard.status == 1;
  3721. this.isShowRed = this.redInfo && this.redInfo.redStatus == 1;
  3722. this.isShowLottery = this.lotteryInfo && this.lotteryInfo.lotteryStatus == 1;
  3723. if (this.notice.msg) {
  3724. this.noticeTimer = setInterval(() => {
  3725. const noticeCountdown = this.handleTime(this.notice.endTime, 0);
  3726. if (!noticeCountdown) {
  3727. this.isShowNotice = false;
  3728. clearInterval(this.noticeTimer);
  3729. } else {
  3730. this.isShowNotice = true
  3731. }
  3732. }, 1000);
  3733. }
  3734. // if(this.notice.msg&&this.notice){
  3735. // this.isShowNotice = true
  3736. // }else{
  3737. // this.isShowNotice = false
  3738. // }
  3739. if (this.isShowRed) {
  3740. this.redTimer = setInterval(() => {
  3741. const redCountdown = this.handleTime(this.redInfo.updateTime, this.redInfo
  3742. .duration);
  3743. if (!redCountdown) {
  3744. this.isShowRed = false;
  3745. clearInterval(this.redTimer);
  3746. }
  3747. }, 1000);
  3748. }
  3749. // 处理抽奖定时器
  3750. if (this.isShowLottery) {
  3751. this.lotteryTimer = setInterval(() => {
  3752. this.countdown = this.handleTime(this.lotteryInfo.updateTime, this
  3753. .lotteryInfo.duration);
  3754. }, 1000);
  3755. }
  3756. } else {
  3757. uni.showToast({
  3758. title: res.msg,
  3759. icon: 'none'
  3760. });
  3761. }
  3762. },
  3763. (rej) => {}
  3764. );
  3765. },
  3766. // 计算当前时间与 liveItem.startTime 的差值,并更新 totalTime
  3767. calculateTimeDiff(item) {
  3768. if (!item.startTime) return;
  3769. // 提取对应场景的时间字符串(直播用startTime,抽奖用updateTime)
  3770. let timeStr = item.startTime;
  3771. // 转换时间格式(适配iOS,将 "-" 替换为 "/")
  3772. const time = new Date(timeStr.replace(/-/g, '/'));
  3773. if (isNaN(time.getTime())) {
  3774. return;
  3775. }
  3776. const now = new Date();
  3777. let diffMs = Math.max(0, now.getTime() - time.getTime());
  3778. // 转换为 时:分:秒(补零处理)
  3779. const totalSeconds = Math.floor(diffMs / 1000);
  3780. const hours = this.padZero(Math.floor(totalSeconds / 3600));
  3781. const minutes = this.padZero(Math.floor((totalSeconds % 3600) / 60));
  3782. const seconds = this.padZero(totalSeconds % 60);
  3783. this.diffTotalTime = `${hours}:${minutes}:${seconds}`;
  3784. },
  3785. padZero(num) {
  3786. return num < 10 ? `0${num}` : num;
  3787. },
  3788. // 启动当前直播间的时间差值定时器
  3789. startTimeTimer(item) {
  3790. if (!item) return;
  3791. // 立即计算一次(避免等待1秒才显示)
  3792. const totalTime = this.calculateTimeDiff(item);
  3793. item.timeTimer = setInterval(() => {
  3794. const totalTime = this.calculateTimeDiff(item);
  3795. }, 1000);
  3796. },
  3797. // toggleViewerList() {
  3798. // const now = Date.now();
  3799. // if (now - this.lastClickTime > this.clickDelay) {
  3800. // this.showadd = !this.showadd;
  3801. // if (this.showadd) {
  3802. // this.getliveUser(false); // 加载第一页观众
  3803. // }
  3804. // this.lastClickTime = now;
  3805. // }
  3806. // },
  3807. // 播放视频
  3808. playVideo() {
  3809. if (!this.liveItem) {
  3810. console.log('liveItem 为空,无法播放视频');
  3811. return;
  3812. }
  3813. try {
  3814. if (this.liveItem.liveType === 1 && this.liveItem.livingUrl && this.liveItem.status == 2) {
  3815. } else if (this.liveItem.status == 1 && this.liveItem.previewUrl) {
  3816. const videoId = `myVideo_${this.liveId}`;
  3817. const videoContext = uni.createVideoContext(videoId, this);
  3818. if (videoContext) {
  3819. videoContext.play();
  3820. }
  3821. } else if (this.liveItem.liveType === 2 && this.liveItem.videoUrl && this.liveItem.status == 2) {
  3822. const videoId = `myVideo_${this.liveId}`;
  3823. const videoContext = uni.createVideoContext(videoId, this);
  3824. // console.log("录播")
  3825. if (videoContext) {
  3826. videoContext.play();
  3827. }
  3828. } // 回放视频使用video
  3829. else if (this.liveItem.liveType === 3 && this.liveItem.videoUrl && this.liveItem.status == 4) {
  3830. const videoId = `myVideo_${this.liveId}`;
  3831. const videoContext = uni.createVideoContext(videoId, this);
  3832. // console.log("回放")
  3833. if (videoContext) {
  3834. videoContext.play();
  3835. }
  3836. }
  3837. } catch (error) {
  3838. console.error('播放视频失败:', error);
  3839. }
  3840. },
  3841. pauseVideo() {
  3842. if (!this.liveItem) return;
  3843. try {
  3844. if (this.liveItem.status == 1) {
  3845. const videoId = `myVideo_${this.liveId}`;
  3846. const videoContext = uni.createVideoContext(videoId, this);
  3847. if (videoContext) {
  3848. videoContext.pause();
  3849. }
  3850. } else if (this.liveItem.status == 2) {
  3851. if (this.liveItem.liveType === 1) {
  3852. const livePlayerId = `myLivePlayer_${this.liveId}`;
  3853. const livePlayerContext = uni.createLivePlayerContext(livePlayerId, this);
  3854. if (livePlayerContext) {
  3855. livePlayerContext.pause();
  3856. }
  3857. } else if (this.liveItem.liveType === 2) {
  3858. const videoId = `myVideo_${this.liveId}`;
  3859. const videoContext = uni.createVideoContext(videoId, this);
  3860. if (videoContext) {
  3861. videoContext.pause();
  3862. }
  3863. }
  3864. }
  3865. } catch (error) {
  3866. console.error('暂停视频失败:', error);
  3867. }
  3868. },
  3869. // 视频错误处理
  3870. videoError(e, liveItem) {
  3871. if (!liveItem || !this.liveId) return;
  3872. // 初始化重试计数
  3873. if (this.videoRetryCounts[liveItem.liveId] === undefined) {
  3874. this.videoRetryCounts[liveItem.liveId] = 0;
  3875. }
  3876. // 限制重试次数
  3877. if (this.videoRetryCounts[liveItem.liveId] >= 3) {
  3878. console.error(`直播间 ${this.liveId} 视频加载失败,停止重试`);
  3879. // 显示错误提示
  3880. uni.showToast({
  3881. title: '视频加载失败,请检查网络',
  3882. icon: 'none',
  3883. duration: 2000
  3884. });
  3885. return;
  3886. }
  3887. this.videoRetryCounts[this.liveId]++;
  3888. // 延迟重试
  3889. setTimeout(() => {
  3890. if (this.liveId === this.liveId) {
  3891. console.log(`第${this.videoRetryCounts[this.liveId]}次重试播放视频`);
  3892. this.playVideo();
  3893. }
  3894. }, 2000);
  3895. },
  3896. openViews() {
  3897. // 计算scroll-view高度
  3898. this.$nextTick(() => {
  3899. const query = uni.createSelectorQuery().in(this);
  3900. query
  3901. .select('.view-box')
  3902. .boundingClientRect((data) => {
  3903. if (data) {
  3904. this.scrollHeight = data.height - 80; // 80是标题高度,120是底部高度
  3905. }
  3906. })
  3907. .exec();
  3908. });
  3909. },
  3910. // 滚动到底部触发
  3911. handleScrollToLower() {
  3912. // 清除上一次未执行的定时器,避免重复请求
  3913. if (this.scrollTimer) {
  3914. clearTimeout(this.scrollTimer);
  3915. }
  3916. // 延迟1秒执行接口请求
  3917. this.scrollTimer = setTimeout(() => {
  3918. this.getliveUser(true);
  3919. }, 1000);
  3920. },
  3921. async getMyLiveMsg(liveItem) {
  3922. console.log("不可见了")
  3923. if (!liveItem || !this.liveId) {
  3924. console.error('getLiveMsg 错误:无效的 liveItem');
  3925. return;
  3926. }
  3927. try {
  3928. const res = await myLiveMsg(this.liveId, 30, 1);
  3929. if (res.code == 200) {
  3930. const rows = Array.isArray(res.rows) ? res.rows : [];
  3931. const reversedTalkList = [...rows].reverse();
  3932. this.talklist = Array.isArray(reversedTalkList) ? reversedTalkList : [];
  3933. // 获取历史消息后也滚动到底部
  3934. this.$nextTick(() => {
  3935. this.scrollToBottom();
  3936. });
  3937. } else {
  3938. this.talklist = [];
  3939. }
  3940. } catch (error) {
  3941. this.talklist = [];
  3942. console.error('获取聊天记录失败:', error);
  3943. }
  3944. },
  3945. async getLiveMsg(liveItem) {
  3946. if (!liveItem || !this.liveId) {
  3947. console.error('getLiveMsg 错误:无效的 liveItem');
  3948. return;
  3949. }
  3950. try {
  3951. const res = await liveMsg(this.liveId, 30, 1);
  3952. if (res.code == 200) {
  3953. const rows = Array.isArray(res.rows) ? res.rows : [];
  3954. const reversedTalkList = [...rows].reverse();
  3955. this.talklist = Array.isArray(reversedTalkList) ? reversedTalkList : [];
  3956. // 获取历史消息后也滚动到底部
  3957. this.$nextTick(() => {
  3958. this.scrollToBottom();
  3959. });
  3960. } else {
  3961. this.talklist = [];
  3962. }
  3963. } catch (error) {
  3964. this.talklist = [];
  3965. console.error('获取聊天记录失败:', error);
  3966. }
  3967. },
  3968. // 获取直播间用户
  3969. // async getliveUser(isLoadMore = false) {
  3970. // this.viewLoading = true;
  3971. // try {
  3972. // const res = await watchUserList(this.liveId, this.viewPageSize, this.viewPageNum, false);
  3973. // console.log("getliveUser", res);
  3974. // if (res.code === 200) {
  3975. // const userRows = Array.isArray(res.rows) ? res.rows : [];
  3976. // let array = userRows.map((item) => ({
  3977. // avatar: item.avatar || '',
  3978. // userId: item.userId || '',
  3979. // nickName: item.nickName || '未命名'
  3980. // }));
  3981. // // 虚拟数据
  3982. // let virtualData = [];
  3983. // let virtualTotal = res.total * 10;
  3984. // this.liveUserTotal = virtualTotal;
  3985. // for (let i = 0; i < virtualTotal; i++) {
  3986. // let data = {
  3987. // avatar: '',
  3988. // userId: '8565' + i,
  3989. // nickName: '微信用户'
  3990. // };
  3991. // virtualData.push(data);
  3992. // }
  3993. // this.liveViewersData = [...array, ...virtualData];
  3994. // const newRows = Array.isArray(res.rows) ? res.rows : [];
  3995. // const currentViewers = Array.isArray(this.liveViewers) ? this.liveViewers : [];
  3996. // let viewlist = isLoadMore ? [...currentViewers, ...newRows] : newRows;
  3997. // this.liveViewers = [...viewlist, ...virtualData];
  3998. // this.viewPageNum++;
  3999. // }
  4000. // } catch (error) {
  4001. // console.error('获取观众列表失败:', error);
  4002. // } finally {
  4003. // this.viewLoading = false;
  4004. // }
  4005. // },
  4006. //小黄车搜索商品
  4007. handleSearchInput() {
  4008. // 使用防抖优化性能,避免频繁请求
  4009. clearTimeout(this.searchTimer);
  4010. this.searchTimer = setTimeout(() => {
  4011. this.queryCollect();
  4012. }, 500); // 500毫秒延迟
  4013. },
  4014. // 显示购买提示信息
  4015. showPurchaseMessage() {
  4016. // 清除之前的定时器
  4017. if (this.purchasePromptTimer) {
  4018. clearTimeout(this.purchasePromptTimer);
  4019. }
  4020. // 显示提示
  4021. this.showPurchasePrompt = true;
  4022. // 2秒后自动隐藏
  4023. this.purchasePromptTimer = setTimeout(() => {
  4024. this.showPurchasePrompt = false;
  4025. }, 2000);
  4026. },
  4027. //名字超过省略
  4028. truncateString(str, maxLength) {
  4029. if (typeof str !== 'string' || str.length <= maxLength) {
  4030. return str;
  4031. }
  4032. return str.slice(0, maxLength) + '...'; // 截断后加省略号
  4033. },
  4034. // 跳转页面
  4035. navgetTo(url) {
  4036. uni.navigateTo({
  4037. url: url
  4038. });
  4039. },
  4040. // 修改获取直播信息方法
  4041. async getliving(liveId) {
  4042. if (!liveId) return;
  4043. // 防止重复请求
  4044. if (this.isLoadingLiveInfo) {
  4045. console.log('正在加载直播间信息,跳过重复请求');
  4046. return;
  4047. }
  4048. this.isLoadingLiveInfo = true;
  4049. const param = {
  4050. id: liveId
  4051. };
  4052. try {
  4053. const res = await getlive(param);
  4054. this.isLoadingLiveInfo = false;
  4055. if (res.code !== 200) {
  4056. uni.showToast({
  4057. title: res.msg,
  4058. icon: 'none'
  4059. });
  4060. return;
  4061. }
  4062. this.liveItem = Object.assign({}, this.liveItem, res.data);
  4063. // 在获取到直播数据后初始化倒计时
  4064. this.$nextTick(() => {
  4065. this.initCountdown();
  4066. });
  4067. if (res.data.globalVisible || res.data.singleVisible) {
  4068. this.myselfFlag = true;
  4069. }
  4070. // this.talklist = Array.isArray((res.data || {}).talklist) ? res.data.talklist : [];
  4071. this.startTimeTimer(this.liveItem);
  4072. // 清除旧定时器(如预告倒计时)
  4073. if (this.liveStartTimer) {
  4074. clearInterval(this.liveStartTimer);
  4075. this.liveStartTimer = null;
  4076. }
  4077. if (res.data.status == 1) {
  4078. // 直播预告
  4079. this.liveStartTimer = setInterval(async () => {
  4080. this.liveCountdown = this.handleTime(res.data.startTime, 0);
  4081. if (!this.liveCountdown) {
  4082. uni.removeStorageSync('isAgreement');
  4083. await this.getliving(this.liveId);
  4084. clearInterval(this.liveStartTimer);
  4085. }
  4086. }, 1000);
  4087. this.$set(this.liveItem, 'previewUrl', res.data.previewUrl);
  4088. this.$set(this.liveItem, 'livingUrl', ''); // 清空直播流
  4089. this.$set(this.liveItem, 'videoUrl', ''); // 清空回放视频
  4090. } else if (res.data.status == 2) {
  4091. if (res.data.liveType == 1) {
  4092. // 直播流
  4093. let cTime = Math.floor(Math.random() * 10000) + 1;
  4094. let livingUrl = res.data.flvHlsUrl + '&t=' + cTime;
  4095. console.log('地址在', this.liveItem.livingUrl);
  4096. this.$set(this.liveItem, 'livingUrl', livingUrl);
  4097. this.$set(this.liveItem, 'videoUrl', ''); // 清空回放视频
  4098. } else if (res.data.liveType === 2) {
  4099. // 回放视频 2录播 3直播回放
  4100. // let urlStr = 'https://fs-1319721001.cos.ap-chongqing.myqcloud.com/10%E6%9C%8820%E6%97%A5%20%281%29.m3u8'
  4101. // this.$set(this.liveItem, 'videoUrl', urlStr);
  4102. this.$set(this.liveItem, 'videoUrl', res.data.videoUrl);
  4103. this.$set(this.liveItem, 'livingUrl', '');
  4104. }
  4105. } else if (res.data.status == 4 && res.data.liveType == 3) {
  4106. this.$set(this.liveItem, 'videoUrl', res.data.videoUrl);
  4107. this.$set(this.liveItem, 'livingUrl', '');
  4108. } else {
  4109. // 未开播
  4110. this.$set(this.liveItem, 'livingUrl', '');
  4111. this.$set(this.liveItem, 'videoUrl', '');
  4112. }
  4113. this.$set(this.liveItem, 'autoplay', res.data.liveType !== 0);
  4114. this.$set(this.liveItem, 'showType', res.data.showType);
  4115. this.storeId = res.storeId;
  4116. this.startLiveViewDataTimer();
  4117. // 初始化观看时间统计
  4118. this.initWatchTime();
  4119. const diff = this.getTimeDifferenceInSeconds(this.liveItem.startTime)
  4120. if (diff >= this.liveItem.duration) {
  4121. const diffTime = diff - this.liveItem.duration
  4122. if (diffTime < 180) {
  4123. this.generating = true;
  4124. // 计算剩余等待时间
  4125. const remainingTime = Math.max(0, 180 - diffTime) * 1000;
  4126. if (this.generatingTimer) {
  4127. clearTimeout(this.generatingTimer);
  4128. }
  4129. this.generatingTimer = setTimeout(() => {
  4130. this.generating = false;
  4131. this.hasPlayback = true;
  4132. this.playVideo();
  4133. this.closeWebSocket(true);
  4134. this.isEnd = true;
  4135. }, remainingTime);
  4136. } else {
  4137. // 已经超过18秒,应该直接播放
  4138. this.generating = false;
  4139. this.hasPlayback = true;
  4140. this.playVideo();
  4141. this.closeWebSocket(true);
  4142. this.isEnd = true;
  4143. }
  4144. } else {
  4145. // 直播还未结束,正常播放
  4146. this.playVideo();
  4147. }
  4148. } catch (err) {
  4149. this.isLoadingLiveInfo = false;
  4150. console.error('获取直播信息失败:', err);
  4151. uni.showToast({
  4152. title: '获取直播信息失败',
  4153. icon: 'none'
  4154. });
  4155. }
  4156. },
  4157. getPureDecimal(num, precision = 6) {
  4158. const decimalPart = Math.abs(num).toFixed(precision).split('.')[1];
  4159. return decimalPart?.replace(/0+$/, '') || ''; // 移除末尾多余的0
  4160. },
  4161. goBack() {
  4162. // 暂停当前视频
  4163. if (this.liveItem) {
  4164. this.pauseVideo();
  4165. }
  4166. // 关闭WebSocket连接
  4167. this.closeWebSocket(true);
  4168. // 导航返回
  4169. // const pages = getCurrentPages();
  4170. // if (pages.length > 1) {
  4171. // uni.navigateBack();
  4172. // } else {
  4173. // uni.reLaunch({
  4174. // url: '/pages_course/livingList'
  4175. // });
  4176. // }
  4177. const pages = getCurrentPages();
  4178. uni.reLaunch({
  4179. url: '/pages/home/index'
  4180. });
  4181. },
  4182. // 点赞
  4183. async onLike() {
  4184. if (!this.liveId) return;
  4185. try {
  4186. const res = await liveDataLike(this.liveId);
  4187. if (res?.like) {
  4188. this.liveViewData.like++; //只更新当前直播间的点赞数
  4189. } else {
  4190. uni.showToast({
  4191. title: res.msg,
  4192. icon: 'none'
  4193. });
  4194. }
  4195. } catch (error) {
  4196. console.error('点赞失败:', error);
  4197. }
  4198. },
  4199. //直播间点赞、关注、在线人数数据
  4200. getliveViewData() {
  4201. if (!this.liveId) return;
  4202. // 使用 Promise 包装,支持 await
  4203. return getLiveViewData(this.liveId).then((res) => {
  4204. if (res.code == 200) {
  4205. // 强制响应式更新,确保数据实时显示
  4206. this.liveViewData = res;
  4207. }
  4208. return res;
  4209. }).catch((error) => {
  4210. console.error('获取直播间数据失败:', error);
  4211. // 失败时兜底,避免显示异常
  4212. this.liveViewData = {
  4213. like: 0,
  4214. watchCount: 0
  4215. };
  4216. throw error;
  4217. });
  4218. },
  4219. // 30秒刷新一下直播间点赞数
  4220. startLiveViewDataTimer() {
  4221. // 先清除旧定时器(防止重复创建)
  4222. if (this.liveViewDataTimer) {
  4223. clearInterval(this.liveViewDataTimer);
  4224. this.liveViewDataTimer = null;
  4225. }
  4226. this.getliveViewData();
  4227. this.liveViewDataTimer = setInterval(() => {
  4228. // 安全校验:确保liveItem和liveId存在(避免无效请求)
  4229. if (this.liveId) {
  4230. this.getliveViewData();
  4231. }
  4232. }, 20000);
  4233. },
  4234. // 去购买,跳商品详情
  4235. goShop(productId, goodsId) {
  4236. if (!this.liveId) return;
  4237. uni.navigateTo({
  4238. url: '/pages_shopping/live/goods?productId=' + productId + '&liveId=' + this
  4239. .liveId +
  4240. '&goodsId=' + goodsId + '&storeId=' + this.storeId
  4241. });
  4242. },
  4243. // 查询店铺
  4244. async queryCollect() {
  4245. this.loadingProducts = true;
  4246. if (!this.liveId) return;
  4247. if (this.inputInfo == null) this.inputInfo = '';
  4248. uni.showLoading({
  4249. title: '加载中'
  4250. });
  4251. try {
  4252. const res = await liveStore(this.liveId, this.inputInfo);
  4253. uni.hideLoading();
  4254. this.shopping = true;
  4255. if (res.code === 200) {
  4256. // 数据绑定到当前 liveItem,避免全局污染
  4257. this.products = Array.isArray(res.data) ? res.data : [];
  4258. }
  4259. } catch (error) {
  4260. console.error('获取小黄车商品失败:', error);
  4261. } finally {
  4262. this.loadingProducts = false;
  4263. }
  4264. },
  4265. // 时间戳
  4266. initTime() {
  4267. const now = new Date();
  4268. this.timestamp = now.getTime();
  4269. },
  4270. openCart() {
  4271. this.queryCollect();
  4272. },
  4273. close() {
  4274. this.showadd = false;
  4275. },
  4276. // 关闭小黄车
  4277. closeShop() {
  4278. this.shopping = false;
  4279. },
  4280. closeMore() {
  4281. this.isMore = false;
  4282. },
  4283. closeWin() {
  4284. this.winning = false;
  4285. },
  4286. // 关闭WebSocket连接(isManual:是否手动关闭)
  4287. closeWebSocket(isManual = true) {
  4288. if (!this.socket || !this.isSocketOpen) {
  4289. // console.warn('WebSocket 任务不存在或未打开,无需关闭');
  4290. return;
  4291. }
  4292. console.log(`WebSocket连接关闭 - ${isManual ? '手动' : '自动'}`);
  4293. this.isManualClose = isManual;
  4294. // 清理所有定时器和状态
  4295. this.cleanupAllResources();
  4296. try {
  4297. // 先保存引用,避免在关闭过程中被置为null
  4298. const socketToClose = this.socket;
  4299. this.socket = null;
  4300. this.isSocketOpen = false;
  4301. this.isConnecting = false;
  4302. socketToClose.close({
  4303. code: 1000,
  4304. reason: isManual ? '主动关闭' : '异常关闭'
  4305. });
  4306. console.log('WebSocket连接已发起关闭');
  4307. } catch (err) {
  4308. console.error('关闭WebSocket失败:', err);
  4309. // 即使关闭失败,也要重置状态
  4310. this.socket = null;
  4311. this.isSocketOpen = false;
  4312. this.isConnecting = false;
  4313. }
  4314. },
  4315. // 清理所有资源
  4316. cleanupAllResources() {
  4317. // 停止心跳相关
  4318. this.stopHeartBeat();
  4319. // 清理ping超时定时器
  4320. if (this.pingTimeoutTimer) {
  4321. clearTimeout(this.pingTimeoutTimer);
  4322. this.pingTimeoutTimer = null;
  4323. }
  4324. // 清理网络状态定时器
  4325. if (this.networkStatusTimer) {
  4326. clearTimeout(this.networkStatusTimer);
  4327. this.networkStatusTimer = null;
  4328. }
  4329. // 重置重连状态
  4330. this.resetReconnectState();
  4331. // 重置心跳相关状态
  4332. this.heartBeatRetryCount = 0;
  4333. this.lastHeartBeatTime = 0;
  4334. this.adaptiveHeartBeatInterval = this.heartBeatInterval;
  4335. },
  4336. startHeartBeat() {
  4337. this.stopHeartBeat(); // 先停止现有心跳,防止重复
  4338. // 使用自适应间隔循环发送心跳
  4339. this.heartBeatTimer = setInterval(() => {
  4340. this.sendHeartBeat();
  4341. }, this.adaptiveHeartBeatInterval);
  4342. },
  4343. initSocket() {
  4344. // 检查是否正在连接中
  4345. if (this.isConnecting) {
  4346. console.log('WebSocket正在连接中,跳过重复连接');
  4347. return;
  4348. }
  4349. // 检查网络状态
  4350. if (!this.isNetworkAvailable) {
  4351. console.warn('网络不可用,延迟WebSocket连接');
  4352. // 使用定时器而不是递归调用,避免内存泄漏
  4353. if (!this.networkRetryTimer) {
  4354. this.networkRetryTimer = setTimeout(() => {
  4355. this.networkRetryTimer = null;
  4356. this.initSocket();
  4357. }, 3000);
  4358. }
  4359. return;
  4360. }
  4361. // 如果已经存在连接且状态为open,则退出
  4362. if (this.socket && this.socket.readyState === 1) {
  4363. console.log('WebSocket连接已存在且正常,无需重新连接');
  4364. // 重置重连计数
  4365. this.reconnectCount = 0;
  4366. return;
  4367. }
  4368. // 关闭现有连接
  4369. if (this.socket && (this.socket.readyState === 0 || this.socket.readyState === 1)) {
  4370. console.log('关闭现有WebSocket连接,创建新连接');
  4371. this.closeWebSocket(false); // 非手动关闭
  4372. // 等待一小段时间确保连接完全关闭
  4373. setTimeout(() => {
  4374. this.createWebSocketConnection();
  4375. }, 100);
  4376. return;
  4377. }
  4378. this.createWebSocketConnection();
  4379. },
  4380. createWebSocketConnection() {
  4381. // 校验必要参数
  4382. if (!this.liveId) {
  4383. console.error('缺失直播间ID,无法初始化WebSocket');
  4384. return;
  4385. }
  4386. if (!this.userInfo || !this.userInfo.userId) {
  4387. console.error('用户信息缺失,无法初始化WebSocket');
  4388. return;
  4389. }
  4390. // 设置连接状态
  4391. this.isConnecting = true;
  4392. this.isSocketOpen = false;
  4393. // 记录连接开始时间(性能监控)
  4394. this.connectionStartTime = Date.now();
  4395. // 清除之前的重连定时器
  4396. this.resetReconnectState();
  4397. const now = new Date();
  4398. this.timestamp = now.getTime(); // 生成签名
  4399. const signature = CryptoJS.HmacSHA256(
  4400. `${this.liveId}${this.userInfo.userId}${this.userType}${this.timestamp}`, this
  4401. .timestamp.toString()
  4402. ).toString(CryptoJS.enc.Hex);
  4403. try {
  4404. const baseWsUrl = 'wss://ws.klbycp.com/ws/app/webSocket';
  4405. // const baseWsUrl = 'wss://api.fhhx.runtzh.com/ws/app/webSocket';
  4406. // const baseWsUrl = 'ws://d6998672.natappfree.cc/ws/app/webSocket';
  4407. // const baseWsUrl = 'ws://nd967d83.natappfree.cc/ws/app/webSocket';
  4408. let wsUrl =
  4409. `${baseWsUrl}?userId=${this.userInfo.userId}&liveId=${this.liveId}&userType=${this.userType}&timestamp=${this.timestamp}&signature=${signature}`;
  4410. // let wsUrl =
  4411. // 'ws://q96d9752.natappfree.cc/ws/app/webSocket?liveId=128&userId=9769&userType=1&timestamp=1762501143712&signature=0498c66c3fca64ab009586200c04d51312ce44e36d5639e99b22e34f3bac8d13';
  4412. if (this.qrFrom) {
  4413. wsUrl += this.qrFrom;
  4414. }
  4415. // if(this.address){
  4416. // console.log("this.address是什么>>>", this.address)
  4417. wsUrl += `&location=${this.address}`;
  4418. // wsUrl += `&location=${encodeURIComponent(liveWatchUser)}`;
  4419. // }
  4420. console.log("qxj wsUrl", wsUrl);
  4421. console.log(`尝试连接WebSocket: ${wsUrl.replace(/signature=[^&]+/, 'signature=***')}`);
  4422. const socketTask = uni.connectSocket({
  4423. url: wsUrl,
  4424. success: () => {
  4425. console.log("WebSocket连接请求发送成功");
  4426. },
  4427. fail: (err) => {
  4428. console.error('WebSocket连接请求失败:', err);
  4429. this.isConnecting = false;
  4430. this.handleConnectionError('连接请求失败', err);
  4431. }
  4432. });
  4433. // 连接打开事件
  4434. socketTask.onOpen((res) => {
  4435. console.log("WebSocket连接已打开");
  4436. this.socket = socketTask;
  4437. this.isConnecting = false;
  4438. this.isSocketOpen = true;
  4439. // 计算连接延迟(性能监控)
  4440. if (this.connectionStartTime > 0) {
  4441. this.connectionLatency = Date.now() - this.connectionStartTime;
  4442. console.log(`WebSocket连接延迟: ${this.connectionLatency}ms`);
  4443. }
  4444. this.reconnectCount = 0;
  4445. this.resetReconnectState();
  4446. this.heartBeatRetryCount = 0; // 重置心跳重试次数
  4447. this.shownEntryUsers.clear(); // 重连后重置进入提示记录
  4448. // 连接成功后显示提示(仅首次连接)
  4449. if (this.reconnectCount === 0) {
  4450. console.log('WebSocket连接建立成功');
  4451. } else {
  4452. console.log(`WebSocket重连成功(第${this.reconnectCount}次尝试)`);
  4453. }
  4454. this.startHeartBeat();
  4455. // 启动观看时长统计
  4456. this.startWatchDurationTracking();
  4457. });
  4458. // 消息接收事件
  4459. socketTask.onMessage((res) => {
  4460. // 消息计数(性能监控)
  4461. this.messageCount++;
  4462. try {
  4463. //console.log("qxj onMessage handleSocketMessage",res);
  4464. const data = JSON.parse(res.data);
  4465. // 处理服务端心跳响应 - 修复:后端返回的是heartBeat而不是heartBeatAck
  4466. if (!!data.data && data.data.cmd === 'heartbeat') {
  4467. // console.log('收到心跳响应:', data.data);
  4468. // 清除ping超时定时器
  4469. if (this.pingTimeoutTimer) {
  4470. clearTimeout(this.pingTimeoutTimer);
  4471. this.pingTimeoutTimer = null;
  4472. }
  4473. // 重置心跳重试次数
  4474. this.heartBeatRetryCount = 0;
  4475. // 更新网络状态为良好
  4476. this.adjustHeartBeatInterval(true);
  4477. return;
  4478. }
  4479. this.handleSocketMessage(res);
  4480. } catch (err) {
  4481. console.error('消息解析异常:', err);
  4482. this.errorCount++; // 错误计数
  4483. }
  4484. });
  4485. // 连接错误事件
  4486. socketTask.onError((err) => {
  4487. console.error('WebSocket连接错误:', err);
  4488. this.errorCount++; // 错误计数
  4489. this.isSocketOpen = false;
  4490. this.isConnecting = false;
  4491. this.stopHeartBeat();
  4492. this.handleConnectionError('连接错误', err);
  4493. });
  4494. // 连接关闭事件
  4495. socketTask.onClose((res) => {
  4496. console.log('WebSocket连接关闭:', res);
  4497. this.isSocketOpen = false;
  4498. this.isConnecting = false;
  4499. this.stopHeartBeat(); // 清除心跳定时器
  4500. // 暂停观看时长统计
  4501. this.pauseWatchDurationTracking();
  4502. // 根据关闭原因决定是否重连
  4503. if (!this.isManualClose) {
  4504. if (res.code === 1000) {
  4505. console.log('WebSocket正常关闭,不进行重连');
  4506. } else {
  4507. console.warn(
  4508. `WebSocket异常关闭 (code: ${res.code}, reason: ${res.reason})`);
  4509. this.handleReconnect();
  4510. }
  4511. } else {
  4512. console.log('WebSocket手动关闭,不进行重连');
  4513. }
  4514. });
  4515. } catch (e) {
  4516. console.error('创建WebSocket异常:', e);
  4517. this.handleReconnect();
  4518. }
  4519. },
  4520. handleTime(time, duration) {
  4521. let timeStamp;
  4522. if (typeof time === 'number' && time > 0 && time < 9999999999999) {
  4523. timeStamp = time;
  4524. } else if (typeof time === 'string' && time.trim() !== '') {
  4525. // 手动解析 CST 时间字符串
  4526. const match = time.match(
  4527. /^(\w{3}) (\w{3}) (\d{1,2}) (\d{1,2}):(\d{2}):(\d{2}) CST (\d{4})$/);
  4528. if (match) {
  4529. const [, day, month, date, hours, minutes, seconds, year] = match;
  4530. // 月份映射
  4531. const monthMap = {
  4532. 'Jan': 0,
  4533. 'Feb': 1,
  4534. 'Mar': 2,
  4535. 'Apr': 3,
  4536. 'May': 4,
  4537. 'Jun': 5,
  4538. 'Jul': 6,
  4539. 'Aug': 7,
  4540. 'Sep': 8,
  4541. 'Oct': 9,
  4542. 'Nov': 10,
  4543. 'Dec': 11
  4544. };
  4545. // 创建日期对象(CST 是 UTC+8,与中国时区一致)
  4546. const jsDate = new Date(
  4547. parseInt(year),
  4548. monthMap[month],
  4549. parseInt(date),
  4550. parseInt(hours),
  4551. parseInt(minutes),
  4552. parseInt(seconds)
  4553. );
  4554. timeStamp = jsDate.getTime();
  4555. } else {
  4556. // 如果不是预期格式,回退到普通解析
  4557. const date = new Date(time);
  4558. if (!isNaN(date.getTime())) {
  4559. timeStamp = date.getTime();
  4560. } else {
  4561. console.error('无效的日期格式:', time);
  4562. return false;
  4563. }
  4564. }
  4565. } else {
  4566. console.error('time参数必须是有效的时间戳(数字)或日期字符串');
  4567. return false;
  4568. }
  4569. const targetTimestamp = timeStamp + duration * 60 * 1000;
  4570. const currentTimestamp = Date.now();
  4571. const timeDiffMs = targetTimestamp - currentTimestamp;
  4572. if (timeDiffMs <= 0) {
  4573. return false;
  4574. }
  4575. const hours = Math.floor(timeDiffMs / (1000 * 60 * 60));
  4576. const minutes = Math.floor((timeDiffMs % (1000 * 60 * 60)) / (1000 * 60));
  4577. const seconds = Math.floor((timeDiffMs % (1000 * 60)) / 1000);
  4578. const formatNum = (num) => num.toString().padStart(2, '0');
  4579. return {
  4580. hours: formatNum(hours),
  4581. minutes: formatNum(minutes),
  4582. seconds: formatNum(seconds)
  4583. };
  4584. },
  4585. // 限制聊天消息数量,防止内存泄漏
  4586. addToTalkList(message) {
  4587. // console.log("修改后的message>>", message)
  4588. // 减少最大消息数量,提升iPhone性能
  4589. const MAX_TALK_ITEMS = 30;
  4590. // 直接操作数组,避免创建新数组
  4591. if (!Array.isArray(this.talklist)) {
  4592. this.talklist = [];
  4593. }
  4594. const wasAtLimit = this.talklist.length >= MAX_TALK_ITEMS;
  4595. //console.log(`添加消息前: 当前消息数量=${this.talklist.length}, 是否达到限制=${wasAtLimit}`);
  4596. // 检查是否是自己发送的消息
  4597. const isMyMessage = message.userId === this.userInfo.userId;
  4598. //console.log(`消息来源: ${isMyMessage ? '自己' : '他人'}, userId=${message.userId}`);
  4599. // 给消息添加唯一ID
  4600. message.uniqueId = ++this.messageIdCounter;
  4601. let msgdata = JSON.parse(message.data);
  4602. message.msgId = msgdata.msgId;
  4603. this.talklist.push(message);
  4604. // 当消息超过限制时,批量删除旧消息
  4605. if (this.talklist.length > MAX_TALK_ITEMS) {
  4606. const removeCount = this.talklist.length - MAX_TALK_ITEMS;
  4607. //console.log(`消息超过限制,删除前${removeCount}条旧消息`);
  4608. this.talklist.splice(0, removeCount);
  4609. }
  4610. //console.log(`添加消息后: 当前消息数量=${this.talklist.length}`);
  4611. // 强制触发视图更新
  4612. this.$forceUpdate();
  4613. // 使用单次nextTick确保DOM更新后再滚动
  4614. this.$nextTick(() => {
  4615. this.forceScrollToBottomOnSend();
  4616. });
  4617. },
  4618. // 处理Socket消息
  4619. async handleSocketMessage(message) {
  4620. try {
  4621. let data = JSON.parse(message.data);
  4622. const socketMessage = data.data; // 服务端返回的消息体
  4623. //console.log("qxj handleSocketMessage socketMessage",socketMessage);
  4624. if (data.code == 200) {
  4625. const messageData = {
  4626. ...socketMessage,
  4627. cmd: socketMessage.cmd || '', // 确保cmd字段存在
  4628. ts: Date.now() // 时间戳
  4629. };
  4630. // 处理服务端返回的sendMsg消息,加入本地列表
  4631. if (socketMessage.cmd == 'sendMsg') {
  4632. if (!this.isSocketAvailable()) {
  4633. uni.showToast({
  4634. title: '连接已断开,正在重试...',
  4635. icon: 'none'
  4636. });
  4637. this.handleReconnect();
  4638. return;
  4639. }
  4640. this.addToTalkList(messageData);
  4641. } else if (socketMessage.cmd == 'red') {
  4642. const redData = socketMessage.data ? JSON.parse(socketMessage.data) : {};
  4643. this.redInfo = redData || {};
  4644. this.isShowRed = socketMessage.status === 1;
  4645. if (this.isShowRed) {
  4646. this.redTimer = setInterval(() => {
  4647. const redCountdown = this.handleTime(this.redInfo
  4648. .updateTime, this.redInfo
  4649. .duration);
  4650. if (!redCountdown) {
  4651. this.isShowRed = false;
  4652. clearInterval(this.redTimer);
  4653. }
  4654. }, 1000);
  4655. }
  4656. } else if (socketMessage.cmd == 'goods') {
  4657. const goodsData = socketMessage.data ? JSON.parse(socketMessage.data) : {};
  4658. this.goodsCard = goodsData || {};
  4659. this.isShowGoods = socketMessage.status == 1;
  4660. } else if (socketMessage.cmd == 'coupon') {
  4661. const couponData = socketMessage.data ? JSON.parse(socketMessage.data) : {};
  4662. this.couponInfo = couponData || {};
  4663. this.isShowCoupon = socketMessage.status === 1;
  4664. if (this.isShowCoupon) {}
  4665. } else if (socketMessage.cmd == 'likeDetail') {
  4666. this.liveViewData.like = socketMessage.data;
  4667. } else if (socketMessage.cmd == 'lottery') {
  4668. const lotteryData = socketMessage.data ? JSON.parse(socketMessage.data) : {};
  4669. this.lotteryInfo = lotteryData || {};
  4670. this.isShowLottery = socketMessage.status === 1;
  4671. if (socketMessage.status != 1) {
  4672. this.isShowLotteryPop = false;
  4673. }
  4674. // 清除已有定时器(无论状态是否为1,先清掉旧的)
  4675. clearInterval(this.lotteryTimer);
  4676. if (this.isShowLottery) {
  4677. this.lotteryTimer = setInterval(() => {
  4678. this.countdown = this.handleTime(this.lotteryInfo
  4679. .updateTime, this
  4680. .lotteryInfo.duration);
  4681. if (!this.countdown) {
  4682. console.log('倒计时', this.countdown);
  4683. this.isShowLottery = false;
  4684. this.isShowLotteryPop = false;
  4685. clearInterval(this.lotteryTimer);
  4686. }
  4687. }, 1000);
  4688. } else {
  4689. this.isShowLottery = false;
  4690. }
  4691. } else if (socketMessage.cmd == 'globalVisible' || socketMessage.cmd ==
  4692. 'singleVisible') {
  4693. // status = 1的时候,用户消息自可见,其他消息丢失}
  4694. if (socketMessage.status == 1) {
  4695. this.myselfFlag = true;
  4696. } else {
  4697. this.myselfFlag = false;
  4698. }
  4699. } else if (socketMessage.cmd == 'sendPopMsg') {
  4700. this.popMsg = socketMessage.msg
  4701. this.isShowPopMsg = true
  4702. } else if (socketMessage.cmd == 'sendTopMsg') {
  4703. clearInterval(this.noticeTimer);
  4704. const noticeData = socketMessage.data ? JSON.parse(socketMessage.data) : {};
  4705. this.notice = noticeData || {};
  4706. this.isShowNotice = true
  4707. if (this.isShowNotice) {
  4708. this.noticeTimer = setInterval(() => {
  4709. const noticeCountdown = this.handleTime(this.notice
  4710. .endTime, 0);
  4711. if (!noticeCountdown) {
  4712. this.isShowNotice = false;
  4713. clearInterval(this.noticeTimer);
  4714. }
  4715. }, 1000);
  4716. }
  4717. } else if (socketMessage.cmd == 'entry') {
  4718. try {
  4719. if (!this.liveUserCalled) {
  4720. this.liveUserCalled = true;
  4721. }
  4722. const userIdToEntry = socketMessage.userId;
  4723. const existingIndex = this.liveViewersData.findIndex((item) => item
  4724. .userId ===
  4725. userIdToEntry);
  4726. if (existingIndex === -1) {
  4727. const liveViewers = {
  4728. userId: socketMessage.userId,
  4729. nickName: socketMessage.nickName,
  4730. avatar: socketMessage.avatar
  4731. };
  4732. this.liveViewersData.push(liveViewers);
  4733. this.liveUserTotal++;
  4734. }
  4735. // 解析用户ID(根据实际接口字段调整,此处假设data含userId)
  4736. const userInfo = JSON.parse(socketMessage.data || '{}');
  4737. const userId = userInfo.userId || socketMessage.userId; // 兼容不同字段
  4738. if (!userId) return; // 无用户ID不处理
  4739. // 仅新用户(未显示过)才触发提示
  4740. if (!this.shownEntryUsers.has(userId)) {
  4741. this.inAndOut = socketMessage;
  4742. this.showWelcomeMessage = true;
  4743. this.shownEntryUsers.add(userId); // 加入已显示集合
  4744. messageData.msg = '来了'
  4745. this.addToTalkList(messageData);
  4746. // 3秒后隐藏提示(可调整时长)
  4747. if (this.welcomeTimer) clearTimeout(this.welcomeTimer);
  4748. this.welcomeTimer = setTimeout(() => {
  4749. this.showWelcomeMessage = false;
  4750. }, 3000);
  4751. }
  4752. } catch (err) {
  4753. console.error('解析entry用户数据失败:', err);
  4754. }
  4755. } else if (socketMessage.cmd == 'out') {
  4756. if (this.liveUserTotal > 0) {
  4757. const userIdToRemove = socketMessage.userId;
  4758. const index = this.liveViewersData.findIndex((item) => item.userId ===
  4759. userIdToRemove);
  4760. if (index !== -1) {
  4761. this.liveViewersData.splice(index, 1);
  4762. this.liveUserTotal--; // 根据userId删除对应的用户数据
  4763. }
  4764. }
  4765. this.inAndOut = socketMessage;
  4766. this.showWelcomeMessage = true;
  4767. // 3秒后隐藏提示
  4768. if (this.welcomeTimer) clearTimeout(this.welcomeTimer);
  4769. this.welcomeTimer = setTimeout(() => {
  4770. this.showWelcomeMessage = false;
  4771. }, 3000);
  4772. } else if (socketMessage.cmd == 'live_start' || socketMessage.cmd ==
  4773. 'live_end') {
  4774. // 开始直播,关闭直播
  4775. if (this.liveStartTimer) {
  4776. clearInterval(this.liveStartTimer);
  4777. this.liveStartTimer = null;
  4778. }
  4779. if (this.redTimer) {
  4780. clearInterval(this.redTimer);
  4781. this.redTimer = null;
  4782. }
  4783. // 请求最新直播间数据
  4784. this.$nextTick(() => {
  4785. this.getliving(this.liveId);
  4786. });
  4787. } else if (socketMessage.cmd == 'Integral') {
  4788. this.integral = {
  4789. msg: socketMessage.msg,
  4790. status: true
  4791. };
  4792. } else if (socketMessage.cmd == 'userCount') {
  4793. // 广播在线人数
  4794. this.virtualHuman = socketMessage.data * 10
  4795. } else if (socketMessage.cmd == 'deleteMsg') {
  4796. const index = this.talklist.findIndex(item => item.msgId == socketMessage
  4797. .msg);
  4798. if (index !== -1) {
  4799. this.talklist.splice(index, 1);
  4800. }
  4801. } else if (socketMessage.cmd == 'LotteryDetail') {
  4802. try {
  4803. this.prizeInfo = Array.isArray(JSON.parse(socketMessage.data ||
  4804. '[]')) ? JSON.parse(
  4805. socketMessage.data || '[]') : [];
  4806. } catch (err) {
  4807. console.error('解析抽奖结果失败:', err);
  4808. this.prizeInfo = [];
  4809. }
  4810. this.isShowPrize = true;
  4811. this.isShowLottery = false;
  4812. this.isShowLotteryPop = false;
  4813. } else if (socketMessage.cmd == 'blockUser') {
  4814. uni.removeStorage({
  4815. key: 'AppToken',
  4816. success: () => {
  4817. uni.reLaunch({
  4818. url: '/pages/auth/login'
  4819. });
  4820. }
  4821. });
  4822. }
  4823. } else {
  4824. uni.showToast({
  4825. title: data.msg,
  4826. icon: 'none'
  4827. });
  4828. }
  4829. } catch (error) {
  4830. console.error('Socket消息处理失败:', error);
  4831. }
  4832. },
  4833. sendMsg(retries = 1) {
  4834. // 防止连续点击发送两次(800ms短时锁定)
  4835. if (this.isSending) return;
  4836. this.isSending = true;
  4837. setTimeout(() => {
  4838. this.isSending = false;
  4839. }, 800);
  4840. const text = (this.value || '').trim();
  4841. if (!text) {
  4842. uni.showToast({
  4843. title: '不能发送空消息',
  4844. icon: 'none'
  4845. });
  4846. return;
  4847. }
  4848. if (!this.isSocketAvailable()) {
  4849. if (retries > 0) {
  4850. uni.showToast({
  4851. title: `连接不稳定,正在重试(${retries}次)...`,
  4852. icon: 'none'
  4853. });
  4854. // 延迟500ms重试,重试次数减1
  4855. setTimeout(() => this.sendMsg(retries - 1), 500);
  4856. } else {
  4857. uni.showToast({
  4858. title: '连接已断开,发送失败',
  4859. icon: 'none'
  4860. });
  4861. this.value = text; // 恢复输入框内容
  4862. }
  4863. return;
  4864. }
  4865. const liveId = this.liveId;
  4866. this.value = ''; // 立即清空输入框
  4867. // 构造发送给服务端的消息数据
  4868. const data = {
  4869. liveId,
  4870. userId: this.userInfo.userId,
  4871. userType: 0,
  4872. cmd: 'sendMsg',
  4873. msg: text,
  4874. nickName: this.userInfo.nickname || '未命名',
  4875. avatar: this.userInfo.avatar ||
  4876. 'https://bjzmky-1323137866.cos.ap-chongqing.myqcloud.com/userapp/images/avatar.png'
  4877. };
  4878. // 发送socket消息
  4879. try {
  4880. if (this.myselfFlag) {
  4881. this.addToTalkList(data);
  4882. this.forceScrollToBottomOnSend();
  4883. } else {
  4884. this.socket.send({
  4885. data: JSON.stringify(data),
  4886. success: () => {
  4887. this.value = '';
  4888. // 发送成功后强制滚动到底部,无论当前滚动位置如何
  4889. this.forceScrollToBottomOnSend();
  4890. },
  4891. fail: (err) => {
  4892. console.error('消息发送失败:', err);
  4893. if (retries > 0) {
  4894. uni.showToast({
  4895. title: `发送失败,正在重试(${retries}次)`,
  4896. icon: 'none'
  4897. });
  4898. setTimeout(() => this.sendMsg(retries - 1), 500);
  4899. } else {
  4900. uni.showToast({
  4901. title: '发送失败,请稍后再试',
  4902. icon: 'none'
  4903. });
  4904. this.value = text; // 恢复输入框内容
  4905. }
  4906. }
  4907. });
  4908. }
  4909. } catch (err) {
  4910. console.error('发送消息异常:', err);
  4911. if (retries > 0) {
  4912. setTimeout(() => this.sendMsg(retries - 1), 500);
  4913. } else {
  4914. uni.showToast({
  4915. title: '发送失败,请稍后再试',
  4916. icon: 'none'
  4917. });
  4918. this.value = text;
  4919. }
  4920. }
  4921. },
  4922. formatUserNum() {
  4923. let userTotal = 0;
  4924. if (!this.liveUserTotal) {
  4925. this.liveUserTotal = 0;
  4926. }
  4927. if (this.liveUserTotal > 0) {
  4928. userTotal = this.liveUserTotal = 0;
  4929. }
  4930. if (this.liveUserTotal > 10000) {
  4931. userTotal = (this.liveUserTotal / 10000.0).toFixed(1);
  4932. userTotal = userTotal + "万";
  4933. }
  4934. console.log("qxj userTotal", userTotal);
  4935. return userTotal;
  4936. },
  4937. }
  4938. };
  4939. </script>
  4940. <style scoped lang="scss">
  4941. /* 退出全屏按钮 */
  4942. .fullscreen-exit-btn {
  4943. position: fixed;
  4944. bottom: 40rpx;
  4945. left: 82vh;
  4946. display: flex;
  4947. flex-direction: column;
  4948. align-items: center;
  4949. justify-content: center;
  4950. z-index: 100001;
  4951. background: rgba(57, 57, 57, 0.6);
  4952. border-radius: 40rpx;
  4953. padding: 20rpx 24rpx;
  4954. transition: all 0.3s ease;
  4955. &:active {
  4956. transform: scale(0.95);
  4957. background: rgba(50, 50, 50, 0.6);
  4958. }
  4959. .exit-fullscreen-icon {
  4960. width: 40rpx;
  4961. height: 40rpx;
  4962. margin-bottom: 10rpx;
  4963. }
  4964. .exit-text {
  4965. color: #ffffff;
  4966. font-size: 22rpx;
  4967. white-space: nowrap;
  4968. }
  4969. }
  4970. .video-container.fullscreen-mode .fullscreen-exit-btn {
  4971. z-index: 999999 !important;
  4972. }
  4973. .fullscreen-mode {
  4974. background-color: #000 !important;
  4975. }
  4976. /* 全屏模式样式 */
  4977. .video-container.fullscreen-mode {
  4978. z-index: 99999 !important;
  4979. background-color: #000 !important;
  4980. transform: rotate(90deg) !important;
  4981. transform-origin: center center !important;
  4982. .video-player {
  4983. width: 100vh !important;
  4984. height: 100vw !important;
  4985. }
  4986. }
  4987. /* 全屏时隐藏其他元素 */
  4988. .video-container.fullscreen-mode~* {
  4989. display: none !important;
  4990. }
  4991. .video-container {
  4992. position: relative;
  4993. bottom: -1px;
  4994. transition: all 0.3s ease;
  4995. }
  4996. .video-container2 {
  4997. position: relative;
  4998. bottom: -1px;
  4999. transition: all 0.3s ease;
  5000. }
  5001. .video-player.fullscreen {
  5002. width: 100vh !important;
  5003. height: 100vw !important;
  5004. object-fit: contain !important;
  5005. }
  5006. /* 全屏按钮样式优化 */
  5007. .custom-controls {
  5008. position: absolute;
  5009. bottom: 10%;
  5010. right: 40rpx;
  5011. z-index: 9999;
  5012. background: rgba(0, 0, 0, 0.6);
  5013. border-radius: 50%;
  5014. width: 80rpx;
  5015. height: 80rpx;
  5016. display: flex;
  5017. align-items: center;
  5018. justify-content: center;
  5019. transition: all 0.3s ease;
  5020. &:active {
  5021. transform: scale(0.95);
  5022. background: rgba(0, 0, 0, 0.8);
  5023. }
  5024. }
  5025. .control-icon {
  5026. width: 46rpx;
  5027. height: 46rpx;
  5028. }
  5029. @media screen and (orientation: landscape) {
  5030. .video-container.horizontal-layout {
  5031. width: 100%;
  5032. height: 100%;
  5033. }
  5034. // .video-player {
  5035. // width: 100vh !important;
  5036. // height: 100vw !important;
  5037. // }
  5038. }
  5039. // 重置按钮样式
  5040. .button-reset {
  5041. background-color: transparent !important;
  5042. padding: 0 !important;
  5043. line-height: 1 !important;
  5044. margin: 0 !important;
  5045. width: auto !important;
  5046. // font-weight: 500 !important;
  5047. border-radius: none !important;
  5048. &::after {
  5049. border: none !important;
  5050. padding: 0 !important;
  5051. margin: 0 !important;
  5052. }
  5053. }
  5054. .swiper-wrapper {
  5055. /* 深色主题变量 */
  5056. --bottom-color: transparent;
  5057. --bg-color: #242424;
  5058. --text-color: #ffffff;
  5059. --name-color: #8CE7FF;
  5060. --normal-bg: rgba(0, 0, 0, 0.3);
  5061. --input-bg: rgba(0, 0, 0, 0.3);
  5062. --chat-bg: transparent;
  5063. --video-height: 100vh;
  5064. --chat-height: 30vh;
  5065. --pop-bg: #333333;
  5066. --notice-bg: rgba(9, 9, 9, 0.4);
  5067. }
  5068. .swiper-wrapper.horizontal {
  5069. --notice-bg: #fefae8;
  5070. --pop-bg: #ECF5F4;
  5071. /* 默认变量(浅色主题) */
  5072. --bottom-color: #fff;
  5073. --name-color: #666666;
  5074. --bg-color: #ffffff;
  5075. --text-color: #333333;
  5076. --normal-bg: #fff;
  5077. --input-bg: #F5F7FA;
  5078. --chat-bg: #ECF5F4; //对话聊天
  5079. --video-height: 500rpx;
  5080. --chat-height: clac(100% - 650rpx);
  5081. }
  5082. // 主容器
  5083. .swiper-wrapper {
  5084. position: relative;
  5085. width: 100%;
  5086. height: 100vh;
  5087. overflow: hidden;
  5088. /* 应用变量 */
  5089. background: var(--bg-color);
  5090. color: var(--text-color);
  5091. .container {
  5092. width: 100%;
  5093. height: 100%;
  5094. position: relative;
  5095. transition: opacity 0.3s ease;
  5096. transform: translateZ(0);
  5097. will-change: opacity;
  5098. // 预告直播盒子
  5099. .trailer-box {
  5100. width: calc(100% - 80rpx);
  5101. background: var(--pop-bg);
  5102. border-radius: 24rpx;
  5103. position: absolute;
  5104. top: 16%;
  5105. left: 50%;
  5106. transform: translateX(-50%);
  5107. display: flex;
  5108. flex-direction: column;
  5109. align-items: center;
  5110. color: var(--text-color);
  5111. padding: 20rpx;
  5112. z-index: 999;
  5113. box-shadow: 0 8rpx 40rpx rgba(0, 0, 0, 0.12);
  5114. transition: box-shadow 0.3s ease;
  5115. .trailer-video {
  5116. width: 100%;
  5117. height: 100%;
  5118. position: absolute;
  5119. z-index: 1;
  5120. border-radius: 20rpx;
  5121. }
  5122. .trailer-placeholder {
  5123. margin-bottom: 40rpx;
  5124. width: 240rpx;
  5125. height: 240rpx;
  5126. }
  5127. .countdown-container {
  5128. margin: 20rpx 0;
  5129. display: flex;
  5130. flex-direction: column;
  5131. align-items: center;
  5132. .live-name {
  5133. font-weight: 600;
  5134. font-size: 36rpx;
  5135. }
  5136. .countdown-display {
  5137. display: flex;
  5138. align-items: center;
  5139. margin: 30rpx 0;
  5140. .countdown-label {
  5141. font-size: 24rpx;
  5142. color: #999999;
  5143. }
  5144. .countdown-separator {
  5145. font-size: 24rpx;
  5146. color: #999999;
  5147. }
  5148. .countdown-unit {
  5149. width: 40rpx;
  5150. height: 40rpx;
  5151. background: #4D4D4D;
  5152. border-radius: 8rpx;
  5153. text-align: center;
  5154. overflow: hidden;
  5155. margin: 0 8rpx;
  5156. font-weight: 500;
  5157. font-size: 28rpx;
  5158. color: #FFFFFF;
  5159. line-height: 40rpx;
  5160. }
  5161. }
  5162. }
  5163. .trailer-actions {
  5164. display: flex;
  5165. justify-content: center;
  5166. align-items: center;
  5167. .action-button {
  5168. width: 280rpx;
  5169. height: 72rpx;
  5170. border-radius: 36rpx;
  5171. line-height: 72rpx;
  5172. text-align: center;
  5173. color: #fff;
  5174. &.reserve-button {
  5175. background: linear-gradient(136deg, #38D97D 0%, #02B176 100%);
  5176. }
  5177. &:not(.reserve-button) {
  5178. background: #F4A007;
  5179. }
  5180. .button-icon {
  5181. width: 32rpx;
  5182. height: 32rpx;
  5183. }
  5184. }
  5185. }
  5186. .no-live-title {
  5187. margin-top: 30rpx;
  5188. font-size: 42rpx;
  5189. font-weight: 500;
  5190. }
  5191. }
  5192. // 新预告直播盒子
  5193. .trailer-box2 {
  5194. width: 100%;
  5195. position: absolute;
  5196. top: 16%;
  5197. display: flex;
  5198. flex-direction: column;
  5199. align-items: center;
  5200. z-index: 999;
  5201. transition: box-shadow 0.3s ease;
  5202. height: 400rpx;
  5203. .trailer-video {
  5204. width: 100%;
  5205. height: 100%;
  5206. position: absolute;
  5207. z-index: 1;
  5208. }
  5209. .trailer-placeholder {
  5210. position: absolute;
  5211. top: 0;
  5212. left: 0;
  5213. width: 100%;
  5214. height: 100%;
  5215. z-index: -1;
  5216. /* 置于内容下方 */
  5217. }
  5218. .countdown-container {
  5219. padding-top: 15%;
  5220. margin: 20rpx 0;
  5221. display: flex;
  5222. flex-direction: column;
  5223. align-items: center;
  5224. .live-name {
  5225. font-weight: 600;
  5226. font-size: 36rpx;
  5227. }
  5228. .countdown-display {
  5229. display: flex;
  5230. align-items: center;
  5231. margin: 30rpx 0;
  5232. .countdown-label {
  5233. font-size: 32rpx;
  5234. color: rgba(250, 214, 176, 1);
  5235. }
  5236. .countdown-separator {
  5237. font-size: 24rpx;
  5238. color: #999999;
  5239. }
  5240. .countdown-unit {
  5241. width: 60rpx;
  5242. height: 60rpx;
  5243. background: rgba(255, 246, 214, 1);
  5244. border-radius: 8rpx;
  5245. text-align: center;
  5246. overflow: hidden;
  5247. margin: 0 8rpx;
  5248. font-weight: 500;
  5249. font-size: 36rpx;
  5250. color: rgba(0, 75, 59, 1);
  5251. line-height: 60rpx;
  5252. }
  5253. }
  5254. }
  5255. .trailer-actions {
  5256. display: flex;
  5257. justify-content: center;
  5258. align-items: center;
  5259. .action-button {
  5260. width: 280rpx;
  5261. height: 72rpx;
  5262. border-radius: 36rpx;
  5263. display: flex;
  5264. justify-content: center;
  5265. align-items: center;
  5266. text-align: center;
  5267. border: 1px solid rgba(151, 151, 151, 1);
  5268. font-size: 36rpx;
  5269. font-weight: bold;
  5270. &.reserve-button {
  5271. color: rgba(0, 110, 80, 1);
  5272. background: linear-gradient(231.51deg, rgba(249, 215, 178, 1) 0%, rgba(255, 255, 191, 1) 47.83%, rgba(255, 250, 229, 1) 65.77%, rgba(248, 214, 178, 1) 100%);
  5273. }
  5274. &:not(.reserve-button) {
  5275. color: rgba(255, 246, 214, 1);
  5276. background: rgba(0, 110, 80, 1);
  5277. }
  5278. .button-icon {
  5279. width: 32rpx;
  5280. height: 32rpx;
  5281. }
  5282. }
  5283. }
  5284. .no-live-title {
  5285. margin-top: 30rpx;
  5286. font-size: 42rpx;
  5287. font-weight: 500;
  5288. }
  5289. }
  5290. // 主要内容区域
  5291. .content {
  5292. position: relative;
  5293. z-index: 2;
  5294. height: 100%;
  5295. width: 100%;
  5296. top: 0;
  5297. left: 0;
  5298. display: flex;
  5299. flex-direction: column;
  5300. &.horizontal-content {
  5301. z-index: 999;
  5302. }
  5303. &.trailer-content {
  5304. justify-content: space-between;
  5305. }
  5306. // 顶部信息栏
  5307. .top-info-bar {
  5308. position: fixed;
  5309. top: 0;
  5310. z-index: 5;
  5311. width: 100%;
  5312. padding: 0 24rpx;
  5313. box-sizing: border-box;
  5314. // margin-top:calc(var(--status-bar-height) + 10rpx);
  5315. display: flex;
  5316. justify-content: space-between;
  5317. flex-direction: column;
  5318. &.horizontal-top {
  5319. position: static;
  5320. margin-bottom: 30rpx;
  5321. }
  5322. .progress-countdown {
  5323. position: absolute;
  5324. top: 170rpx;
  5325. width: 180rpx;
  5326. // background: var(--normal-bg);
  5327. background: rgba(0, 0, 0, 0.3);
  5328. border-radius: 16rpx;
  5329. padding: 16rpx;
  5330. flex-direction: column;
  5331. .title {
  5332. width: 148rpx;
  5333. height: 28rpx;
  5334. }
  5335. .progress-bar-bg {
  5336. width: 148rpx;
  5337. height: 8rpx;
  5338. margin-top: 16rpx;
  5339. background: #FFFFFF;
  5340. border-radius: 6rpx 6rpx 6rpx 6rpx;
  5341. overflow: hidden;
  5342. margin-bottom: 16rpx;
  5343. .progress-bar-fill {
  5344. height: 100%;
  5345. // background: linear-gradient(90deg, #4CAF50, #8BC34A);
  5346. background: #FACE15;
  5347. border-radius: 6rpx 6rpx 6rpx 6rpx;
  5348. transition: width 1s linear;
  5349. }
  5350. }
  5351. .progress-text {
  5352. color: #fff;
  5353. font-size: 20rpx;
  5354. }
  5355. }
  5356. .user-info-section {
  5357. display: flex;
  5358. align-items: center;
  5359. .back-icon {
  5360. width: 60rpx;
  5361. height: 64rpx;
  5362. }
  5363. .user-avatar-container {
  5364. padding: 6rpx 8rpx;
  5365. height: 64rpx;
  5366. background: var(--normal-bg);
  5367. border-radius: 32rpx;
  5368. display: flex;
  5369. align-items: center;
  5370. .user-name {
  5371. color: var(--text-color);
  5372. }
  5373. }
  5374. }
  5375. .viewers-section {
  5376. display: flex;
  5377. justify-content: flex-end;
  5378. align-items: center;
  5379. margin-top: 30rpx;
  5380. .viewer-avatar {
  5381. width: 52rpx;
  5382. height: 52rpx;
  5383. border-radius: 26rpx;
  5384. }
  5385. .viewer-avatar-placeholder {
  5386. width: 52rpx;
  5387. height: 52rpx;
  5388. border-radius: 50%;
  5389. display: flex;
  5390. align-items: center;
  5391. justify-content: center;
  5392. .avatar-initial {
  5393. color: var(--text-color);
  5394. font-size: 18rpx;
  5395. }
  5396. }
  5397. .viewer-count {
  5398. width: 80rpx;
  5399. height: 52rpx;
  5400. background: var(--normal-bg);
  5401. border-radius: 26rpx;
  5402. font-size: 30rpx;
  5403. color: var(--text-color);
  5404. text-align: center;
  5405. line-height: 52rpx;
  5406. }
  5407. }
  5408. }
  5409. // 购买提示
  5410. .purchase-prompt {
  5411. position: absolute;
  5412. bottom: 750rpx;
  5413. left: 24rpx;
  5414. padding: 6rpx 20rpx;
  5415. background: rgba(230, 154, 34, 0.7);
  5416. border-radius: 24rpx;
  5417. z-index: 9;
  5418. font-weight: 500;
  5419. color: #ffffff;
  5420. transition: opacity 0.3s ease;
  5421. font-size: 30rpx;
  5422. display: flex;
  5423. align-items: center;
  5424. .prompt-icon {
  5425. width: 32rpx;
  5426. height: 32rpx;
  5427. }
  5428. }
  5429. // 视频区域
  5430. .videolist {
  5431. position: relative;
  5432. // height: var(--video-height);
  5433. width: 100%;
  5434. &.screen {
  5435. width: 100%;
  5436. height: 100%;
  5437. //height: 100vh;
  5438. }
  5439. .video-container {
  5440. //height: var(--video-height);
  5441. width: 100%;
  5442. transform: translateZ(0);
  5443. backface-visibility: hidden;
  5444. perspective: 1000;
  5445. &.horizontal-layout {
  5446. // position: absolute;
  5447. // top: 20%;
  5448. // max-height: 450rpx;
  5449. // z-index: 99;
  5450. }
  5451. .complaint-box {
  5452. position: absolute;
  5453. // top: 20%;
  5454. right: 20rpx;
  5455. width: 140rpx;
  5456. margin-top: 20rpx;
  5457. display: flex;
  5458. align-items: center;
  5459. justify-content: center;
  5460. background-color: rgba(57, 57, 57, 0.6);
  5461. padding: 16rpx 0;
  5462. color: #fff;
  5463. border-radius: 28rpx;
  5464. z-index: 999999 !important;
  5465. &.complaint-full {
  5466. // top: 10rpx;
  5467. left: 82vh;
  5468. }
  5469. &:active {
  5470. transform: scale(0.95);
  5471. background: rgba(50, 50, 50, 0.6);
  5472. }
  5473. }
  5474. .txt {
  5475. text-align: center;
  5476. font-weight: 500;
  5477. font-size: 40rpx;
  5478. line-height: var(--video-height);
  5479. }
  5480. .video-player {
  5481. width: 100%;
  5482. height: 100%;
  5483. position: absolute;
  5484. z-index: 1;
  5485. }
  5486. .live-end-message {
  5487. position: absolute;
  5488. top: 50%;
  5489. left: 50%;
  5490. transform: translate(-50%, -50%);
  5491. font-size: 36rpx;
  5492. color: var(--text-color);
  5493. }
  5494. .replay-label {
  5495. position: absolute;
  5496. // top: 10%;
  5497. right: 24rpx;
  5498. background-color: rgba(57, 57, 57, 0.6);
  5499. width: 100rpx;
  5500. height: 70rpx;
  5501. line-height: 70rpx;
  5502. text-align: center;
  5503. color: #fff;
  5504. border-radius: 15rpx;
  5505. z-index: 999999 !important;
  5506. &.replay-full {
  5507. left: 82vh;
  5508. // top: 16% !important;
  5509. }
  5510. }
  5511. }
  5512. }
  5513. }
  5514. // 侧边
  5515. .slide-group {
  5516. position: absolute;
  5517. right: 20rpx;
  5518. top: 56%;
  5519. z-index: 9000;
  5520. .action-button-group {
  5521. display: flex;
  5522. justify-content: space-between;
  5523. align-items: center;
  5524. margin-top: 50rpx;
  5525. }
  5526. .end {
  5527. justify-content: flex-end;
  5528. }
  5529. .action-icon {
  5530. width: 88rpx;
  5531. height: 88rpx;
  5532. }
  5533. .icon-button {
  5534. // background: var(--normal-bg);
  5535. // border-radius: 50%;
  5536. width: 88rpx;
  5537. height: 88rpx;
  5538. display: flex;
  5539. justify-content: center;
  5540. align-items: center;
  5541. transition: transform 0.2s ease;
  5542. // margin-left: 10rpx;
  5543. &.like-container {
  5544. display: flex;
  5545. flex-direction: column;
  5546. justify-content: center;
  5547. align-items: center;
  5548. position: relative;
  5549. .like-count {
  5550. position: absolute;
  5551. bottom: -40rpx;
  5552. font-size: 24rpx;
  5553. color: #FA341E;
  5554. padding: 6rpx 16rpx;
  5555. background: #FFFFFF;
  5556. border-radius: 30rpx;
  5557. }
  5558. }
  5559. }
  5560. }
  5561. // 聊天区域
  5562. .chat-area-container {
  5563. background: var(--chat-bg);
  5564. position: fixed;
  5565. width: 100%;
  5566. bottom: 0;
  5567. z-index: 999;
  5568. transform: translateZ(0);
  5569. will-change: transform;
  5570. backface-visibility: hidden;
  5571. &.chat-area-container2 {
  5572. flex: 1;
  5573. min-height: 0; // 重要:允许收缩到0
  5574. position: relative;
  5575. transform: none; // 移除之前的变换
  5576. will-change: auto;
  5577. display: flex;
  5578. flex-direction: column;
  5579. }
  5580. &.chat-area-container3 {
  5581. height: calc(85% - 420rpx);
  5582. flex: 1;
  5583. transform: none; // 移除之前的变换
  5584. will-change: auto;
  5585. display: flex;
  5586. flex-direction: column;
  5587. position: absolute;
  5588. }
  5589. &.chat-area-container4 {
  5590. height: calc(85% - 680rpx);
  5591. flex: 1;
  5592. transform: none; // 移除之前的变换
  5593. will-change: auto;
  5594. display: flex;
  5595. flex-direction: column;
  5596. position: absolute;
  5597. // max-height: 40%;
  5598. // flex: 1;
  5599. // min-height: 0; // 重要:允许收缩到0
  5600. // // position: relative;
  5601. // transform: none; // 移除之前的变换
  5602. // will-change: auto;
  5603. // display: flex;
  5604. // flex-direction: column;
  5605. // position: absolute;
  5606. }
  5607. &.chat-area-container5 {
  5608. height: calc(85% - 450rpx);
  5609. flex: 1;
  5610. transform: none; // 移除之前的变换
  5611. will-change: auto;
  5612. display: flex;
  5613. flex-direction: column;
  5614. position: absolute;
  5615. // max-height: 40%;
  5616. // flex: 1;
  5617. // min-height: 0; // 重要:允许收缩到0
  5618. // // position: relative;
  5619. // transform: none; // 移除之前的变换
  5620. // will-change: auto;
  5621. // display: flex;
  5622. // flex-direction: column;
  5623. // position: absolute;
  5624. }
  5625. &.chat-area-focused {
  5626. transform: translateY(calc(-1 * var(--keyboard-height, 0rpx))) translateZ(0);
  5627. z-index: 1000;
  5628. }
  5629. .tabs_bg {
  5630. background-color: #fff;
  5631. padding: 20rpx 40rpx 0;
  5632. display: flex;
  5633. justify-content: space-between;
  5634. align-items: center;
  5635. .complaint-box {
  5636. width: 120rpx;
  5637. height: 48rpx;
  5638. background: #FFFFFF;
  5639. border-radius: 24rpx 24rpx 24rpx 24rpx;
  5640. border: 2rpx solid #EEEEEE;
  5641. display: flex;
  5642. justify-content: center;
  5643. align-items: center;
  5644. }
  5645. }
  5646. .chat-content-wrapper {
  5647. flex: 1;
  5648. height: 400rpx;
  5649. padding: 20rpx 0;
  5650. transform: translateZ(0);
  5651. will-change: height;
  5652. position: relative;
  5653. &.chat-content-focused {
  5654. height: 100rpx !important;
  5655. }
  5656. .notice-message {
  5657. font-size: 36rpx;
  5658. position: absolute;
  5659. bottom: 388rpx;
  5660. max-width: 80%;
  5661. padding: 24rpx;
  5662. background-color: var(--notice-bg);
  5663. margin: 0 0 20rpx 20rpx;
  5664. border-radius: 20rpx;
  5665. color: #0d0b05;
  5666. font-weight: 500;
  5667. overflow: hidden;
  5668. &.horizontal-notice {
  5669. top: 12rpx;
  5670. height: fit-content;
  5671. z-index: 2;
  5672. }
  5673. &.horizontal-notice2 {
  5674. color: #fff !important;
  5675. top: 12rpx;
  5676. height: fit-content;
  5677. z-index: 2;
  5678. }
  5679. }
  5680. .message-scroll-view {
  5681. width: calc(100% - 20rpx);
  5682. height: 100%;
  5683. padding-left: 20rpx;
  5684. display: flex;
  5685. flex: 1;
  5686. flex-direction: column;
  5687. -webkit-overflow-scrolling: touch;
  5688. &.message-scroll2 {
  5689. height: 300rpx;
  5690. }
  5691. }
  5692. .message-list {
  5693. width: 80%;
  5694. margin-bottom: 16rpx;
  5695. animation: simpleFade 0.2s;
  5696. .message-item {
  5697. display: flex;
  5698. justify-content: flex-start;
  5699. .message-content {
  5700. font-size: 30rpx;
  5701. max-width: 100%;
  5702. border-radius: 30rpx;
  5703. background: var(--normal-bg);
  5704. padding: 10rpx 30rpx;
  5705. line-height: 1.4;
  5706. word-break: break-all;
  5707. word-wrap: break-word;
  5708. overflow-wrap: break-word;
  5709. .user-nickname {
  5710. color: var(--name-color);
  5711. }
  5712. .message-text {
  5713. color: var(--text-color);
  5714. }
  5715. }
  5716. }
  5717. }
  5718. }
  5719. // 输入和操作区域
  5720. .input-actions-container {
  5721. position: relative;
  5722. z-index: 999999;
  5723. background-color: var(--bottom-color);
  5724. display: flex;
  5725. justify-content: space-between;
  5726. align-items: center;
  5727. padding: 24rpx;
  5728. &.input-actions-focused {
  5729. justify-content: flex-start !important;
  5730. align-items: stretch !important;
  5731. width: 100% !important;
  5732. display: flex !important;
  5733. }
  5734. .input-container {
  5735. background: var(--input-bg);
  5736. box-sizing: border-box;
  5737. border-radius: 36rpx;
  5738. display: flex;
  5739. align-items: center;
  5740. transform: translateZ(0);
  5741. will-change: transform;
  5742. backface-visibility: hidden;
  5743. perspective: 1000px;
  5744. &.input-container-normal {
  5745. padding: 18rpx 20rpx;
  5746. width: auto;
  5747. max-width: auto;
  5748. margin-right: 0;
  5749. justify-content: space-between;
  5750. }
  5751. &.input-container-focused {
  5752. padding: 10rpx 10rpx 10rpx 20rpx;
  5753. width: 100%;
  5754. max-width: calc(100% - 20rpx);
  5755. margin-right: 20rpx;
  5756. // flex: 1;
  5757. justify-content: flex-start;
  5758. }
  5759. .chat-input {
  5760. border: none !important;
  5761. font-size: 32rpx !important;
  5762. color: var(--text-color) !important;
  5763. background: transparent !important;
  5764. width: 70% !important;
  5765. transform: translateZ(0);
  5766. will-change: contents, width;
  5767. backface-visibility: hidden;
  5768. margin-left: 20rpx;
  5769. &.input-focused {
  5770. width: 100% !important;
  5771. flex: 1 !important;
  5772. min-width: 0 !important;
  5773. margin-left: 10rpx !important;
  5774. max-width: none !important;
  5775. }
  5776. }
  5777. .send-button {
  5778. background-color: #ffffff;
  5779. border-radius: 28rpx;
  5780. padding: 14rpx 16rpx;
  5781. color: #181818;
  5782. font-weight: 500;
  5783. min-width: 80rpx;
  5784. text-align: center;
  5785. flex-shrink: 0;
  5786. &.send2 {
  5787. background-color: #2fa9f1;
  5788. color: #ffffff;
  5789. }
  5790. }
  5791. }
  5792. .action-buttons {
  5793. display: flex;
  5794. justify-content: space-between;
  5795. align-items: center;
  5796. flex: auto;
  5797. // margin-right: 15rpx;
  5798. transform: translateZ(0);
  5799. justify-content: flex-end;
  5800. &.action-buttons-hidden {
  5801. opacity: 0;
  5802. visibility: hidden;
  5803. }
  5804. .action-icon {
  5805. width: 48rpx;
  5806. height: 48rpx;
  5807. }
  5808. .cart-icon {
  5809. width: 58rpx;
  5810. height: 58rpx;
  5811. }
  5812. }
  5813. }
  5814. }
  5815. // 商品卡片
  5816. .goods-card {
  5817. position: fixed;
  5818. bottom: 140rpx;
  5819. right: 24rpx;
  5820. z-index: 5;
  5821. background-color: #fff;
  5822. border-radius: 20rpx;
  5823. overflow: hidden;
  5824. width: 224rpx;
  5825. padding: 4rpx;
  5826. .goods-card-header {
  5827. position: absolute;
  5828. top: 4rpx;
  5829. display: flex;
  5830. justify-content: space-between;
  5831. align-items: center;
  5832. color: #fff;
  5833. width: 100%;
  5834. padding-right: 10rpx;
  5835. box-sizing: border-box;
  5836. .goods-status {
  5837. background: rgba(0, 0, 0, 0.4);
  5838. padding: 12rpx;
  5839. font-size: 22rpx;
  5840. display: flex;
  5841. justify-content: space-between;
  5842. align-items: center;
  5843. border-radius: 10rpx;
  5844. .status-icon {
  5845. width: 30rpx;
  5846. height: 30rpx;
  5847. }
  5848. }
  5849. .close-icon {
  5850. width: 24rpx;
  5851. height: 24rpx;
  5852. }
  5853. }
  5854. .goods-image {
  5855. width: 100%;
  5856. height: 224rpx;
  5857. border-radius: 16rpx 16rpx 0 0;
  5858. overflow: hidden;
  5859. }
  5860. .goods-info {
  5861. padding: 4rpx;
  5862. .goods-title {
  5863. font-weight: 500;
  5864. font-size: 24rpx;
  5865. margin: 10rpx 0 12rpx;
  5866. color: #111111;
  5867. }
  5868. .goods-action {
  5869. color: #fff;
  5870. text-align: center;
  5871. font-weight: 500;
  5872. font-size: 30rpx;
  5873. position: relative;
  5874. .goods-price {
  5875. left: 10rpx;
  5876. position: absolute;
  5877. top: 40%;
  5878. transform: translateY(-50%);
  5879. font-size: 30rpx;
  5880. z-index: 999;
  5881. .price-symbol {
  5882. font-weight: 600;
  5883. font-size: 20rpx;
  5884. color: #FFFFFF;
  5885. }
  5886. .price-integer {
  5887. font-size: 36rpx;
  5888. margin-right: 10rpx;
  5889. }
  5890. }
  5891. .shop-icon {
  5892. width: 204rpx;
  5893. height: 52rpx;
  5894. }
  5895. }
  5896. }
  5897. }
  5898. // 动画
  5899. @keyframes simpleFade {
  5900. from {
  5901. opacity: 0;
  5902. }
  5903. to {
  5904. opacity: 1;
  5905. }
  5906. }
  5907. .userlogo {
  5908. padding: 36rpx 40rpx;
  5909. color: #000000;
  5910. .mt42 {
  5911. margin-top: 42rpx;
  5912. }
  5913. .boxweixin {
  5914. width: 44rpx;
  5915. height: 44rpx;
  5916. border-radius: 50%;
  5917. text-align: center;
  5918. line-height: 34rpx;
  5919. color: #0a0;
  5920. }
  5921. .button-container {
  5922. position: relative;
  5923. margin: auto;
  5924. .hidden-input {
  5925. width: calc(100vw - 80rpx);
  5926. text-align: center;
  5927. height: 104rpx;
  5928. background: #07C160;
  5929. padding: 30rpx 0;
  5930. box-sizing: border-box;
  5931. border-radius: 12rpx;
  5932. font-size: 32rpx !important;
  5933. color: #FFFFFF !important;
  5934. /* 输入文字大小 */
  5935. }
  5936. /* 针对 placeholder 的样式 */
  5937. .hidden-input::placeholder {
  5938. font-size: 44rpx !important;
  5939. color: #FFFFFF !important;
  5940. }
  5941. /* 兼容微信小程序的 placeholder 样式 */
  5942. .hidden-input .placeholder {
  5943. font-size: 44rpx !important;
  5944. color: #FFFFFF !important;
  5945. }
  5946. }
  5947. .submitname {
  5948. height: 104rpx;
  5949. line-height: 104rpx;
  5950. background: #F2F2F2;
  5951. border-radius: 12rpx;
  5952. font-size: 32rpx;
  5953. color: #07C160;
  5954. margin-top: 32rpx;
  5955. text-align: center;
  5956. }
  5957. }
  5958. // 抽奖弹窗1
  5959. .lottery-popup {
  5960. position: relative;
  5961. border-radius: 40rpx;
  5962. height: fit-content;
  5963. .lottery-header-image {
  5964. width: 311rpx;
  5965. position: absolute;
  5966. top: -122rpx;
  5967. left: 50%;
  5968. transform: translateX(-50%);
  5969. }
  5970. .lottery-background-image {
  5971. position: absolute;
  5972. top: 0;
  5973. left: 0;
  5974. width: 100%;
  5975. height: 100%;
  5976. z-index: 1;
  5977. }
  5978. .lottery-content {
  5979. position: relative;
  5980. z-index: 2;
  5981. padding: 24rpx 0 68rpx;
  5982. .lottery-close-section {
  5983. display: flex;
  5984. justify-content: flex-end;
  5985. margin-right: 20rpx;
  5986. .close-button-wrapper {
  5987. .close-button {
  5988. width: 80rpx;
  5989. height: 80rpx;
  5990. display: flex;
  5991. justify-content: center;
  5992. align-items: center;
  5993. }
  5994. }
  5995. }
  5996. .lottery-main-content {
  5997. display: flex;
  5998. flex-direction: column;
  5999. align-items: center;
  6000. .lottery-title-image {
  6001. width: 446rpx;
  6002. height: 80rpx;
  6003. }
  6004. .lottery-countdown-section {
  6005. font-size: 24rpx;
  6006. color: #fff;
  6007. display: flex;
  6008. align-items: center;
  6009. margin: 30rpx 0;
  6010. .countdown-label {
  6011. margin-right: 10rpx;
  6012. }
  6013. .countdown-timer {
  6014. display: flex;
  6015. align-items: center;
  6016. .countdown-number {
  6017. width: 40rpx;
  6018. height: 40rpx;
  6019. text-align: center;
  6020. overflow: hidden;
  6021. background: #ffffff;
  6022. box-shadow: inset 0rpx 2rpx 8rpx 0rpx #ffebb2;
  6023. border-radius: 8rpx;
  6024. margin: 4rpx;
  6025. font-weight: 600;
  6026. font-size: 24rpx;
  6027. color: #f85d22;
  6028. line-height: 40rpx;
  6029. }
  6030. }
  6031. }
  6032. .lottery-products-section {
  6033. width: 100%;
  6034. }
  6035. .lottery-indicators {
  6036. margin: 20rpx 0 50rpx;
  6037. display: flex;
  6038. gap: 6rpx;
  6039. .indicator-point {
  6040. width: 20rpx;
  6041. height: 8rpx;
  6042. background: rgba(255, 255, 255, 0.5);
  6043. border-radius: 4rpx;
  6044. &.selected {
  6045. background: #ffeb66;
  6046. }
  6047. }
  6048. }
  6049. .lottery-tip {
  6050. color: #fff;
  6051. font-size: 28rpx;
  6052. }
  6053. .lottery-action-button {
  6054. margin-top: 30rpx;
  6055. width: 520rpx;
  6056. height: 88rpx;
  6057. line-height: 88rpx;
  6058. background: linear-gradient(180deg, #fff4d6 0%, #ffeb66 100%);
  6059. box-shadow: 0rpx 10rpx 8rpx 4rpx rgba(246, 82, 25, 0.5);
  6060. border-radius: 44rpx;
  6061. font-weight: 500;
  6062. font-size: 36rpx;
  6063. color: #f4410b;
  6064. text-align: center;
  6065. }
  6066. }
  6067. }
  6068. }
  6069. // 积分弹窗
  6070. .integral-popup {
  6071. min-width: 400rpx;
  6072. max-width: 600rpx;
  6073. display: flex;
  6074. flex-direction: column;
  6075. align-items: center;
  6076. border-radius: 20rpx;
  6077. overflow: hidden;
  6078. .integral-header {
  6079. width: 100%;
  6080. position: relative;
  6081. .integral-title {
  6082. width: 100%;
  6083. font-weight: 600;
  6084. font-size: 40rpx;
  6085. color: #ffffff;
  6086. text-shadow: 0px 4rpx 8rpx rgba(255, 89, 2, 0.8);
  6087. position: absolute;
  6088. top: 50rpx;
  6089. text-align: center;
  6090. }
  6091. .integral-background-image {
  6092. width: 100%;
  6093. }
  6094. }
  6095. .integral-content {
  6096. padding: 20rpx;
  6097. .integral-message {
  6098. font-weight: 500;
  6099. font-size: 32rpx;
  6100. text-align: center;
  6101. }
  6102. .integral-confirm-button {
  6103. font-size: 32rpx;
  6104. margin-top: 20rpx;
  6105. background: linear-gradient(270deg, #ff4702 0%, #fe6304 100%);
  6106. color: #fff;
  6107. text-align: center;
  6108. padding: 18rpx 60rpx;
  6109. border-radius: 10rpx;
  6110. font-weight: 500;
  6111. }
  6112. }
  6113. }
  6114. // 红包弹窗
  6115. .red-envelope-popup {
  6116. width: 504rpx;
  6117. position: relative;
  6118. text-align: center;
  6119. height: 610rpx;
  6120. display: flex;
  6121. align-items: center;
  6122. .red-envelope-close-button {
  6123. position: absolute;
  6124. right: 0;
  6125. top: -180rpx;
  6126. width: 64rpx;
  6127. height: 64rpx;
  6128. }
  6129. .red-envelope-background {
  6130. width: 100%;
  6131. height: 100%;
  6132. }
  6133. .red-envelope-content {
  6134. position: absolute;
  6135. top: 0;
  6136. left: 50%;
  6137. transform: translateX(-50%);
  6138. display: flex;
  6139. flex-direction: column;
  6140. align-items: center;
  6141. height: auto;
  6142. .red-envelope-header {
  6143. margin-top: 68rpx;
  6144. display: flex;
  6145. align-items: center;
  6146. .header-decoration-left,
  6147. .header-decoration-right {
  6148. width: 44rpx;
  6149. height: 20rpx;
  6150. }
  6151. .header-title {
  6152. margin: 0 12rpx;
  6153. font-size: 28rpx;
  6154. color: #FFF1BC;
  6155. }
  6156. }
  6157. .red-envelope-text {
  6158. font-weight: 600;
  6159. font-size: 80rpx;
  6160. color: #FFF1BC;
  6161. margin-top: 42rpx;
  6162. }
  6163. .red-envelope-open-text {
  6164. font-weight: 800;
  6165. font-size: 110rpx;
  6166. color: #F41420;
  6167. margin-top: 70rpx;
  6168. }
  6169. }
  6170. }
  6171. // 抽奖弹窗2
  6172. .lottery-popup-v2 {
  6173. width: 504rpx;
  6174. position: relative;
  6175. text-align: center;
  6176. height: 556rpx;
  6177. display: flex;
  6178. align-items: center;
  6179. .lottery-close-button-v2 {
  6180. position: absolute;
  6181. right: 0;
  6182. top: -180rpx;
  6183. width: 64rpx;
  6184. height: 64rpx;
  6185. z-index: 9;
  6186. }
  6187. .lottery-top-image {
  6188. position: absolute;
  6189. top: -214rpx;
  6190. width: 100%;
  6191. }
  6192. .lottery-background-v2 {
  6193. width: 100%;
  6194. height: 100%;
  6195. }
  6196. .lottery-content-v2 {
  6197. position: absolute;
  6198. top: 0;
  6199. left: 50%;
  6200. transform: translateX(-50%);
  6201. display: flex;
  6202. flex-direction: column;
  6203. align-items: center;
  6204. height: auto;
  6205. .lottery-header-v2 {
  6206. margin-top: 68rpx;
  6207. display: flex;
  6208. align-items: center;
  6209. .lottery-header-decoration-left,
  6210. .lottery-header-decoration-right {
  6211. width: 44rpx;
  6212. height: 20rpx;
  6213. }
  6214. .lottery-header-title {
  6215. margin: 0 12rpx;
  6216. font-size: 28rpx;
  6217. color: #FFF1BC;
  6218. margin-top: 22rpx;
  6219. }
  6220. }
  6221. .lottery-text-v2 {
  6222. font-weight: 600;
  6223. font-size: 80rpx;
  6224. color: #FFF1BC;
  6225. &:last-of-type {
  6226. margin-bottom: 56rpx;
  6227. }
  6228. }
  6229. .lottery-action-button-v2 {
  6230. width: 424rpx;
  6231. height: 96rpx;
  6232. line-height: 96rpx;
  6233. background: linear-gradient(180deg, #FBF1CA 0%, #FFD684 100%);
  6234. border-radius: 48rpx;
  6235. font-weight: 600;
  6236. font-size: 36rpx;
  6237. color: #F12E2C;
  6238. margin-bottom: 52rpx;
  6239. }
  6240. }
  6241. }
  6242. // 红包卡片弹窗
  6243. .red-card-popup {
  6244. width: 550rpx;
  6245. height: 636rpx;
  6246. position: relative;
  6247. .red-card-image {
  6248. position: absolute;
  6249. width: 100%;
  6250. height: 100%;
  6251. }
  6252. .red-card-content {
  6253. position: relative;
  6254. z-index: 5;
  6255. display: flex;
  6256. flex-direction: column;
  6257. align-items: center;
  6258. .red-card-message {
  6259. font-size: 36rpx;
  6260. color: #ff3a1e;
  6261. margin: 180rpx 0 90rpx;
  6262. }
  6263. .red-card-tip {
  6264. font-size: 28rpx;
  6265. color: #ffecc3;
  6266. margin: 80rpx 0 40rpx;
  6267. }
  6268. .red-card-confirm-button {
  6269. width: 392rpx;
  6270. height: 96rpx;
  6271. line-height: 96rpx;
  6272. background: linear-gradient(180deg, #fff4d5 0%, #ffe5b1 100%);
  6273. border-radius: 48rpx;
  6274. font-weight: 600;
  6275. font-size: 36rpx;
  6276. color: #c32008;
  6277. text-align: center;
  6278. }
  6279. }
  6280. }
  6281. // 消息弹窗
  6282. .message-popup {
  6283. display: flex;
  6284. flex-direction: column;
  6285. position: relative;
  6286. align-items: center;
  6287. padding: 126rpx 48rpx 0;
  6288. width: 554rpx;
  6289. box-sizing: border-box;
  6290. background: linear-gradient(180deg, #E2FCEF 0%, rgba(226, 252, 239, 0) 100%);
  6291. border-radius: 62rpx 62rpx 0rpx 0rpx;
  6292. .message-close-icon {
  6293. position: absolute;
  6294. z-index: 9;
  6295. top: -74rpx;
  6296. width: 176rpx;
  6297. height: 176rpx;
  6298. }
  6299. .message-title {
  6300. font-weight: 600;
  6301. font-size: 36rpx;
  6302. color: #333333;
  6303. margin: 24rpx 0 28rpx;
  6304. }
  6305. .message-content {
  6306. margin-bottom: 52rpx;
  6307. font-weight: 400;
  6308. font-size: 28rpx;
  6309. color: #333333;
  6310. }
  6311. .message-confirm-button {
  6312. width: 358rpx;
  6313. height: 88rpx;
  6314. line-height: 88rpx;
  6315. background: linear-gradient(136deg, #38D97D 0%, #02B176 100%);
  6316. border-radius: 44rpx 44rpx 44rpx 44rpx;
  6317. font-weight: 600;
  6318. font-size: 32rpx;
  6319. text-align: center;
  6320. color: #FFFFFF;
  6321. }
  6322. .close {
  6323. position: absolute;
  6324. z-index: 9;
  6325. bottom: -168rpx;
  6326. width: 64rpx;
  6327. height: 64rpx;
  6328. }
  6329. }
  6330. // 中奖弹窗
  6331. .prize-popup {
  6332. width: 504rpx;
  6333. padding: 40rpx 40rpx 30rpx;
  6334. box-sizing: border-box;
  6335. display: flex;
  6336. flex-direction: column;
  6337. border-radius: 20rpx;
  6338. align-items: center;
  6339. background: linear-gradient(180deg, #f7823f 0%, #ffd4be 27%, #ffffff 100%);
  6340. position: relative;
  6341. .prize-header-image {
  6342. width: 311rpx;
  6343. position: absolute;
  6344. top: -122rpx;
  6345. left: 50%;
  6346. transform: translateX(-50%);
  6347. }
  6348. .prize-title {
  6349. color: #c32008;
  6350. font-size: 34rpx;
  6351. font-weight: 600;
  6352. margin: 20rpx 0 40rpx;
  6353. }
  6354. .prize-info-section {
  6355. width: 100%;
  6356. display: flex;
  6357. justify-content: space-between;
  6358. align-items: center;
  6359. font-size: 28rpx;
  6360. margin: 10rpx 0;
  6361. .prize-level {
  6362. font-weight: 600;
  6363. }
  6364. }
  6365. .prize-tip {
  6366. font-size: 28rpx;
  6367. color: #414141;
  6368. margin: 40rpx 0;
  6369. }
  6370. .prize-action-button {
  6371. width: 200rpx;
  6372. height: 70rpx;
  6373. line-height: 70rpx;
  6374. background: linear-gradient(180deg, #ff7c30 0%, #ff3a1e 100%);
  6375. border-radius: 28rpx;
  6376. font-weight: 500;
  6377. font-size: 32rpx;
  6378. color: #ffffff;
  6379. text-align: center;
  6380. }
  6381. }
  6382. // 未中奖弹窗
  6383. .no-prize-popup {
  6384. width: 504rpx;
  6385. padding: 40rpx 40rpx 30rpx;
  6386. box-sizing: border-box;
  6387. display: flex;
  6388. flex-direction: column;
  6389. border-radius: 20rpx;
  6390. align-items: center;
  6391. position: relative;
  6392. .no-prize-image {
  6393. margin-top: 40rpx;
  6394. width: 300rpx;
  6395. height: 300rpx;
  6396. }
  6397. .no-prize-tip {
  6398. font-size: 36rpx;
  6399. color: #414141;
  6400. margin: 40rpx 0;
  6401. }
  6402. .no-prize-confirm-button {
  6403. width: 220rpx;
  6404. height: 80rpx;
  6405. line-height: 80rpx;
  6406. background: linear-gradient(180deg, #fdfbb8 0%, #b79243 100%);
  6407. border-radius: 28rpx;
  6408. font-weight: 500;
  6409. font-size: 32rpx;
  6410. color: #ffffff;
  6411. text-align: center;
  6412. }
  6413. }
  6414. // 中奖记录弹窗
  6415. .winning-record-popup {
  6416. position: relative;
  6417. height: 800rpx;
  6418. .winning-record-header-bg {
  6419. position: absolute;
  6420. top: -125rpx;
  6421. left: 50%;
  6422. width: 311rpx;
  6423. transform: translateX(-50%);
  6424. }
  6425. .winning-record-background {
  6426. width: 100%;
  6427. height: 100%;
  6428. }
  6429. .winning-record-content {
  6430. position: absolute;
  6431. top: 50rpx;
  6432. color: #fff;
  6433. width: 100%;
  6434. padding: 0 36rpx;
  6435. box-sizing: border-box;
  6436. .winning-record-title {
  6437. text-align: center;
  6438. font-size: 40rpx;
  6439. font-weight: 500;
  6440. margin-bottom: 40rpx;
  6441. }
  6442. .winning-record-header {
  6443. display: flex;
  6444. justify-content: space-between;
  6445. text-align: center;
  6446. font-size: 34rpx;
  6447. margin-bottom: 40rpx;
  6448. .header-column {
  6449. &.time-column {
  6450. width: 45%;
  6451. }
  6452. &.status-column {
  6453. width: 20%;
  6454. }
  6455. &.prize-column {
  6456. width: 35%;
  6457. }
  6458. }
  6459. }
  6460. .winning-record-list {
  6461. height: 500rpx;
  6462. .winning-record-item {
  6463. display: flex;
  6464. justify-content: space-between;
  6465. text-align: center;
  6466. font-size: 34rpx;
  6467. margin-bottom: 20rpx;
  6468. .record-time {
  6469. width: 45%;
  6470. font-size: 30rpx;
  6471. }
  6472. .record-status-button {
  6473. width: 20%;
  6474. background-color: #fff;
  6475. border-radius: 20rpx;
  6476. color: #f4410b;
  6477. }
  6478. .record-status {
  6479. width: 20%;
  6480. }
  6481. .record-prize {
  6482. width: 35%;
  6483. }
  6484. }
  6485. }
  6486. .no-winning-records {
  6487. font-size: 36rpx;
  6488. margin-top: 150rpx;
  6489. text-align: center;
  6490. }
  6491. }
  6492. }
  6493. // 观众列表弹窗
  6494. .viewers-list-popup {
  6495. position: relative;
  6496. height: 40vh;
  6497. padding: 40rpx 0rpx;
  6498. box-sizing: border-box;
  6499. display: flex;
  6500. flex-direction: column;
  6501. .viewers-list-title {
  6502. font-size: 32rpx;
  6503. text-align: center;
  6504. }
  6505. .viewers-scroll-list {
  6506. flex: 1;
  6507. margin-top: 50rpx;
  6508. overflow-y: auto;
  6509. padding: 0 40rpx;
  6510. .viewer-list-item {
  6511. display: flex;
  6512. align-items: center;
  6513. font-size: 28rpx;
  6514. margin: 20rpx 0;
  6515. .rank-number {
  6516. width: 50rpx;
  6517. margin-right: 10rpx;
  6518. font-weight: normal;
  6519. &.rank-1 {
  6520. color: #FF3B30;
  6521. font-weight: bold;
  6522. }
  6523. &.rank-2 {
  6524. color: #FF9500;
  6525. font-weight: bold;
  6526. }
  6527. &.rank-3 {
  6528. color: #FFCC00;
  6529. font-weight: bold;
  6530. }
  6531. &:not(.rank-1):not(.rank-2):not(.rank-3) {
  6532. color: #8E8E93;
  6533. }
  6534. }
  6535. .viewer-avatar-placeholder {
  6536. width: 72rpx;
  6537. height: 72rpx;
  6538. border-radius: 50%;
  6539. display: flex;
  6540. align-items: center;
  6541. justify-content: center;
  6542. background-color: #8978e2;
  6543. .avatar-initial {
  6544. color: #ffffff;
  6545. font-size: 24rpx;
  6546. }
  6547. }
  6548. .viewer-name {
  6549. margin-left: 16rpx;
  6550. font-size: 30rpx;
  6551. }
  6552. }
  6553. }
  6554. }
  6555. // 更多操作弹窗
  6556. .more-actions-popup {
  6557. border-radius: 20rpx 0 0 20rpx;
  6558. padding: 70rpx 30rpx;
  6559. display: flex;
  6560. justify-content: space-between;
  6561. .more-action-item {
  6562. display: flex;
  6563. flex-direction: column;
  6564. align-items: center;
  6565. .action-icon {
  6566. width: 48rpx;
  6567. height: 48rpx;
  6568. }
  6569. .action-label {
  6570. color: #1e1e1e;
  6571. text-align: center;
  6572. margin-top: 10rpx;
  6573. }
  6574. }
  6575. }
  6576. // 商品弹窗
  6577. .shopping-popup {
  6578. padding: 22rpx 16rpx;
  6579. .shopping-header {
  6580. display: flex;
  6581. justify-content: space-between;
  6582. align-items: center;
  6583. padding: 0 16rpx 22rpx;
  6584. .search-input-container {
  6585. width: 414rpx;
  6586. height: 76rpx;
  6587. background: #ffffff;
  6588. border-radius: 36rpx;
  6589. margin-left: 20rpx;
  6590. padding: 0 32rpx;
  6591. box-sizing: border-box;
  6592. font-size: 24rpx;
  6593. margin-right: 24rpx;
  6594. display: flex;
  6595. align-items: center;
  6596. color: #000;
  6597. .search-icon {
  6598. width: 24rpx;
  6599. margin-right: 16rpx;
  6600. }
  6601. }
  6602. .shopping-action-button {
  6603. display: flex;
  6604. flex-direction: column;
  6605. align-items: center;
  6606. font-size: 20rpx;
  6607. color: #222222;
  6608. .action-button-icon {
  6609. width: 48rpx;
  6610. height: 48rpx;
  6611. }
  6612. .action-button-label {
  6613. text-align: center;
  6614. }
  6615. }
  6616. }
  6617. .products-list {
  6618. height: 30vh;
  6619. overflow: hidden;
  6620. .product-item {
  6621. display: flex;
  6622. align-items: center;
  6623. padding: 20rpx 16rpx;
  6624. background: #ffffff;
  6625. border-radius: 16rpx;
  6626. margin-bottom: 16rpx;
  6627. .product-image-container {
  6628. width: 200rpx;
  6629. height: 200rpx;
  6630. border-radius: 16rpx;
  6631. overflow: hidden;
  6632. position: relative;
  6633. margin-right: 24rpx;
  6634. .product-image {
  6635. width: 100%;
  6636. height: 100%;
  6637. }
  6638. .product-index-label {
  6639. position: absolute;
  6640. top: 0;
  6641. width: 64rpx;
  6642. height: 40rpx;
  6643. background: var(--normal-bg);
  6644. border-radius: 16rpx 0rpx 16rpx 0rpx;
  6645. text-align: center;
  6646. font-weight: 500;
  6647. font-size: 28rpx;
  6648. color: var(--text-color);
  6649. }
  6650. }
  6651. .product-info {
  6652. flex: 1;
  6653. .product-name {
  6654. font-weight: 500;
  6655. font-size: 30rpx;
  6656. color: #000000;
  6657. margin-bottom: 10rpx;
  6658. }
  6659. .product-sales {
  6660. font-size: 22rpx;
  6661. color: #e69a22;
  6662. height: 56rpx;
  6663. }
  6664. .product-action-section {
  6665. display: flex;
  6666. justify-content: space-between;
  6667. align-items: center;
  6668. .product-price {
  6669. color: #ff5c03;
  6670. font-size: 22rpx;
  6671. font-weight: 500;
  6672. .price-symbol {
  6673. font-size: 20rpx;
  6674. font-weight: 600;
  6675. }
  6676. .price-integer {
  6677. font-size: 36rpx;
  6678. font-weight: bold;
  6679. }
  6680. }
  6681. .product-action-buttons {
  6682. display: flex;
  6683. align-items: center;
  6684. text-align: center;
  6685. line-height: 56rpx;
  6686. .collect-button {
  6687. width: 72rpx;
  6688. height: 100%;
  6689. background: #f5f7fa;
  6690. border-radius: 8rpx 0rpx 0rpx 8rpx;
  6691. .collect-icon {
  6692. width: 36rpx;
  6693. height: 36rpx;
  6694. vertical-align: middle;
  6695. }
  6696. }
  6697. .buy-button {
  6698. width: 152rpx;
  6699. background: linear-gradient(270deg, #ff5c03 0%, #ffac64 100%);
  6700. border-radius: 0rpx 8rpx 8rpx 0rpx;
  6701. font-weight: 500;
  6702. font-size: 30rpx;
  6703. color: #ffffff;
  6704. &.disabled {
  6705. background: #cccccc;
  6706. }
  6707. }
  6708. }
  6709. }
  6710. }
  6711. }
  6712. }
  6713. }
  6714. // 优惠券弹窗
  6715. .coupon-popup {
  6716. position: fixed;
  6717. bottom: 140rpx;
  6718. right: 100rpx;
  6719. z-index: 5;
  6720. border-radius: 20rpx;
  6721. width: 320rpx;
  6722. .coupon-container {
  6723. width: 100%;
  6724. position: relative;
  6725. .coupon-background {
  6726. height: 452rpx;
  6727. width: 100%;
  6728. }
  6729. .coupon-header {
  6730. position: absolute;
  6731. height: 120rpx;
  6732. top: -120rpx;
  6733. left: 0;
  6734. width: 100%;
  6735. z-index: 6;
  6736. }
  6737. .coupon-close-button {
  6738. position: absolute;
  6739. right: 10rpx;
  6740. top: 10rpx;
  6741. width: 40rpx;
  6742. height: 40rpx;
  6743. z-index: 99;
  6744. }
  6745. .coupon-content {
  6746. width: 100%;
  6747. position: absolute;
  6748. top: 20rpx;
  6749. display: flex;
  6750. flex-direction: column;
  6751. align-items: center;
  6752. color: #fff;
  6753. .coupon-name {
  6754. font-weight: 500;
  6755. font-size: 30rpx;
  6756. margin: 16rpx 0 12rpx;
  6757. }
  6758. .coupon-price {
  6759. font-size: 40rpx;
  6760. .coupon-price-integer {
  6761. font-size: 56rpx;
  6762. font-weight: 600;
  6763. }
  6764. }
  6765. .coupon-condition,
  6766. .coupon-description,
  6767. .coupon-validity {
  6768. font-weight: 500;
  6769. font-size: 30rpx;
  6770. margin: 5rpx 0;
  6771. }
  6772. .coupon-description {
  6773. margin-top: 26rpx;
  6774. }
  6775. .coupon-get-button {
  6776. background: linear-gradient(270deg, #fffce1 0%, #ffeaaf 100%);
  6777. color: #ff0004;
  6778. text-align: center;
  6779. padding: 16rpx 0;
  6780. border-radius: 40rpx;
  6781. font-weight: 500;
  6782. font-size: 30rpx;
  6783. width: 70%;
  6784. margin-top: 26rpx;
  6785. }
  6786. }
  6787. }
  6788. }
  6789. }
  6790. }
  6791. </style>