index.vue 113 KB

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