product.vue 61 KB

12345678910111213141516171819202122232425262728293031323334353637383940414243444546474849505152535455565758596061626364656667686970717273747576777879808182838485868788899091929394959697989910010110210310410510610710810911011111211311411511611711811912012112212312412512612712812913013113213313413513613713813914014114214314414514614714814915015115215315415515615715815916016116216316416516616716816917017117217317417517617717817918018118218318418518618718818919019119219319419519619719819920020120220320420520620720820921021121221321421521621721821922022122222322422522622722822923023123223323423523623723823924024124224324424524624724824925025125225325425525625725825926026126226326426526626726826927027127227327427527627727827928028128228328428528628728828929029129229329429529629729829930030130230330430530630730830931031131231331431531631731831932032132232332432532632732832933033133233333433533633733833934034134234334434534634734834935035135235335435535635735835936036136236336436536636736836937037137237337437537637737837938038138238338438538638738838939039139239339439539639739839940040140240340440540640740840941041141241341441541641741841942042142242342442542642742842943043143243343443543643743843944044144244344444544644744844945045145245345445545645745845946046146246346446546646746846947047147247347447547647747847948048148248348448548648748848949049149249349449549649749849950050150250350450550650750850951051151251351451551651751851952052152252352452552652752852953053153253353453553653753853954054154254354454554654754854955055155255355455555655755855956056156256356456556656756856957057157257357457557657757857958058158258358458558658758858959059159259359459559659759859960060160260360460560660760860961061161261361461561661761861962062162262362462562662762862963063163263363463563663763863964064164264364464564664764864965065165265365465565665765865966066166266366466566666766866967067167267367467567667767867968068168268368468568668768868969069169269369469569669769869970070170270370470570670770870971071171271371471571671771871972072172272372472572672772872973073173273373473573673773873974074174274374474574674774874975075175275375475575675775875976076176276376476576676776876977077177277377477577677777877978078178278378478578678778878979079179279379479579679779879980080180280380480580680780880981081181281381481581681781881982082182282382482582682782882983083183283383483583683783883984084184284384484584684784884985085185285385485585685785885986086186286386486586686786886987087187287387487587687787887988088188288388488588688788888989089189289389489589689789889990090190290390490590690790890991091191291391491591691791891992092192292392492592692792892993093193293393493593693793893994094194294394494594694794894995095195295395495595695795895996096196296396496596696796896997097197297397497597697797897998098198298398498598698798898999099199299399499599699799899910001001100210031004100510061007100810091010101110121013101410151016101710181019102010211022102310241025102610271028102910301031103210331034103510361037103810391040104110421043104410451046104710481049105010511052105310541055105610571058105910601061106210631064106510661067106810691070107110721073107410751076107710781079108010811082108310841085108610871088108910901091109210931094109510961097109810991100110111021103110411051106110711081109111011111112111311141115111611171118111911201121112211231124112511261127112811291130113111321133113411351136113711381139114011411142114311441145114611471148114911501151115211531154115511561157115811591160116111621163116411651166116711681169117011711172117311741175117611771178117911801181118211831184118511861187118811891190119111921193119411951196119711981199120012011202120312041205120612071208120912101211121212131214121512161217121812191220122112221223122412251226122712281229123012311232123312341235123612371238123912401241124212431244124512461247124812491250125112521253125412551256125712581259126012611262126312641265126612671268126912701271127212731274127512761277127812791280128112821283128412851286128712881289129012911292129312941295129612971298129913001301130213031304130513061307130813091310131113121313131413151316131713181319132013211322132313241325132613271328132913301331133213331334133513361337133813391340134113421343134413451346134713481349135013511352135313541355135613571358135913601361136213631364136513661367136813691370137113721373137413751376137713781379138013811382138313841385138613871388138913901391139213931394139513961397139813991400140114021403140414051406140714081409141014111412141314141415141614171418141914201421142214231424142514261427142814291430143114321433143414351436143714381439144014411442144314441445144614471448144914501451145214531454145514561457145814591460146114621463146414651466146714681469147014711472147314741475147614771478147914801481148214831484148514861487148814891490149114921493149414951496149714981499150015011502150315041505150615071508150915101511151215131514151515161517151815191520152115221523152415251526152715281529153015311532153315341535153615371538153915401541154215431544154515461547154815491550155115521553155415551556155715581559156015611562156315641565156615671568156915701571157215731574157515761577157815791580158115821583158415851586158715881589159015911592159315941595159615971598159916001601160216031604160516061607160816091610161116121613161416151616161716181619162016211622162316241625162616271628162916301631163216331634163516361637163816391640164116421643164416451646164716481649165016511652165316541655165616571658165916601661166216631664166516661667166816691670167116721673167416751676167716781679168016811682168316841685168616871688168916901691169216931694169516961697169816991700170117021703170417051706170717081709171017111712171317141715171617171718171917201721172217231724172517261727172817291730173117321733173417351736173717381739174017411742174317441745174617471748174917501751175217531754175517561757175817591760176117621763176417651766176717681769177017711772177317741775177617771778177917801781178217831784178517861787178817891790179117921793179417951796179717981799180018011802180318041805180618071808180918101811181218131814181518161817181818191820182118221823182418251826182718281829183018311832183318341835183618371838183918401841184218431844184518461847184818491850185118521853185418551856185718581859186018611862186318641865186618671868186918701871187218731874187518761877187818791880188118821883188418851886188718881889189018911892189318941895189618971898189919001901190219031904190519061907190819091910191119121913191419151916191719181919192019211922192319241925192619271928192919301931193219331934193519361937193819391940194119421943194419451946194719481949195019511952195319541955195619571958195919601961196219631964196519661967196819691970197119721973197419751976197719781979198019811982198319841985198619871988198919901991199219931994199519961997199819992000200120022003200420052006200720082009201020112012201320142015201620172018201920202021202220232024202520262027202820292030203120322033203420352036203720382039204020412042204320442045204620472048204920502051205220532054205520562057205820592060206120622063206420652066206720682069207020712072207320742075207620772078207920802081208220832084208520862087208820892090209120922093209420952096209720982099210021012102210321042105210621072108210921102111211221132114211521162117211821192120212121222123212421252126212721282129213021312132213321342135213621372138213921402141214221432144214521462147214821492150215121522153215421552156215721582159216021612162216321642165216621672168216921702171217221732174217521762177217821792180218121822183218421852186218721882189219021912192219321942195219621972198219922002201220222032204220522062207220822092210221122122213221422152216221722182219222022212222222322242225222622272228222922302231223222332234223522362237223822392240224122422243224422452246224722482249225022512252225322542255225622572258225922602261226222632264226522662267226822692270227122722273227422752276227722782279228022812282228322842285228622872288228922902291229222932294229522962297229822992300230123022303230423052306230723082309231023112312231323142315231623172318231923202321232223232324232523262327232823292330233123322333233423352336233723382339234023412342234323442345234623472348234923502351235223532354
  1. <template>
  2. <view class="product" :style="{paddingBottom: userIdentity==1 && userIdentity == 3 ? '0rpx' :'188rpx',paddingTop:CustomBar+'px'}">
  3. <custom-p v-if="isHeaderPoduct"
  4. :systeminfo='systeminfo'
  5. :navbar-data='nvabarData'
  6. :headerBtnPosi ="headerBtnPosi"
  7. :headerColor="headerColor"
  8. :type="isShareType"
  9. :page='backPage'>
  10. </custom-p>
  11. <view class="product-topnav" v-if='isNavbarFiexd' :class="navbarFiexd" :style="{top:CustomBar +'px'}">
  12. <view class="search-input">
  13. <view class="gosearch-btn" :class="navbarFiexd" @click="this.$api.navigateTo(clickPath)">
  14. <view class="search-icon">
  15. <text class="iconfont icon-iconfonticonfontsousuo1"></text>
  16. </view>
  17. <view class="search-text">搜索商品/项目仪器</view>
  18. </view>
  19. </view>
  20. <view class="navbar">
  21. <view class="nav-item tui-skeleton-fillet" :class="{ current: tabCurrentIndex === 0 }" @click="tabClick(0)">
  22. <text>详情</text>
  23. <text class="line"></text>
  24. </view>
  25. <view class="nav-item tui-skeleton-fillet" :class="{ current: tabCurrentIndex === 1 }" @click="tabClick(1)">
  26. <text>服务项目</text>
  27. <text class="line"></text>
  28. </view>
  29. <view class="nav-item tui-skeleton-fillet" :class="{ current: tabCurrentIndex === 2 }" @click="tabClick(2)">
  30. <text>推荐</text>
  31. <text class="line"></text>
  32. </view>
  33. </view>
  34. </view>
  35. <tui-skeleton v-if="skeletonShow" backgroundColor="#fafafa" borderRadius="10rpx" :isLoading ="true" :loadingType="5"></tui-skeleton>
  36. <template v-else >
  37. <view class="cart-content empty" v-if="isInvalid">
  38. <view class="empty-container">
  39. <image class="empty-container-image" :src="productNoneImage" mode="aspectFit"></image>
  40. <text class="error-text">商品已失效,去商城逛逛别的吧~</text>
  41. <view class="login-btn" @click="goIndex">去商城</view>
  42. </view>
  43. </view>
  44. <view class="container-product tui-skeleton" v-else>
  45. <view class="container-product-main">
  46. <view class="product-top">
  47. <view class="banner-section">
  48. <uni-swiper-dot :info="productImage" :current="current" field="content" :mode="mode" >
  49. <swiper class="banner tui-banner tui-skeleton-rect" @change="swiperChange" :duration='800' :autoplay="false" :circular="true" >
  50. <swiper-item v-for="(item, index) in productImage" :key="index" class="banner-item">
  51. <image :src="item" @click="previewImg(index)" class="product-img" />
  52. <view class="cm-product-cover" v-if="product.appletsActType === 1">云上美博会</view>
  53. </swiper-item>
  54. </swiper>
  55. <view class="swiper__dots-box">
  56. <tui-tag padding="12rpx 24rpx"
  57. type="translucent"
  58. shape="circleLeft"
  59. size="32rpx"
  60. :scaleMultiple="0.82" originRight>
  61. {{ current + 1 }}/{{ productImage.length }}
  62. </tui-tag>
  63. </view>
  64. </uni-swiper-dot>
  65. </view>
  66. <view class="product-wrap clearfix">
  67. <view class="wrap-top" :class="goodsData.isNoneDisabled ? 'none' : ''">
  68. <view class="wrap-top-price">
  69. <cm-price v-if="isRequest"
  70. :product="product"
  71. :userIdentity="userIdentity"
  72. :shopID= "shopID"
  73. :promotions="product.promotions"
  74. :ladderPriceList="ladderPriceList"/>
  75. </view>
  76. <view class="p-title tui-skeleton-fillet">
  77. <view class="mclap-tag" v-if="product.beautyActFlag == '1'">美博会</view>
  78. <view class="p-title-name" :class="product.beautyActFlag == '1' ? 'indent' : ''">
  79. {{product.name == undefined ? '' : product.name}}
  80. </view>
  81. <button open-type="share" class="p-title-share tui-share-position" @tap="onShare">
  82. <view class=""><text class="iconfont icon-fenxiang1"></text></view>
  83. <view class="">分享</view>
  84. </button>
  85. </view>
  86. <view class="wrap-label" v-if="product.tagsList.length>0">
  87. <view class="label-a tui-skeleton-fillet" v-for="(label,index) in product.tagsList" :key="index">{{label}}</view>
  88. </view>
  89. <view class="product-seve" v-if="hasLogin">
  90. <text class="label">采美承诺:</text>
  91. <text class="iconfont icon-dui tui-skeleton-rect"><text class="text">无忧退货</text></text>
  92. <text class="iconfont icon-dui tui-skeleton-rect"><text class="text">快速退款</text></text>
  93. <text class="iconfont icon-dui tui-skeleton-rect"><text class="text">正品保证</text></text>
  94. </view>
  95. <view class="productRemarks" v-if="product.productRemarks!=''&&product.productRemarks!=null">
  96. 备注:{{product.productRemarks}}
  97. </view>
  98. </view>
  99. </view>
  100. </view>
  101. <view class="product-item-none" v-if="goodsData.isNoneDisabled">
  102. <image class="none-image" :src="productNoneImage" mode=""></image>
  103. <view class="none-text">此商品已{{goodsData.disabledText}},请浏览以下推荐商品~</view>
  104. </view>
  105. <!-- 参数 -->
  106. <view class="product-parameter" @click="showPopup(0)" v-if="!goodsData.isNoneDisabled">
  107. <text class="title">参数:</text>
  108. <text class="name">品牌 起订量 分类...</text>
  109. <text class="iconfont icon-xiayibu"></text>
  110. </view>
  111. <!-- 优惠券 -->
  112. <view class="product-parameter coupon" @click="showPopup(2)">
  113. <text class="title">优惠券:</text>
  114. <view class="coupon">
  115. <text class="tags" v-for="(coupon, index) in productCoupon.slice(0,3)" :key="index">
  116. 满{{ coupon.touchPrice }}减{{ coupon.couponAmount }}
  117. </text>
  118. </view>
  119. <text class="iconfont icon-xiayibu"></text>
  120. </view>
  121. <!-- 仪器培训方案 -->
  122. <view class="product-parameter" @click="showPopup(1)" v-if='product.commodityType == 2 && product.trainingMethod'>
  123. <text class="title">培训方案:</text>
  124. <text class="name">{{ product.trainingMethod == 1 ? '线上培训' : '线下培训' }}</text>
  125. <text class="iconfont icon-xiayibu"></text>
  126. </view>
  127. <!-- 供应商 -->
  128. <view class="product-supplier" v-if="isNoneSupplier" @click="goSupplier">
  129. <view class="logo"><img :src="shop.logo ? shop.logo :'https://static.caimei365.com/app/img/icon/icon-shoplogo.png'" alt=""></view>
  130. <view class="main">
  131. <view class="name">{{shop.name}}</view>
  132. <view class="massgs">
  133. <view class="label">满意度:</view>
  134. <view class="p-stars">
  135. <uni-stars :stars="6" :iconClass="iconClass" :iconColor="iconColor" :fontSize="36" :widthInfo="176"></uni-stars>
  136. </view>
  137. <view class="acount">
  138. <text>{{ shop.normalNum }}</text>件商品
  139. </view>
  140. </view>
  141. </view>
  142. <view class="right"><text class="iconfont icon-xiayibu"></text></view>
  143. </view>
  144. </view>
  145. <view class="product-details product-details0">
  146. <!-- 商品详情 -->
  147. <view class="title">
  148. <view class="title-tab">商品详情</view>
  149. </view>
  150. <view class="content tui-banner product-rich-text tui-skeleton-rect">
  151. <parser :html="html" :img-mode="widthFix" v-if="!goodsData.isNoneDisabled && product.productDetail.detailInfo"></parser>
  152. <view class="product-rich-text-none" v-else>暂无商品信息</view>
  153. </view>
  154. </view>
  155. <view class="product-details service product-details1">
  156. <!-- 服务项目 -->
  157. <view class="title">
  158. <view class="title-tab">服务项目</view>
  159. </view>
  160. <view class="content service" v-if="product.productDetail.orderInfo || product.productDetail.serviceInfo">
  161. <cm-service :product="product.productDetail" v-if="isRequest"></cm-service>
  162. </view>
  163. <view class="content-none" v-else>
  164. <text>暂无服务项目</text>
  165. </view>
  166. </view>
  167. <view class="product-details recommend product-details2">
  168. <!-- 相关推荐 -->
  169. <view class="title">
  170. <view class="title-tab">相关推荐</view>
  171. </view>
  172. <view class="content hot">
  173. <recommend :query-productid="product.productId" :query-type="product.recommendType" v-if="isRequest"></recommend>
  174. </view>
  175. </view>
  176. <!-- 商品参数 -->
  177. <tui-bottom-popup :radius="true" :show="popupShow0" @close="hidePopup(0)">
  178. <view class="tui-popup-box clearfix">
  179. <view class="title">商品参数</view>
  180. <div class="tui-popup-main">
  181. <scroll-view class="tui-popup-scroll" scroll-y="true">
  182. <view class="content-tr">
  183. <view class="content-td">起订量</view>
  184. <view class="content-th">{{product.minBuyNumber}}</view>
  185. </view>
  186. <view class="content-tr">
  187. <view class="content-td">品牌</view>
  188. <view class="content-th">{{product.brandName == null? '其他' : product.brandName}}</view>
  189. </view>
  190. <view class="content-tr">
  191. <view class="content-td">分类</view>
  192. <view class="content-th">{{product.typeName == null? '暂无' : product.typeName}}</view>
  193. </view>
  194. <view class="content-tr">
  195. <view class="content-td">包装规格</view>
  196. <view class="content-th">{{product.unit}}</view>
  197. </view>
  198. <view class="content-tr">
  199. <view class="content-td">商品编码</view>
  200. <view class="content-th">{{product.productCode}}</view>
  201. </view>
  202. <view class="content-tr">
  203. <view class="content-td">库存</view>
  204. <view class="content-th">{{product.stock}}</view>
  205. </view>
  206. <view class="content-tr" v-if="product.parametersList.length>0" v-for="(item, index) in product.parametersList" :key="index">
  207. <view class="content-td">{{item.paramsName}}</view>
  208. <view class="content-th">{{item.paramsContent}}</view>
  209. </view>
  210. </scroll-view>
  211. </div>
  212. <view class="tui-right-flex tui-popup-btn" :style="{ paddingBottom :isIphoneX ? '68rpx' : '0rpx' }">
  213. <view class="tui-flex-1">
  214. <view class="tui-button" @click="hidePopup(0)">收起</view>
  215. </view>
  216. </view>
  217. </view>
  218. </tui-bottom-popup>
  219. <!-- 优惠券 -->
  220. <tui-bottom-popup :radius="true" :show="popupShow2" @close="hidePopup(2)">
  221. <view class="tui-popup-box clearfix">
  222. <view class="title">优惠券</view>
  223. <view class="tui-popup-close" @click="hidePopup(2)">
  224. <text class="iconfont icon-iconfontguanbi"></text>
  225. </view>
  226. <view class="tui-popup-tabs">
  227. <coupon-tabs :tabs="navbar"
  228. :currentTab="currentTab > 2 ? 0 : currentTab"
  229. @change="couponChange"
  230. :itemWidth="(100/navbar.length)+'%'"
  231. selectedColor="#e15616"
  232. sliderBgColor="#e15616">
  233. </coupon-tabs>
  234. </view>
  235. <div class="tui-popup-main coupon">
  236. <scroll-view class="tui-popup-scroll" scroll-y="true">
  237. <view class="coupon-empty" v-if="isCouponEmpty">
  238. <image class="empty-container-image" :src="StaticUrl+'/icon/icon-coupon-empty@2x.png'"></image>
  239. <text class="error-text">暂无可领的优惠券~</text>
  240. </view>
  241. <template v-else>
  242. <view v-for="(coupon,index) in productCouponList"
  243. :key="index"
  244. :id="coupon.couponId"
  245. class="coupon-list"
  246. >
  247. <view class="list-cell-le">
  248. <view class="coupon-maxMoney"><text class="small">¥</text>{{ coupon.couponAmount }}</view>
  249. <view class="coupon-minMoney">满{{ coupon.touchPrice }}可用</view>
  250. </view>
  251. <view class="list-cell-ri">
  252. <view class="list-cell-top">
  253. <view class="list-cell-type">
  254. <view class="list-cell-tags">
  255. <text class="tags">{{ coupon.couponType | TypeFormat }}</text>
  256. </view>
  257. <view class="list-cell-texts">
  258. <text v-if="coupon.couponType == 0">
  259. {{ coupon.productType && coupon.productType == 1 ? '全商城商品通用' : '仅可购买指定商品' }}
  260. </text>
  261. <text v-if="coupon.couponType == 1">
  262. {{ coupon.categoryType == 1 ? '仅限购买产品类商品' : '仅限购买仪器类商品' }}
  263. </text>
  264. <text v-if="coupon.couponType == 3">仅限购买店铺【{{ coupon.shopName }}】的商品</text>
  265. <text v-if="coupon.couponType == 4 || coupon.couponType == 2">全商城商品通用</text>
  266. </view>
  267. </view>
  268. <view class="list-cell-btn">
  269. <view class="icon-used">
  270. <view class="icon-used-btn receive" v-if="currentTab == 0" @click="receiveCoupon(coupon)">领取</view>
  271. <view class="icon-used-btn make" v-if="currentTab == 1">已领取</view>
  272. </view>
  273. </view>
  274. </view>
  275. <view class="list-cell-time">{{ coupon.endDate }}</view>
  276. </view>
  277. </view>
  278. </template>
  279. </scroll-view>
  280. </div>
  281. </view>
  282. </tui-bottom-popup>
  283. <!-- 培训方案 -->
  284. <tui-bottom-popup :radius="true" :show="popupShow1" @close="hidePopup(1)">
  285. <view class="tui-popup-box clearfix">
  286. <view class="title">培训方案</view>
  287. <div class="tui-popup-main">
  288. <scroll-view class="tui-popup-scroll train" scroll-y="true">
  289. <view class="content-tr">
  290. <view class="content-td">培训方式:</view>
  291. <view class="content-th">{{ product.trainingMethod == 1 ? '线上培训' : '线下培训' }}</view>
  292. </view>
  293. <view class="content-tr">
  294. <view class="content-td">培训费用:</view>
  295. <view class="content-th">{{ product.trainingType == 1 ? '¥'+product.trainingFee : '售价已包含' }}</view>
  296. </view>
  297. </scroll-view>
  298. </div>
  299. <view class="tui-right-flex tui-popup-btn" :style="{ paddingBottom :isIphoneX ? '68rpx' : '0rpx' }">
  300. <view class="tui-flex-1">
  301. <view class="tui-button" @click="hidePopup(1)">收起</view>
  302. </view>
  303. </view>
  304. </view>
  305. </tui-bottom-popup>
  306. <!-- 底部按钮 -->
  307. <view class="menu" v-if="isShowButton">
  308. <view class="bottom-btn" :style="{paddingBottom :isIphoneX ? '68rpx' : '0rpx'}">
  309. <view class="bottom-le">
  310. <view class="item-bt" @click="this.$api.switchTabTo('/pages/tabBar/home/index')">
  311. <image src="../../static/icon-home-active@3x.png"></image>
  312. <text>首页</text>
  313. </view>
  314. <button class="item-bt" open-type="contact" @click="handleContact">
  315. <image src="../../static/severs@3x.png"></image>
  316. <text>客服</text>
  317. </button>
  318. <view class="item-bt" @click="buyProductCart()">
  319. <image src="https://static.caimei365.com/app/img/icon/icon-cart-active@3x.png"></image>
  320. <text>购物车</text>
  321. <text v-if="hasLogin && bottomCartNumber>0"
  322. class="uni-badge uni-badge-error uni-small uni-badge--small icon-num"
  323. :class="[bottomCartNumber < 10 ? 'goleft':'']">
  324. {{ bottomCartNumber >= 100 ? '99+': bottomCartNumber}}
  325. </text>
  326. <view class="animation-num" :class="isAnimation ? 'animation' : 'restion'">+1</view>
  327. </view>
  328. </view>
  329. <view class="bottom-ri">
  330. <button
  331. :disabled="goodsData.disabled"
  332. class="btn btn-cart"
  333. :class="[goodsData.disabled ? 'disabled':'']"
  334. @tap.stop="btnGetConfirm('add')">加入购物车</button>
  335. <button
  336. :disabled="goodsData.disabled"
  337. class="btn btn-bay"
  338. :class="[goodsData.disabled ? 'disabled':'']"
  339. @tap.stop="btnGetConfirm('buy')">立即购买</button>
  340. </view>
  341. </view>
  342. </view>
  343. <!--底部选择模态层弹窗组件 -->
  344. <view class="popup spec" :class="specClass" @touchmove.stop.prevent="discard" @tap="hideSpec">
  345. <!-- 遮罩层 -->
  346. <view class="mask"></view>
  347. <view class="layer" @tap.stop="discard" :style="{paddingBottom :isIphoneX ? '68rpx' : '36rpx',bottom:isIphoneX ?'-352rpx' : '-296rpx'}">
  348. <view class="content">
  349. <view class="layer-smimg">
  350. <image :src="product.mainImage" mode=""></image>
  351. </view>
  352. <view class="layer-nunbox">
  353. <view class="layer-nunbox-t" v-if="product.step === 2">
  354. <view class="text">*该商品只能以起订量的整数倍购买</view>
  355. </view>
  356. <view class="layer-nunbox-t">
  357. <view class="layer-nunbox-text">数量:</view>
  358. <view class="number-box">
  359. <view class="iconfont icon-jianhao" :class="[isQuantity==true?'disabled':'']" @click="changeCountSub()"></view>
  360. <input class="btn-input" type="number" v-model="number" maxlength='4' @blur="changeNumber($event)">
  361. <view class="iconfont icon-jiahao" :class="[isStock==true?'disabled':'']" @click="changeCountAdd()"></view>
  362. </view>
  363. </view>
  364. <view class="layer-nunbox-b">
  365. <view class="text">单价:
  366. <text class="p sm">¥</text>
  367. <text class="p bg">{{buyRetailPrice.toFixed(2)}}</text>
  368. </view>
  369. </view>
  370. </view>
  371. </view>
  372. <view class="btn"><view class="button" @click.stop="btnConfirm">确定</view></view>
  373. </view>
  374. </view>
  375. <!-- 侧边 -->
  376. <scroll-top :isScrollTop="isScrollTop" :bottom="200"></scroll-top>
  377. </view>
  378. </template>
  379. </view>
  380. </template>
  381. <script>
  382. import { mapState,mapMutations } from 'vuex'
  383. import customP from '@/components/cm-module/headerNavbar/header-poduct' //自定义导航
  384. import cmPrice from "@/components/cm-module/productDetails/cm-price.vue" //价格显示
  385. import cmAttributes from "@/components/cm-module/productDetails/cm-attributes.vue" //规格信息
  386. import parser from "@/components/jyf-Parser/index" //富文本处理
  387. import tuiSkeleton from "@/components/tui-skeleton/tui-skeleton"
  388. import recommend from "@/components/cm-module/productDetails/recommend" //相关推荐
  389. import cmParameter from "@/components/cm-module/productDetails/cm-parameter" //相关参数
  390. import cmService from "@/components/cm-module/productDetails/cm-service" //服务项目
  391. import couponTabs from '@/components/cm-module/coupon/tui-tabs.vue'
  392. import authorize from '@/common/config/authorize.js'
  393. import wxLogin from "@/common/config/wxLogin.js"
  394. import { debounce } from '@/common/config/common.js'
  395. var isPreviewImg;
  396. export default{
  397. components:{
  398. customP,
  399. parser,
  400. tuiSkeleton,
  401. recommend,
  402. cmPrice,
  403. cmAttributes,
  404. cmParameter,
  405. cmService,
  406. couponTabs
  407. },
  408. data(){
  409. return{
  410. StaticUrl:this.$Static, //静态图片路径
  411. clickPath:'/pages/search/search',
  412. html:'<div style="text-align: center;color:#333333;">暂无内容</div>',
  413. productNoneImage:'https://static.caimei365.com/app/img/icon/icon-pnone.png',
  414. mode:'round',
  415. iconClass:'icon-aixin',
  416. iconColor:'#ff9100',
  417. specClass: '', // 规格弹窗css类,控制开关动画
  418. isBtnType:'',
  419. isRequest:false,
  420. isScrollTop:false,
  421. current:0,
  422. shopId:0,
  423. isShareType:'',
  424. isHeaderPoduct:false,
  425. isNavbarFiexd:false,
  426. navbarFiexd:'none',
  427. ladderPriceFlag:'',
  428. ladderPriceList:'',
  429. isInvalid:false,
  430. isEvaluate:false,
  431. isAnimation:false,
  432. skeletonShow:true,
  433. isQuantity:false,
  434. isStock:false,
  435. disabled:false,
  436. isNoneDisabled:false,
  437. tabCurrentIndex:0,
  438. userId:'',
  439. shopID:'',
  440. productId:0,
  441. userIdentity:0, // 用户类型
  442. goodsData:{}, // 自定义数据
  443. shop:{},//供应商信息
  444. product:{},//采美
  445. productImage:[],
  446. retailPrice:0,
  447. buyRetailPrice:0,
  448. buyRetailPriceStep:1,
  449. stock:0,
  450. number:0,
  451. minBuyNumber:0,
  452. productsList:[],
  453. goodListData:[],
  454. productCoupon:[], // 优惠券
  455. productCouponList:[], // 优惠券弹窗列表
  456. headerBtnPosi: this.setHeaderBtnPosi(), // 获取设备顶部胶囊高度
  457. systeminfo: this.setSysteminfo(), // 获取设备信息
  458. isIphoneX:this.$store.state.isIphoneX,
  459. windowHeight: '',
  460. headerColor:false,
  461. backPage:1,
  462. nvabarData: { // 顶部自定义导航
  463. showCapsule: 1, // 是否显示左上角图标 1表示显示 0表示不显示
  464. title: '' // 导航栏 中间的标题
  465. },
  466. linkPath:'',
  467. CustomBar:this.CustomBar, // 顶部导航栏高度
  468. popupShow0:false, // 参数弹窗
  469. popupShow1:false, // 培训方案
  470. popupShow2:false, // 优惠券
  471. tabSelectFlag:false,
  472. sectionPropsArr: [],
  473. scrollTopArray:[],
  474. sectionTopRangeArr: [],
  475. winHeight:'',
  476. isShowButton:true,
  477. isNoneSupplier:false,
  478. isCouponEmpty:false,
  479. currentTab: 0,
  480. couponParam:{ // 获取弹窗优惠券领取参数
  481. userId:0,
  482. productId:0,
  483. status:1,
  484. source:2
  485. },
  486. bottomCartNumber:0,
  487. navbar: [
  488. { name: "未领取",num:0 },
  489. { name: "已领取",num:0 }
  490. ]
  491. }
  492. },
  493. computed: {
  494. ...mapState(['hasLogin','isWxAuthorize','identity'])
  495. },
  496. filters: {
  497. TypeFormat(value) {
  498. switch (value) {
  499. case 0:
  500. return '活动券';
  501. break;
  502. case 1:
  503. return '品类券';
  504. break;
  505. case 2:
  506. return '用户专享券';
  507. break;
  508. case 3:
  509. return '店铺券';
  510. break;
  511. case 4:
  512. return '新用户券';
  513. break;
  514. }
  515. },
  516. },
  517. onLoad(option) {
  518. this.productId = this.couponParam.productId = option.id;//获取商品ID
  519. this.isShareType = option.type
  520. this.linkPath = option.path
  521. this.isHeaderPoduct = true
  522. if(option.page == 2){
  523. this.backPage = option.page
  524. }
  525. if(this.isShareType =='share'){
  526. wxLogin.wxLoginAuthorize()
  527. }
  528. this.getWinHeight()
  529. },
  530. methods:{
  531. initData(){// 初始化商品详情查询
  532. this.ProductService.QueryProductDetils(
  533. {
  534. userId:this.userId,
  535. productId:this.productId,
  536. identity:this.identity,
  537. }
  538. )
  539. .then(response =>{
  540. this.skeletonShow = false
  541. this.productImage=[];
  542. this.shop = response.data.shop
  543. this.shopId = response.data.shopID
  544. this.product = response.data
  545. //已删除/已冻结
  546. if(this.product.validFlag === 0 || this.product.validFlag ==10){
  547. this.isInvalid = true
  548. }else if(this.product.validFlag === 9){
  549. if(this.userIdentity == 1){
  550. this.isInvalid = false
  551. }else{
  552. this.isInvalid = true
  553. }
  554. }
  555. this.ladderPriceFlag = this.product.ladderPriceFlag;
  556. this.html = this.product.productDetail == null ? this.html : this.$api.adaptRichTextImg(this.product.productDetail.detailInfo)
  557. this.stock = this.product.stock
  558. this.buyRetailPriceStep = this.product.step
  559. this.number = this.product.minBuyNumber
  560. this.minBuyNumber = this.product.minBuyNumber
  561. //处理商品图片列表
  562. this.product.imageList.forEach(item =>{
  563. this.productImage.push(item.image);
  564. })
  565. //处理阶梯价格
  566. if(this.product.ladderPriceList!=null){
  567. this.ladderPriceList = this.product.ladderPriceList;
  568. }
  569. //拆分金额并转千分位格式显示
  570. if(this.product.price!=null){
  571. this.retailPrice = this.product.price.toFixed(2);
  572. this.buyRetailPrice = this.product.price;
  573. }
  574. //处理下架商品和售罄商品
  575. if(this.product.validFlag ==3 || this.stock == 0){
  576. this.isNoneDisabled = true
  577. this.disabled = true
  578. }else{
  579. this.disabled = false
  580. this.isNoneDisabled = false
  581. this.goodsData.disabledText = ''
  582. }
  583. if(this.product.priceFlag == 1){
  584. this.disabled = true
  585. }else if(this.product.priceFlag == 2){
  586. if(this.userIdentity == 4){
  587. this.disabled = true
  588. }else{
  589. this.disabled = false
  590. }
  591. }else{
  592. this.disabled = false
  593. }
  594. this.goodsData.disabled = this.disabled
  595. this.goodsData.isNoneDisabled = this.isNoneDisabled
  596. if(this.product.validFlag ==3){
  597. this.goodsData.disabledText = '下架'
  598. }
  599. if(this.product.validFlag ==10){
  600. this.goodsData.disabledText = '停售'
  601. }
  602. if(this.stock == 0){
  603. this.goodsData.disabledText = '售罄'
  604. }
  605. console.log(this.disabled);
  606. setTimeout(()=>{
  607. this.getSectionProps();
  608. },2000)
  609. this.shoppingHeaderCartNumber()
  610. this.queryProductDetilsCoupons()
  611. this.isRequest = true
  612. })
  613. .catch(error =>{
  614. this.$util.msg(error.msg,2000);
  615. })
  616. },
  617. queryProductDetilsCoupons(){// 初始化商品详情优惠券信息
  618. this.ProductService.QueryProductDetilsCoupons(this.couponParam).then(response =>{
  619. this.productCoupon = response.data.list
  620. })
  621. .catch(error =>{
  622. console.log('获取优惠券列表失败')
  623. })
  624. },
  625. queryPopupCoupons(){// 获取弹窗优惠券列表
  626. this.ProductService.QueryProductDetilsCoupons(this.couponParam).then(response =>{
  627. let data = response.data
  628. this.navbar[0].num = data.notCouponNum
  629. this.navbar[1].num = data.couponNum
  630. if(data.couponList && data.couponList.length >0){
  631. this.productCouponList = data.couponList
  632. this.isCouponEmpty = false
  633. }else{
  634. this.isCouponEmpty = true
  635. }
  636. })
  637. .catch(error =>{
  638. console.log('获取优惠券列表失败')
  639. })
  640. },
  641. shoppingHeaderCartNumber(){// 获取用户购物车储量
  642. this.ProductService.shoppingHeaderCartNumber({userId:this.userId}).then(response =>{
  643. this.bottomCartNumber = response.data.length;
  644. })
  645. .catch(error =>{
  646. console.log('获取购物车数量失败')
  647. })
  648. },
  649. receiveCoupon(coupon){// 点击优惠券领取按钮
  650. this.ProductService.ReceiveCoupon(
  651. {
  652. userId:this.couponParam.userId,
  653. couponId:coupon.couponId,
  654. source:2
  655. }
  656. )
  657. .then(response =>{
  658. this.$util.msg('领取成功',1500,true,'success')
  659. setTimeout(()=>{
  660. this.currentTab = 1
  661. this.couponParam.status = 2
  662. this.queryPopupCoupons()
  663. },1500)
  664. })
  665. .catch(error =>{
  666. this.$util.msg(error.msg,2000);
  667. })
  668. },
  669. swiperChange(e) {//顶部商品图片切换
  670. const index = e.detail.current;
  671. this.current = index;
  672. },
  673. previewImg (index) {//顶部商品图片预览
  674. isPreviewImg = true
  675. let previewUrls = this.productImage
  676. uni.previewImage({
  677. current: index, //图片索引
  678. urls: previewUrls, //必须是http图片,本地图片无效
  679. longPressActions:''
  680. })
  681. },
  682. tabClick(index) {//商品详情&&供应商信息tab切换
  683. this.tabSelectFlag = true
  684. this.tabCurrentIndex = index;
  685. let classIndex = '.product-details'+index;
  686. uni.createSelectorQuery().select('.container-product-main').boundingClientRect((data)=>{//最外层盒子节点
  687.   uni.createSelectorQuery().select(classIndex).boundingClientRect((res)=>{//最外层盒子节点
  688.     uni.pageScrollTo({
  689.       duration:300,//过渡时间必须为0,uniapp bug,否则运行到手机会报错
  690.       scrollTop:res.top - data.top - 150,//滚动到实际距离是元素距离顶部的距离减去最外层盒子的滚动距离
  691.     })
  692. setTimeout(()=>{
  693. this.tabSelectFlag = false;
  694. },500)
  695.   }).exec()
  696. }).exec()
  697. },
  698. handleContact(e){//跳转小程序客服
  699. console.log(e.detail.path)
  700. console.log(e.detail.query)
  701. },
  702. buyProductCart(){//底部购物车按钮点击
  703. if(this.hasLogin){
  704. // 友盟埋点商品详情购物车入口点击事件
  705. if(process.env.NODE_ENV != 'development'){
  706. this.$uma.trackEvent('Um_Event_ProductShoppingCart', {
  707. Um_Key_PageName: '去购物车',
  708. Um_Key_SourcePage: '商品详情购物车入口',
  709. })
  710. }
  711. // this.$api.navigateTo('/pages/goods/cart')
  712. this.$api.navigateTo('/pages/goods/cart-index')
  713. }else{
  714. this.$api.navigateTo('/pages/login/login?type=1')
  715. }
  716. },
  717. btnGetConfirm(type){//加入购物车&&立即购买点击
  718. if(this.hasLogin){
  719. switch(type){
  720. case 'add':
  721. // 友盟埋点商品详情加入购物车点击事件
  722. if(process.env.NODE_ENV != 'development'){
  723. this.$uma.trackEvent('Um_Event_ProductAddCart', {
  724. Um_Key_PageName: '加入购物车',
  725. Um_Key_SourcePage: '商品详情',
  726. Um_Key_ProductID:`${this.product.productId}`
  727. })
  728. }
  729. break;
  730. case 'buy':
  731. // 友盟埋点商品详情立即购买点击事件
  732. if(process.env.NODE_ENV != 'development'){
  733. this.$uma.trackEvent('Um_Event_ProductBuyConfirm', {
  734. Um_Key_PageName: '立即购买',
  735. Um_Key_SourcePage: '商品详情',
  736. Um_Key_ProductID:`${this.product.productId}`
  737. })
  738. }
  739. break;
  740. }
  741. this.showSpec(type);
  742. }else{
  743. this.$api.navigateTo('/pages/login/login?type=1')
  744. }
  745. },
  746. changeCountAdd(){//popup弹窗数量增加按钮
  747. if(this.buyRetailPriceStep == 2){
  748. this.number+=this.minBuyNumber
  749. }else{
  750. this.number++
  751. }
  752. this.processActivityPrice()
  753. },
  754. changeCountSub(){//popup弹窗数量减按钮
  755. if(this.number<=this.minBuyNumber){
  756. this.number= this.minBuyNumber
  757. this.isQuantity =true
  758. this.$util.msg(`该商品最小起订量为${this.minBuyNumber}`,2000);
  759. return
  760. }else{
  761. if(this.buyRetailPriceStep == 2){
  762. this.number-=this.minBuyNumber
  763. }else{
  764. this.number--
  765. }
  766. this.processActivityPrice()
  767. this.isQuantity =false
  768. }
  769. },
  770. changeNumber(e){
  771. let _value = e.detail.value;
  772. if(!this.$api.isNumber(_value)){
  773. this.number = this.minBuyNumber
  774. }else if(_value < this.minBuyNumber){
  775. this.$util.msg(`该商品最小起订量为${this.minBuyNumber}`,2000);
  776. this.number = this.minBuyNumber
  777. }else if( _value % this.minBuyNumber !=0 ){
  778. this.$util.msg(`购买量必须为起订量的整数倍`,2000);
  779. this.number = this.minBuyNumber
  780. }else{
  781. this.number = e.detail.value
  782. }
  783. this.processActivityPrice()
  784. },
  785. processActivityPrice(){//单独处理活动价格和阶梯价格
  786. if(this.ladderPriceFlag == '0' && this.product.actStatus == 0 || this.product.actStatus == 1){
  787. this.buyRetailPrice = this.product.price
  788. }else{
  789. this.ladderPriceList.forEach((item,index)=>{
  790. if(this.number>=item.buyNum){
  791. this.buyRetailPrice = item.buyPrice
  792. }
  793. })
  794. }
  795. },
  796. showSpec(type) {//显示选择数量确认弹窗
  797. this.isBtnType = type
  798. this.specClass = 'show';
  799. if (this.ladderPriceFlag) {
  800. this.processActivityPrice()
  801. }
  802. },
  803. hideSpec() {//关闭选择数量确认弹窗
  804. this.specClass = 'hide';
  805. setTimeout(() => {
  806. this.specClass = 'none';
  807. }, 200);
  808. },
  809. btnConfirm() {//加入购物车&&立即购买跳转订单页并关闭弹窗
  810. // 友盟埋点商品详情确认购买商品点击事件
  811. if(process.env.NODE_ENV != 'development'){
  812. this.$uma.trackEvent('Um_Event_ProductShoppingConfirm', {
  813. Um_Key_PageName: '商品购买确认',
  814. Um_Key_SourcePage: '商品详情',
  815. Um_Key_ProductID:`${this.product.productId}`
  816. })
  817. }
  818. if(this.isBtnType == 'add'){
  819. this.getAddProductCart()
  820. }else{
  821. this.toConfirmation()
  822. }
  823. },
  824. toConfirmation(){//跳转确认订单页面
  825. this.specClass = 'hide';
  826. let productStp ={
  827. allPrice:this.number*this.buyRetailPrice,
  828. allCount:this.number,
  829. productID:this.product.productId,
  830. productCount:this.number
  831. }
  832. this.$api.navigateTo(`/pages/user/order/create-order?type=prodcut&data=${JSON.stringify({data:productStp})}`)
  833. setTimeout(() => {
  834. this.specClass = 'none';
  835. }, 200);
  836. },
  837. getAddProductCart(){//增加购物车成功和toast弹窗提示成功
  838. this.ProductService.shoppingAddCart({productID:this.productId,userID:this.userId,productCount:this.number}).then(response => {
  839. this.specClass = 'hide';
  840. this.$util.msg('加入购物车成功',1500,true,'success')
  841. this.isAnimation = true
  842. setTimeout(() => {this.specClass = 'none'}, 200)
  843. setTimeout(() => {this.isAnimation = false},2000)
  844. this.bottomCartNumber = response.data;
  845. }).catch(error =>{
  846. this.$util.msg(error.msg,2000);
  847. })
  848. },
  849. setHeaderBtnPosi(){
  850. // 获得胶囊按钮位置信息
  851. let headerBtnPosi = uni.getMenuButtonBoundingClientRect();
  852. return headerBtnPosi
  853. },
  854. setSysteminfo(){
  855. let systeminfo;
  856. uni.getSystemInfo({ // 获取设备信息
  857. success: (res) => {
  858. systeminfo = res
  859. },
  860. })
  861. return systeminfo
  862. },
  863. goIndex(){//商城首页
  864. uni.switchTab({
  865. url: '/pages/tabBar/home/index'
  866. });
  867. },
  868. goSupplier(){//跳供应商资料页
  869. this.$api.navigateTo('/pages/supplier/user/my-shop?shopId='+this.shopId)
  870. },
  871. discard(){
  872. //丢弃
  873. },
  874. onShare(res){//分享转发
  875. if (res.from === 'button') {
  876. // 来自页面内转发按钮
  877. }
  878. return {
  879. title: `${this.product.name}`,
  880. path: `pages/goods/product?type=share&id=${this.productId}`,
  881. imageUrl:`${this.productImage[0]}`
  882. }
  883. },
  884. showPopup(index){
  885. switch(index){
  886. case 0:
  887. this.popupShow0 = true
  888. break;
  889. case 1:
  890. this.popupShow1 = true
  891. break;
  892. case 2:
  893. if(this.hasLogin){
  894. this.queryPopupCoupons()
  895. this.popupShow2 = true
  896. }else{
  897. this.$api.navigateTo('/pages/login/login')
  898. }
  899. break;
  900. }
  901. },
  902. hidePopup(index){
  903. switch(index){
  904. case 0:
  905. this.popupShow0 = false
  906. break;
  907. case 1:
  908. this.popupShow1 = false
  909. break;
  910. case 2:
  911. this.popupShow2 = false
  912. break;
  913. }
  914. },
  915. couponChange(e) {
  916. this.currentTab = e.index
  917. switch(this.currentTab){
  918. case 0:
  919. this.couponParam.status = 1
  920. this.queryPopupCoupons()
  921. break;
  922. case 1:
  923. this.couponParam.status = 2
  924. this.queryPopupCoupons()
  925. break;
  926. }
  927. },
  928. getSectionProps() {//获取每个tab对应区域的scrollTop值
  929. let className = '.product-details',
  930. sectionPropsArr = [];
  931. uni.createSelectorQuery().select('.container-product-main').boundingClientRect((data)=>{//最外层盒子节点
  932.   uni.createSelectorQuery().selectAll(className).boundingClientRect((res)=>{//最外层盒子节点
  933. res.forEach((item, index) => {
  934. sectionPropsArr.push({
  935. className: `${className}${index}`,
  936. scrollTop: item.top - data.top - 150
  937. })
  938. })
  939. this.sectionPropsArr = sectionPropsArr;
  940. this.sectionTopRangeArr = this.getSectionRange(sectionPropsArr);
  941.   }).exec()
  942. }).exec()
  943. },
  944. getSectionRange(arr) {// 获取每个tab对应区域的区间
  945. let sectionScrollTopList = [];
  946. for(let i = 0; i < arr.length; i++) {
  947. let thisScrollTop = arr[i].scrollTop;
  948. if(i < arr.length - 1) {
  949. let nextScrollTop = arr[i+1].scrollTop;
  950. if(i == 0) {
  951. sectionScrollTopList.push(`0-${thisScrollTop}`);
  952. } else if(i == arr.length - 1){
  953. sectionScrollTopList.push(`${thisScrollTop}-${nextScrollTop - this.winHeight}`);
  954. } else {
  955. sectionScrollTopList.push(`${thisScrollTop}-${nextScrollTop}`);
  956. }
  957. } else {
  958. sectionScrollTopList.push(`${thisScrollTop}-${thisScrollTop+500}`);
  959. }
  960. }
  961. return sectionScrollTopList;
  962. },
  963. activeTab: debounce((top, _this)=> {//当滑动时也能同步激活tab
  964. const { sectionTopRangeArr } = _this;
  965. if(sectionTopRangeArr.length > 0) {
  966. sectionTopRangeArr.forEach((item, index) => {
  967. let splitItem = item.split('-'),
  968. openInterval = Number(splitItem[0]),
  969. closedInterval = Number(splitItem[1]);
  970. if(top >= openInterval && top < closedInterval) {
  971. _this.tabCurrentIndex = index;
  972. }
  973. })
  974. }
  975. },100, true),
  976. getWinHeight() {
  977. this.winHeight = wx.getSystemInfoSync().windowHeight;
  978. },
  979. },
  980. onPageScroll(e){//实时获取到滚动的值
  981. const { scrollTop } = e;
  982. if(!this.tabSelectFlag) {
  983. this.activeTab(scrollTop, this);
  984. }
  985. if(e.scrollTop>60){
  986. this.headerColor = true
  987. this.navbarFiexd = 'fixed'
  988. this.isNavbarFiexd = true
  989. this.nvabarData={
  990. showCapsule: 1,
  991. title: '商品详情',
  992. }
  993. }else{
  994. this.headerColor = false
  995. this.isNavbarFiexd = false
  996. this.navbarFiexd = 'none'
  997. this.nvabarData={
  998. showCapsule: 1,
  999. title: '',
  1000. }
  1001. }
  1002. if(e.scrollTop>700){
  1003. this.isScrollTop = true
  1004. }else{
  1005. this.isScrollTop = false
  1006. }
  1007. },
  1008. onShareAppMessage(res){//分享转发
  1009. if (res.from === 'button') {
  1010. // 来自页面内转发按钮
  1011. }
  1012. return {
  1013. title: `${this.product.name}`,
  1014. path: `pages/goods/product?type=share&id=${this.productId}`,
  1015. imageUrl:`${this.productImage[0]}`
  1016. }
  1017. },
  1018. onShow() {
  1019. this.$api.getStorage().then((resolve) => {
  1020. this.userId = this.couponParam.userId = resolve.userId ? resolve.userId : '';
  1021. this.userIdentity = resolve.userIdentity ? resolve.userIdentity : 0
  1022. this.shopID = resolve.shopId ? resolve.shopId : '';
  1023. if(this.userIdentity == 0 || this.userIdentity == 2 || this.userIdentity == 4){
  1024. this.isShowButton = true
  1025. }else{
  1026. this.isShowButton = false
  1027. }
  1028. if (isPreviewImg) {
  1029. isPreviewImg = false;
  1030. return;
  1031. } else {
  1032. this.initData();
  1033. }
  1034. }).catch(error =>{
  1035. this.initData();
  1036. })
  1037. }
  1038. }
  1039. </script>
  1040. <style lang="scss">
  1041. page{
  1042. background-color: #FFFFFF;
  1043. }
  1044. .banner-section{
  1045. width: 100%;
  1046. height: 750rpx;
  1047. position: relative;
  1048. }
  1049. .banner{
  1050. width: 100%;
  1051. height: 750rpx;
  1052. .product-img{
  1053. width: 750rpx;
  1054. }
  1055. image {
  1056. width: 100%;
  1057. height: 100%;
  1058. }
  1059. .banner-item{
  1060. position: relative;
  1061. .cm-product-cover{
  1062. position: absolute;
  1063. right: 30rpx;
  1064. top: 30rpx;
  1065. width: 147rpx;
  1066. height: 57rpx;
  1067. line-height: 57rpx;
  1068. font-size: 24rpx;
  1069. color: #fff;
  1070. text-align: center;
  1071. background: url(https://static.caimei365.com/app/img/icon2/cm_cover_bg_app.png) no-repeat center;
  1072. background-size: 147rpx;
  1073. }
  1074. }
  1075. }
  1076. .swiper__dots-box{
  1077. position: absolute;
  1078. color: #fff;
  1079. bottom: 30rpx;
  1080. right: 0;
  1081. }
  1082. .product-wrap{
  1083. width: 100%;
  1084. height: auto;
  1085. padding: 24rpx 0 0 0;
  1086. background-color: #FFFFFF;
  1087. border-bottom: 20rpx solid #F7F7F7;
  1088. .productRemarks{
  1089. height: 48rpx;
  1090. width: 100%;
  1091. float: left;
  1092. line-height: 48rpx;
  1093. font-size: 24rpx;
  1094. color: #999999;
  1095. text-align: left;
  1096. }
  1097. .wrap-top{
  1098. width: 702rpx;
  1099. padding: 0 24rpx;
  1100. height: auto;
  1101. float: left;
  1102. padding-bottom:20rpx;
  1103. border-bottom: 1px solid #F8F8F8;
  1104. &.none{
  1105. .p-title{
  1106. color:#999999
  1107. }
  1108. }
  1109. .p-title{
  1110. width: 100%;
  1111. height: auto;
  1112. float: left;
  1113. position: relative;
  1114. .p-title-name{
  1115. width:602rpx;
  1116. height: auto;
  1117. float: left;
  1118. line-height:48rpx;
  1119. font-size: $font-size-28;
  1120. color: $text-color;
  1121. -o-text-overflow: ellipsis;
  1122. text-overflow: ellipsis;
  1123. display: -webkit-box;
  1124. word-break: break-all;
  1125. -webkit-box-orient: vertical;
  1126. -webkit-line-clamp: 2;
  1127. overflow: hidden;
  1128. &.indent{
  1129. text-indent: 95rpx;
  1130. }
  1131. }
  1132. .mclap-tag{
  1133. display: block;
  1134. width: 84rpx;
  1135. height: 32rpx;
  1136. background-image: linear-gradient(270deg, #f9c023 0%, #f83600 100%);
  1137. border-radius: 4rpx 48rpx 4px 4px;
  1138. line-height: 32rpx;
  1139. font-size: $font-size-22;
  1140. color: #FFFFFF;
  1141. text-align: center;
  1142. position: absolute;
  1143. left: 0;
  1144. top: 6rpx;
  1145. }
  1146. .p-title-share{
  1147. width: 96rpx;
  1148. height: 96rpx;
  1149. position: absolute;
  1150. right: 0;
  1151. text-align: center;
  1152. color: #999999;
  1153. font-size: $font-size-24;
  1154. box-sizing: border-box;
  1155. display: block;
  1156. background: transparent;
  1157. border-radius: 0;
  1158. border: 0;
  1159. margin: 0;
  1160. padding: 8rpx 0;
  1161. z-index: 990;
  1162. .icon-fenxiang1{
  1163. font-size: $font-size-34;
  1164. }
  1165. }
  1166. .tui-share-btn::after {
  1167. border: 0;
  1168. }
  1169. }
  1170. .wrap-main-text{
  1171. line-height: 56rpx;
  1172. color: #FF2A2A;
  1173. font-size: $font-size-26;
  1174. display: block;
  1175. float: left;
  1176. font-weight: normal;
  1177. }
  1178. .wrap-main-none{
  1179. display: block;
  1180. width: 256rpx;
  1181. height: 44rpx;
  1182. padding-left: 20rpx;
  1183. border-radius: 11rpx;
  1184. background: $btn-confirm;
  1185. float: right;
  1186. line-height: 44rpx;
  1187. color: #FFFFFF;
  1188. text-align: center;
  1189. font-size: $font-size-24;
  1190. }
  1191. .p-price-none{
  1192. height: 44rpx;
  1193. line-height: 44rpx;
  1194. float: left;
  1195. font-size: $font-size-24;
  1196. color: #666;
  1197. text-decoration: line-through;
  1198. margin-left: 8rpx;
  1199. }
  1200. .p-minBuy{
  1201. height: 44rpx;
  1202. line-height: 44rpx;
  1203. float: right;
  1204. padding: 0 18rpx;
  1205. border-radius: 22rpx;
  1206. background-color: #f7f7f7;
  1207. color: #7F7F7F;
  1208. font-size: 24rpx;
  1209. text-align: center;
  1210. .min-text{
  1211. margin: 0 6rpx;
  1212. }
  1213. }
  1214. .p-login{
  1215. height: 56rpx;
  1216. line-height: 56rpx;
  1217. color: $color-system;
  1218. font-size: $font-size-24;
  1219. &.grade{
  1220. .price-left{
  1221. float: left;
  1222. .none{
  1223. display: block;
  1224. font-size: $font-size-20;
  1225. line-height: 48rpx;
  1226. color: #4A4B54;
  1227. float: left;
  1228. font-weight: bold;
  1229. margin-left: 5rpx;
  1230. text{
  1231. letter-spacing: 4rpx;
  1232. font-size: $font-size-32;
  1233. }
  1234. }
  1235. }
  1236. }
  1237. .p-no{
  1238. float: left;
  1239. margin-right: 5rpx;
  1240. font-size: $font-size-28;
  1241. color: $text-color;
  1242. }
  1243. .p-login-btn{
  1244. display: block;
  1245. height: 44rpx;
  1246. padding: 0 10rpx 0 20rpx;
  1247. border-radius: 11rpx;
  1248. background: $btn-confirm;
  1249. float: right;
  1250. line-height: 44rpx;
  1251. color: #FFFFFF;
  1252. text-align: center;
  1253. font-size: $font-size-24;
  1254. }
  1255. }
  1256. }
  1257. .wrap-label{
  1258. float: left;
  1259. width: 100%;
  1260. box-sizing: border-box;
  1261. .label-a{
  1262. padding: 0 18rpx;
  1263. line-height: 32rpx;
  1264. font-size: $font-size-20;
  1265. color:$color-system;
  1266. text-align: center;
  1267. border-radius: 6rpx;
  1268. background:#ffe6dc;
  1269. margin: 0 20rpx 15rpx 0;
  1270. display: inline-block;
  1271. }
  1272. }
  1273. .wrap-top-price{
  1274. float: left;
  1275. width: 100%;
  1276. box-sizing: border-box;
  1277. .wrap-main-item{
  1278. width: 100%;
  1279. height: 56rpx;
  1280. .p-price{
  1281. height: 56rpx;
  1282. line-height: 56rpx;
  1283. float: left;
  1284. color: #FF2A2A;
  1285. font-weight: bold;
  1286. &.none{
  1287. text-decoration: line-through;
  1288. color: #999999;
  1289. font-weight: normal;
  1290. }
  1291. .txt{
  1292. margin:0 2rpx;
  1293. }
  1294. .txt.sm{
  1295. font-size: $font-size-26;
  1296. }
  1297. .txt.big{
  1298. font-size: $font-size-34;
  1299. }
  1300. }
  1301. }
  1302. .floor-item-act{
  1303. height: 56rpx;
  1304. text-align: center;
  1305. box-sizing: border-box;
  1306. float: left;
  1307. padding:10rpx 0;
  1308. margin-left: 10rpx;
  1309. .floor-tags{
  1310. float: right;
  1311. height: 28rpx;
  1312. border-radius: 6rpx;
  1313. background-color: #FFFFFF;
  1314. line-height: 28rpx;
  1315. color: $color-system;
  1316. text-align: center;
  1317. display: inline-block;
  1318. padding:0 16rpx;
  1319. font-size: $font-size-20;
  1320. margin-left: 15rpx;
  1321. border: 1px solid #E15616;
  1322. }
  1323. }
  1324. .floor-item-btn{
  1325. float: left;
  1326. height: 40rpx;
  1327. margin-top: 8rpx;
  1328. margin-left: 10rpx;
  1329. .btn{
  1330. line-height: 40rpx;
  1331. padding: 0 20rpx;
  1332. height: 40rpx;
  1333. background: $btn-confirm;
  1334. color: #FFFFFF;
  1335. font-size: $font-size-20;
  1336. border-radius: 4rpx;
  1337. }
  1338. }
  1339. }
  1340. .wrap-info{
  1341. float: left;
  1342. width: 702rpx;
  1343. padding: 24rpx 24rpx 0 24rpx;
  1344. border-bottom: 1px solid #F8F8F8;
  1345. .info-viewT{
  1346. width: 100%;
  1347. min-height: 40rpx;
  1348. font-size: $font-size-28;
  1349. color: $text-color;
  1350. line-height: 40rpx;
  1351. text-align: left;
  1352. &.none{
  1353. color: #999999;
  1354. }
  1355. .info-viewL{
  1356. min-width: 350rpx;
  1357. float: left;
  1358. margin-bottom: 24rpx;
  1359. }
  1360. .info-viewR{
  1361. min-width: 352rpx;
  1362. float: left;
  1363. margin-bottom: 24rpx;
  1364. }
  1365. }
  1366. .info-viewB{
  1367. width: 100%;
  1368. height: auto;
  1369. }
  1370. .info-f{
  1371. width: 50%;
  1372. float: left;
  1373. font-size: $font-size-28;
  1374. color: $text-color;
  1375. line-height: 40rpx;
  1376. margin-bottom: 24rpx;
  1377. text-align: left;
  1378. }
  1379. }
  1380. }
  1381. .product-seve{
  1382. width: 100%;
  1383. height: 60rpx;
  1384. background-color: #FFFFFF;
  1385. position: relative;
  1386. display: flex;
  1387. line-height: 60rpx;
  1388. .label{
  1389. font-size: $font-size-28;
  1390. color: #333333;
  1391. }
  1392. .iconfont{
  1393. color: #fea785;
  1394. margin-right: 20rpx;
  1395. font-size: $font-size-22;
  1396. }
  1397. .text{
  1398. font-size: $font-size-22;
  1399. color: #fea785;
  1400. margin-left: 10rpx;
  1401. }
  1402. }
  1403. .product-item-none{
  1404. min-height: 348rpx;
  1405. display: flex;
  1406. flex-direction: column;
  1407. align-items: center;
  1408. border-bottom: 20rpx solid #F7F7F7;
  1409. box-sizing: border-box;
  1410. padding: 40rpx 0;
  1411. .none-image{
  1412. width: 284rpx;
  1413. height: 225rpx;
  1414. }
  1415. .none-text{
  1416. text-align: center;
  1417. font-size: $font-size-28;
  1418. color: #fea785;
  1419. line-height: 40rpx;
  1420. }
  1421. }
  1422. .product-parameter{
  1423. width: 702rpx;
  1424. height: 90rpx;
  1425. padding: 0 24rpx;
  1426. background-color: #FFFFFF;
  1427. position: relative;
  1428. border-bottom: 20rpx solid #F7F7F7;
  1429. &.coupon{
  1430. .title{
  1431. color: #f94b4b;
  1432. }
  1433. .icon-xiayibu{
  1434. color: #f94b4b;
  1435. }
  1436. .coupon{
  1437. float: right;
  1438. box-sizing: border-box;
  1439. padding: 29rpx 0;
  1440. padding-right: 35rpx;
  1441. .tags{
  1442. height: 32rpx;
  1443. box-sizing: border-box;
  1444. border-radius: 8rpx;
  1445. background-color: #fff1eb;
  1446. line-height: 28rpx;
  1447. color: #f94b4b;
  1448. text-align: center;
  1449. display: inline-block;
  1450. padding:0 10rpx;
  1451. font-size: $font-size-20;
  1452. border: 1px solid #f94b4b;
  1453. float: right;
  1454. margin:0 6rpx;
  1455. }
  1456. }
  1457. }
  1458. .title{
  1459. line-height: 90rpx;
  1460. display: inline-block;
  1461. float: left;
  1462. font-size: $font-size-28;
  1463. color: #666666;
  1464. }
  1465. .name{
  1466. line-height: 90rpx;
  1467. display: inline-block;
  1468. float: left;
  1469. font-size: $font-size-28;
  1470. color: $text-color;
  1471. padding-right: 48rpx;
  1472. overflow: hidden;
  1473. text-overflow:ellipsis;
  1474. white-space: nowrap;
  1475. text-align: right;
  1476. }
  1477. .icon-xiayibu{
  1478. line-height: 90rpx;
  1479. display: inline-block;
  1480. position: absolute;
  1481. width: 48rpx;
  1482. top: 0;
  1483. right: 0;
  1484. color: #b2b2b2;
  1485. }
  1486. }
  1487. .product-supplier{
  1488. width: 100%;
  1489. height: 174rpx;
  1490. padding: 30rpx 24rpx;
  1491. box-sizing: border-box;
  1492. background-color: #FFFFFF;
  1493. position: relative;
  1494. box-sizing: border-box;
  1495. border-bottom: 20rpx solid #F7F7F7;
  1496. .logo{
  1497. width: 128rpx;
  1498. height: 92rpx;
  1499. float: left;
  1500. border: 1px solid #efefef;
  1501. border-radius: 6rpx;
  1502. image{
  1503. width: 100%;
  1504. height: 100%;
  1505. display: block;
  1506. border-radius: 6rpx;
  1507. }
  1508. }
  1509. .main{
  1510. width: 470rpx;
  1511. height: 92rpx;
  1512. float: left;
  1513. margin-left: 20rpx;
  1514. .name{
  1515. width: 100%;
  1516. line-height: 46rpx;
  1517. float: left;
  1518. font-size: $font-size-28;
  1519. color: $text-color;
  1520. float: right;
  1521. overflow: hidden;
  1522. text-overflow:ellipsis;
  1523. white-space: nowrap;
  1524. text-align: left;
  1525. }
  1526. .massgs{
  1527. width: 100%;
  1528. line-height: 46rpx;
  1529. float: left;
  1530. font-size: $font-size-24;
  1531. color: #999999;
  1532. .label{
  1533. float: left;
  1534. }
  1535. .p-stars{
  1536. float: left;
  1537. margin-left: 20rpx;
  1538. }
  1539. .acount{
  1540. float: right;
  1541. text{
  1542. color: $color-system;
  1543. }
  1544. }
  1545. }
  1546. }
  1547. .icon-xiayibu{
  1548. line-height: 154rpx;
  1549. display: inline-block;
  1550. position: absolute;
  1551. width: 48rpx;
  1552. top: 0;
  1553. right: 0;
  1554. color: #b2b2b2;
  1555. }
  1556. }
  1557. .product-details {
  1558. width: 100%;
  1559. background: #FFFFFF;
  1560. border-bottom: 20rpx solid #F7F7F7;
  1561. &.service{
  1562. border-bottom: none;
  1563. }
  1564. &.recommend{
  1565. background-color: #F7F7F7;
  1566. border-bottom: none;
  1567. .title{
  1568. .title-tab{
  1569. background-color: #F7F7F7;
  1570. color: $text-color;
  1571. }
  1572. }
  1573. }
  1574. .product-rich-text-none{
  1575. box-sizing: border-box;
  1576. padding: 0 24rpx;
  1577. text-align: left;
  1578. font-size: 24rpx;
  1579. color: #999999;
  1580. line-height: 60rpx;
  1581. }
  1582. .content-none{
  1583. width: 100%;
  1584. height: 80rpx;
  1585. line-height: 80rpx;
  1586. text-align: left;
  1587. font-size: $font-size-26;
  1588. color: #999999;
  1589. box-sizing: border-box;
  1590. padding: 0 24rpx;
  1591. }
  1592. .title{
  1593. width: 100%;
  1594. box-sizing: border-box;
  1595. padding: 0 24rpx;
  1596. .title-tab{
  1597. width: 100%;
  1598. height: 100rpx;
  1599. background: #fff;
  1600. z-index: 10;
  1601. font-size: $font-size-30;
  1602. text-align: left;
  1603. color: $text-color;
  1604. line-height: 100rpx;
  1605. font-weight: 600;
  1606. }
  1607. .title-msg{
  1608. width: 100%;
  1609. height: 236rpx;
  1610. padding: 18rpx;
  1611. background-color: rgba(225,86,22, 0.1);
  1612. color: $color-system;
  1613. box-sizing: border-box;
  1614. margin-bottom: 30rpx;
  1615. .tit{
  1616. line-height: 46rpx;
  1617. font-size: $font-size-24;
  1618. text-align: left;
  1619. }
  1620. .txt{
  1621. line-height: 38rpx;
  1622. font-size: $font-size-20;
  1623. text-align: justify;
  1624. }
  1625. }
  1626. }
  1627. .content{
  1628. width: 100%;
  1629. background-color: #FFFFFF;
  1630. }
  1631. }
  1632. .isLower{
  1633. width: 100%;
  1634. height: 116rpx;
  1635. line-height: 116rpx;
  1636. text-align: center;
  1637. color: #000000;
  1638. font-size: $font-size-32;
  1639. font-weight: bold;
  1640. }
  1641. .bottom-btn{
  1642. width: 100%;
  1643. height: 100rpx;
  1644. position: fixed;
  1645. bottom: 0;
  1646. left: 0;
  1647. background: #FFFFFF;
  1648. z-index: 99;
  1649. .bottom-le{
  1650. width: 300rpx;
  1651. height: 100rpx;
  1652. padding:10rpx 20rpx 10rpx 0;
  1653. float: left;
  1654. box-sizing: border-box;
  1655. .item-bt{
  1656. width: 80rpx;
  1657. height: 100%;
  1658. margin-right:15rpx;
  1659. display: flex;
  1660. float: left;
  1661. flex-direction: column;
  1662. align-items: center;
  1663. justify-content: center;
  1664. font-size: $font-size-22;
  1665. color: $text-color;
  1666. line-height: 34rpx;
  1667. position: relative;
  1668. .animation-num{
  1669. font-size:$font-size-32 ;
  1670. color: #FF2A2A;
  1671. position: absolute;
  1672. top: -12rpx;
  1673. right: 4rpx;
  1674. font-weight: bold;
  1675. }
  1676. .animation{
  1677. animation: showAmnation 2.2s ease-in-out both;
  1678. }
  1679. .restion{
  1680. animation: hideAmnation 1s ease-in-out both;
  1681. }
  1682. .icon-num{
  1683. position: absolute;
  1684. right:-12rpx;
  1685. top: -5rpx;
  1686. }
  1687. .icon-num.goleft{
  1688. right: 2rpx;
  1689. }
  1690. &:last-child{
  1691. margin-right: 0;
  1692. }
  1693. image {
  1694. width: 44rpx;
  1695. height: 44rpx;
  1696. }
  1697. button.contact-btn{
  1698. width: 100%;
  1699. height: 100%;
  1700. margin: 0;
  1701. padding: 0;
  1702. display: flex;
  1703. flex-direction: column;
  1704. align-items: center;
  1705. justify-content: center;
  1706. box-sizing: border-box;
  1707. font-size: $font-size-24;
  1708. text-align: center;
  1709. text-decoration: none;
  1710. line-height: 34rpx;
  1711. border-radius: 0;
  1712. -webkit-tap-highlight-color: transparent;
  1713. overflow: hidden;
  1714. color: $text-color;
  1715. background-color:#FFFFFF;
  1716. }
  1717. }
  1718. }
  1719. .bottom-ri{
  1720. width: 450rpx;
  1721. height: 100%;
  1722. float: right;
  1723. display: flex;
  1724. box-sizing: border-box;
  1725. padding: 13rpx 20rpx 13rpx 0;
  1726. .btn{
  1727. flex: 1;
  1728. width: 200rpx;
  1729. line-height: 80rpx;
  1730. text-align: center;
  1731. font-size: $font-size-24;
  1732. color: #FFFFFF;
  1733. }
  1734. .btn-cart{
  1735. background-color: #ffe6dc;
  1736. color: $color-system;
  1737. border-radius: 42rpx 0 0 42rpx;
  1738. }
  1739. .btn-cart.disabled{
  1740. background-color: #E1E1E1;
  1741. color: #FFFFFF;
  1742. }
  1743. .btn-bay{
  1744. background:linear-gradient(to right, #f28f31 0%, #e15616 100%);
  1745. border-radius: 0 42rpx 42rpx 0;
  1746. }
  1747. .btn-bay.disabled{
  1748. background: linear-gradient(135deg,rgba(242,143,49,0.5) 0%,rgba(225,86,22,0.5) 100%);
  1749. }
  1750. }
  1751. }
  1752. .uni-badge--small {
  1753. -webkit-transform: scale(.8);
  1754. -ms-transform: scale(.8);
  1755. transform: scale(.8);
  1756. -webkit-transform-origin: center center;
  1757. -ms-transform-origin: center center;
  1758. transform-origin: center center;
  1759. }
  1760. .uni-badge {
  1761. font-family: 'Helvetica Neue', Helvetica, sans-serif;
  1762. -webkit-box-sizing: border-box;
  1763. box-sizing: border-box;
  1764. font-size: 12px;
  1765. line-height: 1;
  1766. display: inline-block;
  1767. padding: 3px 6px;
  1768. color: #333;
  1769. border-radius: 100px;
  1770. background-color: #f1f1f1;
  1771. }
  1772. .uni-badge-error {
  1773. color: #fff;
  1774. background-color: #dd524d;
  1775. }
  1776. .product-topnav{
  1777. width: 100%;
  1778. height: 174rpx;
  1779. box-sizing: border-box;
  1780. background: #FFFFFF;
  1781. z-index: 990;
  1782. position: fixed;
  1783. opacity: 1;
  1784. left: 0;
  1785. &.fixed{
  1786. animation: showFixedColor 0.1s ease-in-out both;
  1787. }
  1788. &.none{
  1789. animation: hideFixedColor 0.1s ease-in-out both;
  1790. }
  1791. .navbar {
  1792. width: 100%;
  1793. height: 60rpx;
  1794. box-sizing: border-box;
  1795. padding: 0 24rpx;
  1796. display: flex;
  1797. .nav-item {
  1798. display: flex;
  1799. flex: 1;
  1800. justify-content: center;
  1801. align-items: center;
  1802. height: 60rpx;
  1803. font-size: $font-size-28;
  1804. color: $text-color;
  1805. position: relative;
  1806. float: left;
  1807. position: relative;
  1808. .line{
  1809. width: 60rpx;
  1810. height: 2px;
  1811. border-radius: 1px;
  1812. background: #FFFFFF;
  1813. position: absolute;
  1814. bottom: 0;
  1815. left: 50%;
  1816. margin-left: -30rpx;
  1817. }
  1818. &.current{
  1819. color:$color-system;
  1820. .line{
  1821. background: $color-system;
  1822. }
  1823. }
  1824. }
  1825. }
  1826. .search-input{
  1827. width: 100%;
  1828. height: 114rpx;
  1829. padding:24rpx;
  1830. box-sizing: border-box;
  1831. .gosearch-btn{
  1832. width: 100%;
  1833. height: 100%;
  1834. border-radius: 40rpx;
  1835. margin: 0 auto;
  1836. font-size: 26rpx;
  1837. line-height: 66rpx;
  1838. color: #B2B2B2;
  1839. position: relative;
  1840. box-sizing: border-box;
  1841. padding-left: 66rpx;
  1842. &.fixed{
  1843. background: rgba(70,70,70,0.1);
  1844. }
  1845. &.none{
  1846. background: rgba(70,70,70,0.1);
  1847. }
  1848. .search-icon{
  1849. width: 66rpx;
  1850. height: 66rpx;
  1851. position:absolute ;
  1852. left: 0;
  1853. top: 2rpx;
  1854. text-align: center;
  1855. line-height: 66rpx;
  1856. .icon-iconfonticonfontsousuo1{
  1857. margin:0 6rpx;
  1858. font-size: $font-size-34;
  1859. color: #B2B2B2;
  1860. z-index: 10;
  1861. }
  1862. }
  1863. .search-text{
  1864. font-size: $font-size-24;
  1865. line-height: 66rpx;
  1866. color: #B2B2B2;
  1867. }
  1868. }
  1869. }
  1870. }
  1871. @keyframes showFixedColor {
  1872. 0% {background: rgba(255,255,255,0);}
  1873. 50% {background: rgba(255,255,255,0.5);}
  1874. 100% {background: rgba(255,255,255,1);}
  1875. }
  1876. @keyframes hideFixedColor {
  1877. 0% {background: rgba(255,255,255,1);}
  1878. 50% {background: rgba(255,255,255,0.5);}
  1879. 100% {background: rgba(255,255,255,0);}
  1880. }
  1881. /* 加入购物模态层*/
  1882. @keyframes showPopup {
  1883. 0% {
  1884. opacity: 0;
  1885. }
  1886. 100% {
  1887. opacity: 1;
  1888. }
  1889. }
  1890. @keyframes hidePopup {
  1891. 0% {
  1892. opacity: 1;
  1893. }
  1894. 100% {
  1895. opacity: 0;
  1896. }
  1897. }
  1898. @keyframes showLayer {
  1899. 0% {
  1900. transform: translateY(0);
  1901. }
  1902. 100% {
  1903. transform: translateY(-100%);
  1904. }
  1905. }
  1906. @keyframes hideLayer {
  1907. 0% {
  1908. transform: translateY(-100%);
  1909. }
  1910. 100% {
  1911. transform: translateY(0);
  1912. }
  1913. }
  1914. @keyframes showAmnation {
  1915. 0% {
  1916. top: -12rpx;
  1917. opacity: 0;
  1918. }
  1919. 50% {
  1920. top: -60rpx;
  1921. opacity: 1;
  1922. }
  1923. 100% {
  1924. top: -100rpx;
  1925. opacity: 0;
  1926. }
  1927. }
  1928. @keyframes hideAmnation {
  1929. 0% {
  1930. top: -100rpx;
  1931. opacity: 0;
  1932. }
  1933. 100% {
  1934. top: -12rpx;
  1935. opacity: 0;
  1936. }
  1937. }
  1938. .popup {
  1939. position: fixed;
  1940. top: 0;
  1941. width: 100%;
  1942. height: 100%;
  1943. z-index: 999;
  1944. display: none;
  1945. .mask{
  1946. position: fixed;
  1947. top: 0;
  1948. width: 100%;
  1949. height: 100%;
  1950. z-index: 21;
  1951. background-color: rgba(0, 0, 0, 0.6);
  1952. }
  1953. .layer {
  1954. position: fixed;
  1955. z-index: 22;
  1956. bottom: -294rpx;
  1957. width: 702rpx;
  1958. padding: 24rpx 24rpx 36rpx 24rpx;
  1959. height: 260rpx;
  1960. border-radius: 20rpx 20rpx 0 0;
  1961. background-color: #fff;
  1962. display: flex;
  1963. flex-wrap: wrap;
  1964. align-content: space-between;
  1965. .content {
  1966. width: 100%;
  1967. }
  1968. .btn {
  1969. width: 100%;
  1970. height: 88rpx;
  1971. margin-top: 20rpx;
  1972. .button {
  1973. width: 100%;
  1974. height: 88rpx;
  1975. color: #fff;
  1976. display: flex;
  1977. align-items: center;
  1978. justify-content: center;
  1979. background: $btn-confirm;
  1980. font-size: $font-size-28;
  1981. border-radius: 44rpx;
  1982. }
  1983. }
  1984. }
  1985. &.show {
  1986. display: block;
  1987. .mask{
  1988. animation: showPopup 0.2s linear both;
  1989. }
  1990. .layer {
  1991. animation: showLayer 0.2s linear both;
  1992. }
  1993. }
  1994. &.hide {
  1995. display: block;
  1996. .mask{
  1997. animation: hidePopup 0.2s linear both;
  1998. }
  1999. .layer {
  2000. animation: hideLayer 0.2s linear both;
  2001. }
  2002. }
  2003. &.none {
  2004. display: none;
  2005. }
  2006. &.service {
  2007. .row {
  2008. margin: 30upx 0;
  2009. .title {
  2010. font-size: 30upx;
  2011. margin: 10upx 0;
  2012. }
  2013. .description {
  2014. font-size: 28upx;
  2015. color: #999;
  2016. }
  2017. }
  2018. }
  2019. .layer-smimg{
  2020. width: 114rpx;
  2021. height: 114rpx;
  2022. float: left;
  2023. border-radius: 10rpx;
  2024. margin-right: 24rpx;
  2025. image{
  2026. width: 114rpx;
  2027. height: 114rpx;
  2028. border-radius: 10rpx;
  2029. }
  2030. }
  2031. .layer-nunbox{
  2032. justify-content: space-between;
  2033. align-items: center;
  2034. width: 536rpx;
  2035. height: auto;
  2036. float: left;
  2037. .layer-nunbox-t{
  2038. width: 100%;
  2039. height:44rpx;
  2040. position:relative;
  2041. display: flex;
  2042. margin-bottom: 10rpx;
  2043. .text{
  2044. font-size: $font-size-24;
  2045. line-height: 48rpx;
  2046. color: #999999;
  2047. }
  2048. .layer-nunbox-text{
  2049. line-height: 44rpx;
  2050. font-size: $font-size-28;
  2051. }
  2052. .number-box{
  2053. display: flex;
  2054. justify-content: center;
  2055. align-items: center;
  2056. border:2rpx solid #ffe6dc;
  2057. border-radius: 30rpx;
  2058. height: 48rpx;
  2059. margin-left: 20rpx;
  2060. .iconfont{
  2061. font-size: $font-size-24;
  2062. padding:0 18rpx;
  2063. color: #999999;
  2064. text-align: center;
  2065. line-height: 48rpx;
  2066. font-weight: bold;
  2067. background: #fef6f3;
  2068. &.icon-jianhao{
  2069. border-radius: 30rpx 0 0 30rpx;
  2070. }
  2071. &.icon-jiahao{
  2072. border-radius: 0 30rpx 30rpx 0;
  2073. }
  2074. }
  2075. .btn-input{
  2076. width: 62rpx;
  2077. height: 48rpx;
  2078. line-height: 48rpx;
  2079. background: #FFFFFF;
  2080. border-radius: 4rpx;
  2081. text-align: center;
  2082. font-size: $font-size-28;
  2083. }
  2084. }
  2085. .product-step{
  2086. position: absolute;
  2087. left: 45rpx;
  2088. bottom: 0;
  2089. height: 44rpx;
  2090. background: #FFFFFF;
  2091. }
  2092. }
  2093. .layer-nunbox-b{
  2094. width: 100%;
  2095. height:44rpx;
  2096. margin-top: 13rpx;
  2097. }
  2098. .text{
  2099. line-height: 44rpx;
  2100. font-size: $font-size-28;
  2101. .p{
  2102. color: #FF2A2A;
  2103. }
  2104. .p:first-child{
  2105. margin-left: 30rpx;
  2106. }
  2107. .p.sm{
  2108. font-size: $font-size-24;
  2109. }
  2110. }
  2111. }
  2112. }
  2113. .tui-popup-box {
  2114. position: relative;
  2115. box-sizing: border-box;
  2116. min-height: 220rpx;
  2117. padding:24rpx 24rpx 0 24rpx;
  2118. .tui-popup-close{
  2119. width: 90rpx;
  2120. height: 90rpx;
  2121. position: absolute;
  2122. right: 0;
  2123. top: 24rpx;
  2124. line-height: 90rpx;
  2125. text-align: center;
  2126. color: #b2b2b2;
  2127. .icon-iconfontguanbi{
  2128. font-size: $font-size-40;
  2129. }
  2130. }
  2131. .title{
  2132. font-size: $font-size-34;
  2133. color: $text-color;
  2134. line-height: 88rpx;
  2135. text-align: center;
  2136. float: left;
  2137. width: 100%;
  2138. height: 88rpx;
  2139. font-weight: bold;
  2140. }
  2141. .tui-popup-main{
  2142. width: 100%;
  2143. float: left;
  2144. &.coupon{
  2145. padding-bottom: 40rpx;
  2146. .coupon-empty{
  2147. width: 100%;
  2148. height: 600rpx;
  2149. display: flex;
  2150. align-items: center;
  2151. justify-content: center;
  2152. flex-direction: column;
  2153. position: fixed;
  2154. background: $bg-color;
  2155. .empty-container-image{
  2156. width: 150rpx;
  2157. height: 150rpx;
  2158. margin-bottom: 0;
  2159. margin-top: 0;
  2160. }
  2161. .error-text{
  2162. font-size: $font-size-28;
  2163. color: #999999;
  2164. line-height: 88rpx;
  2165. }
  2166. }
  2167. }
  2168. .tui-popup-scroll{
  2169. width: 100%;
  2170. height: 600rpx;
  2171. .coupon-list{
  2172. width: 100%;
  2173. height: 200rpx;
  2174. margin-top: 24rpx;
  2175. box-sizing: border-box;
  2176. background: url(https://static.caimei365.com/app/img/icon/icon-coupon-uesb@2x.png);
  2177. background-size: cover;
  2178. &:last-child{
  2179. margin-bottom: 24rpx;
  2180. }
  2181. .list-cell-le{
  2182. width: 224rpx;
  2183. height: 100%;
  2184. box-sizing: border-box;
  2185. padding: 37rpx 0;
  2186. float: left;
  2187. .coupon-maxMoney{
  2188. width: 100%;
  2189. height: 78rpx;
  2190. line-height: 78rpx;
  2191. font-size: 56rpx;
  2192. color: #FFFFFF;
  2193. text-align: center;
  2194. .small{
  2195. font-size: $font-size-24;
  2196. }
  2197. }
  2198. .coupon-minMoney{
  2199. width: 100%;
  2200. height: 33rpx;
  2201. line-height: 33rpx;
  2202. font-size: $font-size-24;
  2203. color: #FFFFFF;
  2204. text-align: center;
  2205. }
  2206. }
  2207. .list-cell-ri{
  2208. width: 478rpx;
  2209. height: 100%;
  2210. box-sizing: border-box;
  2211. padding: 20rpx 24rpx 0 24rpx;
  2212. float: right;
  2213. .list-cell-top{
  2214. width: 100%;
  2215. height: 121rpx;
  2216. float: left;
  2217. border-bottom: 1px solid #e1e1e1;
  2218. .list-cell-type{
  2219. width: 286rpx;
  2220. height: 100%;
  2221. float: left;
  2222. .list-cell-tags{
  2223. width: 100%;
  2224. height: 32rpx;
  2225. margin-bottom: 7rpx;
  2226. .tags{
  2227. display: inline-block;
  2228. padding: 0 10rpx;
  2229. height: 32rpx;
  2230. line-height: 32rpx;
  2231. background-color: #ffdcce;
  2232. color: #f94b4b;
  2233. font-size: $font-size-20;
  2234. border-radius: 8rpx;
  2235. text-align: center;
  2236. float: left;
  2237. }
  2238. }
  2239. .list-cell-texts{
  2240. width: 100%;
  2241. height: auto;
  2242. line-height:35rpx;
  2243. text-overflow:ellipsis;
  2244. display: -webkit-box;
  2245. word-break: break-all;
  2246. -webkit-box-orient: vertical;
  2247. -webkit-line-clamp: 2;
  2248. overflow: hidden;
  2249. font-size: 26rpx;
  2250. color: #333333;
  2251. }
  2252. }
  2253. .list-cell-btn{
  2254. width: 128rpx;
  2255. height: 100%;
  2256. float: right;
  2257. .icon-used{
  2258. width: 100%;
  2259. height: 100%;
  2260. box-sizing: border-box;
  2261. padding-top: 57rpx;
  2262. .icon-used-btn{
  2263. width: 128rpx;
  2264. height: 48rpx;
  2265. border-radius: 28rpx;
  2266. line-height: 48rpx;
  2267. font-size: $font-size-26;
  2268. text-align: center;
  2269. &.receive{
  2270. background-image: linear-gradient(270deg, #f94b4b 0%, #feb673 100%);;
  2271. color: #FFFFFF;
  2272. }
  2273. &.make{
  2274. border: solid 1px #f94b4b;
  2275. color: #f94b4b;
  2276. }
  2277. }
  2278. }
  2279. }
  2280. }
  2281. .list-cell-time{
  2282. width: 100%;
  2283. height: 58rpx;
  2284. line-height: 58rpx;
  2285. text-align: left;
  2286. font-size: $font-size-20;
  2287. color: #999999;
  2288. }
  2289. }
  2290. }
  2291. &.train{
  2292. height: 240rpx;
  2293. }
  2294. .content-tr{
  2295. width: 100%;
  2296. min-height: 58rpx;
  2297. line-height: 58rpx;
  2298. display: flex;
  2299. .content-td{
  2300. display: flex;
  2301. flex: 3;
  2302. font-size: $font-size-26;
  2303. color: #999999;
  2304. line-height: 58rpx;
  2305. text-align: left;
  2306. }
  2307. .content-th{
  2308. display: flex;
  2309. flex: 7;
  2310. font-size: $font-size-26;
  2311. color: #333333;
  2312. line-height: 58rpx;
  2313. text-align: left;
  2314. padding-left: 10rpx;
  2315. }
  2316. }
  2317. }
  2318. }
  2319. }
  2320. .tui-popup-btn {
  2321. width: 100%;
  2322. height: auto;
  2323. float: left;
  2324. margin-top: 24rpx;
  2325. .tui-button{
  2326. width: 100%;
  2327. height: 88rpx;
  2328. background: $btn-confirm;
  2329. line-height: 88rpx;
  2330. text-align: center;
  2331. color: #FFFFFF;
  2332. font-size: $font-size-28;
  2333. border-radius: 44rpx;
  2334. }
  2335. }
  2336. /*富文本样式*/
  2337. rich-text.p{
  2338. width: 702rpx !important;
  2339. padding: 0 24rpx;
  2340. text-align: justify;
  2341. }
  2342. rich-text.img{
  2343. width: 100%;
  2344. height: auto;
  2345. }
  2346. </style>