goods.vue 109 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350351352353354355356357358359360361362363364365366367368369370371372373374375376377378379380381382383384385386387388389390391392393394395396397398399400401402403404405406407408409410411412413414415416417418419420421422423424425426427428429430431432433434435436437438439440441442443444445446447448449450451452453454455456457458459460461462463464465466467468469470471472473474475476477478479480481482483484485486487488489490491492493494495496497498499500501502503504505506507508509510511512513514515516517518519520521522523524525526527528529530531532533534535536537538539540541542543544545546547548549550551552553554555556557558559560561562563564565566567568569570571572573574575576577578579580581582583584585586587588589590591592593594595596597598599600601602603604605606607608609610611612613614615616617618619620621622623624625626627628629630631632633634635636637638639640641642643644645646647648649650651652653654655656657658659660661662663664665666667668669670671672673674675676677678679680681682683684685686687688689690691692693694695696697698699700701702703704705706707708709710711712713714715716717718719720721722723724725726727728729730731732733734735736737738739740741742743744745746747748749750751752753754755756757758759760761762763764765766767768769770771772773774775776777778779780781782783784785786787788789790791792793794795796797798799800801802803804805806807808809810811812813814815816817818819820821822823824825826827828829830831832833834835836837838839840841842843844845846847848849850851852853854855856857858859860861862863864865866867868869870871872873874875876877878879880881882883884885886887888889890891892893894895896897898899900901902903904905906907908909910911912913914915916917918919920921922923924925926927928929930931932933934935936937938939940941942943944945946947948949950951952953954955956957958959960961962963964965966967968969970971972973974975976977978979980981982983984985986987988989990991992993994995996997998999100010011002100310041005100610071008100910101011101210131014101510161017101810191020102110221023102410251026102710281029103010311032103310341035103610371038103910401041104210431044104510461047104810491050105110521053105410551056105710581059106010611062106310641065106610671068106910701071107210731074107510761077107810791080108110821083108410851086108710881089109010911092109310941095109610971098109911001101110211031104110511061107110811091110111111121113111411151116111711181119112011211122112311241125112611271128112911301131113211331134113511361137113811391140114111421143114411451146114711481149115011511152115311541155115611571158115911601161116211631164116511661167116811691170117111721173117411751176117711781179118011811182118311841185118611871188118911901191119211931194119511961197119811991200120112021203120412051206120712081209121012111212121312141215121612171218121912201221122212231224122512261227122812291230123112321233123412351236123712381239124012411242124312441245124612471248124912501251125212531254125512561257125812591260126112621263126412651266126712681269127012711272127312741275127612771278127912801281128212831284128512861287128812891290129112921293129412951296129712981299130013011302130313041305130613071308130913101311131213131314131513161317131813191320132113221323132413251326132713281329133013311332133313341335133613371338133913401341134213431344134513461347134813491350135113521353135413551356135713581359136013611362136313641365136613671368136913701371137213731374137513761377137813791380138113821383138413851386138713881389139013911392139313941395139613971398139914001401140214031404140514061407140814091410141114121413141414151416141714181419142014211422142314241425142614271428142914301431143214331434143514361437143814391440144114421443144414451446144714481449145014511452145314541455145614571458145914601461146214631464146514661467146814691470147114721473147414751476147714781479148014811482148314841485148614871488148914901491149214931494149514961497149814991500150115021503150415051506150715081509151015111512151315141515151615171518151915201521152215231524152515261527152815291530153115321533153415351536153715381539154015411542154315441545154615471548154915501551155215531554155515561557155815591560156115621563156415651566156715681569157015711572157315741575157615771578157915801581158215831584158515861587158815891590159115921593159415951596159715981599160016011602160316041605160616071608160916101611161216131614161516161617161816191620162116221623162416251626162716281629163016311632163316341635163616371638163916401641164216431644164516461647164816491650165116521653165416551656165716581659166016611662166316641665166616671668166916701671167216731674167516761677167816791680168116821683168416851686168716881689169016911692169316941695169616971698169917001701170217031704170517061707170817091710171117121713171417151716171717181719172017211722172317241725172617271728172917301731173217331734173517361737173817391740174117421743174417451746174717481749175017511752175317541755175617571758175917601761176217631764176517661767176817691770177117721773177417751776177717781779178017811782178317841785178617871788178917901791179217931794179517961797179817991800180118021803180418051806180718081809181018111812181318141815181618171818181918201821182218231824182518261827182818291830183118321833183418351836183718381839184018411842184318441845184618471848184918501851185218531854185518561857185818591860186118621863186418651866186718681869187018711872187318741875187618771878187918801881188218831884188518861887188818891890189118921893189418951896189718981899190019011902190319041905190619071908190919101911191219131914191519161917191819191920192119221923192419251926192719281929193019311932193319341935193619371938193919401941194219431944194519461947194819491950195119521953195419551956195719581959196019611962196319641965196619671968196919701971197219731974197519761977197819791980198119821983198419851986198719881989199019911992199319941995199619971998199920002001200220032004200520062007200820092010201120122013201420152016201720182019202020212022202320242025202620272028202920302031203220332034203520362037203820392040204120422043204420452046204720482049205020512052205320542055205620572058205920602061206220632064206520662067206820692070207120722073207420752076207720782079208020812082208320842085208620872088208920902091209220932094209520962097209820992100210121022103210421052106210721082109211021112112211321142115211621172118211921202121212221232124212521262127212821292130213121322133213421352136213721382139214021412142214321442145214621472148214921502151215221532154215521562157215821592160216121622163216421652166216721682169217021712172217321742175217621772178217921802181218221832184218521862187218821892190219121922193219421952196219721982199220022012202220322042205220622072208220922102211221222132214221522162217221822192220222122222223222422252226222722282229223022312232223322342235223622372238223922402241224222432244224522462247224822492250225122522253225422552256225722582259226022612262226322642265226622672268226922702271227222732274227522762277227822792280228122822283228422852286228722882289229022912292229322942295229622972298229923002301230223032304230523062307230823092310231123122313231423152316231723182319232023212322232323242325232623272328232923302331233223332334233523362337233823392340234123422343234423452346234723482349235023512352235323542355235623572358235923602361236223632364236523662367236823692370237123722373237423752376237723782379238023812382238323842385238623872388238923902391239223932394239523962397239823992400240124022403240424052406240724082409241024112412241324142415241624172418241924202421242224232424242524262427242824292430243124322433243424352436243724382439244024412442244324442445244624472448244924502451245224532454245524562457245824592460246124622463246424652466246724682469247024712472247324742475247624772478247924802481248224832484248524862487248824892490249124922493249424952496249724982499250025012502250325042505250625072508250925102511251225132514251525162517251825192520252125222523252425252526252725282529253025312532253325342535253625372538253925402541254225432544254525462547254825492550255125522553255425552556255725582559256025612562256325642565256625672568256925702571257225732574257525762577257825792580258125822583258425852586258725882589259025912592259325942595259625972598259926002601260226032604260526062607260826092610261126122613261426152616261726182619262026212622262326242625262626272628262926302631263226332634263526362637263826392640264126422643264426452646264726482649265026512652265326542655265626572658265926602661266226632664266526662667266826692670267126722673267426752676267726782679268026812682268326842685268626872688268926902691269226932694269526962697269826992700270127022703270427052706270727082709271027112712271327142715271627172718271927202721272227232724272527262727272827292730273127322733273427352736273727382739274027412742274327442745274627472748274927502751275227532754275527562757275827592760276127622763276427652766276727682769277027712772277327742775277627772778277927802781278227832784278527862787278827892790279127922793279427952796279727982799280028012802280328042805280628072808280928102811281228132814281528162817281828192820282128222823282428252826282728282829283028312832283328342835283628372838283928402841284228432844284528462847284828492850285128522853285428552856285728582859286028612862286328642865286628672868286928702871287228732874287528762877287828792880288128822883288428852886288728882889289028912892289328942895289628972898289929002901290229032904290529062907290829092910291129122913291429152916291729182919292029212922292329242925292629272928292929302931293229332934293529362937293829392940294129422943294429452946294729482949295029512952295329542955295629572958295929602961296229632964296529662967296829692970297129722973297429752976297729782979298029812982298329842985298629872988298929902991299229932994299529962997299829993000300130023003300430053006300730083009301030113012301330143015301630173018301930203021302230233024302530263027302830293030303130323033303430353036303730383039304030413042304330443045304630473048304930503051305230533054305530563057305830593060306130623063306430653066306730683069307030713072307330743075307630773078307930803081308230833084308530863087308830893090309130923093309430953096309730983099310031013102310331043105310631073108310931103111311231133114311531163117311831193120312131223123312431253126312731283129313031313132313331343135313631373138313931403141314231433144314531463147314831493150315131523153315431553156315731583159316031613162316331643165316631673168316931703171317231733174317531763177317831793180318131823183318431853186318731883189319031913192319331943195319631973198319932003201320232033204320532063207320832093210321132123213321432153216321732183219322032213222322332243225322632273228322932303231323232333234323532363237323832393240324132423243324432453246324732483249325032513252325332543255325632573258325932603261326232633264326532663267326832693270327132723273327432753276327732783279328032813282328332843285328632873288328932903291329232933294329532963297329832993300330133023303330433053306330733083309331033113312331333143315331633173318331933203321332233233324332533263327332833293330333133323333333433353336333733383339334033413342334333443345334633473348334933503351335233533354335533563357335833593360336133623363336433653366336733683369337033713372337333743375337633773378337933803381338233833384338533863387338833893390339133923393339433953396339733983399340034013402340334043405340634073408340934103411341234133414341534163417341834193420342134223423342434253426342734283429343034313432343334343435343634373438343934403441344234433444344534463447344834493450345134523453345434553456345734583459346034613462346334643465346634673468346934703471347234733474347534763477347834793480348134823483348434853486348734883489349034913492349334943495349634973498349935003501350235033504350535063507350835093510351135123513351435153516351735183519352035213522352335243525352635273528352935303531353235333534353535363537353835393540354135423543354435453546354735483549355035513552355335543555355635573558355935603561356235633564356535663567356835693570357135723573357435753576357735783579358035813582358335843585358635873588358935903591359235933594359535963597359835993600360136023603360436053606360736083609361036113612361336143615361636173618361936203621362236233624362536263627362836293630363136323633363436353636363736383639364036413642364336443645364636473648364936503651365236533654365536563657365836593660366136623663366436653666366736683669367036713672367336743675367636773678367936803681368236833684368536863687368836893690369136923693369436953696369736983699370037013702370337043705370637073708370937103711371237133714371537163717371837193720372137223723372437253726372737283729373037313732373337343735373637373738373937403741374237433744374537463747374837493750375137523753375437553756375737583759376037613762376337643765376637673768376937703771377237733774377537763777377837793780378137823783378437853786378737883789379037913792379337943795379637973798379938003801380238033804380538063807380838093810381138123813381438153816381738183819382038213822382338243825382638273828382938303831383238333834383538363837383838393840384138423843384438453846384738483849385038513852385338543855385638573858385938603861386238633864386538663867386838693870387138723873387438753876387738783879388038813882388338843885388638873888388938903891389238933894389538963897389838993900390139023903390439053906390739083909391039113912391339143915391639173918391939203921392239233924392539263927392839293930393139323933393439353936393739383939394039413942394339443945394639473948394939503951395239533954395539563957395839593960396139623963396439653966396739683969397039713972397339743975397639773978397939803981398239833984398539863987398839893990399139923993399439953996399739983999400040014002400340044005400640074008400940104011401240134014401540164017401840194020402140224023402440254026402740284029403040314032403340344035403640374038403940404041404240434044404540464047404840494050405140524053405440554056405740584059406040614062406340644065406640674068406940704071407240734074407540764077407840794080408140824083408440854086408740884089409040914092409340944095409640974098409941004101410241034104410541064107410841094110411141124113411441154116411741184119412041214122412341244125412641274128412941304131413241334134413541364137413841394140414141424143414441454146414741484149415041514152415341544155415641574158415941604161416241634164416541664167416841694170417141724173417441754176417741784179418041814182418341844185418641874188418941904191419241934194419541964197419841994200420142024203420442054206420742084209421042114212421342144215421642174218421942204221422242234224422542264227422842294230423142324233423442354236423742384239424042414242424342444245424642474248424942504251425242534254425542564257425842594260426142624263426442654266426742684269427042714272427342744275427642774278427942804281428242834284428542864287428842894290429142924293429442954296429742984299430043014302430343044305430643074308430943104311431243134314431543164317431843194320432143224323432443254326432743284329433043314332433343344335433643374338433943404341434243434344434543464347434843494350435143524353435443554356435743584359436043614362436343644365436643674368436943704371437243734374437543764377437843794380438143824383438443854386438743884389439043914392439343944395439643974398439944004401440244034404440544064407440844094410441144124413441444154416441744184419442044214422442344244425442644274428442944304431443244334434443544364437443844394440444144424443444444454446444744484449445044514452445344544455445644574458445944604461446244634464446544664467446844694470447144724473447444754476447744784479448044814482448344844485448644874488448944904491449244934494449544964497449844994500450145024503450445054506450745084509451045114512451345144515451645174518451945204521452245234524452545264527452845294530453145324533453445354536453745384539454045414542454345444545454645474548454945504551455245534554455545564557455845594560456145624563456445654566456745684569457045714572457345744575457645774578457945804581458245834584458545864587458845894590459145924593459445954596459745984599460046014602460346044605460646074608460946104611461246134614461546164617461846194620462146224623462446254626462746284629463046314632463346344635463646374638463946404641464246434644464546464647464846494650465146524653465446554656465746584659466046614662466346644665466646674668466946704671467246734674467546764677467846794680468146824683468446854686468746884689469046914692469346944695469646974698469947004701470247034704470547064707470847094710471147124713471447154716471747184719472047214722472347244725472647274728472947304731473247334734473547364737473847394740474147424743474447454746474747484749475047514752475347544755475647574758475947604761476247634764476547664767476847694770477147724773477447754776477747784779478047814782478347844785478647874788478947904791479247934794479547964797479847994800480148024803480448054806480748084809481048114812481348144815481648174818481948204821482248234824482548264827482848294830483148324833483448354836483748384839484048414842484348444845484648474848484948504851485248534854485548564857485848594860486148624863486448654866486748684869487048714872487348744875487648774878487948804881488248834884488548864887488848894890489148924893489448954896489748984899490049014902490349044905490649074908490949104911491249134914491549164917491849194920492149224923492449254926492749284929493049314932493349344935493649374938493949404941494249434944494549464947494849494950495149524953495449554956495749584959496049614962496349644965496649674968496949704971497249734974497549764977497849794980498149824983498449854986498749884989499049914992499349944995499649974998499950005001500250035004500550065007500850095010501150125013501450155016501750185019502050215022502350245025502650275028502950305031503250335034503550365037503850395040504150425043504450455046504750485049505050515052505350545055505650575058505950605061506250635064506550665067506850695070507150725073507450755076507750785079508050815082508350845085508650875088508950905091509250935094509550965097509850995100510151025103510451055106510751085109511051115112511351145115511651175118511951205121512251235124512551265127512851295130513151325133513451355136513751385139514051415142514351445145514651475148514951505151515251535154515551565157515851595160516151625163516451655166516751685169517051715172517351745175517651775178517951805181518251835184518551865187518851895190519151925193519451955196519751985199520052015202520352045205520652075208
  1. <template>
  2. <view class="goods-container">
  3. <!-- 展示蒙层 显示推广画报 -->
  4. <view class="poster" v-if="myqr_show">
  5. <view class="title">
  6. <text>推广文案</text>
  7. </view>
  8. <view class="ads">
  9. <view style="width: 480rpx">{{ myqr_ads }}</view>
  10. </view>
  11. <image :src="myqr_url" mode="widthFix" style="width: 480rpx" :show-menu-by-longpress="true"></image>
  12. <view class="tool">
  13. <view @tap="posterCopy" style="text-align: right">
  14. <image class="img" style="width: 110rpx; height: 130rpx" src="/static/images/share/p_copy.png">
  15. </image>
  16. </view>
  17. <button open-type="share" class="share-btn">
  18. <image class="img" style="width: 85rpx; height: 127rpx" src="/static/images/share/p_dy.png"></image>
  19. </button>
  20. <view style="text-align: left">
  21. <image class="img" @tap="goSaveQrcode" src="/static/images/share/p_save.png"></image>
  22. </view>
  23. </view>
  24. <view style="text-align: center">
  25. <image class="closeImg" @tap="hidePoster" src="/static/images/share/close.png"></image>
  26. </view>
  27. </view>
  28. <view class="container" :style="'filter:brightness(' + myqr_blur + '%)'">
  29. <image src="/static/images/new/isnew.png" v-if="goods.isNew" class="isNew"></image>
  30. <swiper class="goodsimgs" :indicator-dots="goods.gallery.length > 1 ? true : false" :autoplay="true"
  31. interval="3000" duration="1000" indicator-color="rgba(0, 192, 255, .2)"
  32. indicator-active-color="rgba(0, 192, 255)">
  33. <swiper-item v-for="(item, index) in gallery" :key="index" >
  34. <image :src="item" mode="aspectFill"></image>
  35. </swiper-item>
  36. </swiper>
  37. <view class="share-pop-box" v-if="openShare">
  38. <view class="share-pop">
  39. <view class="close" @tap="closeShare">
  40. </view>
  41. </view>
  42. </view>
  43. <view class="goods-info-new" v-if="randomAandB">
  44. <view class="sku-select" v-if="goods.productType == 2">
  45. <scroll-view scroll-x="true" class="scroll-view_H" scroll-left="0">
  46. <view v-for="(item, index) in productList" :key="index" :data-index="index" :data-id="item.id"
  47. :data-item="item" @tap="selectItem" class="sku-select-item"
  48. :class="{ 'sku-select-item-active': currentIndexx === index }">
  49. <view class="product-name">
  50. {{item.specifications}}
  51. </view>
  52. <view class="product-price">
  53. <span class="current-price"><text
  54. style="font-size: 14rpx;">¥</text>{{item.price}}</span>
  55. <span class="original-price">¥{{item.counterPrice}}</span>
  56. </view>
  57. </view>
  58. </scroll-view>
  59. </view>
  60. <view class="price-show">
  61. <view class="sale-num">
  62. 已爆卖{{ countSalesNumber }}件
  63. </view>
  64. <view class="sale-price">
  65. <view class="price">
  66. <text class="one">¥</text>
  67. <text class="two">{{ finallyPrice }}</text>
  68. <span class="three">{{checkedSku.discountRate}}折</span>
  69. <span class="four">¥{{ checkedSku.counterPrice }}</span>
  70. <span class="new-customer-price"
  71. v-if="checkedSku.newCus">{{checkedSku.newCus==true?'新客价':''}}</span>
  72. </view>
  73. </view>
  74. </view>
  75. </view>
  76. <view class="price-line" v-if="!randomAandB">
  77. <view class="real-price">
  78. <text class="bold-price-j">¥</text>
  79. <text class="bold-price">{{ finallyPrice }}</text>
  80. <span class="new-customer-price"
  81. v-if="checkedSku.newCus">{{checkedSku.newCus==true?'新客价':''}}</span>
  82. </view>
  83. <view class="sale-price">¥{{ checkedSku.counterPrice }}</view>
  84. <view class="sale-num">已售{{ countSalesNumber }}件</view>
  85. </view>
  86. <view class="discount" v-if="!randomAandB">
  87. <view class="discount-img">
  88. <image src="https://mall.zhaijieshi.cc/file/wx-dy/bq.png" mode="aspectFill"></image>
  89. </view>
  90. <view class="tip">
  91. {{checkedSku.discountRate}}折热销中
  92. </view>
  93. </view>
  94. <view class="goods-coupon" v-if="couponVoList.length > 0">
  95. <view class="goupon-tag" v-for="(item, index) in couponVoList" :key="index">{{ item.tag }}</view>
  96. </view>
  97. </view>
  98. <!-- 购买提醒 -->
  99. <!-- wx:if="{{buyToastShow}}" -->
  100. <view class="buy-toast" v-if="buyToastShow">
  101. <swiper :autoplay="true" :circular="true" interval="3000" duration="1000" :vertical="true"
  102. class="toast-swiper">
  103. <swiper-item class="toast-swiper-item" v-for="(item, index) in goodsBuyTime" :key="index">
  104. <view class="toast-item">
  105. <image :src="item.cusHeadImg + '?w=20'" mode="aspectFill"></image>
  106. <view>{{ item.comment }}</view>
  107. </view>
  108. </swiper-item>
  109. </swiper>
  110. </view>
  111. <!-- 服务 须知 门店 -->
  112. <view :class="randomAandB==1?'random':''">
  113. <view class="other-info">
  114. <view class="name">
  115. {{ goods.name }}
  116. </view>
  117. <view class="common-info">
  118. <view class="info-title">服务</view>
  119. <view class="info-content">
  120. <!-- 专业服务·六区清洁·108项验收标准 -->
  121. {{ goods.serviceStandards }}
  122. </view>
  123. </view>
  124. <view class="common-info">
  125. <view class="info-title">须知</view>
  126. <view class="info-content">
  127. {{ goods.serviceInstructions }}
  128. </view>
  129. </view>
  130. <view class="common-info">
  131. <view class="info-title">门店</view>
  132. <view class="info-content">全国{{ storeNum }}家门店通用</view>
  133. </view>
  134. <view class="info-showtip" v-if="randomAandB">
  135. <view class="img">
  136. <span class="xianmai">先买后约</span>
  137. <span class="content">提前预约 · 先一步享鲸致优选服务</span>
  138. </view>
  139. <view class="appoint-steps">
  140. <!-- <image src="https://mall.zhaijieshi.cc/file/wx-dy/tb.png" mode=""
  141. style="height: 100%;width: 100%;">
  142. </image>-->
  143. </view>
  144. </view>
  145. </view>
  146. </view>
  147. <!-- 规格 -->
  148. <view class="sku-wrapper" @tap="showSkuPopup(0)" v-if="goods.productType == 2&!randomAandB">
  149. <view class="current-select">
  150. <img src="https://mall.zhaijieshi.cc/file/wx-dy/jx.png" />
  151. </view>
  152. <view class="sku-info">
  153. <view class="sku-left">
  154. <view class="current-sku">{{ checkedSku.specifications }}</view>
  155. </view>
  156. <view class="sku-right">
  157. <view class="sku-right-current">共{{ specTotalNum }}种</view>
  158. <view class="sku-right-img">
  159. <image src="https://mall.zhaijieshi.cc/file/wx-dy/yjt.png" mode="aspectFit" class="arrow-img">
  160. </image>
  161. </view>
  162. </view>
  163. </view>
  164. </view>
  165. <!-- 档期显示 -->
  166. <view class="calendar-show" v-if="!randomAandB" @tap="calenderHandle">
  167. <view class="calendar-title">
  168. 未来七天档期紧张·请尽早预约
  169. </view>
  170. <view class="calendar-show-content">
  171. <view class="calendar-date" :class="item.dateType==0?'calendar-date':'calendar-date1'"
  172. v-for="(item,index) in futureDays">
  173. <view class="calendar-date-date">{{item.value}}</view>
  174. <view style="font-size: 16rpx;height: 26rpx;">{{item.dateType==0?'充足':'紧张'}}</view>
  175. </view>
  176. </view>
  177. </view>
  178. <!-- 加购数量 -->
  179. <!-- v-if="productList.length == 1 && productList[0].isSupportAddbuy" -->
  180. <view class="num-module" v-if="productList.length == 1 && productList[0].isSupportAddbuy">
  181. <view class="plus-buy">
  182. <view class="title">加购</view>
  183. <view class="plus-name">
  184. {{ productList[0].unitDescribe }}
  185. <text>¥{{ productList[0].unitPrice }}</text>
  186. /{{ productList[0].unitArea }}
  187. </view>
  188. </view>
  189. <view class="plus-num" style="padding-left: 80rpx">
  190. <view class="title" style="color: #000; width: 160rpx">加购数量</view>
  191. <view class="calc-counter">
  192. <view :class="'minus-btn ' + (plusNum == minNum ? 'disable' : '')" @tap="minusNum">-</view>
  193. <input class="num-input" @input="bindGoodsNumInput" type="number" maxlength="3" placeholder=""
  194. :value="plusNum" />
  195. <!-- <view class="num-input">{{ plusNum }}</view> -->
  196. <view :class="'plus-btn ' + (plusNum >= productList[0].unitMaximum ? 'disable' : '')"
  197. @tap="addNum">+</view>
  198. </view>
  199. </view>
  200. <view style="color: #fe2b54; margin: 8rpx 0 0" :tt-if="plusNum != 0">
  201. 每份{{ productList[0].unitArea }},加购{{ plusNum }}份,合计{{ addPurchaseAmount }}元</view>
  202. </view>
  203. <!-- 团购评价 -->
  204. <view class="group-evaluation">
  205. <view class="title" @tap="goWholeEval">
  206. <view class="left">团购评价({{goodsCommentCount}}条)</view>
  207. <view class="right">
  208. <view>查看全部</view>
  209. <image src="https://mall.zhaijieshi.cc/file/wx-dy/arrow-grey.png" mode="aspectFit"
  210. class="arrow-img"></image>
  211. </view>
  212. </view>
  213. <view class="evaluation-item" v-for="(item, index) in goodsComment" :key="index">
  214. <view class="item-left">
  215. <view class="eval-top">
  216. <image :src="item.cusHeadImg + '?w=100'" mode="aspectFill" class="avatar"></image>
  217. <view class="name">{{ item.cusName }}</view>
  218. <view class="tag">{{ item.cusLabel }}</view>
  219. <view class="hp">{{ item.commentType }}</view>
  220. </view>
  221. <view class="eval-content">
  222. {{ item.comment }}
  223. </view>
  224. </view>
  225. <view class="item-right">
  226. <image :src="item.commentImg + '?w=200'" mode="aspectFill"></image>
  227. </view>
  228. </view>
  229. </view>
  230. <view class="detail">
  231. <image mode="widthFix" :src="item + '?w=1024'" v-for="(item, index) in detailList" :key="index"></image>
  232. </view>
  233. <!-- 产品推荐 -->
  234. <view class="recommend-title" v-if="recGoodsList.length > 0">产品推荐</view>
  235. <view class="recommend-list">
  236. <navigator :url="'/pages/goods/goods?id=' + item.id" v-for="(item, index) in recGoodsList" :key="index">
  237. <view class="recommend-item">
  238. <image :src="item.picUrl" mode="aspectFill"></image>
  239. <view class="recommend-goods-name">
  240. {{ item.name }}
  241. </view>
  242. <view class="recommend-goods-price">
  243. ¥
  244. <text>{{ item.retailPrice }}</text>
  245. </view>
  246. </view>
  247. </navigator>
  248. </view>
  249. <!-- 底部按钮 -->
  250. <view class="bottom-btn">
  251. <view class="appoint-fire" v-if="!randomAandB">
  252. </view>
  253. <view class="bottom-appointment-tips" v-if="randomAandB">
  254. <view>
  255. <span class="jinqi">近期可约</span>
  256. <span class="selected-sku">已选择{{checkedSku.specifications}}</span>
  257. </view>
  258. </view>
  259. <view class="bottom-content" style="display: flex;padding: 12rpx 24rpx 18rpx;">
  260. <view class="contact-block">
  261. <view class="contact-wrapper" @tap="goIM">
  262. <image class="contact-img" mode="aspectFit" src="/static/images/online-new.png"></image>
  263. <view class="text">客服</view>
  264. </view>
  265. </view>
  266. <view class="c" @tap="addFast" v-if="!randomAandB">立即预约</view>
  267. <view class="c" @tap="addFast" v-if="randomAandB">立即抢购</view>
  268. </view>
  269. </view>
  270. <!-- sku规格列表 -->
  271. <view class="appoint-overlay-wrapper" @tap="onSkuClose" v-if="chooseSkuVisible"
  272. @touchmove.stop.prevent="preventTouchMove">
  273. <view class="spu-popup" @tap.stop.prevent="stopClick">
  274. <view class="sku-popup-title">请选择购买规格</view>
  275. <view class="sku-popup-tips">选择实际服务数量对应的规格</view>
  276. <scroll-view scroll-y="true" class="sku-list-block" style="height: 300rpx;">
  277. <view class="sku-list-block">
  278. <!-- <view class="spu-title">规格</view> -->
  279. <view style="padding-bottom: 20rpx ;">
  280. <view :class="'sku-item ' + (activeSku == item.id ? 'active-sku' : '')" :data-index="index"
  281. :data-id="item.id" @tap="selectSku" v-for="(item, index) in productList" :key="index">
  282. <span v-if="item.newCus==true" class="xinke">新客专享</span>
  283. <view>
  284. {{ item.specifications }}
  285. </view>
  286. <view class="sku-price">¥{{item.price}}</view>
  287. </view>
  288. </view>
  289. </view>
  290. </scroll-view>
  291. <view class="sku-popup-btntip">
  292. 附近门店可约 · 预约后锁定档期优先派单
  293. </view>
  294. <view class="sku-btn" v-if="randomAandB" @tap="confSku">立即抢购</view>
  295. <view class="sku-btn" v-else @tap="confSku">{{showType==1?'立即预约':'确定'}}</view>
  296. </view>
  297. </view>
  298. </view>
  299. </template>
  300. <script>
  301. var app = getApp();
  302. // var WxParse = require('../../lib/wxParse/wxParse.js');
  303. var util = require('../../utils/util.js');
  304. var api = require('../../config/api.js');
  305. var user = require('../../utils/user.js');
  306. export default {
  307. data() {
  308. return {
  309. gallery: [],
  310. goodsCommentCount: '',
  311. showType: 0, // 1弹窗后确认立即下单
  312. chooseSkuVisible: false,
  313. activeSku: 0,
  314. checkedSku: {
  315. specifications: [],
  316. id: 0,
  317. retailPrice: '',
  318. counterPrice: '',
  319. url: '',
  320. discountRate: ""
  321. },
  322. currentSku: {
  323. specifications: [],
  324. id: 0,
  325. retailPrice: '',
  326. counterPrice: '',
  327. url: '',
  328. price: ''
  329. },
  330. productList: [],
  331. specTotalNum: '',
  332. buyToastShow: false,
  333. goodsBuyTime: {
  334. cusHeadImg: '',
  335. comment: ''
  336. },
  337. recGoodsList: [],
  338. plusNum: '0',
  339. detailList: [],
  340. detailListAll: [],
  341. countSalesNumber: '',
  342. selfPayShow: false,
  343. selfPayCheck: false,
  344. spreadPayShow: false,
  345. spreadPayChecked: false,
  346. canShare: false,
  347. id: 0,
  348. goods: {
  349. unitMaximum: 1,
  350. isNew: '',
  351. gallery: [],
  352. counterPrice: '',
  353. name: '',
  354. serviceInstructions: '',
  355. productType: 0,
  356. unitPrice: '',
  357. unitArea: '',
  358. type: 0
  359. },
  360. groupon: [],
  361. //该商品支持的团购规格
  362. grouponLink: {},
  363. //参与的团购
  364. attribute: [],
  365. issueList: [],
  366. comment: [],
  367. //brand: {},
  368. specificationList: [],
  369. relatedGoods: [],
  370. cartGoodsCount: 0,
  371. userHasCollect: 0,
  372. number: 1,
  373. checkedSpecText: '规格数量选择',
  374. tmpSpecText: '请选择规格数量',
  375. checkedSpecPrice: 0,
  376. openAttr: false,
  377. openShare: false,
  378. collect: false,
  379. shareImage: '',
  380. isGroupon: false,
  381. //标识是否是一个参团购买
  382. soldout: false,
  383. canWrite: false,
  384. //用户是否获取了保存相册的权限
  385. name_height: 58,
  386. //根据名称长度 设置高度
  387. userInfo: {},
  388. hasLogin: false,
  389. shareId: 0,
  390. //options传递过来的参数 表示是打开哪个分享
  391. wxShareId: 0,
  392. //如果要分享此商品的分享id
  393. addressInfo: {},
  394. rId: 0,
  395. //分享人id,
  396. selfDiscount: 0,
  397. spreadDiscount: 0,
  398. referee: {
  399. self: 0,
  400. share: 0
  401. },
  402. myqr_show: false,
  403. //我的分享二维码
  404. myqr_url: null,
  405. //分享海报及推广语言
  406. myqr_ads: '',
  407. myqr_blur: 100,
  408. //背景模糊值
  409. myqr_bottom_btn: 'fixed',
  410. //底部功能按钮
  411. activited: false,
  412. //是否活动中
  413. activityPrice: 0,
  414. //活动价格
  415. activityTime: 89646,
  416. //活动倒计时总计时间 (整型 秒)
  417. activityDay: 0,
  418. //活动天数
  419. activityHour: 0,
  420. //活动小时
  421. activityMinute: 0,
  422. //活动分钟
  423. activitySecond: 0,
  424. //活动秒
  425. activityTimer: null,
  426. //定时器
  427. code: '',
  428. //抖音登录code
  429. isCommiting: false,
  430. //是否提交中 防止多次提交
  431. //以下是支付使用参数
  432. openId: '',
  433. checkedAddress: '',
  434. actualPrice: '',
  435. couponPrice: '',
  436. addressId: '',
  437. couponId: '',
  438. userCouponId: '',
  439. mobile: '',
  440. couponVoList: [],
  441. //优惠券列表
  442. finallyPrice: '',
  443. storeNum: '267',
  444. totalPrice: '',
  445. addPurchaseAmount: 0,
  446. addPurchase: [],
  447. serviceId: '',
  448. bookDetail: {
  449. bookDetailId: '',
  450. statusName: '',
  451. consignee: '',
  452. mobile: '',
  453. address: '',
  454. fraName: ''
  455. },
  456. minNum: 0,
  457. //达人id 表示是否从小雪花进入
  458. talentId: '',
  459. goodsComment: '',
  460. selfPayChecked: '',
  461. qid: '', //短链id(表示短链进入)
  462. futureDays: [],
  463. randomAandB: 0,
  464. currentIndexx: 0, // 默认选中第一个
  465. currentSelectedSku: '',
  466. selectId: '',
  467. };
  468. }, // 页面分享
  469. onShareAppMessage: function() {
  470. let that = this;
  471. if (!app.globalData.hasLogin) {
  472. uni.navigateTo({
  473. url: '/pages/auth/login/login'
  474. });
  475. return;
  476. }
  477. //获取分享id 用来追踪链接
  478. //引荐人和非引荐人的 链接不同
  479. let imgUrl = that.goods.shareWxUrl ? that.goods.shareWxUrl : that.goods.gallery[0];
  480. var path = '/pages/goods/goods?id=' + that.id + '&rId=' + that.userInfo.id;
  481. if (that.userInfo.isDis) {
  482. //是引荐人
  483. path = '/pages/goods/goods?id=' + that.id + '&shareId=' + that.wxShareId;
  484. }
  485. this.hidePoster();
  486. return {
  487. title: that.goods.name + '\n' + that.myqr_ads,
  488. path: path,
  489. imageUrl: imgUrl
  490. };
  491. },
  492. onLoad: async function(options) {
  493. console.log(options);
  494. console.log(this.$store.state)
  495. // 页面初始化 options为页面跳转所带来的参数
  496. var addressInfo = uni.getStorageSync('addressInfo');
  497. if (addressInfo) {
  498. this.setData({
  499. addressInfo: addressInfo
  500. });
  501. }
  502. var openId = uni.getStorageSync('openId');
  503. if (openId) {
  504. this.setData({
  505. openId: openId
  506. });
  507. } else {
  508. openId = app.globalData.openId; //首页会获取一次
  509. if (openId == '' || openId == null || openId == undefined) {
  510. //openid为空 需要去获取
  511. await this.getUserOpenId();
  512. } else {
  513. console.log('进入onload,已提前拿到openid:' + openId);
  514. this.setData({
  515. openId: openId
  516. });
  517. uni.setStorageSync('openId', openId);
  518. }
  519. }
  520. if (options.rId) {
  521. this.setData({
  522. rId: parseInt(options.rId)
  523. });
  524. }
  525. //达人id 小雪花过来的
  526. if (options.talentId) {
  527. this.setData({
  528. talentId: options.talentId
  529. });
  530. }
  531. if (options.shareId) {
  532. this.setData({
  533. shareId: parseInt(options.shareId)
  534. });
  535. }
  536. if (options.id) {
  537. this.setData({
  538. id: parseInt(options.id)
  539. });
  540. this.getGoodsInfo();
  541. }
  542. // 补差产品扫二维码进入
  543. if (options.service_id) {
  544. this.setData({
  545. id: parseInt(options.goods_id),
  546. serviceId: options.service_id
  547. });
  548. this.getGoodsInfo();
  549. }
  550. //短链或者二维码的id
  551. if (options.qid) {
  552. this.setData({
  553. qid: options.qid
  554. })
  555. }
  556. this.getStore();
  557. },
  558. onShow() {
  559. let randomAandB = uni.getStorageSync('randomAandB');
  560. console.log("sync get:" + randomAandB)
  561. if (randomAandB) {
  562. this.setData({
  563. randomAandB: randomAandB.randomAandB
  564. })
  565. }
  566. console.log("randomAandB", this.randomAandB);
  567. util.addLog(1, this.randomAandB ? 9 : 10, 1, {
  568. goodsId: this.id
  569. });
  570. if (app.globalData.hasLogin) {
  571. let userInfo = uni.getStorageSync('userInfo');
  572. app.globalData.userInfo = userInfo;
  573. this.setData({
  574. userInfo: userInfo,
  575. hasLogin: true
  576. });
  577. }
  578. if (uni.getStorageSync('newArray') == null || uni.getStorageSync('newArray') == "") {
  579. console.log("没有数据");
  580. //随机显示未来几天时间是否充足
  581. const futureSevenDays = util.getNextSevenDaysFromToday();
  582. const newSevenDays = futureSevenDays.map(item => {
  583. return {
  584. value: item,
  585. dateType: 0
  586. };
  587. });
  588. // 假设这是你要存储的数据
  589. let newSevenDayss = util.changeRandomTwoElementsDateType(newSevenDays);
  590. const timestamp = Date.now(); // 获取当前时间戳
  591. this.setData({
  592. futureDays: newSevenDayss
  593. })
  594. // 将数据和时间戳一起存储
  595. uni.setStorage({
  596. key: 'newArray',
  597. data: {
  598. newArray: newSevenDayss,
  599. timestamp: timestamp
  600. },
  601. success() {
  602. console.log('数据和时间戳存储成功');
  603. }
  604. });
  605. } else {
  606. console.log("有数据");
  607. function isDataExpired(timestamp, expiryDuration) {
  608. const now = Date.now();
  609. return (now - timestamp) > expiryDuration;
  610. }
  611. const expiryDuration = 3600000; // 一小时的毫秒数
  612. let flag = false;
  613. let s = uni.getStorageSync("newArray");
  614. flag = s && isDataExpired(s.timestamp, expiryDuration);
  615. if (flag) {
  616. // uni.removeStorageSync("newArray");
  617. //随机显示未来几天时间是否充足
  618. const futureSevenDays = util.getNextSevenDaysFromToday();
  619. const newSevenDays = futureSevenDays.map(item => {
  620. return {
  621. value: item,
  622. dateType: 0
  623. };
  624. });
  625. let newSevenDayss = util.changeRandomTwoElementsDateType(newSevenDays);
  626. // 假设这是你要存储的数据
  627. const timestamp = Date.now(); // 获取当前时间戳
  628. // 将数据和时间戳一起存储
  629. this.setData({
  630. futureDays: newSevenDayss
  631. })
  632. uni.setStorage({
  633. key: 'newArray',
  634. data: {
  635. newArray: newSevenDayss,
  636. timestamp: timestamp
  637. },
  638. success() {
  639. console.log('数据和时间戳再次存储成功');
  640. }
  641. });
  642. } else {
  643. // 将数据和时间戳一起存储
  644. this.setData({
  645. futureDays: s.newArray
  646. })
  647. }
  648. }
  649. },
  650. onHide() {
  651. // 页面隐藏
  652. clearInterval(this.activityTimer);
  653. util.addLog(2, this.randomAandB ? 9 : 10, 2, {
  654. goodsId: this.id
  655. });
  656. },
  657. onUnload() {
  658. // 页面关闭
  659. clearInterval(this.activityTimer);
  660. },
  661. onReady() {
  662. util.addLog(1, this.randomAandB ? 9 : 10, 1, {
  663. goodsId: this.id
  664. });
  665. // 页面渲染完成
  666. },
  667. onReachBottom() {
  668. console.info('reachbottom');
  669. let detailListAll = this.detailListAll;
  670. let detailList = this.detailList;
  671. //console.info(detailList)
  672. if (detailListAll.length > detailList.length) {
  673. // detailListAll = detailListAll.splice(1);
  674. detailList.push(detailListAll[detailList.length]);
  675. this.setData({
  676. detailList: detailList
  677. // detailListAll: detailListAll
  678. });
  679. }
  680. },
  681. methods: {
  682. calenderHandle() {
  683. util.addLog(1, 10, 24)
  684. },
  685. selectItem(e) {
  686. console.log("item", e.currentTarget.dataset.item);
  687. console.log("selectItem", e.currentTarget.dataset.id);
  688. let id = e.currentTarget.dataset.id
  689. let index = e.currentTarget.dataset.index
  690. let finallyPrice = e.currentTarget.dataset.item.price
  691. let counterPrice = e.currentTarget.dataset.item.counterPrice
  692. let item = e.currentTarget.dataset.item
  693. // 设置当前选中的项目
  694. this.setData({
  695. currentIndexx: index,
  696. activeSku: id,
  697. finallyPrice: finallyPrice,
  698. 'goods.counterPrice': counterPrice,
  699. selectId: id,
  700. currentSku: item,
  701. checkedSku: item
  702. // currentSelectedSku:item.specifications
  703. })
  704. // 打印当前项目的 id
  705. console.log('当前选中的 index:', e.currentTarget.dataset.index);
  706. util.addLog(1, 9, 25)
  707. },
  708. //禁止蒙版下面的页面滑动
  709. preventTouchMove() {},
  710. goCustomerService() {
  711. //跳转微信客服
  712. console.info('goCustomerService');
  713. uni.openCustomerServiceChat({
  714. extInfo: {
  715. url: 'https://work.weixin.qq.com/kfid/kfc1fcfae84340d5125'
  716. },
  717. corpId: 'ww034f0b524f8ead00',
  718. success(res) {},
  719. fail(res) {
  720. console.info(res);
  721. }
  722. });
  723. },
  724. shareFriendOrCircle: function() {
  725. if (!app.globalData.hasLogin) {
  726. uni.navigateTo({
  727. url: '/pages/auth/login/login'
  728. });
  729. return;
  730. }
  731. //分享 弹出图片
  732. let that = this;
  733. uni.removeStorageSync(String(that.goods.id));
  734. //取出本地缓存中的分享图
  735. // let sUrl=wx.getStorageSync(String(that.data.goods.id));
  736. // if(sUrl!=null&&sUrl!=""){//获取过的分享图 不需要再次获取
  737. // that.setData({
  738. // myqr_url:sUrl,
  739. // myqr_show:true,
  740. // myqr_blur:5
  741. // });
  742. // return;
  743. // }
  744. uni.showLoading({
  745. title: '生成中'
  746. });
  747. util.request(api.QrGoodsCodeCreate, {
  748. goodsId: that.goods.id
  749. }).then(function(res) {
  750. uni.hideLoading();
  751. if (res.errno == 0) {
  752. that.setData({
  753. myqr_url: res.data.imgUrl,
  754. myqr_show: true,
  755. myqr_blur: 5
  756. });
  757. //保存分享图url到本地缓存
  758. // wx.setStorageSync(String(that.data.goods.id),res.data.imgUrl);
  759. } else if (res.errno == 501) {
  760. uni.navigateTo({
  761. url: '/pages/auth/login/login'
  762. });
  763. } else {
  764. uni.showToast({
  765. title: res.errmsg,
  766. duration: 5000
  767. });
  768. }
  769. });
  770. //var that = this;
  771. /*if (this.data.openShare === false) {
  772. this.setData({
  773. openShare: !this.data.openShare
  774. });
  775. } else {
  776. return false;
  777. }*/
  778. },
  779. /**活动剩余时间 格式化 */
  780. handleActivityTime() {
  781. let that = this;
  782. let interval = setInterval(function() {
  783. if (that.activityTime <= 1) {
  784. return;
  785. }
  786. let activityTime = that.activityTime;
  787. let day = parseInt(activityTime / 86400);
  788. let hour = parseInt((activityTime % 86400) / 3600);
  789. console.info((activityTime % 86400) % 3600);
  790. let minte = parseInt(((activityTime % 86400) % 3600) / 60);
  791. let second = parseInt(((activityTime % 86400) % 3600) % 60);
  792. that.setData({
  793. activityDay: day,
  794. activityHour: hour < 10 ? '0' + hour.toString() : hour.toString(),
  795. activityMinute: minte < 10 ? '0' + minte.toString() : minte.toString(),
  796. activitySecond: second < 10 ? '0' + second.toString() : second.toString(),
  797. activityTime: activityTime - 1
  798. });
  799. }, 1000);
  800. that.setData({
  801. activityTimer: interval
  802. });
  803. },
  804. handleSetting: function(e) {
  805. var that = this;
  806. // console.log(e)
  807. if (!e.detail.authSetting['scope.writePhotosAlbum']) {
  808. uni.showModal({
  809. title: '警告',
  810. content: '不授权无法保存',
  811. showCancel: false
  812. });
  813. that.setData({
  814. canWrite: false
  815. });
  816. } else {
  817. uni.showToast({
  818. title: '保存成功'
  819. });
  820. that.setData({
  821. canWrite: true
  822. });
  823. }
  824. },
  825. // 保存分享图
  826. saveShare: function() {
  827. let that = this;
  828. uni.showLoading({
  829. title: '图片保存中'
  830. });
  831. console.log(that);
  832. uni.downloadFile({
  833. url: that.myqr_url,
  834. success: function(res) {
  835. console.log(res);
  836. uni.saveImageToPhotosAlbum({
  837. filePath: res.tempFilePath,
  838. success: function(res) {
  839. uni.hideLoading();
  840. uni.showModal({
  841. title: '存图成功',
  842. content: '图片成功保存到相册了,可以分享到朋友圈了',
  843. showCancel: false,
  844. confirmText: '好的',
  845. confirmColor: '#a78845',
  846. success: function(res) {
  847. if (res.confirm) {
  848. console.log('用户点击确定');
  849. that.setData({
  850. myqr_show: false,
  851. myqr_blur: 0
  852. });
  853. }
  854. }
  855. });
  856. },
  857. fail: function(res) {
  858. uni.hideLoading();
  859. uni.showModal({
  860. title: '警告',
  861. content: '不授权无法保存',
  862. showCancel: false
  863. });
  864. that.setData({
  865. myqr_show: false,
  866. myqr_blur: 0
  867. });
  868. }
  869. });
  870. },
  871. fail: function(res) {
  872. uni.hideLoading();
  873. console.log(res);
  874. }
  875. });
  876. },
  877. // 获取商品信息
  878. getGoodsInfo: function() {
  879. let that = this;
  880. let params = {
  881. id: that.id,
  882. rId: that.rId,
  883. openId: this.openId
  884. };
  885. if (this.serviceId) {
  886. params = {
  887. id: that.id,
  888. rId: that.rId,
  889. openId: this.openId,
  890. serviceId: that.serviceId
  891. };
  892. }
  893. console.info('1-》getGoodsInfo start');
  894. util.request(api.GoodsDetail, params).then(function(res) {
  895. console.info('2-》getGoodsInfo end');
  896. console.info(res);
  897. if (res.errno === 0) {
  898. let goodsComment = res.data.goodsComment;
  899. let list = [];
  900. if (goodsComment) {
  901. goodsComment.forEach((item) => {
  902. let obj = item;
  903. if (item.commentImgs) {
  904. let img = item.commentImgs.split(',');
  905. if (img.length >= 1) {
  906. obj.commentImg = img[0];
  907. } else {
  908. obj.commentImg = '';
  909. }
  910. }
  911. list.push(obj);
  912. });
  913. }
  914. let checkedSku = {};
  915. // if (res.data.info.productType == 3) {
  916. // let plusInit = res.data.productList.filter((pro) => {
  917. // return pro.unitIncreaseNumber == 0;
  918. // });
  919. // if (plusInit.length >= 1) {
  920. // checkedSku = plusInit[0];
  921. // }
  922. // } else {
  923. checkedSku = res.data.productList[0];
  924. // }
  925. // if (res.data.info.type == 4) {
  926. that.setData({
  927. plusNum: 0,
  928. minNum: 0
  929. });
  930. // }
  931. that.setData({
  932. goods: res.data.info,
  933. gallery: res.data.info.gallery.split(','),
  934. detailList: res.data.info.detail == '' || res.data.info.detail == null ?
  935. [] : [res.data.info.detail.split(',')[0]],
  936. detailListAll: res.data.info.detail == '' || res.data.info.detail == null ?
  937. [] : res.data.info.detail.split(','),
  938. // attribute: res.data.attribute,
  939. // issueList: res.data.issue,
  940. // comment: res.data.comment,
  941. //brand: res.data.brand,
  942. specificationList: res.data.specificationList,
  943. userHasCollect: res.data.userHasCollect,
  944. shareImage: res.data.shareImage,
  945. checkedSpecPrice: res.data.info.retailPrice,
  946. countSalesNumber: res.data.countSalesNumber,
  947. // canShare: res.data.share,
  948. // name_height: height,
  949. wxShareId: res.data.shareId,
  950. activited: res.data.activited,
  951. activityTime: res.data.activityTime,
  952. activityPrice: res.data.activityPrice,
  953. productList: res.data.productList,
  954. specTotalNum: res.data.productList.length,
  955. goodsComment: list,
  956. buyToastShow: true,
  957. goodsBuyTime: res.data.goodsBuyTime,
  958. // checkedSku:res.data.productList[0],
  959. // currentSku:res.data.productList[0],
  960. checkedSku: checkedSku,
  961. currentSku: checkedSku,
  962. recGoodsList: res.data.recGoodsList,
  963. // finallyPrice: Number(res.data.info.retailPrice).toFixed(2),
  964. finallyPrice: res.data.productList[0].counterPrice,
  965. // addPurchase:res.data.addPurchase,
  966. bookDetail: res.data.bookDetail,
  967. goodsCommentCount: res.data.goodsCommentCount
  968. });
  969. that.getMaxCoupon();
  970. // setTimeout(()=>{
  971. // that.setData({
  972. // buyToastShow:true
  973. // });
  974. // },200);
  975. // setTimeout(()=>{
  976. // that.setData({
  977. // buyToastShow:false
  978. // })
  979. // },3200);
  980. if (res.data.activited) {
  981. that.handleActivityTime();
  982. }
  983. if (res.data.userHasCollect == 1) {
  984. that.setData({
  985. collect: true
  986. });
  987. } else {
  988. that.setData({
  989. collect: false
  990. });
  991. }
  992. // WxParse.wxParse('goodsDetail', 'html', res.data.info.detail, that);
  993. //获取推荐商品
  994. //that.getGoodsRelated();
  995. }
  996. });
  997. },
  998. // 获取推荐商品
  999. getGoodsRelated: function() {
  1000. let that = this;
  1001. util.request(api.GoodsRelated, {
  1002. id: that.id,
  1003. shopId: this.addressInfo.shopId
  1004. }).then(function(res) {
  1005. if (res.errno === 0) {
  1006. that.setData({
  1007. relatedGoods: res.data.list
  1008. });
  1009. }
  1010. });
  1011. },
  1012. // 规格选择
  1013. clickSkuValue: function(event) {
  1014. let that = this;
  1015. let specName = event.currentTarget.dataset.name;
  1016. let specValueId = event.currentTarget.dataset.valueId;
  1017. //判断是否可以点击
  1018. //TODO 性能优化,可在wx:for中添加index,可以直接获取点击的属性名和属性值,不用循环
  1019. let _specificationList = this.specificationList;
  1020. for (let i = 0; i < _specificationList.length; i++) {
  1021. if (_specificationList[i].name === specName) {
  1022. for (let j = 0; j < _specificationList[i].valueList.length; j++) {
  1023. if (_specificationList[i].valueList[j].id == specValueId) {
  1024. //如果已经选中,则反选
  1025. if (_specificationList[i].valueList[j].checked) {
  1026. _specificationList[i].valueList[j].checked = false;
  1027. } else {
  1028. _specificationList[i].valueList[j].checked = true;
  1029. }
  1030. } else {
  1031. _specificationList[i].valueList[j].checked = false;
  1032. }
  1033. }
  1034. }
  1035. }
  1036. this.setData({
  1037. specificationList: _specificationList
  1038. });
  1039. //重新计算spec改变后的信息
  1040. this.changeSpecInfo();
  1041. //重新计算哪些值不可以点击
  1042. },
  1043. //获取选中的规格信息
  1044. getCheckedSpecValue: function() {
  1045. let checkedValues = [];
  1046. let _specificationList = this.specificationList;
  1047. for (let i = 0; i < _specificationList.length; i++) {
  1048. let _checkedObj = {
  1049. name: _specificationList[i].name,
  1050. valueId: 0,
  1051. valueText: ''
  1052. };
  1053. for (let j = 0; j < _specificationList[i].valueList.length; j++) {
  1054. if (_specificationList[i].valueList[j].checked) {
  1055. _checkedObj.valueId = _specificationList[i].valueList[j].id;
  1056. _checkedObj.valueText = _specificationList[i].valueList[j].value;
  1057. }
  1058. }
  1059. checkedValues.push(_checkedObj);
  1060. }
  1061. return checkedValues;
  1062. },
  1063. //判断规格是否选择完整
  1064. isCheckedAllSpec: function() {
  1065. return !this.getCheckedSpecValue().some(function(v) {
  1066. if (v.valueId == 0) {
  1067. return true;
  1068. }
  1069. });
  1070. },
  1071. getCheckedSpecKey: function() {
  1072. let checkedValue = this.getCheckedSpecValue().map(function(v) {
  1073. return v.valueText;
  1074. });
  1075. return checkedValue;
  1076. },
  1077. // 规格改变时,重新计算价格及显示信息
  1078. changeSpecInfo: function() {
  1079. let checkedNameValue = this.getCheckedSpecValue();
  1080. //设置选择的信息
  1081. let checkedValue = checkedNameValue
  1082. .filter(function(v) {
  1083. if (v.valueId != 0) {
  1084. return true;
  1085. } else {
  1086. return false;
  1087. }
  1088. })
  1089. .map(function(v) {
  1090. return v.valueText;
  1091. });
  1092. if (checkedValue.length > 0) {
  1093. this.setData({
  1094. tmpSpecText: checkedValue.join(' ')
  1095. });
  1096. } else {
  1097. this.setData({
  1098. tmpSpecText: '请选择规格数量'
  1099. });
  1100. }
  1101. if (this.isCheckedAllSpec()) {
  1102. this.setData({
  1103. checkedSpecText: this.tmpSpecText
  1104. });
  1105. // 规格所对应的货品选择以后
  1106. let checkedProductArray = this.getCheckedProductItem(this.getCheckedSpecKey());
  1107. if (!checkedProductArray || checkedProductArray.length <= 0) {
  1108. this.setData({
  1109. soldout: true
  1110. });
  1111. console.error('规格所对应货品不存在');
  1112. return;
  1113. }
  1114. let checkedProduct = checkedProductArray[0];
  1115. if (checkedProduct.number > 0) {
  1116. this.setData({
  1117. checkedSpecPrice: checkedProduct.price,
  1118. soldout: false
  1119. });
  1120. } else {
  1121. this.setData({
  1122. checkedSpecPrice: this.goods.retailPrice,
  1123. soldout: true
  1124. });
  1125. }
  1126. } else {
  1127. this.setData({
  1128. checkedSpecText: '规格数量选择',
  1129. checkedSpecPrice: this.goods.retailPrice,
  1130. soldout: false
  1131. });
  1132. }
  1133. },
  1134. // 获取选中的产品(根据规格)
  1135. getCheckedProductItem: function(key) {
  1136. return this.productList.filter(function(v) {
  1137. if (v.specifications.toString() == key.toString()) {
  1138. return true;
  1139. } else {
  1140. return false;
  1141. }
  1142. });
  1143. },
  1144. goIM() {
  1145. console.info('goIm');
  1146. uni.navigateTo({
  1147. url: '/pages/chat/im/im'
  1148. });
  1149. util.addLog(1, this.randomAandB ? 9 : 10, 12, {
  1150. goodsId: this.id
  1151. });
  1152. },
  1153. //添加或是取消收藏
  1154. addCollectOrNot: function() {
  1155. let that = this;
  1156. util.request(
  1157. api.CollectAddOrDelete, {
  1158. type: 0,
  1159. valueId: this.id
  1160. },
  1161. 'POST'
  1162. ).then(function(res) {
  1163. if (that.userHasCollect == 1) {
  1164. that.setData({
  1165. collect: false,
  1166. userHasCollect: 0
  1167. });
  1168. } else {
  1169. that.setData({
  1170. collect: true,
  1171. userHasCollect: 1
  1172. });
  1173. }
  1174. });
  1175. },
  1176. //立即购买(先自动加入购物车)
  1177. async addFast() {
  1178. var that = this;
  1179. if (that.goods.productType == 2) { //多规格,先弹窗选规格后
  1180. that.showSkuPopup(1);
  1181. return;
  1182. }
  1183. //如果是买约一体商品 必须授权登录
  1184. // if (that.goods.type != 3 && that.hasLogin == false) {
  1185. // uni.navigateTo({
  1186. // url: '/pages/auth/login/login'
  1187. // });
  1188. // return;
  1189. // }
  1190. util.addLog(1, this.randomAandB ? 9 : 10, 22, {
  1191. goodsId: this.goods.id,
  1192. productId: this.checkedSku.id,
  1193. });
  1194. that.fastOrder();
  1195. },
  1196. async fastOrder() {
  1197. //防止多次提交
  1198. var that = this;
  1199. if (that.isCommiting) {
  1200. return;
  1201. }
  1202. that.setData({
  1203. isCommiting: true
  1204. });
  1205. let boo = await this.checkGoods();
  1206. console.info(boo);
  1207. if (!boo) {
  1208. that.setData({
  1209. isCommiting: false
  1210. });
  1211. return;
  1212. }
  1213. //不用加购物车 直接跳转
  1214. app.globalData.infoGoods = {
  1215. name: that.goods.name,
  1216. brief: that.goods.brief,
  1217. picUrl: that.goods.picUrl,
  1218. type: that.checkedSku.type,
  1219. id: that.goods.id
  1220. };
  1221. //20230523对于买约分离的商品 不用提单页 直接结算
  1222. // 商品类型 0 服务类商品 1保险 2中介 3买约分离次卡
  1223. if (that.checkedSku.type == 3 || that.checkedSku.type == 4) {
  1224. console.info('直接拉起支付');
  1225. that.checkoutInfo();
  1226. return;
  1227. }
  1228. uni.setStorageSync('cartId', 0);
  1229. uni.setStorageSync('goodsId', that.goods.id);
  1230. if (that.checkedSku.type == 0) {
  1231. uni.navigateTo({
  1232. url: '/pages/checkout/checkout?productId=' + this.checkedSku.id +
  1233. '&unitIncreaseNumber=' + this.plusNum
  1234. });
  1235. }
  1236. that.setData({
  1237. isCommiting: false
  1238. });
  1239. },
  1240. async checkGoods() {
  1241. let boo = true;
  1242. let that = this;
  1243. //console.info(code);
  1244. await util
  1245. .request(
  1246. api.OrderCheckGoods, {
  1247. goodsId: this.goods.id,
  1248. openId: this.openId,
  1249. productId: this.checkedSku.id,
  1250. unitIncreaseNumber: this.plusNum
  1251. // bookDetailId:this.data.bookDetail.bookDetailId
  1252. },
  1253. 'GET'
  1254. )
  1255. .then(function(res) {
  1256. console.info(res);
  1257. if (res.data && res.data.user) {
  1258. app.globalData.hasLogin = true;
  1259. app.globalData.userInfo = res.data.user.userInfo;
  1260. uni.setStorageSync('userInfo', res.data.user.userInfo);
  1261. uni.setStorageSync('token', res.data.user.token);
  1262. }
  1263. //弹出框信息
  1264. if (res.errno != 0) {
  1265. boo = false;
  1266. util.showErrorToast(res.errmsg);
  1267. } else if (res.data.code === 1) {
  1268. //存在未付款订单 直接拉起支付
  1269. that.setData({
  1270. actualPrice: res.data.actualPrice
  1271. });
  1272. let goNewPage = res.data.goNewPage;
  1273. that.continueToPay(res.data.orderSn, goNewPage);
  1274. boo = false;
  1275. //that.showMyModel(res.data.msg, that);
  1276. } else if (res.data.code === 2) {
  1277. boo = false;
  1278. //新客初体验商品,每个客户只有1次机会哦~
  1279. if (res.data.goodsId) {
  1280. uni.showModal({
  1281. title: '提醒',
  1282. content: res.data.msg,
  1283. confirmText: '去购买',
  1284. success(ress) {
  1285. if (ress.confirm) {
  1286. uni.navigateTo({
  1287. url: '/pages/goods/goods?id=' + res.data.goodsId
  1288. });
  1289. }
  1290. }
  1291. });
  1292. } else {
  1293. uni.showModal({
  1294. title: '提醒',
  1295. content: res.data.msg,
  1296. confirmText: '确定',
  1297. })
  1298. }
  1299. }
  1300. });
  1301. return boo;
  1302. },
  1303. async getStore() {
  1304. let res = await util.request(api.allStore, {}, 'GET');
  1305. if (res.errno == 0) {
  1306. console.log(res);
  1307. this.setData({
  1308. storeNum: res.data.count
  1309. });
  1310. }
  1311. },
  1312. async getMaxCoupon() {
  1313. if (this.openId) {
  1314. let res = await util.request(
  1315. api.selectMaxCoupon, {
  1316. goodsId: this.goods.id,
  1317. openId: this.openId
  1318. },
  1319. 'GET'
  1320. );
  1321. console.log(res);
  1322. if (res.errno == 0) {
  1323. this.setData({
  1324. couponPrice: res.data.couponPrice,
  1325. couponId: res.data.couponId,
  1326. userCouponId: res.data.userCouponId,
  1327. couponVoList: res.data.couponVoList,
  1328. finallyPrice: Number(this.checkedSku.price - res.data.couponPrice).toFixed(2)
  1329. });
  1330. this.setData({
  1331. totalPrice: this.finallyPrice
  1332. });
  1333. }
  1334. } else {
  1335. await this.getUserOpenId();
  1336. let res = await util.request(
  1337. api.selectMaxCoupon, {
  1338. // productId: this.data.checkedSku.id,
  1339. goodsId: this.goods.id,
  1340. openId: this.openId
  1341. },
  1342. 'GET'
  1343. );
  1344. console.log(res);
  1345. if (res.errno == 0) {
  1346. this.setData({
  1347. couponPrice: res.data.couponPrice,
  1348. couponId: res.data.couponId,
  1349. userCouponId: res.data.userCouponId,
  1350. couponVoList: res.data.couponVoList,
  1351. finallyPrice: Number(this.checkedSku.price - res.data.couponPrice).toFixed(2)
  1352. });
  1353. this.setData({
  1354. totalPrice: this.finallyPrice
  1355. });
  1356. }
  1357. }
  1358. },
  1359. aliSubmit() {
  1360. uni.showLoading({
  1361. title: '加载中'
  1362. });
  1363. util.request(api.OrderSubmit, {
  1364. addressId: 0,
  1365. shopId: 0,
  1366. cart: 0,
  1367. goodsId: this.goods.id,
  1368. couponId: this.couponId,
  1369. userCouponId: this.userCouponId,
  1370. productId: this.checkedSku.id,
  1371. unitIncreaseNumber: this.plusNum,
  1372. openId: this.openId,
  1373. orderDate: {
  1374. type: 0,
  1375. weeks: [],
  1376. },
  1377. }, 'POST')
  1378. .then(res => {
  1379. if (res.errno === 0) {
  1380. this.aliPrepay(res.data.orderId);
  1381. } else {
  1382. uni.showModal({
  1383. title: '提醒',
  1384. showCancel: false,
  1385. content: res.errmsg
  1386. });
  1387. }
  1388. })
  1389. .catch((res) => {
  1390. uni.hideLoading();
  1391. util.showErrorToast(res.errmsg);
  1392. });
  1393. },
  1394. aliPrepay(orderId) {
  1395. uni.showLoading({
  1396. title: '加载中'
  1397. });
  1398. let that = this;
  1399. util.request(api.aliPrepay, {
  1400. orderId: orderId
  1401. }).then(function(res) {
  1402. if (res.errno === 0) {
  1403. //是否跳转新支付结果页面
  1404. let goNewPage = res.data.goNewPage;
  1405. let tradeNo = res.data.payment.tradeNo;
  1406. let outOrderNo = res.data.payment.outTradeNo;
  1407. my.tradePay({
  1408. tradeNO: tradeNo,
  1409. success: (payres) => {
  1410. uni.hideLoading();
  1411. util.addLog(1, that.randomAandB ? 9 : 10, 15, {
  1412. goodsId: that.goods.id,
  1413. productId: that.checkedSku.id
  1414. });
  1415. uni.hideLoading();
  1416. console.log('ali调起支付成功');
  1417. console.log(payres);
  1418. let resultCode = payres.resultCode;
  1419. if (resultCode == '9000') {
  1420. //如果是静默状态未登录 开始授权登录
  1421. if (!app.globalData.hasLogin) {
  1422. user.getLoginInfo(outOrderNo).then((resUser) => {
  1423. if (resUser.errno == 0) {
  1424. app.globalData.hasLogin = true;
  1425. app.globalData.userInfo = resUser.data
  1426. .userInfo;
  1427. uni.setStorageSync('userInfo', resUser.data
  1428. .userInfo);
  1429. uni.setStorageSync('token', resUser.data
  1430. .token);
  1431. }
  1432. });
  1433. }
  1434. if (goNewPage) {
  1435. uni.redirectTo({
  1436. url: '/pages/checkout/payResult/payResultNewa?status=1&outOrderNo=' +
  1437. outOrderNo + '&actualPrice=' + that
  1438. .actualPrice + '&goodsId=' + that.id +
  1439. '&productId=' + that.checkedSku.id
  1440. });
  1441. } else {
  1442. uni.redirectTo({
  1443. url: '/pages/checkout/payResult/payResult?status=1&outOrderNo=' +
  1444. outOrderNo + '&actualPrice=' + that
  1445. .actualPrice + '&goodsId=' + that.id
  1446. });
  1447. }
  1448. } else {
  1449. util.addLog(1, that.randomAandB ? 9 : 10, 14, {
  1450. goodsId: that.goods.id,
  1451. productId: that.checkedSku.id
  1452. });
  1453. uni.showModal({
  1454. title: '提示',
  1455. content: "未支付成功," + payres.memo,
  1456. showCancel: false,
  1457. success: function(modalres) {
  1458. if (modalres.confirm) {
  1459. uni.navigateTo({
  1460. url: '/pages/ucenter/orderDetail/orderDetailPay?id=' +
  1461. outOrderNo
  1462. });
  1463. }
  1464. }
  1465. });
  1466. }
  1467. },
  1468. fail: (failres) => {
  1469. console.log(failres);
  1470. uni.hideLoading();
  1471. }
  1472. });
  1473. } else {
  1474. uni.hideLoading();
  1475. uni.showModal({
  1476. title: '提醒',
  1477. showCancel: false,
  1478. content: res.errmsg
  1479. });
  1480. }
  1481. })
  1482. .catch((res) => {
  1483. uni.hideLoading();
  1484. util.showErrorToast(res.errmsg);
  1485. });
  1486. },
  1487. orderPrepay() {
  1488. console.log("支付开始");
  1489. let that = this;
  1490. util.request(api.OrderPrepay, {
  1491. addressId: 0,
  1492. shopId: 0,
  1493. cart: 0,
  1494. goodsId: that.goods.id,
  1495. couponId: that.couponId,
  1496. userCouponId: that.userCouponId,
  1497. productId: that.checkedSku.id,
  1498. unitIncreaseNumber: that.plusNum,
  1499. openId: that.openId
  1500. })
  1501. .then(function(res) {
  1502. if (res.errno === 0) {
  1503. //是否跳转新支付结果页面
  1504. let goNewPage = res.data.goNewPage;
  1505. var callbackData = {
  1506. cartId: null,
  1507. addressId: 0,
  1508. couponId: that.couponId,
  1509. userCouponId: that.userCouponId,
  1510. orderDate: {
  1511. goodId:res.data.jzGoodsId,
  1512. productId:res.data.jzProductId
  1513. // goodId: that.goods.id,
  1514. // productId: that.checkedSku.id
  1515. // bookDetailId:that.data.serviceId,
  1516. // originalOrderId:that.data.bookDetail.originalOrderId,
  1517. // unitIncreaseNumber:that.data.plusNum
  1518. },
  1519. phone_num: that.mobile,
  1520. userId: that.userInfo ? that.userInfo.id : '',
  1521. unitIncreaseNumber: that.plusNum,
  1522. talentId: that.talentId,
  1523. qid: that.qid
  1524. };
  1525. uni.showLoading({
  1526. title: '加载中'
  1527. });
  1528. console.log("callbackData11", callbackData);
  1529. uni.createOrder({
  1530. tenantId: res.data.tenantId,
  1531. skuList: res.data.skuList,
  1532. payment: res.data.payment,
  1533. callbackData: callbackData,
  1534. callbackUrl: res.data.callbackUrl,
  1535. success: (res) => {
  1536. util.addLog(1, that.randomAandB ? 9 : 10, 15, {
  1537. goodsId: that.goods.id,
  1538. productId: that.checkedSku.id
  1539. });
  1540. uni.hideLoading();
  1541. console.log('预下单成功11');
  1542. console.log(res);
  1543. const {
  1544. orderId,
  1545. outOrderNo
  1546. } = res;
  1547. console.log('success res', res, 'orderId', orderId, 'outOrderNo',
  1548. outOrderNo);
  1549. //如果是静默状态未登录 开始授权登录
  1550. if (!app.globalData.hasLogin) {
  1551. user.getLoginInfo(outOrderNo).then((resUser) => {
  1552. if (resUser.errno == 0) {
  1553. app.globalData.hasLogin = true;
  1554. app.globalData.userInfo = resUser.data.userInfo;
  1555. uni.setStorageSync('userInfo', resUser.data
  1556. .userInfo);
  1557. uni.setStorageSync('token', resUser.data.token);
  1558. }
  1559. });
  1560. }
  1561. if (goNewPage) {
  1562. uni.redirectTo({
  1563. url: '/pages/checkout/payResult/payResultNewa?status=1&outOrderNo=' +
  1564. outOrderNo + '&actualPrice=' + that.actualPrice +
  1565. '&goodsId=' + that.id + '&productId=' + that
  1566. .checkedSku.id
  1567. });
  1568. } else {
  1569. uni.redirectTo({
  1570. url: '/pages/checkout/payResult/payResult?status=1&outOrderNo=' +
  1571. outOrderNo + '&actualPrice=' + that.actualPrice +
  1572. '&goodsId=' + that.id
  1573. });
  1574. }
  1575. },
  1576. fail: (res) => {
  1577. util.addLog(1, that.randomAandB ? 9 : 10, 14, {
  1578. goodsId: that.goods.id,
  1579. productId: that.checkedSku.id
  1580. });
  1581. uni.hideLoading();
  1582. console.log('预下单失败11');
  1583. console.log(res);
  1584. const {
  1585. orderId,
  1586. outOrderNo,
  1587. errNo,
  1588. errMsg,
  1589. errLogId
  1590. } = res;
  1591. if (errLogId) {
  1592. console.log('预下单失败', errNo, errMsg, errLogId);
  1593. let tomsg = errMsg;
  1594. if (tomsg.indexOf('createOrder') != -1) {
  1595. tomsg = tomsg.replace('createOrder:fail 开发者限购:', '');
  1596. tomsg = tomsg.replace('createOrder:fail 开发者拒绝交易:', '');
  1597. tomsg = tomsg.replace('createOrder:fail', '');
  1598. }
  1599. uni.showModal({
  1600. title: '提示',
  1601. content: tomsg,
  1602. showCancel: false
  1603. });
  1604. }
  1605. if (orderId || outOrderNo) {
  1606. uni.navigateTo({
  1607. url: '/pages/ucenter/orderDetail/orderDetailPay?id=' +
  1608. outOrderNo
  1609. });
  1610. console.log('支付失败', errNo, errMsg, orderId, outOrderNo);
  1611. // that.setData({
  1612. // payFailShow: true
  1613. // });
  1614. }
  1615. console.log(errNo, errMsg);
  1616. }
  1617. });
  1618. } else {
  1619. uni.showModal({
  1620. title: '提醒',
  1621. showCancel: false,
  1622. content: res.errmsg
  1623. });
  1624. }
  1625. })
  1626. .catch((res) => {
  1627. uni.hideLoading();
  1628. util.showErrorToast(res.errmsg);
  1629. });
  1630. },
  1631. checkoutInfo() {
  1632. let that = this;
  1633. util.request(api.CartCheckout, {
  1634. cartId: 0,
  1635. addressId: 0,
  1636. couponId: that.couponId,
  1637. userCouponId: that.userCouponId,
  1638. goodsId: that.goods.id,
  1639. openId: that.openId,
  1640. productId: this.checkedSku.id,
  1641. unitIncreaseNumber: this.plusNum,
  1642. qid: that.qid
  1643. }).then(function(res) {
  1644. if (res.errno === 0) {
  1645. console.info(res);
  1646. that.setData({
  1647. checkedAddress: res.data.checkedAddress,
  1648. actualPrice: res.data.actualPrice,
  1649. couponPrice: res.data.couponPrice,
  1650. addressId: res.data.addressId,
  1651. couponId: res.data.couponId,
  1652. userCouponId: res.data.userCouponId,
  1653. mobile: res.data.mobile
  1654. });
  1655. //提交订单
  1656. that.submitOrder();
  1657. that.setData({
  1658. isCommiting: false
  1659. });
  1660. } else {
  1661. uni.showModal({
  1662. title: '提示',
  1663. content: res.errmsg,
  1664. showCancel: false
  1665. });
  1666. }
  1667. });
  1668. },
  1669. submitOrder() {
  1670. util.addLog(1, this.randomAandB ? 9 : 10, 13, {
  1671. goodsId: this.goods.id,
  1672. productId: this.checkedSku.id
  1673. });
  1674. // #ifdef MP-TOUTIAO
  1675. this.orderPrepay();
  1676. // #endif
  1677. // #ifdef MP-ALIPAY
  1678. this.aliSubmit();
  1679. // #endif
  1680. },
  1681. continueToPay(outOrderNo, goNewPage) {
  1682. //已有订单重复提交
  1683. let that = this;
  1684. uni.continueToPay({
  1685. outOrderNo: outOrderNo,
  1686. // 外部订单号 2个订单号必填一个
  1687. success: (res) => {
  1688. console.log(res);
  1689. const {
  1690. orderId,
  1691. outOrderNo
  1692. } = res;
  1693. console.log('success res', res);
  1694. console.log('orderId', orderId, 'outOrderNo', outOrderNo);
  1695. if (goNewPage) {
  1696. uni.redirectTo({
  1697. url: '/pages/checkout/payResult/payResultNewa?status=1&outOrderNo=' +
  1698. outOrderNo + '&actualPrice=' + that.actualPrice + '&goodsId=' +
  1699. that.id + '&productId=' + that.checkedSku.id
  1700. });
  1701. } else {
  1702. uni.redirectTo({
  1703. url: '/pages/checkout/payResult/payResult?status=1&outOrderNo=' +
  1704. outOrderNo + '&actualPrice=' + that.actualPrice + '&goodsId=' +
  1705. that.id
  1706. });
  1707. }
  1708. // uni.redirectTo({
  1709. // url: '/pages/checkout/payResult/payResult?status=1&outOrderNo=' + outOrderNo + '&actualPrice=' + that.actualPrice
  1710. // });
  1711. },
  1712. fail: (res) => {
  1713. console.log(res);
  1714. const {
  1715. orderId,
  1716. outOrderNo,
  1717. errNo,
  1718. errMsg,
  1719. errLogId
  1720. } = res;
  1721. if (errLogId) {
  1722. console.log('查询订单信息失败', errNo, errMsg, errLogId);
  1723. }
  1724. if (orderId || outOrderNo) {
  1725. console.log('支付失败', errNo, errMsg, orderId, outOrderNo);
  1726. console.log('订单号' + outOrderNo);
  1727. uni.navigateTo({
  1728. url: '/pages/ucenter/orderDetail/orderDetailPay?id=' + outOrderNo
  1729. });
  1730. }
  1731. // util.showErrorToast('放弃支付');
  1732. }
  1733. });
  1734. },
  1735. async getUserOpenId() {
  1736. let that = this;
  1737. let res = await user.userOpenId();
  1738. console.log(res);
  1739. that.setData({
  1740. openId: res.data
  1741. });
  1742. console.info(res);
  1743. uni.setStorageSync('openId', res.data);
  1744. },
  1745. gofastAddCart() {
  1746. var that = this;
  1747. //提示选择完整规格
  1748. // if (!this.isCheckedAllSpec()) {
  1749. // util.showErrorToast('请选择完整规格');
  1750. // return false;
  1751. // }
  1752. //根据选中的规格,判断是否有对应的sku信息
  1753. // let checkedProductArray = this.getCheckedProductItem(this.getCheckedSpecKey());
  1754. // if (!checkedProductArray || checkedProductArray.length <= 0) {
  1755. // //找不到对应的product信息,提示没有库存
  1756. // util.showErrorToast('没有库存');
  1757. // return false;
  1758. // }
  1759. // let checkedProduct = checkedProductArray[0];
  1760. // //验证库存
  1761. // if (checkedProduct.number <= 0) {
  1762. // util.showErrorToast('没有库存');
  1763. // return false;
  1764. // }
  1765. //立即购买
  1766. // util.request(api.CartFastAdd, {
  1767. // goodsId: this.data.goods.id,
  1768. // number: this.data.number,
  1769. // productId: checkedProduct.id,
  1770. // shareId: this.data.shareId
  1771. // }, "POST").then(res => {
  1772. // if (res.errno == 0) {
  1773. // 如果storage中设置了cartId,则是立即购买,否则是购物车购买
  1774. try {
  1775. // wx.setStorageSync('cartId', res.data);
  1776. // wx.setStorageSync('grouponRulesId', checkedGroupon.id);
  1777. // wx.setStorageSync('grouponLinkId', that.data.grouponLink.id);
  1778. // 支付结果页面展示图片用
  1779. app.globalData.infoGoods = {
  1780. name: this.goods.name,
  1781. brief: this.goods.brief,
  1782. picUrl: this.goods.picUrl,
  1783. type: that.checkedSku.type,
  1784. };
  1785. uni.setStorageSync('cartId', 0);
  1786. uni.setStorageSync('goodsId', this.goods.id);
  1787. console.info(that.shareId);
  1788. if (that.shareId > 0) {
  1789. uni.navigateTo({
  1790. url: '/pages/checkout/checkout?shareId=' + that.shareId
  1791. });
  1792. } else {
  1793. uni.navigateTo({
  1794. url: '/pages/checkout/checkout'
  1795. });
  1796. }
  1797. } catch (e) {
  1798. console.log('CatchClause', e);
  1799. console.log('CatchClause', e);
  1800. console.info(e);
  1801. }
  1802. // } else {
  1803. // util.showErrorToast(res.errmsg);
  1804. // }
  1805. // });
  1806. },
  1807. getdefalutUserAddress() {
  1808. //登陆拿用户默认地址,如果没有就拿系统默认地址
  1809. //如果有默认地址,但是不在门店服务区域里
  1810. util.request(api.OrderBookDefaultAddress, {}, 'get').then((res) => {
  1811. if (res.errno === 0) {
  1812. let address = res.data;
  1813. var city = address.city.indexOf('市辖') != -1 ? address.province : address.city;
  1814. //通过jz_shop的shop_no关联服务力分配的门店id,拿实际的jz_shop的门店id
  1815. var addresInfo = {
  1816. city: city,
  1817. lng: address.lng,
  1818. lat: address.lat,
  1819. shopId: address.shopId,
  1820. address: address.addressDetail,
  1821. shopName: address.shopName
  1822. };
  1823. uni.setStorageSync('addressInfo', addresInfo);
  1824. } else {
  1825. //无默认地址时 拿系统的
  1826. this.getdefaultCityShop();
  1827. }
  1828. });
  1829. },
  1830. getdefaultCityShop() {
  1831. let that = this;
  1832. util.request(api.getDefaultCityShop, {}, 'get').then((res) => {
  1833. if (res.errno === 0) {
  1834. uni.setStorageSync('addressInfo', res.data);
  1835. }
  1836. });
  1837. },
  1838. showMyModel(msg, that) {
  1839. uni.showModal({
  1840. title: '',
  1841. content: msg,
  1842. confirmText: '去处理',
  1843. cancelText: '取消',
  1844. success: function(res) {
  1845. //此商品有个未支付的订单,请到订单页去支付或取消重新下单。
  1846. //去处理:跳转订单页
  1847. if (res.confirm) {
  1848. try {
  1849. uni.setStorageSync('tab', 1);
  1850. } catch (e) {
  1851. console.log('CatchClause', e);
  1852. console.log('CatchClause', e);
  1853. }
  1854. uni.navigateTo({
  1855. url: '/pages/ucenter/order/order',
  1856. success: function(res) {},
  1857. fail: function(res) {},
  1858. complete: function(res) {}
  1859. });
  1860. } else {
  1861. that.gofastAddCart();
  1862. }
  1863. }
  1864. });
  1865. },
  1866. //添加到购物车
  1867. addToCart: function() {
  1868. var that = this;
  1869. if (this.openAttr == false) {
  1870. //打开规格选择窗口
  1871. this.setData({
  1872. openAttr: !this.openAttr
  1873. });
  1874. } else {
  1875. //提示选择完整规格
  1876. if (!this.isCheckedAllSpec()) {
  1877. util.showErrorToast('请选择完整规格');
  1878. return false;
  1879. }
  1880. //根据选中的规格,判断是否有对应的sku信息
  1881. let checkedProductArray = this.getCheckedProductItem(this.getCheckedSpecKey());
  1882. if (!checkedProductArray || checkedProductArray.length <= 0) {
  1883. //找不到对应的product信息,提示没有库存
  1884. util.showErrorToast('没有库存');
  1885. return false;
  1886. }
  1887. let checkedProduct = checkedProductArray[0];
  1888. //验证库存
  1889. if (checkedProduct.number <= 0) {
  1890. util.showErrorToast('没有库存');
  1891. return false;
  1892. }
  1893. //添加到购物车
  1894. util.request(
  1895. api.CartAdd, {
  1896. goodsId: this.goods.id,
  1897. number: this.number,
  1898. productId: checkedProduct.id
  1899. },
  1900. 'POST'
  1901. ).then(function(res) {
  1902. let _res = res;
  1903. if (_res.errno == 0) {
  1904. uni.showToast({
  1905. title: '添加成功'
  1906. });
  1907. that.setData({
  1908. openAttr: !that.openAttr,
  1909. cartGoodsCount: _res.data
  1910. });
  1911. //显示tab购物车缓存
  1912. //user.cartadd(that.data.number);
  1913. if (that.userHasCollect == 1) {
  1914. that.setData({
  1915. collect: true
  1916. });
  1917. } else {
  1918. that.setData({
  1919. collect: false
  1920. });
  1921. }
  1922. } else {
  1923. util.showErrorToast(_res.errmsg);
  1924. }
  1925. });
  1926. }
  1927. },
  1928. cutNumber: function() {
  1929. this.setData({
  1930. number: this.number - 1 > 1 ? this.number - 1 : 1
  1931. });
  1932. },
  1933. addNumber: function() {
  1934. // 如果是安心包只能购买一个
  1935. console.log(this.goods);
  1936. if (this.goods.goodsSn == '1036016') {
  1937. uni.showToast({
  1938. title: '此款商品只能购买一个',
  1939. icon: 'none',
  1940. duration: 2000
  1941. });
  1942. } else {
  1943. this.setData({
  1944. number: this.number + 1
  1945. });
  1946. }
  1947. },
  1948. switchAttrPop: function() {
  1949. if (this.openAttr == false) {
  1950. this.setData({
  1951. openAttr: !this.openAttr
  1952. });
  1953. }
  1954. },
  1955. closeAttr: function() {
  1956. this.setData({
  1957. openAttr: false
  1958. });
  1959. },
  1960. closeShare: function() {
  1961. this.setData({
  1962. openShare: false
  1963. });
  1964. },
  1965. openCartPage: function() {
  1966. uni.switchTab({
  1967. url: '/pages/tabBar/cart/cart'
  1968. });
  1969. },
  1970. qrtouchstart: function() {
  1971. this.setData({
  1972. myqr_blur: 100,
  1973. myqr_show: false
  1974. });
  1975. },
  1976. copyToHM() {
  1977. let copyLink = this.goods.copyLink;
  1978. console.log(copyLink);
  1979. if (copyLink != undefined && copyLink != '') {
  1980. uni.setClipboardData({
  1981. data: copyLink,
  1982. success(res) {
  1983. uni.getClipboardData({
  1984. success(res) {
  1985. console.log(res.data); // data
  1986. }
  1987. });
  1988. }
  1989. });
  1990. } else {
  1991. uni.showToast({
  1992. title: '该商品暂未配置盒马链接',
  1993. icon: 'none'
  1994. });
  1995. }
  1996. },
  1997. onSelfPayChange(e) {
  1998. console.log(e);
  1999. this.setData({
  2000. selfPayChecked: e.detail
  2001. });
  2002. },
  2003. onSpreadPayChange(e) {
  2004. console.log(e);
  2005. this.setData({
  2006. spreadPayChecked: e.detail
  2007. });
  2008. },
  2009. cancelSelfPay() {
  2010. let selfPayChecked = this.selfPayChecked;
  2011. if (selfPayChecked == true) {
  2012. uni.setStorageSync('selfPayChecked', true);
  2013. }
  2014. this.setData({
  2015. selfPayShow: false
  2016. });
  2017. },
  2018. cancelSpreadPay() {
  2019. let spreadPayChecked = this.spreadPayChecked;
  2020. if (spreadPayChecked == true) {
  2021. uni.setStorageSync('spreadPayChecked', true);
  2022. }
  2023. this.setData({
  2024. spreadPayShow: false
  2025. });
  2026. },
  2027. goSelfPay() {
  2028. let selfPayChecked = uni.getStorageSync('selfPayChecked');
  2029. if (selfPayChecked != true) {
  2030. this.setData({
  2031. selfPayShow: true
  2032. });
  2033. } else {
  2034. this.addFast();
  2035. }
  2036. },
  2037. goSpread() {
  2038. let spreadPayChecked = uni.getStorageSync('spreadPayChecked');
  2039. console.log(spreadPayChecked);
  2040. if (spreadPayChecked != true) {
  2041. this.setData({
  2042. spreadPayShow: true
  2043. });
  2044. } else {
  2045. this.createPoster();
  2046. }
  2047. },
  2048. posterCopy() {
  2049. let that = this;
  2050. uni.setClipboardData({
  2051. data: that.myqr_ads,
  2052. success: function(res) {
  2053. uni.getClipboardData({
  2054. success: function(res) {
  2055. uni.showToast({
  2056. title: '文案复制成功',
  2057. icon: 'success',
  2058. duration: 2000
  2059. });
  2060. // that.hidePoster();
  2061. }
  2062. });
  2063. }
  2064. });
  2065. },
  2066. hidePoster() {
  2067. this.setData({
  2068. myqr_show: false,
  2069. myqr_blur: 100,
  2070. myqr_bottom_btn: 'fixed'
  2071. });
  2072. },
  2073. createPoster() {
  2074. uni.showLoading({
  2075. title: '生成中'
  2076. });
  2077. uni.pageScrollTo({
  2078. scrollTop: 0
  2079. });
  2080. if (this.myqr_url != null) {
  2081. uni.hideLoading();
  2082. this.setData({
  2083. myqr_show: true,
  2084. myqr_blur: 25,
  2085. myqr_bottom_btn: 'unset'
  2086. });
  2087. return;
  2088. }
  2089. util.request(
  2090. api.QrGoodsCodeCreate, {
  2091. goods_id: this.goods.id
  2092. },
  2093. 'POST'
  2094. ).then((res) => {
  2095. uni.hideLoading();
  2096. if (res.errno == 0) {
  2097. this.setData({
  2098. myqr_url: res.data.imgUrl,
  2099. myqr_ads: res.data.ads,
  2100. myqr_show: true,
  2101. myqr_blur: 25,
  2102. myqr_bottom_btn: 'unset'
  2103. });
  2104. } else {
  2105. util.showErrorToast('未设置分享图');
  2106. }
  2107. });
  2108. },
  2109. goSaveQrcode: function() {
  2110. //保存二维码图片
  2111. let that = this;
  2112. console.info(that.myqr_url);
  2113. uni.downloadFile({
  2114. url: that.myqr_url,
  2115. success: function(res) {
  2116. if (res.statusCode === 200) {
  2117. let img = res.tempFilePath;
  2118. uni.saveImageToPhotosAlbum({
  2119. filePath: img,
  2120. success(res) {
  2121. that.goCloseMyqr('个人专属二维码图片已保存到您的相册');
  2122. },
  2123. fail(res) {
  2124. that.goCloseMyqr('网络或授权问题 图片保存失败 请重试');
  2125. }
  2126. });
  2127. } else {
  2128. that.goCloseMyqr('网络或授权问题 图片保存失败 请重试');
  2129. }
  2130. },
  2131. fail(res) {
  2132. that.goCloseMyqr('网络或授权问题 图片保存失败 请重试');
  2133. }
  2134. });
  2135. },
  2136. goCloseMyqr: function(msg) {
  2137. //关闭分享图片的弹层
  2138. this.hidePoster();
  2139. if (msg) {
  2140. uni.showToast({
  2141. title: msg,
  2142. icon: 'none',
  2143. duration: 3000
  2144. });
  2145. }
  2146. },
  2147. reSelfPay() {
  2148. let selfPayChecked = this.selfPayChecked;
  2149. if (selfPayChecked == true) {
  2150. uni.setStorageSync('selfPayChecked', true);
  2151. }
  2152. this.setData({
  2153. selfPayShow: false
  2154. });
  2155. this.addFast();
  2156. },
  2157. reSpread() {
  2158. this.setData({
  2159. spreadPayShow: false
  2160. });
  2161. this.createPoster();
  2162. },
  2163. goMemberCenter() {
  2164. if (!app.globalData.hasLogin) {
  2165. uni.navigateTo({
  2166. url: '/pages/auth/login/login'
  2167. });
  2168. return;
  2169. } else {
  2170. uni.navigateTo({
  2171. url: '/pages/member/memberCenter/memberCenter'
  2172. });
  2173. }
  2174. },
  2175. bindGoodsNumInput(e) {
  2176. console.log(e.detail.value);
  2177. let max = this.productList[0].unitMaximum;
  2178. let plusNum = parseInt(e.detail.value == '' ? 0 : e.detail.value);
  2179. if (plusNum > max) {
  2180. plusNum = max;
  2181. }
  2182. let addPurchaseAmount = this.checkedSku.unitPrice * plusNum;
  2183. this.setData({
  2184. plusNum: plusNum,
  2185. addPurchaseAmount: addPurchaseAmount,
  2186. totalPrice: Number(this.checkedSku.price + addPurchaseAmount - this.couponPrice).toFixed(2)
  2187. });
  2188. },
  2189. minusNum() {
  2190. if (this.plusNum == this.minNum) {
  2191. return false;
  2192. } else {
  2193. let result = Number(this.plusNum) - 1;
  2194. let addPurchaseAmount = this.checkedSku.unitPrice * result;
  2195. console.log(this.checkedSku.price * this.plusNum);
  2196. console.log(this.checkedSku.price * this.plusNum - this.couponPrice);
  2197. // 补差类
  2198. this.setData({
  2199. plusNum: result,
  2200. addPurchaseAmount: addPurchaseAmount,
  2201. totalPrice: Number(this.checkedSku.price + addPurchaseAmount - this.couponPrice).toFixed(2)
  2202. });
  2203. // }
  2204. }
  2205. },
  2206. addNum() {
  2207. if (this.productList[0].unitMaximum && this.plusNum >= this.productList[0].unitMaximum) {
  2208. return false;
  2209. } else {
  2210. let result = Number(this.plusNum) + 1;
  2211. let addPurchaseAmount = this.checkedSku.unitPrice * result;
  2212. console.log(this.checkedSku.price * this.plusNum);
  2213. console.log(this.checkedSku.price * this.plusNum - this.couponPrice);
  2214. // 补差类
  2215. this.setData({
  2216. plusNum: result,
  2217. addPurchaseAmount: addPurchaseAmount,
  2218. totalPrice: Number(this.checkedSku.price + addPurchaseAmount - this.couponPrice).toFixed(2)
  2219. });
  2220. // }
  2221. }
  2222. },
  2223. goWholeEval() {
  2224. uni.navigateTo({
  2225. url: '/pages/goods/wholeEvaluation/wholeEvaluation?id=' + this.id
  2226. });
  2227. },
  2228. onSkuClose() {
  2229. this.setData({
  2230. chooseSkuVisible: false
  2231. });
  2232. },
  2233. showSkuPopup(type) {
  2234. this.setData({
  2235. showType: type,
  2236. chooseSkuVisible: true,
  2237. currentSku: this.checkedSku,
  2238. activeSku: this.checkedSku.id
  2239. });
  2240. util.addLog(1, 10, 25)
  2241. },
  2242. selectSku(e) {
  2243. let id = e.currentTarget.dataset.id;
  2244. let index = e.currentTarget.dataset.index;
  2245. this.setData({
  2246. activeSku: id,
  2247. currentSku: this.productList[index],
  2248. // checkedSku: this.productList[index]
  2249. });
  2250. util.addLog(1, this.randomAandB ? 9 : 10, 11, {
  2251. goodsId: this.goods.id,
  2252. productId: this.checkedSku.id
  2253. });
  2254. console.log("selectSku", id);
  2255. },
  2256. confSku() {
  2257. this.setData({
  2258. checkedSku: this.currentSku,
  2259. chooseSkuVisible: false
  2260. });
  2261. this.setData({
  2262. finallyPrice: Number(this.checkedSku.price - this.couponPrice).toFixed(2)
  2263. });
  2264. this.setData({
  2265. totalPrice: Number(this.checkedSku.price - this.couponPrice).toFixed(2)
  2266. });
  2267. util.addLog(1, this.randomAandB ? 9 : 10, 23, {
  2268. goodsId: this.goods.id,
  2269. productId: this.checkedSku.id
  2270. });
  2271. if (this.showType == 1) {
  2272. this.fastOrder();
  2273. }
  2274. },
  2275. stopClick() {}
  2276. }
  2277. };
  2278. </script>
  2279. <style>
  2280. .sku-select {
  2281. overflow: hidden;
  2282. width: 100%;
  2283. padding-left: 24rpx;
  2284. margin-bottom: 10rpx;
  2285. }
  2286. .scroll-view_H {
  2287. white-space: nowrap;
  2288. /* 确保子元素在同一行内显示 */
  2289. overflow-x: scroll;
  2290. /* 允许横向滚动 */
  2291. }
  2292. .sku-select-item {
  2293. width: 226rpx;
  2294. height: 70rpx;
  2295. background: #FFFFFF;
  2296. border-radius: 16rpx;
  2297. border: 2rpx solid #dddddd;
  2298. display: inline-block;
  2299. margin-right: 10rpx;
  2300. padding: 6rpx 10rpx;
  2301. }
  2302. .sku-select-item-active {
  2303. width: 226rpx;
  2304. height: 70rpx;
  2305. background: #FFFFFF;
  2306. border-radius: 16rpx;
  2307. border: 2rpx solid #FE2C58;
  2308. display: inline-block;
  2309. margin-right: 10rpx;
  2310. padding: 6rpx 10rpx;
  2311. }
  2312. .sku-select-item .product-name {
  2313. font-size: 18rpx;
  2314. height: 26rpx;
  2315. line-height: 26rpx;
  2316. width: 198rpx;
  2317. overflow: hidden;
  2318. white-space: nowrap;
  2319. /* 不允许文本换行 */
  2320. text-overflow: ellipsis;
  2321. }
  2322. .sku-select-item .product-price .current-price {
  2323. color: #FE2C58;
  2324. width: 60rpx;
  2325. display: inline-block;
  2326. font-size: 22rpx;
  2327. font-weight: bold;
  2328. }
  2329. .sku-select-item .product-price .original-price {
  2330. font-size: 14rpx;
  2331. text-decoration-line: line-through;
  2332. color: #c1c1c1;
  2333. }
  2334. .myqr {
  2335. position: absolute;
  2336. z-index: 999;
  2337. width: 100%;
  2338. text-align: center;
  2339. height: auto;
  2340. margin-top: 50rpx;
  2341. }
  2342. .myqr .cancel {
  2343. width: 60rpx;
  2344. height: 60rpx;
  2345. margin-top: 30rpx;
  2346. margin-left: 480rpx;
  2347. }
  2348. .myqr .img {
  2349. width: 480rpx;
  2350. }
  2351. .myqr .btn {
  2352. width: 120rpx;
  2353. height: 120rpx;
  2354. line-height: 120rpx;
  2355. margin-top: 20rpx;
  2356. padding: 30rpx;
  2357. background: #ffffff;
  2358. border-radius: 60rpx;
  2359. }
  2360. page {
  2361. background: #f3f3f3;
  2362. }
  2363. .container {
  2364. /* padding-bottom: 40rpx; */
  2365. position: relative;
  2366. /* margin-bottom: 100rpx; */
  2367. /* background-color: #fff; */
  2368. }
  2369. .user_column_item_image {
  2370. width: 50rpx;
  2371. height: 50rpx;
  2372. margin-right: 26rpx;
  2373. margin-top: 25rpx;
  2374. }
  2375. .flexb {
  2376. width: 750rpx;
  2377. height: 88rpx;
  2378. line-height: 103rpx;
  2379. padding-right: 31.25rpx;
  2380. border-bottom: 1px solid #f4f4f4;
  2381. font-size: 30rpx;
  2382. color: #333;
  2383. background: #fff;
  2384. display: flex;
  2385. flex-wrap: nowrap;
  2386. }
  2387. .flex {
  2388. flex-grow: 1;
  2389. text-align: center;
  2390. }
  2391. .show {
  2392. width: 750rpx;
  2393. height: 88rpx;
  2394. background: #fff;
  2395. border-bottom: 1px solid #f4f4f4;
  2396. }
  2397. .show .t {
  2398. float: left;
  2399. width: 600rpx;
  2400. height: 88rpx;
  2401. line-height: 88rpx;
  2402. font-size: 29rpx;
  2403. color: #333;
  2404. margin-left: 31.25rpx;
  2405. }
  2406. .show .t .s {
  2407. font-weight: 600;
  2408. }
  2409. .show .i {
  2410. float: right;
  2411. width: 52rpx;
  2412. height: 52rpx;
  2413. margin-right: 16rpx;
  2414. margin-top: 28rpx;
  2415. }
  2416. .mark-img {
  2417. width: 168rpx;
  2418. height: 68rpx;
  2419. right: 5rpx;
  2420. position: absolute;
  2421. top: 5rpx;
  2422. }
  2423. .goodsimgs {
  2424. width: 750rpx;
  2425. /* height: 492rpx; */
  2426. height: 490rpx;
  2427. }
  2428. .goodsimgs image {
  2429. width: 750rpx;
  2430. /* height: 326rpx; */
  2431. height: 490rpx;
  2432. }
  2433. swiper {
  2434. bottom: 10rpx;
  2435. }
  2436. .commodity_screen {
  2437. width: 100%;
  2438. height: 100%;
  2439. position: fixed;
  2440. top: 0;
  2441. left: 0;
  2442. background: #000;
  2443. opacity: 0.2;
  2444. overflow: hidden;
  2445. z-index: 1000;
  2446. color: #fff;
  2447. }
  2448. .commodity_attr_box {
  2449. width: 100%;
  2450. overflow: hidden;
  2451. position: fixed;
  2452. bottom: 0;
  2453. left: 0;
  2454. z-index: 2000;
  2455. background: #fff;
  2456. padding-top: 20rpx;
  2457. }
  2458. /* 活动样式 */
  2459. .activity {
  2460. width: 750rpx;
  2461. height: 145rpx;
  2462. background: linear-gradient(67deg, #4f43dd, #689cf2, #ba64e2);
  2463. display: flex;
  2464. flex-direction: column;
  2465. padding: 20rpx 30rpx;
  2466. }
  2467. .activity .img {
  2468. background-image: url('https://7a68-zhaijieshi-3guecm78383ca692-1307626841.tcb.qcloud.la/activity/activity.png');
  2469. width: 139rpx;
  2470. height: 32rpx;
  2471. background-size: 100% 100%;
  2472. color: #5244dd;
  2473. font-size: 23rpx;
  2474. text-align: center;
  2475. }
  2476. .activityDay {
  2477. line-height: 42rpx;
  2478. margin-right: 30rpx;
  2479. display: flex;
  2480. height: 42rpx;
  2481. }
  2482. .activityDay image {
  2483. width: 42rpx;
  2484. height: 42rpx;
  2485. margin-right: 10rpx;
  2486. }
  2487. .activityDay text {
  2488. font-size: 24rpx;
  2489. color: #f4f4f4;
  2490. }
  2491. .activityPrice {
  2492. color: #ffffff;
  2493. }
  2494. .activityPrice text {
  2495. font-size: 49rpx;
  2496. font-weight: bold;
  2497. }
  2498. .activityCounterPrice {
  2499. color: #c7c7c7;
  2500. text-decoration: line-through;
  2501. font-size: 24rpx;
  2502. margin-top: 20rpx;
  2503. margin-left: 10rpx;
  2504. }
  2505. .activityTime {
  2506. display: flex;
  2507. flex-direction: row;
  2508. margin-right: 50rpx;
  2509. }
  2510. .activityTime text {
  2511. color: #ffffff;
  2512. line-height: 45rpx;
  2513. }
  2514. .activityTime view {
  2515. width: 45rpx;
  2516. height: 45rpx;
  2517. background: #ffffff;
  2518. border-radius: 5rpx;
  2519. margin: 5rpx;
  2520. line-height: 45rpx;
  2521. text-align: center;
  2522. font-size: 25rpx;
  2523. font-weight: bold;
  2524. color: #b563e1;
  2525. }
  2526. .activityTime .mark {}
  2527. .goods-info {
  2528. width: 750rpx;
  2529. /*height: 306rpx;*/
  2530. overflow: hidden;
  2531. background: #fff;
  2532. border-bottom: 1px solid #f4f4f4;
  2533. }
  2534. .goods-info .c {
  2535. display: block;
  2536. width: 718.75rpx;
  2537. height: 182rpx;
  2538. margin-left: 31.25rpx;
  2539. padding: 3rpx 31.25rpx 20rpx 0;
  2540. }
  2541. .goods-info .c text {
  2542. /* display: block;
  2543. width: 687.5rpx;
  2544. text-align: left; */
  2545. }
  2546. .goods_name {
  2547. white-space: nowrap;
  2548. text-overflow: ellipsis;
  2549. overflow: hidden;
  2550. margin-top: 10rpx;
  2551. display: flex;
  2552. align-items: center;
  2553. }
  2554. .goods_name_left {
  2555. font-weight: 550;
  2556. margin-left: 0rpx;
  2557. font-size: 36rpx;
  2558. letter-spacing: 1rpx;
  2559. color: #2a2a2a;
  2560. font-weight: bold;
  2561. width: 688rpx;
  2562. white-space: pre-wrap;
  2563. }
  2564. .goods_name_right {
  2565. font-weight: 550;
  2566. /* top: 375px; */
  2567. width: 80rpx;
  2568. height: 80rpx;
  2569. line-height: 82rpx;
  2570. /* padding: 0;
  2571. margin: 0;
  2572. right: 10rpx; */
  2573. margin-right: 0rpx;
  2574. text-align: center;
  2575. font-size: 25rpx;
  2576. background-color: #09afff;
  2577. border-radius: 40rpx;
  2578. letter-spacing: 3rpx;
  2579. /* position: absolute; */
  2580. }
  2581. .goods_name_right .img {
  2582. width: 50rpx;
  2583. height: 50rpx;
  2584. margin-top: 15rpx;
  2585. }
  2586. .goods_name_right .txt {
  2587. margin-top: 5rpx;
  2588. font-size: 18rpx;
  2589. color: #000000;
  2590. border: 1rpx solid;
  2591. }
  2592. .goods-info .desc {
  2593. margin: 12rpx 0;
  2594. font-size: 24rpx;
  2595. line-height: 36rpx;
  2596. width: 640rpx;
  2597. white-space: nowrap;
  2598. text-overflow: ellipsis;
  2599. overflow: hidden;
  2600. display: block;
  2601. }
  2602. .goods-info .price {
  2603. height: 60rpx;
  2604. display: flex;
  2605. /* margin-top: 20rpx; */
  2606. align-items: flex-end;
  2607. }
  2608. .goods-info .counterPrice {
  2609. padding-left: 5rpx;
  2610. text-decoration: line-through;
  2611. font-size: 24rpx;
  2612. margin-top: 15rpx;
  2613. margin-left: 10rpx;
  2614. color: #85868a;
  2615. }
  2616. .goods-info .retailPrice {
  2617. height: 49rpx;
  2618. line-height: 44rpx;
  2619. /* color: #5DB5E7; */
  2620. color: #ff2958;
  2621. }
  2622. .goods-info .memberPrice {
  2623. font-size: 26rpx;
  2624. color: #dd483e;
  2625. margin: 0 10rpx 0 20rpx;
  2626. }
  2627. .member-price-tag {
  2628. width: 88rpx;
  2629. height: 26rpx;
  2630. line-height: 26rpx;
  2631. background: url('https://mall.zhaijieshi.cc/file/jzmall/weixin/member/member-price-bg.png') no-repeat center center;
  2632. background-size: 100% 100%;
  2633. color: #5e3a11;
  2634. font-size: 16rpx;
  2635. padding: 0 8rpx 0 0;
  2636. text-align: right;
  2637. margin: 0 0 6rpx 0;
  2638. }
  2639. .member-price-tag.spread-tag {
  2640. margin-left: 20rpx;
  2641. background-image: url('https://mall.zhaijieshi.cc/file/jzmall/weixin/member/spread-price-bg.png');
  2642. width: 122rpx;
  2643. }
  2644. .goods-info .retailPrice text.checked-price {
  2645. font-size: 48rpx;
  2646. font-weight: bold;
  2647. margin-left: 3rpx;
  2648. color: #ff2958;
  2649. }
  2650. .goods-info .brand {
  2651. margin-top: 5rpx;
  2652. min-height: 34rpx;
  2653. text-align: left;
  2654. }
  2655. .goods-info .brand text {
  2656. display: inline-block;
  2657. width: auto;
  2658. padding: 2px 0rpx 2px 0.5rpx;
  2659. line-height: 32.5rpx;
  2660. /*border: 1px solid #f48f18;color: #f48f18;*/
  2661. font-size: 22rpx;
  2662. color: #a98f76;
  2663. /*border-radius: 4rpx;*/
  2664. background-size: 10.75rpx 18.75rpx;
  2665. }
  2666. .section-nav {
  2667. width: 750rpx;
  2668. height: 108rpx;
  2669. background: #fff;
  2670. margin-bottom: 20rpx;
  2671. }
  2672. .section-nav .t {
  2673. float: left;
  2674. width: 600rpx;
  2675. height: 108rpx;
  2676. line-height: 108rpx;
  2677. font-size: 29rpx;
  2678. color: #333;
  2679. margin-left: 31.25rpx;
  2680. }
  2681. .section-nav .i {
  2682. float: right;
  2683. width: 52rpx;
  2684. height: 52rpx;
  2685. margin-right: 16rpx;
  2686. margin-top: 28rpx;
  2687. }
  2688. .section-act .t {
  2689. float: left;
  2690. display: flex;
  2691. align-items: center;
  2692. width: 600rpx;
  2693. height: 108rpx;
  2694. overflow: hidden;
  2695. line-height: 108rpx;
  2696. font-size: 29rpx;
  2697. color: #999;
  2698. margin-left: 31.25rpx;
  2699. }
  2700. .section-act .label {
  2701. color: #999;
  2702. }
  2703. .section-act .tag {
  2704. display: flex;
  2705. align-items: center;
  2706. padding: 0 10rpx;
  2707. border-radius: 3px;
  2708. height: 37rpx;
  2709. width: auto;
  2710. color: #f48f18;
  2711. overflow: hidden;
  2712. border: 1px solid #f48f18;
  2713. font-size: 25rpx;
  2714. margin: 0 10rpx;
  2715. }
  2716. .section-act .text {
  2717. display: flex;
  2718. align-items: center;
  2719. height: 37rpx;
  2720. width: auto;
  2721. overflow: hidden;
  2722. color: #f48f18;
  2723. font-size: 29rpx;
  2724. }
  2725. .comments {
  2726. width: 100%;
  2727. height: auto;
  2728. padding-left: 30rpx;
  2729. background: #fff;
  2730. margin: 20rpx 0;
  2731. }
  2732. .comments .h {
  2733. height: 102.5rpx;
  2734. line-height: 100.5rpx;
  2735. width: 718.75rpx;
  2736. padding-right: 16rpx;
  2737. }
  2738. .comments .h .t {
  2739. display: block;
  2740. float: left;
  2741. width: 50%;
  2742. font-size: 30rpx;
  2743. color: #333;
  2744. }
  2745. .comments .h .i {
  2746. display: block;
  2747. float: right;
  2748. width: 164rpx;
  2749. height: 100.5rpx;
  2750. line-height: 100.5rpx;
  2751. background-size: 52rpx;
  2752. }
  2753. .comments .b {
  2754. height: auto;
  2755. width: 720rpx;
  2756. }
  2757. .comments .item {
  2758. height: auto;
  2759. width: 720rpx;
  2760. overflow: hidden;
  2761. border-top: 1px solid #d9d9d9;
  2762. }
  2763. .comments .info {
  2764. height: 127rpx;
  2765. width: 100%;
  2766. padding: 33rpx 0 27rpx 0;
  2767. }
  2768. .comments .user {
  2769. float: left;
  2770. width: auto;
  2771. height: 67rpx;
  2772. line-height: 67rpx;
  2773. font-size: 0;
  2774. }
  2775. .comments .user image {
  2776. float: left;
  2777. width: 67rpx;
  2778. height: 67rpx;
  2779. margin-right: 17rpx;
  2780. border-radius: 50%;
  2781. }
  2782. .comments .user text {
  2783. display: inline-block;
  2784. width: auto;
  2785. height: 66rpx;
  2786. overflow: hidden;
  2787. font-size: 29rpx;
  2788. line-height: 66rpx;
  2789. }
  2790. .comments .time {
  2791. display: block;
  2792. float: right;
  2793. width: auto;
  2794. height: 67rpx;
  2795. line-height: 67rpx;
  2796. color: #7f7f7f;
  2797. font-size: 25rpx;
  2798. margin-right: 30rpx;
  2799. }
  2800. .comments .content {
  2801. width: 720rpx;
  2802. padding-right: 30rpx;
  2803. line-height: 45.8rpx;
  2804. font-size: 29rpx;
  2805. margin-bottom: 24rpx;
  2806. }
  2807. .comments .imgs {
  2808. width: 720rpx;
  2809. height: auto;
  2810. margin-bottom: 25rpx;
  2811. }
  2812. .comments .imgs .img {
  2813. height: 150rpx;
  2814. width: 150rpx;
  2815. margin-right: 28rpx;
  2816. }
  2817. .comments .spec {
  2818. width: 720rpx;
  2819. padding-right: 30rpx;
  2820. line-height: 30rpx;
  2821. font-size: 24rpx;
  2822. color: #999;
  2823. margin-bottom: 30rpx;
  2824. }
  2825. .comments .customer-service {
  2826. width: 690rpx;
  2827. height: auto;
  2828. overflow: hidden;
  2829. margin-top: 23rpx;
  2830. margin-bottom: 23rpx;
  2831. background: rgba(0, 0, 0, 0.03);
  2832. padding: 21rpx;
  2833. }
  2834. .comments .customer-service .u {
  2835. font-size: 24rpx;
  2836. color: #333;
  2837. line-height: 37.5rpx;
  2838. }
  2839. .comments .customer-service .c {
  2840. font-size: 24rpx;
  2841. color: #999;
  2842. line-height: 37.5rpx;
  2843. }
  2844. .goods-attr {
  2845. width: 750rpx;
  2846. height: auto;
  2847. overflow: hidden;
  2848. padding: 0 31.25rpx 25rpx 31.25rpx;
  2849. background: #fff;
  2850. }
  2851. .goods-attr .t {
  2852. width: 687.5rpx;
  2853. height: 104rpx;
  2854. line-height: 104rpx;
  2855. font-size: 38.5rpx;
  2856. }
  2857. .goods-attr .item {
  2858. width: 687.5rpx;
  2859. height: 68rpx;
  2860. padding: 11rpx 20rpx;
  2861. margin-bottom: 11rpx;
  2862. background: #f7f7f7;
  2863. font-size: 38.5rpx;
  2864. }
  2865. .goods-attr .left {
  2866. float: left;
  2867. font-size: 25rpx;
  2868. width: 134rpx;
  2869. height: 45rpx;
  2870. line-height: 45rpx;
  2871. overflow: hidden;
  2872. color: #999;
  2873. }
  2874. .goods-attr .right {
  2875. float: left;
  2876. font-size: 36.5rpx;
  2877. margin-left: 20rpx;
  2878. width: 480rpx;
  2879. height: 45rpx;
  2880. line-height: 45rpx;
  2881. overflow: hidden;
  2882. color: #333;
  2883. }
  2884. .detail {
  2885. width: 750rpx;
  2886. height: auto;
  2887. overflow: hidden;
  2888. position: relative;
  2889. top: -12rpx;
  2890. /* padding-bottom: 160rpx; */
  2891. }
  2892. .detail image {
  2893. width: 750rpx;
  2894. /* display: block; */
  2895. }
  2896. .common-problem {
  2897. width: 750rpx;
  2898. height: auto;
  2899. overflow: hidden;
  2900. }
  2901. .common-problem .h {
  2902. position: relative;
  2903. height: 145.5rpx;
  2904. width: 750rpx;
  2905. padding: 56.25rpx 0;
  2906. background: #fff;
  2907. text-align: center;
  2908. }
  2909. .common-problem .h .line {
  2910. display: inline-block;
  2911. position: absolute;
  2912. top: 72rpx;
  2913. left: 0;
  2914. z-index: 2;
  2915. height: 1px;
  2916. margin-left: 225rpx;
  2917. width: 300rpx;
  2918. background: #ccc;
  2919. }
  2920. .common-problem .h .title {
  2921. display: inline-block;
  2922. position: absolute;
  2923. top: 56.125rpx;
  2924. left: 0;
  2925. z-index: 3;
  2926. height: 33rpx;
  2927. margin-left: 285rpx;
  2928. width: 180rpx;
  2929. background: #fff;
  2930. }
  2931. .common-problem .b {
  2932. width: 750rpx;
  2933. height: auto;
  2934. overflow: hidden;
  2935. padding: 0rpx 30rpx;
  2936. background: #fff;
  2937. }
  2938. .common-problem .item {
  2939. height: auto;
  2940. overflow: hidden;
  2941. padding-bottom: 25rpx;
  2942. }
  2943. .common-problem .question-box .spot {
  2944. float: left;
  2945. display: block;
  2946. height: 8rpx;
  2947. width: 8rpx;
  2948. background: #b4282d;
  2949. border-radius: 50%;
  2950. margin-top: 11rpx;
  2951. }
  2952. .common-problem .question-box .question {
  2953. float: left;
  2954. line-height: 30rpx;
  2955. padding-left: 8rpx;
  2956. display: block;
  2957. font-size: 26rpx;
  2958. padding-bottom: 15rpx;
  2959. color: #303030;
  2960. }
  2961. .common-problem .answer {
  2962. line-height: 36rpx;
  2963. padding-left: 16rpx;
  2964. font-size: 26rpx;
  2965. color: #787878;
  2966. }
  2967. .related-goods {
  2968. width: 750rpx;
  2969. height: auto;
  2970. overflow: hidden;
  2971. padding-bottom: 80rpx;
  2972. }
  2973. .related-goods .h {
  2974. position: relative;
  2975. height: 145.5rpx;
  2976. width: 750rpx;
  2977. padding: 56.25rpx 0;
  2978. background: #fff;
  2979. text-align: center;
  2980. border-bottom: 1px solid #f4f4f4;
  2981. }
  2982. .related-goods .h .line {
  2983. display: inline-block;
  2984. position: absolute;
  2985. top: 72rpx;
  2986. left: 0;
  2987. z-index: 2;
  2988. height: 1px;
  2989. margin-left: 225rpx;
  2990. width: 300rpx;
  2991. background: #ccc;
  2992. }
  2993. .related-goods .h .title {
  2994. display: inline-block;
  2995. position: absolute;
  2996. top: 56.125rpx;
  2997. left: 0;
  2998. z-index: 3;
  2999. height: 33rpx;
  3000. margin-left: 285rpx;
  3001. width: 180rpx;
  3002. background: #fff;
  3003. }
  3004. .related-goods .b {
  3005. width: 750rpx;
  3006. height: auto;
  3007. overflow: hidden;
  3008. }
  3009. .related-goods .b .item {
  3010. float: left;
  3011. background: #fff;
  3012. width: 375rpx;
  3013. height: auto;
  3014. overflow: hidden;
  3015. text-align: center;
  3016. padding: 15rpx 31.25rpx;
  3017. border-right: 1px solid #f4f4f4;
  3018. border-bottom: 1px solid #f4f4f4;
  3019. }
  3020. .related-goods .item .img {
  3021. width: 311.45rpx;
  3022. height: 311.45rpx;
  3023. }
  3024. .related-goods .item .name {
  3025. display: block;
  3026. width: 311.45rpx;
  3027. height: 35rpx;
  3028. margin: 11.5rpx 0 15rpx 0;
  3029. text-align: center;
  3030. overflow: hidden;
  3031. font-size: 30rpx;
  3032. color: #333;
  3033. }
  3034. .related-goods .item .price {
  3035. display: block;
  3036. width: 311.45rpx;
  3037. height: 30rpx;
  3038. text-align: center;
  3039. font-size: 30rpx;
  3040. color: #b4282d;
  3041. }
  3042. .bottom-btn .l {
  3043. /* flex: 2;
  3044. float: left;
  3045. height: 150rpx;
  3046. width: 162rpx; */
  3047. /* display: flex; */
  3048. }
  3049. .bottom-btn .l.l-collect {
  3050. border-right: none;
  3051. border-left: none;
  3052. text-align: center;
  3053. padding-left: 30rpx;
  3054. /* width: 100rpx; */
  3055. }
  3056. .bottom-btn .l.l-collect .icon {
  3057. font-size: 40rpx;
  3058. }
  3059. .bottom-btn .l.l-collect text {
  3060. /* position: absolute;
  3061. top: 80rpx;
  3062. left: 30rpx;
  3063. font-size: 22rpx; */
  3064. }
  3065. .bottom-btn .l.l-kefu {
  3066. border-right: none;
  3067. border-left: none;
  3068. text-align: center;
  3069. /* width:60rpx; */
  3070. /* position: relative; */
  3071. }
  3072. .contact-block {
  3073. position: relative;
  3074. }
  3075. .bottom-btn .l.l-kefu .icon {
  3076. position: absolute;
  3077. font-size: 44rpx;
  3078. top: 20rpx;
  3079. }
  3080. .bottom-btn .l.l-kefu text {
  3081. /* position: absolute;
  3082. top: 60rpx;
  3083. font-size: 22rpx; */
  3084. }
  3085. .bottom-btn .l.l-cart .box {
  3086. position: relative;
  3087. height: 80rpx;
  3088. width: 70rpx;
  3089. }
  3090. .bottom-btn .l.l-cart .box .txt {
  3091. position: absolute;
  3092. top: 50rpx;
  3093. font-size: 22rpx;
  3094. }
  3095. .bottom-btn .l.l-cart .cart-count {
  3096. height: 28rpx;
  3097. width: 28rpx;
  3098. z-index: 10;
  3099. position: absolute;
  3100. top: 0;
  3101. right: 0;
  3102. background: #b4282d;
  3103. text-align: center;
  3104. font-size: 18rpx;
  3105. color: #fff;
  3106. line-height: 28rpx;
  3107. border-radius: 50%;
  3108. }
  3109. .bottom-btn .l.l-cart .icon {
  3110. position: absolute;
  3111. top: 10rpx;
  3112. left: 0;
  3113. font-size: 44rpx;
  3114. }
  3115. .collect-wrapper,
  3116. .service-wrapper {
  3117. display: flex;
  3118. flex-direction: column;
  3119. justify-content: center;
  3120. flex: 1;
  3121. }
  3122. .collect-text {
  3123. margin: 10rpx 0 0;
  3124. }
  3125. .bottom-btn {
  3126. position: fixed;
  3127. left: 0rpx;
  3128. bottom: 0;
  3129. width: 750rpx;
  3130. min-height: 110rpx;
  3131. background: #fff;
  3132. /* padding: 12rpx 24rpx 18rpx; */
  3133. z-index: 999;
  3134. /* display: flex; */
  3135. /* align-items: center; */
  3136. padding-bottom: constant(safe-area-inset-bottom);
  3137. padding-bottom: env(safe-area-inset-bottom);
  3138. box-shadow: 4rpx -8rpx 16rpx 2rpx rgba(201, 205, 207, 0.25);
  3139. /* box-sizing: content-box; */
  3140. }
  3141. .bottom-btn .bottom-content .contact-block {
  3142. height: 80rpx;
  3143. width: 130rpx;
  3144. position: relative;
  3145. overflow: hidden;
  3146. margin-right: 10rpx;
  3147. }
  3148. .contact-btn {
  3149. height: 80rpx;
  3150. width: 130rpx;
  3151. position: absolute;
  3152. top: 0;
  3153. bottom: 0;
  3154. left: 0;
  3155. z-index: 99;
  3156. opacity: 0;
  3157. }
  3158. .contact-wrapper {
  3159. width: 130rpx;
  3160. height: 80rpx;
  3161. border: 2rpx solid #b3b4b6;
  3162. border-radius: 14rpx;
  3163. /* width: 120rpx; */
  3164. display: flex;
  3165. align-items: center;
  3166. justify-content: center;
  3167. position: absolute;
  3168. top: 0;
  3169. left: 0;
  3170. bottom: 0;
  3171. overflow: hidden;
  3172. padding: 4rpx 0;
  3173. }
  3174. .contact-img {
  3175. width: 24rpx;
  3176. height: 24rpx;
  3177. margin-right: 8rpx;
  3178. /* margin-bottom: 10rpx; */
  3179. }
  3180. .contact-wrapper .text {
  3181. font-size: 28rpx;
  3182. font-weight: bold;
  3183. color: #000;
  3184. height: 40rpx;
  3185. line-height: 40rpx;
  3186. }
  3187. .bottom-btn .share {
  3188. width: 280rpx;
  3189. background: #fff;
  3190. height: 82rpx;
  3191. font-size: 30rpx;
  3192. font-weight: bold;
  3193. color: #09afff;
  3194. text-align: center;
  3195. line-height: 82rpx;
  3196. border: 2rpx solid #09afff;
  3197. border-radius: 82rpx 0rpx 0 82rpx;
  3198. }
  3199. .bottom-btn .c {
  3200. /* width: 570rpx; */
  3201. flex: 1;
  3202. text-align: center;
  3203. height: 80rpx;
  3204. line-height: 80rpx;
  3205. background: #fe2b54;
  3206. border-radius: 15rpx;
  3207. color: #ffffff;
  3208. font-size: 32rpx;
  3209. font-family: PingFangSC, PingFang SC;
  3210. font-weight: 600;
  3211. }
  3212. .dis-order-wrapper {
  3213. width: 452rpx;
  3214. background: #09afff;
  3215. height: 82rpx;
  3216. font-size: 22rpx;
  3217. color: #fff;
  3218. border-radius: 82rpx;
  3219. text-align: center;
  3220. margin-right: 30rpx;
  3221. display: flex;
  3222. align-items: center;
  3223. overflow: hidden;
  3224. }
  3225. .dis-order-wrapper>view {
  3226. flex: 1;
  3227. text-align: center;
  3228. height: 82rpx;
  3229. }
  3230. .spread-order {
  3231. background: #fff;
  3232. border-radius: 0 82rpx 82rpx 0;
  3233. border: 1rpx solid #09afff;
  3234. border-left: none;
  3235. line-height: 24rpx;
  3236. }
  3237. .buy-type {
  3238. font-size: 30rpx;
  3239. font-weight: bold;
  3240. line-height: 30rpx;
  3241. margin: 10rpx 0 4rpx 0;
  3242. overflow: hidden;
  3243. }
  3244. .bottom-btn .r {
  3245. /*border: 1px solid #f48f18;*/
  3246. background: #09afff;
  3247. float: left;
  3248. height: 100rpx;
  3249. /* line-height: 66rpx; */
  3250. flex: 2;
  3251. text-align: center;
  3252. color: #fff;
  3253. margin-left: 15rpx;
  3254. margin-top: 15rpx;
  3255. margin-bottom: 15rpx;
  3256. border-top-left-radius: 50rpx;
  3257. border-bottom-left-radius: 50rpx;
  3258. }
  3259. .bottom-btn .r .title {
  3260. font-size: 46rpx;
  3261. height: 56rpx;
  3262. color: #fff;
  3263. }
  3264. .bottom-btn .r .subtitle {
  3265. font-size: 28rpx;
  3266. color: #fff;
  3267. font-weight: 100;
  3268. }
  3269. /* */
  3270. .attr-pop-box {
  3271. width: 100%;
  3272. height: 100%;
  3273. position: fixed;
  3274. background: rgba(0, 0, 0, 0.5);
  3275. z-index: 8;
  3276. bottom: 0;
  3277. /* display: none; */
  3278. }
  3279. .attr-pop {
  3280. width: 100%;
  3281. height: auto;
  3282. max-height: 780rpx;
  3283. padding: 31.25rpx;
  3284. background: #fff;
  3285. position: fixed;
  3286. z-index: 9;
  3287. bottom: 100rpx;
  3288. }
  3289. .attr-pop .close {
  3290. position: absolute;
  3291. width: 48rpx;
  3292. height: 48rpx;
  3293. right: 31.25rpx;
  3294. overflow: hidden;
  3295. top: 31.25rpx;
  3296. }
  3297. .attr-pop .close .icon {
  3298. width: 48rpx;
  3299. height: 48rpx;
  3300. }
  3301. .attr-pop .img-info {
  3302. width: 687.5rpx;
  3303. height: 177rpx;
  3304. overflow: hidden;
  3305. margin-bottom: 41.5rpx;
  3306. }
  3307. .attr-pop .img {
  3308. float: left;
  3309. height: 177rpx;
  3310. width: 177rpx;
  3311. background: #f4f4f4;
  3312. margin-right: 31.25rpx;
  3313. }
  3314. .attr-pop .info {
  3315. float: left;
  3316. height: 177rpx;
  3317. display: flex;
  3318. align-items: center;
  3319. }
  3320. .attr-pop .p {
  3321. font-size: 33rpx;
  3322. color: #333;
  3323. height: 33rpx;
  3324. line-height: 33rpx;
  3325. margin-bottom: 10rpx;
  3326. }
  3327. .attr-pop .a {
  3328. font-size: 29rpx;
  3329. color: #333;
  3330. height: 40rpx;
  3331. line-height: 40rpx;
  3332. }
  3333. .spec-con {
  3334. width: 100%;
  3335. height: auto;
  3336. overflow: hidden;
  3337. }
  3338. .spec-con .name {
  3339. margin-bottom: 6rpx;
  3340. font-size: 29rpx;
  3341. color: #333;
  3342. }
  3343. .spec-con .values {
  3344. height: auto;
  3345. margin-bottom: 10rpx;
  3346. font-size: 0;
  3347. }
  3348. .spec-con .value {
  3349. display: inline-block;
  3350. height: 62rpx;
  3351. padding: 0 35rpx;
  3352. line-height: 56rpx;
  3353. text-align: center;
  3354. margin-right: 25rpx;
  3355. margin-bottom: 16.5rpx;
  3356. border: 1px solid #333;
  3357. font-size: 25rpx;
  3358. color: #333;
  3359. }
  3360. .spec-con .value.disable {
  3361. border: 1px solid #ccc;
  3362. color: #ccc;
  3363. }
  3364. .spec-con .value.selected {
  3365. border: 1px solid #b4282d;
  3366. color: #b4282d;
  3367. }
  3368. .number-item .selnum {
  3369. width: 200rpx;
  3370. /* width: 322rpx; */
  3371. height: 71rpx;
  3372. border: 1px solid #ccc;
  3373. display: flex;
  3374. }
  3375. .number-item .cut {
  3376. width: 93.75rpx;
  3377. height: 100%;
  3378. text-align: center;
  3379. line-height: 65rpx;
  3380. }
  3381. .number-item .number {
  3382. flex: 1;
  3383. height: 100%;
  3384. text-align: center;
  3385. line-height: 68.75rpx;
  3386. border-left: 1px solid #ccc;
  3387. border-right: 1px solid #ccc;
  3388. float: left;
  3389. }
  3390. .number-item .add {
  3391. width: 93.75rpx;
  3392. height: 100%;
  3393. text-align: center;
  3394. line-height: 65rpx;
  3395. }
  3396. .contact {
  3397. height: 100rpx;
  3398. width: 100rpx;
  3399. border-radius: 100%;
  3400. position: fixed;
  3401. bottom: 96rpx;
  3402. right: 10rpx;
  3403. font-size: 20rpx;
  3404. box-sizing: border-box;
  3405. /* background: url('../../static/images/customer.png') no-repeat center 21rpx; */
  3406. background-size: 55rpx auto;
  3407. }
  3408. .share-pop-box {
  3409. width: 100%;
  3410. height: 100%;
  3411. position: fixed;
  3412. background: rgba(0, 0, 0, 0.5);
  3413. z-index: 8;
  3414. bottom: 0;
  3415. /* display: none; */
  3416. }
  3417. .share-pop {
  3418. width: 100%;
  3419. height: auto;
  3420. max-height: 780rpx;
  3421. padding: 31.25rpx;
  3422. background: #fff;
  3423. position: fixed;
  3424. z-index: 9;
  3425. bottom: 100rpx;
  3426. }
  3427. .share-pop .close {
  3428. position: absolute;
  3429. width: 48rpx;
  3430. height: 48rpx;
  3431. right: 31.25rpx;
  3432. top: 31.25rpx;
  3433. }
  3434. .share-pop .close .icon {
  3435. width: 48rpx;
  3436. height: 48rpx;
  3437. }
  3438. .share-pop .share-info {
  3439. width: 100%;
  3440. height: 225rpx;
  3441. overflow: hidden;
  3442. margin-bottom: 41.5rpx;
  3443. }
  3444. .sharebtn {
  3445. top: 75rpx;
  3446. background: none !important;
  3447. font-size: 32rpx;
  3448. color: #fff !important;
  3449. border-radius: 0%;
  3450. width: 175rpx;
  3451. height: 150rpx;
  3452. text-align: center;
  3453. display: flex;
  3454. justify-content: center;
  3455. align-items: center;
  3456. flex-wrap: wrap;
  3457. float: left;
  3458. background: #fff;
  3459. border-bottom: 0px solid #fafafa;
  3460. margin-left: 15%;
  3461. }
  3462. .sharebtn::after {
  3463. border: none;
  3464. border-radius: 0%;
  3465. }
  3466. .savesharebtn {
  3467. top: 75rpx;
  3468. background: none !important;
  3469. font-size: 32rpx;
  3470. color: #fff !important;
  3471. border-radius: 0%;
  3472. width: 175rpx;
  3473. height: 150rpx;
  3474. text-align: center;
  3475. display: flex;
  3476. justify-content: center;
  3477. align-items: center;
  3478. flex-wrap: wrap;
  3479. float: right;
  3480. background: #fff;
  3481. border-bottom: 0px solid #fafafa;
  3482. margin-right: 15%;
  3483. }
  3484. .savesharebtn::after {
  3485. border: none;
  3486. border-radius: 0%;
  3487. }
  3488. .sharebtn_image {
  3489. /* border: 1px solid #757575; */
  3490. width: 128rpx;
  3491. height: 128rpx;
  3492. margin-top: 0rpx;
  3493. }
  3494. .sharebtn_text {
  3495. /* border: 1px solid #757575; */
  3496. width: 150rpx;
  3497. margin-bottom: 2rpx;
  3498. height: 20rpx;
  3499. line-height: 20rpx;
  3500. font-size: 20rpx;
  3501. color: #555;
  3502. }
  3503. .separate {
  3504. background: #e0e3da;
  3505. width: 100%;
  3506. height: 6rpx;
  3507. }
  3508. /* 新客角标 */
  3509. .isNew {
  3510. position: absolute;
  3511. width: 80rpx;
  3512. height: 120rpx;
  3513. right: 30rpx;
  3514. z-index: 999;
  3515. }
  3516. /* 自购/推广弹框 */
  3517. .overlay-wrapper {
  3518. display: flex;
  3519. align-items: center;
  3520. justify-content: center;
  3521. height: 100%;
  3522. }
  3523. .tips-wrapper {
  3524. width: 588rpx;
  3525. height: 462rpx;
  3526. border-radius: 10rpx;
  3527. background: #fff;
  3528. font-size: 26rpx;
  3529. display: flex;
  3530. flex-direction: column;
  3531. justify-content: space-between;
  3532. }
  3533. .tips-top {
  3534. display: flex;
  3535. flex-direction: column;
  3536. align-items: center;
  3537. padding: 0 40rpx;
  3538. }
  3539. .tips-title {
  3540. font-size: 34rpx;
  3541. font-weight: bold;
  3542. margin: 66rpx 0 24rpx;
  3543. }
  3544. .tips-bottom {
  3545. height: 132rpx;
  3546. border-top: 2rpx solid #e4e4e4;
  3547. display: flex;
  3548. justify-content: space-around;
  3549. align-items: center;
  3550. }
  3551. .tips-bottom .btn-devide {
  3552. width: 2rpx;
  3553. height: 130rpx;
  3554. background: #e4e4e4;
  3555. }
  3556. .cancel-btn {
  3557. width: 202rpx;
  3558. height: 72rpx;
  3559. line-height: 72rpx;
  3560. border: 2rpx solid #85868a;
  3561. color: #282728;
  3562. border-radius: 72rpx;
  3563. text-align: center;
  3564. overflow: hidden;
  3565. }
  3566. .repay-btn {
  3567. width: 202rpx;
  3568. height: 72rpx;
  3569. line-height: 72rpx;
  3570. background: #09afff;
  3571. color: #fff;
  3572. border-radius: 72rpx;
  3573. text-align: center;
  3574. }
  3575. .notip-again {
  3576. padding-left: 40rpx;
  3577. display: flex;
  3578. align-items: center;
  3579. }
  3580. .user-agree {
  3581. /* color:#85868A; */
  3582. font-size: 26rpx;
  3583. margin-left: 8rpx;
  3584. }
  3585. /* 海报的样式 */
  3586. .poster {
  3587. position: absolute;
  3588. top: 20rpx;
  3589. z-index: 99;
  3590. text-align: center;
  3591. left: 0;
  3592. bottom: 0;
  3593. right: 0;
  3594. }
  3595. .title {
  3596. color: #fff;
  3597. margin: 20rpx 0;
  3598. font-size: 30rpx;
  3599. display: flex;
  3600. justify-content: center;
  3601. text-align: left;
  3602. }
  3603. .title text {
  3604. width: 480rpx;
  3605. }
  3606. .ads {
  3607. color: #fff;
  3608. text-align: left;
  3609. margin: 20rpx auto;
  3610. display: flex;
  3611. justify-content: center;
  3612. }
  3613. .tool {
  3614. display: flex;
  3615. text-align: center;
  3616. justify-content: baseline;
  3617. width: 100%;
  3618. margin-top: 20rpx;
  3619. }
  3620. .tool view {
  3621. flex: 1;
  3622. }
  3623. .img {
  3624. width: 107rpx;
  3625. height: 128rpx;
  3626. }
  3627. .closeImg {
  3628. width: 57rpx;
  3629. height: 57rpx;
  3630. }
  3631. .share-btn {
  3632. background-color: transparent;
  3633. flex: 1;
  3634. }
  3635. .share-btn::after {
  3636. border: none;
  3637. }
  3638. /* 商品价格 销量 */
  3639. .goods-info-new {
  3640. margin-top: -8rpx;
  3641. border-top-left-radius: 10px;
  3642. /* 左上角圆角半径 */
  3643. border-top-right-radius: 10px;
  3644. /* 右上角圆角半径 */
  3645. background: #FBFBFC;
  3646. width: 750rpx;
  3647. /* height:138rpx; */
  3648. padding: 10rpx 0rpx 0rpx;
  3649. position: relative;
  3650. z-index: 99;
  3651. box-sizing: border-box;
  3652. }
  3653. .price-line {
  3654. /* height: 50rpx; */
  3655. display: flex;
  3656. align-items: flex-end;
  3657. padding-right: 30rpx;
  3658. border-radius: 40rpx 40rpx 0rpx 0rpx;
  3659. position: relative;
  3660. top: -20rpx;
  3661. background-color: #f5f5f5;
  3662. padding-top: 14rpx;
  3663. }
  3664. .price-line .real-price {
  3665. color: #fe2b54;
  3666. font-size: 42rpx;
  3667. margin-left: 24rpx;
  3668. padding-top: 20rpx;
  3669. font-family: AlibabaPuHuiTi_2_105_Heavy;
  3670. }
  3671. .price-line .real-price .bold-price-j {
  3672. font-weight: bold;
  3673. font-size: 18px;
  3674. margin: 0 4px;
  3675. font-family: AlibabaPuHuiTi_2_105_Heavy;
  3676. }
  3677. .price-line .real-price text.bold-price {
  3678. font-size: 54rpx;
  3679. font-weight: bold;
  3680. height: 54rpx;
  3681. line-height: 54rpx;
  3682. font-family: AlibabaPuHuiTi_2_105_Heavy;
  3683. }
  3684. .price-line .sale-price {
  3685. color: #A5A5A5;
  3686. font-size: 36rpx;
  3687. flex: 1;
  3688. margin-left: 8rpx;
  3689. text-decoration: line-through;
  3690. }
  3691. .price-line .sale-num {
  3692. color: #acadb1;
  3693. font-size: 24rpx;
  3694. }
  3695. .goods-coupon {
  3696. display: flex;
  3697. flex-wrap: wrap;
  3698. margin-top: 20rpx;
  3699. }
  3700. .goods-coupon .goupon-tag {
  3701. height: 30rpx;
  3702. line-height: 30rpx;
  3703. background: rgba(254, 43, 84, 0.1);
  3704. /* opacity: 0.9; */
  3705. border-radius: 5px;
  3706. padding: 0 10rpx;
  3707. margin-right: 10rpx;
  3708. color: #fe2b54;
  3709. font-size: 20rpx;
  3710. }
  3711. /* 服务 须知 门店 */
  3712. .other-info {
  3713. padding: 30rpx 24rpx 16rpx;
  3714. background: #fff;
  3715. border-radius: 24rpx;
  3716. width: 702rpx;
  3717. margin: 0rpx 24rpx 0rpx;
  3718. }
  3719. .other-info .name {
  3720. color: #000000;
  3721. font-size: 34rpx;
  3722. line-height: 34rpx;
  3723. font-weight: bold;
  3724. padding-bottom: 12rpx;
  3725. }
  3726. .other-info .common-info {
  3727. line-height: 36rpx;
  3728. display: flex;
  3729. /* min-height: 52rpx; */
  3730. /* align-items: center; */
  3731. margin-top: 14rpx;
  3732. }
  3733. .common-info .info-title {
  3734. font-size: 24rpx;
  3735. color: #666;
  3736. margin-right: 26rpx;
  3737. font-family: AlibabaPuHuiTi_2_65_Medium;
  3738. }
  3739. .common-info .info-content {
  3740. font-size: 24rpx;
  3741. color: #000;
  3742. flex: 1;
  3743. }
  3744. .common-info image {
  3745. width: 10rpx;
  3746. height: 20rpx;
  3747. }
  3748. .info-showtip .img {
  3749. width: 300px;
  3750. margin-left: 37px;
  3751. margin-top: 5px;
  3752. height: 40px;
  3753. }
  3754. .info-showtip .img .xianmai {
  3755. background-color: #FFF4ED;
  3756. width: 100rpx;
  3757. height: 42rpx;
  3758. color: #FF7527;
  3759. font-size: 24rpx;
  3760. line-height: 42rpx;
  3761. text-align: center;
  3762. display: inline-block;
  3763. margin-right: 5px;
  3764. }
  3765. .info-showtip .img .content {
  3766. color: #A5A5A5;
  3767. font-size: 24rpx;
  3768. }
  3769. .info-showtip .appoint-steps {
  3770. width: 576rpx;
  3771. height: 80rpx;
  3772. margin-left: 37px;
  3773. background-image: url('https://mall.zhaijieshi.cc/file/wx-dy/tb.png');
  3774. background-repeat: no-repeat;
  3775. background-size: contain;
  3776. }
  3777. .price-show {
  3778. width: 100%;
  3779. height: 166rpx;
  3780. background-image: url('https://mall.zhaijieshi.cc/file/wx-dy/dyzsj.png');
  3781. background-repeat: no-repeat;
  3782. background-size: cover;
  3783. padding: 20rpx 24rpx 10rpx;
  3784. }
  3785. .price-show .sale-num {
  3786. color: #FFFFFF;
  3787. font-size: 28rpx;
  3788. }
  3789. .price-show .sale-price {
  3790. display: flex;
  3791. /* margin-top: 16rpx; */
  3792. }
  3793. .price-show .sale-price .price .one {
  3794. font-weight: bold;
  3795. font-size: 18px;
  3796. color: #fff;
  3797. }
  3798. .price-show .sale-price .price .two {
  3799. font-size: 56rpx;
  3800. font-weight: bold;
  3801. color: #fff;
  3802. }
  3803. .price-show .sale-price .price .three {
  3804. background-color: #fff;
  3805. text-align: center;
  3806. color: #FF2D5A;
  3807. width: 74rpx;
  3808. height: 36rpx;
  3809. line-height: 36rpx;
  3810. font-size: 24rpx;
  3811. display: inline-block;
  3812. border-radius: 20rpx;
  3813. margin: 0 20rpx;
  3814. position: relative;
  3815. top: -3px;
  3816. }
  3817. .price-show .sale-price .price .four {
  3818. color: #fff;
  3819. font-size: 32rpx;
  3820. text-decoration-line: line-through;
  3821. }
  3822. .new-customer-price {
  3823. width: 90rpx;
  3824. height: 34rpx;
  3825. line-height: 34rpx;
  3826. background-color: #FFECEA;
  3827. color: #fe2c55;
  3828. text-align: center;
  3829. font-weight: bold;
  3830. display: inline-block;
  3831. margin-left: 20rpx;
  3832. border-radius: 12rpx;
  3833. font-size: 20rpx;
  3834. position: relative;
  3835. top: -3px;
  3836. }
  3837. /* 加购数量 */
  3838. .num-module {
  3839. width: 702rpx;
  3840. /* height: 174rpx; */
  3841. background: #ffffff;
  3842. border-radius: 24rpx;
  3843. margin: 14rpx 24rpx 28rpx;
  3844. padding: 32rpx 24rpx;
  3845. }
  3846. .plus-buy {
  3847. height: 30rpx;
  3848. margin: 0 0 28rpx;
  3849. display: flex;
  3850. align-items: center;
  3851. }
  3852. .num-module .title {
  3853. color: #666;
  3854. font-size: 30rpx;
  3855. /* margin-right:20rpx; */
  3856. width: 80rpx;
  3857. }
  3858. .plus-buy .plus-name {
  3859. font-size: 30rpx;
  3860. color: #010101;
  3861. }
  3862. .plus-buy .plus-name text {
  3863. color: #fe2b54;
  3864. font-weight: bold;
  3865. }
  3866. .plus-num {
  3867. display: flex;
  3868. justify-content: space-between;
  3869. height: 72rpx;
  3870. align-items: center;
  3871. }
  3872. .calc-counter {
  3873. height: 72rpx;
  3874. border-radius: 72rpx;
  3875. display: flex;
  3876. align-items: center;
  3877. border: 2rpx solid #d2d2d2;
  3878. box-sizing: border-box;
  3879. overflow: hidden;
  3880. line-height: 72rpx;
  3881. }
  3882. .calc-counter .minus-btn.disable,
  3883. .calc-counter .plus-btn.disable {
  3884. color: #d2d2d2;
  3885. }
  3886. .calc-counter .plus-btn,
  3887. .calc-counter .minus-btn {
  3888. width: 82rpx;
  3889. text-align: center;
  3890. color: #666;
  3891. line-height: 72rpx;
  3892. font-weight: bold;
  3893. padding-bottom: 4rpx;
  3894. font-size: 36rpx;
  3895. }
  3896. .calc-counter .num-input {
  3897. color: #010101;
  3898. font-size: 30rpx;
  3899. border-left: 2rpx solid #d2d2d2;
  3900. border-right: 2rpx solid #d2d2d2;
  3901. width: 72rpx;
  3902. text-align: center;
  3903. height: 72rpx;
  3904. }
  3905. /* 选择规格 */
  3906. .sku-wrapper {
  3907. margin: 32rpx auto 0;
  3908. /* padding-bottom: 30rpx; */
  3909. /* overflow: hidden; */
  3910. position: relative;
  3911. width: 698rpx;
  3912. height: 124rpx;
  3913. background: #FFFCF7;
  3914. border-radius: 24rpx;
  3915. /* padding-top: 20rpx; */
  3916. display: flex;
  3917. align-items: center;
  3918. }
  3919. .current-select {
  3920. width: 132rpx;
  3921. height: 34rpx;
  3922. position: absolute;
  3923. top: -8rpx;
  3924. }
  3925. .current-select image {
  3926. width: 100%;
  3927. height: 100%;
  3928. }
  3929. .sku-info {
  3930. position: relative;
  3931. display: flex;
  3932. width: 100%;
  3933. }
  3934. .sku-left {
  3935. width: 580rpx;
  3936. overflow: hidden;
  3937. /* background-color: beige; */
  3938. line-height: 90rpx;
  3939. padding-left: 24rpx;
  3940. /* display: flex; */
  3941. align-items: center;
  3942. /* height: 90rpx; */
  3943. }
  3944. .sku-left view.current-sku {
  3945. /* color: #E9A567; */
  3946. margin-left: 18rpx;
  3947. font-family: AlibabaPuHuiTi_2_75_SemiBold;
  3948. font-size: 30rpx;
  3949. white-space: nowrap;
  3950. background-image: linear-gradient(to right, #E9A567 20ch, #FFFCF7 );
  3951. -webkit-background-clip: text;
  3952. background-clip: text;
  3953. /* 标准属性,背景剪裁文本 */
  3954. color: transparent;
  3955. }
  3956. /* 如果需要兼容非WebKit浏览器,可以使用以下备选样式 */
  3957. .no-gradient-fallback .sku-left view.current-sku {
  3958. color: #E9A567; /* 备选文本颜色 */
  3959. }
  3960. .sku-right {
  3961. position: absolute;
  3962. right: 0;
  3963. top: 0;
  3964. bottom: 0;
  3965. /* height: 90rpx; */
  3966. display: flex;
  3967. align-items: center;
  3968. padding-right: 24rpx;
  3969. /* width: 120rpx; */
  3970. z-index: 99;
  3971. justify-content: flex-end;
  3972. }
  3973. .sku-right .sku-right-current {
  3974. color: #a5a5a5;
  3975. font-size: 24rpx;
  3976. margin-right: 6rpx;
  3977. }
  3978. .sku-right .sku-right-img {
  3979. width: 14rpx;
  3980. height: 26rpx;
  3981. }
  3982. .sku-right image {
  3983. width: 100%;
  3984. height: 100%;
  3985. vertical-align: top;
  3986. }
  3987. .all-sku {
  3988. display: flex;
  3989. flex-wrap: wrap;
  3990. padding: 0 30rpx 0 98rpx;
  3991. }
  3992. .all-sku .sku-thumb {
  3993. width: 70rpx;
  3994. height: 70rpx;
  3995. border-radius: 10rpx;
  3996. margin-right: 14rpx;
  3997. }
  3998. .all-sku view {
  3999. font-size: 24rpx;
  4000. color: #666;
  4001. line-height: 70rpx;
  4002. margin-left: 24rpx;
  4003. }
  4004. /* 档期选择 */
  4005. .calendar-show {
  4006. background-color: #fff;
  4007. margin: 18rpx auto 30rpx;
  4008. height: 172rpx;
  4009. width: 698rpx;
  4010. padding-top: 14rpx;
  4011. border-radius: 24rpx;
  4012. }
  4013. .calendar-show .calendar-title {
  4014. display: flex;
  4015. justify-content: center;
  4016. font-size: 24rpx;
  4017. color: #a5a5a5;
  4018. }
  4019. .calendar-show .calendar-show-content {
  4020. display: flex;
  4021. justify-content: space-evenly;
  4022. padding-top: 24rpx;
  4023. }
  4024. .calendar-show-content .calendar-date {
  4025. width: 86rpx;
  4026. height: 82rpx;
  4027. background-color: #FFFCF7;
  4028. color: #E9A567;
  4029. text-align: center;
  4030. display: flex;
  4031. flex-direction: column;
  4032. justify-content: center;
  4033. align-self: center;
  4034. border-radius: 16rpx;
  4035. }
  4036. .calendar-show-content .calendar-date1 {
  4037. width: 86rpx;
  4038. height: 82rpx;
  4039. background-color: #FFFCF7;
  4040. color: #B6B6B6;
  4041. text-align: center;
  4042. display: flex;
  4043. flex-direction: column;
  4044. justify-content: center;
  4045. align-self: center;
  4046. border-radius: 16rpx;
  4047. }
  4048. .calendar-date-date {
  4049. font-size: 36rpx;
  4050. height: 42rpx;
  4051. font-family: AlibabaPuHuiTi_2_75_SemiBold;
  4052. }
  4053. /* 团购评价 */
  4054. .group-evaluation {
  4055. width: 698rpx;
  4056. background: #ffffff;
  4057. border: 1rpx solid #f5f5f5;
  4058. border-radius: 25rpx;
  4059. padding: 30rpx 24rpx 0;
  4060. margin: 0rpx auto 16rpx;
  4061. position: relative;
  4062. top: -12rpx;
  4063. }
  4064. .group-evaluation .title {
  4065. height: 40rpx;
  4066. line-height: 40rpx;
  4067. display: flex;
  4068. justify-content: space-between;
  4069. align-items: center;
  4070. }
  4071. .group-evaluation .title .left {
  4072. font-size: 32rpx;
  4073. line-height: 40rpx;
  4074. color: #000;
  4075. font-weight: bold;
  4076. flex: 1;
  4077. }
  4078. .group-evaluation .title .right {
  4079. color: #666;
  4080. font-size: 28rpx;
  4081. display: flex;
  4082. align-items: center;
  4083. justify-content: space-between;
  4084. }
  4085. .group-evaluation .arrow-img {
  4086. width: 12rpx;
  4087. height: 20rpx;
  4088. margin-left: 6rpx;
  4089. }
  4090. .evaluation-item {
  4091. padding: 30rpx 8rpx 30rpx 0;
  4092. padding-right: 8rpx;
  4093. border-bottom: 1rpx solid #f3f3f3;
  4094. display: flex;
  4095. align-items: center;
  4096. justify-content: space-between;
  4097. }
  4098. .evaluation-item:last-child {
  4099. border: none;
  4100. }
  4101. .evaluation-item .item-left {
  4102. width: 510rpx;
  4103. }
  4104. .eval-top {
  4105. display: flex;
  4106. height: 44rpx;
  4107. align-items: center;
  4108. }
  4109. .eval-top .avatar {
  4110. width: 44rpx;
  4111. height: 44rpx;
  4112. border-radius: 44rpx;
  4113. }
  4114. .eval-top .name {
  4115. margin: 0 10rpx;
  4116. font-size: 28rpx;
  4117. color: #000;
  4118. }
  4119. .eval-top .tag {
  4120. height: 38rpx;
  4121. line-height: 38rpx;
  4122. background: rgba(1, 187, 243, 0.1);
  4123. border-radius: 10rpx;
  4124. color: #01bbf3;
  4125. font-size: 24rpx;
  4126. padding: 0 12rpx;
  4127. margin-right: 10rpx;
  4128. }
  4129. .eval-top .hp {
  4130. height: 38rpx;
  4131. line-height: 38rpx;
  4132. background: rgba(255, 71, 71, 0.1);
  4133. border-radius: 10rpx;
  4134. color: #ff5252;
  4135. font-size: 24rpx;
  4136. padding: 0 12rpx;
  4137. }
  4138. .eval-content {
  4139. display: -webkit-box;
  4140. -webkit-box-orient: vertical;
  4141. -webkit-line-clamp: 2;
  4142. text-overflow: ellipsis;
  4143. overflow: hidden;
  4144. line-height: 36rpx;
  4145. margin-top: 8rpx;
  4146. font-size: 26rpx;
  4147. color: #333;
  4148. }
  4149. .evaluation-item .item-right {
  4150. width: 100rpx;
  4151. height: 100rpx;
  4152. }
  4153. .evaluation-item .item-right image {
  4154. width: 100rpx;
  4155. height: 100rpx;
  4156. border-radius: 10rpx;
  4157. }
  4158. /* 产品推荐 */
  4159. .recommend-title {
  4160. height: 103rpx;
  4161. line-height: 102rpx;
  4162. text-align: center;
  4163. color: #000000;
  4164. font-size: 33rpx;
  4165. /* margin-top:-20rpx; */
  4166. }
  4167. .recommend-list {
  4168. display: flex;
  4169. justify-content: space-between;
  4170. flex-wrap: wrap;
  4171. width: 702rpx;
  4172. margin: 0 24rpx;
  4173. }
  4174. .recommend-item {
  4175. width: 334rpx;
  4176. height: 510rpx;
  4177. background: #ffffff;
  4178. border-radius: 20rpx;
  4179. display: flex;
  4180. flex-direction: column;
  4181. margin: 0 0 20rpx;
  4182. }
  4183. .recommend-item image {
  4184. width: 334rpx;
  4185. height: 334rpx;
  4186. margin-bottom: 20rpx;
  4187. border-radius: 20rpx;
  4188. }
  4189. .recommend-goods-name {
  4190. font-size: 26rpx;
  4191. line-height: 40rpx;
  4192. height: 80rpx;
  4193. width: 294rpx;
  4194. display: -webkit-box;
  4195. -webkit-box-orient: vertical;
  4196. -webkit-line-clamp: 2;
  4197. text-overflow: ellipsis;
  4198. overflow: hidden;
  4199. margin: 0 20rpx;
  4200. /* text-indent: -12rpx; */
  4201. color: #333;
  4202. }
  4203. .recommend-goods-price {
  4204. color: #fe2957;
  4205. font-size: 28rpx;
  4206. margin: 10rpx 20rpx 0;
  4207. height: 56rpx;
  4208. }
  4209. .recommend-goods-price text {
  4210. font-size: 36rpx;
  4211. }
  4212. /* 购买提醒 */
  4213. .buy-toast {
  4214. height: 44rpx;
  4215. min-width: 284rpx;
  4216. position: absolute;
  4217. top: 410rpx;
  4218. left: 24rpx;
  4219. background: rgba(0, 0, 0, 0.5);
  4220. border-radius: 45rpx;
  4221. }
  4222. .toast-swiper {
  4223. height: 44rpx;
  4224. width: 320rpx;
  4225. }
  4226. .toast-item {
  4227. align-items: center;
  4228. display: flex;
  4229. height: 44rpx;
  4230. padding: 0 14rpx 0 10rpx;
  4231. }
  4232. .toast-item image {
  4233. width: 28rpx;
  4234. height: 28rpx;
  4235. border-radius: 28rpx;
  4236. margin-right: 8rpx;
  4237. }
  4238. .toast-item view {
  4239. font-size: 24rpx;
  4240. color: #fff;
  4241. white-space: nowrap;
  4242. }
  4243. /* 规格弹框 */
  4244. .appoint-overlay-wrapper {
  4245. position: fixed;
  4246. top: 0;
  4247. left: 0;
  4248. width: 100%;
  4249. height: 100%;
  4250. background-color: rgba(0, 0, 0, 0.7);
  4251. z-index: 9999;
  4252. display: flex;
  4253. align-items: flex-end;
  4254. }
  4255. .spu-popup {
  4256. /* height: 784rpx; */
  4257. width: 690rpx;
  4258. background: #fff;
  4259. padding: 40rpx 20rpx;
  4260. border-radius: 20rpx 20rpx 0 0;
  4261. margin: 0 30rpx;
  4262. }
  4263. .popup-good {
  4264. height: 130rpx;
  4265. display: flex;
  4266. padding: 0 0 30rpx 0;
  4267. border-bottom: 1rpx solid #eee;
  4268. justify-content: space-between;
  4269. }
  4270. .popup-good .left {
  4271. display: flex;
  4272. align-items: flex-end;
  4273. }
  4274. .popup-good .left image {
  4275. width: 100rpx;
  4276. height: 100rpx;
  4277. border-radius: 10rpx;
  4278. }
  4279. .popup-good .spu-price {
  4280. color: #ff1643;
  4281. font-size: 34rpx;
  4282. font-weight: bold;
  4283. margin: 0 14rpx 0 20rpx;
  4284. line-height: 30rpx;
  4285. }
  4286. .popup-good .spu-price text {
  4287. font-size: 48rpx;
  4288. }
  4289. .popup-good .spu-price-old {
  4290. text-decoration: line-through;
  4291. color: #999999;
  4292. font-size: 24rpx;
  4293. }
  4294. .sku-close {
  4295. width: 48rpx;
  4296. height: 48rpx;
  4297. }
  4298. .sku-list-block {
  4299. min-height: 420rpx;
  4300. padding-bottom: 40rpx;
  4301. }
  4302. .sku-list-block .spu-title {
  4303. height: 86rpx;
  4304. line-height: 86rpx;
  4305. font-weight: bold;
  4306. font-size: 28rpx;
  4307. }
  4308. .sku-list-block .sku-item {
  4309. margin-bottom: 12rpx;
  4310. display: flex;
  4311. background: #FAFAFA;
  4312. border-radius: 8rpx;
  4313. align-items: center;
  4314. justify-content: space-between;
  4315. height: 140rpx;
  4316. padding: 0 20rpx 0 24rpx;
  4317. font-weight: bold;
  4318. }
  4319. .sku-list-block .sku-item view {
  4320. font-size: 30rpx;
  4321. color: #A5A5A5;
  4322. }
  4323. .sku-list-block .sku-item view.sku-price {
  4324. color: #fe2b54;
  4325. font-weight: bold;
  4326. font-size: 32rpx;
  4327. }
  4328. .sku-list-block .sku-item.active-sku {
  4329. border: 2rpx solid #fe2b54;
  4330. }
  4331. .sku-list-block .sku-item.active-sku view {
  4332. color: #fe2b54;
  4333. }
  4334. .sku-btn {
  4335. width: 638rpx;
  4336. height: 90rpx;
  4337. border-radius: 24rpx;
  4338. line-height: 90rpx;
  4339. text-align: center;
  4340. color: #ffff;
  4341. background: #FE2C55;
  4342. font-size: 32rpx;
  4343. margin: 20rpx 6rpx 0;
  4344. /* font-weight: bold; */
  4345. }
  4346. .final-price {
  4347. flex: 1;
  4348. display: flex;
  4349. align-items: center;
  4350. height: 80rpx;
  4351. margin-left: 12rpx;
  4352. }
  4353. .final-price .total-new {
  4354. color: #ff1643;
  4355. font-size: 32rpx;
  4356. }
  4357. .final-price .total-new text {
  4358. font-size: 46rpx;
  4359. font-weight: bold;
  4360. }
  4361. .final-price .total-old {
  4362. text-decoration: line-through;
  4363. font-size: 24rpx;
  4364. color: #999;
  4365. margin-left: 12rpx;
  4366. padding-top: 10rpx;
  4367. }
  4368. /* 关联工单 */
  4369. .service-list {
  4370. margin: 0 24rpx;
  4371. }
  4372. .service-item {
  4373. margin-top: 24rpx;
  4374. background: #ffffff;
  4375. border-radius: 24rpx;
  4376. width: 702rpx;
  4377. padding: 0 24rpx;
  4378. }
  4379. .order-title {
  4380. height: 100rpx;
  4381. line-height: 100rpx;
  4382. font-weight: bold;
  4383. color: #000;
  4384. font-size: 32rpx;
  4385. border-bottom: 2rpx solid #e0e0e0;
  4386. }
  4387. .service-item .service-title {
  4388. height: 80rpx;
  4389. display: flex;
  4390. align-items: center;
  4391. border-bottom: 2rpx solid #e0e0e0;
  4392. }
  4393. .service-title .sercive-name {
  4394. color: #191919;
  4395. font-size: 30rpx;
  4396. font-weight: bold;
  4397. }
  4398. .service-title .service-id {
  4399. color: #666666;
  4400. font-size: 24rpx;
  4401. margin: 0 12rpx 0 0;
  4402. flex: 1;
  4403. }
  4404. .service-title .service-status {
  4405. color: #008dff;
  4406. font-size: 26rpx;
  4407. }
  4408. .service-main {
  4409. padding: 12rpx 0 16rpx;
  4410. }
  4411. .customer-info {
  4412. display: flex;
  4413. align-items: center;
  4414. }
  4415. .customer-info image {
  4416. width: 48rpx;
  4417. height: 48rpx;
  4418. margin-right: 24rpx;
  4419. }
  4420. .customer-info .customer-main {
  4421. display: flex;
  4422. padding: 18rpx 0 4rpx;
  4423. flex-direction: column;
  4424. flex: 1;
  4425. }
  4426. .main-line {
  4427. display: flex;
  4428. height: 44rpx;
  4429. margin-bottom: 4rpx;
  4430. align-items: center;
  4431. }
  4432. .main-line view {
  4433. color: #333333;
  4434. font-size: 32rpx;
  4435. }
  4436. .main-line view.phone {
  4437. color: #999999;
  4438. font-size: 24rpx;
  4439. margin-left: 14rpx;
  4440. }
  4441. .customer-info .customer-address {
  4442. color: #666666;
  4443. line-height: 40rpx;
  4444. }
  4445. .service-main .row {
  4446. /* height: 56rpx;
  4447. line-height: 56rpx; */
  4448. display: flex;
  4449. color: rgba(0, 0, 0, 0.9);
  4450. font-size: 26rpx;
  4451. font-weight: bold;
  4452. align-items: center;
  4453. margin: 10rpx 0;
  4454. }
  4455. .service-main .row text {
  4456. color: #666666;
  4457. font-weight: normal;
  4458. /* white-space: nowrap; */
  4459. }
  4460. .service-remark-wrapper {
  4461. padding: 24rpx 0;
  4462. border-top: 2rpx solid #e0e0e0;
  4463. }
  4464. .service-store {
  4465. height: 36rpx;
  4466. display: flex;
  4467. align-items: center;
  4468. justify-content: space-between;
  4469. }
  4470. .service-store>view {
  4471. display: flex;
  4472. height: 36rpx;
  4473. align-items: center;
  4474. }
  4475. .store-left image {
  4476. width: 36rpx;
  4477. height: 36rpx;
  4478. margin-right: 16rpx;
  4479. }
  4480. .store-left view {
  4481. color: rgba(0, 0, 0, 0.9);
  4482. font-size: 26rpx;
  4483. font-weight: bold;
  4484. }
  4485. .store-right view {
  4486. color: #666666;
  4487. font-size: 24rpx;
  4488. }
  4489. .store-right image {
  4490. width: 24rpx;
  4491. height: 24rpx;
  4492. margin-left: 16rpx;
  4493. }
  4494. .service-remark-wrapper .service-remark {
  4495. width: 652rpx;
  4496. /* height: 56rpx; */
  4497. line-height: 44rpx;
  4498. background: #ebebeb;
  4499. border-radius: 16rpx;
  4500. color: #000000;
  4501. padding: 8rpx 16rpx;
  4502. /* white-space: nowrap;
  4503. text-overflow: ellipsis;*/
  4504. display: -webkit-box;
  4505. -webkit-box-orient: vertical;
  4506. -webkit-line-clamp: 2;
  4507. text-overflow: ellipsis;
  4508. overflow: hidden;
  4509. margin-top: 20rpx;
  4510. }
  4511. .service-remark text {
  4512. color: #fe2b54;
  4513. font-weight: bold;
  4514. }
  4515. .service-operate {
  4516. padding: 24rpx 0;
  4517. border-top: 2rpx solid #e0e0e0;
  4518. display: flex;
  4519. justify-content: flex-end;
  4520. }
  4521. .service-operate view {
  4522. width: 160rpx;
  4523. height: 56rpx;
  4524. line-height: 56rpx;
  4525. border-radius: 28rpx;
  4526. text-align: center;
  4527. color: #f9f4f5;
  4528. font-size: 24rpx;
  4529. background: linear-gradient(90deg, #00baff 0%, #008dff 100%);
  4530. margin-left: 28rpx;
  4531. }
  4532. .sku-popup-title {
  4533. font-weight: bold;
  4534. font-size: 32rpx;
  4535. color: #333;
  4536. padding-left: 20rpx;
  4537. }
  4538. .sku-popup-tips {
  4539. color: #888;
  4540. font-size: 24rpx;
  4541. padding: 10rpx 0 32rpx 20rpx;
  4542. border-bottom: 1rpx solid #eee;
  4543. margin-bottom: 32rpx;
  4544. }
  4545. .sku-popup-btntip {
  4546. color: #FE2C55;
  4547. font-size: 18rpx;
  4548. text-align: center;
  4549. }
  4550. .xinke {
  4551. position: absolute;
  4552. background-color: #DB1A1A;
  4553. margin-left: 505rpx;
  4554. margin-top: -102rpx;
  4555. width: 110rpx;
  4556. height: 38rpx;
  4557. float: right;
  4558. line-height: 40rpx;
  4559. text-align: center;
  4560. color: white;
  4561. border-bottom-left-radius: 20rpx;
  4562. font-size: 22rpx;
  4563. border-top-right-radius: 14rpx;
  4564. }
  4565. .bottom-appointment-tips {
  4566. width: 100%;
  4567. height: 54rpx;
  4568. background-color: #FFE1E5;
  4569. line-height: 54rpx;
  4570. }
  4571. /* .appoint-fire {
  4572. transition: opacity 1s ease-in-out;
  4573. width: 100%;
  4574. height: 54rpx;
  4575. background-image: url('https://mall.zhaijieshi.cc/file/wx-dy/ts.png');
  4576. background-repeat: no-repeat;
  4577. background-size: cover;
  4578. } */
  4579. /* 定义关键帧 */
  4580. @keyframes fadeIn {
  4581. from {
  4582. opacity: 0;
  4583. }
  4584. to {
  4585. opacity: 1;
  4586. width: 100%;
  4587. height: 54rpx;
  4588. background-image: url('https://mall.zhaijieshi.cc/file/wx-dy/ts.png');
  4589. background-repeat: no-repeat;
  4590. background-size: cover;
  4591. }
  4592. }
  4593. /* 应用动画 */
  4594. .appoint-fire {
  4595. animation-name: fadeIn;
  4596. /* 指定动画名称 */
  4597. animation-duration: 2s;
  4598. /* 动画持续时间 */
  4599. animation-delay: 5s;
  4600. /* 动画开始前的延迟时间 */
  4601. animation-fill-mode: forwards;
  4602. /* 动画结束后保持最后一帧的样式 */
  4603. }
  4604. .bottom-appointment-tips view .jinqi {
  4605. background-color: #FE2C55;
  4606. color: #fff;
  4607. width: 86rpx;
  4608. height: 28rpx;
  4609. font-size: 18rpx;
  4610. line-height: 28rpx;
  4611. border-radius: 16rpx;
  4612. display: inline-block;
  4613. text-align: center;
  4614. /* position: relative;
  4615. top: -2px; */
  4616. margin: 0 10rpx 0 24rpx;
  4617. }
  4618. .bottom-appointment-tips view .selected-sku {
  4619. color: #676767;
  4620. font-size: 22rpx;
  4621. }
  4622. .discount {
  4623. display: flex;
  4624. background-color: #FFEEEB;
  4625. width: 190rpx;
  4626. height: 36rpx;
  4627. line-height: 36rpx;
  4628. font-size: 24rpx;
  4629. text-align: center;
  4630. margin: 10rpx 0 0 24rpx;
  4631. border-radius: 6rpx;
  4632. color: #FE2C55;
  4633. justify-content: center;
  4634. position: relative;
  4635. top: -20rpx;
  4636. }
  4637. .discount .discount-img {
  4638. width: 21rpx;
  4639. height: 21rpx;
  4640. margin: 2rpx 6rpx 0 2rpx;
  4641. }
  4642. .discount .discount-img image {
  4643. width: 100%;
  4644. height: 100%;
  4645. }
  4646. .random {
  4647. background-color: #f5f5f5;
  4648. position: relative;
  4649. top: -24rpx;
  4650. padding-top: 16rpx;
  4651. border-radius: 24rpx 24rpx 0 0;
  4652. }
  4653. .goods-container {
  4654. font-weight: 400;
  4655. font-family: AlibabaPuHuiTi_2_55_Regular;
  4656. }
  4657. </style>