| 1234567891011121314151617181920212223242526272829303132333435363738394041424344454647484950515253545556575859606162636465666768697071727374757677787980818283848586878889909192939495969798991001011021031041051061071081091101111121131141151161171181191201211221231241251261271281291301311321331341351361371381391401411421431441451461471481491501511521531541551561571581591601611621631641651661671681691701711721731741751761771781791801811821831841851861871881891901911921931941951961971981992002012022032042052062072082092102112122132142152162172182192202212222232242252262272282292302312322332342352362372382392402412422432442452462472482492502512522532542552562572582592602612622632642652662672682692702712722732742752762772782792802812822832842852862872882892902912922932942952962972982993003013023033043053063073083093103113123133143153163173183193203213223233243253263273283293303313323333343353363373383393403413423433443453463473483493503513523533543553563573583593603613623633643653663673683693703713723733743753763773783793803813823833843853863873883893903913923933943953963973983994004014024034044054064074084094104114124134144154164174184194204214224234244254264274284294304314324334344354364374384394404414424434444454464474484494504514524534544554564574584594604614624634644654664674684694704714724734744754764774784794804814824834844854864874884894904914924934944954964974984995005015025035045055065075085095105115125135145155165175185195205215225235245255265275285295305315325335345355365375385395405415425435445455465475485495505515525535545555565575585595605615625635645655665675685695705715725735745755765775785795805815825835845855865875885895905915925935945955965975985996006016026036046056066076086096106116126136146156166176186196206216226236246256266276286296306316326336346356366376386396406416426436446456466476486496506516526536546556566576586596606616626636646656666676686696706716726736746756766776786796806816826836846856866876886896906916926936946956966976986997007017027037047057067077087097107117127137147157167177187197207217227237247257267277287297307317327337347357367377387397407417427437447457467477487497507517527537547557567577587597607617627637647657667677687697707717727737747757767777787797807817827837847857867877887897907917927937947957967977987998008018028038048058068078088098108118128138148158168178188198208218228238248258268278288298308318328338348358368378388398408418428438448458468478488498508518528538548558568578588598608618628638648658668678688698708718728738748758768778788798808818828838848858868878888898908918928938948958968978988999009019029039049059069079089099109119129139149159169179189199209219229239249259269279289299309319329339349359369379389399409419429439449459469479489499509519529539549559569579589599609619629639649659669679689699709719729739749759769779789799809819829839849859869879889899909919929939949959969979989991000100110021003100410051006100710081009101010111012101310141015101610171018101910201021102210231024102510261027102810291030103110321033103410351036103710381039104010411042104310441045104610471048104910501051105210531054105510561057105810591060106110621063106410651066106710681069107010711072107310741075107610771078107910801081108210831084108510861087108810891090109110921093109410951096109710981099110011011102110311041105110611071108110911101111111211131114111511161117111811191120112111221123112411251126112711281129113011311132113311341135113611371138113911401141114211431144114511461147114811491150115111521153115411551156115711581159116011611162116311641165116611671168116911701171117211731174117511761177117811791180118111821183118411851186118711881189119011911192119311941195119611971198119912001201120212031204120512061207120812091210121112121213121412151216121712181219122012211222122312241225122612271228122912301231123212331234123512361237123812391240124112421243124412451246124712481249125012511252125312541255125612571258125912601261126212631264126512661267126812691270127112721273127412751276127712781279128012811282128312841285128612871288128912901291129212931294129512961297129812991300130113021303130413051306130713081309131013111312131313141315131613171318131913201321132213231324132513261327132813291330133113321333133413351336133713381339134013411342134313441345134613471348134913501351135213531354135513561357135813591360136113621363136413651366136713681369137013711372137313741375137613771378137913801381138213831384138513861387138813891390139113921393139413951396139713981399140014011402140314041405140614071408140914101411141214131414141514161417141814191420142114221423142414251426142714281429143014311432143314341435143614371438143914401441144214431444144514461447144814491450145114521453145414551456145714581459146014611462146314641465146614671468146914701471147214731474147514761477147814791480148114821483148414851486148714881489149014911492149314941495149614971498149915001501150215031504150515061507150815091510151115121513151415151516151715181519152015211522152315241525152615271528152915301531153215331534153515361537153815391540154115421543154415451546154715481549155015511552155315541555155615571558155915601561156215631564156515661567156815691570157115721573157415751576157715781579158015811582158315841585158615871588158915901591159215931594159515961597159815991600160116021603160416051606160716081609161016111612161316141615161616171618161916201621162216231624162516261627162816291630163116321633163416351636163716381639164016411642164316441645164616471648164916501651165216531654165516561657165816591660166116621663166416651666166716681669167016711672167316741675167616771678167916801681168216831684168516861687168816891690169116921693169416951696169716981699170017011702170317041705170617071708170917101711171217131714171517161717171817191720172117221723172417251726172717281729173017311732173317341735173617371738173917401741174217431744174517461747174817491750175117521753175417551756175717581759176017611762176317641765176617671768176917701771177217731774177517761777177817791780178117821783178417851786178717881789179017911792179317941795179617971798179918001801180218031804180518061807180818091810181118121813181418151816181718181819182018211822182318241825182618271828182918301831183218331834183518361837183818391840184118421843184418451846184718481849185018511852185318541855185618571858185918601861186218631864186518661867186818691870187118721873187418751876187718781879188018811882188318841885188618871888188918901891189218931894189518961897189818991900190119021903190419051906190719081909191019111912191319141915191619171918191919201921192219231924192519261927192819291930193119321933193419351936193719381939194019411942194319441945194619471948194919501951195219531954195519561957195819591960196119621963196419651966196719681969197019711972197319741975197619771978197919801981198219831984198519861987198819891990199119921993199419951996199719981999200020012002200320042005200620072008200920102011201220132014201520162017201820192020202120222023202420252026202720282029203020312032203320342035203620372038203920402041204220432044204520462047204820492050205120522053205420552056205720582059206020612062206320642065206620672068206920702071207220732074207520762077207820792080208120822083208420852086208720882089209020912092209320942095209620972098209921002101210221032104210521062107210821092110211121122113211421152116211721182119212021212122212321242125212621272128212921302131213221332134213521362137213821392140214121422143214421452146214721482149215021512152215321542155215621572158215921602161216221632164216521662167216821692170217121722173217421752176217721782179218021812182218321842185218621872188218921902191219221932194219521962197219821992200220122022203220422052206220722082209221022112212221322142215221622172218221922202221222222232224222522262227222822292230223122322233223422352236223722382239224022412242224322442245224622472248224922502251225222532254225522562257225822592260226122622263226422652266226722682269227022712272227322742275227622772278227922802281228222832284228522862287228822892290229122922293229422952296229722982299230023012302230323042305230623072308230923102311231223132314231523162317231823192320232123222323232423252326232723282329233023312332233323342335233623372338233923402341234223432344234523462347234823492350235123522353235423552356235723582359236023612362236323642365236623672368236923702371237223732374237523762377237823792380238123822383238423852386238723882389239023912392239323942395239623972398239924002401240224032404240524062407240824092410241124122413241424152416241724182419242024212422242324242425242624272428242924302431243224332434243524362437243824392440244124422443244424452446244724482449245024512452245324542455245624572458245924602461246224632464246524662467246824692470247124722473247424752476247724782479248024812482248324842485248624872488248924902491249224932494249524962497249824992500250125022503250425052506250725082509251025112512251325142515251625172518251925202521252225232524252525262527252825292530253125322533253425352536253725382539254025412542254325442545254625472548254925502551255225532554255525562557255825592560256125622563256425652566256725682569257025712572257325742575257625772578257925802581258225832584258525862587258825892590259125922593259425952596259725982599260026012602260326042605260626072608260926102611261226132614261526162617261826192620262126222623262426252626262726282629263026312632263326342635263626372638263926402641264226432644264526462647264826492650265126522653265426552656265726582659266026612662266326642665266626672668266926702671267226732674267526762677267826792680268126822683268426852686268726882689269026912692269326942695269626972698269927002701270227032704270527062707270827092710271127122713271427152716271727182719272027212722272327242725272627272728272927302731273227332734273527362737273827392740274127422743274427452746274727482749275027512752275327542755275627572758275927602761276227632764276527662767276827692770277127722773277427752776277727782779278027812782278327842785278627872788278927902791279227932794279527962797279827992800280128022803280428052806280728082809281028112812281328142815281628172818281928202821282228232824282528262827282828292830283128322833283428352836283728382839284028412842284328442845284628472848284928502851285228532854285528562857285828592860286128622863286428652866286728682869287028712872287328742875287628772878287928802881288228832884288528862887288828892890289128922893289428952896289728982899290029012902290329042905290629072908290929102911291229132914291529162917291829192920292129222923292429252926292729282929293029312932293329342935293629372938293929402941294229432944294529462947294829492950295129522953295429552956295729582959296029612962296329642965296629672968296929702971297229732974297529762977297829792980298129822983298429852986298729882989299029912992299329942995299629972998299930003001300230033004300530063007300830093010301130123013301430153016301730183019302030213022302330243025302630273028302930303031303230333034303530363037303830393040304130423043304430453046304730483049305030513052305330543055305630573058305930603061306230633064306530663067306830693070307130723073307430753076307730783079308030813082308330843085308630873088308930903091309230933094309530963097309830993100310131023103310431053106310731083109311031113112311331143115311631173118311931203121312231233124312531263127312831293130313131323133313431353136313731383139314031413142314331443145314631473148314931503151315231533154315531563157315831593160316131623163316431653166316731683169317031713172317331743175317631773178317931803181318231833184318531863187318831893190319131923193319431953196319731983199320032013202320332043205320632073208320932103211321232133214321532163217321832193220322132223223322432253226322732283229323032313232323332343235323632373238323932403241324232433244324532463247324832493250325132523253325432553256325732583259326032613262326332643265326632673268326932703271327232733274327532763277327832793280328132823283328432853286328732883289329032913292329332943295329632973298329933003301330233033304330533063307330833093310331133123313331433153316331733183319332033213322332333243325332633273328332933303331333233333334333533363337333833393340334133423343334433453346334733483349335033513352335333543355335633573358335933603361336233633364336533663367336833693370337133723373337433753376337733783379338033813382338333843385338633873388338933903391339233933394339533963397339833993400340134023403340434053406340734083409341034113412341334143415341634173418341934203421342234233424342534263427342834293430343134323433343434353436343734383439344034413442344334443445344634473448344934503451345234533454345534563457345834593460346134623463346434653466346734683469347034713472347334743475347634773478347934803481348234833484348534863487348834893490349134923493349434953496349734983499350035013502350335043505350635073508350935103511351235133514351535163517351835193520352135223523352435253526352735283529353035313532353335343535353635373538353935403541354235433544354535463547354835493550355135523553355435553556355735583559356035613562356335643565356635673568356935703571357235733574357535763577357835793580358135823583358435853586358735883589359035913592359335943595359635973598359936003601360236033604360536063607360836093610361136123613361436153616361736183619362036213622362336243625362636273628362936303631363236333634363536363637363836393640364136423643364436453646364736483649365036513652365336543655365636573658365936603661366236633664366536663667366836693670367136723673367436753676367736783679368036813682368336843685368636873688368936903691369236933694369536963697369836993700370137023703370437053706370737083709371037113712371337143715371637173718371937203721372237233724372537263727372837293730373137323733373437353736373737383739374037413742374337443745374637473748374937503751375237533754375537563757375837593760376137623763376437653766376737683769377037713772377337743775377637773778377937803781378237833784378537863787378837893790379137923793379437953796379737983799380038013802380338043805380638073808380938103811381238133814381538163817381838193820382138223823382438253826382738283829383038313832383338343835383638373838383938403841384238433844384538463847384838493850385138523853385438553856385738583859386038613862386338643865386638673868386938703871387238733874387538763877387838793880388138823883388438853886388738883889389038913892389338943895389638973898389939003901390239033904390539063907390839093910391139123913391439153916391739183919392039213922392339243925392639273928392939303931393239333934393539363937393839393940394139423943394439453946394739483949395039513952395339543955395639573958395939603961396239633964396539663967396839693970397139723973397439753976397739783979398039813982398339843985398639873988398939903991399239933994399539963997399839994000400140024003400440054006400740084009401040114012401340144015401640174018401940204021402240234024402540264027402840294030403140324033403440354036403740384039404040414042404340444045404640474048404940504051405240534054405540564057405840594060406140624063406440654066406740684069407040714072407340744075407640774078407940804081408240834084408540864087408840894090409140924093409440954096409740984099410041014102410341044105410641074108410941104111411241134114411541164117411841194120412141224123412441254126412741284129413041314132413341344135413641374138413941404141414241434144414541464147414841494150415141524153415441554156415741584159416041614162416341644165416641674168416941704171417241734174417541764177417841794180418141824183418441854186418741884189419041914192419341944195419641974198419942004201420242034204420542064207420842094210421142124213421442154216421742184219422042214222422342244225422642274228422942304231423242334234423542364237423842394240424142424243424442454246424742484249425042514252425342544255425642574258425942604261426242634264426542664267426842694270427142724273427442754276427742784279428042814282428342844285428642874288428942904291429242934294429542964297429842994300430143024303430443054306430743084309431043114312431343144315431643174318431943204321432243234324432543264327432843294330433143324333433443354336433743384339434043414342434343444345434643474348434943504351435243534354435543564357435843594360436143624363436443654366436743684369437043714372437343744375437643774378437943804381438243834384438543864387438843894390439143924393439443954396439743984399440044014402440344044405440644074408440944104411441244134414441544164417441844194420442144224423442444254426442744284429443044314432443344344435443644374438443944404441444244434444444544464447444844494450445144524453445444554456445744584459446044614462446344644465446644674468446944704471447244734474447544764477447844794480448144824483448444854486448744884489449044914492449344944495449644974498449945004501450245034504450545064507450845094510451145124513451445154516451745184519452045214522452345244525452645274528452945304531453245334534453545364537453845394540454145424543454445454546454745484549455045514552455345544555455645574558455945604561456245634564456545664567456845694570457145724573457445754576457745784579458045814582458345844585458645874588458945904591459245934594459545964597459845994600460146024603460446054606460746084609461046114612461346144615461646174618461946204621462246234624462546264627462846294630463146324633463446354636463746384639464046414642464346444645464646474648464946504651465246534654465546564657465846594660466146624663466446654666466746684669467046714672467346744675467646774678467946804681468246834684468546864687468846894690469146924693469446954696469746984699470047014702470347044705470647074708470947104711471247134714471547164717471847194720472147224723472447254726472747284729473047314732473347344735473647374738473947404741474247434744474547464747474847494750475147524753475447554756475747584759476047614762476347644765476647674768476947704771477247734774477547764777477847794780478147824783478447854786478747884789479047914792479347944795479647974798479948004801480248034804480548064807480848094810481148124813481448154816481748184819482048214822482348244825482648274828482948304831483248334834483548364837483848394840484148424843484448454846484748484849485048514852485348544855485648574858485948604861486248634864486548664867486848694870487148724873487448754876487748784879488048814882488348844885488648874888488948904891489248934894489548964897489848994900490149024903490449054906490749084909491049114912491349144915491649174918491949204921492249234924492549264927492849294930493149324933493449354936493749384939494049414942494349444945494649474948494949504951495249534954495549564957495849594960496149624963496449654966496749684969497049714972497349744975497649774978497949804981498249834984498549864987498849894990499149924993499449954996499749984999500050015002500350045005500650075008500950105011501250135014501550165017501850195020502150225023502450255026502750285029503050315032503350345035503650375038503950405041504250435044504550465047504850495050505150525053505450555056505750585059506050615062506350645065506650675068506950705071507250735074507550765077507850795080508150825083508450855086508750885089509050915092509350945095509650975098509951005101510251035104510551065107510851095110511151125113511451155116511751185119512051215122512351245125512651275128512951305131513251335134513551365137513851395140514151425143514451455146514751485149515051515152515351545155515651575158515951605161516251635164516551665167516851695170517151725173517451755176517751785179518051815182518351845185518651875188518951905191519251935194519551965197519851995200520152025203520452055206520752085209521052115212521352145215521652175218521952205221522252235224522552265227522852295230523152325233523452355236523752385239524052415242524352445245524652475248524952505251525252535254525552565257525852595260526152625263526452655266526752685269527052715272527352745275527652775278527952805281528252835284528552865287528852895290529152925293529452955296529752985299530053015302530353045305530653075308530953105311531253135314531553165317531853195320532153225323532453255326532753285329533053315332533353345335533653375338533953405341534253435344534553465347534853495350535153525353535453555356535753585359536053615362536353645365536653675368536953705371537253735374537553765377537853795380538153825383538453855386538753885389539053915392539353945395539653975398539954005401540254035404540554065407540854095410541154125413541454155416541754185419542054215422542354245425542654275428542954305431543254335434543554365437543854395440544154425443544454455446544754485449545054515452545354545455545654575458545954605461546254635464546554665467546854695470547154725473547454755476547754785479548054815482548354845485548654875488548954905491549254935494549554965497549854995500550155025503550455055506550755085509551055115512551355145515551655175518551955205521552255235524552555265527552855295530553155325533553455355536553755385539554055415542554355445545554655475548554955505551555255535554555555565557555855595560556155625563556455655566556755685569557055715572557355745575557655775578557955805581558255835584558555865587558855895590559155925593559455955596559755985599560056015602560356045605560656075608560956105611561256135614561556165617561856195620562156225623562456255626562756285629563056315632563356345635563656375638563956405641564256435644564556465647564856495650565156525653565456555656565756585659566056615662566356645665566656675668566956705671567256735674567556765677567856795680568156825683568456855686568756885689569056915692569356945695569656975698569957005701570257035704570557065707570857095710571157125713571457155716571757185719572057215722572357245725572657275728572957305731573257335734573557365737573857395740574157425743574457455746574757485749575057515752575357545755575657575758575957605761576257635764576557665767576857695770577157725773577457755776577757785779578057815782578357845785578657875788578957905791579257935794579557965797579857995800580158025803580458055806580758085809581058115812581358145815581658175818581958205821582258235824582558265827582858295830583158325833583458355836583758385839584058415842584358445845584658475848584958505851585258535854585558565857585858595860586158625863586458655866586758685869587058715872587358745875587658775878587958805881588258835884588558865887588858895890589158925893589458955896589758985899590059015902590359045905590659075908590959105911591259135914591559165917591859195920592159225923592459255926592759285929593059315932593359345935593659375938593959405941594259435944594559465947594859495950595159525953595459555956595759585959596059615962596359645965596659675968596959705971597259735974597559765977597859795980598159825983598459855986598759885989599059915992599359945995599659975998599960006001600260036004600560066007600860096010601160126013601460156016601760186019602060216022602360246025602660276028602960306031603260336034603560366037603860396040604160426043604460456046604760486049605060516052605360546055605660576058605960606061606260636064606560666067606860696070607160726073607460756076607760786079608060816082608360846085608660876088608960906091609260936094609560966097609860996100610161026103610461056106610761086109611061116112611361146115611661176118611961206121612261236124612561266127612861296130613161326133613461356136613761386139614061416142614361446145614661476148614961506151615261536154615561566157615861596160616161626163616461656166616761686169617061716172617361746175617661776178617961806181618261836184618561866187618861896190619161926193619461956196619761986199620062016202620362046205620662076208620962106211621262136214621562166217621862196220 |
- <template>
- <view class="content ">
- <view class="notice-box" v-if="isLogin&&isAddKf==1">
-
- <view class="notice-marquee-wrap">
- <view class="notice-marquee-track">
- <view class="notice-text"><image src="/static/images/course/notice.png"></image>{{notice || '央广网独家溯源 全品类100%经过国标检测'}}</view>
- <view class="notice-text"><image src="/static/images/course/notice.png"></image>{{notice || '央广网独家溯源 全品类100%经过国标检测'}}</view>
- <!-- <view class="notice-text"><image src="/static/images/notice.png"></image>央广网独家溯源 全品类100%经过国标检测</view> -->
- </view>
- </view>
- </view>
- <view class="video-box" :style="{'height':isShu?'calc(100vh - 264rpx)':'420rpx'}" >
- <image v-if="!isLogin || isAddKf!=1" class="video-poster" :src="courseInfo.imgUrl" mode="aspectFill">
- </image>
- <view
- v-else
- class="video-container videovip-video-container"
- :style="{'height':isShu?'100%':'420rpx'}"
- :videovipVideoConfig="videovipVideoConfig"
- :change:videovipVideoConfig="xgplayer.initJs"
- :videoPlayStatus="videoPlayStatus"
- :change:videoPlayStatus="xgplayer.changeVideo"
- :exitFullscreen="exitFullscreen"
- :change:exitFullscreen="xgplayer.handleExitFullscreen"
- >
- <view
- v-if="videoUrl"
- id="video-content-box"
- class="videovip-xg-player"
- :style="{'width':'100%','height':isShu?'100%':'420rpx'}"
- ></view>
- <view v-if="remainTime > 0" class="progress-countdown videovip-video-overlay">
- <view class="progress-title">完课积分</view>
- <view class="progress-text">
- <view class="progress-text-label">倒计时</view>
- <view style="font-size: 13px;">{{ formattedCountdown.hours||'00' }}:{{ formattedCountdown.minutes||'00' }}:{{ formattedCountdown.seconds||"00" }}</view>
- </view>
- </view>
- <!-- 虚拟下单跑马灯:视频顶层覆盖,向上滚动淡出切换 -->
- <view class="vip-order-cover-wrap vip-order-cover-wrap--triple videovip-video-overlay" v-if="showFakeMarqueeOnVideoCover && isTripleMarqueeMode && marqueeTriplePayloads.length">
- <view class="vip-order-cover-triple-panel vip-order-cover-triple-current" :class="[marqueeTripleSwitching ? 'vip-order-triple-leave' : '']">
- <view
- class="vip-order-cover-item vip-order-cover-triple-item"
- v-for="(row, idx) in marqueeTriplePayloads"
- :key="'triple-current-' + idx + '-' + row.nickname + row.timeOffset"
- :class="[row.type === 'self' ? 'vip-order-cover-self' : '']"
- >
- <view class="vip-order-cover-content" v-if="row.type === 'virtual' || row.type === 'self'">
- <view class="vip-order-seg vip-order-seg-user">{{ row.nickname }}{{ row.maskedId }}</view>
- <view class="vip-order-seg vip-order-seg-time">{{ row.timeOffset }}{{ row.suffix }}</view>
- </view>
- <view class="vip-order-cover-content" v-else>
- {{ row.fullText }}
- </view>
- </view>
- </view>
- <view v-if="marqueeTripleSwitching && marqueeTripleIncomingPayloads.length" class="vip-order-cover-triple-panel vip-order-cover-triple-incoming vip-order-triple-enter">
- <view
- class="vip-order-cover-item vip-order-cover-triple-item"
- v-for="(row, idx) in marqueeTripleIncomingPayloads"
- :key="'triple-incoming-' + idx + '-' + row.nickname + row.timeOffset"
- :class="[row.type === 'self' ? 'vip-order-cover-self' : '']"
- >
- <view class="vip-order-cover-content" v-if="row.type === 'virtual' || row.type === 'self'">
- <view class="vip-order-seg vip-order-seg-user">{{ row.nickname }}{{ row.maskedId }}</view>
- <view class="vip-order-seg vip-order-seg-time">{{ row.timeOffset }}{{ row.suffix }}</view>
- </view>
- <view class="vip-order-cover-content" v-else>
- {{ row.fullText }}
- </view>
- </view>
- </view>
- </view>
- <view class="vip-order-cover-wrap videovip-video-overlay" v-else-if="showFakeMarqueeOnVideoCover && marqueeDisplayPayload">
- <view
- class="vip-order-cover-item vip-order-cover-current"
- :class="[
- marqueeSwitching ? 'vip-order-leave' : '',
- marqueeDisplaySelf ? 'vip-order-cover-self' : ''
- ]"
- >
- <view class="vip-order-cover-content" v-if="marqueeDisplayPayload.type === 'virtual' || marqueeDisplayPayload.type === 'self'">
- <view class="vip-order-seg vip-order-seg-user">{{ marqueeDisplayPayload.nickname }}{{ marqueeDisplayPayload.maskedId }}</view>
- <view class="vip-order-seg vip-order-seg-time">{{ marqueeDisplayPayload.timeOffset }}{{ marqueeDisplayPayload.suffix }}</view>
- </view>
- <view class="vip-order-cover-content" v-else>
- {{ marqueeDisplayPayload.fullText }}
- </view>
- </view>
- <view
- v-if="marqueeSwitching && marqueeIncomingPayload"
- class="vip-order-cover-item vip-order-cover-incoming"
- :class="[
- 'vip-order-enter',
- marqueeIncomingSelf ? 'vip-order-cover-self' : ''
- ]"
- >
- <view class="vip-order-cover-content" v-if="marqueeIncomingPayload.type === 'virtual' || marqueeIncomingPayload.type === 'self'">
- <view class="vip-order-seg vip-order-seg-user">{{ marqueeIncomingPayload.nickname }}{{ marqueeIncomingPayload.maskedId }}</view>
- <view class="vip-order-seg vip-order-seg-time">{{ marqueeIncomingPayload.timeOffset }}{{ marqueeIncomingPayload.suffix }}</view>
- </view>
- <view class="vip-order-cover-content" v-else>
- {{ marqueeIncomingPayload.fullText }}
- </view>
- </view>
- </view>
- <view
- class="goods-cover videovip-video-overlay"
- v-if="isFull && showCardPopup"
- @tap.stop="goBuy(currentCardItem)"
- >
- <view class="goods-cover-hot" v-if="hasHotSaleTag(currentCardItem) && getProductHotCount(currentCardItem) > 0">
- <image style="height: 30px;" src="https://bjzmky-1323137866.cos.ap-chongqing.myqcloud.com/class/remai.png" mode="heightFix"></image>
- <view class="goods-cover-hot-text">{{ getProductHotCount(currentCardItem) }}</view>
- </view>
- <view class="goods-cover-inner">
- <view class="close-box" @tap.stop="closeCardPopup">
- <image style="width: 15px;height: 15px;" src="/static/images/course/close.png"></image>
- </view>
- <view class="goods-cover-img">
- <image
- v-if="currentCardItem && currentCardItem.images"
- style="width:150px;height:150px;object-fit:cover;"
- :src="currentCardItem.images"
- mode="aspectFill"
- ></image>
- </view>
- <view class="goods-cover-info">
- <view class="goods-cover-title">{{ currentCardItem.productName || '-' }}</view>
- <view class="goods-cover-bottom">
- <view class="goods-cover-tag">
- <image class="goods-cover-tag-bg" src="/static/images/course/pbg.png" mode="widthFix"></image>
- <view class="goods-cover-tag-text">惊喜价</view>
- </view>
- <view class="goods-cover-price">
- <view class="unit">¥</view>
- <view class="price">
- {{ currentCardItem.price || '0.00' }}
- </view>
- </view>
- </view>
- </view>
- </view>
- </view>
- </view>
- </view>
- <!-- 商品卡片弹窗 -->
- <view class="goods-card" :style="{'bottom':isShu?'280rpx':'220rpx'}" v-if="!isFull&&showCardPopup" @click.stop="goBuy(currentCardItem)">
- <view class="close-box" @click.stop="closeCardPopup">
- <image src="/static/images/course/close.png"></image>
- </view>
- <view class="goods-card-hot" v-if="hasHotSaleTag(currentCardItem) && getProductHotCount(currentCardItem) > 0">
- <image style="height: 56rpx;" src="https://bjzmky-1323137866.cos.ap-chongqing.myqcloud.com/class/remai.png" mode="heightFix"></image>
- <text class="goods-card-hot-count">{{ getProductHotCount(currentCardItem) }}</text>
- </view>
- <view class="goods-card-inner">
- <image class="goods-card-img" :src="currentCardItem.images" mode="aspectFill"></image>
- <view class="goods-card-info">
- <view class="goods-card-title">{{ currentCardItem.productName || '-' }}</view>
- <view class="goods-card-bottom">
- <view class="goods-card-tag">
- <image class="goods-card-tag-bg" src="/static/images/course/pbg.png" mode="widthFix"></image>
- <view class="goods-card-tag-text">惊喜价</view>
- </view>
- <view class="goods-card-price">
- <view class="unit">¥</view>
- <text class="price">
- {{ currentCardItem.price || '0.00' }}
- </text>
- </view>
- </view>
- </view>
- </view>
- </view>
- <!-- 评价 -->
- <view class="rating-box" :style="{paddingTop:visibleRatingTabCount == 1?'30rpx':'24rpx'}" v-if="isLogin&&isAddKf==1&&!isShu&&hasVisibleRatingTab">
- <image class="bg" src="https://bjzmky-1323137866.cos.ap-chongqing.myqcloud.com/app/vip/bg-back.png" mode="widthFix"></image>
- <view class="tab-Box" v-if="visibleRatingTabCount > 1">
- <view
- v-for="tab in ratingTabList"
- :key="tab.key"
- class="tab-item"
- :class="{ 'tab-item--active': tabIndex == tab.index }"
- @click="selecTab(tab.index)"
- >
- <view class="tab-item__surface">
- <image :src="tabIndex == tab.index ? tab.iconActive : tab.icon" mode="aspectFit"></image>
- <text class="tab-item__text">{{ tab.label }}</text>
- </view>
- </view>
- </view>
- <!-- 仅一个 Tab:单行左对齐标题,无选中态(顺序:精选留言 / 栏目介绍 / 评价得积分) -->
- <view class="tab-Box tab-Box--single" v-else-if="visibleRatingTabCount === 1">
- <view v-for="tab in ratingTabList" :key="tab.key" class="tab-item tab-item--single">
- <view class="tab-item__surface tab-item__surface--single">
- <image :src="tab.iconActive" mode="aspectFit"></image>
- <text class="tab-item__text tab-item__text--single">{{ tab.label }}</text>
- </view>
- </view>
- </view>
- <view class="rating-body" v-if="tabIndex == 2 && showTabReviewPoints">
- <view class="rating-ques-block" v-for="(item,index) in quesList" :key="index">
- <view class="title">{{item.title}}</view>
- <view class="sat-box">
- <view class="sat" v-for="(option,idx) in item.questionOption" :key="idx" :class="isRateOptionSelected(item, option)?'sat--active':''" @click="handleAnswer(item,option,index)">
- <view class="sat-img-wrap" :class="rateBounceIndex===(index + '_' + option.indexId)?'sat-img-bounce':''">
- <image :src="getRateOptionIcon(option, isRateOptionSelected(item, option), idx)" mode="aspectFit"></image>
- </view>
- <text :class="isRateOptionSelected(item, option)?'active':''">{{option.name}}</text>
- </view>
- </view>
- </view>
- </view>
- <view class="rating-body rating-body--plain" :style="{padding:courseInfo.courseIntroImg?'0rpx':'30rpx'}" v-if="tabIndex === 1 && showTabColumnIntro">
- <!-- <view class="title">{{ (courseInfo && courseInfo.title) || '栏目介绍' }}</view> -->
- <image
- class="rating-intro-cover-img"
- :src="courseInfo.courseIntroImg"
- mode="widthFix"
- ></image>
- </view>
- <view class="rating-body rating-body--featured" v-if="tabIndex == 0 && showTabFeaturedComments">
- <scroll-view
- scroll-y
- class="rating-msg-scroll"
- :show-scrollbar="false"
- lower-threshold="100"
- @scrolltolower="onFeaturedCommentScrollToLower"
- >
- <view v-if="featuredCommentLoading" class="rating-msg-empty">加载中...</view>
- <template v-else>
- <view
- class="rating-msg-item"
- v-for="(it, idx) in featuredCommentDisplayList"
- :key="it.commentId"
- >
- <view class="rating-msg-avatar-wrap">
- <image
- class="rating-msg-avatar"
- src="https://bjzmky-1323137866.cos.ap-chongqing.myqcloud.com/video/head.png"
- mode="aspectFill"
- />
- </view>
- <view class="rating-msg-main">
- <text class="rating-msg-name">{{ getCommentDisplayName(it) }}</text>
- <view class="rating-msg-text">{{ getCommentTextOnly(it) }}</view>
- <view v-if="getCommentVideoUrl(it)" class="rating-msg-media rating-msg-media--video">
- <view class="rating-msg-video-wrap">
- <featured-comment-xg-player
- ref="featuredCommentXg"
- :ref-in-for="true"
- :player-id="getFeaturedCommentVideoId(it, idx)"
- :video-url="getCommentVideoUrl(it)"
- :poster="getCommentVideoPoster(it)"
- />
- <view
- class="rating-msg-video-play-cover"
- @tap.stop="openFeaturedCommentMediaPreview(it, idx, 'video')"
- >
- <image
- class="rating-msg-video-play-icon"
- src="https://bjzmky-1323137866.cos.ap-chongqing.myqcloud.com/video/bofang.png"
- mode="aspectFit"
- />
- </view>
- </view>
- </view>
- <view
- v-else-if="commentImageUrls(it).length"
- class="rating-msg-media rating-msg-media--imgs"
- >
- <image
- v-for="(img, mi) in commentImageUrls(it)"
- :key="mi"
- :src="img"
- mode="widthFix"
- class="rating-msg-img"
- @click="openFeaturedCommentMediaPreview(it, idx, 'image', mi)"
- />
- </view>
- </view>
- </view>
- <view v-if="!featuredCommentDisplayList.length" class="rating-msg-empty">暂无精选留言</view>
- <view v-if="featuredCommentLoadingMore" class="rating-msg-load-more">加载中...</view>
- <view
- v-else-if="showFeaturedCommentNoMoreFooter"
- class="rating-msg-load-more rating-msg-load-more--done"
- >没有更多了</view>
- <!-- 底部锚点:发布成功后 scroll-into-view 定位到最新消息一侧,避免留在顶部 -->
- <view id="fc-scroll-anchor" class="rating-msg-scroll-anchor"></view>
- </template>
- </scroll-view>
- </view>
- </view>
- <!-- 温馨提示弹窗 -->
- <u-popup :show="tipsPopup" mode="center" :closeOnClickOverlay='true' @close='tipsPopup=!tipsPopup'
- :safeAreaInsetBottom='false' round='12'>
- <view class="tipsPopup-mask">
- <image class="red_envelope_top" :src="imgPath+'/app/image/red_envelope_img.png'" mode="aspectFill">
- </image>
- <view class="tipsPopup">
- <image class="tipsPopup-close" :src="imgPath+'/app/image/course_close_white_icon.png'"
- mode="aspectFill" @click="closeTipsPop"></image>
- <view class="tipsPopup-line">
- <view class="tipsPopup-box">
- <view class="tipsPopup-head">
- <image class="tipsPopup-head-title" :src="imgPath+'/app/image/tips_title_img.png'"
- mode="widthFix"></image>
- </view>
- <view class="tipsPopup-content">
- <view class="tipsPopup-content-title">亲爱的用户,</view>
- <view>您已经观看课程{{timepath}}的时间了,请注意休息并保持专注。</view>
- </view>
- <view class="tipsPopup-btn-box">
- <view class="tipsPopup-btn" @click="closeTipsPop">继续观看领奖励</view>
- </view>
- </view>
- </view>
- </view>
- </view>
- </u-popup>
- <!-- 答题弹窗 -->
- <u-popup :show="answerPopup" mode="center" @close="closepop()" @open="open" closeOnClickOverlay
- :safeAreaInsetBottom='false' round='12'>
- <view :class="errTitle == '恭喜你,回答正确' ? 'answerPopup-box bg':'answerPopup-box'">
- <!-- 正确 -->
- <image class="tipimg" v-if="errTitle == '恭喜你,回答正确'" :src="imgPath+'/app/image/course_answer_img.png'"
- mode="aspectFill"></image>
- <!-- 错误 -->
- <image class="tipimg" v-else :src="imgPath+'/app/image/course_answer_incorrectly_img.png'"
- mode="aspectFill">
- </image>
- <view class="answerPopup-title">{{errTitle}}</view>
- <view class="answerPopup-desc" v-html="errDesc"></view>
- <!-- 选择奖励 -->
- <!-- 错误题目 -->
- <view class="errQuesbox" v-if="errQues&&errQues.length>0">
- <view class="errQuesbox-item textOne" v-for="(it,index) in errQues" :key="index">{{it.title}}</view>
- </view>
- <view class="answerPopup-btn" v-if="errTitle == '恭喜你,回答正确'" @click="closeAnswerPopup">点击领取红包</view>
- <view class="tipsPopup-btn-box" v-else
- :style="{marginTop: errQues&&errQues.length>0 ? '40rpx':'54rpx'}">
- <view class="tipsPopup-btn" @click="closeAnswerPopup">{{remain > 0 ? '重新答题': '确认'}}</view>
- </view>
- </view>
- </u-popup>
- <!-- 客服二维码弹窗 -->
- <u-popup :show="kfPopup" mode="center" :mask-click="false" round='12' @close="kefpop">
- <view class="kfqrcode-box">
- <view class="justify-start align-center fs24 base-color-9">
- <view>{{userInfo.nickName || '用户'}}#</view>
- <view>{{userInfo.userId}}</view>
- </view>
- <view>请添加客服</view>
- <image class="kfqrcode" :src="qrcode" show-menu-by-longpress="true" mode="aspectFit"></image>
- <!-- <view v-show="qrcodeMsg" style="margin-top: 30rpx;" v-html="qrcodeMsg"></view> -->
- <!-- <image class="kfqrcode-close" :src="imgPath+'/app/image/course_close_white_icon.png'" mode="aspectFill"
- @click="closeKFPop"></image> -->
- </view>
- </u-popup>
- <u-popup :show="timepop" mode="center" round='12'>
- <view class="timepopbox center column">
- <view class="fs40 bold ">不在看课时间范围内</view>
- <view class="mtb20">看课时间</view>
- <view>{{videocont.startDateTime}}</view>
- <view>至</view>
- <view>{{videocont.endDateTime}}</view>
- <view class="base-bg-orange colorf p20 radius50 mt20" @click="getH5CourseVideoDetails">刷新时间</view>
- </view>
- </u-popup>
- <u-popup :show="isCart" @close="closeShop" round="20rpx" bgColor="#fff">
- <scroll-view class="scroll-view" style="height:500rpx;box-sizing: border-box;padding: 24rpx;" scroll-y="true" enable-flex>
- <goodsList ref="goodsList" :treatmentPackage="displayProductList" :hotCountMap="productHotCountMap" :urlOption="urlOption"></goodsList>
- </scroll-view>
- </u-popup>
- <u-popup :show="isMore" @close="closeMore" round="20rpx" bgColor="#fff">
- <view class="more-actions-popup">
- <view class="more-action-item"
- @click="navgetTo('/pages_user/user/storeOrder?status=')">
- <u-icon name="shopping-cart" color="#FF233C" size="40"></u-icon>
- <view class="action-label">我的订单</view>
- </view>
- <view class="more-action-item"
- @click="navgetTo('/pages_points/integralLogsList')">
- <u-icon name="calendar" color="#FF233C" size="40"></u-icon>
- <view class="action-label">积分记录</view>
- </view>
- <view class="more-action-item" @click="navgetTo('/pages_points/integralGoodsList')">
- <u-icon name="gift" color="#FF233C" size="40"></u-icon>
- <view class="action-label">兑换好礼</view>
- </view>
- </view>
- </u-popup>
- <u-popup
- :show="featuredMediaActionSheetShow"
- mode="bottom"
- round="20rpx"
- bgColor="#fff"
- :duration="300"
- @close="closeFeaturedMediaActionSheet"
- >
- <view class="fc-media-actions-sheet">
- <view class="fc-media-actions-sheet-item" @tap.stop="onFeaturedMediaSheetPick(0)">相册图片</view>
- <view class="fc-media-actions-sheet-item" @tap.stop="onFeaturedMediaSheetPick(1)">相册视频</view>
- <!-- <view class="fc-media-actions-sheet-gap"></view> -->
- <view
- class="fc-media-actions-sheet-item fc-media-actions-sheet-cancel"
- @tap.stop="closeFeaturedMediaActionSheet"
- >取消</view>
- </view>
- </u-popup>
- <!-- <view class="footer-tips">重庆云联融智提供技术支持</view> -->
- <!-- footer -->
- <view class="footer" v-if="videoId">
- <view class="btns" :style="{'justify-content':isLogin&&isAddKf==1&&remainTime==0&&hasVisibleRatingTab&&!showTabColumnIntro?'space-between':'flex-end'}">
- <template>
- <button class="author-btn" @click="openList" v-if="isLogin&&isAddKf==1&&isShu&&(showTabFeaturedComments || showTabColumnIntro || showTabReviewPoints)">{{ showTabFeaturedComments ? '去留言' : showTabColumnIntro ? '栏目介绍' : '评价得积分' }}
- <image v-if="showTabReviewPoints&&!showTabFeaturedComments&&!showTabColumnIntro" src="/static/images/course/jifen.png"></image></button>
- <button class="author-btn" @click="submit" v-if="isLogin&&isAddKf==1&&remainTime==0&&!isShu&&tabIndex==2">评价得积分
- <image src="/static/images/course/jifen.png"></image>
- </button>
- </template>
- <button class="author-btn" @click="submit" v-if="!isLogin&&isAddKf!==1">立即学习</button>
- <!-- 竖屏 isShu 下 rating 区隐藏;若仍停留在精选留言 tab,勿在 footer 展示留言框,只保留「评价得积分」按钮(与 _expandLayoutIfPortraitFeaturedCommentsOnly 竖屏体验一致) -->
- <view v-if="tabIndex==0 && showTabFeaturedComments&&!isShu" class="rating-msg-input-shell">
- <view
- v-if="featuredCommentMedia"
- class="rating-msg-media-pill"
- @click.stop="clearFeaturedCommentMedia"
- >
- <image
- v-if="featuredCommentMedia.type === 'image'"
- class="rating-msg-media-thumb"
- :src="featuredCommentMedia.path"
- mode="aspectFill"
- />
- <image
- v-else
- class="rating-msg-media-thumb"
- :src="featuredCommentMedia.thumbTempPath || featuredCommentMedia.path"
- mode="aspectFill"
- />
- <view v-if="featuredCommentMedia.type === 'video'" class="rating-msg-media-badge">视频</view>
- <text class="rating-msg-media-x">×</text>
- </view>
- <view class="rating-msg-input rating-msg-input-trigger" @tap.stop="openFeaturedCommentComposer">
- <text
- class="rating-msg-input-trigger-text"
- :class="{ 'is-ph': !featuredCommentInput }"
- >{{ featuredCommentInput || '善言善语结善缘~' }}</text>
- </view>
- <view class="rating-msg-input-icon" @tap.stop="openFeaturedCommentComposer">
- <image src="https://bjzmky-1323137866.cos.ap-chongqing.myqcloud.com/video/upimg.png"></image>
- </view>
- </view>
- <view class="author-cart" v-show="isLogin && isAddKf==1">
- <view class="more-box">
- <image src="/static/images/course/more24.png" @click="showMore"></image>
- <view class="tips">更多</view>
- </view>
- <image class="xianshi" v-if="showTreatment==0&&displayProductList.length>0&&!cardPopup" src="/static/images/course/xg.png"></image>
- <view class="more-box" v-if="showTreatment==0">
- <image @click="showCart" src="/static/images/course/cart.png"></image>
- <view class="tips">去下单</view>
- </view>
- </view>
- </view>
- </view>
- <!-- 更多操作弹窗 -->
- <view>
- <u-modal :show="showfalse" title="提示" :content='contentmsg' @confirm='showfalse=false'></u-modal>
- </view>
- <u-loading-page :loading="viewload" iconSize="32" loadingColor="#3c9cff" fontSize="24"
- :loading-text="loadingtext"></u-loading-page>
- <template v-if="tabIndex==0 && showTabFeaturedComments && !(showTabReviewPoints && isShu)">
- <view
- v-if="featuredCommentComposerActive"
- class="featured-comment-composer-mask"
- @tap="onFeaturedCommentComposerMaskTap"
- ></view>
- <view
- v-if="featuredCommentComposerActive"
- class="featured-comment-composer-wrap"
- :style="{ bottom: featuredCommentKeyboardBottomPx + 'px' }"
- >
- <view class="featured-comment-composer-inner">
- <view
- v-if="featuredCommentMedia"
- class="fc-composer-media-pill"
- @click.stop="clearFeaturedCommentMedia"
- >
- <image
- v-if="featuredCommentMedia.type === 'image'"
- class="fc-composer-media-thumb"
- :src="featuredCommentMedia.path"
- mode="aspectFill"
- />
- <image
- v-else
- class="fc-composer-media-thumb"
- :src="featuredCommentMedia.thumbTempPath || featuredCommentMedia.path"
- mode="aspectFill"
- />
- <view v-if="featuredCommentMedia.type === 'video'" class="fc-composer-media-badge">视频</view>
- <text class="fc-composer-media-x">×</text>
- </view>
- <view class="featured-comment-composer-input-row">
- <textarea
- class="fc-composer-input"
- v-model="featuredCommentInput"
- type="text"
- confirm-type="done"
- :show-confirm-bar="false"
- placeholder="善言善语结善缘~"
- placeholder-class="fc-composer-ph"
- :focus="featuredCommentInputFocused"
- :adjust-position="false"
- @blur="onFeaturedCommentComposerInputBlur"
- />
- <view class="fc-composer-input-icon" @click.stop="onFeaturedPickMedia">
- <image src="https://bjzmky-1323137866.cos.ap-chongqing.myqcloud.com/video/upimg.png"></image>
- </view>
- </view>
- <view class="featured-comment-composer-publish" @tap.stop="submitFeaturedComment">发布</view>
- </view>
- </view>
- </template>
- <!-- 精选留言:图片/视频放大查看(自定义弹窗,替代系统预览) -->
- <view
- v-if="featuredCommentMediaPreviewShow"
- class="fc-media-preview-mask"
- @tap="closeFeaturedCommentMediaPreview"
- >
- <view class="fc-media-preview-card" @tap.stop="featuredCommentPreviewCardTap">
- <view
- v-if="featuredCommentMediaPreviewMode === 'image' && featuredCommentMediaPreviewUrls.length"
- class="fc-media-preview-img-box"
- >
- <view class="fc-media-preview-slide">
- <image
- class="fc-media-preview-main-img"
- :src="featuredCommentMediaPreviewUrls[featuredCommentMediaPreviewIndex]"
- mode="aspectFit"
- />
- </view>
- </view>
- <view
- v-else-if="featuredCommentMediaPreviewMode === 'video' && featuredCommentMediaPreviewVideoUrl"
- class="fc-media-preview-video-box"
- >
- <video
- id="fc-media-preview-video"
- class="fc-media-preview-video"
- :src="featuredCommentMediaPreviewVideoUrl"
- :poster="featuredCommentMediaPreviewPoster"
- controls
- :show-center-play-btn="true"
- :show-play-btn="true"
- :show-fullscreen-btn="false"
- :auto-pause-if-open-native="false"
- :auto-pause-if-navigate="true"
- :enable-progress-gesture="true"
- :show-background-playback-button="false"
- @play="onFeaturedMediaPreviewModalVideoPlay"
- />
- </view>
- <view class="fc-media-preview-footer">
- <scroll-view
- v-if="featuredCommentMediaPreviewMode === 'image' && featuredCommentMediaPreviewUrls.length > 1"
- scroll-x
- class="fc-media-preview-thumbs"
- :show-scrollbar="false"
- >
- <view class="fc-media-preview-thumbs-inner">
- <image
- v-for="(tu, ti) in featuredCommentMediaPreviewUrls"
- :key="'t-' + ti"
- class="fc-media-preview-thumb"
- :class="{ 'fc-media-preview-thumb--active': ti === featuredCommentMediaPreviewIndex }"
- :src="tu"
- mode="aspectFill"
- @tap.stop="setFeaturedMediaPreviewIndex(ti)"
- />
- </view>
- </scroll-view>
- <view v-else class="fc-media-preview-thumbs-spacer" />
- <view class="fc-media-preview-close" @tap.stop="closeFeaturedCommentMediaPreview">
- <!-- <text class="fc-media-preview-close-x">×</text> -->
- <u-icon name="close-circle" color="#fff" size="30"></u-icon>
- </view>
- </view>
- </view>
- </view>
- <courseExpiration v-if="showExpiration" :code="resCode" :msg="resMsg" :qrcode="qrcode"
- :userId="user && userInfo.userId ? userInfo.userId : ''"></courseExpiration>
- </view>
- </template>
- <script>
- import goodsList from "./components/goodsList.vue"
- import { hasHotSaleTag, getProductHotKey, clampHotSaleCount } from './utils/productHotSale.js'
- import {
- generateRandomString
- } from "@/utils/common.js"
- import {
- buildFakeOrderPool
- } from './utils/videovipFakeMarquee.js'
- import dayjs from 'dayjs';
- import {
- mapGetters
- } from 'vuex';
- import courseExpiration from './components/courseExpiration.vue'
- import FeaturedCommentXgPlayer from './components/FeaturedCommentXgPlayer.vue'
- import {
- getErrMsg,
- getH5CourseByVideoId,
- getH5CourseVideoDetails,
- courseAnswer,
- getFinishCourseVideo,
- getIsAddKf,
- getInternetTraffic,
- getIntegralByH5Video,
- sendReward,
- getRemainTime,
- getCommentList,
- addCommentWithMedia
- } from "@/api/courseLook.js"
- import {
- getConfigByKey
- } from "@/api/user.js"
- export default {
- components: {
- courseExpiration,
- goodsList,
- FeaturedCommentXgPlayer
- },
- data() {
- return {
- displayType:'',
- isMore:false,//更多
- isCart:false,//购物车
- isShu:false,//竖屏默认
- rateBounceIndex: null,
- _rateBounceTimer: null,
- rateList:[{
- id:0,
- icon:'https://bjzmky-1323137866.cos.ap-chongqing.myqcloud.com/app/vip/hsat.png',
- name:'非常满意',
- selIcon:'https://bjzmky-1323137866.cos.ap-chongqing.myqcloud.com/app/vip/hsat_sel.png'
- },
- {
- id:1,
- icon:'https://bjzmky-1323137866.cos.ap-chongqing.myqcloud.com/app/vip/sat.png',
- name:'满意',
- selIcon:'https://bjzmky-1323137866.cos.ap-chongqing.myqcloud.com/app/vip/sat_sel.png'
- },
- {
- id:2,
- icon:'https://bjzmky-1323137866.cos.ap-chongqing.myqcloud.com/app/vip/fari.png',
- name:'一般',
- selIcon:'https://bjzmky-1323137866.cos.ap-chongqing.myqcloud.com/app/vip/fari_sel.png'
- },
- {
- id:3,
- icon:'https://bjzmky-1323137866.cos.ap-chongqing.myqcloud.com/app/vip/unsat.png',
- name:'不满意',
- selIcon:'https://bjzmky-1323137866.cos.ap-chongqing.myqcloud.com/app/vip/unsat_sel.png'
- }
- ],
- resMsg: "",
- resCode: '',
- showExpiration: false,
- videoItem: {},
- viewload: true,
- loadingtext: "数据加载中...",
- baseUrl: uni.getStorageSync('requestPath'),
- // 1 红包 2 积分
- rewardType: [{
- name: '红包奖励',
- value: 1
- }, {
- name: '积分奖励',
- value: 2
- }],
- currentReward: 1,
- player: null,
- /** 西瓜播放器是否已初始化 */
- xgPlayerInited: false,
- videoReloadKey: 0,
- exitFullscreen: '',
- videoPlayStatus: {
- status: '',
- seekTime: 0,
- time: 0
- },
- loading: true,
- progress: 0,
- code: null,
- statusBarHeight: uni.getSystemInfoSync().statusBarHeight,
- scrollTop: 0,
- height: '0px',
- isLogin: false,
- videoUrl: "",
- videoId: "",
- /** 恢复前台 / seek 后短时间内跳过「快进」判定,避免 iOS、鸿蒙息屏后首帧 currentTime 抖动误报 */
- _antiSeekSuppressExpireAt: 0,
- _videoPageHadShownOnce: false,
- //现在的时长
- playTime: 0,
- //总时长
- duration: 0,
- playDuration: 0,
- // 用于续播
- playDurationSeek: 0,
- // 温馨提醒时间节点,
- tipsTime: 0,
- tipsOpen: false,
- config: {},
- courseInfo: {},
- quesList: [],
- lineList: [],
- // 错题
- errQues: [],
- // 答题机会
- remain: 0,
- errTitle: "",
- errDesc: "",
- showPlay: true,
- showControls: false,
- playStatus: "",
- isFull: false,
- fullscreenToggleLock: false,
- fullscreenToggleTimer: null,
- isAddKf: 0,
- lineIndex: 0,
- // 是否展开
- isExpand: true,
- textHeight: 0, //文本高度
- qwUserId: "",
- qrcode: "",
- corpId: "",
- periodId: "", //营期id
- companyUserId: "", //销售id
- companyId: "", //公司id
- courseId: "", //课程id
- qrcodeMsg: "",
- urlOption: {},
- bufferRate: 0, // 缓冲时间
- uuId: "",
- isEnded: false,
- /** 当前是否处于播放中 */
- videoPlaying: false,
- // 是否允许拖动进度条
- // linkType: 0,
- ip: null,
- checked: true,
- isFinish: 0, // 是否完课
- interval: null,
- intervalIntegral: null, // 积分定时
- options: {
- sources: [{
- src: ""
- }],
- poster: "",
- live: false /* 是否直播 */ ,
- controls: true,
- autoplay: false,
- licenseUrl: 'https://license.vod2.myqcloud.com/license/v2/1323137866_1/v_cube.license', // license 地址,参考准备工作部分,在视立方控制台申请 license 后可获得 licenseUrl,
- LicenseKey: 'bcc5bd9a14b798b48c52ff005a21d926',
- controlBar: {
- volumePanel: false,
- playbackRateMenuButton: false,
- QualitySwitcherMenuButton: false,
- // progressControl: false
- },
- plugins: {
- // ProgressMarker: false,
- ContextMenu: {
- statistic: false
- }
- },
- },
- // 错误请求次数
- errorCount: 0,
- answerPopup: false,
- sortLink: "",
- // 课程是否过期
- isExpire: false,
- menuButtonLeft: 281,
- menuButtonH: 45,
- timer: null,
- flag: false,
- msg: '',
- poster: '',
- userInfo: {},
- timeid: '',
- videocont: {},
- timepop: false,
- appToken: '',
- kfPopup: false,
- iskftype: 0,
- courseLogo: '',
- isquestion: false,
- tipsPopup: false,
- timepath: '3分之1',
- tipsTime2: 0,
- projectId: '',
- showfalse: false,
- contentmsg: null,
- currentId: 0,
- showTreatment: 1,
- treatmentPackage: [],
- // 商品栏展示列表(根据上架/下架时间过滤)
- displayProductList: [],
- // 商品卡片弹窗
- cardPopup: false,
- currentCardItem: null,
- // 热卖标签数量(小黄车与弹窗卡片共用,按 productId)
- productHotCountMap: {},
- productHotTimer: null,
- // 手动关闭后,当前卡片在其有效时段内不再重复弹出
- dismissedCardKey: '',
- // 完课积分倒计时(秒)
- remainTime: 0,
- // 完课积分总倒计时时长(秒),用于计算百分比
- totalRemainTime: 0,
- // 完课积分倒计时定时器
- countdownTimer: null,
- // 是否已从接口拉取到倒计时数据(避免 remainTime 初始为 0 时提前放开答题)
- remainTimeReady: false,
- // 倒计时结束后是否已补发过一次看课记录
- hasReportedAfterCountdown: false,
- notice:'',//跑马灯,
- isHeight:false,
- // 跑马灯数据就绪门禁:避免首次进入时使用旧状态导致闪现
- marqueeDataReady: false,
- // 虚拟下单跑马灯
- fakeOrderPool: [],
- marqueeTriplePayloads: [],
- marqueeTripleIncomingPayloads: [],
- marqueeTripleSwitching: false,
- marqueeCurrentText: '',
- marqueeSelfHighlight: false,
- marqueeDisplayPayload: null,
- marqueeDisplaySelf: false,
- marqueeIncomingPayload: null,
- marqueeIncomingSelf: false,
- marqueeSwitching: false,
- pendingSelfMarqueeFirst: false,
- _fakeMarqueeStarted: false,
- /** 与 computed fakeMarqueeEligible 上次值比较,避免无 watch 时在 updateProductAndCardDisplay 高频调用中反复重置防抖 */
- _fakeMarqueeEligiblePrev: undefined,
- _marqueeStartDebounceTimer: null,
- _fakeMarqueeTimer: null,
- _marqueeSwitchTimer: null,
- _marqueeTripleSwitchTimer: null,
- /** 本人下单条按缓存 ts 与当前时间差定时回显刷新 */
- _selfMarqueeClockTimer: null,
- tabIndex:0,
- /** 与 quesList 同源:接口 questionBankList,用于 Tab「评价得积分」是否展示 */
- questionBankList: [],
- /** getCommentList 的 defaultPageInfo.list:控制精选留言 Tab;与用户 featuredCommentList 在 featuredCommentDisplayList 中合并展示 */
- defaultPageInfoList: [],
- featuredCommentList: [],
- featuredCommentInput: '',
- featuredCommentLoading: false,
- featuredCommentLoadingMore: false,
- /** 下一页页码,与 getCommentList pageNum 一致 */
- featuredCommentPageNum: 1,
- featuredCommentPageSize: 10,
- featuredCommentHasMore: true,
- /** getCommentList 最近一次返回:用户评论总条数(与运营 defaultPageInfo.total 分离) */
- featuredCommentUserTotal: NaN,
- /** getCommentList 最近一次返回:运营精选总条数 */
- featuredCommentDefaultTotal: NaN,
- featuredCommentSending: false,
- /** 精选留言待发送的本地媒体:type image|video,path 临时路径,thumbTempPath 视频封面 */
- featuredCommentMedia: null,
- /**
- * 从相册/相机选图或选视频返回时小程序会触发 onShow,否则会误跑 getH5CourseByVideo / getH5CourseVideoDetails。
- * 与 uni.uploadFile 发布评论无直接关系;选媒体前置 true,onShow 消费一次或 complete 兜底清除。
- */
- videovipSuppressOnShowCourseFetchOnce: false,
- /** 从相册选留言图/视频前主课若在播,上传(含压缩)结束后恢复播放 */
- _shouldResumeCourseVideoAfterFeaturedUpload: false,
- /**
- * 打开精选留言输入前主课是否在播(快照)。
- * 键盘/选图页返回时常先触发 @pause,videoPlaying 已为 false,仅靠选媒体瞬间的 videoPlaying 会漏标,导致发布后不调 play。
- */
- _courseWasPlayingBeforeFeaturedCommentOpen: false,
- /** 精选留言选图/选视频:用底部 u-popup 替代 uni.showActionSheet,避免鸿蒙等机型原生弹层未贴底 */
- featuredMediaActionSheetShow: false,
- /** 精选留言:自定义大图/视频预览弹窗 */
- featuredCommentMediaPreviewShow: false,
- featuredCommentMediaPreviewMode: 'image',
- featuredCommentMediaPreviewUrls: [],
- featuredCommentMediaPreviewIndex: 0,
- featuredCommentMediaPreviewVideoUrl: '',
- featuredCommentMediaPreviewPoster: '',
- /** 精选留言 scroll-view 滚到底部(与 id=fc-scroll-anchor 配合) */
- featuredCommentScrollIntoView: '',
- /** 精选留言:键盘上方白底输入条 */
- featuredCommentComposerActive: false,
- featuredCommentInputFocused: false,
- featuredCommentKeyboardBottomPx: 0,
- }
- },
- filters: {
- numberToChinese(number) {
- if (number) {
- const chineseNumber = ['一', '二', '三', '四', '五', '六', '七', '八', '九'];
- return chineseNumber[number - 1];
- } else {
- return ''
- }
- },
- },
- computed: {
- isAnswer() {
- return (item, name) => {
- if (item.type == 1) {
- return item.answer == name
- } else if (item.type == 2) {
- const array = item.answer.split(',')
- return array.some(i => i == name)
- } else {
- return false
- }
- }
- },
- imgPath() {
- return this.$store.state.imgpath
- },
- appid() {
- //console.log('this.$store.state.appid',this.$store.state.appid)
- return this.$store.state.appid
- },
- // 格式化后的倒计时
- formattedCountdown() {
- return this.formatCountdown(this.remainTime);
- },
- // 倒计时百分比
- countdownPercentage() {
- return this.getCountdownPercentage();
- },
- /** 评价得积分:questionBankList 有题 */
- showTabReviewPoints() {
- return Array.isArray(this.questionBankList) && this.questionBankList.length > 0
- },
- /** 栏目介绍:已配置 courseIntroImg */
- showTabColumnIntro() {
- const img = this.courseInfo && this.courseInfo.courseIntroImg
- return typeof img === 'string' && img.trim() !== ''
- },
- /** 精选留言:仅当运营配置的 defaultPageInfo.list 有数据时展示 Tab */
- showTabFeaturedComments() {
- return Array.isArray(this.defaultPageInfoList) && this.defaultPageInfoList.length > 0
- },
- /** 精选留言列表:有运营 defaultPageInfo 时先展示用户新评论 featuredCommentList,再拼接运营配置项(同 id 去重) */
- featuredCommentDisplayList() {
- const def = Array.isArray(this.defaultPageInfoList) ? this.defaultPageInfoList : []
- if (!def.length) return []
- const user = Array.isArray(this.featuredCommentList) ? this.featuredCommentList : []
- return this._mergeFeaturedUserComments(user.slice(), def)
- },
- /** 用户评论已加载完且无加载中时展示 */
- showFeaturedCommentNoMoreFooter() {
- if (this.featuredCommentLoading || this.featuredCommentLoadingMore) return false
- const list = this.featuredCommentDisplayList
- if (!Array.isArray(list) || !list.length) return false
- return !this.featuredCommentHasMore
- },
- visibleRatingTabCount() {
- return this.ratingTabList.length
- },
- /** 评价区 Tab 展示顺序:精选留言 → 栏目介绍 → 评价得积分(仅渲染有数据的项) */
- ratingTabList() {
- const tabs = []
- if (this.showTabFeaturedComments) {
- tabs.push({
- key: 'featured',
- index: 0,
- label: '精选留言',
- icon: 'https://bjzmky-1323137866.cos.ap-chongqing.myqcloud.com/video/pl.png',
- iconActive: 'https://bjzmky-1323137866.cos.ap-chongqing.myqcloud.com/video/pl-sel.png'
- })
- }
- if (this.showTabColumnIntro) {
- tabs.push({
- key: 'column',
- index: 1,
- label: '栏目介绍',
- icon: 'https://bjzmky-1323137866.cos.ap-chongqing.myqcloud.com/video/des.png',
- iconActive: 'https://bjzmky-1323137866.cos.ap-chongqing.myqcloud.com/video/des-sel.png'
- })
- }
- if (this.showTabReviewPoints) {
- tabs.push({
- key: 'review',
- index: 2,
- label: '评价得积分',
- icon: 'https://bjzmky-1323137866.cos.ap-chongqing.myqcloud.com/video/sel.png',
- iconActive: 'https://bjzmky-1323137866.cos.ap-chongqing.myqcloud.com/video/zan-sel.png'
- })
- }
- return tabs
- },
- hasVisibleRatingTab() {
- return this.visibleRatingTabCount > 0
- },
- //...mapGetters(['coureLogin']),
- /** 小黄车商品中「最早上架」时间点(秒),用于跑马灯起始展示 */
- firstShelfSecondsAmongProducts() {
- const list = this.treatmentPackage || []
- if (!list.length) return Infinity
- let minSec = Infinity
- for (let i = 0; i < list.length; i++) {
- const t = list[i].onShelfTime
- if (!this._vipShelfTimeValid(t)) continue
- const sec = this._vipTimeStrToSec(t)
- if (sec > 0 && sec < minSec) minSec = sec
- }
- return minSec === Infinity ? Infinity : minSec
- },
- fakeMarqueeEligible() {
- // 商品/回放数据未完成刷新前,不允许启动展示,避免首次闪现
- if (!this.marqueeDataReady) return false
- if (this.showTreatment !== 0) return false
- // 以“当前应展示的商品列表非空”作为跑马灯出现条件
- // 这样能对齐你说的“商品上架才出现”,避免只用最早上架秒点导致的一帧差异
- return Array.isArray(this.displayProductList) && this.displayProductList.length > 0
- },
- // 竖屏课打开小黄车 goodsList 弹窗,或打开精选留言大图/视频预览 fc-media-preview-mask 时,先藏住视频上的虚拟下单条,关闭后再显(不影响底层跑马灯计时)
- showFakeMarqueeOnVideoCover() {
- if (!this.fakeMarqueeEligible) return false
- if (this.displayType === 'portrait' && (this.isCart || this.featuredCommentMediaPreviewShow)) return false
- return true
- },
- isTripleMarqueeMode() {
- return !!(this.isShu || this.isFull)
- },
- /** 精选留言输入框弹键盘时暂时隐藏商品卡片,收起后按 cardPopup 逻辑恢复 */
- showCardPopup() {
- if (!this.cardPopup || !this.currentCardItem) return false
- if (
- this.featuredCommentComposerActive &&
- (this.featuredCommentKeyboardBottomPx > 0 || this.featuredCommentInputFocused)
- ) return false
- return true
- },
- videovipVideoConfig() {
- const allowSeek = this.isFinish == 1 || this.isEnded
- return {
- url: this.videoUrl || '',
- poster: this.poster || '',
- playerId: 'video-content-box',
- isFast: allowSeek ? 1 : 0,
- videoReloadKey: this.videoReloadKey,
- displayType: this.displayType || 'landscape',
- layoutShuKey: this.isShu ? 1 : 0,
- time: Date.now()
- }
- },
- },
- watch: {
- // coureLogin: {
- // immediate: true, // 页面一进入就检查一次
- // handler(val) {
- // console.log(val, '----')
- // if (val == 2 && this.isLogin) {
- // console.log("看课AppToken失效,请重新登录")
- // this.isLogin = false
- // this.isAddKf = 0
- // this.$showLoginPage()
- // }
- // }
- // },
- isTripleMarqueeMode(now, was) {
- if (!now || was) return
- if (!this.fakeMarqueeEligible || !this._fakeMarqueeStarted) return
- this.syncTripleMarqueeImmediate()
- },
- /** 精选留言 Tab 出现后默认高亮 */
- showTabFeaturedComments(now, was) {
- if (now && was !== true) {
- this._selectDefaultRatingTab()
- }
- },
- /**
- * 评价 Tab 晚于栏目介绍返回时,_syncRatingTabIndex 可能暂落在 tab=1;
- * 若有精选留言则仍默认高亮 tab=0,否则仅校正到当前第一个可见 Tab。
- */
- showTabReviewPoints(now, was) {
- if (now && was !== true) {
- this._selectDefaultRatingTab()
- }
- },
- /** Tab 数量增加且含精选留言时,默认高亮精选留言 */
- visibleRatingTabCount(n, o) {
- if (n <= 0 || !this.showTabFeaturedComments) return
- if (o != null && n <= o) return
- this._selectDefaultRatingTab()
- },
- // tabIndex(n) {
- // if (n !== 2) {
- // this._closeFeaturedCommentComposerUi()
- // this.closeFeaturedMediaActionSheet()
- // }
- // }
- displayProductList: {
- handler() {
- this.syncProductHotCounts()
- },
- deep: true,
- },
- cardPopup() {
- this.syncProductHotCounts()
- },
- currentCardItem() {
- this.syncProductHotCounts()
- },
- },
- onLoad(option) {
- this.getWebviewUrl()
- // uni.$on('vipMsg', (data) => {
- // console.log(4444, data)
- // this.contentmsg = data
- // this.showfalse = true
- // uni.showToast({
- // icon: 'none',
- // title: data,
- // duration: 5000
- // });
- // })
- this.getVideoContainerHeight()
- this._lockAppPortrait()
- // this.code = option.code
- this.userInfo = this.$getUserInfo()
- this.appToken = uni.getStorageSync('companyUserInfo')
- console.log('option', option)
- if (!option.course) {
- const keys = decodeURIComponent(Object.keys(option)[0]);
- this.urlOption = JSON.parse(keys.split('course=')[1])
- } else {
- this.urlOption = option.course ? JSON.parse(decodeURIComponent(option.course)) : {}
- }
- console.log(this.urlOption)
- uni.setStorageSync('H5course', this.urlOption)
- this.videoId = this.urlOption.videoId
- this.courseId = this.urlOption.courseId
- this.periodId = this.urlOption.periodId
- this.companyId = this.urlOption.companyId
- this.companyUserId = this.urlOption.companyUserId
- this.projectId = this.urlOption.projectId
- this.timeid = this.urlOption.id
- console.log(this.urlOption)
- console.log(decodeURIComponent(option.course))
- // this.sortLink = this.urlOption.link || ''
- //this.getMenuButton()
- // #ifndef H5
- this._featuredCommentKbHandler = (res) => {
- const h = res && res.height != null ? res.height : 0
- const prev = this.featuredCommentKeyboardBottomPx
- this.featuredCommentKeyboardBottomPx = h
- if (
- this.featuredCommentComposerActive &&
- prev > 0 &&
- h === 0
- ) {
- this.featuredCommentComposerActive = false
- this.featuredCommentInputFocused = false
- }
- }
- //uni.onKeyboardHeightChange(this._featuredCommentKbHandler)
- // #endif
- },
- onShow() {
- this.userInfo = this.$getUserInfo()
- this.tipsOpen = false
- this.isExpand = true
- this.uuId = generateRandomString(16)
- this.refreshVipPurchaseMarqueeFlag()
- if (this._videoPageHadShownOnce) {
- this._touchAntiSeekSuppress(2000)
- } else {
- this._videoPageHadShownOnce = true
- }
- if (this.videovipSuppressOnShowCourseFetchOnce) {
- this.videovipSuppressOnShowCourseFetchOnce = false
- return
- }
- // 每次进入页面先关闭门禁,并清空旧跑马灯状态,等 getH5CourseVideoDetails 拉完数据再开启
- this.stopFakeMarqueeLoop()
- this.marqueeDataReady = false
- this._fakeMarqueeEligiblePrev = undefined
- if (this.videoId) {
- this.getH5CourseByVideo()
- }
- if (this.$isLogin()) {
- this.isLogin = true
- if (this.isAddKf == 1 && this.userInfo.userId) {
- this.getH5CourseVideoDetails()
- } else {
- this.getIsAddKf()
- }
- } else {
- this.isLogin = false
- }
- // if(this.sortLink){
- // this.getLink()
- // } else {
- // uni.showToast({
- // title: 'sortLink is not found',
- // icon: 'none'
- // });
- // }
- },
- mounted() {
- // this.getIP()
- //this.getHeight()
- },
- onHide() {
- this.closeFeaturedCommentMediaPreview()
- this._closeFeaturedCommentComposerUi()
- this._lockAppPortrait()
- this._xgPause()
- // 精选留言调起相册/相机时也会触发 onHide,勿停虚拟跑马灯(与 onShow 抑制拉课共用同一标志)
- if (!this.videovipSuppressOnShowCourseFetchOnce) {
- this.stopFakeMarqueeLoop()
- }
- // 页面隐藏时停止完课积分倒计时
- this.stopCountdown()
- this.stopProductHotTimer()
- this._flushWatchProgress()
- // if (this.interval != null) {
- // clearInterval(this.interval)
- // this.interval = null
- // }
- },
- onPageResize(){
- this.getVideoContainerHeight();
- },
- onUnload() {
- this.closeFeaturedCommentMediaPreview()
- this._lockAppPortrait()
- this._videoPageHadShownOnce = false
- if (this.interval != null) {
- clearInterval(this.interval)
- this.interval = null
- }
- if (this.fullscreenToggleTimer) {
- clearTimeout(this.fullscreenToggleTimer)
- this.fullscreenToggleTimer = null
- }
- if (this._rateBounceTimer) {
- clearTimeout(this._rateBounceTimer)
- this._rateBounceTimer = null
- }
- this.fullscreenToggleLock = false
- // 页面卸载时清理完课积分倒计时
- this.stopCountdown()
- this.stopProductHotTimer()
- this.clearIntegral()
- this.stopFakeMarqueeLoop()
- this.fakeOrderPool = []
- this._flushWatchProgress()
- // #ifndef H5
- if (this._featuredCommentKbHandler) {
- uni.offKeyboardHeightChange(this._featuredCommentKbHandler)
- this._featuredCommentKbHandler = null
- }
- // #endif
- },
- beforeDestroy() {
- this.closeFeaturedCommentMediaPreview()
- this._xgStop()
- this.xgPlayerInited = false
- if (this.interval != null) {
- clearInterval(this.interval)
- this.interval = null
- }
- if (this.fullscreenToggleTimer) {
- clearTimeout(this.fullscreenToggleTimer)
- this.fullscreenToggleTimer = null
- }
- if (this._rateBounceTimer) {
- clearTimeout(this._rateBounceTimer)
- this._rateBounceTimer = null
- }
- this.fullscreenToggleLock = false
- // 组件销毁前清理完课积分倒计时
- this.stopCountdown()
- this.stopProductHotTimer()
- this.clearIntegral()
- this.stopFakeMarqueeLoop()
- this._flushWatchProgress()
- // #ifndef H5
- if (this._featuredCommentKbHandler) {
- uni.offKeyboardHeightChange(this._featuredCommentKbHandler)
- this._featuredCommentKbHandler = null
- }
- // #endif
- },
- methods: {
- _updateVideoPlayStatus(status, seekTime = 0) {
- this.videoPlayStatus = {
- status,
- seekTime,
- url: this.videoUrl || '',
- time: Date.now(),
- videoReloadKey: this.videoReloadKey
- }
- },
- _xgPlay(seekTime = 0) {
- this._updateVideoPlayStatus('play', seekTime)
- },
- _xgPause() {
- this._updateVideoPlayStatus('pause', 0)
- },
- _xgStop() {
- this._updateVideoPlayStatus('stop', 0)
- },
- _xgSeek(seekTime = 0) {
- this._updateVideoPlayStatus('seek', seekTime)
- },
- _xgExitFullscreen() {
- this.exitFullscreen = 'yes-' + Date.now()
- },
- /** App 端锁定竖屏,避免系统自动旋转影响页面小窗布局 */
- _lockAppPortrait() {
- // #ifdef APP-PLUS
- try {
- plus.screen.lockOrientation('portrait-primary')
- } catch (e) {}
- // #endif
- },
- _lockAppLandscape() {
- // #ifdef APP-PLUS
- try {
- plus.screen.lockOrientation('landscape-primary')
- } catch (e) {}
- // #endif
- },
- onXgPlayerReady() {
- this.xgPlayerInited = true
- },
- onXgVideoPlay() {
- this.getPlay()
- },
- onXgVideoPause() {
- this.getPause()
- },
- onXgVideoEnded() {
- this.getEnded()
- },
- onXgVideoTimeUpdate(e) {
- this.onTimeUpdate({
- detail: {
- currentTime: e && e.currentTime != null ? e.currentTime : 0
- }
- })
- },
- onXgVideoProgress(e) {
- const buffered = e && e.buffered != null ? e.buffered : 0
- this.progressChange({
- detail: {
- buffered
- }
- })
- },
- onXgVideoError(e) {
- this.videoErrorCallback({
- target: {
- errMsg: e && e.error != null ? String(e.error) : 'xgplayer error'
- }
- })
- },
- onXgFullscreenChange(e) {
- const isFullscreen = !!(e && e.isFullscreen)
- // 横屏课退出全屏:先锁竖屏再更新布局,避免受系统方向开关影响
- if (this.displayType !== 'portrait' && !isFullscreen) {
- this._lockAppPortrait()
- }
- this.fullscreenchange({
- detail: {
- fullScreen: isFullscreen
- },
- stopPropagation() {},
- preventDefault() {}
- })
- },
- _closeFeaturedCommentComposerUi() {
- this.featuredCommentComposerActive = false
- this.featuredCommentInputFocused = false
- this.featuredCommentKeyboardBottomPx = 0
- },
- openFeaturedCommentComposer() {
- this._expandLayoutIfPortraitFeaturedCommentsOnly()
- this._courseWasPlayingBeforeFeaturedCommentOpen = this.videoPlaying && !this.isEnded
- this.featuredCommentComposerActive = true
- this.$nextTick(() => {
- this.featuredCommentInputFocused = true
- })
- },
- onFeaturedCommentComposerMaskTap() {
- this._closeFeaturedCommentComposerUi()
- },
- onFeaturedCommentComposerInputFocus() {
- this._expandLayoutIfPortraitFeaturedCommentsOnly()
- },
- onFeaturedCommentComposerInputBlur() {
- this.featuredCommentInputFocused = false
- },
- /** 有精选留言时默认 tabIndex=0,否则落到第一个可见 Tab */
- _selectDefaultRatingTab() {
- if (this.showTabFeaturedComments) {
- this.tabIndex = 0
- this.loadFeaturedComments()
- return
- }
- this._syncRatingTabIndex()
- },
- _syncRatingTabIndex() {
- const tabs = [
- this.showTabFeaturedComments,
- this.showTabColumnIntro,
- this.showTabReviewPoints
- ]
- if (!tabs.some(Boolean)) return
- if (tabs[this.tabIndex]) return
- const idx = tabs.findIndex(Boolean)
- if (idx < 0) return
- this.tabIndex = idx
- if (idx === 0) {
- this.loadFeaturedComments()
- }
- },
- selecTab(idx){
- if (idx === 0 && !this.showTabFeaturedComments) return
- if (idx === 1 && !this.showTabColumnIntro) return
- if (idx === 2 && !this.showTabReviewPoints) return
- this.tabIndex = idx
- if (idx === 0) {
- this.loadFeaturedComments()
- }
- },
- _resolveUserInfoObj() {
- let u = this.userInfo
- if (!u) return {}
- if (typeof u === 'string') {
- try {
- return JSON.parse(u) || {}
- } catch (e) {
- return {}
- }
- }
- return u
- },
- /** 从 getCommentList 结果中取出用户评论列表(兼容 data 为数组或 data.list / list 等),顺序与接口一致 */
- _pickUserCommentListFromCommentListRes(res) {
- if (!res || res.code != 200) return []
- const d = res.data
- if (d && Array.isArray(d.list)) return d.list.slice()
- if (Array.isArray(d)) return d.slice()
- if (Array.isArray(res.list)) return res.list.slice()
- if (d && Array.isArray(d.records)) return d.records.slice()
- return []
- },
- _pickDefaultPageInfoListFromCommentListRes(res) {
- if (!res || res.code != 200) return []
- const dpi = res.defaultPageInfo || (res.data && res.data.defaultPageInfo)
- if (dpi && Array.isArray(dpi.list)) return dpi.list.slice()
- return []
- },
- /** 用户新评论分页 total(与运营列表 total 分离;兼容 userTotal / listTotal / data.total) */
- _pickFeaturedUserCommentTotalFromRes(res) {
- if (!res || res.code != 200) return NaN
- const d = res.data
- const tryNum = (v) => {
- const t = Number(v)
- return Number.isFinite(t) && t >= 0 ? t : NaN
- }
- if (d && typeof d === 'object' && !Array.isArray(d)) {
- if (typeof d.userTotal !== 'undefined') {
- const t = tryNum(d.userTotal)
- if (Number.isFinite(t)) return t
- }
- if (typeof d.commentTotal !== 'undefined') {
- const t = tryNum(d.commentTotal)
- if (Number.isFinite(t)) return t
- }
- if (typeof d.listTotal !== 'undefined') {
- const t = tryNum(d.listTotal)
- if (Number.isFinite(t)) return t
- }
- if (typeof d.total !== 'undefined') {
- const t = tryNum(d.total)
- if (Number.isFinite(t)) return t
- }
- }
- if (typeof res.userTotal !== 'undefined') {
- const t = tryNum(res.userTotal)
- if (Number.isFinite(t)) return t
- }
- if (typeof res.total !== 'undefined') {
- const t = tryNum(res.total)
- if (Number.isFinite(t)) return t
- }
- return NaN
- },
- /** 运营 defaultPageInfo 条数 total(不参与用户分页 hasMore,仅缓存/排查) */
- _pickFeaturedDefaultTotalFromRes(res) {
- if (!res || res.code != 200) return NaN
- const dpi = res.defaultPageInfo || (res.data && res.data.defaultPageInfo)
- if (dpi && typeof dpi.total !== 'undefined') {
- const t = Number(dpi.total)
- return Number.isFinite(t) && t >= 0 ? t : NaN
- }
- return NaN
- },
- _syncFeaturedCommentTotalsFromRes(res) {
- const u = this._pickFeaturedUserCommentTotalFromRes(res)
- const dt = this._pickFeaturedDefaultTotalFromRes(res)
- this.featuredCommentUserTotal = Number.isFinite(u) ? u : NaN
- this.featuredCommentDefaultTotal = Number.isFinite(dt) ? dt : NaN
- },
- _mergeFeaturedUserComments(prev, incoming) {
- const a = Array.isArray(prev) ? prev : []
- const b = Array.isArray(incoming) ? incoming : []
- const keyOf = (it) => {
- if (!it) return ''
- if (it.commentId != null && it.commentId !== '') return 'c:' + it.commentId
- if (it.id != null && it.id !== '') return 'i:' + it.id
- return ''
- }
- const seen = new Set()
- const out = []
- for (let i = 0; i < a.length; i++) {
- const k = keyOf(a[i])
- if (k) seen.add(k)
- out.push(a[i])
- }
- for (let j = 0; j < b.length; j++) {
- const it = b[j]
- const k = keyOf(it)
- if (k) {
- if (seen.has(k)) continue
- seen.add(k)
- }
- out.push(it)
- }
- return out
- },
- /**
- * 是否还有下一页用户评论(仅按用户 total 与已合并的 featuredCommentList 长度比较;
- * 运营 defaultPageInfo 另有 total,不参与此处 hasMore)。
- */
- _applyFeaturedCommentHasMore(res, pageUserList, mergedUserList) {
- const pageLen = Array.isArray(pageUserList) ? pageUserList.length : 0
- const mergedLen = Array.isArray(mergedUserList) ? mergedUserList.length : 0
- const userTotal = this._pickFeaturedUserCommentTotalFromRes(res)
- if (Number.isFinite(userTotal)) {
- this.featuredCommentHasMore = mergedLen < userTotal
- } else {
- this.featuredCommentHasMore = pageLen >= this.featuredCommentPageSize
- }
- if (pageLen === 0) this.featuredCommentHasMore = false
- },
- onFeaturedCommentScrollToLower() {
- if (this.tabIndex !== 0 || !this.showTabFeaturedComments) return
- this.loadFeaturedComments({ append: true })
- },
- loadFeaturedComments(opts) {
- if (!this.videoId || !this.courseId) {
- return Promise.resolve()
- }
- const o = opts || {}
- const scrollToBottom = !!o.scrollToBottom
- const append = !!o.append
- if (append) {
- if (!this.featuredCommentHasMore) return Promise.resolve()
- if (this.featuredCommentLoading || this.featuredCommentLoadingMore) return Promise.resolve()
- this.featuredCommentLoadingMore = true
- } else {
- if (this.featuredCommentLoading) return Promise.resolve()
- this.featuredCommentPageNum = 1
- this.featuredCommentHasMore = true
- this.featuredCommentLoading = true
- }
- const pageNum = this.featuredCommentPageNum
- return getCommentList({
- pageNum,
- pageSize: this.featuredCommentPageSize,
- courseId: this.courseId,
- videoId:this.videoId,
- }).then(res => {
- if (append) {
- this.featuredCommentLoadingMore = false
- } else {
- this.featuredCommentLoading = false
- }
- if (res.code == 200) {
- const pageUser = this._pickUserCommentListFromCommentListRes(res)
- this._syncFeaturedCommentTotalsFromRes(res)
- if (!append) {
- this.featuredCommentList = pageUser
- this.defaultPageInfoList = this._pickDefaultPageInfoListFromCommentListRes(res)
- this._applyFeaturedCommentHasMore(res, pageUser, this.featuredCommentList)
- if (pageUser.length > 0) this.featuredCommentPageNum = pageNum + 1
- } else {
- this.featuredCommentList = this._mergeFeaturedUserComments(
- this.featuredCommentList,
- pageUser
- )
- this._applyFeaturedCommentHasMore(res, pageUser, this.featuredCommentList)
- if (pageUser.length > 0) this.featuredCommentPageNum = pageNum + 1
- }
- } else {
- if (!append) {
- this.defaultPageInfoList = []
- this.featuredCommentList = []
- this.featuredCommentHasMore = false
- this.featuredCommentUserTotal = NaN
- this.featuredCommentDefaultTotal = NaN
- }
- }
- this._syncRatingTabIndex()
- if (scrollToBottom) {
- this.$nextTick(() => {
- this._scrollFeaturedCommentsToBottom()
- setTimeout(() => this._scrollFeaturedCommentsToBottom(), 280)
- })
- }
- }).catch(() => {
- if (append) {
- this.featuredCommentLoadingMore = false
- } else {
- this.featuredCommentLoading = false
- this.featuredCommentList = []
- this.defaultPageInfoList = []
- this.featuredCommentHasMore = false
- this.featuredCommentUserTotal = NaN
- this.featuredCommentDefaultTotal = NaN
- }
- this._syncRatingTabIndex()
- })
- },
- _scrollFeaturedCommentsToBottom() {
- this.featuredCommentScrollIntoView = ''
- this.$nextTick(() => {
- this.featuredCommentScrollIntoView = 'fc-scroll-anchor'
- setTimeout(() => {
- this.featuredCommentScrollIntoView = ''
- }, 400)
- })
- },
- getCommentAvatar(it) {
- if (!it) return ''
- return it.avatar || it.headImg || it.headimg || it.userAvatar || ''
- },
- getCommentDisplayName(it) {
- if (!it) return '用户'
- if (it.nickName) return it.nickName
- if (it.userId != null && it.userId !== '') {
- return it.toNickName
- }
- },
- _urlsEmbeddedInCommentContent(it) {
- const c = it && it.content
- if (c == null || typeof c !== 'string') return []
- const text = String(c).replace(/\u21b5/g, '\n')
- const m = text.match(/https?:\/\/[^\s]+/gi) || []
- const cleaned = m.map(u => u.replace(/[),.;!?]+$/g, ''))
- return [...new Set(cleaned)]
- },
- _isEmbeddedCommentVideoUrl(u) {
- if (!u) return false
- return /\/comment\/video\//i.test(u) || /\.(mp4|m3u8|mov|webm|avi|mkv)(\?|#|$)/i.test(u)
- },
- _isEmbeddedCommentImageUrl(u) {
- if (!u) return false
- return /\/comment\/image\//i.test(u) || /\.(jpg|jpeg|png|gif|webp|bmp)(\?|#|$)/i.test(u)
- },
- _videoUrlFromCommentContent(it) {
- const urls = this._urlsEmbeddedInCommentContent(it)
- for (let i = 0; i < urls.length; i++) {
- if (this._isEmbeddedCommentVideoUrl(urls[i])) return urls[i]
- }
- return ''
- },
- getCommentTextOnly(it) {
- if (!it || it.content == null) return ''
- let text = String(it.content).replace(/\u21b5/g, '\n')
- const strip = new Set()
- const v = this.getCommentVideoUrl(it)
- if (v) strip.add(v)
- const urls = this._urlsEmbeddedInCommentContent(it)
- for (let i = 0; i < urls.length; i++) {
- const u = urls[i]
- if (this._isEmbeddedCommentVideoUrl(u)) strip.add(u)
- else if (this._isEmbeddedCommentImageUrl(u) && u !== v) strip.add(u)
- }
- strip.forEach(u => {
- text = text.split(u).join('')
- })
- return text.replace(/(\r?\n\s*){2,}/g, '\n').replace(/^\s+|\s+$/g, '').trim()
- },
- getCommentVideoUrl(it) {
- if (!it) return ''
- if (it.videoUrl) return it.videoUrl
- if (it.video) return it.video
- if (it.mediaType === 'video' && it.mediaUrl) return it.mediaUrl
- return this._videoUrlFromCommentContent(it)
- },
- getCommentVideoPoster(it) {
- if (!it) return ''
- const raw =
- it.videoCover || it.coverUrl || it.poster || it.thumbnail || ''
- return typeof raw === 'string' ? raw.trim() : String(raw || '').trim()
- },
- commentImageUrls(it) {
- if (!it) return []
- const raw = it.images || it.imageUrl || it.imgUrl || it.picUrl || it.pic
- let fromFields = []
- if (raw) {
- if (Array.isArray(raw)) fromFields = raw.filter(Boolean)
- else fromFields = String(raw).split(',').map(s => s.trim()).filter(Boolean)
- }
- const videoUrl = this.getCommentVideoUrl(it)
- const fromContent = this._urlsEmbeddedInCommentContent(it).filter(u =>
- this._isEmbeddedCommentImageUrl(u) && !this._isEmbeddedCommentVideoUrl(u) && u !== videoUrl
- )
- return [...new Set([...fromFields, ...fromContent])]
- },
- /** 精选留言预览图 / 选图 / 留言内嵌视频播放前:暂停主课视频,避免与原生页或第二条音轨叠放 */
- _pauseCourseVideo() {
- this._xgPause()
- },
- /** 精选留言带图/视频上传结束后:若选媒体前主课在播则恢复 */
- _resumeCourseVideoAfterFeaturedJob() {
- if (!this._shouldResumeCourseVideoAfterFeaturedUpload) return
- this._shouldResumeCourseVideoAfterFeaturedUpload = false
- this._courseWasPlayingBeforeFeaturedCommentOpen = false
- if (this.isEnded || !this.videoUrl || !this.videoId) return
- const tryPlay = () => this._xgPlay(this.playTime || 0)
- this.$nextTick(() => {
- tryPlay()
- setTimeout(tryPlay, 80)
- setTimeout(tryPlay, 260)
- })
- },
- getFeaturedCommentRowKey(it, idx) {
- const id =
- it && it.commentId != null && it.commentId !== ''
- ? String(it.commentId)
- : it && it.id != null
- ? String(it.id)
- : ''
- return 'fc-' + idx + '-' + (id || 'n')
- },
- getFeaturedCommentVideoId(it, idx) {
- return 'feat-comment-video-' + this.getFeaturedCommentRowKey(it, idx)
- },
- /** 暂停精选留言列表内所有西瓜/原生内联播放器(弹窗预览仍用独立 video) */
- _pauseFeaturedCommentListInlinePlayers() {
- const refs = this.$refs.featuredCommentXg
- if (!refs) return
- const arr = Array.isArray(refs) ? refs : [refs]
- arr.forEach((r) => {
- if (r && typeof r.pause === 'function') r.pause()
- })
- },
- openFeaturedCommentMediaPreview(it, listIdx, mode, imageIndex) {
- const m = mode === 'video' ? 'video' : 'image'
- if (m === 'image') {
- const urls = this.commentImageUrls(it).filter(u => u && !/^blob:/i.test(u))
- if (!urls.length) return
- const i = Math.min(
- Math.max(0, Number(imageIndex) || 0),
- urls.length - 1
- )
- this._pauseCourseVideo()
- this._pauseFeaturedCommentListInlinePlayers()
- this.featuredCommentMediaPreviewMode = 'image'
- this.featuredCommentMediaPreviewUrls = urls
- this.featuredCommentMediaPreviewIndex = i
- this.featuredCommentMediaPreviewVideoUrl = ''
- this.featuredCommentMediaPreviewPoster = ''
- this.featuredCommentMediaPreviewShow = true
- return
- }
- const vurl = this.getCommentVideoUrl(it)
- if (!vurl) return
- this._pauseCourseVideo()
- this._pauseFeaturedCommentListInlinePlayers()
- this.featuredCommentMediaPreviewMode = 'video'
- this.featuredCommentMediaPreviewUrls = []
- this.featuredCommentMediaPreviewIndex = 0
- this.featuredCommentMediaPreviewVideoUrl = vurl
- this.featuredCommentMediaPreviewPoster = this.getCommentVideoPoster(it) || ''
- this.featuredCommentMediaPreviewShow = true
- this._tryPlayFeaturedModalVideo()
- },
- _tryPlayFeaturedModalVideo() {
- if (this.featuredCommentMediaPreviewMode !== 'video' || !this.featuredCommentMediaPreviewVideoUrl) {
- return
- }
- const run = () => {
- try {
- const c = uni.createVideoContext('fc-media-preview-video', this)
- if (c && c.play) c.play()
- } catch (e) {}
- }
- this.$nextTick(() => {
- run()
- setTimeout(run, 100)
- setTimeout(run, 280)
- })
- },
- /** 微信小程序编译不接受 @tap.stop="",需绑定空实现以阻止冒泡到遮罩 */
- featuredCommentPreviewCardTap() {},
- closeFeaturedCommentMediaPreview() {
- if (!this.featuredCommentMediaPreviewShow) return
- try {
- const c = uni.createVideoContext('fc-media-preview-video', this)
- if (c && c.pause) c.pause()
- } catch (e) {}
- this.featuredCommentMediaPreviewShow = false
- this.featuredCommentMediaPreviewUrls = []
- this.featuredCommentMediaPreviewVideoUrl = ''
- this.featuredCommentMediaPreviewPoster = ''
- },
- setFeaturedMediaPreviewIndex(ti) {
- const n = Number(ti)
- if (
- !Number.isFinite(n) ||
- n < 0 ||
- n >= (this.featuredCommentMediaPreviewUrls || []).length
- ) {
- return
- }
- this.featuredCommentMediaPreviewIndex = n
- },
- onFeaturedMediaPreviewModalVideoPlay() {
- this._pauseCourseVideo()
- this._pauseFeaturedCommentListInlinePlayers()
- },
- _featuredMediaMaxBytes() {
- return 100 * 1024 * 1024
- },
- /** 相册/选中返回的本地路径大小:安卓上 chooseMedia 常给 size=0,getFileInfo 也可能失真,改用 statSync 兜底 */
- _readFeaturedLocalFileSizeBytes(filePath) {
- return new Promise((resolve) => {
- const tryFsStat = () => {
- let n = 0
- // #ifdef MP-WEIXIN
- try {
- const fs = wx.getFileSystemManager && wx.getFileSystemManager()
- if (fs && fs.statSync) {
- const st = fs.statSync(filePath)
- if (st && typeof st.size === 'number' && st.size > 0) n = st.size
- }
- } catch (e) {}
- // #endif
- return n
- }
- if (!filePath || typeof filePath !== 'string') {
- resolve(0)
- return
- }
- uni.getFileInfo({
- filePath,
- success: (fi) => {
- let sz =
- fi && fi.size != null ? Math.floor(Number(fi.size)) : 0
- if (!Number.isFinite(sz) || sz <= 0) sz = tryFsStat()
- resolve(sz)
- },
- fail: () => resolve(tryFsStat())
- })
- })
- },
- _alertFeaturedMediaLimit(content) {
- uni.showModal({
- title: '提示',
- content:
- content ||
- '图片或视频大小不能超过100MB,请压缩或更换后再试。',
- showCancel: false,
- confirmText: '知道了'
- })
- },
- _assertFeaturedLocalMediaUnderMaxBytes(filePath) {
- const max = this._featuredMediaMaxBytes()
- return new Promise((resolve) => {
- if (!filePath || typeof filePath !== 'string') {
- this._alertFeaturedMediaLimit('文件路径无效,请重新选择。')
- resolve(false)
- return
- }
- this._readFeaturedLocalFileSizeBytes(filePath).then((sz) => {
- if (sz <= 0) {
- uni.showToast({
- title: '本地暂无法读取大小,请勿超过100MB',
- icon: 'none',
- duration: 2600
- })
- resolve(true)
- return
- }
- if (sz > max) {
- this._alertFeaturedMediaLimit()
- resolve(false)
- return
- }
- resolve(true)
- })
- })
- },
- _applyFeaturedMediaIfSizeOk(type, path, size, thumbTempPath) {
- const max = this._featuredMediaMaxBytes()
- const applyAccepted = () => {
- this.featuredCommentMedia = {
- type,
- path,
- thumbTempPath: thumbTempPath || ''
- }
- }
- let bytes =
- size != null && Number(size) > 0
- ? Math.floor(Number(size))
- : 0
- if (!Number.isFinite(bytes)) bytes = 0
- const finalize = (n) => {
- if (n > max) {
- this._alertFeaturedMediaLimit()
- return
- }
- applyAccepted()
- }
- if (bytes > 0) {
- finalize(bytes)
- return
- }
- this._readFeaturedLocalFileSizeBytes(path).then(finalize)
- },
- clearFeaturedCommentMedia() {
- this.featuredCommentMedia = null
- this._resumeCourseVideoAfterFeaturedJob()
- },
- /**
- * 竖屏课且仅「精选留言」一个 Tab 时,竖版布局下留言区被隐藏;
- * 切到横版布局(isShu=false),与全屏按钮切换布局一致。
- */
- _expandLayoutIfPortraitFeaturedCommentsOnly() {
- if (this.displayType !== 'portrait') return
- if (!this.isShu) return
- if (!(this.visibleRatingTabCount === 1 && this.showTabFeaturedComments)) return
- this.isShu = false
- this.tabIndex = 0
- },
- /** 避免选图/选视频从原生页返回时 onShow 重复拉课程详情;若未触发 onShow 则在 complete 后兜底清除标志 */
- _armFeaturedMediaPickerOnShowSuppress() {
- this.videovipSuppressOnShowCourseFetchOnce = true
- const clearIfStillArmed = () => {
- setTimeout(() => {
- if (this.videovipSuppressOnShowCourseFetchOnce) {
- this.videovipSuppressOnShowCourseFetchOnce = false
- }
- }, 600)
- }
- return clearIfStillArmed
- },
- onFeaturedPickMedia() {
- this._expandLayoutIfPortraitFeaturedCommentsOnly()
- this.featuredMediaActionSheetShow = true
- },
- closeFeaturedMediaActionSheet() {
- this.featuredMediaActionSheetShow = false
- },
- /** 精选留言选相册视频:小程序用 chooseMedia,App/H5 用 chooseVideo */
- _pickFeaturedAlbumVideo(clearIfStillArmed) {
- const onFail = () => {
- // 勿在此处清 suppress:须由 onShow 消费,避免先于 onShow 清标志导致停跑马灯
- this._resumeCourseVideoAfterFeaturedJob()
- }
- const onSuccess = (path, size, thumbTempPath) => {
- if (!path) return
- const sz = size != null ? size : 0
- this._applyFeaturedMediaIfSizeOk('video', path, sz, thumbTempPath || '')
- }
- // #ifdef MP-WEIXIN
- wx.chooseMedia({
- count: 1,
- mediaType: ['video'],
- sourceType: ['album'],
- maxDuration: 30,
- success: (res) => {
- const f0 = res.tempFiles && res.tempFiles[0]
- if (!f0) return
- onSuccess(f0.tempFilePath, f0.size, f0.thumbTempFilePath)
- },
- fail: onFail,
- complete: clearIfStillArmed
- })
- // #endif
- // #ifndef MP-WEIXIN
- uni.chooseVideo({
- sourceType: ['album'],
- maxDuration: 30,
- success: (res) => {
- onSuccess(res.tempFilePath, res.size, res.thumbTempFilePath)
- },
- fail: onFail,
- complete: clearIfStillArmed
- })
- // #endif
- },
- onFeaturedMediaSheetPick(tapIndex) {
- this.closeFeaturedMediaActionSheet()
- // 立即调起相册/视频会与 u-popup 遮罩关闭叠加,小程序端易残留半透明层;对齐关闭动画后再打开系统选择器
- const afterSheetCloseMs = 350
- setTimeout(() => {
- if (tapIndex === 0) {
- this._shouldResumeCourseVideoAfterFeaturedUpload =
- !this.isEnded &&
- (this.videoPlaying || this._courseWasPlayingBeforeFeaturedCommentOpen)
- this._pauseCourseVideo()
- const clearIfStillArmed = this._armFeaturedMediaPickerOnShowSuppress()
- uni.chooseImage({
- count: 1,
- sizeType: ['compressed', 'original'],
- sourceType: ['album', 'camera'],
- success: (res) => {
- const f0 = res.tempFiles && res.tempFiles[0]
- const path =
- (res.tempFilePaths && res.tempFilePaths[0]) ||
- (f0 && f0.path) ||
- ''
- if (!path) return
- const size = f0 && f0.size != null ? f0.size : 0
- this._applyFeaturedMediaIfSizeOk('image', path, size, '')
- },
- fail: () => {
- // 勿在此处清 suppress:须由 onShow 消费,避免先于 onShow 清标志导致停跑马灯
- this._resumeCourseVideoAfterFeaturedJob()
- },
- complete: clearIfStillArmed
- })
- } else if (tapIndex === 1) {
- this._shouldResumeCourseVideoAfterFeaturedUpload =
- !this.isEnded &&
- (this.videoPlaying || this._courseWasPlayingBeforeFeaturedCommentOpen)
- this._pauseCourseVideo()
- const clearIfStillArmed = this._armFeaturedMediaPickerOnShowSuppress()
- this._pickFeaturedAlbumVideo(clearIfStillArmed)
- }
- }, afterSheetCloseMs)
- },
- async submitFeaturedComment() {
- const raw = this.featuredCommentInput || ''
- const text = raw.trim()
- if (raw.length > 50) {
- uni.showToast({
- title: '留言不能超过50个字',
- icon: 'none'
- })
- this._resumeCourseVideoAfterFeaturedJob()
- return
- }
- const media = this.featuredCommentMedia
- const hasMedia = !!(media && media.path)
- if (!text && !hasMedia) {
- uni.showToast({
- title: '请输入留言或选择图片/视频',
- icon: 'none'
- })
- return
- }
- const u = this._resolveUserInfoObj()
- const userId = u.userId || ''
- if (!userId) {
- uni.showToast({
- title: '请先登录',
- icon: 'none'
- })
- this._resumeCourseVideoAfterFeaturedJob()
- return
- }
- if (this.featuredCommentSending) return
- if (hasMedia && media.path) {
- const ok = await this._assertFeaturedLocalMediaUnderMaxBytes(media.path)
- if (!ok) {
- this._resumeCourseVideoAfterFeaturedJob()
- return
- }
- }
- this.featuredCommentSending = true
- const done = (res) => {
- this.featuredCommentSending = false
- if (res.code == 200) {
- this.featuredCommentInput = ''
- this.featuredCommentMedia = null
- this._closeFeaturedCommentComposerUi()
- uni.showToast({
- title: '发送成功',
- icon: 'none'
- })
- this.loadFeaturedComments({
- scrollToBottom: true
- })
- } else {
- uni.showToast({
- title: res.msg || '发送失败',
- icon: 'none'
- })
- }
- }
- const fail = (err) => {
- this.featuredCommentSending = false
- const msg = err && err.message ? err.message : '网络异常,请重试'
- uni.showToast({
- title: msg,
- icon: 'none'
- })
- }
- const payload = {
- toUserId: userId,
- courseId: this.courseId,
- videoId: this.videoId,
- type: 1,
- content: text
- }
- if (hasMedia) {
- if (media.type === 'video') {
- payload.videoFiles = media.path
- } else {
- payload.imageFiles = media.path
- }
- }
- uni.showLoading({
- title: '发布中',
- mask: true
- })
- addCommentWithMedia(payload)
- .then((res) => {
- uni.hideLoading()
- done(res)
- })
- .catch((err) => {
- uni.hideLoading()
- fail(err)
- })
- .finally(() => {
- // 与 hideLoading、列表刷新错开一帧,避免部分机型上 play 被吞
- this.$nextTick(() => {
- setTimeout(() => {
- this._resumeCourseVideoAfterFeaturedJob()
- }, 60)
- })
- })
- },
- _vipTimeStrToSec(timeStr) {
- if (!timeStr || typeof timeStr !== 'string') return 0
- const parts = timeStr.split(':')
- if (parts.length !== 3) return 0
- const h = parseInt(parts[0], 10) || 0
- const m = parseInt(parts[1], 10) || 0
- const s = parseInt(parts[2], 10) || 0
- return h * 3600 + m * 60 + s
- },
- _vipShelfTimeValid(timeStr) {
- if (!timeStr || typeof timeStr !== 'string') return false
- if (timeStr === '00:00:00') return false
- return this._vipTimeStrToSec(timeStr) > 0
- },
- /** 缓存下单时间戳(videovip_myPurchase_*)序列化后可能为字符串,统一为毫秒数 */
- _normalizePurchaseTs(ts) {
- if (ts == null || ts === '') return 0
- const n = typeof ts === 'number' ? ts : Number(ts)
- return Number.isFinite(n) && n > 0 ? n : 0
- },
- _readVipSelfPurchaseTsMs() {
- const row = uni.getStorageSync('videovip_myPurchase_' + this.videoId)
- return this._normalizePurchaseTs(row && row.ts)
- },
- refreshVipPurchaseMarqueeFlag() {
- const key = 'videovip_myPurchase_' + this.videoId
- const consumedKey = 'videovip_myPurchaseMarqueeConsumed_' + this.videoId
- const row = uni.getStorageSync(key)
- const consumed = uni.getStorageSync(consumedKey)
- const tsMs = this._normalizePurchaseTs(row && row.ts)
- if (tsMs && Date.now() - tsMs <= 10 * 60 * 1000) {
- // 同一笔下单 ts 仅允许跑马灯展示一次;中途退出再进不再展示(新下单 ts 变化后会再展示一次)
- const consumedTs = this._normalizePurchaseTs(consumed && consumed.ts)
- this.pendingSelfMarqueeFirst = !(consumedTs > 0 && consumedTs === tsMs)
- } else {
- this.pendingSelfMarqueeFirst = false
- if (row && row.ts != null && row.ts !== '') {
- uni.removeStorageSync(key)
- const consumedTs = this._normalizePurchaseTs(consumed && consumed.ts)
- if (consumedTs > 0 && consumedTs === tsMs) uni.removeStorageSync(consumedKey)
- }
- }
- },
- _markSelfPurchaseMarqueeConsumed() {
- const tsMs = this._readVipSelfPurchaseTsMs()
- if (!tsMs) return
- try {
- uni.setStorageSync('videovip_myPurchaseMarqueeConsumed_' + this.videoId, { ts: tsMs })
- } catch (e) {}
- },
- formatSelfPurchaseMarqueePayload() {
- const tsMs = this._readVipSelfPurchaseTsMs()
- if (!tsMs) {
- return {
- type: 'self',
- nickname: '您本人',
- maskedId: '',
- timeOffset: '刚刚',
- suffix: '已下单',
- fullText: '您本人刚刚已下单'
- }
- }
- const secTotal = Math.floor((Date.now() - tsMs) / 1000)
- if (secTotal < 60) {
- const text = `${Math.max(1, secTotal)}秒前`
- return {
- type: 'self',
- nickname: '您本人',
- maskedId: '',
- timeOffset: text,
- suffix: '已下单',
- fullText: `您本人${text}已下单`
- }
- }
- const min = Math.min(10, Math.floor(secTotal / 60))
- const text = `${Math.max(1, min)}分钟前`
- return {
- type: 'self',
- nickname: '您本人',
- maskedId: '',
- timeOffset: text,
- suffix: '已下单',
- fullText: `您本人${text}已下单`
- }
- },
- _syncFakeMarqueeIfEligibleChanged() {
- const val = this.fakeMarqueeEligible
- if (val === this._fakeMarqueeEligiblePrev) return
- this._fakeMarqueeEligiblePrev = val
- if (val) {
- if (this._marqueeStartDebounceTimer) {
- clearTimeout(this._marqueeStartDebounceTimer)
- this._marqueeStartDebounceTimer = null
- }
- this._marqueeStartDebounceTimer = setTimeout(() => {
- this._marqueeStartDebounceTimer = null
- if (this.fakeMarqueeEligible && !this._fakeMarqueeStarted) {
- this.ensureFakeMarqueeStarted()
- }
- }, 300)
- } else {
- if (this._marqueeStartDebounceTimer) {
- clearTimeout(this._marqueeStartDebounceTimer)
- this._marqueeStartDebounceTimer = null
- }
- this.stopFakeMarqueeLoop()
- }
- },
- ensureFakeMarqueeStarted() {
- if (!this.fakeMarqueeEligible || this._fakeMarqueeStarted) return
- this._fakeMarqueeStarted = true
- if (!this.fakeOrderPool.length) {
- this.fakeOrderPool = buildFakeOrderPool()
- }
- this.applyFakeMarqueeTick()
- this.scheduleFakeMarqueeNext()
- this._startSelfMarqueeClockIfNeeded()
- },
- applyFakeMarqueeTick() {
- if (this.isTripleMarqueeMode) {
- const rows = this.buildTripleMarqueePayloads()
- this.setTripleMarqueeDisplayWithAnim(rows)
- // 本人下单在三联模式也只展示一轮,下一轮起恢复纯虚拟随机
- if (rows.some(item => item && item.type === 'self')) {
- this.pendingSelfMarqueeFirst = false
- this._markSelfPurchaseMarqueeConsumed()
- }
- if (rows.length) {
- this.marqueeDisplayPayload = rows[0]
- this.marqueeDisplaySelf = this.marqueeDisplayPayload.type === 'self'
- }
- return
- }
- this.marqueeTriplePayloads = []
- this.marqueeTripleIncomingPayloads = []
- this.marqueeTripleSwitching = false
- const tsMs = this._readVipSelfPurchaseTsMs()
- const purchaseOk = !!(tsMs && Date.now() - tsMs <= 10 * 60 * 1000)
- if (purchaseOk && this.pendingSelfMarqueeFirst) {
- const selfPayload = this.formatSelfPurchaseMarqueePayload()
- this.marqueeCurrentText = selfPayload.fullText
- this.marqueeSelfHighlight = true
- this.pendingSelfMarqueeFirst = false
- this._markSelfPurchaseMarqueeConsumed()
- this.setMarqueeDisplayWithAnim(selfPayload, true)
- return
- }
- this.marqueeSelfHighlight = false
- if (!this.fakeOrderPool.length) {
- this.fakeOrderPool = buildFakeOrderPool()
- }
- const line = this.fakeOrderPool.shift()
- if (line) {
- this.fakeOrderPool.push(line)
- this.marqueeCurrentText = `${line.nickname}${line.maskedId}${line.timeOffset}${line.suffix}`
- this.setMarqueeDisplayWithAnim({
- type: 'virtual',
- nickname: line.nickname,
- maskedId: line.maskedId,
- timeOffset: line.timeOffset,
- suffix: line.suffix
- }, false)
- }
- },
- buildTripleMarqueePayloads() {
- const rows = []
- const hasSelf = this.hasRecentSelfPurchase() && this.pendingSelfMarqueeFirst
- if (!this.fakeOrderPool.length) {
- this.fakeOrderPool = buildFakeOrderPool()
- }
- let guard = 0
- // 有本人记录时,把本人下单放第一条,其它再补足虚拟数据
- if (hasSelf) {
- rows.push(this.formatSelfPurchaseMarqueePayload())
- }
- const targetVirtualCount = hasSelf ? 2 : 3
- let virtualCount = 0
- while (virtualCount < targetVirtualCount && this.fakeOrderPool.length && guard < 10) {
- const line = this.fakeOrderPool.shift()
- guard += 1
- if (!line) break
- this.fakeOrderPool.push(line)
- rows.push({
- type: 'virtual',
- nickname: line.nickname,
- maskedId: line.maskedId,
- timeOffset: line.timeOffset,
- suffix: line.suffix
- })
- virtualCount += 1
- }
- return rows.slice(0, 3)
- },
- hasRecentSelfPurchase() {
- const tsMs = this._readVipSelfPurchaseTsMs()
- return !!(tsMs && Date.now() - tsMs <= 10 * 60 * 1000)
- },
- /** 按缓存 ts 与当前时间重新计算本人下单文案(停留同一轮跑马灯时也能更新相对时间) */
- refreshSelfPurchaseMarqueeDisplayedTiming() {
- const fresh = this.formatSelfPurchaseMarqueePayload()
- if (this.isTripleMarqueeMode && this.marqueeTriplePayloads.length) {
- const upd = (arr) =>
- arr.map((r) => (r && r.type === 'self' ? Object.assign({}, fresh) : r))
- this.marqueeTriplePayloads = upd(this.marqueeTriplePayloads)
- if (this.marqueeTripleIncomingPayloads.length) {
- this.marqueeTripleIncomingPayloads = upd(this.marqueeTripleIncomingPayloads)
- }
- }
- if (this.marqueeDisplayPayload && this.marqueeDisplayPayload.type === 'self') {
- this.marqueeDisplayPayload = Object.assign({}, fresh)
- }
- if (this.marqueeIncomingPayload && this.marqueeIncomingPayload.type === 'self') {
- this.marqueeIncomingPayload = Object.assign({}, fresh)
- }
- },
- _startSelfMarqueeClockIfNeeded() {
- if (this._selfMarqueeClockTimer != null) return
- if (!this.hasRecentSelfPurchase()) return
- this._selfMarqueeClockTimer = setInterval(() => {
- if (!this._fakeMarqueeStarted || !this.hasRecentSelfPurchase()) {
- this._stopSelfMarqueeClock()
- return
- }
- this.refreshSelfPurchaseMarqueeDisplayedTiming()
- }, 10000)
- },
- _stopSelfMarqueeClock() {
- if (this._selfMarqueeClockTimer != null) {
- clearInterval(this._selfMarqueeClockTimer)
- this._selfMarqueeClockTimer = null
- }
- },
- /** 进入三联布局时立即补足 marqueeTriplePayloads,否则 v-if 会因 length 为 0 仍走单条分支直到下一轮定时 tick */
- syncTripleMarqueeImmediate() {
- if (!this.fakeMarqueeEligible || !this._fakeMarqueeStarted || !this.isTripleMarqueeMode) return
- const rows = this.buildTripleMarqueePayloads()
- if (!rows.length) return
- this.setTripleMarqueeDisplayWithAnim(rows)
- if (rows.some(item => item && item.type === 'self')) {
- this.pendingSelfMarqueeFirst = false
- this._markSelfPurchaseMarqueeConsumed()
- }
- if (rows[0]) {
- this.marqueeDisplayPayload = rows[0]
- this.marqueeDisplaySelf = rows[0].type === 'self'
- }
- },
- setTripleMarqueeDisplayWithAnim(rows) {
- if (!rows || !rows.length) return
- if (!this.marqueeTriplePayloads.length) {
- this.marqueeTriplePayloads = rows
- this.marqueeTripleIncomingPayloads = []
- this.marqueeTripleSwitching = false
- return
- }
- if (this._marqueeTripleSwitchTimer) {
- clearTimeout(this._marqueeTripleSwitchTimer)
- this._marqueeTripleSwitchTimer = null
- }
- this.marqueeTripleIncomingPayloads = rows
- this.marqueeTripleSwitching = true
- this._marqueeTripleSwitchTimer = setTimeout(() => {
- this.marqueeTriplePayloads = this.marqueeTripleIncomingPayloads
- this.marqueeTripleIncomingPayloads = []
- this.marqueeTripleSwitching = false
- this._marqueeTripleSwitchTimer = null
- }, 460)
- },
- setMarqueeDisplayWithAnim(payload, isSelf) {
- if (!payload) return
- if (!this.marqueeDisplayPayload) {
- this.marqueeDisplayPayload = payload
- this.marqueeDisplaySelf = !!isSelf
- this.marqueeSwitching = false
- this.marqueeIncomingPayload = null
- this.marqueeIncomingSelf = false
- return
- }
- if (this._marqueeSwitchTimer) {
- clearTimeout(this._marqueeSwitchTimer)
- this._marqueeSwitchTimer = null
- }
- this.marqueeIncomingPayload = payload
- this.marqueeIncomingSelf = !!isSelf
- this.marqueeSwitching = true
- this._marqueeSwitchTimer = setTimeout(() => {
- this.marqueeDisplayPayload = this.marqueeIncomingPayload
- this.marqueeDisplaySelf = this.marqueeIncomingSelf
- this.marqueeIncomingPayload = null
- this.marqueeIncomingSelf = false
- this.marqueeSwitching = false
- this._marqueeSwitchTimer = null
- }, 460)
- },
- scheduleFakeMarqueeNext() {
- if (this._fakeMarqueeTimer) {
- clearTimeout(this._fakeMarqueeTimer)
- this._fakeMarqueeTimer = null
- }
- const delay = 4000 + Math.floor(Math.random() * 3001)
- this._fakeMarqueeTimer = setTimeout(() => {
- this._fakeMarqueeTimer = null
- if (!this.fakeMarqueeEligible || !this._fakeMarqueeStarted) return
- this.applyFakeMarqueeTick()
- this.scheduleFakeMarqueeNext()
- }, delay)
- },
- stopFakeMarqueeLoop() {
- if (this._marqueeStartDebounceTimer) {
- clearTimeout(this._marqueeStartDebounceTimer)
- this._marqueeStartDebounceTimer = null
- }
- if (this._fakeMarqueeTimer) {
- clearTimeout(this._fakeMarqueeTimer)
- this._fakeMarqueeTimer = null
- }
- if (this._marqueeSwitchTimer) {
- clearTimeout(this._marqueeSwitchTimer)
- this._marqueeSwitchTimer = null
- }
- if (this._marqueeTripleSwitchTimer) {
- clearTimeout(this._marqueeTripleSwitchTimer)
- this._marqueeTripleSwitchTimer = null
- }
- this._fakeMarqueeStarted = false
- this.marqueeSwitching = false
- // 重要:清空非三联跑马灯展示 payload,避免下一次门禁打开前渲染旧内容
- this.marqueeDisplayPayload = null
- this.marqueeDisplaySelf = false
- this.marqueeCurrentText = ''
- this.marqueeSelfHighlight = false
- this.marqueeIncomingPayload = null
- this.marqueeIncomingSelf = false
- this.marqueeTriplePayloads = []
- this.marqueeTripleIncomingPayloads = []
- this.marqueeTripleSwitching = false
- this._stopSelfMarqueeClock()
- },
- getRateByIndexId(indexId, optionIdx) {
- const list = this.rateList || []
- if (!list.length) return null
- const n = Number(indexId)
- if (Number.isFinite(n)) {
- const byId = list.find((r) => r && Number(r.id) === n)
- if (byId) return byId
- if (list[n]) return list[n]
- }
- const i = Number(optionIdx)
- if (Number.isFinite(i) && list[i]) return list[i]
- return list[0]
- },
- getRateOptionIcon(option, active, optionIdx) {
- const rate = this.getRateByIndexId(option && option.indexId, optionIdx)
- if (!rate) return ''
- return active ? (rate.selIcon || rate.icon || '') : (rate.icon || '')
- },
- isRateOptionSelected(item, option) {
- if (!item || !option) return false
- if (Number(item.type) === 2) {
- const answer = item.answer ? item.answer.split(',') : []
- return answer.indexOf(option.name) !== -1
- }
- return item.answer === option.name
- },
- goRate(questionIndex, optionIndexId) {
- const bounceKey = `${questionIndex}_${optionIndexId}`
- if (this._rateBounceTimer) {
- clearTimeout(this._rateBounceTimer)
- this._rateBounceTimer = null
- }
- this.rateBounceIndex = null
- this.$nextTick(() => {
- this.rateBounceIndex = bounceKey
- this._rateBounceTimer = setTimeout(() => {
- this.rateBounceIndex = null
- this._rateBounceTimer = null
- }, 480)
- })
- },
- onVideoMetaLoaded(e) {
- // const width = e.detail.width;
- // const height = e.detail.height;
- // const res = uni.getSystemInfoSync();
- // const winH = res.windowHeight;
- // const winW = res.windowWidth;
- // //横屏
- // const wW = (winW / winH) * 100;
- // console.log(winH,winW,'高度')
- // console.log(winH,winW,'高度')
- // //竖屏
- // if (height < width) {
- // this.isHeight = true
- // }
- },
- // 获取视频容器高度
- getVideoContainerHeight() {
- const { windowWidth, windowHeight } = uni.getSystemInfoSync();
- this.isHeight = windowWidth > windowHeight;
- console.log('当前是否横屏:', this.isHeight);
- },
- fullscreenchange(event){
- console.log("[---]",this.isShu)
- const isFullScreen = !!(event && event.detail && event.detail.fullScreen);
- this.isFull = isFullScreen;
- // 竖屏课程下:把全屏按钮当作布局切换按钮,禁止原生全屏停留
- if (this.displayType === 'portrait') {
- if (event && event.stopPropagation) event.stopPropagation();
- if (event && event.preventDefault) event.preventDefault();
- // 只在“进入全屏”时切换,避免 exitFullScreen 触发的 false 事件二次反转
- if (!isFullScreen || this.fullscreenToggleLock) return;
- this.fullscreenToggleLock = true;
- this.isShu = !this.isShu;
- this.$nextTick(() => {
- this._xgExitFullscreen();
- this.isFull = false;
- this._lockAppPortrait();
- this.fullscreenToggleTimer = setTimeout(() => {
- this.fullscreenToggleLock = false;
- this.fullscreenToggleTimer = null;
- }, 280);
- });
- return;
- }
- // 横屏课程:全屏锁横屏,退出全屏锁竖屏并恢复顶部小窗布局
- if (isFullScreen) {
- this._lockAppLandscape();
- } else {
- this._lockAppPortrait();
- this.isFull = false;
- this.$nextTick(() => {
- this.getVideoContainerHeight();
- });
- }
- },
- //购物车
- showCart(){
- ///console.log("[---]")
- this.isCart=true
- },
- showMore(){
- ///console.log("[---]")
- this.isMore=true
- },
- closeShop() {
- this.isCart = false;
- },
- closeMore() {
- this.isMore = false;
- },
- navgetTo(url){
- uni.navigateTo({
- url: url
- });
- },
- openList(){
- const wasShu = this.isShu
- this.isShu = !this.isShu
- if (wasShu && this.showTabFeaturedComments) this.tabIndex = 0
- // 竖屏课经 openList 切布局后,需重置播放器 CSS 全屏态,否则再次点 f 只会触发退出事件
- if (this.displayType === 'portrait') {
- this._xgExitFullscreen()
- }
- },
- // 倒计时格式化函数
- formatCountdown(seconds) {
- const totalSeconds = Math.max(0, Math.floor(Number(seconds) || 0));
- const hours = Math.floor(totalSeconds / 3600);
- const remainingAfterHours = totalSeconds % 3600;
- const minutes = Math.floor(remainingAfterHours / 60);
- const secs = remainingAfterHours % 60;
- return {
- hours: this.padZero(hours),
- minutes: this.padZero(minutes),
- seconds: this.padZero(secs),
- total: totalSeconds
- };
- },
- getCountdownPercentage() {
- const total = Number(this.totalRemainTime) || 0;
- if (!total) return 0;
- const remain = Math.max(0, Number(this.remainTime) || 0);
- const watched = Math.max(0, total - remain);
- const percentage = (watched / total) * 100;
- return Math.min(100, Math.max(0, Number(percentage.toFixed(2))));
- },
- // 补零函数
- padZero(num) {
- return num < 10 ? `0${num}` : num.toString();
- },
- // 启动完课积分倒计时(仅在播放时递减)
- startCountdown() {
- if (this.remainTime <= 0 || this.countdownTimer) return;
- this.countdownTimer = setInterval(() => {
- if (this.remainTime > 0) {
- this.remainTime--;
- }
- if (this.remainTime <= 0 && this.countdownTimer) {
- clearInterval(this.countdownTimer);
- this.countdownTimer = null;
- if (!this.hasReportedAfterCountdown) {
- this.hasReportedAfterCountdown = true;
- this.getFinishCourseVideo();
- this.getInternetTraffic();
- }
- }
- }, 1000);
- },
- // 停止完课积分倒计时(暂停/离开页面时调用)
- stopCountdown() {
- if (this.countdownTimer) {
- clearInterval(this.countdownTimer);
- this.countdownTimer = null;
- }
- },
- //剩余时间
- getRemainTime(userId) {
- var data = {
- "videoId": this.videoId,
- "fsUserId": userId,
- "courseId": this.courseId,
- "projectId":this.projectId,
- "periodId":this.periodId,
- "companyUserId": this.companyUserId
- }
- getRemainTime(data).then(res => {
- if (res.code == 200) {
- const remain = Number(res.remainTime) || 0; // 积分看课剩余时间(秒)
- this.remainTime = remain;
- this.remainTimeReady = true;
- this.hasReportedAfterCountdown = remain <= 0;
- // 初始化或刷新总时长,用于进度条百分比
- if (!this.totalRemainTime || remain > this.totalRemainTime) {
- this.totalRemainTime = remain;
- }
- } else {
- this.remainTimeReady = false
- uni.showToast({
- icon: 'none',
- title: res.msg,
- });
- }
- })
- },
- getWebviewUrl() {
- var data = {
- key: 'course.config'
- }
- getConfigByKey(data).then(res => {
- if (res.code == 200) {
- console.log("getConfigByKey====", JSON.parse(res.data))
- let data = JSON.parse(res.data)
- this.notice = data.camelCase
- uni.setStorageSync('setWebviewUrl', data.userCourseAuthDomain)
- } else {
- uni.showToast({
- icon: 'none',
- title: res.msg,
- });
- }
- })
- },
- tabChange(type) {
- this.currentId = type
- },
- kefpop() {
- if (this.appToken) {
- this.kfPopup == false
- }
- },
- tosales() {
- uni.switchTab({
- url: "/pages/index/index"
- })
- },
- closepop() {
- this.answerPopup = false
- },
- open() {
- },
- getMenuButton() {
- const menuButtonInfo = uni.getMenuButtonBoundingClientRect()
- this.menuButtonLeft = menuButtonInfo.left
- this.menuButtonH = menuButtonInfo.height
- },
- _touchAntiSeekSuppress(ms = 2000) {
- const until = Date.now() + ms
- if (until > (this._antiSeekSuppressExpireAt || 0)) this._antiSeekSuppressExpireAt = until
- },
- //播放时间更新事件方法
- onTimeUpdate(e) {
- let currentTime = Math.round(e.detail.currentTime)
- if (this.playDurationSeek > 0) {
- this.playTime = this.playDurationSeek
- this.throttle(() => this.changeTime(this), 1000, false)
- } else {
- // console.log(this.isFinish)
- const suppressAntiSeek = Date.now() < (this._antiSeekSuppressExpireAt || 0)
- if (!suppressAntiSeek && (currentTime - this.playTime > 3 || currentTime - this
- .playTime < -3) && this
- .isFinish != 1) {
- uni.showToast({
- title: '不能快进哦',
- icon: 'none',
- });
- currentTime = this.playTime
- this._xgSeek(this.playTime);
- }
- if (Math.floor(e.detail.currentTime) != this.flagTime) {
- this.flagTime = Math.floor(e.detail.currentTime)
- // 中途弹窗逻辑
- if (!this.tipsOpen && this.tipsTime && this.playTime == this.tipsTime) {
- this.timepath = '33%'
- this.openTipsPop()
- }
- if (!this.tipsOpen && this.tipsTime2 && this.playTime == this.tipsTime2) {
- this.timepath = '66%'
- this.openTipsPop()
- }
- }
- this.playTime = currentTime
- this.updateProductAndCardDisplay(currentTime)
- }
- },
- // 根据当前播放时间:1)扫描商品栏展示(上架/下架时间)2)控制商品卡片弹窗(弹出/关闭时间)
- updateProductAndCardDisplay(currentSec) {
- const toSeconds = (timeStr) => {
- if (!timeStr || typeof timeStr !== 'string') return 0
- const parts = timeStr.split(':')
- if (parts.length !== 3) return 0
- const h = parseInt(parts[0], 10) || 0
- const m = parseInt(parts[1], 10) || 0
- const s = parseInt(parts[2], 10) || 0
- return h * 3600 + m * 60 + s
- }
- const hasValidShelfTime = (timeStr) => {
- if (!timeStr || typeof timeStr !== 'string') return false
- if (timeStr === '00:00:00') return false
- return !!toSeconds(timeStr)
- }
- if (this.treatmentPackage.length === 0) {
- this.displayProductList = []
- this.cardPopup = false
- this.currentCardItem = null
- this._syncFakeMarqueeIfEligibleChanged()
- return
- }
- // 按“上架时间”倒序排序,保证后上架商品展示在列表最前
- const sortedTreatmentPackage = this.treatmentPackage.slice().sort((a, b) => {
- const aOn = hasValidShelfTime(a.onShelfTime) ? toSeconds(a.onShelfTime) : 0
- const bOn = hasValidShelfTime(b.onShelfTime) ? toSeconds(b.onShelfTime) : 0
- if (bOn !== aOn) return bOn - aOn
- // 上架时间相同则按下架时间倒序,进一步保证新近优先
- const aOff = hasValidShelfTime(a.offShelfTime) ? toSeconds(a.offShelfTime) : 0
- const bOff = hasValidShelfTime(b.offShelfTime) ? toSeconds(b.offShelfTime) : 0
- return bOff - aOff
- })
- const videoDuration = this.duration || 0
- // 1. 商品栏展示:按上架/下架时间过滤
- this.displayProductList = sortedTreatmentPackage.filter(item => {
- // 上架时间必填;下架时间可为空(为空表示一直展示到视频结束)
- if (!hasValidShelfTime(item.onShelfTime)) return false
- const onShelfSec = toSeconds(item.onShelfTime)
- if (currentSec < onShelfSec) return false
- const hasOffShelfTime = hasValidShelfTime(item.offShelfTime)
- if (!hasOffShelfTime) return true
- const offShelfSec = toSeconds(item.offShelfTime)
- if (videoDuration > 0 && offShelfSec > videoDuration) return true
- return currentSec < offShelfSec
- })
- //console.log('this.displayProductList',this.displayProductList)
- // 2. 商品卡片弹窗:按弹出/关闭时间查找当前应展示的卡片
- let activeCard = null
- let activePopupSec = -1
- for (let i = 0; i < sortedTreatmentPackage.length; i++) {
- const item = sortedTreatmentPackage[i]
- const popupStr = item.cardPopupTime
- const closeStr = item.cardCloseTime
- if (!popupStr || popupStr === '00:00:00') continue
- const popupSec = toSeconds(popupStr)
- if (!popupSec) continue
- const closeSec = (closeStr && closeStr !== '00:00:00') ? toSeconds(closeStr) : null
- if (currentSec >= popupSec && (closeSec == null || currentSec < closeSec)) {
- // 同时命中多个弹窗时:优先展示“启动时间更晚”的后续弹窗
- if (popupSec > activePopupSec) {
- activePopupSec = popupSec
- activeCard = item
- } else if (popupSec === activePopupSec && activeCard) {
- // 上架时间更晚优先(兜底)
- const activeOn = hasValidShelfTime(activeCard.onShelfTime) ? toSeconds(activeCard.onShelfTime) : 0
- const itemOn = hasValidShelfTime(item.onShelfTime) ? toSeconds(item.onShelfTime) : 0
- if (itemOn > activeOn) activeCard = item
- }
- }
- }
- const activeCardKey = activeCard ?
- `${activeCard.productId || ''}_${activeCard.cardPopupTime || ''}_${activeCard.cardCloseTime || ''}` :
- ''
- if (!activeCardKey) {
- this.dismissedCardKey = ''
- }
- this.cardPopup = !!activeCard && this.dismissedCardKey !== activeCardKey
- //this.getVideoContainerHeight()
- this.currentCardItem = activeCard
- this.syncProductHotCounts()
- this._syncFakeMarqueeIfEligibleChanged()
- },
- closeCardPopup() {
- if (this.currentCardItem) {
- this.dismissedCardKey =
- `${this.currentCardItem.productId || ''}_${this.currentCardItem.cardPopupTime || ''}_${this.currentCardItem.cardCloseTime || ''}`
- }
- this.cardPopup = false
- },
- hasHotSaleTag(item) {
- return hasHotSaleTag(item)
- },
- getProductHotCount(item) {
- if (!hasHotSaleTag(item)) return 0
- const key = getProductHotKey(item)
- return key ? clampHotSaleCount(this.productHotCountMap[key]) : 0
- },
- _collectHotSaleProducts() {
- const seen = new Set()
- const list = []
- const add = (item) => {
- if (!hasHotSaleTag(item)) return
- const key = getProductHotKey(item)
- if (!key || seen.has(key)) return
- seen.add(key)
- list.push(item)
- }
- ;(this.displayProductList || []).forEach(add)
- if (this.cardPopup && this.currentCardItem) add(this.currentCardItem)
- return list
- },
- _randomInt(min, max) {
- return Math.floor(Math.random() * (max - min + 1)) + min
- },
- syncProductHotCounts() {
- const products = this._collectHotSaleProducts()
- const next = { ...this.productHotCountMap }
- const activeKeys = new Set()
- products.forEach((item) => {
- const key = getProductHotKey(item)
- if (!key) return
- activeKeys.add(key)
- if (!next[key]) {
- next[key] = clampHotSaleCount(this._randomInt(100, 800))
- }
- })
- Object.keys(next).forEach((key) => {
- if (!activeKeys.has(key)) delete next[key]
- })
- this.productHotCountMap = next
- if (activeKeys.size) {
- this.startProductHotTimer()
- } else {
- this.stopProductHotTimer()
- }
- },
- startProductHotTimer() {
- if (this.productHotTimer) return
- this.productHotTimer = setInterval(() => {
- const products = this._collectHotSaleProducts()
- if (!products.length) return
- const next = { ...this.productHotCountMap }
- products.forEach((item) => {
- const key = getProductHotKey(item)
- if (key && next[key]) {
- next[key] = clampHotSaleCount(next[key] + this._randomInt(10, 20))
- }
- })
- this.productHotCountMap = next
- }, 30000)
- },
- stopProductHotTimer() {
- if (this.productHotTimer) {
- clearInterval(this.productHotTimer)
- this.productHotTimer = null
- }
- },
- changeTime(that, e) {
- that.playDurationSeek = 0
- },
- videoErrorCallback(e) {
- this.clearIntegral()
- this.errorCount++
- if (this.errorCount > 3) return
- console.log(e)
- this.getErrMsg(e.target.errMsg)
- this.getH5CourseVideoDetails('error')
- },
- // 商品卡片跳转
- goBuy(item) {
- if (!item || !item.productId) return
- const url = '/pages/shopping/productDetails?productId=' + item.productId +
- '&companyId=' + (this.urlOption.companyId || '') +
- '&companyUserId=' + (this.urlOption.companyUserId || '') +
- '&courseId=' + (this.urlOption.courseId || '') +
- '&videoId=' + (this.urlOption.videoId || '') +
- '&projectId=' + (this.urlOption.projectId || '') +
- '&periodId=' + (this.urlOption.periodId || '')
- // 横屏全屏下先退出全屏再跳转,避免视频层遮挡商品详情页
- if (this.isFull) {
- this._xgExitFullscreen()
- this._lockAppPortrait()
- this.isFull = false
- setTimeout(() => {
- uni.navigateTo({ url })
- }, 100)
- return
- }
- uni.navigateTo({ url })
- },
- // 当开始/继续播放时触发play事件
- getPlay() {
- this.errorCount = 0
- this.videoPlaying = true
- // this.judgeDuration()
- // 开始播放时启动完课积分倒计时
- this.startCountdown()
- },
- getPause() {
- this.videoPlaying = false
- this.clearIntegral()
- // 暂停时停止完课积分倒计时
- this.stopCountdown()
- },
- getEnded() {
- this.videoPlaying = false
- this.clearIntegral()
- // 播放结束时停止完课积分倒计时
- this.stopCountdown()
- this.isEnded = true
- this.isFinish = 1
- this.getFinishCourseVideo()
- },
- getIP() {
- uni.request({
- url: 'https://ipinfo.io/json', //仅为示例,并非真实接口地址。
- method: 'GET',
- success: (res) => {
- this.ip = res.data.ip
- }
- });
- },
- getHeight() {
- this.height =
- `calc(100vh - 420rpx - 160rpx)`
- // this.$nextTick(() => {
- // const query = uni.createSelectorQuery().in(this);
- // query
- // .select("#title-content")
- // .boundingClientRect((data) => {
- // this.height =
- // `calc(100vh - ${data.height}px - 420rpx)`
- // })
- // .exec();
- // })
- },
- getDescHeight() {
- // this.$nextTick(() => {
- // const query = uni.createSelectorQuery().in(this);
- // query
- // .select("#descbox-desc")
- // .boundingClientRect((data) => {
- // this.textHeight = data.height
- // })
- // .exec();
- // })
- },
- numberToLetter(num) {
- // 将数字转换为字母的 ASCII 码
- let letterCode = num + 65;
- // 将 ASCII 码转换为大写字母
- let letter = String.fromCharCode(letterCode);
- return letter;
- },
- updateTime() {
- var that = this;
- if (this.interval != null) {
- clearInterval(this.interval)
- }
- this.interval = setInterval(function() {
- that.getFinishCourseVideo()
- that.getInternetTraffic()
- }, 60000);
- },
- judgeDuration() {
- var that = this;
- if (this.intervalIntegral != null) {
- clearInterval(this.intervalIntegral)
- this.intervalIntegral = null
- }
- // 观看10分钟获得积分
- this.intervalIntegral = setInterval(function() {
- that.getIntegralByH5Video()
- }, 600000);
- },
- clearIntegral() {
- if (this.intervalIntegral != null) {
- clearInterval(this.intervalIntegral)
- this.intervalIntegral = null
- }
- },
- // 展开简介
- handleExpand() {
- this.isExpand = !this.isExpand
- },
- getH5CourseByVideo() {
- this.loading = true
- getH5CourseByVideoId({
- videoId: this.videoId
- }).then(res => {
- this.loading = false
- if (res.code == 200) {
- this.viewload = false
- this.courseInfo = res.data
- uni.setNavigationBarTitle({
- title: this.courseInfo.title||''
- });
- this.$nextTick(() => {
- this._syncRatingTabIndex()
- })
- }
- //this.getHeight()
- //this.getDescHeight()
- },
- rej => {
- this.loading = false
- }
- ).catch(() => {
- this.loading = false
- })
- },
- getH5CourseVideoDetails(type) {
- uni.showLoading({
- title: '加载中'
- })
- //var user = uni.getStorageSync('userInfo');
- const data = {
- videoId: this.videoId,
- fsUserId: this.userInfo.userId,
- courseId: this.courseId,
- companyUserId: this.companyUserId,
- periodId: this.periodId,
- id: this.timeid
- }
- getH5CourseVideoDetails(data).then(res => {
- if (res.code == 200) {
- this.config = res.data.courseConfig || {}
- this.isFinish = res.data.isFinish || 0
- this.duration = res.data.courseVideoDetails &&
- res.data.courseVideoDetails.duration ? res.data.courseVideoDetails.duration : 0
- this.courseLogo = this.config && JSON.stringify(this.config) != '{}' ? this.config
- .courseLogo : ''
- this.playDuration = res.data.playDuration || 0
- this.playDurationSeek = res.data.playDuration || 0
- // this.tipsTime = 38
- this.tipsTime = res.data.tipsTime || 0
- this.tipsTime2 = res.data.tipsTime2 || 0
- this.displayType = res.data.courseVideoDetails && res.data.courseVideoDetails
- .displayType != '' ? res.data.courseVideoDetails.displayType :'landscape'
- this.isShu = this.displayType=='landscape'?false:true
- const showTreatmentFlag = res.data.courseVideoDetails && res.data.courseVideoDetails
- .showProduct != null ? res.data.courseVideoDetails.showProduct : 1
- this.treatmentPackage = res.data.courseVideoDetails && res.data.courseVideoDetails
- .fsStoreProductScrms ? res.data.courseVideoDetails.fsStoreProductScrms : []
- this.showTreatment = showTreatmentFlag == 0 && this.treatmentPackage.length > 0 ? 0 : 1;
- //console.log('this.showTreatment',this.showTreatment)
- let lineList = []
- // if (res.course && res.course.lineOne) {
- // lineList.push(res.course.lineOne)
- // }
- // if (res.course && res.course.lineTwo) {
- // lineList.push(res.course.lineTwo)
- // }
- // if (res.course && res.course.lineThree) {
- // lineList.push(res.course.lineThree)
- // }
- this.lineList = lineList
- if (!this.xgPlayerInited || type == 'error') {
- uni.hideLoading();
- if (type == 'error') {
- this.videoReloadKey++
- this.xgPlayerInited = false
- }
- this.lineIndex = this.config.defaultLine
- this.videoUrl = res.data.courseVideoDetails.videoUrl
- this.poster = res.data.courseVideoDetails &&
- res.data.courseVideoDetails.thumbnail ? res.data.courseVideoDetails.thumbnail : ''
- this.videocont = res.data
- this.playTime = this.playDuration >= this.duration ? 0 : this.playDuration
- if (this.videocont.rang) {
- setTimeout(() => {
- this._xgPlay(this.playTime)
- this._touchAntiSeekSuppress(2000)
- }, 500);
- this.timepop = false
- } else {
- this.timepop = true
- }
- } else {
- this.playTime = this.playTime > this.playDuration ? this.playTime : this
- .playDuration >= this.duration ? 0 : this.playDuration
- this._xgPlay(this.playTime)
- this._touchAntiSeekSuppress(2000)
- }
- this.updateTime();
- // 初始扫描商品栏展示(根据上架/下架时间)
- this.updateProductAndCardDisplay(this.playTime ?? this.playDuration ?? 0);
- // 商品栏扫描完成后再允许虚拟跑马灯启动(延后到下一轮渲染,避免一帧闪现)
- this.$nextTick(() => {
- this.marqueeDataReady = true
- this._syncFakeMarqueeIfEligibleChanged()
- })
- const qbl =
- (res.data.courseVideoDetails && res.data.courseVideoDetails.questionBankList) || []
- this.questionBankList = qbl
- if (qbl.length === 0) {
- this.isquestion = true
- this.quesList = []
- } else {
- this.isquestion = false
- this.quesList = qbl.map(item => ({
- ...item,
- questionOption: JSON.parse(item.question),
- answer: ''
- }))
- }
- this.$nextTick(() => {
- this._syncRatingTabIndex()
- })
- }
- //this.getHeight()
- //this.getDescHeight()
- },
- rej => {}
- )
- },
- handleAnswer(itemOrPayload, option, questionIndex) {
- let item = itemOrPayload
- let opt = option
- if (itemOrPayload && itemOrPayload.item && itemOrPayload.option) {
- item = itemOrPayload.item
- opt = itemOrPayload.option
- questionIndex = this.quesList.indexOf(item)
- } else if (questionIndex == null || questionIndex < 0) {
- questionIndex = this.quesList.indexOf(item)
- }
- // 以“完课积分倒计时”结束作为答题资格
- // if (!this.remainTimeReady) {
- // uni.showToast({
- // title: "倒计时加载中,请稍后再答题哦~",
- // icon: "none"
- // })
- // return
- // }
- if (questionIndex >= 0 && opt) {
- this.goRate(questionIndex, opt.indexId)
- }
- if (Number(this.remainTime || 0) > 0) {
- uni.showToast({
- title: "完课倒计时结束再评分",
- icon: "none"
- })
- return
- }
- if (item.type == 1) {
- // 单选option
- item.answer = opt.name
- } else if (item.type == 2) {
- // 多选
- let answer = item.answer ? item.answer.split(',') : []
- if (answer.indexOf(opt.name) === -1) {
- answer.push(opt.name)
- item.answer = answer.join(',')
- } else {
- answer.splice(answer.indexOf(opt.name), 1)
- item.answer = answer.join(',')
- }
- }
- },
- submit() {
- if (this.isExpire) {
- uni.showToast({
- title: '课程已过期或链接无效',
- icon: 'none'
- });
- return
- }
- if (!this.$isLogin()) {
- this.$showLoginPage()
- return
- }
- this.isLogin = true
- this.userInfo = this.$getUserInfo()
- if (this.isAddKf == 1) {
- this.courseAnswer()
- } else if (this.videoId) {
- this.getIsAddKf()
- } else if (this.iskftype == 1) {
- uni.showToast({
- title: '已看过其他销售分享的此课程,不能重复观看',
- icon: 'none'
- })
- } else {
- this.$showLoginPage()
- }
- },
- // 答题
- courseAnswer() {
- // 以“完课积分倒计时”结束作为答题资格
- // if (!this.remainTimeReady) {
- // uni.showToast({
- // title: "倒计时加载中,请稍后再答题哦~",
- // icon: "none"
- // })
- // return
- // }
- if (Number(this.remainTime || 0) > 0) {
- uni.showToast({
- title: "完课倒计时结束再评分",
- icon: "none"
- })
- return
- }
- if (this.quesList.some(item => !item.answer)) {
- uni.showToast({
- title: "请选择评分",
- icon: "none"
- })
- return
- }
- const questions = this.quesList.map(obj => {
- const {
- questionOption,
- ...rest
- } = obj;
- return rest;
- });
- const param = {
- ...this.urlOption,
- userId: this.userInfo.userId,
- questions: questions,
- videoId: this.videoId,
- duration: this.playTime,
- }
- this.errTitle = ""
- this.errDesc = ""
- this.errQues = []
- courseAnswer(param).then(res => {
- if (res.code == 200) {
- if (res.incorrectQuestions) {
- // 答题失败
- if (res.incorrectQuestions.length > 0) {
- this.errQues = res.incorrectQuestions
- }
- this.remain = res.remain || 0
- if (res.remain > 0) {
- this.answerPopup = true
- this.errTitle = "很遗憾答错了"
- this.errDesc = `<span style="color:#FF5C03">还有${res.remain}次机会,继续加油</span>`
- // this.$refs.answerPopup.open("center")
- this.answerPopup = true
- }
- } else {
- // 答题成功
- this.errTitle = "完课积分已到账"
- //this.errDesc = `请选择奖励`
- // this.$refs.answerPopup.open("center")
- // this.answerPopup=true
- if (res.msg == '答题成功') {
- this.closeAnswerPopup()
- // uni.login({
- // provider: 'weixin',
- // success: async loginRes => {
- // console.log(loginRes)
- // var code=loginRes
- // this.closeAnswerPopup(loginRes.code)
- // }
- // })
- }
- }
- } else {
- if (res.msg == "该课题到达答错次数限制") {
- this.errTitle = "答题次数超过限制"
- this.errDesc = "以后的课程要认真学习哦"
- // this.$refs.answerPopup.open("center")
- this.answerPopup = true
- } else {
- if (res.msg.length > 14) {
- if (res.msg == "该课程已答题完成,不可重复答题") {
- uni.showToast({
- title: '已评价请勿重复提交',
- icon: 'none'
- })
- }else{
- uni.showModal({
- title: '提示',
- content: res.msg,
- showCancel: false,
- confirmText: '我知道了'
- })
- }
- } else {
- uni.showToast({
- title: res.msg,
- icon: 'none'
- })
- }
- }
- }
- },
- rej => {}
- )
- },
- // 选择
- rewardChange(e) {
- this.currentReward = e.detail.value
- },
- closeAnswerPopup() {
- // this.$refs.answerPopup.close()
- uni.showLoading({
- title: "加载中..."
- })
- if (this.errTitle == '完课积分已到账') {
- const param = {
- ...this.urlOption,
- userId: this.userInfo.userId,
- // rewardType: Number(this.currentReward),
- source: 2, // 小程序
- appId: this.appid
- }
- sendReward(param).then(res => {
- if (res.code == 200) {
- uni.hideLoading()
- this.answerPopup = false
- console.log('红包', res)
- if (res.isNew && res.isNew == 1) {
- console.log('红包配置', res)
- const packageInfo = res.data.packageInfo || ''
- if (packageInfo) {
- uni.setStorageSync('receive_package', packageInfo)
- uni.setStorageSync('mchId', res.mchId)
- uni.navigateTo({
- url: '/pages_course/reward'
- })
- }
- } else {
- if (res.msg.length > 14) {
- uni.showModal({
- title: '提示',
- content: res.msg,
- showCancel: false,
- confirmText: '我知道了'
- })
- } else {
- uni.showToast({
- title: res.msg,
- icon: 'none'
- })
- }
- }
- } else {
- uni.hideLoading()
- if (res.msg.length > 14) {
- uni.showModal({
- title: '提示',
- content: res.msg,
- showCancel: false,
- confirmText: '我知道了'
- })
- } else {
- uni.showToast({
- title: res.msg,
- icon: 'none'
- })
- }
- }
- // if(res.code == 200) {
- // //重构 发红包,后台通过OPENID发零钱到 账
- // //this.initWXConfig(res.package)
- // }else {
- // uni.showToast({
- // title: res.msg,
- // icon: 'none'
- // })
- // }
- })
- } else {
- uni.hideLoading()
- this.answerPopup = !this.answerPopup
- }
- },
- // 线路
- openPop() {
- this.$refs.popup.open('bottom')
- },
- close() {
- this.$refs.popup.close()
- },
- handleLine(index) {
- var that = this;
- if (this.lineIndex == index && this.videoUrl == this.lineList[index]) {
- this.close()
- return
- } else {
- // let div = document.querySelector(".vjs-progress-control");
- // if(div) {
- // if (this.isFinish == 1 || this.isEnded || this.linkType == 1) {
- // div.style.pointerEvents = "auto";
- // } else {
- // div.style.pointerEvents = "none"; //禁止所有事件
- // }
- // }
- this.lineIndex = index
- this.videoUrl = this.lineList[index]
- this.tipsOpen = false
- this.playDurationSeek = this.playTime || 0
- this.videoReloadKey++
- setTimeout(function() {
- that._xgPlay(that.playDurationSeek)
- }, 500);
- // this.player.src(this.lineList[index])
- // this.player.one('loadedmetadata', () => {
- // this.player.currentTime(this.playDurationSeek);
- // this.player.play();
- // });
- this.close()
- }
- },
- // 温馨提示
- openTipsPop() {
- // this.$refs.tipsPopup.open()
- this.tipsPopup = true
- // 暂停视频
- this._xgPause()
- // this.tipsOpen = true
- // this.pause()
- },
- closeTipsPop() {
- // this.$refs.tipsPopup.close()
- this._xgPlay(this.playTime || 0)
- this.tipsPopup = !this.tipsPopup
- },
- // 客服
- getIsAddKf() {
- this.qrcode = ''
- this.qrcodeMsg = ''
- this.isAddKf = 0
- this.userInfo = this.$getUserInfo()
- if (!this.userInfo || !this.userInfo.userId) {
- this.isLogin = false
- return
- }
- const data = {
- videoId: this.videoId,
- userId: this.userInfo.userId,
- companyUserId: this.companyUserId,
- companyId: this.companyId,
- courseId: this.courseId,
- periodId: this.periodId,
- projectId: this.projectId,
- appId: this.appid,
- }
- // {videoId: this.videoId,qwUserId: this.qwUserId,corpId: this.corpId}
- getIsAddKf(data).then(res => {
- if (res.code == 200) {
- this.isLogin = true
- if (res.data) {
- this.isAddKf = 1
- if (this.userInfo) {
- if (typeof this.userInfo === 'string') {
- try {
- this.userInfo = JSON.parse(this.userInfo);
- } catch (e) {
- this.userInfo = {};
- }
- }
- if (this.userInfo.userId) {
- this.getH5CourseVideoDetails();
- this.getRemainTime(this.userInfo.userId);
- this.loadFeaturedComments()
- }
- }
- }
- // else{
- // uni.showToast({
- // title: '请联系管理员,注册为会员!',
- // icon: 'none'
- // });
- // }
- } else if (res.code == 1002) {
- this.isAddKf = 0
- this.qrcode = res.ext
- this.kfPopup = true
- uni.showToast({
- title: "请添加管理员微信,成为会员!",
- icon: 'none'
- });
- this.initExpiration(res.msg, res.code)
- } else if (res.code == 505) {
- this.isAddKf = 0
- this.qrcode = res.ext
- this.kfPopup = true
- uni.showToast({
- title: "管理员开启了会员审核,请等待审核!",
- icon: 'none'
- });
- this.initExpiration(res.msg, res.code)
- } else if (res.code == 406) {
- uni.hideLoading();
- uni.showToast({
- icon: 'none',
- title: '该用户已成为其他销售会员',
- });
- this.initExpiration(res.msg, res.code)
- } else if (res.code == 504) {
- this.isAddKf = 0
- this.iskftype = 1
- uni.showToast({
- title: res.msg,
- icon: 'none'
- });
- this.initExpiration(res.msg, res.code)
- } else {
- this.isAddKf = 0
- uni.showToast({
- title: res.msg,
- icon: 'none'
- });
- this.initExpiration(res.msg, res.code)
- }
- },
- err => {}
- );
- },
- initExpiration(resMsg, resCode) {
- if (resCode == 401) return;
- this.resMsg = resMsg
- this.resCode = resCode
- this.showExpiration = true
- },
- closeKFPop() {
- // this.$refs.kfPopup.close()
- // this.kfPopup=!this.kfPopup
- },
- /** 离开页面前补上报,避免 60s 定时未到导致再次进入从头播放 */
- _flushWatchProgress() {
- if (!this.playTime || !this.isLogin || this.isAddKf != 1) return
- const baseDuration = this.playDuration >= this.duration ? 0 : (Number(this.playDuration) || 0)
- if (this.playTime <= baseDuration && this.isFinish != 1) return
- this.getFinishCourseVideo()
- this.getInternetTraffic()
- },
- getFinishCourseVideo() {
- if (!this.playTime || !this.isLogin || this.isAddKf != 1) return
- const userId = this.userInfo && this.userInfo.userId
- if (!userId) return
- const param = {
- duration: this.playTime,
- videoId: this.videoId,
- userId,
- companyUserId: this.companyUserId
- }
- getFinishCourseVideo(param)
- },
- // 每十分钟获得积分
- getIntegralByH5Video() {
- const param = {
- duration: this.playTime,
- ...this.urlOption
- }
- getIntegralByH5Video(param).then(res => {
- if (res.code == 200) {
- uni.showToast({
- title: "积分+10",
- icon: "none"
- })
- }
- })
- },
- progressChange(e) {
- this.bufferRate = Math.ceil(e.detail.buffered)
- // console.log('缓冲结果',this.bufferRate)
- // console.log('缓冲',this.playTime,this.duration)
- },
- // 缓冲
- getInternetTraffic() {
- const playVideoTime = Math.ceil(this.playTime / this.duration * 100) // 播放百分比
- // console.log('播放百分比',playVideoTime)
- if (this.bufferRate == 0 || this.bufferRate < playVideoTime) {
- this.bufferRate = playVideoTime
- console.log(this.bufferRate)
- }
- if (this.bufferRate == 0 || Number(this.bufferRate.toFixed(2)) == 0) return
- const param = {
- uuId: dayjs().format('YYYYMMDD') + this.uuId,
- duration: this.playTime,
- bufferRate: Number(this.bufferRate.toFixed(2)),
- userId: this.userId,
- periodId: this.periodId,
- ...this.urlOption
- }
- getInternetTraffic(param)
- },
- getErrMsg(err) {
- let msgerr = {
- videoUrl: this.videoUrl,
- lineIndex: this.lineIndex,
- errTime: new Date(),
- // ip: this.ip,
- errMsg: err
- }
- getErrMsg({
- msg: JSON.stringify(msgerr)
- })
- },
- getLink() {
- if (!this.$isLogin()) {
- this.$showLoginPage()
- return
- }
- this.isLogin = true
- this.userInfo = this.$getUserInfo()
- if (this.isLogin && this.isAddKf == 1) {
- this.getH5CourseVideoDetails()
- }
- if (this.videoId && this.isAddKf != 1) {
- this.getIsAddKf()
- }
- },
- /**
- * 节流原理:在一定时间内,只能触发一次
- *
- * @param {Function} func 要执行的回调函数
- * @param {Number} wait 延时的时间
- * @param {Boolean} immediate 是否立即执行
- * @return null
- */
- throttle(func, wait = 500, immediate = true) {
- if (immediate) {
- if (!this.flag) {
- this.flag = true
- // 如果是立即执行,则在wait毫秒内开始时执行
- typeof func === 'function' && func()
- this.timer = setTimeout(() => {
- this.flag = false
- }, wait)
- }
- } else if (!this.flag) {
- this.flag = true
- // 如果是非立即执行,则在wait毫秒内的结束处执行
- this.timer = setTimeout(() => {
- this.flag = false
- typeof func === 'function' && func()
- }, wait)
- }
- }
- }
- }
- </script>
- <script module="xgplayer" lang="renderjs">
- const XG_SCRIPT = 'https://unpkg.byted-static.com/xgplayer/3.0.20/dist/index.min.js';
- const XG_CSS = 'https://unpkg.byted-static.com/xgplayer/3.0.20/dist/index.min.css';
- export default {
- data() {
- return {
- player: null,
- ownerInstance: null,
- isFullscreen: false,
- isCSSFull: false,
- Events: null,
- lastConfig: null,
- pendingPlayStatus: null
- };
- },
- beforeDestroy() {
- this._destroyPlayer();
- },
- methods: {
- _shouldReinitPlayer(newValue, oldValue) {
- if (!this.player || !oldValue || !newValue) return true;
- return newValue.url !== oldValue.url ||
- newValue.playerId !== oldValue.playerId ||
- newValue.isFast !== oldValue.isFast ||
- newValue.videoReloadKey !== oldValue.videoReloadKey;
- },
- _getFullscreenTarget(playerId) {
- const playerEl = document.getElementById(playerId);
- if (playerEl) {
- return playerEl.closest('.videovip-video-container') ||
- playerEl.closest('.video-container') ||
- playerEl.parentElement;
- }
- return document.querySelector('.videovip-video-container') || document.body;
- },
- _ensureXgVideoStyles() {
- const attr = 'data-xg-videovip-fix-v2';
- const old = document.querySelector('style[data-xg-videovip-fix]');
- if (old) old.remove();
- if (document.querySelector('style[' + attr + ']')) return;
- const style = document.createElement('style');
- style.setAttribute(attr, '1');
- style.textContent = [
- '.videovip-xg-player, .videovip-xg-player .xgplayer {',
- ' width: 100% !important;',
- ' height: 100% !important;',
- '}',
- '.videovip-xg-player video, .videovip-xg-player .xgplayer-video video {',
- ' width: 100% !important;',
- ' height: 100% !important;',
- ' object-fit: contain !important;',
- ' background: #000;',
- '}',
- '.xgplayer-is-fullscreen video,',
- '.xgplayer-is-cssfullscreen video,',
- '.xgplayer.xgplayer-is-fullscreen video,',
- '.xgplayer.xgplayer-is-cssfullscreen video {',
- ' object-fit: contain !important;',
- '}'
- ].join('\n');
- document.head.appendChild(style);
- },
- _applyVideoFillMode(isFullscreen) {
- if (!this.player) return;
- const mode = isFullscreen ? 'contain' : 'cover';
- try {
- if (this.player.config) this.player.config.videoFillMode = mode;
- if (typeof this.player.resize === 'function') this.player.resize();
- } catch (e) {}
- },
- _destroyPlayer() {
- if (!this.player) return;
- if (this.isFullscreen) {
- if (this.isCSSFull) {
- this.player.exitCssFullscreen();
- } else {
- this.player.exitFullscreen();
- }
- }
- try {
- this.player.destroy();
- } catch (e) {}
- this.player = null;
- },
- _resetPortraitCssFullscreen() {
- if (!this.player) return;
- try {
- this.player.exitCssFullscreen();
- } catch (e) {}
- this.isFullscreen = false;
- },
- _resizePlayerLayout() {
- const portrait = this.lastConfig && this.lastConfig.displayType === 'portrait';
- if (portrait) {
- this._resetPortraitCssFullscreen();
- }
- const run = () => {
- if (!this.player) return;
- try {
- this._applyVideoFillMode(!!this.isFullscreen);
- if (typeof this.player.resize === 'function') this.player.resize();
- } catch (e) {}
- };
- setTimeout(run, 0);
- setTimeout(run, 80);
- setTimeout(run, 220);
- },
- _notifyFullscreenToVue(isFullscreen) {
- if (!this.ownerInstance) return;
- const portrait = this.lastConfig && this.lastConfig.displayType === 'portrait';
- if (portrait) {
- const now = Date.now();
- if (this._fsNotifyVal === isFullscreen && now - (this._fsNotifyAt || 0) < 150) return;
- this._fsNotifyVal = isFullscreen;
- this._fsNotifyAt = now;
- }
- this.ownerInstance.callMethod('onXgFullscreenChange', {
- isFullscreen
- });
- },
- initJs(newValue, oldValue, ownerInstance) {
- if (!newValue || !newValue.url) return;
- if (!this._shouldReinitPlayer(newValue, oldValue)) {
- this.lastConfig = newValue;
- this._syncProgressLock(!!newValue.isFast);
- if (oldValue && newValue.layoutShuKey !== oldValue.layoutShuKey) {
- this._resizePlayerLayout();
- }
- return;
- }
- const bootstrap = () => {
- this._ensureXgVideoStyles();
- this._waitForPlayerDom(newValue.playerId || 'video-content-box', () => {
- this.initPlayer(newValue, oldValue, ownerInstance);
- });
- };
- if (typeof window.Player === 'function') {
- bootstrap();
- return;
- }
- const script = document.createElement('script');
- script.src = XG_SCRIPT;
- script.onload = bootstrap;
- document.head.appendChild(script);
- if (!document.querySelector('link[data-xg-videovip-css]')) {
- const link = document.createElement('link');
- link.rel = 'stylesheet';
- link.href = XG_CSS;
- link.setAttribute('data-xg-videovip-css', '1');
- document.body.appendChild(link);
- }
- },
- _waitForPlayerDom(playerId, callback, attempt = 0) {
- const el = document.getElementById(playerId);
- if (el) {
- callback(el);
- return;
- }
- if (attempt >= 30) return;
- setTimeout(() => this._waitForPlayerDom(playerId, callback, attempt + 1), 100);
- },
- _syncProgressLock(allowSeek) {
- if (!this.player) return;
- const progress = this.player.getPlugin && this.player.getPlugin('progress');
- if (!progress) return;
- progress.show && progress.show();
- const lockSeek = !allowSeek;
- if (progress.config) {
- progress.config.isCloseClickSeek = lockSeek;
- progress.config.closeMoveSeek = lockSeek;
- progress.config.isDraggingSeek = false;
- }
- if (this.player.config && this.player.config.progress) {
- this.player.config.progress.isCloseClickSeek = lockSeek;
- this.player.config.progress.closeMoveSeek = lockSeek;
- this.player.config.progress.isDraggingSeek = false;
- }
- },
- initPlayer(newValue, oldValue, ownerInstance) {
- const Player = window.Player;
- this.Events = Player.Events;
- if (!this.ownerInstance) this.ownerInstance = ownerInstance;
- this.lastConfig = newValue;
- const playerId = newValue.playerId || 'video-content-box';
- const allowSeek = newValue.isFast == 1;
- const portraitLayoutToggle = newValue.displayType === 'portrait';
- const fsTarget = this._getFullscreenTarget(playerId);
- const fullscreenOpt = portraitLayoutToggle ? {
- useCssFullscreen: true
- } : {
- useScreenOrientation: true,
- lockOrientationType: 'landscape'
- };
- const option = {
- lang: 'zh',
- url: newValue.url,
- id: playerId,
- autoplay: false,
- loop: false,
- height: '100%',
- width: '100%',
- poster: newValue.poster || '',
- 'x5-video-player-type': 'h5',
- playsinline: true,
- videoFillMode: 'cover',
- ignores: ['volume', 'miniscreen', 'keyboard', 'playbackrate'],
- disableGesture: true,
- closeVideoTouch: true,
- closeVideoDblclick: true,
- closeVideoClick: false,
- progress: {
- isDraggingSeek: false,
- isCloseClickSeek: !allowSeek,
- closeMoveSeek: !allowSeek
- },
- fullscreen: fullscreenOpt,
- fullscreenTarget: fsTarget
- };
- if (this.player) {
- this._destroyPlayer();
- }
- this.player = new Player(option);
- this._syncProgressLock(allowSeek);
- this._bindEvents();
- this.ownerInstance.callMethod('onXgPlayerReady');
- if (this.pendingPlayStatus) {
- this.changeVideo(this.pendingPlayStatus, null, ownerInstance);
- this.pendingPlayStatus = null;
- }
- },
- _bindEvents() {
- if (!this.player || !this.Events) return;
- const Events = this.Events;
- const owner = this.ownerInstance;
- this.player.on(Events.PLAY, () => owner.callMethod('onXgVideoPlay'));
- this.player.on(Events.PLAYING, () => owner.callMethod('onXgVideoPlay'));
- this.player.on(Events.PAUSE, () => owner.callMethod('onXgVideoPause'));
- this.player.on(Events.ENDED, () => owner.callMethod('onXgVideoEnded'));
- this.player.on(Events.ERROR, (err) => owner.callMethod('onXgVideoError', {
- error: err
- }));
- this.player.on(Events.TIME_UPDATE, () => owner.callMethod('onXgVideoTimeUpdate', {
- currentTime: this.player.currentTime
- }));
- this.player.on(Events.PROGRESS, () => {
- let buffered = 0;
- try {
- const buf = this.player.buffered;
- if (buf && buf.length && this.player.duration) {
- buffered = (buf.end(buf.length - 1) / this.player.duration) * 100;
- }
- } catch (e) {}
- owner.callMethod('onXgVideoProgress', {
- buffered
- });
- });
- this.player.on(Events.FULLSCREEN_CHANGE, (isFullscreen) => {
- if (this.isFullscreen == isFullscreen) return;
- const portrait = this.lastConfig && this.lastConfig.displayType === 'portrait';
- if (portrait) return;
- this.isFullscreen = isFullscreen;
- this._applyVideoFillMode(isFullscreen);
- this._syncAppOrientationForFullscreen(isFullscreen);
- this._notifyFullscreenToVue(isFullscreen);
- });
- this.player.on(Events.CSS_FULLSCREEN_CHANGE, (isFullscreen) => {
- const portrait = this.lastConfig && this.lastConfig.displayType === 'portrait';
- if (portrait) {
- // 竖屏课:f 键仅切换页面布局,进入 CSS 全屏后立即退出,避免与 openList 切布局后状态不同步
- if (isFullscreen) {
- this.isCSSFull = true;
- this._resetPortraitCssFullscreen();
- this._notifyFullscreenToVue(true);
- } else {
- this._resetPortraitCssFullscreen();
- }
- return;
- }
- if (this.isFullscreen == isFullscreen) return;
- this.isCSSFull = true;
- this.isFullscreen = isFullscreen;
- this._applyVideoFillMode(isFullscreen);
- this._syncAppOrientationForFullscreen(isFullscreen);
- this._notifyFullscreenToVue(isFullscreen);
- });
- },
- _syncAppOrientationForFullscreen(isFullscreen) {
- const isPortraitCourse = this.lastConfig && this.lastConfig.displayType === 'portrait';
- try {
- if (isPortraitCourse) {
- if (!isFullscreen) {
- plus.screen.lockOrientation('portrait-primary');
- }
- return;
- }
- if (isFullscreen) {
- plus.screen.lockOrientation('landscape-primary');
- } else {
- plus.screen.lockOrientation('portrait-primary');
- }
- } catch (e) {}
- },
- handleExitFullscreen(newValue) {
- if (!this.player || !newValue || String(newValue).indexOf('yes') === -1) return;
- const portrait = this.lastConfig && this.lastConfig.displayType === 'portrait';
- if (portrait) {
- this._resetPortraitCssFullscreen();
- this._syncAppOrientationForFullscreen(false);
- return;
- }
- if (!this.isFullscreen) return;
- if (this.isCSSFull) {
- this.player.exitCssFullscreen();
- } else {
- this.player.exitFullscreen();
- }
- this.isFullscreen = false;
- this._syncAppOrientationForFullscreen(false);
- },
- changeVideo(newValue, oldValue, ownerInstance) {
- if (!newValue) return;
- if (!this.ownerInstance) this.ownerInstance = ownerInstance;
- if (!this.player) {
- this.pendingPlayStatus = newValue;
- return;
- }
- const status = newValue.status;
- if (status === 'play') {
- if (newValue.seekTime > 0) {
- this.player.seek(newValue.seekTime);
- this.player.once(this.Events.SEEKED, () => {
- setTimeout(() => this.player.play(), 200);
- });
- } else {
- setTimeout(() => this.player.play(), 200);
- }
- } else if (status === 'pause' || status === 'stop') {
- this.player.pause();
- } else if (status === 'seek') {
- this.player.seek(newValue.seekTime || 0);
- } else if (status === 'reload' && newValue.url) {
- this.player.src = newValue.url;
- if (newValue.seekTime > 0) this.player.seek(newValue.seekTime);
- setTimeout(() => this.player.play(), 300);
- }
- }
- }
- };
- </script>
- <style scoped>
- .full-width-popup {
- width: 100%;
- }
- </style>
- <style lang="scss" scoped>
- .contact-btn {
- display: inline-block;
- position: absolute;
- top: 0;
- left: 0;
- width: 100%;
- height: 100%;
- opacity: 0;
- }
- .notice-box{
- padding: 12rpx 18rpx;
- background: #FFF8F8;
- display: flex;
- align-items: center;
- image{
- width:40rpx;
- height:40rpx;
- margin-right: 10rpx;
- flex-shrink: 0;
- }
- .notice-marquee-wrap{
- flex: 1;
- min-width: 0;
- overflow: hidden;
- display: flex;
- align-items: center;
- }
- .notice-marquee-track{
- display: inline-flex;
- white-space: nowrap;
- animation: notice-marquee-scroll 20s linear infinite;
- }
- .notice-text{
- flex-shrink: 0;
- padding-right: 60rpx;
- font-family: PingFangSC, PingFang SC;
- font-weight: 600;
- font-size: 32rpx;
- line-height: 44rpx;
- color: #FF0C4D;
- display: flex;
- }
- }
- @keyframes notice-marquee-scroll{
- 0%{ transform: translateX(0); }
- 100%{ transform: translateX(-50%); }
- }
- .vip-order-cover-wrap {
- position: absolute;
- left: 10px;
- bottom:40px;
- height: 26px;
- z-index: 999;
- /* 容器按内容宽度自适应 */
- display: inline-block;
- overflow: visible;
- pointer-events: none;
- width: 200px;
- }
- .vip-order-cover-wrap--triple {
- height: 110px;
- //width: 240px;
- }
- .vip-order-cover-triple-panel {
- display: flex;
- align-items: flex-start;
- flex-direction: column;
- position: absolute;
- left: 0;
- right: auto;
- top: 0;
- }
- .vip-order-cover-triple-current {
- z-index: 1;
- }
- .vip-order-cover-triple-incoming {
- z-index: 2;
- }
- .vip-order-cover-item {
- position: absolute;
- left: 0;
- /* 不再撑满整块固定宽度,让背景宽度随内容变化 */
- right: auto;
- top: 0;
- display: inline-flex;
- align-items: center;
- background: rgba(0,0,0,0.35);
- border-radius: 26rpx;
- text-align: center;
- //border: 1px solid rgba(255, 12, 77, 0.2);
- font-family: PingFangSC, PingFang SC;
- font-size: 16px;
- height: 26px;
- line-height: 26px;
- color: #fff;
- font-weight: 400;
- box-sizing: border-box;
- }
- .vip-order-cover-triple-item {
- position: relative;
- top: auto;
- margin-bottom: 8px;
- }
- .vip-order-cover-triple-item:last-child {
- margin-bottom: 0;
- }
- .vip-order-triple-enter {
- animation: vip-order-triple-enter-up 0.46s ease-out forwards;
- }
- .vip-order-triple-leave {
- animation: vip-order-triple-leave-up 0.46s ease-in forwards;
- }
- @keyframes vip-order-triple-enter-up {
- 0% {
- opacity: 0;
- transform: translateY(38px);
- }
- 100% {
- opacity: 1;
- transform: translateY(0);
- }
- }
- @keyframes vip-order-triple-leave-up {
- 0% {
- opacity: 1;
- transform: translateY(0);
- }
- 78% {
- opacity: 1;
- transform: translateY(-34px);
- }
- 100% {
- opacity: 0;
- transform: translateY(-38px);
- }
- }
- .vip-order-cover-content {
- display: flex;
- align-items: center;
- flex-wrap: nowrap;
- white-space: nowrap;
- overflow: visible;
- justify-content: flex-start;
- height: 26px;
- line-height: 26px;
- padding:0 8px;
- }
- .vip-order-seg {
- display: inline-block;
- }
- .vip-order-seg-user {
- color: #fff;
- //font-weight: 600;
- }
- .vip-order-seg-time {
- // font-size: 14px;
- margin-left: 6px;
- }
- .vip-order-seg-suffix {
- color: #fff;
- // margin-left: 2px;
- }
- .vip-order-cover-self {
- // width: 180px !important;
- background: rgba(230,0,26,0.5);
- // border: 1px solid #FFB020;
- color: #fff;
- }
- .vip-order-cover-self .vip-order-seg-user {
- color: #fff;
-
- }
- .vip-order-cover-self .vip-order-seg-time {
- color: #fff;
- margin-left: 6px;
- }
- .vip-order-cover-self .vip-order-seg-suffix {
- color: #fff;
- }
- .vip-order-enter {
- animation: vip-order-enter-up 0.46s ease-out forwards;
- }
- .vip-order-leave {
- animation: vip-order-leave-up 0.46s ease-in forwards;
- }
- @keyframes vip-order-enter-up {
- 0% {
- opacity: 0;
- transform: translateY(24px);
- }
- 100% {
- opacity: 1;
- transform: translateY(0);
- }
- }
- @keyframes vip-order-leave-up {
- 0% {
- opacity: 1;
- transform: translateY(0);
- }
- 100% {
- opacity: 0;
- transform: translateY(-24px);
- }
- }
- .rating-box{
- position: relative;
- padding:24rpx 0rpx 24rpx;
- z-index:0;
- height: calc(100vh - 488rpx);
- .bg {
- width: 100%;
- // height: 500rpx;
- position: absolute;
- top: 0;
- left: 0;
- z-index: -1;
- }
- .tab-Box {
- display: flex;
- align-items: flex-end;
- justify-content: space-around;
- padding: 0 8rpx;
- margin-bottom: -2rpx;
- position: relative;
- z-index: 3;
- }
- .tab-Box--single {
- align-items: center;
- justify-content: flex-start;
- padding: 0 24rpx 0 16rpx;
- margin-bottom: 30rpx;
- }
- .tab-item--single {
- flex: 0 1 auto;
- justify-content: flex-start;
- // width: 100%;
- padding: 0;
- }
- .tab-item__surface--single {
- flex-direction: row;
- align-items: center;
- flex-direction: row !important;
- justify-content: flex-start;
- width: auto;
- max-width: 100%;
- border-radius: 0;
- image {
- margin-top: 0!important;
- margin-right: 16rpx;
- flex-shrink: 0;
- }
- }
- .tab-item__text--single {
- padding-top: 0!important;
- padding-bottom: 0!important;
- text-align: left;
- font-weight: 600 !important;
- font-size: 40rpx !important;
- line-height: 56rpx !important;
- }
- .tab-item {
- // flex: 1;
- display: flex;
- justify-content: center;
- min-width: 0;
- padding: 0 6rpx;
- }
- .tab-item__surface {
- width: 100%;
- display: flex;
- flex-direction: column;
- align-items: center;
- justify-content: flex-end;
- box-sizing: border-box;
- border-radius: 28rpx 28rpx 0 0;
- transition: background-color 0.28s ease, box-shadow 0.28s ease, transform 0.22s ease;
- image{
- margin-top: 12rpx;
- width: 40rpx;
- height: 40rpx;
- }
- }
- .tab-item--active .tab-item__surface {
- background:url('https://bjzmky-1323137866.cos.ap-chongqing.myqcloud.com/video/active-bg.png') no-repeat center;
- background-size: 100% 100%;
- padding: 0 70rpx;
- transform: translateY(-2rpx);
- }
- .tab-item__text {
- padding-top: 10rpx;
- padding-bottom: 12rpx;
- font-family: PingFangSC, PingFang SC;
- font-weight: 400;
- font-size: 36rpx;
- line-height: 50rpx;
- color: #ff233c;
- text-align: center;
- }
- .tab-item--active .tab-item__text{
- font-weight: 600;
- font-size: 40rpx;
- }
-
- .rating-ques-block + .rating-ques-block {
- margin-top: 40rpx;
- }
- .rating-body--plain {
- // padding-top: 36rpx;
- // padding-bottom: 40rpx;
- image {
- width: 100%;
- }
- }
- .rating-intro-cover-img {
- width: 100%;
- height: auto;
- display: block;
- }
- .rating-intro-text {
- margin-top: 24rpx;
- font-size: 28rpx;
- line-height: 44rpx;
- color: rgba(0, 0, 0, 0.65);
- white-space: pre-wrap;
- word-break: break-word;
- }
- .rating-msg-empty {
- padding: 80rpx 24rpx;
- text-align: center;
- font-size: 28rpx;
- color: rgba(0, 0, 0, 0.35);
- }
- .rating-body.rating-body--featured {
- display: flex;
- flex-direction: column;
- overflow: hidden;
- padding: 30rpx 24rpx 20rpx;
- }
- .rating-msg-scroll {
- height:100%;
- width: 100%;
- box-sizing: border-box;
- }
- .rating-msg-scroll-anchor {
- width: 100%;
- height: 1px;
- }
- .rating-msg-load-more {
- padding: 24rpx 0 32rpx;
- text-align: center;
- font-size: 26rpx;
- color: rgba(0, 0, 0, 0.4);
- }
- .rating-msg-load-more--done {
- color: rgba(0, 0, 0, 0.28);
- }
- .rating-msg-item {
- display: flex;
- flex-direction: row;
- align-items: flex-start;
- gap: 20rpx;
- padding-bottom: 40rpx;
- &:not(:first-child) {
- padding-top: 8rpx;
- }
- }
- .rating-msg-avatar-wrap {
- flex-shrink: 0;
- width: 64rpx;
- }
- .rating-msg-main {
- flex: 1;
- min-width: 0;
- display: flex;
- flex-direction: column;
- align-items: stretch;
- }
- .rating-msg-avatar {
- width: 64rpx;
- height: 64rpx;
- border-radius: 50%;
- flex-shrink: 0;
- background: #ffe4ec;
- display: block;
- }
- .rating-msg-avatar--ph {
- display: flex;
- align-items: center;
- justify-content: center;
- background: linear-gradient(145deg, #ffd6e8 0%, #ffc8df 100%);
- }
- .rating-msg-name {
- font-size: 32rpx;
- color: rgba(0,0,0,0.65);
- font-family: PingFangSC, PingFang SC;
- font-weight: 400;
- line-height: 44rpx;
- }
- .rating-msg-text {
- margin-top: 12rpx;
- font-size: 28rpx;
- line-height: 44rpx;
- color: rgba(0, 0, 0, 0.85);
- word-break: break-word;
- }
- .rating-msg-media {
- margin-top: 12rpx;
- //border-radius: 16rpx;
- overflow: hidden;
- }
- .rating-msg-media--video {
- overflow: visible;
- }
- .rating-msg-video-wrap {
- position: relative;
- width: 320rpx;
- max-width: 100%;
- height: 180rpx;
- min-height: 180rpx;
- background: #000;
- overflow: hidden;
- }
- .rating-msg-video {
- width: 100%;
- height: 100%;
- display: block;
- }
- /* 小程序列表内用封面图代替 video,固定比例避免布局抖动 */
- .rating-msg-video--poster {
- width: 320rpx;
- max-width: 100%;
- height: 180rpx;
- vertical-align: top;
- }
- /* 仅有视频地址无封面时:不能用视频 URL 当 image.src */
- .rating-msg-video--no-poster {
- box-sizing: border-box;
- width: 320rpx;
- max-width: 100%;
- height: 180rpx;
- background: linear-gradient(160deg, #2a2a2e 0%, #121214 100%);
- }
- .rating-msg-video-play-cover {
- position: absolute;
- left: 0;
- top: 0;
- right: 0;
- bottom: 0;
- z-index: 2;
- display: flex;
- align-items: center;
- justify-content: center;
- background: rgba(0, 0, 0, 0.18);
- }
- .rating-msg-video-play-icon {
- width: 88rpx;
- height: 88rpx;
- flex-shrink: 0;
- }
- .rating-msg-media--imgs {
- display: flex;
- flex-wrap: wrap;
- justify-content: flex-start;
- gap: 12rpx; /* 图片之间间距,跟朋友圈一致 */
-
- }
- .rating-msg-media--cols-1 {
- grid-template-columns: 1fr;
- }
- .rating-msg-media--cols-2 {
- grid-template-columns: repeat(2, 1fr);
- }
- .rating-msg-media--cols-3 {
- grid-template-columns: repeat(3, 1fr);
- }
- .rating-msg-img {
- flex-shrink: 0;
- /* 关键:不设固定宽高,只限制最大宽度,和朋友圈一致 */
- max-width: 320rpx;
- height: auto;
- }
- .rating-msg-media--cols-1 .rating-msg-img {
- }
- .rating-msg-toolbar {
- flex-shrink: 0;
- padding-top: 20rpx;
- margin-top: 8rpx;
- border-top: 1rpx solid rgba(0, 0, 0, 0.06);
- }
- .rating-msg-toolbar-row {
- display: flex;
- align-items: flex-end;
- justify-content: space-between;
- gap: 16rpx;
- }
- .rating-msg-side-actions {
- display: flex;
- align-items: flex-end;
- flex-shrink: 0;
- gap: 20rpx;
- }
- .rating-msg-dash-btn {
- display: flex;
- flex-direction: column;
- align-items: center;
- width: 100rpx;
- }
- .rating-msg-dash-inner {
- width: 80rpx;
- height: 80rpx;
- border: 2rpx dashed #c8c8c8;
- border-radius: 16rpx;
- display: flex;
- align-items: center;
- justify-content: center;
- box-sizing: border-box;
- background: #fafafa;
- }
- .rating-msg-dash-img {
- width: 44rpx;
- height: 44rpx;
- }
- .rating-msg-dash-label {
- margin-top: 8rpx;
- font-size: 24rpx;
- color: #222222;
- font-weight: 600;
- line-height: 34rpx;
- }
- .rating-msg-cart-slot {
- position: relative;
- display: flex;
- flex-direction: column;
- align-items: center;
- }
- .rating-msg-badge {
- position: absolute;
- right: -28rpx;
- top: -72rpx;
- width: 180rpx;
- height: 76rpx;
- z-index: 2;
- pointer-events: none;
- }
- .rating-body{
- //margin-top: 40rpx;
- position: relative;
- z-index: 1;
- padding:30rpx;
- box-sizing: border-box;
- background: #FFFFFF;
- border-radius: 30rpx 30rpx;
- height: calc(100% - 300rpx);
- overflow-y: auto;
- -webkit-overflow-scrolling: touch;
- margin-top: 0;
- .title{
- font-family: PingFangSC, PingFang SC;
- font-weight: 600;
- font-size: 40rpx;
- color: rgba(0,0,0,0.85);
- line-height: 56rpx;
- }
- }
- .sat-box{
- display: grid;
- grid-template-columns: repeat(2, 1fr);
- gap: 28rpx 24rpx;
- margin-top: 32rpx;
- }
- .sat{
- display: flex;
- flex-direction: column;
- align-items: center;
- justify-content: center;
- text-align: center;
- background: #F5F7FA;
- padding: 20rpx;
- border-radius: 20rpx;
- transition: background 0.3s ease, box-shadow 0.3s ease;
- .sat-img-wrap{
- width: 100rpx;
- height: 100rpx;
- display: flex;
- align-items: center;
- justify-content: center;
- will-change: transform;
- image{
- width: 100rpx;
- height: 100rpx;
- transition: transform 0.35s cubic-bezier(0.34, 1.3, 0.64, 1);
- }
- }
- .sat-img-bounce{
- animation: sat-rate-pop 0.48s cubic-bezier(0.34, 1.45, 0.64, 1);
- }
- text{
- margin-top: 10rpx;
- font-family: PingFangSC, PingFang SC;
- font-weight: 400;
- font-size: 36rpx;
- line-height: 50rpx;
- transition: color 0.32s ease, font-weight 0.28s ease, transform 0.28s ease;
- color: rgba(0,0,0,0.42);
- }
- .active{
- font-weight: 600;
- color: #FF233C;
- }
- }
- .sat.sat--active{
- background: #FFEEF0;
- //box-shadow: 0 4rpx 16rpx rgba(255, 92, 3, 0.12);
- .sat-img-wrap image{
- transform: scale(1.06);
- }
- }
- }
- @keyframes sat-rate-pop{
- 0%{ transform: scale(1); }
- 28%{ transform: scale(1.2); }
- 52%{ transform: scale(0.94); }
- 76%{ transform: scale(1.06); }
- 100%{ transform: scale(1); }
- }
- /* 精选留言:相册图片/视频(替代系统 ActionSheet,底部贴齐含安全区) */
- .fc-media-actions-sheet {
- display: flex;
- flex-direction: column;
- width: 100%;
- box-sizing: border-box;
- padding-bottom:68rpx;
- }
- .fc-media-actions-sheet-item {
- padding: 30rpx 32rpx;
- font-size: 32rpx;
- color: #1e1e1e;
- text-align: center;
- border-bottom: 1rpx solid #f0f0f0;
- }
- .fc-media-actions-sheet-gap {
- height: 16rpx;
- background: #f3f5f9;
- border-bottom: none;
- }
- .fc-media-actions-sheet-cancel {
- border-bottom: none;
- color: #666;
- }
- // 更多操作弹窗
- .more-actions-popup {
- border-radius: 20rpx 0 0 20rpx;
- padding: 30rpx;
- display: flex;
- justify-content: space-between;
-
- .more-action-item {
- display: flex;
- flex-direction: column;
- align-items: center;
-
- .action-icon {
- width: 48rpx;
- height: 48rpx;
- }
-
- .action-label {
- color: #1e1e1e;
- text-align: center;
- margin-top: 10rpx;
- }
- }
- }
- .progress-countdown {
- position: absolute;
- right: 6px;
- top: 6px;
- z-index: 99999999;
- // width: 112px;
- height: 50px;
- background: rgba(0,0,0,0.45);
- display: flex;
- align-items: center;
- justify-content: space-around;
- padding:2px 8px;
- flex-direction: column;
- border-radius: 6px;
- box-sizing: border-box; /* 避免padding撑大容器 */
- }
- .progress-title {
- font-size: 16px;
- color: #FF233C;
- font-weight: 600;
- }
- .progress-img{
- width: 63px;
- height: 15px;
- }
- .progress-bar-bg {
- width: 86px;
- height: 6px;
- //margin-top: 16rpx;
- background: rgba(255,255,255,0.8);
- border-radius: 3px;
- overflow: hidden;
- // margin-bottom: 16rpx;
- }
- .progress-bar-fill {
- height: 100%;
- background: #FF233C;
- border-radius: 3px;
- transition: width 1s linear;
- }
- .progress-text {
- white-space: nowrap; /* 强制不换行 */
- color: #fff;
- font-size: 13px;
- display: flex;
- align-items: flex-start; /* 垂直居中 */
- justify-content: center; /* 水平居中 */
- }
- .progress-text-label {
- font-size: 12px;
- margin-right: 2px;
- }
- .ques-flex {
- display: flex;
- align-items: center;
- flex-direction: row;
- justify-content: space-around;
- }
- @mixin u-flex($flexD, $alignI, $justifyC) {
- display: flex;
- flex-direction: $flexD;
- align-items: $alignI;
- justify-content: $justifyC;
- }
- .footer-tips {
- position: fixed;
- width: 100%;
- bottom: 144rpx;
- text-align: center;
- font-family: PingFang SC, PingFang SC;
- font-weight: 500;
- font-size: 12px;
- color: #bbb;
- transform: scale(0.8);
- }
- .btns {
- //position: relative;
- width: 100%;
- height: 96rpx;
- display: flex;
- align-items: center;
- justify-content: space-between;
- .rating-msg-input-shell {
- flex: 1;
- min-width: 0;
- display: flex;
- align-items: center;
- background: #f5f5f5;
- border-radius: 48rpx;
- padding: 24rpx 30rpx;
- box-sizing: border-box;
- }
- .rating-msg-media-pill {
- position: relative;
- flex-shrink: 0;
- width: 64rpx;
- height: 64rpx;
- margin-right: 16rpx;
- border-radius: 12rpx;
- overflow: hidden;
- }
- .rating-msg-media-thumb {
- width: 100%;
- height: 100%;
- display: block;
- }
- .rating-msg-media-badge {
- position: absolute;
- left: 0;
- right: 0;
- bottom: 0;
- font-size: 18rpx;
- color: #fff;
- text-align: center;
- line-height: 1.4;
- background: rgba(0, 0, 0, 0.45);
- }
- .rating-msg-media-x {
- position: absolute;
- top: -4rpx;
- right: -4rpx;
- width: 32rpx;
- height: 32rpx;
- line-height: 32rpx;
- text-align: center;
- font-size: 28rpx;
- color: #fff;
- background: rgba(0, 0, 0, 0.5);
- border-radius: 50%;
- }
- .rating-msg-send {
- flex-shrink: 0;
- padding: 0 12rpx 0 8rpx;
- font-size: 28rpx;
- color: #FF233C;
- }
- .rating-msg-input {
- flex: 1;
- min-width: 0;
- font-size: 32rpx;
- color: rgba(0, 0, 0, 0.85);
- height: 48rpx;
- line-height: 48rpx;
- }
- .rating-msg-input-trigger {
- overflow: hidden;
- }
- .rating-msg-input-trigger-text {
- display: block;
- font-size: 32rpx;
- overflow: hidden;
- text-overflow: ellipsis;
- white-space: nowrap;
- color: rgba(0, 0, 0, 0.85);
- &.is-ph {
- color: rgba(0, 0, 0, 0.28);
- }
- }
- .rating-msg-ph {
- color: rgba(0, 0, 0, 0.28);
- font-size: 32rpx;
- }
- .rating-msg-input-icon {
- // width:40rpx;
- // height:40rpx;
- flex-shrink: 0;
- padding-left:24rpx;
- display:flex;
- image{
- width:40rpx;
- height:40rpx
- }
- }
- .author-btn {
- // z-index: 100;
- // position: absolute;
- // width: 100%;
- flex:1;
- height: 96rpx;
- background: linear-gradient( 135deg, #FF5267 0%, #FF233C 100%);
- border-radius: 48rpx;
- font-family: PingFangSC, PingFang SC;
- font-weight: 600;
- font-style: normal;
- font-size: 40rpx;
- color: #FFFFFF;
- text-align: center;
- line-height: 96rpx;
- display: flex;
- align-items: center;
- justify-content: center;
- image{
- margin-left: 4rpx;
- width: 40rpx;
- height: 40rpx;
- }
- }
- .author-cart{
- padding-left: 40rpx;
- display: flex;
- align-items: center;
- .more-box{
- display: flex;
- align-items: center;
- flex-direction: column;
- .tips{
- font-family: PingFangSC, PingFang SC;
- font-weight: 600;
- font-size: 32rpx;
- color: #222222;
- line-height: 44rpx;
- text-align: center;
- margin-top: 12rpx;
- }
- image{
- width: 80rpx;
- height: 80rpx;
- }
- &:last-child{
- margin-left: 40rpx;
- }
- }
- .xianshi{
- position: absolute;
- z-index: 10;
- right:20rpx;
- bottom: 180rpx;
- width: 214rpx;
- height:90rpx;
- }
- }
- }
- .textOne {
- overflow: hidden;
- white-space: nowrap;
- text-overflow: ellipsis;
- }
- .textTwo {
- overflow: hidden;
- text-overflow: ellipsis;
- display: -webkit-box;
- -webkit-line-clamp: 2;
- -webkit-box-orient: vertical;
- }
- .header-nav {
- height: 88rpx;
- @include u-flex(row, center, flex-start);
- overflow: hidden;
- background-color: #fff;
- box-sizing: border-box;
- .header-title {
- text-align: center;
- overflow: hidden;
- white-space: nowrap;
- text-overflow: ellipsis;
- padding: 0 10rpx 0 100rpx;
- font-family: PingFang SC, PingFang SC;
- font-weight: 500;
- font-size: 15px;
- color: #000;
- box-sizing: border-box;
- }
- }
- .reward-list {
- width: 100%;
- margin-top: 20rpx;
- margin-bottom: -40rpx;
- &-group {
- font-family: PingFang SC, PingFang SC;
- font-weight: 400;
- font-size: 14px;
- color: #222222;
- @include u-flex(row, center, center);
- }
- &-option {
- @include u-flex(row, center, flex-start);
- &:first-child {
- margin-right: 40rpx;
- }
- }
- }
- .err {
- color: #f56c6c !important;
- }
- .kfqrcode-box {
- background-color: #fff;
- border-radius: 16rpx;
- max-width: 560rpx;
- padding: 60rpx 40rpx;
- margin-top: -100rpx;
- box-sizing: border-box;
- @include u-flex(column, center, flex-start);
- font-family: PingFang SC, PingFang SC;
- font-weight: 400;
- font-size: 34rpx;
- color: #222;
- position: relative;
- text-align: center;
- .kfqrcode {
- // height: 460rpx;
- width: 460rpx;
- }
- }
- .kfqrcode-close {
- width: 64rpx;
- height: 64rpx;
- position: absolute;
- bottom: -100rpx;
- left: 50%;
- transform: translateX(-50%);
- }
- .tipsPopup-mask {
- position: relative;
- width: 560rpx;
- background-color: transparent;
- .red_envelope_top {
- width: 480rpx;
- height: 360rpx;
- margin: 0 auto;
- display: inherit;
- }
- }
- .tipsPopup-btn-box {
- width: 456rpx;
- height: 104rpx;
- padding: 4rpx;
- box-sizing: border-box;
- background: linear-gradient(180deg, rgba(252, 209, 94, 1), rgba(254, 253, 251, 1));
- border-radius: 52rpx;
- }
- .tipsPopup-btn {
- width: 100%;
- height: 100%;
- background: linear-gradient(180deg, #FF9F22 0%, #FA1E05 100%);
- border-radius: 52rpx 52rpx 52rpx 52rpx;
- font-family: PingFang SC, PingFang SC;
- font-weight: 500;
- font-size: 36rpx;
- color: #FFFFFF;
- line-height: 96rpx;
- text-align: center;
- }
- .tipsPopup {
- width: 560rpx;
- padding: 12rpx;
- margin-top: -72rpx;
- box-sizing: border-box;
- background: linear-gradient(180deg, #FFFBEF 0%, #FFFFF5 43%, #F5EAC2 100%);
- border-radius: 32rpx 32rpx 32rpx 32rpx;
- position: relative;
- &-close {
- width: 64rpx;
- height: 64rpx;
- position: absolute;
- right: 0;
- top: -188rpx;
- }
- &-line {
- padding: 3rpx;
- box-sizing: border-box;
- background: linear-gradient(180deg, rgba(247, 245, 220, 1), rgba(250, 220, 157, 1));
- border-radius: 24rpx;
- }
- &-box {
- padding: 0 40rpx 40rpx 40rpx;
- box-sizing: border-box;
- background: linear-gradient(180deg, #FFFBEF 0%, #FFFFF5 43%, #F5EAC2 100%);
- border-radius: 24rpx;
- @include u-flex(column, center, flex-start);
- }
- &-head {
- @include u-flex(row, center, center);
- &-title {
- width: 364rpx;
- height: auto;
- margin-top: -22rpx;
- }
- }
- &-content {
- margin: 48rpx 0;
- font-family: PingFang SC, PingFang SC;
- font-weight: 500;
- font-size: 32rpx;
- color: #222222;
- text-align: center;
- &-title {
- margin-bottom: 26rpx;
- font-weight: 600;
- font-size: 40rpx;
- color: #FF5C03;
- }
- }
- }
-
- // 商品卡片样式
- .goods-card {
- position: absolute;
- right: 24rpx;
- bottom: 280rpx;
- z-index: 9999;
- width: 300rpx;
- background: #FFFFFF;
- border-radius: 20rpx;
- overflow: visible;
- &-hot {
- position: absolute;
- top: -66rpx;
- left: 30rpx;
- z-index: 11;
- display: flex;
- flex-direction: row;
- align-items: center;
- }
- &-hot-flame {
- font-size: 24rpx;
- line-height: 1;
- margin-right: 4rpx;
- }
- &-hot-label {
- font-size: 24rpx;
- font-weight: 600;
- color: #FFFFFF;
- line-height: 44rpx;
- }
- &-hot-count {
- position: absolute;
- left:130rpx;
- font-family: PingFangSC, PingFang SC;
- font-weight: 600;
- font-size: 40rpx;
- color: #FFFFFF;
- line-height: 56rpx;
- text-align: justify;
- }
- &-inner {
- display: flex;
- flex-direction:column;
- border-radius: 20rpx;
- overflow: hidden;
- }
- &-img {
- width:300rpx;
- height:300rpx;
- flex-shrink: 0;
- }
- &-info {
- flex: 1;
- padding: 12rpx;
- display: flex;
- flex-direction: column;
- justify-content: space-between;
- }
- &-title {
- font-family: PingFangSC, PingFang SC;
- font-weight: 600;
- font-size: 32rpx;
- color: rgba(0,0,0,0.85);
- line-height: 44rpx;
- overflow: hidden;
- text-overflow: ellipsis;
- display: -webkit-box;
- -webkit-line-clamp: 2;
- -webkit-box-orient: vertical;
- }
- &-bottom {
- margin-top: 12rpx;
- display: flex;
- flex-direction: row;
- align-items: center;
- //justify-content: space-between;
- }
- &-tag {
- position: relative;
- width: 120rpx;
- height: 44rpx;
- }
- &-tag-bg {
- width: 100%;
- height: 100%;
- }
- &-tag-text {
- position: absolute;
- left: 0;
- top: 0;
- width: 100%;
- height: 100%;
- text-align: center;
- line-height: 44rpx;
- font-size: 24rpx;
- color: #FFFFFF;
- font-weight: 500;
- }
-
- &-price{
- margin-left: 14rpx;
- display: flex;
- align-items:baseline;
- .unit{
- font-family: PingFangSC, PingFang SC;
- font-weight: 600;
- font-size: 32rpx;
- color: #FF233C;
- }
- .price{
- font-family: PingFangSC, PingFang SC;
- font-weight: 600;
- font-size: 48rpx;
- color: #FF233C;
- }
- }
- .close-box{
- position: absolute;
- top:20rpx;
- right:20rpx;
- z-index:9;
- image{
- width: 30rpx;
- height: 30rpx;
- }
- }
- }
- /* 商品卡片样式 */
- .goods-cover {
- /* cover-view 在 video 内使用 absolute 比 fixed 更稳定 */
- position:fixed;
- right: 12px;
- width: 150px;
- z-index: 99999;
-
- border-radius: 10px;
- overflow: visible;
- bottom: 40px;
- &-hot {
- // margin-left: 15px;
- margin-bottom: 15px;
- display: flex;
- flex-direction: row;
- align-items: center;
- position: relative;
- }
-
- &-hot-text {
- position: absolute;
- left:85px;
- font-family: PingFangSC, PingFang SC;
- font-weight: 600;
- font-size: 20px;
- color: #FFFFFF;
- line-height: 28px;
- text-align: justify;
- }
-
- &-inner {
- display: flex;
- flex-direction:column;
- border-radius: 10px;
- overflow: hidden;
- background: #FFFFFF;
- position: relative;
- }
- &-img {
- width:150px;
- height:150px;
- flex-shrink: 0;
- }
-
- &-info {
- flex: 1;
- padding: 6px;
- display: flex;
- flex-direction: column;
- justify-content: space-between;
- }
-
- &-title {
- font-family: PingFangSC, PingFang SC;
- font-weight: 600;
- font-size: 16px;
- color: #000000D9;
- line-height: 22px;
- overflow: hidden;
- width: 150px; /* 必须给宽度 */
- white-space: nowrap; /* 关键 */
- text-overflow: ellipsis;
- }
- &-bottom {
- margin-top: 6px;
- display: flex;
- flex-direction: row;
- align-items: center;
- }
-
- &-tag {
- position: relative;
- width: 60px;
- height: 22px;
- }
-
- &-tag-bg {
- width: 100%;
- height: 100%;
- }
-
- &-tag-text {
- position: absolute;
- left: 0;
- top: 0;
- width: 100%;
- height: 100%;
- text-align: center;
- line-height: 22px;
- font-size: 12px;
- color: #FFFFFF;
- font-weight: 500;
- }
-
- &-price{
- margin-left: 7px;
- display: flex;
- align-items:baseline;
- .unit{
- font-family: PingFangSC, PingFang SC;
- font-weight: 600;
- font-size: 16px;
- color: #FF233C;
- }
- .price{
- font-family: PingFangSC, PingFang SC;
- font-weight: 600;
- font-size: 24px;
- color: #FF233C;
- }
- }
- .close-box{
- position: absolute;
- top:10px;
- right:10px;
- z-index:9;
- cover-image{
- width: 15px;
- height: 15px;
- }
- }
- }
- .video-controls-box {
- width: 100%;
- height: 300rpx;
- overflow: hidden;
- position: absolute;
- bottom: 0;
- left: 0;
- z-index: 2;
- background: rgba(0, 0, 0, 0.2);
- .video-play {
- height: 72rpx;
- width: 72rpx;
- position: absolute;
- top: 50%;
- left: 50%;
- transform: translate(-50%, -50%);
- }
- }
- .video-controls {
- width: 100%;
- height: 80rpx;
- padding: 0 28rpx;
- box-sizing: border-box;
- position: absolute;
- bottom: 0;
- left: 0;
- display: flex;
- align-items: center;
- justify-content: space-between;
- background: linear-gradient(to top, #222 0%, transparent 80%);
- .video-icon {
- height: 44rpx;
- width: 44rpx;
- }
- }
- .errQuesbox {
- width: 100%;
- max-height: 260rpx;
- overflow-y: auto;
- margin-top: 24rpx;
- font-family: PingFang SC, PingFang SC;
- font-weight: 500;
- font-size: 30rpx;
- color: #222222;
- &-item {
- width: 100%;
- height: 128rpx;
- line-height: 128rpx;
- margin-bottom: 24rpx;
- padding: 0 30rpx;
- box-sizing: border-box;
- overflow: hidden;
- background: #fff;
- border-radius: 16rpx 16rpx 16rpx 16rpx;
- position: relative;
- &::after {
- content: "题目";
- min-width: 64rpx;
- height: 36rpx;
- padding: 0 12rpx;
- line-height: 36rpx;
- background: #FF5C03;
- box-sizing: border-box;
- border-radius: 0rpx 0rpx 16rpx 0rpx;
- text-align: center;
- font-family: PingFang SC, PingFang SC;
- font-weight: 500;
- font-size: 20rpx;
- color: #fff;
- position: absolute;
- left: 0;
- top: 0;
- }
- }
- }
- .bg {
- background: #fff !important;
- }
- .timepopbox {
- width: 560rpx;
- padding: 32rpx;
- box-sizing: border-box;
- }
- .answerPopup {
- &-box {
- width: 560rpx;
- background: linear-gradient(180deg, #FFFAF6 0%, #FEECD8 100%);
- border-radius: 32rpx 32rpx 32rpx 32rpx;
- background-color: #fff;
- font-weight: 400;
- padding: 32rpx;
- box-sizing: border-box;
- position: relative;
- @include u-flex(column, center, flex-start);
- font-family: PingFang SC, PingFang SC;
- font-weight: 400;
- .tipimg {
- width: 206rpx;
- height: 206rpx;
- margin-bottom: 16rpx;
- }
- }
- &-title {
- font-weight: 600;
- font-size: 36rpx;
- color: #222222;
- }
- &-desc {
- margin-top: 10rpx;
- font-size: 28rpx;
- color: #757575;
- }
- &-btn {
- width: 464rpx;
- height: 84rpx;
- margin-top: 54rpx;
- margin-bottom: 16rpx;
- background: #FF5C03;
- border-radius: 42rpx;
- font-weight: 500;
- font-size: 32rpx;
- color: #FFFFFF;
- text-align: center;
- line-height: 84rpx;
- }
- }
- .popupbox {
- width: 100%;
- background-color: #fff;
- border-radius: 16rpx 16rpx 0 0;
- padding: 24rpx 32rpx;
- position: relative;
- &-head {
- height: 60rpx;
- margin-bottom: 30rpx;
- text-align: center;
- overflow-y: auto;
- color: #414858;
- font-size: 32rpx;
- font-weight: bold;
- position: relative;
- .close-icon {
- position: absolute;
- right: 0;
- top: 0;
- height: 40rpx;
- width: 40rpx;
- }
- }
- &-content {
- height: 20vh;
- overflow-y: auto;
- display: flex;
- align-items: flex-start;
- flex-wrap: wrap;
- gap: 32rpx;
- .line-item {
- display: inline-block;
- min-width: 200rpx;
- min-height: 60rpx;
- padding: 0 20rpx;
- box-sizing: border-box;
- border-radius: 50rpx;
- overflow: hidden;
- background-color: #f7f7f7;
- text-align: center;
- color: #414858;
- font-size: 28rpx;
- line-height: 60rpx;
- }
- .line-active {
- color: #f56c6c !important;
- background-color: #fef0f0 !important;
- }
- }
- }
- .content {
- //padding-bottom: calc(var(--window-bottom) + 100rpx);
- .video-box {
- width: 100%;
- height: 420rpx;
- overflow: hidden;
- position: relative;
- #myVideo {
- width: 100%;
- height: 100%;
- }
- }
- .videovip-video-container {
- width: 100%;
- position: relative;
- background: #000;
- overflow: hidden;
- }
- .videovip-xg-player {
- width: 100%;
- height: 100%;
- }
- .videovip-video-overlay {
- position: absolute;
- z-index: 10;
- pointer-events: none;
- }
- .videovip-video-overlay .close-box,
- .videovip-video-overlay.goods-cover {
- pointer-events: auto;
- }
- .video-poster {
- width: 100%;
- height: 420rpx;
- }
- .miantitlebox {
- padding: 30rpx 0;
- border-bottom: 2rpx solid #F5F7FA;
- font-family: PingFang SC, PingFang SC;
- font-weight: 500;
- font-size: 40rpx;
- color: #222222;
- }
- .subtitlebox {
- padding: 30rpx 0;
- border-bottom: 2rpx solid #F5F7FA;
- font-family: PingFang SC, PingFang SC;
- font-weight: 500;
- font-size: 40rpx;
- color: #222222;
- }
- .title-content {
- padding: 0 32rpx;
- background-color: #fff;
- font-size: 28rpx;
- line-height: 1.6;
- .title {
- font-size: 36rpx;
- font-weight: 500;
- color: #414858;
- }
- .time-or-subtitle {
- margin-top: 12rpx;
- color: #666666;
- }
- }
- .descbox {
- padding: 36rpx 32rpx;
- margin-bottom: 20rpx;
- background-color: #fff;
- font-family: PingFang SC, PingFang SC;
- font-weight: 400;
- font-size: 28rpx;
- color: #222222;
- line-height: 42rpx;
- word-break: break-word;
- &-title {
- margin-bottom: 24rpx;
- font-weight: 500;
- font-size: 32rpx;
- }
- &-info {
- margin-bottom: 24rpx;
- @include u-flex(row, center, space-between);
- font-size: 26rpx;
- color: #757575;
- &-l {
- flex: 1;
- @include u-flex(row, center, flex-start);
- }
- &-time {
- margin-left: 18rpx;
- padding-left: 18rpx;
- position: relative;
- &::after {
- content: "";
- width: 4rpx;
- height: 4rpx;
- background: #999999;
- border-radius: 50%;
- position: absolute;
- left: 0;
- top: 50%;
- transform: translateY(-50%);
- }
- }
- &-r {
- background: transparent;
- }
- }
- &-desc {
- overflow: hidden;
- position: relative;
- }
- }
- .expand {
- flex-shrink: 0;
- @include u-flex(row, center, flex-end);
- color: #FF5C03;
- font-weight: 400;
- font-size: 24rpx;
- image {
- width: 32rpx;
- height: 32rpx;
- }
- }
- .expand-ab {
- position: absolute;
- top: 0;
- right: 0;
- box-shadow: -50rpx 0 20rpx 8rpx #FFFFFF;
- background-color: #fff;
- }
- .ques-content {
- background-color: #fff;
- padding: 40rpx 32rpx;
- box-sizing: border-box;
- font-family: PingFang SC, PingFang SC;
- font-weight: 400;
- font-size: 28rpx;
- color: #222222;
- }
- .ques-content-tit {
- font-family: PingFangSC, PingFang SC;
- font-weight: 600;
- font-size: 48rpx;
- color: rgba(0,0,0,0.85);
- line-height: 66rpx;
- }
- .ques-title {
- margin: 48rpx 0 34rpx 0;
- font-weight: 600;
- font-size: 40rpx;
- white-space: normal;
- }
- .ques-type {
- flex-shrink: 0;
- min-width: 72rpx;
- min-height: 40rpx;
- padding: 0 12rpx;
- margin: 0 12rpx;
- box-sizing: border-box;
- background: #FF5C03;
- border-radius: 8rpx 8rpx 8rpx 8rpx;
- line-height: 40rpx;
- text-align: center;
- font-family: PingFang SC, PingFang SC;
- font-weight: 400;
- font-size: 24rpx;
- color: #FFFFFF;
- display: inline-block;
- }
- .ques-option {
- min-height: 88rpx;
- padding: 24rpx 32rpx;
- box-sizing: border-box;
- margin-bottom: 24rpx;
- background: #F5F7FA;
- border-radius: 16rpx 16rpx 16rpx 16rpx;
- display: flex;
- align-items: center;
- &-active {
- color: #FF5C03 !important;
- background: #FCF0E7 !important;
- }
- }
- .video-line {
- min-width: 140rpx;
- max-width: 200rpx;
- height: 60rpx;
- padding: 0 20rpx;
- box-sizing: border-box;
- border-radius: 50rpx 0 0 50rpx;
- overflow: hidden;
- background-color: #fff;
- text-align: center;
- color: #888;
- font-size: 28rpx;
- line-height: 60rpx;
- display: inline-flex;
- align-items: center;
- justify-content: center;
- position: fixed;
- right: 0;
- z-index: 9;
- bottom: calc(var(--window-bottom) + 280rpx);
- box-shadow: 0 4rpx 10rpx rgba(0, 0, 0, .12);
- image {
- flex-shrink: 0;
- height: 30rpx;
- width: 30rpx;
- margin-right: 6rpx;
- }
- }
- /* 精选留言:图片/视频自定义预览(设计稿弹窗) */
- .fc-media-preview-mask {
- position: fixed;
- left: 0;
- right: 0;
- top: 0;
- bottom: 0;
- z-index: 10050;
- background: rgba(0, 0, 0, 0.72);
- display: flex;
- align-items: center;
- justify-content: center;
- padding: 32rpx 24rpx calc(32rpx + env(safe-area-inset-bottom));
- box-sizing: border-box;
- }
- .fc-media-preview-card {
- width: 100%;
- max-width: 630rpx;
- overflow: hidden;
- display: flex;
- flex-direction: column;
- align-items: center;
- }
- .fc-media-preview-img-box {
- width: 100%;
- height: 62vh;
- max-height: 820rpx;
- }
- .fc-media-preview-slide {
- width: 100%;
- height: 100%;
- display: flex;
- align-items: center;
- justify-content: center;
- padding: 16rpx;
- box-sizing: border-box;
- }
- .fc-media-preview-main-img {
- width: 100%;
- height: 100%;
- max-height: 100%;
- }
- .fc-media-preview-video-box {
- width: 100%;
- height: 62vh;
- max-height: 820rpx;
- background: #000;
- display: flex;
- align-items: center;
- justify-content: center;
- }
- .fc-media-preview-video {
- width: 100%;
- height: 100%;
- }
- .fc-media-preview-footer {
- display: flex;
- flex-direction: row;
- align-items: center;
- padding:30rpx;
- // gap: 20rpx;
- }
- .fc-media-preview-thumbs {
- flex: 1;
- min-width: 0;
- height: 112rpx;
- white-space: nowrap;
- }
- .fc-media-preview-thumbs-inner {
- display: inline-flex;
- flex-direction: row;
- align-items: center;
- gap: 16rpx;
- padding-right: 8rpx;
- }
- .fc-media-preview-thumb {
- width: 96rpx;
- height: 96rpx;
- flex-shrink: 0;
- border-radius: 12rpx;
- border: 3rpx solid transparent;
- box-sizing: border-box;
- background: #333;
- }
- .fc-media-preview-thumb--active {
- border-color: #ff5c03;
- }
- .fc-media-preview-thumbs-spacer {
- flex: 1;
- min-height: 1rpx;
- }
- .fc-media-preview-close {
- flex-shrink: 0;
- display: flex;
- align-items: center;
- justify-content: center;
- }
- .fc-media-preview-close-x {
- font-size: 44rpx;
- line-height: 1;
- color: #333;
- font-weight: 300;
- margin-top: -4rpx;
- }
- .featured-comment-composer-mask {
- position: fixed;
- left: 0;
- right: 0;
- top: 0;
- bottom: 0;
- background: rgba(0, 0, 0, 0.35);
- z-index: 9998;
- }
- .featured-comment-composer-wrap {
- position: fixed;
- left: 0;
- right: 0;
- z-index: 9999;
- background: #fff;
- border-radius: 24rpx 24rpx 0 0;
- padding: 20rpx 24rpx;
- padding-bottom: calc(20rpx + env(safe-area-inset-bottom));
- box-sizing: border-box;
- box-shadow: 0 -4rpx 24rpx rgba(0, 0, 0, 0.06);
- }
- .featured-comment-composer-inner {
- display: flex;
- align-items: center;
- gap: 24rpx;
- }
- .featured-comment-composer-input-row {
- flex: 1;
- min-width: 0;
- display: flex;
- align-items: flex-start;
- background: #f5f5f5;
- border-radius: 24rpx;
- padding:20rpx;
- box-sizing: border-box;
- }
- .fc-composer-input {
- flex: 1;
- min-width: 0;
- font-size: 32rpx;
- color: rgba(0, 0, 0, 0.85);
- height:88rpx;
- line-height: 44rpx;
- }
- .fc-composer-ph {
- color: rgba(0, 0, 0, 0.28);
- font-size: 32rpx;
- }
- .fc-composer-input-icon {
- flex-shrink: 0;
- margin-left: 12rpx;
- display: flex;
- align-items: center;
- justify-content: center;
- image {
- width: 40rpx;
- height: 40rpx;
- }
- }
- .fc-composer-media-pill {
- position: relative;
- flex-shrink: 0;
- width: 64rpx;
- height: 64rpx;
- border-radius: 12rpx;
- overflow: hidden;
- }
- .fc-composer-media-thumb {
- width: 100%;
- height: 100%;
- display: block;
- }
- .fc-composer-media-badge {
- position: absolute;
- left: 0;
- right: 0;
- bottom: 0;
- font-size: 18rpx;
- color: #fff;
- text-align: center;
- line-height: 1.4;
- background: rgba(0, 0, 0, 0.45);
- }
- .fc-composer-media-x {
- position: absolute;
- top: -4rpx;
- right: -4rpx;
- width: 32rpx;
- height: 32rpx;
- line-height: 32rpx;
- text-align: center;
- font-size: 28rpx;
- color: #fff;
- background: rgba(0, 0, 0, 0.5);
- border-radius: 50%;
- }
- .featured-comment-composer-publish {
- flex-shrink: 0;
- padding: 20rpx 40rpx;
- background: linear-gradient( 135deg, #FF5267 0%, #FF233C 100%);
- font-family: PingFangSC, PingFang SC;
- font-weight: 600;
- font-size: 40rpx;
- color: #FFFFFF;
- line-height: 56rpx;
- text-align: center;
- border-radius: 48rpx;
- }
- .footer {
- //border-top: 1rpx solid #ededef;
- background: #fff;
- width: 100%;
- position: fixed;
- bottom: 0;
- padding: 32rpx;
- padding-bottom:68rpx;
- box-sizing: border-box;
- z-index: 0;
- &-btn {
- width: 100%;
- height: 98rpx;
- background: #FF5C03;
- border-radius: 49rpx 49rpx 49rpx 49rpx;
- line-height: 98rpx;
- text-align: center;
- font-family: PingFang SC, PingFang SC;
- font-weight: 600;
- font-size: 32rpx;
- color: #FFFFFF;
- @include u-flex(row, center, center);
- &-img {
- flex-shrink: 0;
- width: 144rpx;
- height: 144rpx;
- margin-right: 8rpx;
- margin-top: -24rpx;
- }
- }
- &-btn-border {
- position: relative;
- &::after {
- content: "";
- background: linear-gradient(180deg, rgba(255, 255, 255, 0), rgba(255, 255, 255, 1));
- position: absolute;
- top: -2rpx;
- left: 0;
- height: 103rpx;
- width: 100%;
- z-index: -1;
- border-radius: 49rpx 49rpx 49rpx 49rpx;
- box-shadow: 0rpx 8rpx 11rpx 0rpx rgba(255, 92, 3, 0.3);
- overflow: hidden;
- }
- }
- }
- }
- .agreement {
- display: inline-flex;
- margin-top: 16rpx;
- font-size: 24rpx;
- color: #525252;
- align-items: center;
- justify-content: center;
- }
- .nocourse {
- display: flex;
- flex-direction: column;
- align-items: center;
- padding-bottom: 88rpx;
- justify-content: center;
- font-family: PingFang SC, PingFang SC;
- font-weight: 400;
- font-size: 32rpx;
- color: #757575;
- line-height: 48rpx;
- text-align: center;
- image {
- width: 328rpx;
- height: auto;
- margin-bottom: 30rpx;
- }
- }
- .logo {
- display: inline-block;
- width: 30px;
- height: auto;
- margin: 20px 0 0 10px;
- pointer-events: none;
- object-fit: cover;
- }
- .logo-full {
- display: inline-block;
- width: 40px;
- height: auto;
- margin: 50px 0 0 30px;
- pointer-events: none;
- object-fit: cover;
- }
- </style>
|