index.wxml 11 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245
  1. <import src="../../wxParse/wxParse.wxml"></import>
  2. <scroll-view bindscroll="scroll" scroll-top="{{scrollTop}}" scroll-y="true" style="position:absolute; top:0; left:0; right:0; bottom:0;">
  3. <view class="container" wx:if="{{detail.goods_id}}">
  4. <view class="swiper">
  5. <swiper autoplay="{{autoplay}}" bindchange="setCurrent" class="banner-box swiper-box" duration="{{duration}}" indicator-dots="{{indicatorDots}}" interval="{{interval}}" circular="{{true}}">
  6. <swiper-item wx:for="{{detail.image}}" wx:key="this" catchtap="onPreviewImages" data-index="{{ index }}">
  7. <image class="slide-image" mode="aspectFill" src="{{item.file_path}}"></image>
  8. </swiper-item>
  9. </swiper>
  10. <view class="banner-num">
  11. <text>{{ currentIndex }}</text>
  12. <text>/{{ detail.image.length }}</text>
  13. </view>
  14. </view>
  15. <view class="cont-box b-f">
  16. <view class="dis-flex flex-y-center">
  17. <view class="left flex-box dis-flex flex-dir-column">
  18. <!-- 商品名称 -->
  19. <view class="goods-title">
  20. <text class="title f-30 twolist-hidden">{{detail.goods_name}}</text>
  21. </view>
  22. <!-- 商品卖点 -->
  23. <view class="goods-selling-point">
  24. <text class="f-24">{{ detail.selling_point }}</text>
  25. </view>
  26. <view class="money-box dis-flex flex-y-center">
  27. <!-- 商品价 -->
  28. <view class="goods-price">
  29. <text class="col-m f-26">¥</text>
  30. <text class="goods-price_num col-m f-40">{{ goods_price }}</text>
  31. </view>
  32. <!-- 划线价 -->
  33. <view class="line-price" wx:if="{{line_price > 0}}">
  34. <text>¥{{ line_price }}</text>
  35. </view>
  36. <!-- 会员价标签 -->
  37. <view wx:if="{{ detail.is_user_grade }}" class="tag-grade-price">
  38. <text>会员折扣价</text>
  39. </view>
  40. </view>
  41. </view>
  42. <view class="right goods__share">
  43. <form bindsubmit="onClickShare" report-submit="true">
  44. <button formType="submit" class="share-btn dis-flex flex-dir-column">
  45. <text class="share__icon iconfont icon-fenxiang"></text>
  46. <text class="f-24">分享</text>
  47. </button>
  48. </form>
  49. </view>
  50. </view>
  51. <view class="goods-sales-box f-28 dis-flex col-8">
  52. <text class="flex-box num">销量:{{detail.goods_sales}}</text>
  53. </view>
  54. </view>
  55. <!-- 选择商品规格 -->
  56. <form wx:if="{{ goodsMultiSpec.spec_attr }}" bindsubmit="onToggleTrade" report-submit>
  57. <button class="btn-normal" formType="submit">
  58. <view class="sku-selector cont-box b-f m-top20 dis-flex flex-y-center">
  59. <view class="flex-box f-28">
  60. <text class="col-9">选择:</text>
  61. <text wx:for="{{ goodsMultiSpec.spec_attr }}" wx:key="this">{{ item.group_name }} </text>
  62. </view>
  63. <view class="f-26 col-9 t-r">
  64. <text class="iconfont icon-xiangyoujiantou"></text>
  65. </view>
  66. </view>
  67. </button>
  68. </form>
  69. <!-- 确认购买弹窗 -->
  70. <zan-popup show="{{ showBottomPopup }}" type="bottom" bindclose="onToggleTrade">
  71. <view class="popup__trade">
  72. <!-- 关闭按钮 -->
  73. <view class="trade-close dis-flex flex-x-center flex-y-center" catchtap="onToggleTrade">
  74. <text class="iconfont icon-close f-26"></text>
  75. </view>
  76. <!-- 主体信息 -->
  77. <view class="trade-main">
  78. <view class="goods-info dis-flex">
  79. <!-- 图片名称 -->
  80. <view class="goods-image" catchtap="onPreviewSkuImage">
  81. <image src="{{ skuCoverImage }}"></image>
  82. </view>
  83. <view class="right flex-box">
  84. <view class="money-box dis-flex flex-y-end">
  85. <!-- 商品价 -->
  86. <view class="goods-price">
  87. <text class="col-m f-26">¥</text>
  88. <text class="goods-price_num col-m f-40">{{ goods_price }}</text>
  89. </view>
  90. <!-- 划线价 -->
  91. <view class="line-price" wx:if="{{line_price > 0}}">
  92. <text>¥{{ line_price }}</text>
  93. </view>
  94. </view>
  95. <view class="goods-stock dis-flex">
  96. <text class="flex-box f-26 col-7">库存:{{stock_num}}</text>
  97. </view>
  98. </view>
  99. </view>
  100. <!-- 规格列表 -->
  101. <view class="goods-attr">
  102. <!-- 滚动容器 -->
  103. <scroll-view class="goods-attr--scroll" scroll-y="{{ true }}">
  104. <view class="group-item" wx:for="{{ goodsMultiSpec.spec_attr }}" wx:for-item="attr" wx:for-index="attr_idx" wx:key="this">
  105. <view class="tips-text" data-id="{{ attr.group_id }}">{{ attr.group_name }}</view>
  106. <view class="spec-item {{ item.checked ? 'cur' : '' }}" wx:for="{{ attr.spec_items }}" wx:for-index="item_idx" wx:key="this" data-attr-idx="{{ attr_idx }}" data-item-idx="{{ item_idx }}" catchtap="onSwitchSpec">
  107. {{ item.spec_value }}
  108. </view>
  109. </view>
  110. </scroll-view>
  111. </view>
  112. <!-- 购买数量 -->
  113. <view class="buy_number">
  114. <view class="buyNumber f-26">
  115. <text>购买数量</text>
  116. </view>
  117. <view class="select-number">
  118. <form bindsubmit="onDecGoodsNumber" report-submit="true">
  119. <button formType="submit" class="default {{ goods_num > 1 ? '' : 'disabled' }}" type="default">-</button>
  120. </form>
  121. <input bindinput="onInputGoodsNum" type="number" value="{{ goods_num }}"></input>
  122. <form bindsubmit="onIncGoodsNumber" report-submit="true">
  123. <button formType="submit" class="default" type="default">+</button>
  124. </form>
  125. </view>
  126. </view>
  127. </view>
  128. <!-- 底部操作栏 -->
  129. <view class="footer-fixed f-30">
  130. <block wx:if="{{stock_num > 0}}">
  131. <view class="order-number" catchtap="onConfirmSubmit" data-type="addCart">加入购物车</view>
  132. <view class="order-bt" catchtap="onConfirmSubmit" data-type="buyNow"> 立即购买</view>
  133. </block>
  134. <view class="default-btn" wx:else>暂无现货</view>
  135. </view>
  136. </view>
  137. </zan-popup>
  138. <!-- 商品评价 -->
  139. <view class="goods-comment" wx:if="{{ detail.comment_data.length }}">
  140. <view class="cont-box b-f goods-property-box m-top20">
  141. <text class="col-3 f-30">评价 ({{ detail.comment_data_count }}条)</text>
  142. <text catchtap="onTargetToComment" class="comment-num">查看更多</text>
  143. <view class="goods-property-jianTou">
  144. <text class="iconfont icon-xiangyoujiantou user-orderJtou" style="margin-top:0;"></text>
  145. </view>
  146. </view>
  147. <view class="goods-comment-box b-f" wx:for="{{ detail.comment_data }}" wx:key="this">
  148. <view class="cont-box goods-comment-box b-t b-f b-b">
  149. <view class="dis-flex">
  150. <view class="user">
  151. <text class="user_name f-26">{{ item.user.nickName }}</text>
  152. </view>
  153. <view class="com_xing">
  154. <text class="iconfont icon-shoucang active"></text>
  155. <block wx:if="{{ item.score < 30 }}">
  156. <text class="iconfont icon-shoucang active"></text>
  157. <text class="iconfont icon-shoucang active"></text>
  158. </block>
  159. <block wx:if="{{ item.score < 20 }}">
  160. <text class="iconfont icon-shoucang active"></text>
  161. <text class="iconfont icon-shoucang active"></text>
  162. </block>
  163. </view>
  164. </view>
  165. <view class="goods-comment-cont m-top20">
  166. <text class="f-26 twolist-hidden">{{ item.content }}</text>
  167. </view>
  168. <view class="f-22 col-9 m-top10">{{ item.create_time }}</view>
  169. </view>
  170. </view>
  171. </view>
  172. <!-- 商品描述 -->
  173. <view class="p-bottom">
  174. <view class="top-nav m-top20 b-f b-b">
  175. <view class="top-nav-bar">商品描述</view>
  176. </view>
  177. <view class="order" hidden="{{hiddenOrder}}">
  178. <view wx:if="{{detail.content!=''}}">
  179. <view class="b-f goods-detail-box">
  180. <!-- <view class="goods-cont-li"> -->
  181. <template is="wxParse" data="{{wxParseData:content.nodes}}"></template>
  182. <!-- </view> -->
  183. </view>
  184. </view>
  185. <view wx:else>
  186. <view class="yoshop-notcont">
  187. <text class="iconfont icon-wushuju"></text>
  188. <text class="cont">亲,此处暂无详情数据</text>
  189. </view>
  190. </view>
  191. </view>
  192. </view>
  193. <!-- 底部操作栏 -->
  194. <view class="footer-fixed f-30">
  195. <!-- 在线客服 -->
  196. <view class="goods-fixed-icon dis-flex flex-x-center flex-y-center">
  197. <button open-type="contact" sessionFrom="weapp" size="27" style="opacity: 0;position:absolute;top:0px;left:0px;display:block;width:100%;height:100%;" type="default-light"></button>
  198. <text class="iconfont icon-kefu "></text>
  199. </view>
  200. <!-- 购物车按钮 -->
  201. <view catchtap="onTriggerCart" class="goods-fixed-icon">
  202. <image class="flow-img" src="../../images/flow.png"></image>
  203. <view class="flow_num" wx:if="{{cart_total_num > 0}}">
  204. <text class="">{{cart_total_num}}</text>
  205. </view>
  206. </view>
  207. <view class="order-number" catchtap="onToggleTrade">加入购物车</view>
  208. <view class="order-bt" catchtap="onToggleTrade">立即购买</view>
  209. </view>
  210. </view>
  211. </scroll-view>
  212. <!-- 返回顶部 -->
  213. <view catchtap="onScrollTop" class="widget-goTop" wx:if="{{floorstatus}}">
  214. <text class="iconfont icon-fanhuidingbu"></text>
  215. </view>
  216. <!-- 分享按钮 -->
  217. <zan-actionsheet show="{{ share.show }}" actions="{{ share.actions }}" cancel-text="{{ share.cancelText }}" cancel-with-mask="{{ share.cancelWithMask }}" bind:cancel="onCloseShare" bind:actionclick="onClickShareItem" mask-class="tiny" />
  218. <!-- 商品海报 弹出层 -->
  219. <zan-popup show="{{ share.showPopup }}" bindclose="onTogglePopup">
  220. <view class="pop-poster pop-example__container">
  221. <!-- 关闭按钮 -->
  222. <view class="pop-close dis-flex flex-x-center flex-y-center" catchtap="onTogglePopup">
  223. <text class="iconfont icon-shanchu f-30 col-9"></text>
  224. </view>
  225. <form bindsubmit="onSavePoster" report-submit="true">
  226. <view class="poster__image">
  227. <image mode="widthFix" src="{{ qrcode }}"></image>
  228. </view>
  229. <view class="poster__tips m-top10 t-c">
  230. </view>
  231. <view class="padding-box m-top10 profile-btn">
  232. <button formType="submit">保存图片</button>
  233. </view>
  234. </form>
  235. </view>
  236. </zan-popup>
  237. <!-- 快捷导航 -->
  238. <shortcut id=""></shortcut>