referenceliving.vue 236 KB

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