index-bak.vue 105 KB

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