index.vue 105 KB

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