index.vue 99 KB

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