index.vue 73 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350351352353354355356357358359360361362363364365366367368369370371372373374375376377378379380381382383384385386387388389390391392393394395396397398399400401402403404405406407408409410411412413414415416417418419420421422423424425426427428429430431432433434435436437438439440441442443444445446447448449450451452453454455456457458459460461462463464465466467468469470471472473474475476477478479480481482483484485486487488489490491492493494495496497498499500501502503504505506507508509510511512513514515516517518519520521522523524525526527528529530531532533534535536537538539540541542543544545546547548549550551552553554555556557558559560561562563564565566567568569570571572573574575576577578579580581582583584585586587588589590591592593594595596597598599600601602603604605606607608609610611612613614615616617618619620621622623624625626627628629630631632633634635636637638639640641642643644645646647648649650651652653654655656657658659660661662663664665666667668669670671672673674675676677678679680681682683684685686687688689690691692693694695696697698699700701702703704705706707708709710711712713714715716717718719720721722723724725726727728729730731732733734735736737738739740741742743744745746747748749750751752753754755756757758759760761762763764765766767768769770771772773774775776777778779780781782783784785786787788789790791792793794795796797798799800801802803804805806807808809810811812813814815816817818819820821822823824825826827828829830831832833834835836837838839840841842843844845846847848849850851852853854855856857858859860861862863864865866867868869870871872873874875876877878879880881882883884885886887888889890891892893894895896897898899900901902903904905906907908909910911912913914915916917918919920921922923924925926927928929930931932933934935936937938939940941942943944945946947948949950951952953954955956957958959960961962963964965966967968969970971972973974975976977978979980981982983984985986987988989990991992993994995996997998999100010011002100310041005100610071008100910101011101210131014101510161017101810191020102110221023102410251026102710281029103010311032103310341035103610371038103910401041104210431044104510461047104810491050105110521053105410551056105710581059106010611062106310641065106610671068106910701071107210731074107510761077107810791080108110821083108410851086108710881089109010911092109310941095109610971098109911001101110211031104110511061107110811091110111111121113111411151116111711181119112011211122112311241125112611271128112911301131113211331134113511361137113811391140114111421143114411451146114711481149115011511152115311541155115611571158115911601161116211631164116511661167116811691170117111721173117411751176117711781179118011811182118311841185118611871188118911901191119211931194119511961197119811991200120112021203120412051206120712081209121012111212121312141215121612171218121912201221122212231224122512261227122812291230123112321233123412351236123712381239124012411242124312441245124612471248124912501251125212531254125512561257125812591260126112621263126412651266126712681269127012711272127312741275127612771278127912801281128212831284128512861287128812891290129112921293129412951296129712981299130013011302130313041305130613071308130913101311131213131314131513161317131813191320132113221323132413251326132713281329133013311332133313341335133613371338133913401341134213431344134513461347134813491350135113521353135413551356135713581359136013611362136313641365136613671368136913701371137213731374137513761377137813791380138113821383138413851386138713881389139013911392139313941395139613971398139914001401140214031404140514061407140814091410141114121413141414151416141714181419142014211422142314241425142614271428142914301431143214331434143514361437143814391440144114421443144414451446144714481449145014511452145314541455145614571458145914601461146214631464146514661467146814691470147114721473147414751476147714781479148014811482148314841485148614871488148914901491149214931494149514961497149814991500150115021503150415051506150715081509151015111512151315141515151615171518151915201521152215231524152515261527152815291530153115321533153415351536153715381539154015411542154315441545154615471548154915501551155215531554155515561557155815591560156115621563156415651566156715681569157015711572157315741575157615771578157915801581158215831584158515861587158815891590159115921593159415951596159715981599160016011602160316041605160616071608160916101611161216131614161516161617161816191620162116221623162416251626162716281629163016311632163316341635163616371638163916401641164216431644164516461647164816491650165116521653165416551656165716581659166016611662166316641665166616671668166916701671167216731674167516761677167816791680168116821683168416851686168716881689169016911692169316941695169616971698169917001701170217031704170517061707170817091710171117121713171417151716171717181719172017211722172317241725172617271728172917301731173217331734173517361737173817391740174117421743174417451746174717481749175017511752175317541755175617571758175917601761176217631764176517661767176817691770177117721773177417751776177717781779178017811782178317841785178617871788178917901791179217931794179517961797179817991800180118021803180418051806180718081809181018111812181318141815181618171818181918201821182218231824182518261827182818291830183118321833183418351836183718381839184018411842184318441845184618471848184918501851185218531854185518561857185818591860186118621863186418651866186718681869187018711872187318741875187618771878187918801881188218831884188518861887188818891890189118921893189418951896189718981899190019011902190319041905190619071908190919101911191219131914191519161917191819191920192119221923192419251926192719281929193019311932193319341935193619371938193919401941194219431944194519461947194819491950195119521953195419551956195719581959196019611962196319641965196619671968196919701971197219731974197519761977197819791980198119821983198419851986198719881989199019911992199319941995199619971998199920002001200220032004200520062007200820092010201120122013201420152016201720182019202020212022202320242025202620272028202920302031203220332034203520362037203820392040204120422043204420452046204720482049205020512052205320542055205620572058205920602061206220632064206520662067206820692070207120722073207420752076207720782079208020812082208320842085208620872088208920902091209220932094209520962097209820992100210121022103210421052106210721082109211021112112211321142115211621172118211921202121212221232124212521262127212821292130213121322133213421352136213721382139214021412142214321442145214621472148214921502151215221532154215521562157215821592160216121622163216421652166216721682169217021712172217321742175217621772178217921802181218221832184218521862187218821892190219121922193219421952196219721982199220022012202220322042205220622072208220922102211221222132214221522162217221822192220222122222223222422252226222722282229223022312232223322342235223622372238223922402241224222432244224522462247224822492250225122522253225422552256225722582259226022612262226322642265226622672268226922702271227222732274227522762277227822792280228122822283228422852286228722882289229022912292229322942295229622972298229923002301230223032304230523062307230823092310231123122313231423152316231723182319232023212322232323242325232623272328232923302331233223332334233523362337233823392340234123422343234423452346234723482349235023512352235323542355235623572358235923602361236223632364236523662367236823692370237123722373237423752376237723782379238023812382238323842385238623872388238923902391239223932394239523962397239823992400240124022403240424052406240724082409241024112412241324142415241624172418241924202421242224232424242524262427242824292430243124322433243424352436243724382439244024412442244324442445
  1. <template>
  2. <view :style="viewColor">
  3. <view class="product-con">
  4. <view class="head-wrapper" id="home" :style="{ top: homeTop + 'rpx' }">
  5. <view class="head-menu">
  6. <view class='iconfont icon-fanhui2' @click="returns"></view>
  7. <view class="iconfont icon-gengduo5" @click="showNav"></view>
  8. </view>
  9. </view>
  10. <!-- 导航小图标 -->
  11. <view class="dialog_nav" v-show="currentPage" :style="{ top: navH + 'rpx' }">
  12. <view class="dialog_nav_item" :class="item.after" v-for="(item,index) in selectNavList" :key="index"
  13. @click="linkPage(item.url)">
  14. <text class="iconfont" :class="item.icon"></text>
  15. <text class="pl-20">{{item.name}}</text>
  16. </view>
  17. </view>
  18. <view v-if="storeInfo && storeInfo.merchant">
  19. <scroll-view :scroll-top="scrollTop" scroll-y='true' scroll-with-animation="true" :style='"height:"+height+"px;"'
  20. @scroll="scroll">
  21. <view id="past0">
  22. <!-- #ifdef MP || APP-PLUS -->
  23. <view class="" :style="'width:100%;' + 'height:'+sysHeight + 'px'"></view>
  24. <!-- #endif -->
  25. <productConSwiper :imgUrls="storeInfo.slider_image" :videoCoverImg="videoCoverImg" :videoline="storeInfo.video_link"></productConSwiper>
  26. <!--有氛围图-->
  27. <view v-if="storeInfo.atmosphere_pic" :style="{ backgroundImage: `url(${storeInfo.atmosphere_pic})` }" class='nav acea-row row-between-wrapper'>
  28. <view class='money skeleton-rect'>¥<text class='num'>{{storeInfo.price || 0}}</text>
  29. <text v-if="!svipData" class='y-money'>¥{{marketPrice || 0}}</text>
  30. <view class="atmosphere" v-if="svipData && svipData.show_svip_price && svipData.show_svip" style="display: inline-block;">
  31. <text class="vip-money">¥{{storeInfo.svip_price}}</text>
  32. <image class="vip-image" :src="`${domain}/static/images/svip.png`"></image>
  33. </view>
  34. </view>
  35. </view>
  36. <view class='wrapper'>
  37. <view v-if="storeInfo.atmosphere_pic" class='introduce skeleton-rect acea-row atmosphere'>
  38. <view class="title">
  39. <text v-if="(storeInfo.merchant && storeInfo.merchant.type_name)" class="font-bg-red bt-color">{{storeInfo.merchant.type_name}}</text>
  40. <text v-else-if="(storeInfo.merchant && storeInfo.merchant.is_trader)" class="font-bg-red bt-color">自营</text>
  41. {{storeInfo.store_name || ''}}
  42. </view>
  43. <view class="fenxiang_btn">
  44. <view @click="setCollect"><text class="iconfont" :class="storeInfo.isRelation ? 'icon-yishoucang2' : 'icon-shoucang4'"></text><br/>收藏</view>
  45. <view @click="listenerActionSheet"><text class="iconfont icon-fenxiang4"></text><br/>分享</view>
  46. </view>
  47. </view>
  48. <view v-if="storeInfo.atmosphere_pic" class='integral_count skeleton-rect'>
  49. <text v-if="storeInfo.max_integral > 0" class='integral'>积分最高可抵扣{{storeInfo.max_integral}}元</text>
  50. <text v-if="storeInfo.delivery_free == 1" class='integral'>包邮</text>
  51. </view>
  52. <!--无氛围图-->
  53. <view v-else class='share acea-row row-between row-bottom'>
  54. <view class='money p-color skeleton-rect' style="min-width: 70rpx;">
  55. <text class='num'>{{storeInfo.price}}</text>
  56. <view v-if="svipData && svipData.show_svip_price && svipData.show_svip" style="display: inline-block;">
  57. <text class="vip-money">¥{{storeInfo.svip_price || 0}}</text>
  58. <image class="vip-image" :src="`${domain}/static/images/svip.png`"></image>
  59. </view>
  60. </view>
  61. <view class="fenxiang_btn">
  62. <view @click="setCollect">
  63. <text class="iconfont" :class="storeInfo.isRelation ? 'icon-yishoucang2' : 'icon-shoucang4'"></text><br/>收藏
  64. </view>
  65. <view @click="listenerActionSheet"><text class="iconfont icon-fenxiang4"></text><br/>分享</view>
  66. </view>
  67. </view>
  68. <view
  69. v-if="svipData && !svipData.is_svip && svipData.show_svip"
  70. class="svipCon acea-row row-between-wrapper skeleton-rect" style="margin-top: 20rpx;">
  71. <view class="acea-row row-between-wrapper">
  72. <image :src="`${domain}/static/images/svip_user.png`"></image>
  73. <view class="">开通 SVIP会员
  74. <block v-if="svipData.show_svip_price">立省<text>{{svipData.save_money}}元</text></block>
  75. <block v-else><text>省钱多多,权益多多</text></block>
  76. </view>
  77. </view>
  78. <navigator class="svipBtn" url="/pages/annex/vip_paid/index">
  79. 立即开通
  80. <text class="iconfont icon-jiantou"></text>
  81. </navigator>
  82. </view>
  83. <view v-if="!storeInfo.atmosphere_pic" class='integral_count skeleton-rect'>
  84. <text v-if="storeInfo.max_integral > 0" class='integral'>积分最高可抵扣{{storeInfo.max_integral}}元</text>
  85. <text v-if="storeInfo.delivery_free == 1" class='integral'>包邮</text>
  86. </view>
  87. <view v-if="!storeInfo.atmosphere_pic" class='introduce skeleton-rect'>
  88. <text v-if="storeInfo.merchant.type_name" class="font-bg-red bt-color">{{storeInfo.merchant.type_name}}</text>
  89. <text v-else-if="storeInfo.merchant.is_trader" class="font-bg-red bt-color">自营</text>
  90. {{storeInfo.store_name || ''}}
  91. </view>
  92. <view class='label acea-row row-between-wrapper' :style="{'padding-bottom':coupon.list.length || storeInfo.top_pid?0 :10+'px;'}">
  93. <view class="skeleton-rect">市场价:¥{{marketPrice || 0}}</view>
  94. <view class="skeleton-rect">库存:{{storeInfo.stock ? storeInfo.stock : 0}}{{storeInfo.unit_name ? storeInfo.unit_name : ''}}</view>
  95. <view class="skeleton-rect">销量:{{storeInfo.sales ? storeInfo.sales : 0}}{{storeInfo.unit_name ? storeInfo.unit_name : ''}}</view>
  96. </view>
  97. <navigator v-if="storeInfo.top_pid" hover-class='none' :url="`/pages/activity/rank/index?cate_id=${storeInfo.top_pid}`" class='label'>
  98. <view class="rank_list acea-row row-between-wrapper">
  99. <view class="acea-row row-between-wrapper">
  100. <text class="rank_title"></text>
  101. <view>{{ storeInfo.top_name }} · 第{{ storeInfo.top_num }}名</view>
  102. </view>
  103. <text class="iconfont icon-xiala1"></text>
  104. </view>
  105. </navigator>
  106. <view class='coupon acea-row row-between-wrapper skeleton-rect' @click='couponTap' style="margin-top: 20rpx;" v-if="coupon.list.length > 0">
  107. <view class='hide line1 acea-row'>
  108. 优惠券:
  109. <view class='activity' v-for="(item,index) in coupon.list" :key="index">满{{item.use_min_price}}减{{item.coupon_price}}</view>
  110. </view>
  111. <view class='iconfont icon-jiantou'></view>
  112. </view>
  113. </view>
  114. <view class='attribute acea-row row-between-wrapper skeleton-rect' @click="selecAttr">
  115. <view class="acea-row row-between-wrapper">{{attrTxt}}:
  116. <text class='atterTxt'>{{attrValue}}</text>
  117. </view>
  118. <view class='iconfont icon-jiantou'></view>
  119. </view>
  120. <view v-if="specsInfo.params && specsInfo.params.length>0" class="attribute acea-row row-between-wrapper" @click="seeSpecs">
  121. <view class="acea-row row-middle">
  122. 参数:
  123. <view class="list line1">
  124. <text class="item params" v-for="(item,index) in specsInfo.params" :key="index"
  125. v-if="index<2">{{item.name}}</text>
  126. <text>...</text>
  127. </view>
  128. </view>
  129. <view class="iconfont icon-jiantou"></view>
  130. </view>
  131. <!--运费-->
  132. <view v-if="shipping || shippingValue" class='attribute acea-row row-between-wrapper' @click="showShip">
  133. <view class="acea-row row-between-wrapper">运费:
  134. <text class='atterTxt'>{{shippingValue}}</text>
  135. </view>
  136. <view class='iconfont icon-jiantou'></view>
  137. </view>
  138. <!--保障-->
  139. <view v-if="guarantee && guarantee.length" class='attribute acea-row row-between-wrapper' @click="showGuaranee">
  140. <view class="acea-row row-between-wrapper">保障:
  141. <view class="guaranteeAttr">
  142. <text class='atterTxt1' :class="item.guarantee_name ? 'hasAttr' : ''" v-for="(item,index) in guarantee">
  143. {{item.guarantee_name ? item.guarantee_name : ''}}
  144. </text>
  145. </view>
  146. </view>
  147. <view class='iconfont icon-jiantou'></view>
  148. </view>
  149. </view>
  150. <!--优惠套餐-->
  151. <view class='combo' v-if="comboList && comboList.length>0">
  152. <view class='title acea-row row-between-wrapper'>
  153. <view>优惠套餐({{comboTotal}}) </view>
  154. <view class='praise' @click="openCombo">
  155. 查看全部
  156. <text class='iconfont icon-jiantou'></text>
  157. </view>
  158. </view>
  159. <scroll-view scroll-x="true" style="white-space: nowrap; display: flex;height: 180rpx;" show-scrollbar="false">
  160. <view class="img-box">
  161. <view class="combo_item" v-for="(item,index) in comboList" :key="index">
  162. <view class="img-item" v-for="(itemn,indexn) in item.discountsProduct" :key="indexn">
  163. <image :src="itemn.image" mode="" @click="openCombo"></image>
  164. <text v-if="indexn != item.count-1" class="iconfont icon-jiahao2"></text>
  165. </view>
  166. <view class="list_total">
  167. <view class="list_num">共{{item.count}}件</view>
  168. <view class="list_price p-color">省 ¥{{item.max_price}}</view>
  169. </view>
  170. </view>
  171. </view>
  172. </scroll-view>
  173. </view>
  174. <view class='userEvaluation' id="past1" v-if="replyCount && replyCount>0">
  175. <view class='title acea-row row-between-wrapper skeleton-rect'>
  176. <view>用户评价({{replyCount}})</view>
  177. <navigator class='praise' hover-class='none' :url='"/pages/users/goods_comment_list/index?product_id="+id'>
  178. <text class='t-color'>{{replyChance}}</text>好评率
  179. <text class='iconfont icon-jiantou'></text>
  180. </navigator>
  181. </view>
  182. <block v-if="replyCount && replyCount>0">
  183. <userEvaluation :reply="reply"></userEvaluation>
  184. </block>
  185. </view>
  186. <!-- 种草秀 -->
  187. <view class='userPlant' v-if="storeInfo.community && storeInfo.community.length>0">
  188. <view class='title acea-row row-between-wrapper'>
  189. <view>种草秀 </view>
  190. <navigator class='praise' hover-class='none' :url="'/pages/plantGrass/plant_show/index?spu_id='+storeInfo.spu_id">
  191. 查看全部
  192. <text class='iconfont icon-jiantou'></text>
  193. </navigator>
  194. </view>
  195. <view class="imgList acea-row">
  196. <view class="pictrue" v-for="(item, index) in storeInfo.community" :key="index" v-if="index<=2"
  197. @click="goPlant(item)">
  198. <image :src="item.image[0]" class="image"></image>
  199. <image v-if="item.is_type == 2" class="video_img" src="@/static/images/stop.png" mode=""></image>
  200. </view>
  201. </view>
  202. </view>
  203. <!-- 商铺信息 -->
  204. <view class="store-wrapper" v-if="storeInfo.merchant && hide_mer_status !=1">
  205. <view class="store-hd skeleton-rect">
  206. <view v-if="storeInfo.merchant&&hide_mer_status != 1" class="store-info">
  207. <navigator :url="'/pages/store/home/index?id='+storeInfo.mer_id" hover-class="none" class="logo">
  208. <image :src="storeInfo.merchant.mer_avatar" mode=""></image>
  209. </navigator>
  210. <navigator :url="'/pages/store/home/index?id='+storeInfo.mer_id" hover-class="none" class="info">
  211. <view class="name line1">
  212. <text>{{storeInfo.merchant.mer_name ? storeInfo.merchant.mer_name : ''}}</text>
  213. <image v-if="margin_ico_switch==1 && margin_ico && storeInfo.merchant.is_margin == 10" :src="margin_ico" class="store-margin"></image>
  214. <text v-if="storeInfo.merchant.type_name" class="font-bg-red ml8 bt-color">{{storeInfo.merchant.type_name}}</text>
  215. <text v-else-if="storeInfo.merchant.is_trader" class="font-bg-red ml8 bt-color">自营</text>
  216. </view>
  217. <view v-if="storeInfo.merchant.care_count" class="txt">
  218. {{storeInfo.merchant.care_count < 10000 ? storeInfo.merchant.care_count : (storeInfo.merchant.care_count/10000).toFixed(2)+'万'}}人关注
  219. </view>
  220. <view v-else class="txt">0人关注</view>
  221. </navigator>
  222. <navigator v-if="hide_mer_status != 1" :url="'/pages/store/home/index?id='+storeInfo.mer_id" class="link"
  223. hover-class="none">进店</navigator>
  224. </view>
  225. <view class="score-wrapper">
  226. <view class="item">
  227. 商品描述<text>{{storeInfo.merchant.product_score}}</text>
  228. </view>
  229. <view class="item">
  230. 卖家服务<text>{{storeInfo.merchant.service_score}}</text>
  231. </view>
  232. <view class="item">
  233. 物流服务<text>{{storeInfo.merchant.postage_score}}</text>
  234. </view>
  235. </view>
  236. </view>
  237. <view v-if="recommend && recommend.length > 0" class="con-box">
  238. <view class="acea-row row-between">
  239. <view class="title">店铺推荐</view>
  240. <navigator v-if="hide_mer_status!=1" class="moer-btn" :url="'/pages/store/home/index?id='+storeInfo.mer_id" hover-class="none">
  241. 查看更多<text class='iconfont icon-jiantou'></text></navigator>
  242. </view>
  243. <!-- <scroll-view scroll-x="true" style="white-space: nowrap; display: flex" show-scrollbar="false">
  244. <view class="img-box">
  245. <view class="img-item" v-for="(item,index) in storeInfo.merchant.recommend" :key="index" @click="goProDetail(item)">
  246. <easy-loadimage mode="widthFix" :image-src="item.image"></easy-loadimage>
  247. <view class="txt">
  248. <view class="title line1">{{item.store_name}}</view>
  249. <view class="price">
  250. <text>¥</text>{{item.price}}
  251. </view>
  252. </view>
  253. </view>
  254. </view>
  255. </scroll-view> -->
  256. <view class="swiper page_swiper">
  257. <swiper
  258. indicator-dots="true"
  259. :autoplay="false"
  260. :circular="circular"
  261. :interval="interval"
  262. :duration="duration"
  263. :current="swiperCur"
  264. style="750rpx;"
  265. >
  266. <block v-for="(item,index) in recommend" :key="index">
  267. <swiper-item class="swiper-item">
  268. <view class="img-box">
  269. <view class="img-item" v-for="(itm,idx) in item" :key="idx" @click="goProDetail(itm)">
  270. <easy-loadimage mode="widthFix" :image-src="itm.image"></easy-loadimage>
  271. <view class="txt">
  272. <view class="title line1">{{itm.store_name}}</view>
  273. <view class="price">
  274. <text>¥</text>{{itm.price}}
  275. </view>
  276. </view>
  277. </view>
  278. </view>
  279. </swiper-item>
  280. </block>
  281. </swiper>
  282. </view>
  283. </view>
  284. </view>
  285. <view class='product-intro' id="past3">
  286. <view class='title'>产品介绍</view>
  287. <view class='conter' v-if="description">
  288. <!-- #ifndef APP-PLUS -->
  289. <jyf-parser v-if="description.type == 0" :domain='domain' :html="description.content.replace(/<br\/>/ig, '')" ref="article" :tag-style="tagStyle"></jyf-parser>
  290. <!-- #endif -->
  291. <!-- #ifdef APP-PLUS -->
  292. <view v-if="description.type == 0" class="description" v-html="description.content.replace(/<br\/>/ig, '')"></view>
  293. <!-- #endif -->
  294. <view v-else class="product_content">
  295. <view v-if="description.content && description.content.title" class="title">{{description.content.title}}</view>
  296. <view v-if="description.content && description.content.image" class="pictures">
  297. <image v-for="(item,index) in description.content.image" :key="index" :src="item"></image>
  298. </view>
  299. </view>
  300. </view>
  301. <!-- 价格说明 -->
  302. <view v-if="priceRule.content" class="price-info">
  303. <view class="price-title">{{priceRule.rule_name}}</view>
  304. <!-- #ifndef APP-PLUS -->
  305. <jyf-parser :domain='domain' :html="priceRule.content.replace(/<br\/>/ig, '')" ref="article" :tag-style="tagStyle"></jyf-parser>
  306. <!-- #endif -->
  307. <!-- #ifdef APP-PLUS -->
  308. <view class="description" v-html="priceRule.content.replace(/<br\/>/ig, '')"></view>
  309. <!-- #endif -->
  310. </view>
  311. </view>
  312. <view class="content-height"></view>
  313. </scroll-view>
  314. </view>
  315. <view class='footer acea-row row-between-wrapper' :class="{'footpl':hide_mer_status==1}">
  316. <navigator v-if="hide_mer_status !=1" :url="'/pages/store/home/index?id='+storeInfo.mer_id" class='item skeleton-rect'>
  317. <view class='iconfont icon-dianpu2'></view>
  318. <view>店铺</view>
  319. </navigator>
  320. <block v-if="storeInfo.merchant">
  321. <view v-if="storeInfo.merchant.services_type== 0" class="item skeleton-rect" @click="goCustomer">
  322. <view class="iconfont icon-kefu"></view>
  323. <view>客服</view>
  324. </view>
  325. <view v-else class="item skeleton-rect" @click="call">
  326. <view class="iconfont icon-kefu"></view>
  327. <view>客服</view>
  328. </view>
  329. </block>
  330. <navigator open-type='switchTab' class="animated item skeleton-rect" :class="animated==true?'bounceIn':''" url='/pages/order_addcart/order_addcart'
  331. hover-class="none">
  332. <view class='iconfont icon-gouwuche1'>
  333. <text v-if="CartCount>0" class='num'>{{CartCount || 0}}</text>
  334. </view>
  335. <view>购物车</view>
  336. </navigator>
  337. <view v-if="attr.productSelect.stock != 0" class='bnt acea-row skeleton-rect'>
  338. <form @submit="joinCart" report-submit='true'>
  339. <button v-if="storeInfo.type != 1&&storeInfo.type != 2&&!storeInfo.mer_form_id" class='joinCart bnts' form-type="submit">加入购物车</button>
  340. </form>
  341. <form @submit="goBuy" report-submit='true' v-if="attr.productSelect">
  342. <button class='buy bnts' :class="(storeInfo.type == 1 || storeInfo.type == 2 || storeInfo.mer_form_id) ? 'virtual_buy' : ''" form-type="submit" :disabled="attr.productSelect.stock == 0">立即购买</button>
  343. </form>
  344. </view>
  345. <view v-else class='bnt acea-row skeleton-rect'>
  346. <form report-submit='true'>
  347. <button v-if="procudt_increase_status == 1" class='buy bnts sold_out' form-type="submit" @click="arrivalNotice">到货通知</button>
  348. <button v-else class='buy bnts sold_out' form-type="submit" disabled>商品已售罄</button>
  349. </form>
  350. </view>
  351. </view>
  352. <block v-if="sharePacket.max&&sharePacket.max>0">
  353. <shareRedPackets :sharePacket="sharePacket" @listenerActionSheet="listenerActionSheet" @closeChange="closeChange"
  354. :showAnimate="showAnimate" @boxStatus="boxStatus"></shareRedPackets>
  355. </block>
  356. <!-- 组件 -->
  357. <productWindow :attr="attr" :isShow='1' :iSplus='1' @myevent="onMyEvent" @ChangeAttr="ChangeAttr" @ChangeCartNum="ChangeCartNum"
  358. @attrVal="attrVal" @iptCartNum="iptCartNum" id='product-window' :payLimit="pay_limit" :maxCount="max_count" :minCount="min_count" :svipPrice="svipPrice" :image="storeInfo.image"></productWindow>
  359. <block v-if="coupon.coupon">
  360. <couponListWindow :coupon='coupon' @ChangCouponsClose="ChangCouponsClose" @ChangCoupons="ChangCoupons"
  361. @ChangCouponsUseState="ChangCouponsUseState"></couponListWindow>
  362. </block>
  363. <specs :specsInfo="specsInfo" @myevent="mySpecs"></specs>
  364. <!-- 分享按钮 -->
  365. <view class="generate-posters acea-row row-middle" :class="posters ? 'on' : ''">
  366. <!-- #ifndef MP -->
  367. <button class="item" :class="weixinStatus ? 'item3' : ''" hover-class='none' v-if="weixinStatus === true" @click="H5ShareBox = true">
  368. <view class="iconfont icon-weixin3"></view>
  369. <view class="">发送给朋友</view>
  370. </button>
  371. <!-- #endif -->
  372. <!-- #ifdef MP -->
  373. <button class="item" :class="weixinStatus ? 'item3' : ''" open-type="share" hover-class='none' @click="goFriend">
  374. <view class="iconfont icon-weixin3"></view>
  375. <view class="">发送给朋友</view>
  376. </button>
  377. <!-- #endif -->
  378. <!-- #ifdef APP-PLUS -->
  379. <view class="item" @click="appShare('WXSceneSession')">
  380. <view class="iconfont icon-weixin3"></view>
  381. <view class="">分享给好友</view>
  382. </view>
  383. <!-- #endif -->
  384. <button class="item" :class="weixinStatus ? 'item3' : ''" hover-class='none' @click="downloadFilePromotionCode">
  385. <view class="iconfont icon-haibao"></view>
  386. <view class="">生成海报</view>
  387. </button>
  388. <button class="item" :class="weixinStatus ? 'item3' : ''" hover-class='none' @click="copyPwd">
  389. <view class="iconfont icon-fuzhikouling1"></view>
  390. <view>生成口令</view>
  391. </button>
  392. </view>
  393. <view class="mask" v-if="posters" @click="listenerActionClose"></view>
  394. <view class="mask_transparent" v-if="currentPage" @touchmove="hideNav" @click="hideNav()"></view>
  395. <!--口令复制结果-->
  396. <copyPassword :isCopy='isCopy' :copyUrl='copyUrl' @close="closeCopy"></copyPassword>
  397. <!-- 海报展示 -->
  398. <view class='poster-pop' v-if="posterImageStatus">
  399. <image src='../../static/images/poster-close.png' class='close' @click="posterImageClose"></image>
  400. <image :src='posterImage'></image>
  401. <!-- #ifndef H5 -->
  402. <view class='save-poster' @click="savePosterPath">保存到手机</view>
  403. <!-- #endif -->
  404. <!-- #ifdef H5 -->
  405. <view class="keep">长按图片可以保存到手机</view>
  406. <!-- #endif -->
  407. </view>
  408. <view class='mask' v-if="posterImageStatus"></view>
  409. <canvas class="canvas" canvas-id='myCanvas' v-if="canvasStatus"></canvas>
  410. <!-- 发送给朋友图片 -->
  411. <view class="share-box" v-if="H5ShareBox">
  412. <image :src="`${domain}/static/images/share-info.png`" @click="H5ShareBox = false"></image>
  413. </view>
  414. <guaranteeTemplate ref="guartemplate" :guarantee='guarantee' :shipping='shipping'></guaranteeTemplate>
  415. <!-- #ifndef H5 -->
  416. <passwordPopup></passwordPopup>
  417. <!-- #endif -->
  418. <!--套餐产品弹窗-->
  419. <discounts-goods ref="discounts" :uid="uid"></discounts-goods>
  420. </view>
  421. </view>
  422. </template>
  423. <script>
  424. // +----------------------------------------------------------------------
  425. // | CRMEB [ CRMEB赋能开发者,助力企业发展 ]
  426. // +----------------------------------------------------------------------
  427. // | Copyright (c) 2016~2024 https://www.crmeb.com All rights reserved.
  428. // +----------------------------------------------------------------------
  429. // | Licensed CRMEB并不是自由软件,未经许可不能去掉CRMEB相关版权
  430. // +----------------------------------------------------------------------
  431. // | Author: CRMEB Team <admin@crmeb.com>
  432. // +----------------------------------------------------------------------
  433. var sysHeight = uni.getSystemInfoSync().statusBarHeight;
  434. import { arrivalSubscribe } from '@/utils/SubscribeMessage.js';
  435. import {
  436. getProductDetail,
  437. getProductParmas,
  438. getProductCode,
  439. collectAdd,
  440. collectDel,
  441. postCartAdd,
  442. arrivalNoticeApi,
  443. copyPasswordApi, getDiscountsLst, priceRuleApi
  444. } from '@/api/store.js';
  445. import { getOrderConfirm } from '@/api/order.js';
  446. import { getUserInfo, imgToBase } from '@/api/user.js';
  447. import { getCoupons,getShopCoupons } from '@/api/api.js';
  448. import { getCartCounts } from '@/api/order.js';
  449. import { mapGetters } from "vuex";
  450. import { configMap } from "@/utils";
  451. import { imageBase64 } from "@/api/public";
  452. import productConSwiper from '@/components/productConSwiper';
  453. import couponListWindow from '@/components/couponListWindow';
  454. import copyPassword from '@/components/copyPassword';
  455. import productWindow from '@/components/productWindow';
  456. import userEvaluation from '@/components/userEvaluation';
  457. import shareRedPackets from '@/components/shareRedPackets';
  458. import specs from '@/components/specs/index.vue';
  459. import Cache from '@/utils/cache';
  460. import { toLogin } from '@/libs/login.js';
  461. // #ifndef H5
  462. import passwordPopup from '@/components/passwordPopup';
  463. // #endif
  464. import { HTTP_REQUEST_URL } from '@/config/app';
  465. import { CART_TIME,CART_ID} from '@/config/cache';
  466. import home from '@/components/home';
  467. import { silenceBindingSpread } from "@/utils";
  468. import parser from "@/components/jyf-parser/jyf-parser";
  469. import history from "@/mixins/history";
  470. import shareScence from "@/libs/spread";
  471. import guaranteeTemplate from '@/components/freightGuarantee';
  472. import discountsGoods from './discountsGoods';
  473. import ClipboardJS from "@/plugin/clipboard/clipboard.js";
  474. import easyLoadimage from '@/components/easy-loadimage/easy-loadimage.vue';
  475. let app = getApp();
  476. export default {
  477. components: {
  478. // #ifndef H5
  479. passwordPopup,
  480. // #endif
  481. productConSwiper,
  482. couponListWindow,
  483. productWindow,
  484. userEvaluation,
  485. shareRedPackets,
  486. home,
  487. guaranteeTemplate,
  488. copyPassword,
  489. discountsGoods,
  490. "jyf-parser": parser,
  491. easyLoadimage,
  492. specs,
  493. },
  494. mixins: [history],
  495. data() {
  496. let that = this;
  497. return {
  498. isNodes: 0, //控制什么时候开始抓取元素节点,只要数值改变就重新抓取
  499. sysHeight: sysHeight, //系统导航条高度
  500. //属性是否打开
  501. coupon: {
  502. 'coupon': false,
  503. list: [],
  504. },
  505. attrTxt: '选择', //属性页面提示
  506. attrValue: '', //已选属性
  507. animated: false, //购物车动画
  508. id: 0, //商品id
  509. replyCount: 0, //总评论数量
  510. reply: [], //评论列表
  511. storeInfo: {
  512. merchant: {}
  513. }, //商品详情
  514. productValue: [], //系统属性
  515. couponList: [], //优惠券
  516. cart_num: 1, //购买数量
  517. isOpen: false, //是否打开属性组件
  518. actionSheetHidden: true,
  519. posterImageStatus: false,
  520. storeImage: '', //海报产品图
  521. PromotionCode: '', //二维码图片
  522. canvasStatus: false, //海报绘图标签
  523. posterImage: '', //海报路径
  524. posterbackgd: '/static/images/posterbackgd.png',
  525. source: '',
  526. sharePacket: {
  527. isState: true, //默认不显示
  528. }, //分销商详细
  529. // uid: 0, //用户uid
  530. circular: false,
  531. autoplay: false,
  532. interval: 3000,
  533. duration: 500,
  534. swiperCur: 0,
  535. clientHeight: "",
  536. systemStore: {}, //门店信息
  537. replyChance: 0,
  538. CartCount: 0,
  539. storeSelfMention: true,
  540. posters: false,
  541. weixinStatus: false,
  542. attr: {
  543. cartAttr: false,
  544. productAttr: [],
  545. productSelect: {}
  546. },
  547. description: {},
  548. navActive: 0,
  549. H5ShareBox: false, //公众号分享图片
  550. activity: [],
  551. retunTop: true, //顶部返回
  552. navH: "",
  553. navList: [],
  554. opacity: 0,
  555. scrollY: 0,
  556. topArr: [],
  557. toView: '',
  558. height: 0,
  559. heightArr: [],
  560. lock: false,
  561. scrollTop: 0,
  562. tagStyle: {
  563. img: 'width:100%;display:block;'
  564. },
  565. // 动画状态
  566. showAnimate: true,
  567. domain: HTTP_REQUEST_URL,
  568. currSpid: '',
  569. codeImg: "",
  570. videoCoverImg: "",
  571. shipping: "",
  572. guarantee: [],
  573. shippingValue: "",
  574. uniqueValue: "",
  575. priceRule: "",
  576. isCopy: false,
  577. copyUrl: '',
  578. comboTotal: 0,
  579. comboList: [],
  580. max_count: 0,
  581. min_count: 0,
  582. pay_limit: 1,
  583. svipData: {},
  584. svipPrice: false,
  585. specsInfo: {
  586. show: false,
  587. params: []
  588. },
  589. recommend: [],
  590. serviceInfo: {},
  591. currentPage: false,
  592. homeTop: 59,
  593. marketPrice: "",
  594. selectNavList: [{
  595. name: '首页',
  596. icon: 'icon-shouye8',
  597. url: '/pages/index/index',
  598. after: 'dialog_after'
  599. },
  600. {
  601. name: '搜索',
  602. icon: 'icon-sousuo6',
  603. url: '/pages/columnGoods/goods_search_con/index',
  604. after: 'dialog_after'
  605. },
  606. {
  607. name: '购物车',
  608. icon: 'icon-gouwuche7',
  609. url: '/pages/order_addcart/order_addcart',
  610. after: 'dialog_after'
  611. },
  612. {
  613. name: '我的收藏',
  614. icon: 'icon-shoucang3',
  615. url: '/pages/users/user_goods_collection/index',
  616. after: 'dialog_after'
  617. },
  618. {
  619. name: '个人中心',
  620. icon: 'icon-gerenzhongxin1',
  621. url: '/pages/user/index'
  622. },
  623. ],
  624. };
  625. },
  626. computed:{
  627. ...configMap(['margin_ico_switch','margin_ico','hide_mer_status','procudt_increase_status','site_name','share_pic'], mapGetters(['isLogin','uid','viewColor'])),
  628. },
  629. onLoad(options) {
  630. let that = this
  631. if (options.spid) {
  632. app.globalData.spid = options.spid;
  633. that.currSpid = options.spid
  634. }
  635. var pages = getCurrentPages();
  636. let curPage = pages[pages.length - 1];
  637. if (pages.length <= 1) {
  638. that.retunTop = false
  639. }
  640. let curParam = curPage.options || curPage.$route.query;
  641. that.source = curParam.source;
  642. that.navH = app.globalData.navHeight+10;
  643. //页面中需要计算的一些值
  644. // #ifdef APP-PLUS
  645. that.homeTop = (that.sysHeight + 8)*2;
  646. // #endif
  647. // #ifdef H5
  648. that.homeTop = 10;
  649. // #endif
  650. that.id = options.id;
  651. uni.getSystemInfo({
  652. success: function(res) {
  653. that.height = res.windowHeight
  654. //res.windowHeight:获取整个窗口高度为px,*2为rpx;98为头部占据的高度;
  655. that.navHeight = res.statusBarHeight * (750 / res.windowWidth) + 91;
  656. },
  657. });
  658. //扫码携带参数处理
  659. // #ifdef MP
  660. if (options.scene) {
  661. let value = this.$util.getUrlParams(decodeURIComponent(options.scene));
  662. if (value.id) options.id = value.id;
  663. //记录推广人uid
  664. if (value.spid) {
  665. app.globalData.spid = value.spid;
  666. that.currSpid = value.spid
  667. }
  668. }
  669. if (!options.id && !options.scene) {
  670. return this.$util.Tips({
  671. title: '缺少参数无法查看商品'
  672. }, {
  673. tab: 3,
  674. url: 1
  675. });
  676. } else {
  677. this.id = options.id
  678. }
  679. //记录推广人uid
  680. if (options.spid) app.globalData.spid = options.spid;
  681. // #endif
  682. shareScence(that.currSpid, that.isLogin)
  683. this.getGoodsDetails();
  684. this.getDiscountsData();
  685. //#ifdef H5
  686. this.isLogin && silenceBindingSpread();
  687. //#endif
  688. if (this.isLogin) {
  689. // this.downloadFilePromotionCode();
  690. this.getHistory()
  691. }
  692. },
  693. onReady() {
  694. this.isNodes++;
  695. this.$nextTick(function() {
  696. // #ifdef MP
  697. const menuButton = uni.getMenuButtonBoundingClientRect();
  698. const query = uni.createSelectorQuery().in(this);
  699. query
  700. .select('#home')
  701. .boundingClientRect(data => {
  702. this.homeTop = menuButton.top * 2 + menuButton.height - data.height;
  703. })
  704. .exec();
  705. // #endif
  706. });
  707. },
  708. onShow() {
  709. let that = this
  710. // that.getConfig();
  711. uni.hideLoading();
  712. },
  713. /**
  714. * 用户点击右上角分享
  715. */
  716. // #ifdef MP
  717. onShareAppMessage: function() {
  718. let that = this;
  719. that.$set(that, 'actionSheetHidden', !that.actionSheetHidden);
  720. return {
  721. title: that.storeInfo.store_name || '',
  722. imageUrl: that.storeInfo.image || '',
  723. path: '/pages/goods_details/index?id=' + that.id + '&spid=' + that.uid,
  724. }
  725. },
  726. onShareTimeline: function() {
  727. let that = this;
  728. that.$set(that, 'actionSheetHidden', !that.actionSheetHidden);
  729. return {
  730. title: that.storeInfo.store_name || '',
  731. query: {
  732. id: that.id,
  733. spid: that.uid
  734. },
  735. imageUrl: that.storeInfo.image || ''
  736. }
  737. },
  738. // #endif
  739. methods: {
  740. call: function(){
  741. let that = this;
  742. if(that.storeInfo.merchant.service_phone){
  743. uni.showModal({
  744. title: '提示',
  745. content: '暂无在线客服,确定拨打客服电话:'+that.storeInfo.merchant.service_phone+'吗?',
  746. success: function(res) {
  747. if (res.confirm) {
  748. uni.makePhoneCall({
  749. // 手机号
  750. phoneNumber: that.storeInfo.merchant.service_phone,
  751. // 成功回调
  752. success: (res) => {},
  753. // 失败回调
  754. fail: (res) => {}
  755. });
  756. }
  757. }
  758. })
  759. }else{
  760. return that.$util.Tips({
  761. title: '暂无可用客服'
  762. })
  763. }
  764. },
  765. getConfig() {
  766. let self = this
  767. // 获取配置
  768. getconfig().then(res => {
  769. }).catch(err => {})
  770. },
  771. /**到货通知*/
  772. arrivalNotice(){
  773. let that = this;
  774. // #ifdef MP
  775. arrivalSubscribe().then((res) => {
  776. that.arrivalNoticeFun();
  777. }).catch(err => {
  778. console.log(err)
  779. });
  780. // #endif
  781. // #ifndef MP
  782. that.arrivalNoticeFun();
  783. // #endif
  784. },
  785. arrivalNoticeFun(){
  786. let that = this;
  787. let uniqueValue = that.uniqueValue;
  788. let typeValue = 0;
  789. // #ifdef MP
  790. typeValue = 3
  791. // #endif
  792. // #ifdef H5
  793. if(this.$wechat.isWeixin() === true){
  794. typeValue = 2
  795. }else{
  796. typeValue = 1
  797. }
  798. // #endif
  799. arrivalNoticeApi({ unique: uniqueValue,type:typeValue,product_id: that.id }).then(res => {
  800. return that.$util.Tips({
  801. title: res.message
  802. })
  803. }).catch(err => {
  804. //状态异常返回上级页面
  805. return that.$util.Tips({
  806. title: err
  807. })
  808. })
  809. },
  810. goProDetail(item) {
  811. uni.redirectTo({
  812. url: '/pages/goods_details/index?id=' + item.product_id
  813. })
  814. },
  815. //下拉导航页面跳转
  816. linkPage(url) {
  817. if (['/pages/index/index', '/pages/order_addcart/order_addcart',
  818. '/pages/user/index', '/pages/plant_grass/index'
  819. ].indexOf(url) > -1) {
  820. uni.switchTab({
  821. url
  822. })
  823. } else {
  824. uni.navigateTo({
  825. url
  826. })
  827. }
  828. this.currentPage = false
  829. },
  830. boxStatus(data) {
  831. this.showAnimate = data
  832. },
  833. closeChange: function() {
  834. this.$set(this.sharePacket, 'isState', true);
  835. },
  836. showNav() {
  837. this.currentPage = !this.currentPage;
  838. },
  839. hideNav() {
  840. this.currentPage = false;
  841. },
  842. /**查看运费说明*/
  843. showShip: function() {
  844. this.$refs.guartemplate.showShippingTel();
  845. },
  846. /**查看服务保障*/
  847. showGuaranee: function() {
  848. this.$refs.guartemplate.showGuaranteeTel();
  849. },
  850. /*查看套餐详情*/
  851. openCombo(){
  852. this.$refs.discounts.showPopup(this.id);
  853. },
  854. seeSpecs() {
  855. this.specsInfo.show = true;
  856. },
  857. mySpecs() {
  858. this.$set(this.specsInfo, 'show', false);
  859. },
  860. /*获取套餐列表数据*/
  861. getDiscountsData(){
  862. getDiscountsLst({product_id: this.id}).then(res => {
  863. this.comboTotal = res.data.count;
  864. res.data.list.forEach((item, index) => {
  865. item.save_price = 0;
  866. item.discountsProduct.forEach((v, i) => {
  867. item.save_price += parseFloat(v.product.ot_price) - parseFloat(v.product.price)
  868. })
  869. })
  870. this.comboList = res.data.list;
  871. }).catch(err => {
  872. });
  873. },
  874. /*获取价格说明*/
  875. getPricrRule() {
  876. priceRuleApi(this.storeInfo.cate_id).then(res => {
  877. this.priceRule = res.data
  878. }).catch(err => {
  879. });
  880. },
  881. goActivity: function(e) {
  882. let item = e;
  883. if (item.type === "1") {
  884. uni.navigateTo({
  885. url: `/pages/activity/goods_seckill_details/index?id=${item.id}&time=${item.time}&status=1`
  886. });
  887. } else if (item.type === "2") {
  888. uni.navigateTo({
  889. url: `/pages/activity/goods_bargain_details/index?id=${item.id}&bargain=${this.uid}`
  890. });
  891. } else {
  892. uni.navigateTo({
  893. url: `/pages/activity/goods_combination_details/index?id=${item.id}`
  894. });
  895. }
  896. },
  897. /**
  898. * 购物车手动填写
  899. *
  900. */
  901. iptCartNum: function(e) {
  902. this.$set(this.attr.productSelect, 'cart_num', e);
  903. },
  904. // 后退
  905. returns: function() {
  906. uni.navigateBack()
  907. },
  908. // 首页
  909. goHome() {
  910. uni.switchTab({
  911. url: '/pages/index/index'
  912. });
  913. },
  914. // 种草详情
  915. goPlant(item){
  916. if(item.is_type == 1){
  917. uni.navigateTo({
  918. url: '/pages/plantGrass/plant_detail/index?id='+item.community_id
  919. });
  920. }else{
  921. uni.navigateTo({
  922. //#ifdef APP
  923. url: '/pages/short_video/appSwiper/index?id='+item.community_id+'&tab=1'
  924. //#endif
  925. //#ifndef APP
  926. url: '/pages/short_video/nvueSwiper/index?id='+item.community_id+'&tab=1'
  927. //#endif
  928. });
  929. }
  930. },
  931. tap: function(index) {
  932. var id = "past" + index;
  933. var index = index;
  934. var that = this;
  935. this.$set(this, 'toView', id);
  936. this.$set(this, 'navActive', index);
  937. this.$set(this, 'lock', true);
  938. this.$set(this, 'scrollTop', index > 0 ? that.topArr[index] - (app.globalData.navHeight / 2) : that.topArr[index]);
  939. },
  940. scroll: function(e) {
  941. var that = this,
  942. scrollY = e.detail.scrollTop;
  943. var opacity = scrollY / 200;
  944. opacity = opacity > 1 ? 1 : opacity;
  945. that.$set(that, 'showAnimate', false);
  946. that.$set(that, 'opacity', opacity);
  947. that.$set(that, 'scrollY', scrollY);
  948. if (that.lock) {
  949. that.$set(that, 'lock', false)
  950. return;
  951. }
  952. for (var i = 0; i < that.topArr.length; i++) {
  953. if (scrollY < that.topArr[i] - (app.globalData.navHeight / 2) + that.heightArr[i]) {
  954. that.$set(that, 'navActive', i)
  955. break
  956. }
  957. }
  958. uni.$emit('scroll');
  959. },
  960. ChangCouponsClose: function() {
  961. this.$set(this.coupon, 'coupon', false)
  962. },
  963. /**
  964. * 购物车数量加和数量减
  965. *
  966. */
  967. ChangeCartNum: function(changeValue) {
  968. //changeValue:是否 加|减
  969. //获取当前变动属性
  970. let productSelect = this.productValue[this.attrValue];
  971. //如果没有属性,赋值给商品默认库存
  972. if (productSelect === undefined && !this.attr.productAttr.length)
  973. productSelect = this.attr.productSelect;
  974. //无属性值即库存为0;不存在加减;
  975. if (productSelect === undefined) return;
  976. let stock = productSelect.stock || 0;
  977. let num = this.attr.productSelect;
  978. if (changeValue) {
  979. num.cart_num++;
  980. if (num.cart_num > stock) {
  981. this.$set(this.attr.productSelect, "cart_num", stock);
  982. this.$set(this, "cart_num", stock);
  983. }
  984. if(num.cart_num > this.storeInfo.once_max_count&&this.storeInfo.once_max_count!=0&&this.storeInfo.pay_limit!=0){
  985. this.$set(this.attr.productSelect, "cart_num", this.storeInfo.once_max_count);
  986. this.$set(this, "cart_num", this.storeInfo.once_max_count);
  987. return this.$util.Tips({
  988. title: "单次购买件数不能超过"+this.storeInfo.once_max_count+"件!"
  989. });
  990. }
  991. } else {
  992. num.cart_num--;
  993. if (num.cart_num < 1) {
  994. this.$set(this.attr.productSelect, "cart_num", 1);
  995. this.$set(this, "cart_num", 1);
  996. }
  997. if(num.cart_num < this.storeInfo.once_min_count&&this.storeInfo.once_min_count!=0){
  998. this.$set(this.attr.productSelect, "cart_num", this.storeInfo.once_min_count);
  999. this.$set(this, "cart_num", this.storeInfo.once_min_count);
  1000. return this.$util.Tips({
  1001. title: "单次购买件数不能少于"+this.storeInfo.once_min_count+"件!"
  1002. });
  1003. }
  1004. }
  1005. },
  1006. attrVal(val) {
  1007. this.$set(this.attr.productAttr[val.indexw], 'index', this.attr.productAttr[val.indexw].attr_values[val.indexn]);
  1008. },
  1009. /**
  1010. * 属性变动赋值
  1011. *
  1012. */
  1013. ChangeAttr: function(res) {
  1014. let productSelect = this.productValue[res];
  1015. if(productSelect)this.$set(this, "uniqueValue", productSelect.unique);
  1016. if (productSelect && productSelect.stock > 0) {
  1017. this.$set(this.attr.productSelect, "image", productSelect.image ? productSelect.image : this.storeInfo.image);
  1018. this.$set(this.attr.productSelect, "price", productSelect.price);
  1019. this.$set(this.attr.productSelect, "svip_price", productSelect.svip_price);
  1020. this.$set(this.attr.productSelect, "stock", productSelect.stock);
  1021. this.$set(this.attr.productSelect, "unique", productSelect.unique);
  1022. this.$set(this, "uniqueValue", productSelect.unique);
  1023. this.$set(this, "marketPrice", productSelect.ot_price);
  1024. if (productSelect.stock == 0) {
  1025. this.$set(this.attr.productSelect, "cart_num", 0);
  1026. } else {
  1027. this.$set(this.attr.productSelect, "cart_num", this.min_count || 1);
  1028. }
  1029. this.$set(this, "attrValue", res);
  1030. this.$set(this, "attrTxt", "选择");
  1031. }
  1032. else {
  1033. this.$set(this.attr.productSelect, "image", productSelect.image);
  1034. this.$set(this.attr.productSelect, "price", productSelect.price);
  1035. this.$set(this.attr.productSelect, "svip_price", productSelect.svip_price);
  1036. this.$set(this.attr.productSelect, "stock", 0);
  1037. this.$set(this.attr.productSelect, "unique", "");
  1038. this.$set(this.attr.productSelect, "cart_num", 0);
  1039. this.$set(this, "marketPrice", productSelect.ot_price);
  1040. this.$set(this, "attrValue", res);
  1041. this.$set(this, "attrTxt", "选择");
  1042. }
  1043. },
  1044. /**
  1045. * 领取完毕移除当前页面领取过的优惠券展示
  1046. */
  1047. ChangCoupons: function(e) {
  1048. let coupon = e;
  1049. let couponList = this.$util.ArrayRemove(this.couponList, 'id', coupon.id);
  1050. this.$set(this, 'couponList', couponList);
  1051. this.getCouponList();
  1052. },
  1053. setClientHeight: function() {
  1054. let that = this;
  1055. let view = uni.createSelectorQuery().in(this).select("#list0");
  1056. view.fields({
  1057. size: true,
  1058. }, data => {
  1059. that.$set(that, 'clientHeight', data.height + 20)
  1060. }).exec();
  1061. },
  1062. /**
  1063. * 获取产品详情
  1064. *
  1065. */
  1066. getGoodsDetails: function() {
  1067. uni.showLoading({
  1068. title: '加载中',
  1069. mask: true
  1070. });
  1071. let that = this;
  1072. getProductDetail(that.id).then(res => {
  1073. uni.hideLoading();
  1074. let storeInfo = res.data;
  1075. if (storeInfo.video_link && storeInfo.slider_image.length > 1) {
  1076. this.videoCoverImg = storeInfo.slider_image[0]
  1077. storeInfo.slider_image.splice(0, 1)
  1078. } else if (storeInfo.video_link && storeInfo.slider_image.length === 1) {
  1079. this.videoCoverImg = storeInfo.slider_image[0]
  1080. }
  1081. that.$set(that, 'storeInfo', storeInfo);
  1082. that.$set(that, 'reply', res.data.topReply ? [res.data.topReply] : []);
  1083. that.$set(that, 'replyCount', res.data.replayData && res.data.replayData.count);
  1084. that.$set(that, 'replyChance', res.data.replayData && res.data.replayData.rate);
  1085. that.$set(that.attr, 'productAttr', res.data.attr);
  1086. that.$set(that, 'productValue', res.data.sku);
  1087. that.$set(that.sharePacket, 'priceName', res.data.priceName);
  1088. that.$set(that.sharePacket, 'max', res.data.max_extension);
  1089. that.$set(that.sharePacket, 'min', res.data.min_extension);
  1090. that.$set(that, 'systemStore', res.data.system_store);
  1091. that.$set(that, 'storeSelfMention', res.data.store_self_mention);
  1092. that.$set(that, 'PromotionCode', storeInfo.code_base);
  1093. that.$set(that, 'activity', res.data.activity ? res.data.activity : []);
  1094. that.$set(that, 'max_count', res.data.once_max_count);
  1095. that.$set(that, 'pay_limit', res.data.pay_limit);
  1096. that.$set(that, 'min_count', res.data.once_min_count);
  1097. that.$set(that, 'svipData', res.data.show_svip_info || null);
  1098. that.$set(that, 'svipPrice', res.data.show_svip_info && res.data.show_svip_info.show_svip_price || false);
  1099. uni.setNavigationBarTitle({
  1100. title: storeInfo.store_name.substring(0, 7) + "..."
  1101. })
  1102. that.$set(that, 'storeImage', that.storeInfo.image);
  1103. getProductParmas(that.id).then((res) => {
  1104. that.$set(that, 'description', res.data.content);
  1105. if (that.description&&that.description.type == 0) {
  1106. that.description.content = that.description.content.replace(
  1107. /<img/gi,
  1108. '<img style="max-width:100%;height:auto;float:left;display:block" '
  1109. );
  1110. that.description.content = that.description.content.replace(
  1111. /<video/gi,
  1112. '<video style="width:100%;height:300px;display:block" '
  1113. );
  1114. }
  1115. that.$set(that, 'guarantee', res.data.guarantee ? res.data.guarantee : []);
  1116. that.$set(that, 'shippingValue', res.data.temp ? res.data.temp.name : '');
  1117. that.$set(that, 'shipping', res.data.temp ? res.data.temp.info : '');
  1118. that.$set(that.specsInfo, 'params', res.data.params);
  1119. that.$set(that.storeInfo, 'merchant', res.data.merchant);
  1120. that.$set(that.storeInfo, 'spu_id', res.data.spu_id);
  1121. that.$set(that.storeInfo, 'community', res.data.community);
  1122. that.$set(that.storeInfo, 'atmosphere_pic', res.data.atmosphere_pic);
  1123. that.$set(that.storeInfo, 'top_pid', res.data.top_pid);
  1124. that.$set(that.storeInfo, 'top_num', res.data.top_num);
  1125. that.$set(that.storeInfo, 'top_name', res.data.top_name);
  1126. var recommendArr = [];
  1127. for(var i=0,len=res.data.merchant.recommend.length;i<len;i+=6){
  1128. recommendArr.push(res.data.merchant.recommend.slice(i,i+6));
  1129. }
  1130. that.recommend = recommendArr
  1131. })
  1132. if (that.isLogin) {
  1133. // that.downloadFilePromotionCode();
  1134. that.getCartCount();
  1135. };
  1136. // #ifdef H5
  1137. that.ShareInfo();
  1138. // #endif
  1139. setTimeout(function() {
  1140. that.infoScroll();
  1141. }, 500);
  1142. that.DefaultSelect();
  1143. that.getPricrRule(that.storeInfo.cate_id)
  1144. that.$nextTick(function() {
  1145. that.getCouponList();
  1146. })
  1147. }).catch(err => {
  1148. //状态异常返回上级页面
  1149. return that.$util.Tips({
  1150. title: err
  1151. }, {
  1152. tab: 3,
  1153. url: 1
  1154. });
  1155. })
  1156. },
  1157. infoScroll: function() {
  1158. var that = this,
  1159. topArr = [],
  1160. heightArr = [];
  1161. for (var i = 0; i < that.navList.length; i++) { //productList
  1162. //获取元素所在位置
  1163. var query = uni.createSelectorQuery().in(this);
  1164. var idView = "#past" + i;
  1165. query.select(idView).boundingClientRect();
  1166. query.exec(function(res) {
  1167. var top = res[0].top;
  1168. var height = res[0].height;
  1169. topArr.push(top);
  1170. heightArr.push(height);
  1171. that.$set(that, 'topArr', topArr);
  1172. that.$set(that, 'heightArr', heightArr);
  1173. });
  1174. };
  1175. },
  1176. /**
  1177. * 默认选中属性
  1178. *
  1179. */
  1180. DefaultSelect: function() {
  1181. let productAttr = this.attr.productAttr;
  1182. let value = [];
  1183. let arr = []
  1184. let unSortArr = []
  1185. for (var key in this.productValue) {
  1186. if (this.productValue[key].stock > 0) {
  1187. value = this.attr.productAttr.length ? key.split(",") : [];
  1188. break;
  1189. }
  1190. }
  1191. for (let i = 0; i < productAttr.length; i++) {
  1192. this.$set(productAttr[i], "index", value[i]);
  1193. }
  1194. //sort();排序函数:数字-英文-汉字;
  1195. let productSelect = this.productValue[value.join(",")];
  1196. if (productSelect && productAttr.length) {
  1197. this.$set(
  1198. this.attr.productSelect,
  1199. "store_name",
  1200. this.storeInfo.store_name
  1201. );
  1202. this.$set(this.attr.productSelect, "image", productSelect.image ? productSelect.image : this.storeInfo.image);
  1203. this.$set(this.attr.productSelect, "price", productSelect.price);
  1204. this.$set(this.attr.productSelect, "svip_price", productSelect.svip_price);
  1205. this.$set(this.attr.productSelect, "stock", productSelect.stock);
  1206. this.$set(this.attr.productSelect, "unique", productSelect.unique);
  1207. this.$set(this, "uniqueValue", productSelect.unique);
  1208. this.$set(this, "marketPrice", productSelect.ot_price);
  1209. this.$set(this, "attrValue", value.join(","));
  1210. this.$set(this, "attrTxt", "选择");
  1211. if (productSelect.stock == 0) {
  1212. this.$set(this.attr.productSelect, "cart_num", 0);
  1213. } else {
  1214. this.$set(this.attr.productSelect, "cart_num", this.min_count || 1);
  1215. }
  1216. } else if (!productSelect && productAttr.length) {
  1217. this.$set(
  1218. this.attr.productSelect,
  1219. "store_name",
  1220. this.storeInfo.store_name
  1221. );
  1222. this.$set(this.attr.productSelect, "image", this.storeInfo.image);
  1223. this.$set(this.attr.productSelect, "price", this.storeInfo.price);
  1224. this.$set(this.attr.productSelect, "svip_price", this.storeInfo.svip_price);
  1225. this.$set(this.attr.productSelect, "stock", 0);
  1226. this.$set(this.attr.productSelect, "unique", "");
  1227. this.$set(this, "uniqueValue", "");
  1228. this.$set(this.attr.productSelect, "cart_num", 0);
  1229. this.$set(this, "marketPrice", this.storeInfo.ot_price);
  1230. this.$set(this, "attrValue", "");
  1231. this.$set(this, "attrTxt", "选择");
  1232. } else if (!productSelect && !productAttr.length) {
  1233. this.$set(
  1234. this.attr.productSelect,
  1235. "store_name",
  1236. this.storeInfo.store_name
  1237. );
  1238. this.$set(this.attr.productSelect, "image", this.storeInfo.image);
  1239. this.$set(this.attr.productSelect, "price", this.storeInfo.price);
  1240. this.$set(this.attr.productSelect, "svip_price", this.storeInfo.svip_price);
  1241. this.$set(this.attr.productSelect, "stock", this.storeInfo.stock);
  1242. this.$set(this.attr.productSelect, "unique", this.storeInfo.unique || "");
  1243. this.$set(this, "uniqueValue", this.storeInfo.unique || "");
  1244. this.$set(this, "marketPrice", this.storeInfo.ot_price);
  1245. this.$set(this.attr.productSelect, "cart_num", 1);
  1246. this.$set(this, "attrValue", "");
  1247. this.$set(this, "attrTxt", "选择");
  1248. } else if (productSelect && !productAttr.length) {
  1249. this.$set(this.attr.productSelect, "store_name", this.storeInfo.store_name);
  1250. this.$set(this.attr.productSelect, "image", productSelect.image);
  1251. this.$set(this.attr.productSelect, "price", productSelect.price);
  1252. this.$set(this.attr.productSelect, "svip_price", productSelect.svip_price);
  1253. this.$set(this.attr.productSelect, "stock", productSelect.stock);
  1254. this.$set(this.attr.productSelect, "unique", productSelect.unique);
  1255. this.$set(this, "uniqueValue", productSelect.unique);
  1256. this.$set(this, "marketPrice", productSelect.ot_price);
  1257. this.$set(this, "attrValue", value.join(","));
  1258. this.$set(this, "attrTxt", "选择");
  1259. if (productSelect.stock == 0) {
  1260. this.$set(this.attr.productSelect, "cart_num", 0);
  1261. } else {
  1262. this.$set(this.attr.productSelect, "cart_num", this.min_count || 1);
  1263. }
  1264. }
  1265. },
  1266. /**
  1267. * 获取优惠券
  1268. *
  1269. */
  1270. getCouponList() {
  1271. let that = this;
  1272. let goodsArr = []
  1273. let couponList = [];
  1274. let activeList = []
  1275. getCoupons({
  1276. ids: that.id
  1277. }).then(res => {
  1278. goodsArr = res.data
  1279. getShopCoupons(that.storeInfo.mer_id).then(({
  1280. data
  1281. }) => {
  1282. couponList = goodsArr.concat(data)
  1283. that.$set(that.coupon, 'list', couponList);
  1284. for (let i = 0; i < couponList.length; i++) {
  1285. if (!couponList[i].issue && activeList.length < 2) {
  1286. activeList.push(couponList[i]);
  1287. }
  1288. }
  1289. that.$set(that, 'couponList', activeList);
  1290. })
  1291. });
  1292. },
  1293. ChangCouponsUseState(index) {
  1294. let that = this;
  1295. that.$set(that.coupon, 'coupon', false);
  1296. },
  1297. /**
  1298. *
  1299. *
  1300. * 收藏商品
  1301. */
  1302. setCollect: function() {
  1303. if (this.isLogin === false) {
  1304. toLogin()
  1305. } else {
  1306. let that = this;
  1307. if (this.storeInfo.isRelation) {
  1308. collectDel({
  1309. type: 0,
  1310. type_id: this.id
  1311. }).then(res => {
  1312. that.$util.Tips({
  1313. title: '已取消收藏'
  1314. });
  1315. that.$set(that.storeInfo, 'isRelation', !that.storeInfo.isRelation);
  1316. }).catch(err=>{
  1317. that.$util.Tips({
  1318. title: err
  1319. });
  1320. })
  1321. } else {
  1322. collectAdd({
  1323. type_id: this.id,
  1324. type: 0
  1325. }).then(res => {
  1326. that.$util.Tips({
  1327. title: '收藏成功'
  1328. });
  1329. that.$set(that.storeInfo, 'isRelation', !that.storeInfo.isRelation);
  1330. }).catch(err=>{
  1331. that.$util.Tips({
  1332. title: err
  1333. });
  1334. })
  1335. }
  1336. }
  1337. },
  1338. /**
  1339. * 打开属性插件
  1340. */
  1341. selecAttr: function() {
  1342. this.$set(this.attr, 'cartAttr', true);
  1343. this.$set(this, 'isOpen', true);
  1344. },
  1345. /**
  1346. * 打开优惠券插件
  1347. */
  1348. couponTap: function() {
  1349. let that = this;
  1350. if (that.isLogin === false) {
  1351. toLogin()
  1352. } else {
  1353. that.$set(that.coupon, 'coupon', true);
  1354. }
  1355. },
  1356. goCustomer: function() {
  1357. let that = this;
  1358. if (that.isLogin === false) {
  1359. toLogin()
  1360. } else {
  1361. uni.navigateTo({
  1362. url: `/pages/chat/customer_list/chat?mer_id=${that.storeInfo.mer_id}&uid=${that.uid}&productId=${that.id}`
  1363. });
  1364. }
  1365. },
  1366. onMyEvent: function() {
  1367. this.$set(this.attr, 'cartAttr', false);
  1368. this.$set(this, 'isOpen', false);
  1369. },
  1370. /**
  1371. * 打开属性加入购物车
  1372. *
  1373. */
  1374. joinCart: function(e) {
  1375. //是否登录
  1376. if (this.isLogin === false) {
  1377. toLogin()
  1378. } else {
  1379. this.goCat();
  1380. }
  1381. },
  1382. /*
  1383. * 加入购物车
  1384. */
  1385. goCat: function(news) {
  1386. let that = this,
  1387. productSelect = that.productValue[this.attrValue];
  1388. //打开属性
  1389. if (that.attrValue) {
  1390. //默认选中了属性,但是没有打开过属性弹窗还是自动打开让用户查看默认选中的属性
  1391. that.attr.cartAttr = !that.isOpen ? true : false;
  1392. // if(!that.isOpen)that.attr.cartAttr = true
  1393. } else {
  1394. if (that.isOpen) that.attr.cartAttr = true;
  1395. else
  1396. that.attr.cartAttr = !that.attr.cartAttr;
  1397. }
  1398. //只有关闭属性弹窗时进行加入购物车
  1399. if (that.attr.cartAttr === true && that.isOpen === false)
  1400. return (that.isOpen = true);
  1401. that.isOpen = that.attr.cartAttr = true;
  1402. //如果有属性,没有选择,提示用户选择
  1403. if (
  1404. that.attr.productAttr.length &&
  1405. that.isOpen === true &&
  1406. productSelect.stock == 0
  1407. )
  1408. return that.$util.Tips({
  1409. title: "产品库存不足,请选择其它"
  1410. });
  1411. if (that.attr.productSelect.cart_num == 0) {
  1412. return that.$util.Tips({
  1413. title: '购买个数不能为0!'
  1414. })
  1415. }
  1416. let q = {
  1417. is_new: news === undefined ? 0 : 1,
  1418. product_id: that.id,
  1419. cart_num: that.attr.productSelect.cart_num,
  1420. product_attr_unique: that.attr.productSelect !== undefined ? that.attr.productSelect.unique : "",
  1421. source: this.source,
  1422. product_type: 0,
  1423. spread_id: this.currSpid
  1424. };
  1425. postCartAdd(q)
  1426. .then(function(res) {
  1427. that.isOpen = that.attr.cartAttr = false;
  1428. let cartId = res.data.cart_id
  1429. let arr = (Cache.get(CART_ID)&&JSON.parse(Cache.get(CART_ID))) || []
  1430. // let arr = []
  1431. arr.push(cartId)
  1432. Cache.set(CART_ID, Array.from([...new Set(arr)]))
  1433. const timestamp = Date.now();
  1434. Cache.set(CART_TIME,timestamp)
  1435. if (news) {
  1436. uni.navigateTo({
  1437. url: '/pages/users/order_confirm/index?cartId=' + cartId
  1438. });
  1439. } else {
  1440. that.$util.Tips({
  1441. title: "添加购物车成功",
  1442. success: () => {
  1443. that.getCartCount(true);
  1444. }
  1445. });
  1446. }
  1447. })
  1448. .catch(res => {
  1449. return that.$util.Tips({
  1450. title: res
  1451. });
  1452. });
  1453. },
  1454. /**
  1455. * 获取购物车数量
  1456. * @param boolean 是否展示购物车动画和重置属性
  1457. */
  1458. getCartCount: function(isAnima) {
  1459. let that = this;
  1460. const isLogin = that.isLogin;
  1461. if (isLogin) {
  1462. getCartCounts().then(res => {
  1463. that.CartCount = res.data[0].count;
  1464. //加入购物车后重置属性
  1465. if (isAnima) {
  1466. that.animated = true;
  1467. setTimeout(function() {
  1468. that.animated = false;
  1469. }, 500);
  1470. }
  1471. });
  1472. }
  1473. },
  1474. /**
  1475. * 立即购买
  1476. */
  1477. goBuy: function(e) {
  1478. if (this.isLogin === false) {
  1479. toLogin()
  1480. } else {
  1481. this.goCat(true);
  1482. }
  1483. },
  1484. /**
  1485. * 分享打开
  1486. *
  1487. */
  1488. listenerActionSheet: function() {
  1489. // #ifdef H5
  1490. if (this.$wechat.isWeixin() === true) {
  1491. this.weixinStatus = true;
  1492. }
  1493. // #endif
  1494. this.posters = true;
  1495. },
  1496. // 分享关闭
  1497. listenerActionClose: function() {
  1498. this.posters = false;
  1499. this.currentPage = false;
  1500. },
  1501. //隐藏海报
  1502. posterImageClose: function() {
  1503. this.posterImageStatus = false
  1504. },
  1505. //替换安全域名
  1506. setDomain: function(url) {
  1507. url = url ? url.toString() : '';
  1508. //本地调试打开,生产请注销
  1509. if (url.indexOf("https://") > -1) return url;
  1510. else return url.replace('http://', 'https://');
  1511. },
  1512. /**
  1513. * 获取产品分销二维码
  1514. * @param function successFn 下载完成回调
  1515. *
  1516. */
  1517. downloadFilePromotionCode: function(successFn) {
  1518. let that = this;
  1519. let type;
  1520. // #ifndef MP
  1521. type = 'wechat'
  1522. // #endif
  1523. // #ifdef MP
  1524. type = 'routine'
  1525. // #endif
  1526. getProductCode(that.id, {
  1527. type: type,
  1528. product_type: 0
  1529. }).then(async res => {
  1530. that.codeImg = res.data.url
  1531. that.goPoster()
  1532. }).catch(err => {
  1533. that.$util.Tips({
  1534. title: err
  1535. });
  1536. that.posters = false;
  1537. that.$set(that, 'PromotionCode', '');
  1538. });
  1539. },
  1540. // 小程序关闭分享弹窗;
  1541. goFriend: function() {
  1542. this.posters = false;
  1543. this.currentPage = false;
  1544. },
  1545. /**
  1546. * 生成海报
  1547. */
  1548. async goPoster() {
  1549. if (this.posterImage) {
  1550. this.posterImageStatus = true
  1551. this.posters = false
  1552. return
  1553. }
  1554. let that = this;
  1555. let arr2
  1556. that.posters = false;
  1557. that.$set(that, 'canvasStatus', true);
  1558. uni.showLoading({
  1559. title: '海报生成中',
  1560. mask: true
  1561. });
  1562. // #ifdef MP || APP-PLUS
  1563. arr2 = [that.posterbackgd, await that.fileStoreImage(that.storeImage), await that.fileStoreImage(
  1564. that.codeImg), await that.fileStoreImage(that.share_pic)];
  1565. // #endif
  1566. // #ifdef H5
  1567. arr2 = [that.posterbackgd, await that.imgToBase(that.storeImage), await that.imgToBase(that.codeImg), await that.imgToBase(that.share_pic)];
  1568. // #endif
  1569. //生成推广海报
  1570. that.$util.goodsPosterCanvas(arr2, that.storeInfo.store_name, that.storeInfo.price, that.site_name, that.storeInfo.ot_price, function(tempFilePath) {
  1571. that.$set(that, 'posterImage', tempFilePath);
  1572. that.$set(that, 'posterImageStatus', true);
  1573. that.$set(that, 'actionSheetHidden', !that.actionSheetHidden);
  1574. that.$set(that, 'canvasStatus', false);
  1575. }, (err) => {
  1576. that.$set(that, 'canvasStatus', false);
  1577. });
  1578. },
  1579. //图片转符合安全域名路径
  1580. fileStoreImage(url) {
  1581. if(url){
  1582. // #ifdef MP || APP-PLUS
  1583. let ishttps = url.split('//')[0] == 'https:'
  1584. if (!ishttps) {
  1585. url = 'https://'+url.split('//')[1]
  1586. }
  1587. // #endif
  1588. return new Promise((resolve, reject) => {
  1589. let that = this;
  1590. uni.downloadFile({
  1591. url: url,
  1592. success: function(res) {
  1593. resolve(res.tempFilePath);
  1594. },
  1595. fail: function(error) {
  1596. console.log(error)
  1597. return that.$util.Tips({
  1598. title: '请检查图片地址是否在合法域名内'
  1599. });
  1600. }
  1601. });
  1602. })
  1603. }
  1604. },
  1605. /*
  1606. * 保存到手机相册
  1607. */
  1608. // #ifdef MP
  1609. savePosterPath: function() {
  1610. let that = this;
  1611. uni.getSetting({
  1612. success(res) {
  1613. if (!res.authSetting['scope.writePhotosAlbum']) {
  1614. uni.authorize({
  1615. scope: 'scope.writePhotosAlbum',
  1616. success() {
  1617. uni.saveImageToPhotosAlbum({
  1618. filePath: that.posterImage,
  1619. success: function(res) {
  1620. that.posterImageClose();
  1621. that.$util.Tips({
  1622. title: '保存成功',
  1623. icon: 'success'
  1624. });
  1625. },
  1626. fail: function(res) {
  1627. that.$util.Tips({
  1628. title: '保存失败'
  1629. });
  1630. }
  1631. })
  1632. }
  1633. })
  1634. } else {
  1635. uni.saveImageToPhotosAlbum({
  1636. filePath: that.posterImage,
  1637. success: function(res) {
  1638. that.posterImageClose();
  1639. that.$util.Tips({
  1640. title: '保存成功',
  1641. icon: 'success'
  1642. });
  1643. },
  1644. fail: function(res) {
  1645. that.$util.Tips({
  1646. title: '保存失败'
  1647. });
  1648. },
  1649. })
  1650. }
  1651. }
  1652. })
  1653. },
  1654. // #endif
  1655. // #ifdef APP-PLUS
  1656. savePosterPath(){
  1657. let that = this
  1658. uni.saveImageToPhotosAlbum({
  1659. filePath: that.posterImage,
  1660. success: function(res) {
  1661. that.posterImageClose();
  1662. that.$util.Tips({
  1663. title: '保存成功',
  1664. icon: 'success'
  1665. });
  1666. },
  1667. fail: function(res) {
  1668. that.$util.Tips({
  1669. title: '保存失败'
  1670. });
  1671. },
  1672. })
  1673. },
  1674. // #endif
  1675. //#ifdef H5
  1676. ShareInfo() {
  1677. let data = this.storeInfo;
  1678. let href = location.href;
  1679. if (this.$wechat.isWeixin()) {
  1680. getUserInfo().then(res => {
  1681. href =
  1682. href.indexOf("?") === -1 ?
  1683. href + "?spid=" + res.data.uid :
  1684. href + "&spid=" + res.data.uid;
  1685. let configAppMessage = {
  1686. desc: data.store_info,
  1687. title: data.store_name,
  1688. link: href,
  1689. imgUrl: data.image
  1690. };
  1691. this.$wechat.wechatEvevt([
  1692. "updateAppMessageShareData",
  1693. "updateTimelineShareData",
  1694. "onMenuShareAppMessage",
  1695. "onMenuShareTimeline"
  1696. ], configAppMessage).then(res => {
  1697. }).catch(err => {
  1698. console.log(err);
  1699. })
  1700. });
  1701. }
  1702. },
  1703. //#endif
  1704. async imgToBase(url) {
  1705. let res = await imgToBase({
  1706. image: url
  1707. })
  1708. return res.data.image
  1709. },
  1710. //复制口令
  1711. copyPwd(){
  1712. let that = this;
  1713. copyPasswordApi({
  1714. id: that.id,
  1715. product_type: 0
  1716. }).then(async res => {
  1717. that.copyUrl = res.data.str;
  1718. that.posters = false
  1719. that.isCopy = true;
  1720. })
  1721. },
  1722. closeCopy(){
  1723. this.isCopy = false
  1724. },
  1725. // APP分享
  1726. appShare(scene){
  1727. let that = this
  1728. uni.showLoading({
  1729. title: '加载中',
  1730. mask: true
  1731. });
  1732. let routes = getCurrentPages(); // 获取当前打开过的页面路由数组
  1733. let curRoute = routes[routes.length - 1].$page.fullPath // 获取当前页面路由,也就是最后一个打开的页面路由
  1734. uni.share({
  1735. provider: "weixin",
  1736. scene: scene,
  1737. type: 0,
  1738. href: `${HTTP_REQUEST_URL}${curRoute}&spid=${that.uid}`,
  1739. title: that.storeInfo.store_name,
  1740. summary: that.storeInfo.store_info,
  1741. imageUrl: that.storeInfo.image,
  1742. success: function(res) {
  1743. uni.showToast({
  1744. title: '分享成功',
  1745. icon: 'success'
  1746. })
  1747. that.posters = false;
  1748. uni.hideLoading();
  1749. },
  1750. fail: function(err) {
  1751. uni.showToast({
  1752. title: '分享失败',
  1753. icon: 'none',
  1754. duration: 2000
  1755. })
  1756. that.posters = false;
  1757. uni.hideLoading();
  1758. }
  1759. });
  1760. }
  1761. }
  1762. }
  1763. </script>
  1764. <style lang="scss" scoped>
  1765. .ml8{
  1766. top:2rpx
  1767. }
  1768. .activity_pin {
  1769. width: auto;
  1770. height: 44rpx;
  1771. line-height: 44rpx;
  1772. background: linear-gradient(90deg, rgba(233, 51, 35, 1) 0%, rgba(250, 101, 20, 1) 100%);
  1773. opacity: 1;
  1774. border-radius: 22rpx;
  1775. padding: 0 15rpx;
  1776. margin-left: 19rpx;
  1777. }
  1778. .activity_miao {
  1779. width: auto;
  1780. height: 44rpx;
  1781. line-height: 44rpx;
  1782. padding: 0 15rpx;
  1783. background: linear-gradient(90deg, rgba(250, 102, 24, 1) 0%, rgba(254, 161, 15, 1) 100%);
  1784. opacity: 1;
  1785. border-radius: 22rpx;
  1786. margin-left: 19rpx;
  1787. }
  1788. .iconfonts {
  1789. color: #fff !important;
  1790. font-size: 28rpx;
  1791. }
  1792. .activity_title {
  1793. font-size: 24rpx;
  1794. color: #fff;
  1795. }
  1796. .activity_kan {
  1797. width: auto;
  1798. height: 44rpx;
  1799. line-height: 44rpx;
  1800. padding: 0 15rpx;
  1801. background: linear-gradient(90deg, rgba(254, 159, 15, 1) 0%, rgba(254, 178, 15, 1) 100%);
  1802. opacity: 1;
  1803. border-radius: 22rpx;
  1804. margin-left: 19rpx;
  1805. }
  1806. .t-color {
  1807. color: var(--view-theme);
  1808. }
  1809. .p-color {
  1810. color: var(--view-priceColor);
  1811. }
  1812. .bt-color {
  1813. background-color: var(--view-theme);
  1814. border: 1px solid var(--view-theme);
  1815. }
  1816. .head-bar {
  1817. background: #fff;
  1818. }
  1819. .generate-posters {
  1820. width: 100%;
  1821. height: 170rpx;
  1822. background-color: #fff;
  1823. position: fixed;
  1824. left: 0;
  1825. bottom: 0;
  1826. z-index: 388;
  1827. transform: translate3d(0, 100%, 0);
  1828. transition: all 0.3s cubic-bezier(0.25, 0.5, 0.5, 0.9);
  1829. border-top: 1px solid #eee;
  1830. }
  1831. .generate-posters.on {
  1832. transform: translate3d(0, 0, 0);
  1833. }
  1834. .generate-posters .item {
  1835. /* #ifdef H5 */
  1836. flex: 50%;
  1837. /* #endif */
  1838. /* #ifndef H5 */
  1839. flex: 33.33%;
  1840. /* #endif */
  1841. text-align: center;
  1842. font-size: 30rpx;
  1843. &.item3{
  1844. flex: 33.33%;
  1845. }
  1846. }
  1847. .generate-posters .item .iconfont {
  1848. font-size: 80rpx;
  1849. color: #5eae72;
  1850. }
  1851. .generate-posters .item .iconfont.icon-haibao {
  1852. color: #5391f1;
  1853. }
  1854. .generate-posters .item .iconfont.icon-fuzhikouling1 {
  1855. color: #FBB324;
  1856. }
  1857. .product-con .footer {
  1858. padding: 0 20rpx 0 40rpx;
  1859. position: fixed;
  1860. left: 0;
  1861. bottom: 0;
  1862. width: 100%;
  1863. box-sizing: border-box;
  1864. height: 100rpx;
  1865. height: calc(100rpx+ constant(safe-area-inset-bottom)); ///兼容 IOS<11.2/
  1866. height: calc(100rpx + env(safe-area-inset-bottom)); ///兼容 IOS>11.2/
  1867. background-color: #fff;
  1868. z-index: 277;
  1869. border-top: 1px solid #f0f0f0;
  1870. &.footpl{
  1871. padding-left: 80rpx;
  1872. }
  1873. }
  1874. .product-con .footer .item {
  1875. font-size: 18rpx;
  1876. color: #666;
  1877. text-align: center;
  1878. }
  1879. .product-con .attribute .atterTxt {
  1880. overflow: hidden;
  1881. white-space: nowrap;
  1882. text-overflow: ellipsis;
  1883. display: inline-block;
  1884. width: 400rpx;
  1885. }
  1886. .product-con .attribute .params{
  1887. margin-right: 20rpx;
  1888. font-size: 28rpx;
  1889. color: #282828;
  1890. &:nth-child(2){
  1891. margin-right: 0;
  1892. }
  1893. }
  1894. .product-con .attribute .atterTxt1{
  1895. color: #282828;
  1896. &.hasAttr{
  1897. &:after{
  1898. content: "";
  1899. display: inline-block;
  1900. position: relative;
  1901. top: -6rpx;
  1902. margin: 0 6rpx;
  1903. width: 5rpx;
  1904. height: 5rpx;
  1905. background-color: #282828;
  1906. border-radius: 100%;
  1907. }
  1908. &:last-child{
  1909. &:after{
  1910. display: none;
  1911. }
  1912. }
  1913. }
  1914. }
  1915. .product-con .wrapper .coupon .activity {
  1916. border: 1px solid var(--view-theme);
  1917. color: var(--view-theme);
  1918. &::before,&::after{
  1919. border: 1px solid var(--view-theme);
  1920. }
  1921. &::before{
  1922. border-left-color: #ffffff;
  1923. }
  1924. &::after{
  1925. border-right-color: #ffffff;
  1926. }
  1927. }
  1928. .product-con .guaranteeAttr{
  1929. display: inline-block;
  1930. width: 560rpx;
  1931. overflow: hidden;white-space: nowrap;text-overflow: ellipsis;
  1932. }
  1933. .product-con .footer .item .iconfont {
  1934. text-align: center;
  1935. font-size: 40rpx;
  1936. }
  1937. .fenxiang_btn{
  1938. .icon-yishoucang2{
  1939. color: var(--view-priceColor)!important;
  1940. }
  1941. }
  1942. .product-con .wrapper .introduce {
  1943. margin: 20rpx 30rpx 0;
  1944. &.atmosphere {
  1945. padding: 20rpx 30rpx;
  1946. margin: 0;
  1947. justify-content: space-between;
  1948. align-items: flex-start;
  1949. .title{
  1950. width: 540rpx;
  1951. }
  1952. }
  1953. .font-bg-red{
  1954. position: relative;
  1955. /* #ifdef H5 */
  1956. top: -2rpx;
  1957. /* #endif */
  1958. /* #ifndef H5 */
  1959. top: -4rpx;
  1960. /* #endif */
  1961. }
  1962. }
  1963. .product-con .footer .item .iconfont.icon-shoucang1 {
  1964. color: var(--view-priceColor);
  1965. }
  1966. .integral_count{
  1967. padding: 0 30rpx;
  1968. }
  1969. .product-con .integral{
  1970. display: inline-block;
  1971. margin: 20rpx 30rpx 0 0;
  1972. color: #FF9000;
  1973. background-color: #FFF4E6;
  1974. height: 40rpx;
  1975. line-height: 40rpx;
  1976. border-radius: 22rpx;
  1977. padding: 0 26rpx;
  1978. font-size: 24rpx;
  1979. font-weight: normal;
  1980. &:last-child{
  1981. margin-left: 0;
  1982. }
  1983. }
  1984. .product-con .footer .item .iconfont.icon-gouwuche1 {
  1985. font-size: 40rpx;
  1986. position: relative;
  1987. }
  1988. .product-con .footer .item .iconfont.icon-gouwuche1 .num {
  1989. color: #fff;
  1990. position: absolute;
  1991. font-size: 18rpx;
  1992. height: 30rpx;
  1993. border-radius: 200rpx;
  1994. padding: 0 8rpx;
  1995. box-sizing: border-box;
  1996. top: -10rpx;
  1997. right: -10rpx;
  1998. background-color: var(--view-theme);
  1999. min-width: 30rpx;
  2000. display: flex;
  2001. align-items: center;
  2002. justify-content: center;
  2003. }
  2004. .product-con .footer .bnt {
  2005. width: 444rpx;
  2006. height: 76rpx;
  2007. }
  2008. .product-con .footer .bnt .bnts {
  2009. width: 222rpx;
  2010. text-align: center;
  2011. line-height: 76rpx;
  2012. color: #fff;
  2013. font-size: 28rpx;
  2014. &.sold_out {
  2015. width: 444rpx;
  2016. border-radius: 50rpx;
  2017. }
  2018. &.virtual_buy {
  2019. width: 444rpx;
  2020. border-radius: 50rpx;
  2021. }
  2022. }
  2023. .product-con .footer .bnt .joinCart {
  2024. border-radius: 50rpx 0 0 50rpx;
  2025. background-image: linear-gradient(90deg, var(--view-bntColor11) 0%, var(--view-bntColor12) 100%);
  2026. &.disabled{
  2027. background: #bbb;
  2028. }
  2029. }
  2030. .product-con .footer .bnt .buy {
  2031. border-radius: 0 50rpx 50rpx 0;
  2032. background-image: linear-gradient(90deg, var(--view-bntColor21) 0%, var(--view-bntColor22) 100%);
  2033. }
  2034. .product-con .footer .bnt .buy[disabled] {
  2035. background: #bbb;
  2036. }
  2037. .product-con .superior {
  2038. background-color: #fff;
  2039. margin-top: 20rpx;
  2040. padding-bottom: 10rpx;
  2041. }
  2042. .product-con .superior .title {
  2043. height: 98rpx;
  2044. }
  2045. .product-con .superior .title image {
  2046. width: 30rpx;
  2047. height: 30rpx;
  2048. }
  2049. .product-con .superior .title .titleTxt {
  2050. margin: 0 20rpx;
  2051. font-size: 30rpx;
  2052. background-image: linear-gradient(to right, #f57a37 0%, #f21b07 100%);
  2053. -webkit-background-clip: text;
  2054. -webkit-text-fill-color: transparent;
  2055. }
  2056. .product-con .superior .slider-banner {
  2057. width: 690rpx;
  2058. margin: 0 auto;
  2059. position: relative;
  2060. }
  2061. .product-con .superior .slider-banner swiper {
  2062. height: 100%;
  2063. width: 100%;
  2064. }
  2065. .product-con .superior .slider-banner swiper-item {
  2066. height: 100%;
  2067. }
  2068. .product-con .superior .slider-banner .list {
  2069. width: 100%;
  2070. }
  2071. .product-con .superior .slider-banner .list .item {
  2072. width: 215rpx;
  2073. margin: 0 22rpx 30rpx 0;
  2074. font-size: 26rpx;
  2075. }
  2076. .product-con .superior .slider-banner .list .item:nth-of-type(3n) {
  2077. margin-right: 0;
  2078. }
  2079. .product-con .superior .slider-banner .list .item .pictrue {
  2080. position: relative;
  2081. width: 100%;
  2082. height: 215rpx;
  2083. }
  2084. .product-con .superior .slider-banner .list .item .pictrue image {
  2085. width: 100%;
  2086. height: 100%;
  2087. border-radius: 6rpx;
  2088. }
  2089. .product-con .superior .slider-banner .list .item .name {
  2090. color: #282828;
  2091. margin-top: 12rpx;
  2092. }
  2093. .product-con .superior .slider-banner .swiper-pagination-bullet {
  2094. background-color: #999;
  2095. }
  2096. .product-con .superior .slider-banner .swiper-pagination-bullet-active {
  2097. background-color: #e93323;
  2098. }
  2099. .svipCon {
  2100. height: 64rpx;
  2101. padding: 0 20rpx;
  2102. margin: 8rpx 20rpx 0;
  2103. background: #FAE3BB;
  2104. font-size: 24rpx;
  2105. color: #B37400;
  2106. border-radius: 10rpx;
  2107. image{
  2108. width: 38rpx;
  2109. height: 38rpx;
  2110. margin-right: 20rpx;
  2111. }
  2112. }
  2113. .svipCon .svipBtn {
  2114. font-size: 22rpx;
  2115. .iconfont{
  2116. font-size: 18rpx;
  2117. margin-left: 4rpx;
  2118. }
  2119. }
  2120. button {
  2121. padding: 0;
  2122. margin: 0;
  2123. line-height: normal;
  2124. background-color: #fff;
  2125. }
  2126. button::after {
  2127. border: 0;
  2128. }
  2129. action-sheet-item {
  2130. padding: 0;
  2131. height: 240rpx;
  2132. align-items: center;
  2133. display: flex;
  2134. }
  2135. .contact {
  2136. font-size: 16px;
  2137. width: 50%;
  2138. background-color: #fff;
  2139. padding: 8rpx 0;
  2140. border-radius: 0;
  2141. margin: 0;
  2142. line-height: 2;
  2143. }
  2144. .contact::after {
  2145. border: none;
  2146. }
  2147. .action-sheet {
  2148. font-size: 17px;
  2149. line-height: 1.8;
  2150. width: 50%;
  2151. position: absolute;
  2152. top: 0;
  2153. right: 0;
  2154. padding: 25rpx 0;
  2155. }
  2156. .canvas {
  2157. z-index: 300;
  2158. width: 750px;
  2159. height: 1190px;
  2160. }
  2161. .poster-pop {
  2162. width: 600rpx;
  2163. height: 897rpx;
  2164. position: fixed;
  2165. left: 50%;
  2166. transform: translateX(-50%);
  2167. z-index: 399;
  2168. top: 50%;
  2169. margin-top: -500rpx;
  2170. }
  2171. .poster-pop image {
  2172. width: 100%;
  2173. height: 100%;
  2174. display: block;
  2175. }
  2176. .poster-pop .close {
  2177. width: 46rpx;
  2178. height: 75rpx;
  2179. position: fixed;
  2180. right: 0;
  2181. top: -73rpx;
  2182. display: block;
  2183. }
  2184. .poster-pop .save-poster {
  2185. background-color: #df2d0a;
  2186. font-size: 22rpx;
  2187. color: #fff;
  2188. text-align: center;
  2189. height: 76rpx;
  2190. line-height: 76rpx;
  2191. width: 100%;
  2192. border-radius: 43rpx;
  2193. margin-top: 20rpx;
  2194. }
  2195. .poster-pop .keep {
  2196. color: #fff;
  2197. text-align: center;
  2198. font-size: 25rpx;
  2199. margin-top: 10rpx;
  2200. }
  2201. .mask {
  2202. position: fixed;
  2203. top: 0;
  2204. left: 0;
  2205. right: 0;
  2206. bottom: 0;
  2207. background-color: rgba(0, 0, 0, 0.6);
  2208. z-index: 9;
  2209. }
  2210. .pictrue_log {
  2211. width: 80upx;
  2212. height: 40upx;
  2213. border-radius: 6upx 0 12upx 0;
  2214. line-height: 40upx;
  2215. font-size: 24upx;
  2216. }
  2217. .pictrue_log_class {
  2218. z-index: 3;
  2219. background: -webkit-gradient(linear, left top, right top, from(rgba(246, 122, 56, 1)), to(rgba(241, 27, 9, 1)));
  2220. background: linear-gradient(90deg, rgba(246, 122, 56, 1) 0%, rgba(241, 27, 9, 1) 100%);
  2221. opacity: 1;
  2222. position: absolute;
  2223. top: 0;
  2224. left: 0;
  2225. color: #fff;
  2226. text-align: center;
  2227. }
  2228. .navbar .header {
  2229. height: 96rpx;
  2230. font-size: 30rpx;
  2231. color: #050505;
  2232. background-color: #fff;
  2233. /* #ifdef MP */
  2234. padding-right: 95rpx;
  2235. /* #endif */
  2236. }
  2237. .navbar .header .item {
  2238. position: relative;
  2239. margin: 0 25rpx;
  2240. }
  2241. .navbar .header .item.on:before {
  2242. position: absolute;
  2243. width: 60rpx;
  2244. height: 5rpx;
  2245. background-repeat: no-repeat;
  2246. content: "";
  2247. background-image: linear-gradient(to right, #ff3366 0%, #ff6533 100%);
  2248. bottom: -10rpx;
  2249. left: 50%;
  2250. margin-left: -28rpx;
  2251. }
  2252. .navbar {
  2253. position: fixed;
  2254. background-color: #fff;
  2255. top: 0;
  2256. left: 0;
  2257. z-index: 99;
  2258. width: 100%;
  2259. }
  2260. .navbar .navbarH {
  2261. position: relative;
  2262. }
  2263. .navbar .navbarH .navbarCon {
  2264. position: absolute;
  2265. bottom: 0;
  2266. height: 100rpx;
  2267. width: 100%;
  2268. }
  2269. .share-box {
  2270. z-index: 1000;
  2271. position: fixed;
  2272. left: 0;
  2273. top: 0;
  2274. width: 100%;
  2275. height: 100%;
  2276. image {
  2277. width: 100%;
  2278. height: 100%;
  2279. }
  2280. }
  2281. .store-wrapper {
  2282. margin-top: 20rpx;
  2283. background-color: #fff;
  2284. .store-hd {
  2285. padding: 30rpx;
  2286. border-bottom: 1px solid #F5F5F5;
  2287. .store-info {
  2288. position: relative;
  2289. display: flex;
  2290. .store-margin{
  2291. width: 24rpx;
  2292. height: 26rpx;
  2293. margin-left: 10rpx;
  2294. }
  2295. .logo {
  2296. width: 86rpx;
  2297. height: 86rpx;
  2298. image {
  2299. width: 86rpx;
  2300. height: 86rpx;
  2301. border-radius: 6rpx;
  2302. }
  2303. }
  2304. .info {
  2305. display: flex;
  2306. flex-direction: column;
  2307. justify-content: center;
  2308. margin-left: 20rpx;
  2309. .name {
  2310. font-size: 28rpx;
  2311. color: #282828;
  2312. font-weight: bold;
  2313. display: flex;
  2314. align-items: center;
  2315. }
  2316. .txt {
  2317. margin-top: 8rpx;
  2318. color: #666666;
  2319. font-size: 22rpx;
  2320. }
  2321. }
  2322. .link {
  2323. position: absolute;
  2324. right: 0;
  2325. top: 50%;
  2326. transform: translateY(-50%);
  2327. display: flex;
  2328. align-items: center;
  2329. justify-content: center;
  2330. width: 114rpx;
  2331. height: 50rpx;
  2332. background-image: linear-gradient(-90deg, var(--view-bntColor21) 0%, var(--view-bntColor22) 100%);
  2333. border-radius: 25rpx;
  2334. color: #fff;
  2335. }
  2336. }
  2337. .score-wrapper {
  2338. display: flex;
  2339. justify-content: space-between;
  2340. margin-top: 30rpx;
  2341. .item {
  2342. color: #948D8C;
  2343. font-size: 26rpx;
  2344. text {
  2345. margin-left: 10rpx;
  2346. color: var(--view-priceColor);
  2347. }
  2348. }
  2349. }
  2350. }
  2351. .con-box {
  2352. padding: 20rpx 30rpx 0;
  2353. .title {
  2354. font-size: 28rpx;
  2355. color: #282828;
  2356. }
  2357. .moer-btn{
  2358. font-size: 28rpx;
  2359. color: #999999;
  2360. }
  2361. .img-box {
  2362. .img-item {
  2363. width: 220rpx;
  2364. margin: 30rpx 15rpx 0 0;
  2365. display: inline-block;
  2366. &:nth-child(3n){
  2367. margin-right: 0;
  2368. }
  2369. /deep/image,/deep/uni-image,/deep/.easy-loadimage {
  2370. width: 218rpx;
  2371. height: 220rpx;
  2372. border-radius: 16rpx;
  2373. display: inline-block;
  2374. }
  2375. .txt {
  2376. .title {
  2377. font-size: 28rpx;
  2378. color: #282828;
  2379. margin-top: 15rpx;
  2380. }
  2381. .price {
  2382. color: var(--view-priceColor);
  2383. font-size: 28rpx;
  2384. text {
  2385. font-size: 20rpx;
  2386. }
  2387. }
  2388. }
  2389. }
  2390. }
  2391. /deep/.uni-swiper-dot{
  2392. width: 8rpx;
  2393. height: 4rpx;
  2394. background: rgba(0,0,0,.15);
  2395. }
  2396. /deep/.uni-swiper-dot-active{
  2397. width: 16rpx;
  2398. background: var(--view-theme);
  2399. }
  2400. .page_swiper,swiper {
  2401. height: 760rpx;
  2402. }
  2403. }
  2404. }
  2405. .sys-head {
  2406. background: transparent;
  2407. }
  2408. .swiper-item,/deep/uni-swiper-wrapper,/deep/uni-swiper{
  2409. height: 740rpx!important;
  2410. }
  2411. .head-wrapper {
  2412. z-index: 999;
  2413. display: flex;
  2414. align-items: center;
  2415. position: fixed;
  2416. left: 30rpx;
  2417. top: 0;
  2418. }
  2419. .head-menu {
  2420. display: flex;
  2421. align-items: center;
  2422. height: 58rpx;
  2423. width: 158rpx;
  2424. background: rgba(255,255,255,0.302);
  2425. border: 2rpx solid rgba(0,0,0,0.0588);
  2426. border-radius: 29rpx;
  2427. .iconfont {
  2428. flex: 1;
  2429. text-align: center;
  2430. color: #000000;
  2431. box-sizing: border-box;
  2432. &.icon-fanhui2 {
  2433. border-right: 1px solid rgba(0,0,0,0.2);;
  2434. }
  2435. }
  2436. }
  2437. </style>