details.wxml 13 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261
  1. <!--pages/details/details.wxml-->
  2. <import src="../../wxParse/wxParse.wxml" />
  3. <import src="../components/template/loadAnimation/loadAnimation.wxml" />
  4. <template is="detailLoad" wx:if="{{!show}}" />
  5. <view>
  6. <image wx:for="{{imgUrls}}" wx:for-index="idx" wx:key="idx" class="imageHeight" src="{{item}}" bindload="swiperImgLoad"></image>
  7. </view>
  8. <view class="bacfff" wx:if="{{show}}">
  9. <view class="pos_rel" >
  10. <swiper indicator-dots="{{indicatorDots}}" autoplay="{{autoplay}}" interval="{{interval}}" duration="{{duration}}" indicator-color="#E8E8E8"
  11. circular="true" indicator-active-color="##2B2B2B" style="height:750rpx">
  12. <block wx:for="{{imgUrls}}" wx:for-index="idx" wx:key="idx" >
  13. <swiper-item>
  14. <image src="{{item}}" class="slide-image" mode="widthFix" style="width: 100%;" />
  15. </swiper-item>
  16. </block>
  17. </swiper>
  18. </view>
  19. <view class="place-bacd9"></view>
  20. <!-- <view bindtap="toWebView">查看详情</view> -->
  21. <view class="promotion_header align_center" wx:if="{{getOneSummary['act_type'] == 2}}">
  22. <view class="promotion_single">限时特价</view>
  23. <view>还剩
  24. <text class="col333 ft_bold">{{promotionDays}}天</text>恢复
  25. <text class="col333 ft_bold">¥{{getOneSummary.goods_price}}</text>,不可同享其他优惠</view>
  26. </view>
  27. <view class="n_goods_content">
  28. <view class="n_price_content align_center">
  29. <text class="f40 col2B2B2B ft_bold" wx:if="{{getOneSummary['act_type'] == 0}}">¥{{getOneSummary.bonus_price}}</text>
  30. <text class="f40 col2B2B2B ft_bold" wx:if="{{getOneSummary['act_type'] == 2}}">¥{{getOneSummary['goods_promotion_price']}}</text>
  31. <text class="f24 col999 ml10 line-through">天猫价:¥{{getOneSummary.goods_price}}</text>
  32. </view>
  33. <view class="f24 col666 l_height34 mt4">库存:{{getOneSummary.goods_storage}}件</view>
  34. <view class="n_goods_title">
  35. <view class="brand_auth" wx:if="{{getOneSummary.brand_author_desc}}">{{getOneSummary.brand_author_desc}}</view>
  36. <text decode="{{true}}">{{getOneSummary.goods_mobile_name}}&nbsp;&nbsp;{{getOneSummary.goods_jingle}}</text>
  37. </view>
  38. </view>
  39. <view class="place-bacd9"></view>
  40. <view class="ensure_desc" bindtap='isExplain_flag' data-flag="true">
  41. <view class="stamps_list">
  42. <view class="n_stamps_item" wx:if="{{getOneSummary.brand_country_logo}}">
  43. <image class="stamp_pic" src="{{getOneSummary.brand_country_logo}}"></image>
  44. {{getOneSummary.brand_country}}品牌
  45. </view>
  46. <view class="n_stamps_item">
  47. <image class="stamp_pic" src="../../image/lrlz.png"></image>
  48. 丽妆自营
  49. </view>
  50. <view class="n_stamps_item">
  51. <image class="stamp_pic zg" src="../../image/zg.png"></image>
  52. 线上专柜
  53. </view>
  54. </view>
  55. <view class="ensure_desc_text" wx:if="{{datas.common_info.brand_tip}}">{{datas.common_info.brand_tip}} </view>
  56. <view class="see_ensure_wrap">
  57. <image class="see_ensure_desc" src="../../image/back.png"></image>
  58. </view>
  59. </view>
  60. <block wx:if="{{bundleList}}">
  61. <block wx:for="{{bundleList}}" wx:key="index" wx:for-index="index">
  62. <view class="place-bac247"></view>
  63. <view class="comments_box">
  64. <view class="comments_header">-套装推荐-</view>
  65. <view class="comments_basic_info ">
  66. <view class="f30 col333 ft_bold">{{item['bundling']['bl_name']}}</view>
  67. <view class="transform_bundleList_wrapper align_center" catchtap="toggleBundle" data-index="{{index}}">
  68. <image class="transform_bundleList {{ bundleIndex == index ? 'bundle_active' : ''}}" src="../../image/back.png"></image>
  69. </view>
  70. </view>
  71. <view class="{{bundleIndex == index ? 'bundle_list_hide' : ''}}">
  72. <view class="align_center mb20 mt20 ">
  73. <scroll-view class="scroll-view_H" scroll-x="true" style="width: 100%">
  74. <block wx:for="{{item['bundlesSumary']}}" wx:key="bundleIndex" wx:for-item="bundle" wx:for-index="bundleIndex">
  75. <view class="scroll-view-item_H bundle_scroll_view" catchtap="bundleDetail" data-id="{{bundle['goods_id']}}">
  76. <image class="bundle_img" src="{{bundle['goods_image_url']}}"></image>
  77. <view class="bundle_desc">{{bundle['goods_mobile_name']}}</view>
  78. </view>
  79. <view class="scroll-view-item_H scroll_place" wx:if="{{bundleIndex < item['bundlesSumary'].length - 1}}">+</view>
  80. </block>
  81. </scroll-view>
  82. </view>
  83. <view class="f30 text_center col666 mb20">套装总价:
  84. <text class="ft_bold col333">¥{{item['bundling']['bl_price']}}</text>
  85. </view>
  86. </view>
  87. <!-- 展开后的样式 -->
  88. <view class="{{bundleIndex == index ? '' : 'bundle_list_hide'}}">
  89. <block wx:for="{{item['bundlesSumary']}}" wx:key="bundleIndex" wx:for-item="bundle" wx:for-index="bundleIndex">
  90. <view class="order_goods_content vux-1px-b" style="padding-left: 0;" catchtap="bundleDetail" data-id="{{bundle['goods_id']}}">
  91. <image class="bundle_img" src="{{bundle['goods_image_url']}}"></image>
  92. <view class="order_content_middle default_place_flex over_hidden">
  93. <view class="l_height42 ft_bold one_line_hidden">{{bundle['goods_mobile_name']}}</view>
  94. <view>
  95. <text class="f30 col333 ft_bold mr10">
  96. <text class="f24 mr6">¥</text>{{bundle['bl_goods_price']}}</text>
  97. <text decode="{{true}}" class="col999 line-through f24">天猫价{{bundle['goods_price']}}</text>
  98. </view>
  99. </view>
  100. <image class="see_ensure_desc" style="right: 0;" src="../../image/back.png"></image>
  101. </view>
  102. </block>
  103. <view class="handle_bar align_center mt20 mb20">
  104. <view>
  105. <view class="f24 col666">套装价格:
  106. <text class="ft_bold f28 ml10 col333">¥{{item['bundling']['bl_price']}}</text>
  107. </view>
  108. <view class="f24 col666">单价直降:
  109. <text class="f28 ml10 col333">¥{{item['bundling']['reduce_price']}}</text>
  110. </view>
  111. </view>
  112. <view class="add_bundle_cart" catchtap="addBundleCart" data-blid="{{item['bundling']['bl_id']}}">加入购物车</view>
  113. </view>
  114. </view>
  115. </view>
  116. </block>
  117. </block>
  118. <block wx:if="{{datas.comment}}">
  119. <view class="place-bac247"></view>
  120. <view class="comments_box">
  121. <view class="comments_header">
  122. -商品评价-
  123. <view class="all_comments" catchtap="allComments">
  124. 查看全部
  125. <image class="all_comments_icon" src="../../image/back.png"></image>
  126. </view>
  127. </view>
  128. <view class="comments_basic_info">
  129. <view class="f30 col333">商品评论
  130. <text class="ft_bold ml8">({{datas.common_info.comments}})</text>
  131. </view>
  132. <view class="align_center">
  133. <text class="f24 col333 mr10">{{datas.common_info.comments_rate}}</text>
  134. <block wx:for="{{starSrcs}}" wx:for-index="idx" wx:key="idx" >
  135. <image class="star" src="{{item}}"></image>
  136. </block>
  137. </view>
  138. </view>
  139. <block wx:for="{{comments}}" wx:key="index" wx:for-index="index">
  140. <view class="comments_item">
  141. <view>
  142. <view class="align_center member_avatar">
  143. <image src="{{item.member_avatar}}"></image>
  144. <view class="f28 col333 ml20">{{item.nickname}}</view>
  145. </view>
  146. </view>
  147. <view class="f24 col333 l_height34 mt20">{{item.content}}</view>
  148. <view class="f24 col333 l_height34 mt20">规格:{{item.goods_spec}}</view>
  149. <view class="f24 col999 l_height34 mt10" wx:if="{{item['transform_addtime']}}">{{item['transform_addtime']}}</view>
  150. <view wx:if="{{item.images.length}}">
  151. <view class="content_img" bindtap='showCarousel' data-images="{{item.images}}" data-current="{{imgIndex}}" wx:for-item="imgItem" wx:for="{{item.images}}" wx:for-index="imgIndex" wx:key="imgIndex">
  152. <view class="align_center" style="width: 100%;height: 100%;">
  153. <image mode="widthFix" class="content_src_img" src="{{imgItem}}"></image>
  154. </view>
  155. </view>
  156. </view>
  157. <view class="content" wx:if="{{item.explain}}">掌柜回复:{{item.explain}}</view>
  158. </view>
  159. <view class="place-bacd9" wx:if="{{index < comments.length - 1}}"></view>
  160. </block>
  161. </view>
  162. </block>
  163. <view class="place-bac247"></view>
  164. <view class="comments_box view_img">
  165. <view class="comments_header mb20">-图文详情-</view>
  166. <template is="wxParse" data="{{wxParseData:article.nodes}}" />
  167. </view>
  168. <view class="place_details_tabbar"></view>
  169. <view class="details_tabbar">
  170. <navigator class="details_tabbar_item right_line" url="/pages/index/index" open-type="switchTab">
  171. <view class="tabbar_icon_wrap flex_center">
  172. <image class="home_icon" src="../../image/home-icon.png"></image>
  173. </view>
  174. <view class="details_tabbar_label">首页</view>
  175. </navigator>
  176. <navigator class="details_tabbar_item right_line" url="/pages/shopCart/shopCart" open-type="switchTab">
  177. <view class="tabbar_icon_wrap flex_center">
  178. <image class="shopcart_icon" src="../../image/shopcart-icon.png"></image>
  179. </view>
  180. <view class="details_tabbar_label">购物车</view>
  181. </navigator>
  182. <view class="details_tabbar_item" session-from="weapp">
  183. <contact-button session-from="weapp" style="opacity:0;position: absolute;left: 0;right:0;top: 0;bottom: 0;z-index:2;"></contact-button>
  184. <view class="tabbar_icon_wrap flex_center">
  185. <image class="shopcart_icon" src="../../image/details_customer.png"></image>
  186. </view>
  187. <view class="details_tabbar_label">客服</view>
  188. </view>
  189. <view class="details_tabbar_simple" bindtap='animation_flag' data-flag="true" data-cartorbuy="isCart">加入购物车</view>
  190. <view class="details_tabbar_simple buy" bindtap='animation_flag' data-flag="true" data-cartorbuy="isBuy">立即购买</view>
  191. </view>
  192. <view class="animation_popup {{animation_flag ? 'show_popup' : ''}}" bindtap='animation_flag' data-flag="false"></view>
  193. <view class="simple_shopcart {{animation_flag ? 'show_animation' : ''}}">
  194. <view class="simple_goods_info pab30 vux-1px-b">
  195. <view class="flexbox_item">
  196. <image class="goods_small_img" src="{{getOneSummary.goods_image_url}}"></image>
  197. </view>
  198. <view class="flexbox_item" style="margin-left: -220rpx;">
  199. <view class="simple_goods_price">
  200. <text decode="{{true}}" wx:if="{{getOneSummary['act_type'] == 0}}">¥{{getOneSummary.bonus_price}}&nbsp;&nbsp;</text>
  201. <text decode="{{true}}" wx:if="{{getOneSummary['act_type'] == 2}}">¥{{getOneSummary['goods_promotion_price']}}&nbsp;&nbsp;</text>
  202. <text class="goods_original_price line-through">天猫价{{getOneSummary.goods_price}}</text>
  203. </view>
  204. <view class="f24">库存{{getOneSummary.goods_storage}}件</view>
  205. <view class="f26 mt8">已选择:"{{datas.common_info.skus[sec_index]['spv_name']}}"</view>
  206. <block wx:if="{{getgift}}">
  207. <navigator url="/pages/details/details?goods_id={{item.gifts.gift_goods_id}}" wx:for="{{getgift}}" wx:index="giftindex" wx:key="giftindex">
  208. <view class="gifts_wrap one_line_hidden">
  209. <text class="gift_tag">赠品</text>
  210. <text class="gift_underline ml8">{{item.sum.goods_mobile_name}}</text>
  211. </view>
  212. </navigator>
  213. </block>
  214. </view>
  215. </view>
  216. <view class="simple_goods_spec vux-1px-b">
  217. <view class="f24">选择{{datas.common_info.spec_name}}</view>
  218. <view class="simple_sec_content">
  219. <view class="sec_content_btn {{sec_index==idx?'sec_active':''}}" wx:for="{{datas.common_info.skus}}" wx:for-index="idx" wx:key="idx"
  220. bindtap='secSku' data-secindex="{{idx}}" data-goodsid="{{item.goods_id}}">{{item.spv_name}}</view>
  221. </view>
  222. </view>
  223. <view class="simple_goods_info">
  224. <view class="flexbox_item pal30 f24">数量</view>
  225. <view class="flexbox_item">
  226. <view class="simple_goods_compute" bindtap="goodsNumHandle" data-type="minus">-</view>
  227. <view class="simple_goods_result">{{goodsNumber}}</view>
  228. <view class="simple_goods_compute" bindtap="goodsNumHandle" data-type="add">+</view>
  229. </view>
  230. </view>
  231. <view class="close_btn" bindtap='animation_flag' data-flag="false"></view>
  232. <view class="simple_goods_buy" bindtap="checkSubmit">确定</view>
  233. </view>
  234. <!-- 评论图片弹窗 -->
  235. <commentsCarousel wx:if="{{show_carousel}}" bind:hideCarousel="hideCarousel" current="{{current}}" carouselImgs="{{carouselImgs}}">
  236. </commentsCarousel>
  237. <!-- 商品说明弹窗 -->
  238. <view class="animation_popup {{isExplain ? 'show_popup' : ''}}" bindtap='isExplain_flag' data-flag="false"></view>
  239. <view class="simple_explain {{isExplain ? 'show_animation' : ''}}">
  240. <!-- view -->
  241. <view class="close_explain" bindtap='isExplain_flag' data-flag="false"></view>
  242. <image src="../../image/goods_explain.png" style="width: 100%" mode="widthFix"></image>
  243. </view>
  244. </view>