index.vue 109 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350351352353354355356357358359360361362363364365366367368369370371372373374375376377378379380381382383384385386387388389390391392393394395396397398399400401402403404405406407408409410411412413414415416417418419420421422423424425426427428429430431432433434435436437438439440441442443444445446447448449450451452453454455456457458459460461462463464465466467468469470471472473474475476477478479480481482483484485486487488489490491492493494495496497498499500501502503504505506507508509510511512513514515516517518519520521522523524525526527528529530531532533534535536537538539540541542543544545546547548549550551552553554555556557558559560561562563564565566567568569570571572573574575576577578579580581582583584585586587588589590591592593594595596597598599600601602603604605606607608609610611612613614615616617618619620621622623624625626627628629630631632633634635636637638639640641642643644645646647648649650651652653654655656657658659660661662663664665666667668669670671672673674675676677678679680681682683684685686687688689690691692693694695696697698699700701702703704705706707708709710711712713714715716717718719720721722723724725726727728729730731732733734735736737738739740741742743744745746747748749750751752753754755756757758759760761762763764765766767768769770771772773774775776777778779780781782783784785786787788789790791792793794795796797798799800801802803804805806807808809810811812813814815816817818819820821822823824825826827828829830831832833834835836837838839840841842843844845846847848849850851852853854855856857858859860861862863864865866867868869870871872873874875876877878879880881882883884885886887888889890891892893894895896897898899900901902903904905906907908909910911912913914915916917918919920921922923924925926927928929930931932933934935936937938939940941942943944945946947948949950951952953954955956957958959960961962963964965966967968969970971972973974975976977978979980981982983984985986987988989990991992993994995996997998999100010011002100310041005100610071008100910101011101210131014101510161017101810191020102110221023102410251026102710281029103010311032103310341035103610371038103910401041104210431044104510461047104810491050105110521053105410551056105710581059106010611062106310641065106610671068106910701071107210731074107510761077107810791080108110821083108410851086108710881089109010911092109310941095109610971098109911001101110211031104110511061107110811091110111111121113111411151116111711181119112011211122112311241125112611271128112911301131113211331134113511361137113811391140114111421143114411451146114711481149115011511152115311541155115611571158115911601161116211631164116511661167116811691170117111721173117411751176117711781179118011811182118311841185118611871188118911901191119211931194119511961197119811991200120112021203120412051206120712081209121012111212121312141215121612171218121912201221122212231224122512261227122812291230123112321233123412351236123712381239124012411242124312441245124612471248124912501251125212531254125512561257125812591260126112621263126412651266126712681269127012711272127312741275127612771278127912801281128212831284128512861287128812891290129112921293129412951296129712981299130013011302130313041305130613071308130913101311131213131314131513161317131813191320132113221323132413251326132713281329133013311332133313341335133613371338133913401341134213431344134513461347134813491350135113521353135413551356135713581359136013611362136313641365136613671368136913701371137213731374137513761377137813791380138113821383138413851386138713881389139013911392139313941395139613971398139914001401140214031404140514061407140814091410141114121413141414151416141714181419142014211422142314241425142614271428142914301431143214331434143514361437143814391440144114421443144414451446144714481449145014511452145314541455145614571458145914601461146214631464146514661467146814691470147114721473147414751476147714781479148014811482148314841485148614871488148914901491149214931494149514961497149814991500150115021503150415051506150715081509151015111512151315141515151615171518151915201521152215231524152515261527152815291530153115321533153415351536153715381539154015411542154315441545154615471548154915501551155215531554155515561557155815591560156115621563156415651566156715681569157015711572157315741575157615771578157915801581158215831584158515861587158815891590159115921593159415951596159715981599160016011602160316041605160616071608160916101611161216131614161516161617161816191620162116221623162416251626162716281629163016311632163316341635163616371638163916401641164216431644164516461647164816491650165116521653165416551656165716581659166016611662166316641665166616671668166916701671167216731674167516761677167816791680168116821683168416851686168716881689169016911692169316941695169616971698169917001701170217031704170517061707170817091710171117121713171417151716171717181719172017211722172317241725172617271728172917301731173217331734173517361737173817391740174117421743174417451746174717481749175017511752175317541755175617571758175917601761176217631764176517661767176817691770177117721773177417751776177717781779178017811782178317841785178617871788178917901791179217931794179517961797179817991800180118021803180418051806180718081809181018111812181318141815181618171818181918201821182218231824182518261827182818291830183118321833183418351836183718381839184018411842184318441845184618471848184918501851185218531854185518561857185818591860186118621863186418651866186718681869187018711872187318741875187618771878187918801881188218831884188518861887188818891890189118921893189418951896189718981899190019011902190319041905190619071908190919101911191219131914191519161917191819191920192119221923192419251926192719281929193019311932193319341935193619371938193919401941194219431944194519461947194819491950195119521953195419551956195719581959196019611962196319641965196619671968196919701971197219731974197519761977197819791980198119821983198419851986198719881989199019911992199319941995199619971998199920002001200220032004200520062007200820092010201120122013201420152016201720182019202020212022202320242025202620272028202920302031203220332034203520362037203820392040204120422043204420452046204720482049205020512052205320542055205620572058205920602061206220632064206520662067206820692070207120722073207420752076207720782079208020812082208320842085208620872088208920902091209220932094209520962097209820992100210121022103210421052106210721082109211021112112211321142115211621172118211921202121212221232124212521262127212821292130213121322133213421352136213721382139214021412142214321442145214621472148214921502151215221532154215521562157215821592160216121622163216421652166216721682169217021712172217321742175217621772178217921802181218221832184218521862187218821892190219121922193219421952196219721982199220022012202220322042205220622072208220922102211221222132214221522162217221822192220222122222223222422252226222722282229223022312232223322342235223622372238223922402241224222432244224522462247224822492250225122522253225422552256225722582259226022612262226322642265226622672268226922702271227222732274227522762277227822792280228122822283228422852286228722882289229022912292229322942295229622972298229923002301230223032304230523062307230823092310231123122313231423152316231723182319232023212322232323242325232623272328232923302331233223332334233523362337233823392340234123422343234423452346234723482349235023512352235323542355235623572358235923602361236223632364236523662367236823692370237123722373237423752376237723782379238023812382238323842385238623872388238923902391239223932394239523962397239823992400240124022403240424052406240724082409241024112412241324142415241624172418241924202421242224232424242524262427242824292430243124322433243424352436243724382439244024412442244324442445244624472448244924502451245224532454245524562457245824592460246124622463246424652466246724682469247024712472247324742475247624772478247924802481248224832484248524862487248824892490249124922493249424952496249724982499250025012502250325042505250625072508250925102511251225132514251525162517251825192520252125222523252425252526252725282529253025312532253325342535253625372538253925402541254225432544254525462547254825492550255125522553255425552556255725582559256025612562256325642565256625672568256925702571257225732574257525762577257825792580258125822583258425852586258725882589259025912592259325942595259625972598259926002601260226032604260526062607260826092610261126122613261426152616261726182619262026212622262326242625262626272628262926302631263226332634263526362637263826392640264126422643264426452646264726482649265026512652265326542655265626572658265926602661266226632664266526662667266826692670267126722673267426752676267726782679268026812682268326842685268626872688268926902691269226932694269526962697269826992700270127022703270427052706270727082709271027112712271327142715271627172718271927202721272227232724272527262727272827292730273127322733273427352736273727382739274027412742274327442745274627472748274927502751275227532754275527562757275827592760276127622763276427652766276727682769277027712772277327742775277627772778277927802781278227832784278527862787278827892790279127922793279427952796279727982799280028012802280328042805280628072808280928102811281228132814281528162817281828192820282128222823282428252826282728282829283028312832283328342835283628372838283928402841284228432844284528462847284828492850285128522853285428552856285728582859286028612862286328642865286628672868286928702871287228732874287528762877287828792880288128822883288428852886288728882889289028912892289328942895289628972898289929002901290229032904290529062907290829092910291129122913291429152916291729182919292029212922292329242925292629272928292929302931293229332934293529362937293829392940294129422943294429452946294729482949295029512952295329542955295629572958295929602961296229632964296529662967296829692970297129722973297429752976297729782979298029812982298329842985298629872988298929902991299229932994299529962997299829993000300130023003300430053006300730083009301030113012301330143015301630173018301930203021302230233024302530263027302830293030303130323033303430353036303730383039304030413042304330443045304630473048304930503051305230533054305530563057305830593060306130623063306430653066306730683069307030713072307330743075307630773078307930803081308230833084308530863087308830893090309130923093309430953096309730983099310031013102310331043105310631073108310931103111311231133114311531163117311831193120312131223123312431253126312731283129313031313132313331343135313631373138313931403141314231433144314531463147314831493150315131523153315431553156315731583159316031613162316331643165316631673168316931703171317231733174317531763177317831793180318131823183318431853186318731883189319031913192319331943195319631973198319932003201320232033204320532063207320832093210321132123213321432153216321732183219322032213222322332243225322632273228322932303231323232333234323532363237323832393240324132423243324432453246324732483249325032513252325332543255325632573258325932603261326232633264326532663267326832693270327132723273327432753276327732783279328032813282328332843285328632873288328932903291329232933294329532963297329832993300330133023303330433053306330733083309331033113312331333143315331633173318331933203321332233233324332533263327332833293330333133323333333433353336333733383339334033413342334333443345334633473348334933503351335233533354335533563357335833593360336133623363336433653366336733683369337033713372337333743375337633773378337933803381338233833384338533863387338833893390339133923393339433953396339733983399340034013402340334043405340634073408340934103411341234133414341534163417341834193420342134223423342434253426342734283429343034313432343334343435343634373438343934403441344234433444344534463447344834493450345134523453345434553456345734583459346034613462346334643465346634673468346934703471347234733474347534763477347834793480348134823483348434853486348734883489349034913492349334943495349634973498349935003501350235033504350535063507350835093510351135123513351435153516351735183519352035213522352335243525352635273528352935303531353235333534353535363537353835393540354135423543354435453546354735483549355035513552355335543555355635573558355935603561356235633564356535663567356835693570357135723573357435753576357735783579
  1. <template>
  2. <view :data-theme="theme">
  3. <tui-skeleton v-if="showSkeleton"></tui-skeleton>
  4. <view class="product-con tui-skeleton" :style="{ visibility: showSkeleton ? 'hidden' : 'visible' }">
  5. <view class="navbar" :class="opacity > 0.6 ? 'bgwhite' : ''">
  6. <view class="navbarH" :style="'height:' + navH + 'rpx;'">
  7. <view class="navbarCon acea-row" :style="{ paddingRight: navbarRight + 'px' }">
  8. <nav-bar iconColor='#fff' :isBackgroundColor="false" ref="navBarRef" :isHeight="false">
  9. </nav-bar>
  10. <!-- 头部tab标题 -->
  11. <!-- #ifdef H5 || APP-PLUS-->
  12. <view class="tab_nav" v-show="opacity > 0.6">
  13. <view class="header flex align-center">
  14. <view class="item" :class="
  15. navActive === index &&
  16. (marketingType === ProductMarketingTypeEnum.Groupbuying||productType === ProductTypeEnum.Integral)
  17. ? 'groupTabOn'
  18. : navActive === index
  19. ? 'on'
  20. : ''
  21. "
  22. v-for="(item, index) in navList" :key="index" @tap="tap(index)">
  23. {{ item }}
  24. </view>
  25. <view style="width: 10rpx;height: 2px;" @click="listenerActionSheet"></view>
  26. </view>
  27. </view>
  28. <!-- #endif -->
  29. <!-- 分享 -->
  30. <view class="iconfont icon-ic_share1" :style="[shareStyle]" @click="listenerActionSheet"> </view>
  31. </view>
  32. </view>
  33. </view>
  34. <!-- 导航小图标 -->
  35. <view class="dialog_nav" v-show="currentPage" :style="{ top: navH + 'rpx' }">
  36. <view class="dialog_nav_item" :class="item.after" v-for="(item, index) in selectNavList" :key="index" @click="linkPage(item.url)">
  37. <text class="iconfont" :class="item.icon"></text>
  38. <text class="pl-20">{{ item.name }}</text>
  39. </view>
  40. </view>
  41. <!-- 商品详情 -->
  42. <view class="detail_container" @touchstart="touchStart">
  43. <scroll-view :scroll-top="scrollTop" scroll-y="true" scroll-with-animation="true" :style="'height:' + height + 'px;'"
  44. @scroll="scroll">
  45. <view id="past0">
  46. <!-- #ifdef MP || APP-PLUS -->
  47. <view class="" :style="'width:100%;' + 'height:' + sysHeight + 'px'"></view>
  48. <!-- #endif -->
  49. <productConSwiper v-if="!dataItem" class="tui-skeleton-rect" :isGroup="marketingType" :imgUrls="sliderImage" :videoline="videoLink"
  50. :productType="productType" @videoPause="videoPause">
  51. </productConSwiper>
  52. <view v-if="dataItem">
  53. <view class="imageBox">
  54. <swiper v-if="dataItem.type ===1 && dataItem.image && dataItem.image.split(',').length>1"
  55. :indicator-dots="true" indicator-active-color="#e93323" :circular="true"
  56. :interval="interval" :duration="duration" style="height:430px">
  57. <block v-for="(item,index) in dataItem.image.split(',')" :key='index'>
  58. <swiper-item class="cover">
  59. <easy-loadimage mode="heightFix" :image-src="item"
  60. style="height:430px"></easy-loadimage>
  61. </swiper-item>
  62. </block>
  63. </swiper>
  64. <view
  65. v-if="dataItem.type ===2 || (dataItem.type ===1 &&dataItem.image && dataItem.image.split(',').length===1)">
  66. <view class="cover" @click="goVideoDetail(dataItem)" style="height:430px">
  67. <easy-loadimage mode="heightFix" :image-src="dataItem.cover" style="height:430px"></easy-loadimage>
  68. <view v-if="dataItem.type ===2" class="circle">
  69. <text class="iconfont icon-24gf-play"></text>
  70. </view>
  71. </view>
  72. </view>
  73. </view>
  74. </view>
  75. <!-- 秒杀card -->
  76. <seckill-card v-if="marketingType === ProductMarketingTypeEnum.Seckill" :seckillStatus="seckillStatus"
  77. :seckillTime="seckillTime" :productInfo="productInfo" :productPrice="productPrice"></seckill-card>
  78. <!-- 拼团card -->
  79. <group-card :productInfo="attr.productSelect" :groupBuyActivityResponse="groupBuyActivityResponse" v-if="marketingType === ProductMarketingTypeEnum.Groupbuying"></group-card>
  80. <!-- 氛围图card -->
  81. <activity-style v-if="productInfo.activityStyle" :productPrice="productPrice" :productInfo="productInfo"></activity-style>
  82. <view class="borderPad" :class="
  83. marketingType === ProductMarketingTypeEnum.Seckill ||
  84. marketingType === ProductMarketingTypeEnum.Groupbuying
  85. ? 'mtop'
  86. : ''
  87. ">
  88. <view class="wrapper mb20 borRadius14">
  89. <view v-if="
  90. marketingType === ProductMarketingTypeEnum.Normal &&
  91. !productInfo.activityStyle
  92. ">
  93. <view class="share acea-row row-between mb10">
  94. <!-- 积分商品价格 -->
  95. <view v-if="productType === ProductTypeEnum.Integral" class="flex-y-center font-color-red">
  96. <span class="semiBold font-color-red fs-40">{{
  97. productPrice.redeemIntegral
  98. }}</span><span class="f-s-36 font-color-red ml-4">积分</span>
  99. <view v-show="productPrice.price > 0" class="ml-4">
  100. +
  101. <span class="semiBold ml-4 fs-40">{{
  102. productPrice.price
  103. }}</span><span class="f-s-36 font-color-red ml-4">元</span>
  104. </view>
  105. </view>
  106. <!-- 其他商品价格 -->
  107. <svip-price v-else :svipIconStyle="svipIconStyle" :productPrice="productPrice" :svipPriceStyle="svipPriceStyle"></svip-price>
  108. <!-- 收藏 -->
  109. <view v-show="productType !== ProductTypeEnum.Integral" @click="setCollect" class="item tui-skeleton-rect">
  110. <view class="iconfont icon-shoucang1 " :class="
  111. marketingType === ProductMarketingTypeEnum.Groupbuying
  112. ? 'color-normal'
  113. : 'color-change'
  114. "
  115. v-if="userCollect"></view>
  116. <view class="iconfont icon-shoucang" v-else></view>
  117. </view>
  118. <!-- <view class="iconfont icon-fenxiang" @click="listenerActionSheet"></view> -->
  119. </view>
  120. <view v-if="couponList.length > 0" class="acea-row row-between-wrapper">
  121. <view class="flex-1 acea-row row-middle">
  122. <span v-for="(item, index) in couponList" class="coupon_label">{{
  123. item.minPrice === 0
  124. ? "无门槛减" + item.money
  125. : "满" + item.minPrice + "减" + item.money
  126. }}</span>
  127. </view>
  128. <view class="coupon_more" @click="couponTap">领券<text class="iconfont icon-you"></text>
  129. </view>
  130. </view>
  131. <view class="introduce tui-skeleton-rect line2 mt30" v-if="!dataItem">{{productInfo.name}}</view>
  132. <view class="introduce tui-skeleton-rect line2 mt30" v-else>{{dataItem.content}}</view>
  133. </view>
  134. <view v-if="marketingType !== ProductMarketingTypeEnum.Normal" class="share acea-row row-between row-middle">
  135. <view class="introduce tui-skeleton-rect line2 lineWidth">{{ productInfo.name }}
  136. </view>
  137. <!-- 收藏 -->
  138. <view v-show="productType !== ProductTypeEnum.Integral" @click="setCollect" class="item tui-skeleton-rect">
  139. <view class="iconfont icon-shoucang1 " :class="
  140. marketingType === ProductMarketingTypeEnum.Groupbuying
  141. ? 'color-normal'
  142. : 'color-change'
  143. "
  144. v-if="userCollect"></view>
  145. <view class="iconfont icon-shoucang" v-else></view>
  146. </view>
  147. <!-- <view class="iconfont icon-fenxiang" @click="listenerActionSheet"></view> -->
  148. </view>
  149. <view v-if="
  150. marketingType === ProductMarketingTypeEnum.Normal &&
  151. productInfo.activityStyle
  152. ">
  153. <view v-if="couponList.length > 0" class="acea-row row-between-wrapper mb30">
  154. <view class="flex-1 acea-row row-middle">
  155. <span v-for="(item, index) in couponList" class="coupon_label">{{
  156. item.minPrice === 0
  157. ? "无门槛减" + item.money
  158. : "满" + item.minPrice + "减" + item.money
  159. }}</span>
  160. </view>
  161. <view class="coupon_more" @click="couponTap">领券<text class="iconfont icon-you"></text>
  162. </view>
  163. </view>
  164. <view class="share acea-row row-between row-middle">
  165. <view class="introduce tui-skeleton-rect line2 lineWidth">{{ productInfo.name }}
  166. </view>
  167. <!-- 收藏 -->
  168. <view v-show="productType !== ProductTypeEnum.Integral" @click="setCollect" class="item tui-skeleton-rect">
  169. <view class="iconfont icon-shoucang1 " :class="
  170. marketingType === ProductMarketingTypeEnum.Groupbuying
  171. ? 'color-normal'
  172. : 'color-change'
  173. "
  174. v-if="userCollect"></view>
  175. <view class="iconfont icon-shoucang" v-else></view>
  176. </view>
  177. <!-- <view class="iconfont icon-fenxiang" @click="listenerActionSheet"></view> -->
  178. </view>
  179. </view>
  180. <view class="label acea-row row-between-wrapper" v-if="!dataItem">
  181. <view class="tui-skeleton-rect" v-if="
  182. marketingType === ProductMarketingTypeEnum.Groupbuying
  183. ">
  184. 价格¥{{ attr.productSelect.otPrice || 0 }}</view>
  185. <view class="tui-skeleton-rect" v-else>
  186. {{
  187. productType === ProductTypeEnum.Integral
  188. ? "价格:"
  189. : "价格:"
  190. }}¥{{
  191. productType === ProductTypeEnum.Integral
  192. ? attr.productSelect.cost
  193. : attr.productSelect.otPrice || 0
  194. }}
  195. </view>
  196. <!-- 拼团库存 -->
  197. <view class="tui-skeleton-rect" v-if="
  198. marketingType === ProductMarketingTypeEnum.Groupbuying
  199. ">
  200. 库存:{{ attr.productSelect.stock>0?attr.productSelect.groupStock:0}}{{ productInfo.unitName || "" }}
  201. </view>
  202. <!-- 普通库存 -->
  203. <view class="tui-skeleton-rect" v-else>
  204. 库存:{{ attr.productSelect.stock || 0}}{{ productInfo.unitName || "" }}
  205. </view>
  206. <!-- 拼团销量 -->
  207. <view class="tui-skeleton-rect" v-if="
  208. marketingType === ProductMarketingTypeEnum.Groupbuying
  209. ">
  210. {{`销量:${groupBuyActivityResponse.sales}`}}{{ productInfo.unitName || "" }}
  211. </view>
  212. <!-- 其他销量 -->
  213. <view class="tui-skeleton-rect" v-if="
  214. marketingType !== ProductMarketingTypeEnum.Groupbuying
  215. ">
  216. {{
  217. productType === ProductTypeEnum.Integral
  218. ? "已兑换:"
  219. : "销量:"
  220. }}{{
  221. Math.floor(productInfo.sales) +
  222. Math.floor(productInfo.ficti) || 0
  223. }}{{ productInfo.unitName || "" }}
  224. </view>
  225. </view>
  226. <view class="coupon acea-row row-between-wrapper" v-if="activityH5.length">
  227. <view class="line1 acea-row">
  228. <text class="activityName tui-skeleton-rect">活&nbsp;&nbsp;&nbsp;动:</text>
  229. <view v-for="(item, index) in activityH5" :key="index" @click="goActivity(item)" class="activityBox">
  230. <view v-if="item.type === '1'" class="tui-skeleton-rect" :class="
  231. index == 0
  232. ? 'activity_pin'
  233. : '' || index == 1
  234. ? 'activity_miao'
  235. : '' || index == 2
  236. ? 'activity_kan'
  237. : ''
  238. ">
  239. <text class="iconfonts iconfont icon-miaosha1"></text>
  240. <text class="activity_title"> 参与秒杀</text>
  241. </view>
  242. <view class="tui-skeleton-rect" :class="
  243. index == 0
  244. ? 'activity_pin'
  245. : '' || index == 1
  246. ? 'activity_miao'
  247. : '' || index == 2
  248. ? 'activity_kan'
  249. : ''
  250. "
  251. v-if="item.type === '2'">
  252. <text class="iconfonts iconfont icon-kanjia"></text>
  253. <text class="activity_title"> 参与砍价</text>
  254. </view>
  255. </view>
  256. </view>
  257. </view>
  258. </view>
  259. <!-- 规格、保障服务 -->
  260. <view class="attribute mb20 borRadius14 tui-skeleton-rect" v-if="!dataItem">
  261. <view class="acea-row row-between-wrapper" @click="selecAttr">
  262. <view class="line1 text-666">{{ attrTxt }}:
  263. <text class="atterTxt text-333">{{ attrValue }}</text>
  264. </view>
  265. <view class="iconfont icon-jiantou"></view>
  266. </view>
  267. <view class="acea-row row-between-wrapper" style="margin-top: 7px; padding-left: 55px" v-if="skuImage.length > 1">
  268. <view class="flex">
  269. <image :src="item" v-for="(item, index) in skuImage" :key="index" class="attrImg"></image>
  270. </view>
  271. <view class="switchTxt">共{{ skuArr.length }}种规格可选</view>
  272. </view>
  273. <view v-if="guaranteeList.length > 0" class="acea-row row-between-wrapper" @click="assureDrawer = true" style="margin-top: 45rpx">
  274. <view class="line1 tui-skeleton-fillet">
  275. <text class="text-666 fw-bold">保&nbsp;&nbsp;&nbsp;障:</text>
  276. <text class="text-333 tui-skeleton-fillet" v-for="(item, index) in guaranteeList" :key="index">{{ item.name }}
  277. ·
  278. </text>
  279. </view>
  280. <view class="iconfont icon-jiantou"></view>
  281. </view>
  282. </view>
  283. </view>
  284. </view>
  285. <!-- 正在拼团 -->
  286. <group-doing :processItem="groupBuyActivityResponse.processItem" :groupBuyActivityResponse="groupBuyActivityResponse"
  287. @toGroup="toGroup" v-if="
  288. marketingType === ProductMarketingTypeEnum.Groupbuying &&
  289. groupBuyActivityResponse.showGroup
  290. "></group-doing>
  291. <!-- 拼团玩法 -->
  292. <group-playing v-if="marketingType === ProductMarketingTypeEnum.Groupbuying"></group-playing>
  293. <!-- 评价 -->
  294. <view v-show="productType !== ProductTypeEnum.Integral && replyCount > 0" id="past1" class="borderPad">
  295. <view class="userEvaluation tui-skeleton-rect">
  296. <view class="title acea-row row-between-wrapper" :style="
  297. replyCount == 0
  298. ? 'border-bottom-left-radius:14rpx;border-bottom-right-radius:14rpx;'
  299. : ''
  300. ">
  301. <view>用户评价<i>({{ replyCount }})</i></view>
  302. <navigator class="praise" hover-class="none" :url="
  303. '/pages/goods/goods_comment_list/index?productId=' +
  304. (Number(masterProductId) > 0 ? masterProductId : id)
  305. ">
  306. <i>好评</i>&nbsp;<text :class="
  307. (marketingType === ProductMarketingTypeEnum.Groupbuying||productType === ProductTypeEnum.Integral)
  308. ? 'groupColor'
  309. : 'font_color'
  310. "
  311. class=" px-12">{{ $util.$h.Mul(replyChance, 100) || 0 }}%</text>
  312. <text class="iconfont icon-jiantou"></text>
  313. </navigator>
  314. </view>
  315. <block v-if="replyCount">
  316. <userEvaluation :reply="reply"></userEvaluation>
  317. </block>
  318. </view>
  319. </view>
  320. <!-- 店铺 判断一下是首页进来就显示店铺 详情进来不显示 0不显示 -->
  321. <block v-if="iSshop==1">
  322. <view class="borderPad" v-if="
  323. productType !== ProductTypeEnum.Integral &&
  324. marketingType !== ProductMarketingTypeEnum.Groupbuying
  325. ">
  326. <view class="superior borRadius14" v-if="merchantInfo">
  327. <merHome :merchantInfo="merchantInfo" :merId="productInfo.merId" type="home" :isShowTypeId="isShowTypeId" v-if="merchantInfo"></merHome>
  328. <view class="slider-banner banner">
  329. <view class="list acea-row row-middle">
  330. <view class="item" v-for="(val, indexw) in merchantInfo.proList" :key="indexw" @click="goDetail(val.id)">
  331. <view class="pictrue relative">
  332. <view v-show="val.stock===0" class="sellOut">已售罄</view>
  333. <easy-loadimage mode="widthFix" :image-src="val.image"></easy-loadimage>
  334. </view>
  335. <view class="name line1">{{ val.name }}</view>
  336. <view class="money theme_price">¥{{ val.price }}</view>
  337. </view>
  338. </view>
  339. </view>
  340. </view>
  341. </view>
  342. </block>
  343. <!-- 产品详情 -->
  344. <view class="product-intro detailText" id="past2" v-if="!dataItem">
  345. <view class="title">
  346. <image src="../static/images/xzuo.png"></image>
  347. <span class="sp">产品详情</span>
  348. <image src="../static/images/xyou.png"></image>
  349. </view>
  350. <view class="conter borRadius14">
  351. <view class="borRadius14">
  352. <!-- #ifdef MP || APP-PLUS -->
  353. <mp-html :content="description" :tag-style="tagStyle" />
  354. <!-- #endif -->
  355. <!-- #ifdef H5 -->
  356. <view v-html="description" class="w-100-p111-"></view>
  357. <!-- #endif -->
  358. </view>
  359. </view>
  360. </view>
  361. <view style="height: 120rpx"></view>
  362. </scroll-view>
  363. </view>
  364. <!-- 脚部按钮 -->
  365. <view class="footer acea-row row-between-wrapper">
  366. <!-- #ifdef MP -->
  367. <button hover-class="none" class="item tui-skeleton-rect" @click="kefuClick" v-if="chatConfig.telephone_service_switch === 'true'">
  368. <view class="iconfont icon-kefu"></view>
  369. <view>客服</view>
  370. </button>
  371. <!-- <button open-type="contact" hover-class="none" class="item tui-skeleton-rect" v-else>
  372. <view class="iconfont icon-kefu"></view>
  373. <view>客服</view>
  374. </button> -->
  375. <!-- #endif -->
  376. <!-- #ifndef MP -->
  377. <view class="item tui-skeleton-rect" @click="kefuClick">
  378. <view class="iconfont icon-kefu"></view>
  379. <view>客服</view>
  380. </view>
  381. <!-- #endif -->
  382. <!-- <navigator v-show="productType !== ProductTypeEnum.Integral"
  383. :url="`/pages/merchant/home/index?merId=${productInfo.merId}`" hover-class="none">
  384. <view class="item tui-skeleton-rect">
  385. <view class="iconfont icon-dianpu1"></view>
  386. <view>店铺</view>
  387. </view>
  388. </navigator> -->
  389. <!-- <navigator v-show="productType !== ProductTypeEnum.Integral" open-type="switchTab"
  390. class="animated item tui-skeleton-rect" :class="animated == true ? 'bounceIn' : ''"
  391. url="/pages/order_addcart/order_addcart" hover-class="none">
  392. <view class="iconfont icon-gouwuche1">
  393. <text v-if="Math.floor(CartCount) > 0" class="num bg_color">{{
  394. CartCount
  395. }}</text>
  396. </view>
  397. <view>购物车</view>
  398. </navigator> -->
  399. <!-- 普通商品 -->
  400. <block v-if="marketingType === ProductMarketingTypeEnum.Normal">
  401. <view class="bnt acea-row" v-if="attr.productSelect.stock <= 0">
  402. <form report-submit="true">
  403. <button class="longBnts bg-color-hui" form-type="submit" :class="
  404. productType == ProductTypeEnum.Integral ? 'w-640rpx' : ''
  405. ">
  406. 已售罄
  407. </button>
  408. </form>
  409. </view>
  410. <view class="bnt acea-row tui-skeleton-rect" v-else>
  411. <!-- 正常商品 -->
  412. <block v-if="productType === ProductTypeEnum.Normal">
  413. <form v-show="productInfo.systemFormId == 0" @submit="joinCart" report-submit="true">
  414. <!-- <button class="joinCart bnts" form-type="submit">
  415. 加入购物车
  416. </button> -->
  417. </form>
  418. <form @submit="goBuy" report-submit="true">
  419. <button style="border-radius: 0;" :class="productInfo.systemFormId == 0 ? 'bnts' : 'longBnts'" class="buy"
  420. form-type="submit">
  421. 立即购买
  422. </button>
  423. </form>
  424. </block>
  425. <!-- 积分商品 -->
  426. <block v-else-if="productType === ProductTypeEnum.Integral">
  427. <form @submit="goBuy" report-submit="true">
  428. <button class="longBnts w-640rpx" :class="
  429. productPrice.redeemIntegral > integral
  430. ? 'bg-color-hui'
  431. : 'bg-red'
  432. "
  433. :disabled="productPrice.redeemIntegral > integral" form-type="submit">
  434. 立即兑换
  435. </button>
  436. </form>
  437. </block>
  438. <!-- 虚拟商品 -->
  439. <view v-else class="bnt bntVideo acea-row">
  440. <form @submit="goBuy" report-submit="true">
  441. <button class="buy bg-color longBnts" form-type="submit">
  442. 立即购买
  443. </button>
  444. </form>
  445. </view>
  446. </view>
  447. </block>
  448. <!-- 除去二级类型是普通商品的售罄按钮 -->
  449. <view v-if="
  450. (attr.productSelect.stock <= 0 ||
  451. (attr.productSelect.groupStock <= 0 &&
  452. marketingType === ProductMarketingTypeEnum.Groupbuying)) &&
  453. marketingType !== ProductMarketingTypeEnum.Normal
  454. "
  455. class="bnt bntVideo acea-row">
  456. <form report-submit="true">
  457. <button class="longBnts bg-color-hui" :class="
  458. productType === ProductTypeEnum.Integral ? 'w-640rpx' : ''
  459. "
  460. form-type="submit">
  461. 已售罄
  462. </button>
  463. </form>
  464. </view>
  465. <view class="bnt acea-row" v-if="
  466. marketingType === ProductMarketingTypeEnum.Groupbuying &&
  467. attr.productSelect.groupStock > 0 &&
  468. groupBuyActivityResponse.buyLimitCount == 0
  469. ">
  470. <form report-submit="true">
  471. <button class="longBnts bg-color-hui" form-type="submit">
  472. 超出限购数量
  473. </button>
  474. </form>
  475. </view>
  476. <!-- 秒杀商品 -->
  477. <view v-if="
  478. seckillStatus !== 1 &&
  479. marketingType === ProductMarketingTypeEnum.Seckill &&
  480. attr.productSelect.stock > 0
  481. "
  482. class="bnt acea-row">
  483. <form @submit="goDetail(masterProductId)" report-submit="true">
  484. <button class="joinCart bnts" form-type="submit">直接购买</button>
  485. </form>
  486. <form report-submit="true">
  487. <button class="bg-color-hui bnts" form-type="submit">
  488. {{ seckillStatus === 0 ? "活动已结束" : "活动未开始" }}
  489. </button>
  490. </form>
  491. </view>
  492. <!-- 秒杀商品、视频号商品购买 -->
  493. <view v-if="
  494. attr.productSelect.stock > 0 &&
  495. (productType === ProductTypeEnum.Video ||
  496. (marketingType === ProductMarketingTypeEnum.Seckill &&
  497. seckillStatus === 1))
  498. "
  499. class="bnt bntVideo acea-row">
  500. <form @submit="goBuy" report-submit="true">
  501. <button class="buy bg-color longBnts" form-type="submit">
  502. 立即购买
  503. </button>
  504. </form>
  505. </view>
  506. <!-- 拼团商品单独购买/开团 -->
  507. <view class="bnt acea-row tui-skeleton-rect" v-if="
  508. !(
  509. marketingType !== ProductMarketingTypeEnum.Groupbuying ||
  510. attr.productSelect.groupStock <= 0 ||
  511. (attr.productSelect.groupStock > 0 &&
  512. groupBuyActivityResponse.buyLimitCount == 0) ||
  513. attr.productSelect.stock == 0 ||
  514. groupRecordId != 0
  515. )
  516. ">
  517. <form @submit="toAloneBuy" report-submit="true" v-if="productInfo.isShow">
  518. <button class="joinCart bnts groupJoin" form-type="submit">单独购买</button>
  519. </form>
  520. <form @submit="goBuy" report-submit="true">
  521. <button :class="productInfo.isShow?'group-buy':'group-buy2'" class=" bnts" form-type="submit">立即开团</button>
  522. </form>
  523. </view>
  524. <view class="bnt acea-row tui-skeleton-rect" v-if="
  525. groupRecordId != 0 &&
  526. attr.productSelect.stock > 0 &&
  527. attr.productSelect.groupStock > 0 &&
  528. groupBuyActivityResponse.buyLimitCount != 0
  529. ">
  530. <form @submit="goBuy" report-submit="true">
  531. <button class="spredGroupStyle" form-type="submit">立即参团</button>
  532. </form>
  533. </view>
  534. </view>
  535. <!-- 组件 -->
  536. <productWindow :attr="attr" :isShow="1" :iSplus="1" @myevent="onMyEvent" @ChangeAttr="ChangeAttr" @ChangeCartNum="ChangeCartNum"
  537. @attrVal="attrVal" @iptCartNum="iptCartNum" id="product-window" @getImg="showImg" :productType="productType"
  538. :marketingType="marketingType" :groupBuyActivityResponse="groupBuyActivityResponse" @buyLimit="buyLimit">
  539. </productWindow>
  540. <couponListWindow :coupon="coupon" :typeNum="couponDeaultType[0].useType" @ChangCouponsClone="ChangCouponsClone"
  541. @ChangCoupons="ChangCoupons" @ChangCouponsUseState="ChangCouponsUseState" @tabCouponType="tabCouponType"></couponListWindow>
  542. <!-- 分享按钮 -->
  543. <view class="generate-posters" :class="posters ? 'on' : ''">
  544. <view class="generateCon acea-row row-middle">
  545. <!-- #ifndef MP -->
  546. <button class="item" hover-class="none" v-if="weixinStatus === true" @click="H5ShareBox = true">
  547. <view class="pictrue">
  548. <image src="../static/images/weixin.png"></image>
  549. </view>
  550. <view class="">分享给好友</view>
  551. </button>
  552. <!-- #endif -->
  553. <!-- #ifdef MP -->
  554. <button class="item" open-type="share" hover-class="none">
  555. <view class="pictrue">
  556. <image src="../static/images/weixin.png"></image>
  557. </view>
  558. <view class="">分享给好友</view>
  559. </button>
  560. <!-- #endif -->
  561. <!-- #ifdef APP-PLUS -->
  562. <view class="item" @click="appShare('WXSceneSession')">
  563. <view class="iconfont icon-weixin3"></view>
  564. <view class="">微信好友</view>
  565. </view>
  566. <view class="item" @click="appShare('WXSenceTimeline')">
  567. <view class="iconfont icon-pengyouquan"></view>
  568. <view class="">微信朋友圈</view>
  569. </view>
  570. <!-- #endif -->
  571. <!-- #ifdef H5 || MP -->
  572. <view class="item" @click="getpreviewImage">
  573. <view class="pictrue">
  574. <image src="../static/images/changan.png"></image>
  575. </view>
  576. <view class="">预览发图</view>
  577. </view>
  578. <!-- #endif -->
  579. <!-- #ifdef MP -->
  580. <button class="item" hover-class="none" @click="savePosterPath">
  581. <view class="pictrue">
  582. <image src="../static/images/haibao.png"></image>
  583. </view>
  584. <view class="">保存海报</view>
  585. </button>
  586. <!-- #endif -->
  587. </view>
  588. <view class="generateClose acea-row row-center-wrapper" @click="posterImageClose">取消</view>
  589. </view>
  590. <!-- 查看规格商品图 -->
  591. <cus-previewImg ref="cusPreviewImg" :list="skuArr" @changeSwitch="changeSwitch" @shareFriend="listenerActionSheet" />
  592. <view class="mask" v-if="posters" @click="closePosters"></view>
  593. <view class="mask" v-if="canvasStatus"></view>
  594. <view class="mask_transparent" v-if="currentPage" @touchmove="hideNav" @click="hideNav()"></view>
  595. <!-- 海报展示 -->
  596. <view class="poster-pop" v-if="canvasStatus">
  597. <image :src="imagePath"></image>
  598. </view>
  599. <view class="canvas" v-else>
  600. <canvas style="width: 750px; height: 1190px" canvas-id="firstCanvas"></canvas>
  601. <canvas canvas-id="qrcode" :style="{ width: `${qrcodeSize}px`, height: `${qrcodeSize}px` }" />
  602. </view>
  603. <!-- 发送给朋友图片 -->
  604. <view class="share-box" v-if="H5ShareBox">
  605. <image :src="urlDomain + 'crmebimage/presets/share-info.png'" @click="H5ShareBox = false"></image>
  606. </view>
  607. <!-- 保障服务弹窗 -->
  608. <tui-drawer mode="bottom" :visible="assureDrawer" @close="closeAssure">
  609. <view class="ensure">
  610. <view @click="closeAssure" class="title">保障服务<text class="iconfont icon-guanbi5"></text></view>
  611. <view class="list">
  612. <view class="item acea-row" v-for="(item, index) in guaranteeList" :key="index">
  613. <view class="pictrue">
  614. <!-- <image :src="item.icon"></image> -->
  615. <text :class="(marketingType === ProductMarketingTypeEnum.Groupbuying||productType === ProductTypeEnum.Integral)?'activityIcon':'iconColor'"
  616. class="iconfont icon-gou2"></text>
  617. </view>
  618. <view class="text">
  619. <view class="name">{{ item.name }}</view>
  620. <view>{{ item.content }}</view>
  621. </view>
  622. </view>
  623. </view>
  624. <view class="activityBtn" :class="(marketingType === ProductMarketingTypeEnum.Groupbuying||productType === ProductTypeEnum.Integral)?'bg-red':'bnt'"
  625. @click="assureDrawer = false">完成</view>
  626. </view>
  627. </tui-drawer>
  628. </view>
  629. </view>
  630. </template>
  631. <script>
  632. // +----------------------------------------------------------------------
  633. // | CRMEB [ CRMEB赋能开发者,助力企业发展 ]
  634. // +----------------------------------------------------------------------
  635. // | Copyright (c) 2016~2025 https://www.crmeb.com All rights reserved.
  636. // +----------------------------------------------------------------------
  637. // | Licensed CRMEB并不是自由软件,未经许可不能去掉CRMEB相关版权
  638. // +----------------------------------------------------------------------
  639. // | Author: CRMEB Team <admin@crmeb.com>
  640. // +----------------------------------------------------------------------
  641. import uQRCode from "@/js_sdk/Sansnn-uQRCode/uqrcode.js";
  642. import {
  643. HTTP_H5_URL
  644. } from "@/config/app.js";
  645. import {
  646. getProductDetail,
  647. collectAdd,
  648. collectCancel,
  649. postCartAdd,
  650. getReplyConfig,
  651. getReplyProduct,
  652. } from "@/api/product.js";
  653. import {
  654. getCoupons,
  655. tokenIsExistApi
  656. } from "@/api/api.js";
  657. import {
  658. merCustomerApi
  659. } from "@/api/merchant.js";
  660. import {
  661. getCartCounts
  662. } from "@/api/order.js";
  663. import {
  664. toLogin
  665. } from "@/libs/login.js";
  666. import {
  667. mapGetters
  668. } from "vuex";
  669. import {
  670. imageBase64
  671. } from "@/api/public";
  672. import productConSwiper from "../components/productConSwiper/index.vue";
  673. import couponListWindow from "../components/getCoponWindow";
  674. import productWindow from "@/components/productWindow";
  675. import userEvaluation from "../components/userEvaluation";
  676. import cusPreviewImg from "../components/cus-previewImg/cus-previewImg.vue";
  677. import merHome from "@/components/merHome/index.vue";
  678. import mpHtml from "@/uni_modules/mp-html/components/mp-html/mp-html.vue";
  679. import {
  680. silenceBindingSpread
  681. } from "@/utils";
  682. import parser from "../components/jyf-parser/jyf-parser";
  683. import tuiDrawer from "../components/tui-drawer/index.vue";
  684. import tuiSkeleton from "@/components/base/tui-skeleton.vue";
  685. import easyLoadimage from "@/components/base/easy-loadimage.vue";
  686. import svipPrice from "@/components/svipPrice.vue";
  687. // #ifdef MP
  688. import {
  689. base64src
  690. } from "@/utils/base64src.js";
  691. import {
  692. mpQrcode
  693. } from "@/api/api.js";
  694. // #endif
  695. let app = getApp();
  696. import {
  697. setThemeColor
  698. } from "@/utils/setTheme.js";
  699. import {
  700. Debounce
  701. } from "@/utils/validate.js";
  702. import {
  703. chatConfig
  704. } from "@/utils/consumerType.js";
  705. import {
  706. goProductDetail
  707. } from "@/libs/order.js";
  708. import seckillCard from "./components/seckillCard.vue";
  709. import groupCard from "./components/groupCard.vue";
  710. import groupPlaying from "./components/groupPlaying.vue";
  711. import groupDoing from "./components/groupDoing.vue";
  712. import activityStyle from "./components/activityStyle.vue";
  713. import navBar from '@/components/navBar';
  714. import {
  715. onGetPreOrder
  716. } from "@/libs/order";
  717. import * as filters from "@/filters";
  718. import {
  719. ProductMarketingTypeEnum,
  720. ProductTypeEnum,
  721. } from "@/enums/productEnums";
  722. import useActivity from "@/mixins/useActivity";
  723. import Cache from "../../../utils/cache";
  724. let sysHeight = uni.getSystemInfoSync().statusBarHeight;
  725. export default {
  726. mixins: [useActivity],
  727. components: {
  728. productConSwiper,
  729. couponListWindow,
  730. productWindow,
  731. userEvaluation,
  732. cusPreviewImg,
  733. merHome,
  734. "jyf-parser": parser,
  735. tuiDrawer,
  736. tuiSkeleton,
  737. easyLoadimage,
  738. seckillCard,
  739. activityStyle,
  740. svipPrice,
  741. groupCard,
  742. groupPlaying,
  743. groupDoing,
  744. mpHtml,
  745. navBar
  746. },
  747. data() {
  748. return {
  749. ProductMarketingTypeEnum: ProductMarketingTypeEnum,
  750. ProductTypeEnum: ProductTypeEnum,
  751. urlDomain: this.$Cache.get("imgHost"),
  752. sysHeight: sysHeight,
  753. showSkeleton: true, //骨架屏显示隐藏
  754. isNodes: 0, //控制什么时候开始抓取元素节点,只要数值改变就重新抓取
  755. //属性是否打开
  756. coupon: {
  757. coupon: false,
  758. type: 2,
  759. list: [],
  760. count: [],
  761. },
  762. attrTxt: "请选择", //属性页面提示
  763. attrValue: "", //已选属性
  764. animated: false, //购物车动画
  765. id: 0, //商品id
  766. replyCount: 0, //总评论数量
  767. reply: [], //评论列表
  768. productInfo: {}, //商品详情
  769. productValue: [], //系统属性
  770. couponList: [], //优惠券
  771. cart_num: 1, //购买数量
  772. isOpen: false, //是否打开属性组件
  773. actionSheetHidden: true,
  774. storeImage: "", //海报产品图
  775. PromotionCode: "", //二维码图片
  776. posterbackgd: "../static/images/posterbackgd.png",
  777. pinkbackgd: "../static/images/pink_share.png",
  778. pinkWhiteBg: "../static/images/whiteBg.png",
  779. sharePacket: {
  780. isState: true, //默认不显示
  781. touchstart: false,
  782. }, //分销商详细
  783. circular: false,
  784. autoplay: false,
  785. interval: 3000,
  786. duration: 500,
  787. clientHeight: "",
  788. systemStore: {}, //门店信息
  789. good_list: [],
  790. replyChance: 0,
  791. CartCount: 0,
  792. isDown: true,
  793. posters: false,
  794. weixinStatus: false,
  795. attr: {
  796. cartAttr: false,
  797. productAttr: [],
  798. productSelect: {},
  799. },
  800. description: "",
  801. navActive: 0,
  802. H5ShareBox: false, //公众号分享图片
  803. activityH5: [],
  804. retunTop: true, //顶部返回
  805. navH: "",
  806. navList: [],
  807. opacity: 0,
  808. scrollY: 0,
  809. topArr: [],
  810. height: 0,
  811. heightArr: [],
  812. lock: false,
  813. scrollTop: 0,
  814. tagStyle: {
  815. img: "width:100%;display:block;",
  816. table: "width:100%",
  817. video: "width:100%",
  818. },
  819. sliderImage: [],
  820. videoLink: "",
  821. qrcodeSize: 600,
  822. canvasStatus: false, //是否显示海报
  823. imagePath: "", //海报路径
  824. imgTop: "",
  825. errT: "",
  826. homeTop: 59,
  827. navbarRight: 0,
  828. userCollect: false,
  829. options: null,
  830. returnShow: true, //判断顶部返回是否出现
  831. marketingType: 0, //视频号普通商品营销类型
  832. theme: app.go,
  833. indicatorBg: "",
  834. shareStatus: true,
  835. skuArr: [],
  836. currentPage: false,
  837. selectSku: "",
  838. selectNavList: [{
  839. name: "首页",
  840. icon: "icon-shouye8",
  841. url: "/pages/index/index",
  842. after: "dialog_after",
  843. },
  844. {
  845. name: "搜索",
  846. icon: "icon-sousuo6",
  847. url: "/pages/goods/goods_list/index",
  848. after: "dialog_after",
  849. },
  850. {
  851. name: "购物车",
  852. icon: "icon-gouwuche7",
  853. url: "/pages/order_addcart/order_addcart",
  854. after: "dialog_after",
  855. },
  856. {
  857. name: "我的收藏",
  858. icon: "icon-shoucang3",
  859. url: "/pages/goods/user_goods_collection/index",
  860. after: "dialog_after",
  861. },
  862. {
  863. name: "个人中心",
  864. icon: "icon-gerenzhongxin1",
  865. url: "/pages/user/index",
  866. },
  867. ],
  868. defaultCoupon: [],
  869. couponDeaultType: [{
  870. useType: 1,
  871. }, ],
  872. guaranteeList: [],
  873. assureDrawer: false,
  874. merchantInfo: {},
  875. isShowTypeId: false,
  876. serviceConfig: {},
  877. seckillStatus: 0,
  878. seckillTime: null,
  879. homeTopApp: 0,
  880. shareRight: 0,
  881. searchHeight: 0,
  882. masterProductId: 0, //活动商品中主商品id
  883. tokenIsExist: false, //校验token是否有效
  884. publicLoginType: app.globalData.publicLoginType, //公众号登录方式(单选),1微信授权,2手机号登录
  885. productType: 0, //商品类型 0=普通商品,1-积分商品,2-虚拟商品,4=视频号,5-云盘商品,6-卡密商品
  886. //普通价格
  887. svipPriceStyle: {
  888. svipBox: {
  889. height: "34rpx",
  890. borderRadius: "60rpx 56rpx 56rpx 20rpx",
  891. },
  892. icon: {
  893. fontSize: "23rpx",
  894. height: "34rpx",
  895. borderRadius: "16rpx 0 16rpx 2rpx",
  896. },
  897. price: {
  898. fontSize: "44rpx",
  899. },
  900. svipPrice: {
  901. fontSize: "27rpx",
  902. },
  903. topStyle: {
  904. top: "6rpx",
  905. },
  906. },
  907. productPrice: {
  908. price: "",
  909. vipPrice: "",
  910. isPaidMember: false, //是否是付费会员商品
  911. redeemIntegral: 0,
  912. },
  913. //svip价格
  914. svipIconStyle: {
  915. svipBox: {
  916. height: "34rpx",
  917. borderRadius: "36rpx 40rpx 40rpx 0.4rpx",
  918. },
  919. price: {
  920. fontSize: "44rpx",
  921. },
  922. svipPrice: {
  923. fontSize: "22rpx",
  924. },
  925. },
  926. groupBuyActivityResponse: "",
  927. groupActivityId: "",
  928. buyLimitNum: "",
  929. groupRecordId: 0,
  930. isPink: 0,
  931. skuImage: [], //规格小图
  932. iSshop: 0, //判断是否显示店铺
  933. cart: null,
  934. dataItem: null
  935. };
  936. },
  937. computed: {
  938. ...mapGetters(["isLogin", "uid", "chatUrl", "globalData"]),
  939. shareStyle() {
  940. return {
  941. top: this.homeTopApp + 'px',
  942. right: this.shareRight + 'px',
  943. // #ifdef MP
  944. width: this.searchHeight + 'px',
  945. height: this.searchHeight + 'px',
  946. lineHeight: this.searchHeight - 2 + 'px',
  947. borderRadius: this.searchHeight / 2 + 'px',
  948. // #endif
  949. }
  950. }
  951. },
  952. watch: {
  953. isOpen(nVal) {
  954. if (!nVal && this.isPink) {
  955. this.groupRecordId = 0;
  956. }
  957. },
  958. },
  959. created() {
  960. var pages = getCurrentPages();
  961. this.returnShow = pages.length === 1 ? false : true;
  962. //用户从分享卡片进入的场景下获取主题色配置
  963. this.$set(this, "theme", this.$Cache.get("theme"));
  964. //判断顶部返回是否出现
  965. var pages = getCurrentPages();
  966. this.returnShow = pages.length === 1 ? false : true;
  967. if (pages.length <= 1) {
  968. this.retunTop = false;
  969. }
  970. //页面中需要计算的一些值
  971. // #ifdef MP
  972. const res = uni.getMenuButtonBoundingClientRect()
  973. this.homeTopApp = res.top; //胶囊距离顶部
  974. this.searchHeight = res.height;
  975. this.shareRight = res.width + 15;
  976. // #endif
  977. // #ifdef APP
  978. this.homeTopApp = this.sysHeight + 6;
  979. this.shareRight = 15
  980. // #endif
  981. // #ifdef H5
  982. this.homeTopApp = 9;
  983. this.shareRight = 50
  984. // #endif
  985. this.navH = this.globalData.navHeight;
  986. let that = this;
  987. uni.getSystemInfo({
  988. success: function(res) {
  989. that.height = res.windowHeight;
  990. //res.windowHeight:获取整个窗口高度为px,*2为rpx;98为头部占据的高度;
  991. // #ifndef APP-PLUS || H5 || MP-ALIPAY
  992. that.navbarRight =
  993. res.windowWidth - uni.getMenuButtonBoundingClientRect().left;
  994. // #endif
  995. },
  996. });
  997. },
  998. onLoad(options) {
  999. //获取浏览器传来的对象
  1000. this.options = options;
  1001. if (options.cart) {
  1002. this.cart = JSON.parse(options.cart) || []
  1003. }
  1004. if (options.dataItem) {
  1005. this.dataItem = JSON.parse(options.dataItem) || null
  1006. this.productPrice.price = this.dataItem.price;
  1007. }
  1008. this.iSshop = this.options.iSshop //判断显示店铺
  1009. //获取浏览器秒杀状态、秒杀时间
  1010. if (options.status) this.seckillStatus = Number(options.status); //秒杀状态
  1011. if (options.datatime) this.seckillTime = Number(options.datatime); //秒杀时间
  1012. if (options.gd) this.groupActivityId = options.gd; //拼团活动id
  1013. if (options.rd) this.groupRecordId = options.rd; //是否为参团
  1014. if (options.sd) this.$store.commit('Change_Spread', options.sd); //分享id
  1015. //获取浏览器中的参数,商品id,商品类型type,普通normal,秒杀seckill,砍价,拼团,视频号video
  1016. if (!options.scene && !options.id) {
  1017. this.showSkeleton = false;
  1018. this.$util.Tips({
  1019. title: "缺少参数无法查看商品",
  1020. }, {
  1021. url: "/pages/index/index",
  1022. });
  1023. return;
  1024. }
  1025. if (options.id) this.id = options.id;
  1026. //订单中跳入商品详情,点击进入商品详情获取商品类型
  1027. //marketingType商品类型:0-普通,1-秒杀seckill,2-拼团
  1028. this.marketingType = Number(options.mt);
  1029. // 仅仅小程序扫码进入获取商品id,商品类型
  1030. if (options.scene) {
  1031. let value = this.$util.getUrlParams(decodeURIComponent(options.scene));
  1032. this.id = value.id ? value.id : "";
  1033. this.marketingType = Number(value.mt);
  1034. if (value.sd) this.$store.commit('Change_Spread', value.sd);
  1035. if (value.gd) this.groupActivityId = value.gd; //拼团活动id
  1036. if (value.rd) this.groupRecordId = value.rd; //是否为参团
  1037. //this.type = value.type ? value.type : 'normal';
  1038. }
  1039. //商品类型存入vuex中
  1040. this.$store.commit("PRODUCT_TYPE", this.marketingType);
  1041. //商品详情
  1042. !this.dataItem ? this.getGoodsDetails() : this.showSkeleton = false;
  1043. this.indicatorBg = setThemeColor();
  1044. },
  1045. onShow() {
  1046. //校验token是否有效,true为有效,false为无效
  1047. this.getTokenIsExist();
  1048. !this.dataItem ? this.getGoodsDetails() : this.showSkeleton = false;
  1049. },
  1050. onReady() {
  1051. this.isNodes++;
  1052. this.$nextTick(function() {
  1053. // #ifdef MP
  1054. const menuButton = uni.getMenuButtonBoundingClientRect();
  1055. const query = uni.createSelectorQuery().in(this);
  1056. query
  1057. .select("#home")
  1058. .boundingClientRect((data) => {
  1059. // 加强判断 data 是否有效并且包含 height
  1060. const homeHeight = (data && data.height) ? data.height : 0; // 如果 data 存在且有 height,则使用 height,否则使用 0
  1061. this.homeTop = menuButton.top * 2 + menuButton.height - homeHeight;
  1062. // this.homeTop = menuButton.top * 2 + menuButton.height - data.height;
  1063. })
  1064. .exec();
  1065. // #endif
  1066. });
  1067. },
  1068. // 滚动监听
  1069. onPageScroll(e) {
  1070. // 传入scrollTop值并触发所有easy-loadimage组件下的滚动监听事件
  1071. uni.$emit("scroll");
  1072. },
  1073. // #ifdef MP
  1074. /**
  1075. * 用户点击右上角分享到朋友圈
  1076. */
  1077. onShareTimeline() {
  1078. if (this.marketingType === ProductMarketingTypeEnum.Groupbuying) {
  1079. return {
  1080. title: this.productInfo.name || "",
  1081. imageUrl: this.productInfo.image || "",
  1082. query: `id=${this.id}&mt=${this.marketingType}&gd=${this.groupActivityId}&sd=${this.uid}`,
  1083. };
  1084. } else {
  1085. return {
  1086. title: this.productInfo.name || "",
  1087. imageUrl: this.productInfo.image || "",
  1088. query: `id=${this.id}&mt=${this.marketingType}&sd=${this.uid}`,
  1089. };
  1090. }
  1091. },
  1092. /**
  1093. * 用户点击右上角分享
  1094. */
  1095. onShareAppMessage(res) {
  1096. this.$set(this, "actionSheetHidden", !this.actionSheetHidden);
  1097. if (this.marketingType === ProductMarketingTypeEnum.Groupbuying) {
  1098. return {
  1099. title: this.productInfo.name || "",
  1100. imageUrl: this.productInfo.image || "",
  1101. path: `/pages/goods/goods_details/index?id=${this.id}&mt=${this.marketingType}&gd=${this.groupActivityId}&sd=${this.uid}`,
  1102. };
  1103. } else {
  1104. return {
  1105. title: this.productInfo.name || "",
  1106. imageUrl: this.productInfo.image || "",
  1107. path: `/pages/goods/goods_details/index?id=${this.id}&mt=${this.marketingType}&sd=${this.uid}`,
  1108. };
  1109. }
  1110. },
  1111. // #endif
  1112. methods: {
  1113. //滚动
  1114. touchStart() {
  1115. this.$refs.navBarRef.currentPage = false;
  1116. },
  1117. getShareInfo() {
  1118. if (this.marketingType === ProductMarketingTypeEnum.Groupbuying) {
  1119. return {
  1120. title: this.productInfo.name || "",
  1121. imageUrl: this.productInfo.image || "",
  1122. path: `/pages/goods/goods_details/index?id=${this.id}&mt=${this.marketingType}&gd=${this.groupActivityId}&sd=${this.uid}`,
  1123. };
  1124. } else {
  1125. return {
  1126. title: this.productInfo.name || "",
  1127. imageUrl: this.productInfo.image || "",
  1128. path: `/pages/goods/goods_details/index?id=${this.id}&mt=${this.marketingType}&sd=${this.uid}`,
  1129. };
  1130. }
  1131. },
  1132. //去拼团
  1133. toGroup(e) {
  1134. this.goBuy();
  1135. this.groupRecordId = e;
  1136. this.isPink = 1;
  1137. },
  1138. buyLimit(e) {
  1139. this.buyLimitNum = e;
  1140. },
  1141. //校验token是否有效,true为有效,false为无效
  1142. getTokenIsExist() {
  1143. tokenIsExistApi().then((res) => {
  1144. this.tokenIsExist = res.data;
  1145. if (this.isLogin && this.tokenIsExist) {
  1146. this.getUserIntegral(); //获取我的积分
  1147. this.getCouponList();
  1148. this.getCartCount(true);
  1149. }
  1150. silenceBindingSpread(this.isLogin, this.globalData.spread);
  1151. });
  1152. },
  1153. getMerCustomer(id) {
  1154. merCustomerApi(id).then((res) => {
  1155. this.serviceConfig = res.data;
  1156. });
  1157. },
  1158. closeAssure() {
  1159. this.assureDrawer = false;
  1160. },
  1161. // #ifdef APP-PLUS
  1162. appShare(scene) {
  1163. let that = this;
  1164. let routes = getCurrentPages(); // 获取当前打开过的页面路由数组
  1165. let curRoute = routes[routes.length - 1].$page.fullPath; // 获取当前页面路由,也就是最后一个打开的页面路由
  1166. uni.share({
  1167. provider: "weixin",
  1168. scene: scene,
  1169. type: 0,
  1170. href: `${HTTP_H5_URL}${curRoute}&sd=${that.uid}&mt=${this.marketingType}&gd=${this.groupActivityId}`,
  1171. title: that.productInfo.name,
  1172. summary: that.productInfo.intro ? that.productInfo.intro : '',
  1173. imageUrl: that.productInfo.image,
  1174. success: function(res) {
  1175. that.posters = false;
  1176. },
  1177. fail: function(err) {
  1178. uni.showToast({
  1179. title: "分享失败",
  1180. icon: "none",
  1181. duration: 2000,
  1182. });
  1183. that.posters = false;
  1184. },
  1185. });
  1186. },
  1187. // #endif
  1188. kefuClick() {
  1189. if (this.productType === this.ProductTypeEnum.Integral) {
  1190. chatConfig(this.$Cache.getItem("platChatConfig"));
  1191. } else {
  1192. chatConfig(this.serviceConfig);
  1193. }
  1194. },
  1195. goActivity: function(e) {
  1196. let item = e;
  1197. if (item.type === "1") {
  1198. uni.navigateTo({
  1199. url: `/pages/activity/goods_seckill_details/index?id=${item.id}`,
  1200. });
  1201. } else if (item.type === "2") {
  1202. uni.navigateTo({
  1203. url: `/pages/activity/goods_bargain_details/index?id=${item.id}&startBargainUid=${this.uid}`,
  1204. });
  1205. } else {
  1206. uni.navigateTo({
  1207. url: `/pages/activity/goods_combination_details/index?id=${item.id}`,
  1208. });
  1209. }
  1210. },
  1211. /**
  1212. * 购物车手动填写
  1213. *
  1214. */
  1215. iptCartNum: function(e) {
  1216. this.$set(this.attr.productSelect, "cart_num", e);
  1217. },
  1218. // 后退
  1219. returns: function() {
  1220. uni.navigateBack();
  1221. },
  1222. showNav() {
  1223. this.currentPage = !this.currentPage;
  1224. },
  1225. tap: function(index) {
  1226. var id = "past" + index;
  1227. this.$set(this, "navActive", index);
  1228. this.$set(this, "lock", true);
  1229. this.$set(
  1230. this,
  1231. "scrollTop",
  1232. index > 0 ?
  1233. this.topArr[index] - this.globalData.navHeight / 2 :
  1234. this.topArr[index]
  1235. );
  1236. },
  1237. scroll: function(e) {
  1238. var that = this,
  1239. scrollY = e.detail.scrollTop;
  1240. var opacity = scrollY / 200;
  1241. opacity = opacity > 1 ? 1 : opacity;
  1242. that.$set(that, "opacity", opacity);
  1243. that.$set(that, "scrollY", scrollY);
  1244. if (that.lock) {
  1245. that.$set(that, "lock", false);
  1246. return;
  1247. }
  1248. for (var i = 0; i < that.topArr.length; i++) {
  1249. if (
  1250. scrollY <
  1251. that.topArr[i] - this.globalData.navHeight / 2 + that.heightArr[i]
  1252. ) {
  1253. that.$set(that, "navActive", i);
  1254. break;
  1255. }
  1256. }
  1257. that.$set(that.sharePacket, "touchstart", true); //滑动屏幕时让分享气泡缩回
  1258. uni.$emit("scroll");
  1259. },
  1260. /*
  1261. *去商品详情页
  1262. */
  1263. goDetail(id) {
  1264. goProductDetail(id, 0, "");
  1265. },
  1266. ChangCouponsClone: function() {
  1267. this.$set(this.coupon, "coupon", false);
  1268. },
  1269. /**
  1270. * 购物车数量加和数量减
  1271. *
  1272. */
  1273. ChangeCartNum: function(changeValue, buyLimitNum, type) {
  1274. //changeValue:是否 加|减
  1275. //获取当前变动属性
  1276. let productSelect = this.productValue[this.attrValue];
  1277. //如果没有属性,赋值给商品默认库存
  1278. if (productSelect === undefined && !this.attr.productAttr.length)
  1279. productSelect = this.attr.productSelect;
  1280. //无属性值即库存为0;不存在加减;
  1281. let flag = false;
  1282. if (productSelect.groupStock === null && productSelect.stock === 0) {
  1283. flag = true
  1284. }
  1285. if (productSelect.groupStock != null && (productSelect.stock === 0 || productSelect.groupStock ===
  1286. 0)) {
  1287. flag = true
  1288. }
  1289. if (flag) return;
  1290. let stock;
  1291. if (type == 2) {
  1292. stock = buyLimitNum || 0;
  1293. } else {
  1294. stock = productSelect.stock || 0;
  1295. }
  1296. let num = this.attr.productSelect;
  1297. if (changeValue) {
  1298. num.cart_num++;
  1299. if (num.cart_num > stock) {
  1300. this.$set(this.attr.productSelect, "cart_num", stock);
  1301. this.$set(this, "cart_num", stock);
  1302. }
  1303. } else {
  1304. num.cart_num--;
  1305. if (num.cart_num < 1) {
  1306. this.$set(this.attr.productSelect, "cart_num", 1);
  1307. this.$set(this, "cart_num", 1);
  1308. }
  1309. }
  1310. },
  1311. attrVal(val) {
  1312. this.$set(this.attr.productAttr[val.indexw], 'index', this.attr.productAttr[val.indexw].attrValues[val
  1313. .indexn]);
  1314. },
  1315. checkedAttr(productSelect) {
  1316. this.$set(this.attr.productSelect, "name", this.productInfo.name);
  1317. this.$set(this.attr.productSelect, "image", productSelect.image);
  1318. this.$set(this.attr.productSelect, "price", productSelect.price);
  1319. this.$set(this.attr.productSelect, "stock", productSelect.stock);
  1320. this.$set(this.attr.productSelect, "unique", productSelect.id);
  1321. this.$set(this.attr.productSelect, "cart_num", 1);
  1322. this.$set(this.attr.productSelect, "vipPrice", productSelect.vipPrice);
  1323. this.$set(this.attr.productSelect, "otPrice", productSelect.otPrice);
  1324. this.$set(
  1325. this.attr.productSelect,
  1326. "groupPrice",
  1327. productSelect.groupPrice
  1328. );
  1329. this.$set(
  1330. this.attr.productSelect,
  1331. "groupStock",
  1332. productSelect.groupStock
  1333. );
  1334. this.$set(
  1335. this.attr.productSelect,
  1336. "isPaidMember",
  1337. this.productInfo.isPaidMember
  1338. );
  1339. this.$set(
  1340. this.attr.productSelect,
  1341. "redeemIntegral",
  1342. productSelect.redeemIntegral
  1343. );
  1344. this.$set(this.attr.productSelect, "cost", productSelect.cost);
  1345. this.$set(this, "attrTxt", "已选择");
  1346. },
  1347. // 没有规格选择
  1348. noCheckedAttr() {
  1349. this.$set(this.attr.productSelect, "name", this.productInfo.name);
  1350. this.$set(this.attr.productSelect, "image", this.productInfo.image);
  1351. this.$set(this.attr.productSelect, "price", this.productInfo.price);
  1352. this.$set(this.attr.productSelect, "stock", 0);
  1353. this.$set(this.attr.productSelect, "unique", this.productInfo.id);
  1354. this.$set(this.attr.productSelect, "cart_num", 1);
  1355. this.$set(this.attr.productSelect, "vipPrice", this.productInfo.vipPrice);
  1356. this.$set(this.attr.productSelect, "otPrice", this.productInfo.otPrice);
  1357. this.$set(this.attr.productSelect, "groupPrice", this.productInfo.groupPrice);
  1358. this.$set(
  1359. this.attr.productSelect,
  1360. "isPaidMember",
  1361. this.productInfo.isPaidMember
  1362. );
  1363. this.$set(
  1364. this.attr.productSelect,
  1365. "redeemIntegral",
  1366. this.productInfo.redeemIntegral
  1367. );
  1368. this.$set(this.attr.productSelect, "cost", this.productInfo.cost);
  1369. this.$set(this, "attrValue", "");
  1370. this.$set(this, "attrTxt", "请选择");
  1371. },
  1372. // 当前展示的金额
  1373. getProductPrice() {
  1374. this.productPrice = {
  1375. price: this.attr.productSelect.price,
  1376. vipPrice: this.attr.productSelect.vipPrice,
  1377. isPaidMember: this.productInfo.isPaidMember, //是否是付费会员商品
  1378. redeemIntegral: this.attr.productSelect.redeemIntegral, //积分
  1379. };
  1380. },
  1381. /**
  1382. * 属性变动赋值
  1383. *
  1384. */
  1385. ChangeAttr: function(res) {
  1386. let productSelect = this.productValue[res];
  1387. this.$set(this, "selectSku", productSelect);
  1388. if (!productSelect) {
  1389. this.$util.Tips({
  1390. title: '重新选择',
  1391. success: () => {
  1392. this.noGoods = true;
  1393. this.attr.productSelect.stock = 0;
  1394. this.attr.productSelect.quota = 0;
  1395. this.attr.productSelect.cartNum = 0;
  1396. this.attr.productSelect.image = this.productInfo.image;
  1397. }
  1398. });
  1399. } else {
  1400. this.checkedAttr(productSelect);
  1401. this.$set(this, "attrValue", res);
  1402. }
  1403. this.getProductPrice();
  1404. },
  1405. /**
  1406. * 领取完毕移除当前页面领取过的优惠券展示
  1407. */
  1408. ChangCoupons: function(e) {
  1409. let coupon = e;
  1410. let couponList = this.$util.ArrayRemove(this.couponList, "id", coupon.id);
  1411. this.getCouponList();
  1412. },
  1413. setClientHeight: function() {
  1414. let that = this;
  1415. if (!that.good_list.length) return;
  1416. let view = uni.createSelectorQuery().in(this).select("#list0");
  1417. view
  1418. .fields({
  1419. size: true,
  1420. },
  1421. (data) => {
  1422. that.$set(that, "clientHeight", data.height + 20);
  1423. }
  1424. )
  1425. .exec();
  1426. },
  1427. /**
  1428. * 获取产品详情
  1429. *
  1430. */
  1431. getGoodsDetails: function() {
  1432. let that = this;
  1433. //that.id, that.marketingType
  1434. getProductDetail(that.id, that.marketingType, 0, this.groupActivityId)
  1435. .then((res) => {
  1436. let data = res.data;
  1437. let productInfo = data.productInfo;
  1438. // 字符串数组转数组;
  1439. let arrayImg = productInfo.sliderImage;
  1440. let sliderImage = JSON.parse(arrayImg);
  1441. if (that.getFileType(sliderImage[0]) == "video") {
  1442. //判断轮播图第一张是否是视频,如果是,就赋值给videoLink,并且将其在轮播图中删除
  1443. this.$set(this, "videoLink", sliderImage[0]);
  1444. sliderImage.splice(0, 1);
  1445. }
  1446. that.productType = productInfo.type; //商品类型 0=普通商品,1-积分商品,2-虚拟商品,4=视频号,5-云盘商品,6-卡密商品
  1447. that.getSeckillInfo(data); // 秒杀
  1448. that.$set(that, "couponList", data.couponList);
  1449. that.$set(that, "sliderImage", sliderImage);
  1450. that.$set(that, "productInfo", productInfo);
  1451. that.$set(that, "masterProductId", data.masterProductId || 0);
  1452. that.$set(that, "merchantInfo", data.merchantInfo);
  1453. that.$set(that, "description", productInfo.content);
  1454. that.$set(that, "userCollect", data.userCollect);
  1455. that.$set(that.attr, "productAttr", data.productAttr);
  1456. that.$set(that, "productValue", data.productValue);
  1457. that.$set(
  1458. that,
  1459. "guaranteeList",
  1460. data.guaranteeList ? data.guaranteeList : []
  1461. );
  1462. data.groupBuyActivityResponse &&
  1463. that.$set(
  1464. that,
  1465. "groupBuyActivityResponse",
  1466. data.groupBuyActivityResponse
  1467. );
  1468. // 获取suk小图
  1469. this.getSkuImage()
  1470. let navList =
  1471. that.productType !== ProductTypeEnum.Integral ? ["商品", "评价", "详情"] : ["商品", "详情"];
  1472. this.$set(that, "navList", navList);
  1473. if (productInfo.merId) that.getMerCustomer(productInfo.merId);
  1474. for (let key in data.productValue) {
  1475. let obj = data.productValue[key];
  1476. that.skuArr.push(obj);
  1477. }
  1478. this.$set(this, "selectSku", that.skuArr[0]);
  1479. uni.setNavigationBarTitle({
  1480. title: productInfo.name.substring(0, 7) + "...",
  1481. });
  1482. let productAttr = this.attr.productAttr.map((item) => {
  1483. return {
  1484. attrName: item.attributeName,
  1485. attrValues: item.optionList.map(items => items.optionName),
  1486. id: item.id,
  1487. isDel: item.isDel,
  1488. productId: item.productId,
  1489. optionList: item.optionList
  1490. // type: item.type,
  1491. };
  1492. });
  1493. this.$set(this.attr, "productAttr", productAttr);
  1494. this.getProductReplyList();
  1495. this.getProductReplyCount();
  1496. //#ifdef H5
  1497. that.make(that.uid);
  1498. that.ShareInfo();
  1499. this.getImageBase64(this.productInfo.image);
  1500. // #endif
  1501. // #ifdef MP
  1502. that.getQrcode();
  1503. // #endif
  1504. setTimeout(function() {
  1505. that.infoScroll();
  1506. }, 500);
  1507. // #ifdef MP
  1508. that.imgTop = data.productInfo.image;
  1509. // #endif
  1510. // #ifndef H5
  1511. that.downloadFilestoreImage();
  1512. // #endif
  1513. that.DefaultSelect();
  1514. this.showSkeleton = false;
  1515. setTimeout(() => {
  1516. this.defaultCoupon = this.coupon.list;
  1517. }, 1000);
  1518. })
  1519. .catch((err) => {
  1520. //状态异常返回上级页面
  1521. that.$util.Tips({
  1522. title: err.toString(),
  1523. }, {
  1524. tab: 3,
  1525. url: 1,
  1526. });
  1527. this.showSkeleton = false;
  1528. });
  1529. },
  1530. // 获取suk小图
  1531. getSkuImage() {
  1532. let sku = []
  1533. let skuTable = []
  1534. this.attr.productAttr.map((item) => {
  1535. item.optionList.map(items => {
  1536. if (items.image) sku.push(items.image)
  1537. });
  1538. })
  1539. const uniqueData = sku.filter((item, index, self) =>
  1540. index === self.findIndex((t) => t === item))
  1541. if (uniqueData.length > 0) {
  1542. this.skuImage = uniqueData
  1543. } else {
  1544. for (let key in this.productValue) {
  1545. let obj = this.productValue[key];
  1546. skuTable.push(obj.image);
  1547. }
  1548. this.skuImage = skuTable.filter((item, index, self) =>
  1549. index === self.findIndex((t) => t === item))
  1550. }
  1551. },
  1552. // 秒杀
  1553. getSeckillInfo(data) {
  1554. let startTimeStamp = data.startTimeStamp; //秒杀开始结束时间戳
  1555. let endTimeStamp = data.endTimeStamp;
  1556. if (
  1557. !this.options.datatime &&
  1558. this.marketingType === ProductMarketingTypeEnum.Seckill
  1559. ) {
  1560. let data = Date.parse(new Date());
  1561. if (Number(data) < Number(startTimeStamp)) {
  1562. this.seckillTime = Number(startTimeStamp) / 1000;
  1563. this.seckillStatus = 2;
  1564. } else if (Number(data) < Number(endTimeStamp)) {
  1565. this.seckillTime = Number(endTimeStamp) / 1000;
  1566. this.seckillStatus = 1;
  1567. } else {
  1568. this.seckillTime = 0;
  1569. this.seckillStatus = 0;
  1570. }
  1571. // seckillStatus 秒杀状态 0=已结束 1=抢购中 2=即将开始 3=明日预告
  1572. }
  1573. },
  1574. getProductReplyList: function() {
  1575. let id =
  1576. Number(this.masterProductId) > 0 ? this.masterProductId : this.id;
  1577. getReplyProduct(id).then((res) => {
  1578. this.reply = res.data.productReply ? [res.data.productReply] : [];
  1579. });
  1580. },
  1581. getProductReplyCount: function() {
  1582. let that = this;
  1583. let id =
  1584. Number(that.masterProductId) > 0 ? that.masterProductId : that.id;
  1585. getReplyConfig(id).then((res) => {
  1586. that.$set(that, "replyChance", res.data.replyChance);
  1587. that.$set(that, "replyCount", res.data.sumCount);
  1588. });
  1589. },
  1590. infoScroll: function() {
  1591. var that = this,
  1592. topArr = [],
  1593. heightArr = [];
  1594. for (var i = 0; i < that.navList.length; i++) {
  1595. //productList
  1596. //获取元素所在位置
  1597. var query = uni.createSelectorQuery().in(this);
  1598. var idView = "#past" + i;
  1599. query.select(idView).boundingClientRect();
  1600. query.exec(function(res) {
  1601. var top = res[0] ? res[0].top : "";
  1602. var height = res[0] ? res[0].height : "";
  1603. topArr.push(top);
  1604. heightArr.push(height);
  1605. that.$set(that, "topArr", topArr);
  1606. that.$set(that, "heightArr", heightArr);
  1607. });
  1608. }
  1609. },
  1610. /**
  1611. * 默认选中属性
  1612. *
  1613. */
  1614. DefaultSelect: function() {
  1615. let productAttr = this.attr.productAttr;
  1616. let value = [];
  1617. let valueobj = [];
  1618. // 先找默认中库存不为0的为默认规格,否则找不是默认中库存不为0的规格
  1619. const productValues = Object.values(this.productValue)
  1620. // 拼团商品中还有groupStock需要判断,拼团与非拼团分判断
  1621. if (this.marketingType === this.ProductMarketingTypeEnum.Groupbuying) {
  1622. const nonZeroDefault = productValues.find(item => item.isDefault && item.stock !== 0 && item
  1623. .groupStock !== 0);
  1624. if (nonZeroDefault) {
  1625. value = productValues.find(item => item.isDefault && item.stock !== 0 && item.groupStock !== 0)
  1626. .sku.split(',');
  1627. } else {
  1628. const haveStock = productValues.find(item => item.stock !== 0 && item.groupStock !== 0)
  1629. if (haveStock) {
  1630. value = productValues.find(item => item.stock !== 0 && item.groupStock !== 0).sku.split(
  1631. ',');
  1632. } else {
  1633. value = [];
  1634. }
  1635. }
  1636. } else {
  1637. const nonZeroDefault = productValues.find(item => item.isDefault && item.stock !== 0);
  1638. if (nonZeroDefault) {
  1639. value = productValues.find(item => item.isDefault && item.stock !== 0).sku.split(',');
  1640. } else {
  1641. const haveStock = productValues.find(item => item.stock !== 0)
  1642. if (haveStock) {
  1643. value = productValues.find(item => item.stock !== 0).sku.split(',');
  1644. } else {
  1645. value = [];
  1646. }
  1647. }
  1648. }
  1649. for (let i = 0; i < value.length; i++) {
  1650. this.$set(productAttr[i], "index", value[i]);
  1651. }
  1652. //sort();排序函数:数字-英文-汉字;
  1653. let productSelect = this.productValue[value.join(",")];
  1654. if (productSelect && productAttr.length) {
  1655. this.checkedAttr(productSelect);
  1656. this.$set(this, "attrValue", value.join(","));
  1657. this.$set(this, "attrTxt", "已选择");
  1658. } else if (!productSelect && productAttr.length) {
  1659. this.noCheckedAttr();
  1660. } else if (!productSelect && !productAttr.length) {
  1661. this.noCheckedAttr();
  1662. }
  1663. this.getProductPrice();
  1664. },
  1665. /**
  1666. * 获取优惠券
  1667. *
  1668. */
  1669. getCouponList() {
  1670. let that = this,
  1671. obj = {
  1672. page: 1,
  1673. limit: 20,
  1674. productId: that.id,
  1675. category: 0,
  1676. };
  1677. getCoupons(obj).then((res) => {
  1678. that.$set(that.coupon, "list", res.data.list);
  1679. });
  1680. },
  1681. async getCouponType() {
  1682. //在onLoad只调用一次,获取默认的类型作为打开优惠券列表的参数,不会随着切换变化
  1683. let dataList = await getCoupons({
  1684. productId: this.id,
  1685. });
  1686. if (dataList.length) {
  1687. this.couponDeaultType = dataList.data;
  1688. this.$set(this.coupon, "type", dataList);
  1689. }
  1690. },
  1691. tabCouponType(type) {
  1692. this.$set(this.coupon, "type", type);
  1693. this.getCouponList();
  1694. },
  1695. ChangCouponsUseState(index) {
  1696. let that = this;
  1697. that.coupon.list[index].isUse = true;
  1698. that.$set(that.coupon, "list", that.coupon.list);
  1699. that.$set(that.coupon, "coupon", false);
  1700. },
  1701. /**
  1702. *
  1703. *
  1704. * 收藏商品
  1705. */
  1706. setCollect: Debounce(function() {
  1707. let that = this;
  1708. if (this.isLogin === false) {
  1709. toLogin("isLogin");
  1710. } else {
  1711. let id =
  1712. Number(this.masterProductId) > 0 ?
  1713. this.masterProductId :
  1714. this.productInfo.id;
  1715. if (this.userCollect) {
  1716. collectCancel({
  1717. ids: id,
  1718. }).then((res) => {
  1719. that.$set(that, "userCollect", !that.userCollect);
  1720. that.$util.Tips({
  1721. title: "取消收藏",
  1722. });
  1723. });
  1724. } else {
  1725. collectAdd(id).then((res) => {
  1726. that.$set(that, "userCollect", !that.userCollect);
  1727. that.$util.Tips({
  1728. title: "收藏成功",
  1729. });
  1730. });
  1731. }
  1732. }
  1733. }),
  1734. /**
  1735. * 打开属性插件
  1736. */
  1737. selecAttr: function() {
  1738. this.$set(this.attr, "cartAttr", true);
  1739. this.$set(this, "isOpen", true);
  1740. this.attr.productSelect.cart_num = 1;
  1741. },
  1742. /**
  1743. * 打开优惠券插件
  1744. */
  1745. couponTap: function() {
  1746. let that = this;
  1747. if (that.isLogin === false) {
  1748. toLogin();
  1749. } else {
  1750. that.getCouponList(); //打开弹框默认请求商品券
  1751. that.$set(that.coupon, "coupon", true);
  1752. }
  1753. },
  1754. onMyEvent: function() {
  1755. this.$set(this.attr, "cartAttr", false);
  1756. this.$set(this, "isOpen", false);
  1757. this.attr.productSelect.cart_num = 1;
  1758. },
  1759. /**
  1760. * 打开属性加入购物车
  1761. *
  1762. */
  1763. joinCart: Debounce(function(e) {
  1764. //是否登录
  1765. if (this.isLogin === false) {
  1766. toLogin();
  1767. } else {
  1768. this.goCat(1);
  1769. }
  1770. }),
  1771. /*
  1772. * 加入购物车
  1773. */
  1774. goCat: function(num) {
  1775. let that = this,
  1776. productSelect = that.productValue[this.attrValue];
  1777. //打开属性
  1778. if (that.attrValue) {
  1779. //默认选中了属性,但是没有打开过属性弹窗还是自动打开让用户查看默认选中的属性
  1780. that.attr.cartAttr = !that.isOpen ? true : false;
  1781. } else {
  1782. if (that.isOpen) that.attr.cartAttr = true;
  1783. else that.attr.cartAttr = !that.attr.cartAttr;
  1784. }
  1785. //只有关闭属性弹窗时进行加入购物车
  1786. if (that.attr.cartAttr === true && that.isOpen === false)
  1787. return (that.isOpen = true);
  1788. //如果有属性,没有选择,提示用户选择
  1789. if (
  1790. that.attr.productAttr.length &&
  1791. productSelect.stock === 0 &&
  1792. that.isOpen === true
  1793. )
  1794. return that.$util.Tips({
  1795. title: "产品库存不足,请选择其它",
  1796. });
  1797. if (num === 1) {
  1798. let q = {
  1799. productId: parseFloat(that.id),
  1800. cartNum: parseFloat(that.attr.productSelect.cart_num),
  1801. isNew: false,
  1802. productAttrUnique: that.attr.productSelect !== undefined ?
  1803. that.attr.productSelect.unique : that.productInfo.id,
  1804. };
  1805. postCartAdd(q)
  1806. .then(function(res) {
  1807. that.isOpen = false;
  1808. that.attr.cartAttr = false;
  1809. that.$util.Tips({
  1810. title: "添加购物车成功",
  1811. success: () => {
  1812. that.getCartCount(true);
  1813. },
  1814. });
  1815. })
  1816. .catch((res) => {
  1817. that.isOpen = false;
  1818. return that.$util.Tips({
  1819. title: res,
  1820. });
  1821. });
  1822. } else {
  1823. this.getPreOrder();
  1824. }
  1825. },
  1826. /**
  1827. * 获取购物车数量
  1828. * @param boolean 是否展示购物车动画和重置属性
  1829. */
  1830. getCartCount: function(isAnima) {
  1831. let that = this;
  1832. getCartCounts(true, "total")
  1833. .then((res) => {
  1834. that.CartCount = res.data.count;
  1835. //加入购物车后重置属性
  1836. if (isAnima) {
  1837. that.animated = true;
  1838. setTimeout(function() {
  1839. that.animated = false;
  1840. }, 500);
  1841. }
  1842. })
  1843. .catch((err) => {
  1844. that.CartCount = 0;
  1845. });
  1846. },
  1847. /**
  1848. * 立即购买
  1849. */
  1850. goBuy: Debounce(function(e) {
  1851. if (this.isLogin === false) {
  1852. toLogin();
  1853. } else {
  1854. this.goCat(0);
  1855. }
  1856. }),
  1857. /**
  1858. * 预下单
  1859. */
  1860. getPreOrder: function() {
  1861. if (
  1862. this.marketingType === ProductMarketingTypeEnum.Groupbuying &&
  1863. this.attr.productSelect.cart_num > this.buyLimitNum
  1864. ) {
  1865. this.isOpen = false;
  1866. return this.$util.Tips({
  1867. title: "超出限购数量",
  1868. });
  1869. }
  1870. if (this.attr.productSelect.cart_num < 1) {
  1871. uni.showToast({
  1872. title: "单次可购买商品数量范围为 1~99",
  1873. icon: "none",
  1874. });
  1875. } else {
  1876. let types = "";
  1877. switch (this.marketingType) {
  1878. case ProductMarketingTypeEnum.Normal:
  1879. if (this.productType === 4) {
  1880. types = "video";
  1881. } else {
  1882. types = "buyNow";
  1883. }
  1884. break;
  1885. case ProductMarketingTypeEnum.Seckill:
  1886. types = "seckill";
  1887. break;
  1888. case ProductMarketingTypeEnum.Groupbuying:
  1889. types = "group";
  1890. break;
  1891. }
  1892. let obj = {
  1893. attrValueId: parseFloat(this.attr.productSelect.unique),
  1894. productId: parseFloat(this.id),
  1895. productNum: parseFloat(this.attr.productSelect.cart_num),
  1896. groupBuyActivityId: parseFloat(this.groupActivityId),
  1897. groupBuyRecordId: this.groupRecordId,
  1898. };
  1899. console.log(this.attr, this.id, this.cart)
  1900. let arr = []
  1901. let isProductid = false // 是否同一规格
  1902. if (this.cart.length) {
  1903. // const indexOf = this.cart.find(val => val.productid == this.attr.productSelect.unique)
  1904. this.cart.forEach((item) => {
  1905. if (this.attr.productSelect.unique == item.productid) {
  1906. isProductid = true
  1907. item.number += parseFloat(this.attr.productSelect.cart_num)
  1908. }
  1909. arr.push({
  1910. attrValueId: item.productid, //商品规格属性id(立即购买、活动购买必填)
  1911. groupBuyActivityId: null, //拼团活动id(拼团下单时必填)
  1912. groupBuyRecordId: 0, // 拼团记录id,营销类型2=拼团 时必填 0=开团 实际
  1913. productId: item.id, //商品id
  1914. productNum: item.number //商品数量
  1915. })
  1916. })
  1917. !isProductid ? arr.push(obj) : ''
  1918. } else {
  1919. arr = [obj]
  1920. }
  1921. onGetPreOrder(types, arr);
  1922. }
  1923. this.isOpen = false;
  1924. },
  1925. /**
  1926. * 分享打开
  1927. *
  1928. */
  1929. listenerActionSheet: function() {
  1930. this.goPoster();
  1931. this.posters = true;
  1932. // #ifdef H5
  1933. if (this.$wechat.isWeixin()) {
  1934. this.weixinStatus = true;
  1935. }
  1936. // #endif
  1937. },
  1938. closePosters: function() {
  1939. this.posters = false;
  1940. this.currentPage = false;
  1941. },
  1942. //隐藏海报
  1943. posterImageClose: function() {
  1944. this.canvasStatus = false;
  1945. this.posters = false;
  1946. },
  1947. //替换安全域名
  1948. setDomain: function(url) {
  1949. url = url ? url.toString() : "";
  1950. //本地调试打开,生产请注销
  1951. if (url.indexOf("https://") > -1) return url;
  1952. else return url.replace("http://", "https://");
  1953. },
  1954. //获取海报产品图(解决跨域问题,只适用于小程序)
  1955. downloadFilestoreImage: function() {
  1956. let that = this;
  1957. uni.downloadFile({
  1958. url: that.setDomain(that.productInfo.image),
  1959. success: function(res) {
  1960. that.storeImage = res.tempFilePath;
  1961. },
  1962. fail: function() {
  1963. return that.$util.Tips({
  1964. title: "",
  1965. });
  1966. that.storeImage = "";
  1967. },
  1968. });
  1969. },
  1970. // 小程序关闭分享弹窗;
  1971. goFriend: function() {
  1972. this.posters = false;
  1973. },
  1974. // 小程序二维码
  1975. getQrcode() {
  1976. let that = this;
  1977. let data;
  1978. if (this.marketingType === ProductMarketingTypeEnum.Groupbuying) {
  1979. data = {
  1980. scene: "id=" +
  1981. this.id +
  1982. "&sd=" +
  1983. that.uid +
  1984. "&mt=" +
  1985. 2 +
  1986. "&gd=" +
  1987. this.groupActivityId,
  1988. page: "pages/goods/goods_details/index",
  1989. };
  1990. } else {
  1991. data = {
  1992. scene: "id=" + this.id + "&sd=" + that.uid + "&mt=" + that.marketingType,
  1993. page: "pages/goods/goods_details/index",
  1994. };
  1995. }
  1996. mpQrcode(data)
  1997. .then((res) => {
  1998. base64src(res.data.code, Date.now(), (res) => {
  1999. that.PromotionCode = res;
  2000. });
  2001. })
  2002. .catch((err) => {
  2003. that.errT = err;
  2004. });
  2005. },
  2006. // 生成二维码;
  2007. make(uid) {
  2008. let href;
  2009. if (this.marketingType === ProductMarketingTypeEnum.Groupbuying) {
  2010. href =
  2011. location.href.split("?")[0] +
  2012. "?id=" +
  2013. this.id +
  2014. "&sd=" +
  2015. this.uid +
  2016. "&mt=" +
  2017. this.marketingType +
  2018. "&gd=" +
  2019. this.groupActivityId;
  2020. } else {
  2021. href =
  2022. location.href.split("?")[0] +
  2023. "?id=" +
  2024. this.id +
  2025. "&sd=" +
  2026. this.uid +
  2027. "&mt=" +
  2028. this.marketingType;
  2029. }
  2030. uQRCode.make({
  2031. canvasId: "qrcode",
  2032. text: href,
  2033. size: this.qrcodeSize,
  2034. margin: 10,
  2035. success: (res) => {
  2036. this.PromotionCode = res;
  2037. },
  2038. complete: () => {},
  2039. fail: (res) => {
  2040. this.$util.Tips({
  2041. title: "海报二维码生成失败!",
  2042. });
  2043. },
  2044. });
  2045. },
  2046. getImageBase64: function(images) {
  2047. let that = this;
  2048. imageBase64({
  2049. url: images,
  2050. }).then((res) => {
  2051. that.imgTop = res.data.code;
  2052. });
  2053. },
  2054. /**
  2055. * 获取产品分销二维码
  2056. * @param function successFn 下载完成回调
  2057. *
  2058. */
  2059. downloadFilePromotionCode: function(successFn) {
  2060. let that = this;
  2061. getProductCode(that.id)
  2062. .then((res) => {
  2063. uni.downloadFile({
  2064. url: that.setDomain(res.data.code),
  2065. success: function(res) {
  2066. that.$set(that, "isDown", false);
  2067. if (typeof successFn == "function") {
  2068. successFn && successFn(res.tempFilePath);
  2069. } else {
  2070. that.$set(that, "PromotionCode", res.tempFilePath);
  2071. }
  2072. },
  2073. fail: function() {
  2074. that.$set(that, "isDown", false);
  2075. that.$set(that, "PromotionCode", "");
  2076. },
  2077. });
  2078. })
  2079. .catch((err) => {
  2080. that.$set(that, "isDown", false);
  2081. that.$set(that, "PromotionCode", "");
  2082. });
  2083. },
  2084. /**
  2085. * 生成海报
  2086. */
  2087. goPoster: function() {
  2088. let that = this;
  2089. uni.showLoading({
  2090. title: "海报生成中",
  2091. mask: true,
  2092. });
  2093. that.posters = false;
  2094. let arrImagesUrl = "";
  2095. let arrImagesUrlTop = "";
  2096. if (!that.PromotionCode) {
  2097. uni.hideLoading();
  2098. that.$util.Tips({
  2099. title: that.errT,
  2100. });
  2101. return;
  2102. }
  2103. setTimeout(() => {
  2104. if (!that.imgTop) {
  2105. uni.hideLoading();
  2106. that.$util.Tips({
  2107. title: "无法生成商品海报!",
  2108. });
  2109. return;
  2110. }
  2111. }, 1000);
  2112. uni.downloadFile({
  2113. url: that.imgTop, //仅为示例,并非真实的资源
  2114. success: (res) => {
  2115. arrImagesUrlTop = res.tempFilePath;
  2116. let arrImages = [
  2117. that.posterbackgd,
  2118. arrImagesUrlTop,
  2119. that.PromotionCode,
  2120. ];
  2121. let name = that.productInfo.name;
  2122. let price;
  2123. let otPrice;
  2124. if (this.marketingType === ProductMarketingTypeEnum.Groupbuying) {
  2125. price = that.groupBuyActivityResponse.activePrice;
  2126. otPrice = that.productInfo.price;
  2127. } else {
  2128. price = that.productInfo.price;
  2129. otPrice = that.productType === that.ProductTypeEnum.Integral ? that.productInfo
  2130. .cost : that.productInfo.otPrice;
  2131. }
  2132. setTimeout(() => {
  2133. that.$util.PosterCanvas(
  2134. arrImages,
  2135. name,
  2136. price,
  2137. otPrice,
  2138. function(tempFilePath) {
  2139. that.imagePath = tempFilePath;
  2140. that.canvasStatus = true;
  2141. uni.hideLoading();
  2142. }
  2143. );
  2144. }, 500);
  2145. },
  2146. });
  2147. },
  2148. // 图片预览;
  2149. getpreviewImage: function() {
  2150. if (this.imagePath) {
  2151. let photoList = [];
  2152. photoList.push(this.imagePath);
  2153. uni.previewImage({
  2154. urls: photoList,
  2155. current: this.imagePath,
  2156. });
  2157. } else {
  2158. this.$util.Tips({
  2159. title: "您的海报尚未生成",
  2160. });
  2161. }
  2162. },
  2163. /*
  2164. * 保存到手机相册
  2165. */
  2166. // #ifdef MP
  2167. savePosterPath: function() {
  2168. let that = this;
  2169. uni.getSetting({
  2170. success(res) {
  2171. if (!res.authSetting["scope.writePhotosAlbum"]) {
  2172. uni.authorize({
  2173. scope: "scope.writePhotosAlbum",
  2174. success() {
  2175. uni.saveImageToPhotosAlbum({
  2176. filePath: that.imagePath,
  2177. success: function(res) {
  2178. that.posterImageClose();
  2179. that.$util.Tips({
  2180. title: "保存成功",
  2181. icon: "success",
  2182. });
  2183. },
  2184. fail: function(res) {
  2185. that.$util.Tips({
  2186. title: "保存失败",
  2187. });
  2188. },
  2189. });
  2190. },
  2191. });
  2192. } else {
  2193. uni.saveImageToPhotosAlbum({
  2194. filePath: that.imagePath,
  2195. success: function(res) {
  2196. that.posterImageClose();
  2197. that.$util.Tips({
  2198. title: "保存成功",
  2199. icon: "success",
  2200. });
  2201. },
  2202. fail: function(res) {
  2203. that.$util.Tips({
  2204. title: "保存失败",
  2205. });
  2206. },
  2207. });
  2208. }
  2209. },
  2210. });
  2211. },
  2212. // #endif
  2213. ShareInfo() {
  2214. let data = this.productInfo;
  2215. let href = location.href;
  2216. if (this.$wechat.isWeixin() && this.publicLoginType == 1) {
  2217. if (this.marketingType === ProductMarketingTypeEnum.Groupbuying) {
  2218. href =
  2219. href.split("?")[0] +
  2220. "?id=" +
  2221. this.id +
  2222. "&sd=" +
  2223. this.uid +
  2224. "&mt=" +
  2225. this.marketingType +
  2226. "&gd=" +
  2227. this.groupActivityId;
  2228. } else {
  2229. href = href.split("?")[0] +
  2230. "?id=" +
  2231. this.id +
  2232. "&sd=" +
  2233. this.uid +
  2234. "&mt=" +
  2235. this.marketingType
  2236. }
  2237. let configAppMessage = {
  2238. desc: data.intro ? data.intro : '',
  2239. title: data.name,
  2240. link: href,
  2241. imgUrl: data.image,
  2242. };
  2243. this.$wechat
  2244. .wechatEvevt(
  2245. [
  2246. "updateAppMessageShareData",
  2247. "updateTimelineShareData",
  2248. "onMenuShareAppMessage",
  2249. "onMenuShareTimeline",
  2250. ],
  2251. configAppMessage
  2252. )
  2253. .then((res) => {})
  2254. .catch((err) => {
  2255. console.log(err);
  2256. });
  2257. }
  2258. },
  2259. showShare(status) {
  2260. let that = this;
  2261. that.$set(that.sharePacket, "touchstart", status);
  2262. },
  2263. hideNav() {
  2264. this.currentPage = false;
  2265. },
  2266. //下拉导航页面跳转
  2267. linkPage(url) {
  2268. if (
  2269. [
  2270. "/pages/index/index",
  2271. "/pages/order_addcart/order_addcart",
  2272. "/pages/user/index",
  2273. "/pages/discover_index/index",
  2274. ].indexOf(url) > -1
  2275. ) {
  2276. uni.switchTab({
  2277. url,
  2278. });
  2279. } else {
  2280. uni.navigateTo({
  2281. url,
  2282. });
  2283. }
  2284. this.currentPage = false;
  2285. },
  2286. //点击sku图片打开轮播图
  2287. showImg(index) {
  2288. if (this.selectSku) {
  2289. if (this.marketingType === ProductMarketingTypeEnum.Groupbuying) {
  2290. this.$refs.cusPreviewImg.open(this.selectSku.sku, 1);
  2291. } else {
  2292. this.$refs.cusPreviewImg.open(this.selectSku.sku, 0);
  2293. }
  2294. } else {
  2295. this.$refs.cusPreviewImg.open({}, 0);
  2296. }
  2297. },
  2298. //滑动轮播图选择商品
  2299. changeSwitch(e) {
  2300. let productSelect = this.skuArr[e];
  2301. this.$set(this, "selectSku", productSelect);
  2302. var skuList = productSelect.sku.split(",");
  2303. skuList.forEach((i, index) => {
  2304. this.$set(this.attr.productAttr[index], "index", skuList[index]);
  2305. });
  2306. if (productSelect) {
  2307. this.checkedAttr(productSelect)
  2308. this.$set(this, "attrValue", productSelect.sku);
  2309. this.getProductPrice();
  2310. }
  2311. },
  2312. getFileType(fileName) {
  2313. // 后缀获取
  2314. let suffix = "";
  2315. // 获取类型结果
  2316. let result = "";
  2317. try {
  2318. const flieArr = fileName.split(".");
  2319. suffix = flieArr[flieArr.length - 1];
  2320. } catch (err) {
  2321. suffix = "";
  2322. }
  2323. // fileName无后缀返回 false
  2324. if (!suffix) {
  2325. return false;
  2326. }
  2327. suffix = suffix.toLocaleLowerCase();
  2328. // 图片格式
  2329. const imglist = ["png", "jpg", "jpeg", "bmp", "gif"];
  2330. // 进行图片匹配
  2331. result = imglist.find((item) => item === suffix);
  2332. if (result) {
  2333. return "image";
  2334. }
  2335. // 匹配 视频
  2336. const videolist = [
  2337. "mp4",
  2338. "m2v",
  2339. "mkv",
  2340. "rmvb",
  2341. "wmv",
  2342. "avi",
  2343. "flv",
  2344. "mov",
  2345. "m4v",
  2346. ];
  2347. result = videolist.find((item) => item === suffix);
  2348. if (result) {
  2349. return "video";
  2350. }
  2351. // 其他 文件类型
  2352. return "other";
  2353. },
  2354. //直接购买
  2355. toAloneBuy() {
  2356. goProductDetail(this.productInfo.id, 0, "");
  2357. },
  2358. videoPause() {},
  2359. goVideoDetail(noteDetails) {
  2360. if (noteDetails.type === 2) {
  2361. uni.navigateTo({
  2362. //#ifdef APP
  2363. url: '/pages/discover/discover_video/appVideo/index?noteId=' + noteDetails.id+`&sd=${this.uid}`,
  2364. //#endif
  2365. //#ifndef APP
  2366. url: '/pages/discover/discover_video/routineVideo/index?noteId=' + noteDetails.id+`&sd=${this.uid}`,
  2367. //#endif
  2368. });
  2369. }
  2370. },
  2371. },
  2372. };
  2373. </script>
  2374. <style scoped lang="scss">
  2375. .icon-ic_share1 {
  2376. font-size: 30rpx;
  2377. background: rgba(255, 255, 255, 0.6);
  2378. border: 1rpx solid rgba(0, 0, 0, 0.1);
  2379. /* #ifdef H5 || APP-PLUS */
  2380. width: 50rpx;
  2381. height: 50rpx;
  2382. line-height: 48rpx;
  2383. border-radius: 25rpx;
  2384. /* #endif */
  2385. /* #ifdef MP */
  2386. width: 60rpx;
  2387. height: 60rpx;
  2388. line-height: 56rpx;
  2389. border-radius: 30rpx;
  2390. padding-left: 4rpx;
  2391. /* #endif */
  2392. position: fixed;
  2393. text-align: center;
  2394. z-index: 999;
  2395. }
  2396. .w-640rpx {
  2397. width: 640rpx !important;
  2398. }
  2399. .icon-fanhui2,
  2400. .icon-shouye7 {
  2401. font-size: 30rpx !important;
  2402. font-weight: 600;
  2403. }
  2404. .mb10 {
  2405. margin-bottom: 10rpx;
  2406. }
  2407. .coupon_label {
  2408. height: 34rpx;
  2409. line-height: 32rpx;
  2410. border-radius: 4rpx;
  2411. padding: 0 10rpx;
  2412. font-size: 22rpx;
  2413. margin-right: 10rpx;
  2414. @include main_color(theme);
  2415. @include cate-two-btn(theme);
  2416. }
  2417. .coupon_more {
  2418. font-size: 22rpx;
  2419. @include main_color(theme);
  2420. .iconfont {
  2421. font-size: 24rpx;
  2422. }
  2423. }
  2424. .longBnts {
  2425. width: 444rpx;
  2426. text-align: center;
  2427. line-height: 76rpx;
  2428. color: #fff;
  2429. font-size: 28rpx;
  2430. display: inline-block;
  2431. border-radius: 50rpx !important;
  2432. }
  2433. .mtop {
  2434. margin-top: -162rpx;
  2435. }
  2436. .lineWidth {
  2437. width: 588rpx;
  2438. }
  2439. .superior {
  2440. /deep/.name,
  2441. /deep/.icon-jiantou {
  2442. color: #333 !important;
  2443. }
  2444. /deep/.store {
  2445. padding: 0 !important;
  2446. }
  2447. /deep/image,
  2448. .easy-loadimage,
  2449. image,
  2450. uni-image {
  2451. width: 86rpx;
  2452. height: 86rpx;
  2453. border-radius: 6px;
  2454. opacity: 1;
  2455. }
  2456. }
  2457. .product-con {
  2458. height: 100%;
  2459. }
  2460. .ensure {
  2461. width: 100%;
  2462. background-color: #fff;
  2463. padding-bottom: 22rpx;
  2464. padding-bottom: calc(22rpx+ constant(safe-area-inset-bottom)); ///兼容 IOS<11.2/
  2465. padding-bottom: calc(22rpx + env(safe-area-inset-bottom)); ///兼容 IOS>11.2/
  2466. .title {
  2467. font-size: 32rpx;
  2468. color: #282828;
  2469. text-align: center;
  2470. margin: 38rpx 0 36rpx 0;
  2471. position: relative;
  2472. .iconfont {
  2473. position: absolute;
  2474. right: 30rpx;
  2475. top: 0;
  2476. font-size: 36rpx;
  2477. }
  2478. }
  2479. .list {
  2480. height: 750rpx;
  2481. margin: 0 30rpx;
  2482. overflow-x: hidden;
  2483. overflow-y: auto;
  2484. .item {
  2485. margin-bottom: 52rpx;
  2486. .pictrue {
  2487. width: 36rpx;
  2488. height: 36rpx;
  2489. border-radius: 50%;
  2490. margin-right: 30rpx;
  2491. /deep/image,
  2492. .easy-loadimage,
  2493. image,
  2494. uni-image {
  2495. width: 100%;
  2496. height: 100%;
  2497. border-radius: 50%;
  2498. }
  2499. }
  2500. .text {
  2501. width: 618rpx;
  2502. color: #999999;
  2503. font-size: 28rpx;
  2504. .name {
  2505. color: #333333;
  2506. font-weight: bold;
  2507. margin-bottom: 20rpx;
  2508. }
  2509. }
  2510. }
  2511. }
  2512. .bnt,
  2513. .activityBtn {
  2514. width: 690rpx;
  2515. height: 86rpx;
  2516. text-align: center;
  2517. line-height: 86rpx;
  2518. border-radius: 43rpx;
  2519. font-size: 30rpx;
  2520. color: #fff;
  2521. margin: 0 auto;
  2522. }
  2523. .bnt {
  2524. @include main_bg_color(theme);
  2525. }
  2526. }
  2527. .ensure.on {
  2528. transform: translate3d(0, 0, 0);
  2529. }
  2530. /deep/ .tui-drawer-container_bottom {
  2531. border-radius: 16rpx 16rpx 0 0;
  2532. }
  2533. .product-con {
  2534. height: 100%;
  2535. }
  2536. .x-money {
  2537. font-size: 40rpx;
  2538. @include price_color(theme);
  2539. }
  2540. .bg-color-hui {
  2541. background: #bbb !important;
  2542. border-radius: 0 25px 25px 0;
  2543. }
  2544. .lang {
  2545. width: 170rpx !important;
  2546. height: 60rpx !important;
  2547. border-radius: 33rpx;
  2548. }
  2549. .circle {
  2550. width: 58rpx !important;
  2551. height: 58rpx !important;
  2552. border-radius: 50%;
  2553. }
  2554. .select_nav {
  2555. background: rgba(255, 255, 255, 0.6);
  2556. border: 1rpx solid rgba(0, 0, 0, 0.1);
  2557. color: #000;
  2558. position: fixed;
  2559. font-size: 18px;
  2560. line-height: 62rpx;
  2561. z-index: 1000;
  2562. left: 14rpx;
  2563. }
  2564. .px-20 {
  2565. padding: 0 20rpx 0;
  2566. }
  2567. .nav_line {
  2568. content: "";
  2569. display: inline-block;
  2570. width: 1rpx;
  2571. height: 30rpx;
  2572. background: #e8dfdf;
  2573. position: absolute;
  2574. left: 0;
  2575. right: 0;
  2576. margin: auto;
  2577. }
  2578. .bgwhite {
  2579. background: #fff;
  2580. }
  2581. .input {
  2582. display: flex;
  2583. align-items: center;
  2584. /* #ifdef MP */
  2585. width: 300rpx;
  2586. /* #endif */
  2587. /* #ifndef MP */
  2588. width: 460rpx;
  2589. /* #endif */
  2590. height: 58rpx;
  2591. padding: 0 0 0 30rpx;
  2592. border: 1px solid rgba(0, 0, 0, 0.07);
  2593. border-radius: 33rpx;
  2594. color: #666;
  2595. font-size: 26rpx;
  2596. position: fixed;
  2597. left: 0;
  2598. right: 0;
  2599. margin: auto;
  2600. background: rgba(255, 255, 255, 0.3);
  2601. .iconfont {
  2602. margin-right: 20rpx;
  2603. font-size: 26rpx;
  2604. color: #666666;
  2605. }
  2606. }
  2607. .container_detail {
  2608. /* #ifdef MP */
  2609. margin-top: 32rpx;
  2610. /* #endif */
  2611. }
  2612. .tab_nav {
  2613. width: 100%;
  2614. height: 48px;
  2615. /* #ifdef MP */
  2616. margin-left: 220rpx;
  2617. /* #endif */
  2618. }
  2619. .right_select {
  2620. width: 50rpx;
  2621. height: 50rpx;
  2622. background: rgba(255, 255, 255, 0.3);
  2623. border: 1px solid rgba(0, 0, 0, 0.1);
  2624. border-radius: 50%;
  2625. position: fixed;
  2626. right: 20rpx;
  2627. text-align: center;
  2628. line-height: 50rpx;
  2629. }
  2630. .dialog_nav {
  2631. position: absolute;
  2632. /* #ifdef MP */
  2633. left: 14rpx;
  2634. /* #endif */
  2635. /* #ifdef H5 || APP-PLUS*/
  2636. right: 14rpx;
  2637. /* #endif */
  2638. width: 240rpx;
  2639. background: #ffffff;
  2640. box-shadow: 0px 0px 16rpx rgba(0, 0, 0, 0.08);
  2641. z-index: 310;
  2642. border-radius: 14rpx;
  2643. &::before {
  2644. content: "";
  2645. width: 0;
  2646. height: 0;
  2647. position: absolute;
  2648. /* #ifdef MP */
  2649. left: 0;
  2650. right: 0;
  2651. margin: auto;
  2652. /* #endif */
  2653. /* #ifdef H5 || APP-PLUS */
  2654. right: 8px;
  2655. /* #endif */
  2656. top: -9px;
  2657. border-bottom: 10px solid #f5f5f5;
  2658. border-left: 10px solid transparent;
  2659. /*transparent 表示透明*/
  2660. border-right: 10px solid transparent;
  2661. }
  2662. }
  2663. .dialog_nav_item {
  2664. width: 100%;
  2665. height: 84rpx;
  2666. line-height: 84rpx;
  2667. padding: 0 20rpx 0;
  2668. box-sizing: border-box;
  2669. border-bottom: #eee;
  2670. font-size: 28rpx;
  2671. color: #333;
  2672. position: relative;
  2673. .iconfont {
  2674. font-size: 32rpx;
  2675. }
  2676. }
  2677. .dialog_after {
  2678. ::after {
  2679. content: "";
  2680. position: absolute;
  2681. width: 172rpx;
  2682. height: 1px;
  2683. background-color: #eeeeee;
  2684. bottom: 0;
  2685. right: 0;
  2686. }
  2687. }
  2688. .pl-20 {
  2689. padding-left: 20rpx;
  2690. }
  2691. .activity {
  2692. padding: 0 20rpx;
  2693. @include coupons_border_color(theme);
  2694. @include main_color(theme);
  2695. font-size: 24rpx;
  2696. line-height: 32rpx;
  2697. position: relative;
  2698. margin-left: 4rpx;
  2699. }
  2700. .product-con .wrapper .coupon .activity:before {
  2701. content: " ";
  2702. position: absolute;
  2703. width: 7rpx;
  2704. height: 10rpx;
  2705. border-radius: 0 7rpx 7rpx 0;
  2706. @include coupons_border_color(theme);
  2707. background-color: #fff !important;
  2708. bottom: 50%;
  2709. left: -3rpx;
  2710. margin-bottom: -6rpx;
  2711. @include white_left_border;
  2712. }
  2713. .product-con .wrapper .coupon .activity:after {
  2714. content: " ";
  2715. position: absolute;
  2716. width: 7rpx;
  2717. height: 10rpx;
  2718. border-radius: 7rpx 0 0 7rpx;
  2719. @include coupons_border_color(theme);
  2720. background-color: #fff;
  2721. right: -3rpx;
  2722. bottom: 50%;
  2723. margin-bottom: -6rpx;
  2724. @include white_right_border;
  2725. }
  2726. .justify-center {
  2727. justify-content: center;
  2728. }
  2729. .align-center {
  2730. align-items: center;
  2731. }
  2732. .align-baseline {
  2733. align-items: baseline;
  2734. }
  2735. .bg_color {
  2736. @include main_bg_color(theme);
  2737. }
  2738. .vip_icon {
  2739. width: 44rpx;
  2740. height: 28rpx;
  2741. }
  2742. .pl-2 {
  2743. padding-left: 20rpx;
  2744. }
  2745. .vip_money {
  2746. background: #ffe7b9;
  2747. border-radius: 4px;
  2748. font-size: 22rpx;
  2749. color: #333;
  2750. line-height: 28rpx;
  2751. text-align: center;
  2752. padding: 0 6rpx;
  2753. box-sizing: border-box;
  2754. margin-left: -4rpx;
  2755. }
  2756. .theme_price {
  2757. @include price_color(theme);
  2758. margin-top: 5rpx;
  2759. }
  2760. .activityName {
  2761. line-height: 44rpx;
  2762. }
  2763. .userEvaluation {
  2764. i {
  2765. display: inline-block;
  2766. }
  2767. }
  2768. .bntVideo {
  2769. width: auto !important;
  2770. .buy {
  2771. border-radius: 50rpx !important;
  2772. }
  2773. }
  2774. .attribute {
  2775. .line1 {
  2776. width: 600rpx;
  2777. }
  2778. .acea-row {
  2779. overflow: hidden;
  2780. }
  2781. }
  2782. .chat-btn {
  2783. background-color: antiquewhite !important;
  2784. }
  2785. .activity_pin {
  2786. width: auto;
  2787. height: 44rpx;
  2788. line-height: 44rpx;
  2789. @include linear-gradient(theme);
  2790. opacity: 1;
  2791. border-radius: 22rpx;
  2792. padding: 0 15rpx;
  2793. }
  2794. .activity_miao {
  2795. width: auto;
  2796. height: 44rpx;
  2797. line-height: 44rpx;
  2798. padding: 0 15rpx;
  2799. // background: linear-gradient(90deg, rgba(250, 102, 24, 1) 0%, rgba(254, 161, 15, 1) 100%);
  2800. @include linear-gradient(theme);
  2801. opacity: 1;
  2802. border-radius: 22rpx;
  2803. margin-left: 19rpx;
  2804. }
  2805. .iconfonts {
  2806. color: #fff !important;
  2807. font-size: 28rpx;
  2808. }
  2809. .activity_title {
  2810. font-size: 24rpx;
  2811. color: #fff;
  2812. }
  2813. .activity_kan {
  2814. width: auto;
  2815. height: 44rpx;
  2816. line-height: 44rpx;
  2817. padding: 0 15rpx;
  2818. @include linear-gradient(theme);
  2819. opacity: 1;
  2820. border-radius: 22rpx;
  2821. margin-left: 19rpx;
  2822. }
  2823. .mask {
  2824. z-index: 300 !important;
  2825. }
  2826. .head-bar {
  2827. background: #fff;
  2828. }
  2829. .generate-posters {
  2830. width: 100%;
  2831. height: 318rpx;
  2832. background-color: #fff;
  2833. position: fixed;
  2834. left: 0;
  2835. bottom: 0;
  2836. z-index: 388;
  2837. transform: translate3d(0, 100%, 0);
  2838. transition: all 0.3s cubic-bezier(0.25, 0.5, 0.5, 0.9);
  2839. border-top: 1rpx solid #eee;
  2840. .generateCon {
  2841. height: 220rpx;
  2842. }
  2843. .generateClose {
  2844. height: 98rpx;
  2845. font-size: 28rpx;
  2846. color: #333333;
  2847. border-top: 1px solid #eee;
  2848. }
  2849. .item {
  2850. .pictrue {
  2851. width: 96rpx;
  2852. height: 96rpx;
  2853. border-radius: 50%;
  2854. margin: 0 auto 6rpx auto;
  2855. /deep/image,
  2856. .easy-loadimage,
  2857. image,
  2858. uni-image {
  2859. width: 100%;
  2860. height: 100%;
  2861. border-radius: 50%;
  2862. }
  2863. }
  2864. }
  2865. }
  2866. .generate-posters.on {
  2867. transform: translate3d(0, 0, 0);
  2868. }
  2869. .generate-posters .item {
  2870. flex: 1;
  2871. text-align: center;
  2872. font-size: 30rpx;
  2873. }
  2874. .generate-posters .item .iconfont {
  2875. font-size: 80rpx;
  2876. color: #5eae72;
  2877. }
  2878. .generate-posters .item .iconfont.icon-haibao {
  2879. color: #5391f1;
  2880. }
  2881. .generate-posters .item .iconfont.icon-haowuquan1 {
  2882. color: #ff954d;
  2883. }
  2884. .product-con .footer {
  2885. padding: 0 20rpx 0 30rpx;
  2886. position: fixed;
  2887. bottom: 0;
  2888. width: 100%;
  2889. box-sizing: border-box;
  2890. background-color: #fff;
  2891. display: flex;
  2892. justify-content: flex-end;
  2893. z-index: 277;
  2894. border-top: 1rpx solid #f0f0f0;
  2895. height: 100rpx;
  2896. height: calc(100rpx+ constant(safe-area-inset-bottom)); ///兼容 IOS<11.2/
  2897. height: calc(100rpx + env(safe-area-inset-bottom)); ///兼容 IOS>11.2/
  2898. }
  2899. .product-con .footer .item {
  2900. font-size: 18rpx;
  2901. color: #666;
  2902. }
  2903. .product-con .footer .item .iconfont {
  2904. text-align: center;
  2905. font-size: 40rpx;
  2906. }
  2907. .color-change {
  2908. @include main_color(theme);
  2909. }
  2910. .color-normal {
  2911. color: #e93323 !important;
  2912. }
  2913. .product-con .footer .item .iconfont.icon-gouwuche1 {
  2914. font-size: 40rpx;
  2915. position: relative;
  2916. }
  2917. .product-con .footer .item .iconfont.icon-gouwuche1 .num {
  2918. color: #fff;
  2919. position: absolute;
  2920. font-size: 18rpx;
  2921. padding: 2rpx 8rpx 3rpx;
  2922. border-radius: 200rpx;
  2923. top: -10rpx;
  2924. right: -10rpx;
  2925. }
  2926. .product-con .footer .bnt {
  2927. height: 76rpx;
  2928. }
  2929. .product-con .footer .bnt .bnts {
  2930. width: 222rpx;
  2931. text-align: center;
  2932. line-height: 76rpx;
  2933. color: #fff;
  2934. font-size: 28rpx;
  2935. }
  2936. .product-con .footer .bnt .joinCart {
  2937. border-radius: 50rpx 0 0 50rpx;
  2938. @include left_color(theme);
  2939. }
  2940. .product-con .footer .bnt .joinCart.groupJoin {
  2941. background-color: #FE960F !important;
  2942. }
  2943. .product-con .footer .bnt .buy {
  2944. border-radius: 0 50rpx 50rpx 0;
  2945. @include main_bg_color(theme);
  2946. }
  2947. .product-con .store-info {
  2948. margin-top: 20rpx;
  2949. background-color: #fff;
  2950. }
  2951. .product-con .store-info .title {
  2952. padding: 0 30rpx;
  2953. font-size: 28rpx;
  2954. color: #282828;
  2955. height: 80rpx;
  2956. line-height: 80rpx;
  2957. border-bottom: 1px solid #f5f5f5;
  2958. }
  2959. .product-con .store-info .info {
  2960. padding: 0 30rpx;
  2961. height: 126rpx;
  2962. }
  2963. .product-con .store-info .info .picTxt {
  2964. width: 615rpx;
  2965. }
  2966. .product-con .store-info .info .picTxt .pictrue {
  2967. width: 76rpx;
  2968. height: 76rpx;
  2969. }
  2970. .product-con .store-info .info .picTxt .pictrue image {
  2971. width: 100%;
  2972. height: 100%;
  2973. border-radius: 6rpx;
  2974. }
  2975. .product-con .store-info .info .picTxt .text {
  2976. width: 522rpx;
  2977. }
  2978. .product-con .store-info .info .picTxt .text .name {
  2979. font-size: 30rpx;
  2980. color: #282828;
  2981. }
  2982. .product-con .store-info .info .picTxt .text .address {
  2983. font-size: 24rpx;
  2984. color: #666;
  2985. margin-top: 3rpx;
  2986. }
  2987. .product-con .store-info .info .picTxt .text .address .iconfont {
  2988. color: #707070;
  2989. font-size: 18rpx;
  2990. margin-left: 10rpx;
  2991. }
  2992. .product-con .store-info .info .picTxt .text .address .addressTxt {
  2993. max-width: 480rpx;
  2994. }
  2995. .product-con .store-info .info .iconfont {
  2996. font-size: 40rpx;
  2997. }
  2998. .product-con .superior {
  2999. background-color: #fff;
  3000. margin-top: 20rpx;
  3001. padding: 24rpx;
  3002. .title {
  3003. height: 98rpx;
  3004. image {
  3005. width: 20rpx;
  3006. height: 20rpx;
  3007. }
  3008. .titleTxt {
  3009. margin: 0 10rpx;
  3010. font-size: 30rpx;
  3011. color: #333333;
  3012. }
  3013. }
  3014. .slider-banner {
  3015. width: 100%;
  3016. margin: 0 auto;
  3017. position: relative;
  3018. .list {
  3019. width: 100%;
  3020. .item {
  3021. width: 204rpx;
  3022. margin: 24rpx 3.2% 0 0;
  3023. font-size: 26rpx;
  3024. .pictrue {
  3025. position: relative;
  3026. width: 204rpx;
  3027. height: 204rpx;
  3028. border-radius: 6rpx;
  3029. overflow: hidden;
  3030. /deep/image,
  3031. .easy-loadimage,
  3032. image,
  3033. uni-image {
  3034. width: 100% !important;
  3035. height: 100% !important;
  3036. border-radius: 6rpx;
  3037. }
  3038. }
  3039. .name {
  3040. color: #282828;
  3041. margin-top: 10rpx;
  3042. }
  3043. }
  3044. .item:nth-of-type(3n) {
  3045. margin-right: 0;
  3046. }
  3047. }
  3048. }
  3049. }
  3050. button {
  3051. padding: 0;
  3052. margin: 0;
  3053. line-height: normal;
  3054. background-color: #fff;
  3055. }
  3056. button::after {
  3057. border: 0;
  3058. }
  3059. action-sheet-item {
  3060. padding: 0;
  3061. height: 240rpx;
  3062. align-items: center;
  3063. display: flex;
  3064. }
  3065. .contact {
  3066. font-size: 16px;
  3067. width: 50%;
  3068. background-color: #fff;
  3069. padding: 8rpx 0;
  3070. border-radius: 0;
  3071. margin: 0;
  3072. line-height: 2;
  3073. }
  3074. .contact::after {
  3075. border: none;
  3076. }
  3077. .action-sheet {
  3078. font-size: 17px;
  3079. line-height: 1.8;
  3080. width: 50%;
  3081. position: absolute;
  3082. top: 0;
  3083. right: 0;
  3084. padding: 25rpx 0;
  3085. }
  3086. .canvas {
  3087. position: fixed;
  3088. z-index: -5;
  3089. opacity: 0;
  3090. }
  3091. .poster-pop {
  3092. position: fixed;
  3093. width: 500rpx;
  3094. height: 714rpx;
  3095. top: 50%;
  3096. left: 50%;
  3097. transform: translateX(-50%);
  3098. margin-top: -432rpx;
  3099. z-index: 399;
  3100. // background-image: url('https://api.admin.merchant.crmeb.xbdzz.cn/crmebimage/public/product/2024/08/13/8a25e3c98d864299b7a5201f70ea24edkoj7sce8za.png');
  3101. // background-size: cover;
  3102. }
  3103. .poster-pop image {
  3104. width: 100%;
  3105. height: 100%;
  3106. display: block;
  3107. }
  3108. .poster-pop .close {
  3109. width: 46rpx;
  3110. height: 75rpx;
  3111. position: fixed;
  3112. right: 0;
  3113. top: -73rpx;
  3114. display: block;
  3115. }
  3116. .poster-pop .save-poster {
  3117. background-color: #df2d0a;
  3118. font-size: :22rpx;
  3119. color: #fff;
  3120. text-align: center;
  3121. height: 76rpx;
  3122. line-height: 76rpx;
  3123. width: 100%;
  3124. }
  3125. .poster-pop .keep {
  3126. color: #fff;
  3127. text-align: center;
  3128. font-size: 25rpx;
  3129. margin-top: 10rpx;
  3130. }
  3131. .mask {
  3132. position: fixed;
  3133. top: 0;
  3134. left: 0;
  3135. right: 0;
  3136. bottom: 0;
  3137. background-color: rgba(0, 0, 0, 0.6);
  3138. }
  3139. .pro-wrapper .iconn {
  3140. background-image: url("data:image/png;base64,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");
  3141. width: 100rpx;
  3142. height: 100rpx;
  3143. background-repeat: no-repeat;
  3144. background-size: 100% 100%;
  3145. margin: 0 auto;
  3146. }
  3147. .pro-wrapper .iconn.iconn1 {
  3148. background-image: url("data:image/png;base64,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");
  3149. }
  3150. .pictrue_log {
  3151. width: 80upx;
  3152. height: 40upx;
  3153. border-radius: 10upx 0 12upx 0;
  3154. line-height: 40upx;
  3155. font-size: 24upx;
  3156. }
  3157. .pictrue_log_class {
  3158. z-index: 3;
  3159. background: -webkit-gradient(linear,
  3160. left top,
  3161. right top,
  3162. from(rgba(246, 122, 56, 1)),
  3163. to(rgba(241, 27, 9, 1)));
  3164. background: linear-gradient(90deg,
  3165. rgba(246, 122, 56, 1) 0%,
  3166. rgba(241, 27, 9, 1) 100%);
  3167. opacity: 1;
  3168. position: absolute;
  3169. top: 0;
  3170. left: 0;
  3171. color: #fff;
  3172. text-align: center;
  3173. }
  3174. .tab_nav .header {
  3175. /* #ifdef H5 || APP-PLUS */
  3176. width: 77%;
  3177. justify-content: space-around;
  3178. /* #endif */
  3179. /* #ifdef MP */
  3180. width: 100%;
  3181. /* #endif */
  3182. height: 96rpx;
  3183. font-size: 28rpx;
  3184. color: #050505;
  3185. margin: auto;
  3186. background-color: #fff;
  3187. }
  3188. .navbar .header .item {
  3189. position: relative;
  3190. margin: 0 25rpx;
  3191. }
  3192. .navbar .header .item.on:before {
  3193. position: absolute;
  3194. width: 60rpx;
  3195. height: 5rpx;
  3196. background-repeat: no-repeat;
  3197. content: "";
  3198. @include linear-gradient(theme);
  3199. bottom: -10rpx;
  3200. left: 50%;
  3201. margin-left: -28rpx;
  3202. }
  3203. .navbar {
  3204. position: fixed;
  3205. // background-color: #fff;
  3206. top: 0;
  3207. left: 0;
  3208. z-index: 99;
  3209. width: 100%;
  3210. }
  3211. .navbar .navbarH {
  3212. position: relative;
  3213. width: 100%;
  3214. }
  3215. .navbar .navbarH .navbarCon {
  3216. position: absolute;
  3217. bottom: 0;
  3218. height: 100rpx;
  3219. width: 100%;
  3220. }
  3221. .h5_back {
  3222. color: #000;
  3223. position: fixed;
  3224. left: 20rpx;
  3225. font-size: 26rpx;
  3226. text-align: center;
  3227. width: 50rpx;
  3228. height: 50rpx;
  3229. line-height: 50rpx;
  3230. background: rgba(255, 255, 255, 0.3);
  3231. border: 1px solid rgba(0, 0, 0, 0.1);
  3232. border-radius: 50%;
  3233. }
  3234. .share-box {
  3235. z-index: 1000;
  3236. position: fixed;
  3237. left: 0;
  3238. top: 0;
  3239. width: 100%;
  3240. height: 100%;
  3241. image {
  3242. width: 100%;
  3243. height: 100%;
  3244. }
  3245. }
  3246. .mask_transparent {
  3247. position: fixed;
  3248. top: 0;
  3249. left: 0;
  3250. right: 0;
  3251. bottom: 0;
  3252. background: transparent;
  3253. z-index: 300;
  3254. }
  3255. .px-12 {
  3256. padding-left: 12rpx;
  3257. padding-right: 12rpx;
  3258. }
  3259. .font-44 {
  3260. font-size: 44rpx;
  3261. }
  3262. .font_color {
  3263. @include main_color(theme);
  3264. }
  3265. .attrImg {
  3266. width: 66rpx;
  3267. height: 66rpx;
  3268. border-radius: 6rpx;
  3269. display: block;
  3270. margin-right: 14rpx;
  3271. }
  3272. .switchTxt {
  3273. height: 60rpx;
  3274. flex: 1;
  3275. line-height: 60rpx;
  3276. box-sizing: border-box;
  3277. background: #eeeeee;
  3278. padding-right: 0 24rpx 0;
  3279. border-radius: 8rpx;
  3280. text-align: center;
  3281. }
  3282. .text-666 {
  3283. color: #666;
  3284. }
  3285. .text-333 {
  3286. color: #333 !important;
  3287. }
  3288. .iconColor {
  3289. @include main_color(theme);
  3290. }
  3291. .activityIcon {
  3292. color: #e93323;
  3293. }
  3294. .detailText {
  3295. padding-bottom: 30rpx;
  3296. }
  3297. .spredGroupStyle {
  3298. width: 450rpx;
  3299. height: 76rpx;
  3300. line-height: 76rpx;
  3301. background: #e93323;
  3302. border-radius: 40rpx;
  3303. font-weight: 400;
  3304. font-size: 28rpx;
  3305. color: #ffffff;
  3306. }
  3307. .group-buy {
  3308. background: #e93323;
  3309. border-radius: 0px 76rpx 76rpx 0px;
  3310. }
  3311. .group-buy2 {
  3312. width: 450rpx !important;
  3313. background: #e93323;
  3314. border-radius: 76rpx;
  3315. }
  3316. .navbar .header .item.groupTabOn:before {
  3317. position: absolute;
  3318. width: 60rpx;
  3319. height: 5rpx;
  3320. background-repeat: no-repeat;
  3321. content: "";
  3322. background: #e93323;
  3323. bottom: -10rpx;
  3324. left: 50%;
  3325. margin-left: -28rpx;
  3326. }
  3327. .groupColor {
  3328. color: #e93323;
  3329. }
  3330. .imageBox {
  3331. width: 702rpx;
  3332. // height: 702rpx;
  3333. position: relative;
  3334. swiper {
  3335. width: 100%;
  3336. height: 100%;
  3337. position: relative;
  3338. }
  3339. .cover {
  3340. width: 702rpx;
  3341. position: relative;
  3342. border-radius: 10px 10px 10px 10px;
  3343. /deep/image,
  3344. /deep/.easy-loadimage,
  3345. uni-image {
  3346. width: 702rpx;
  3347. border-radius: 10px 10px 10px 10px;
  3348. overflow: hidden;
  3349. }
  3350. .circle {
  3351. width: 100rpx;
  3352. height: 100rpx;
  3353. border-radius: 50%;
  3354. background: rgba(0, 0, 0, .5);
  3355. position: absolute;
  3356. top: 50%;
  3357. left: 50%;
  3358. margin-left: -50rpx;
  3359. margin-top: -50rpx;
  3360. z-index: 10;
  3361. line-height: 50px;
  3362. text-align: center;
  3363. color: #fff;
  3364. }
  3365. }
  3366. .slide-image {
  3367. width: 100%;
  3368. height: 100%;
  3369. border-radius: 16rpx;
  3370. }
  3371. .pages {
  3372. position: absolute;
  3373. background-color: #fff;
  3374. height: 34rpx;
  3375. padding: 0 10rpx;
  3376. border-radius: 3rpx;
  3377. right: 30rpx;
  3378. bottom: 30rpx;
  3379. line-height: 34rpx;
  3380. font-size: 24rpx;
  3381. color: #050505;
  3382. }
  3383. }
  3384. </style>