goods.wxml 13 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350351352353354355356357358359360361362363364365366367368369370371372373374375376377378379380
  1. <!-- 展示蒙层 显示推广画报 -->
  2. <view class="poster" wx:if="{{myqr_show}}">
  3. <view class="title">
  4. <text>推广文案</text>
  5. </view>
  6. <view class="ads">
  7. <view style="width:480rpx">{{myqr_ads}}</view>
  8. </view>
  9. <image src="{{myqr_url}}" mode="widthFix" style="width:480rpx" show-menu-by-longpress="true"></image>
  10. <view class="tool">
  11. <view bindtap="posterCopy" style="text-align:right">
  12. <image class="img" style="width:110rpx;height:130rpx" src="/static/images/share/p_copy.png"></image>
  13. </view>
  14. <button open-type='share' class="share-btn">
  15. <image class="img" style="width: 85rpx;height: 127rpx;" src="/static/images/share/p_wx.png"></image>
  16. </button>
  17. <view style="text-align:left">
  18. <image class="img" bindtap="goSaveQrcode" src="/static/images/share/p_save.png"></image>
  19. </view>
  20. </view>
  21. <view style="text-align:center">
  22. <image class="closeImg" bindtap="hidePoster" src="/static/images/share/close.png"></image>
  23. </view>
  24. </view>
  25. <view class="container" style="filter:brightness({{myqr_blur}}%)">
  26. <image src="/static/images/new/isnew.png" wx:if="{{goods.isNew}}" class="isNew"></image>
  27. <swiper class="goodsimgs" indicator-dots="{{goods.gallery.length>1?true:false}}"
  28. indicator-color="rgba(0, 192, 255, .2)" indicator-active-color="rgba(0, 192, 255)" autoplay="true"
  29. interval="3000" duration="1000">
  30. <swiper-item wx:for="{{goods.gallery}}" wx:key="*this">
  31. <image src="{{item}}" mode="aspectFill"></image>
  32. </swiper-item>
  33. </swiper>
  34. <view class="share-pop-box" hidden="{{!openShare}}">
  35. <view class="share-pop">
  36. <view class="close" bindtap="closeShare">
  37. <van-icon class="icon" name="cross" />
  38. </view>
  39. </view>
  40. </view>
  41. <view class="goods-info">
  42. <view class="c">
  43. <view style="display: flex;flex-direction: column;">
  44. <view wx:if="{{!activited}}" class="price">
  45. <view class="retailPrice">{{checkedSku.newCus==true?'新客价':'到手价'}}¥<text class="checked-price">{{checkedSku.price}}</text> </view>
  46. <!-- wx:if="{{checkedSku.counterPrice!=checkedSku.price}}" -->
  47. <view class="counterPrice">原价¥<text>{{checkedSku.counterPrice}}</text></view>
  48. <view class="sale-num">
  49. 已售<text>{{countSalesNumber}}</text>份
  50. </view>
  51. </view>
  52. <view class="goods-name-wrapper">
  53. <view class='goods_name'>
  54. <!-- <image wx:if="{{activited}}" style="width: 79rpx;height:32rpx;margin-right: 4rpx;" src="https://7a68-zhaijieshi-3guecm78383ca692-1307626841.tcb.qcloud.la/activity/618.png"></image> -->
  55. <view class='goods_name_left'>{{goods.name}}</view>
  56. </view>
  57. <text class="desc sub-color" wx:if="{{goods.brief}}">{{goods.brief}}</text>
  58. </view>
  59. </view>
  60. <!-- 分享商品 -->
  61. <!-- <view hidden="{{!canShare}}" class="goods_name_right" bindtap="shareFriendOrCircle">
  62. <image class="img" src="/static/images/share.png" />
  63. </view> -->
  64. </view>
  65. </view>
  66. </view>
  67. <view class="buy-toast">
  68. <swiper autoplay="true" circular="true" interval="3000" duration="1000" vertical="true" class="toast-swiper">
  69. <swiper-item wx:for="{{goodsBuyTime}}" wx:key="index" class="toast-swiper-item">
  70. <view class="toast-item">
  71. <image src="{{item.cusHeadImg}}" mode="aspectFill"></image>
  72. <view>{{item.comment}}</view>
  73. </view>
  74. </swiper-item>
  75. </swiper>
  76. </view>
  77. <!-- 选择规格sku -->
  78. <view class="sku-info" bindtap="showSkuPopup" wx:if="{{goods.productType==2}}">
  79. <view class="sku-left">
  80. <view>已选</view>
  81. <view class="current-sku">{{checkedSku.specifications}}</view>
  82. </view>
  83. <view class="sku-right">
  84. <view>可选服务</view>
  85. <van-icon name="arrow" color="#00B4FF" />
  86. </view>
  87. </view>
  88. <!-- 推荐产品 -->
  89. <view class="recommend-product" wx:if="{{recGoodsNum>0}}">
  90. <view class="recommend-title">
  91. 推荐产品({{recGoodsNum}})
  92. </view>
  93. <scroll-view scroll-x="true" class="recommend-scroll">
  94. <view class="scroll-item-wrapper" wx:for="{{recGoodsList}}" wx:key="index">
  95. <navigator url="/pages/goods/goods?id={{item.id}}">
  96. <view class="scroll-item">
  97. <image src="{{item.picUrl}}" mode="aspectFill"></image>
  98. <view class="scroll-right">
  99. <view class="recommend-name">{{item.name}}</view>
  100. <view class="recommend-price">
  101. <text>¥{{item.retailPrice}}</text>/台
  102. </view>
  103. </view>
  104. </view>
  105. </navigator>
  106. </view>
  107. </scroll-view>
  108. </view>
  109. <!-- 加购数量 -->
  110. <view class="num-module" wx:if="{{checkedSku.isSupportAddbuy&&checkedSku.unitPrice&&checkedSku.unitPrice>0}}">
  111. <view class="plus-buy">
  112. <view class="title">加购</view>
  113. <view class="plus-name">{{checkedSku.unitDescribe}}<text>¥{{checkedSku.unitPrice}}</text>/{{checkedSku.unitArea}}</view>
  114. </view>
  115. <view class="plus-num" style="padding-left: 80rpx;">
  116. <view class="title" style="color:#000;width:160rpx;">加购数量</view>
  117. <view class="calc-counter">
  118. <view class="minus-btn {{plusNum==minNum?'disable':''}}" bindtap="minusNum">-</view>
  119. <input class="num-input" data-max='{{checkedSku.unitMaximum}}' bindinput="bindGoodsNumInput" type="number"
  120. maxlength="3" placeholder="" value="{{plusNum}}" />
  121. <!-- <view class="num-input">{{plusNum}}</view> -->
  122. <view class="plus-btn {{plusNum>=checkedSku.unitMaximum?'disable':''}}" bindtap="addNum">+</view>
  123. </view>
  124. </view>
  125. <view style="color:#FE2B54;margin:8rpx 0 0;" wx-if="{{plusNum!=0}}">
  126. 每份{{checkedSku.unitArea}},加购{{plusNum==null?0:plusNum}}份,合计{{addPurchaseAmount}}元</view>
  127. </view>
  128. <!-- 加购 -->
  129. <!-- wx:if="{{goods.productType==4&&goods.unitPrice&&goods.unitPrice>0}}" -->
  130. <view class="num-module" wx:if="{{goods.productType==4&&goods.unitPrice&&goods.unitPrice>0}}">
  131. <view class="plus-num">
  132. <view class="title" style="color:#000;width:160rpx;justify-content: flex-start;">购买数量</view>
  133. <view style="display: flex;align-items: center;">
  134. <view class="calc-counter" style="height: 62rpx;line-height:62rpx;">
  135. <input class="num-input" style="height: 62rpx;line-height:62rpx;width:140rpx;border:none;"
  136. bindinput="bindGoodsNumInput" type="number" maxlength="4" placeholder="" value="{{plusNum}}" />
  137. </view>
  138. <view style="margin-left:8rpx;">{{goods.unitArea}}</view>
  139. </view>
  140. </view>
  141. <view style="color:#FE2B54;margin:8rpx 0 0;">每增加1{{goods.unitArea}},增加{{goods.unitPrice}}元,服务人数根据实际购买量指派。</view>
  142. </view>
  143. <!-- 团购评价 -->
  144. <view class="group-evaluation">
  145. <view class="title" bindtap="goWholeEval">
  146. <view class="left">团购评价({{goodsCommentCount}}条)</view>
  147. <view class="right">
  148. <view>查看全部</view>
  149. <van-icon name="arrow" color="#85868A" />
  150. </view>
  151. </view>
  152. <view class="evaluation-item" wx:for="{{goodsComment}}" wx:key="index">
  153. <view class="item-left">
  154. <view class="eval-top">
  155. <image src="{{item.cusHeadImg}}" mode="aspectFill" class="avatar"></image>
  156. <view class="name">{{item.cusName}}</view>
  157. <view class="tag">{{item.cusLabel}}</view>
  158. <view class="hp">{{item.commentType}}</view>
  159. </view>
  160. <view class="eval-content">
  161. {{item.comment}}
  162. </view>
  163. </view>
  164. <view class="item-right">
  165. <image src="{{item.commentImg}}" mode="aspectFill"></image>
  166. </view>
  167. </view>
  168. </view>
  169. <view class="detail">
  170. <import src="/lib/wxParse/wxParse.wxml" />
  171. <template is="wxParse" data="{{wxParseData:goodsDetail.nodes}}" />
  172. </view>
  173. <!-- 大家都在看 -->
  174. <view class="related-goods" wx:if="{{relatedGoods.length > 0}}">
  175. <view class="h">
  176. <view class="line"></view>
  177. <text class="title">大家都在看</text>
  178. </view>
  179. <view class="b">
  180. <view class="item" wx:for="{{relatedGoods}}" wx:key="id">
  181. <navigator url="/pages/goods/goods?id={{item.id}}">
  182. <image class="img" src="{{item.picUrl}}" background-size="cover"></image>
  183. <text class="name">{{item.name}}</text>
  184. <text class="price">¥{{item.retailPrice}}</text>
  185. </navigator>
  186. </view>
  187. </view>
  188. </view>
  189. <!-- 规格选择界面 -->
  190. <view class="attr-pop-box" hidden="{{!openshow}}">
  191. <view class="attr-pop">
  192. <view class="close" bindtap="closeAttr">
  193. <van-icon class="icon" name="cross" />
  194. </view>
  195. </view>
  196. </view>
  197. <!-- 规格选择界面 -->
  198. <view class="attr-pop-box" hidden="{{!openAttr}}">
  199. <view class="attr-pop">
  200. <view class="close" bindtap="closeAttr">
  201. <van-icon class="icon" name="cross" />
  202. </view>
  203. <view class="img-info">
  204. <image class="img" src="{{goods.picUrl}}"></image>
  205. <view class="info">
  206. <view class="c">
  207. <view class="p">价格:¥{{checkedSpecPrice}}</view>
  208. <view class="a">{{tmpSpecText}}</view>
  209. </view>
  210. </view>
  211. </view>
  212. <!-- 规格列表 -->
  213. <view class="spec-con">
  214. <view class="spec-item" wx:for="{{specificationList}}" wx:key="name">
  215. <view class="name">{{item.name}}</view>
  216. <view class="values">
  217. <view class="value {{vitem.checked ? 'selected' : ''}}" bindtap="clickSkuValue"
  218. wx:for="{{item.valueList}}" wx:for-item="vitem" wx:key="id" data-value-id="{{vitem.id}}"
  219. data-name="{{vitem.specification}}">
  220. {{vitem.value}}</view>
  221. </view>
  222. </view>
  223. <view class="spec-item" wx:if="{{groupon.length > 0}}">
  224. <view class="name">团购立减</view>
  225. <view class="values">
  226. <view class="value {{vitem.checked ? 'selected' : ''}}" bindtap="clickGroupon" wx:for="{{groupon}}"
  227. wx:for-item="vitem" wx:key="{{vitem.id}}" data-value-id="{{vitem.id}}"
  228. data-name="{{vitem.specification}}">
  229. ¥{{vitem.discount}} ({{vitem.discountMember}}人)</view>
  230. </view>
  231. </view>
  232. <!-- 数量 -->
  233. <view class="number-item">
  234. <view class="name">数量</view>
  235. <view class="selnum">
  236. <!-- <view class="cut" bindtap="cutNumber">-</view> -->
  237. <input value="{{number}}" class="number" disabled="true" type="number" />
  238. <!-- <view class="add" bindtap="addNumber">+</view> -->
  239. </view>
  240. </view>
  241. </view>
  242. </view>
  243. </view>
  244. <!-- 联系客服
  245. <view class="contact">
  246. <contact-button style="opacity:0;position:absolute;" type="default-dark" session-from="weapp" size="36">
  247. </contact-button>
  248. </view> -->
  249. <!-- 底部按钮 -->
  250. <view class="bottom-btn" style="position:{{myqr_bottom_btn}}">
  251. <view class="l l-collect" bindtap="addCollectOrNot" wx:if="{{!isGroupon}}">
  252. <view class="collect-wrapper">
  253. <van-icon class="icon" name="star" color="#09afff" wx:if="{{collect}}" size="22px" />
  254. <van-icon class="icon" size="22px" color="#09afff" name="star-o" wx:else />
  255. <text class="jz-color collect-text">收藏</text>
  256. </view>
  257. </view>
  258. <view class="l l-kefu">
  259. <view class="service-wrapper" bindtap="goIm">
  260. <view class="contact-block">
  261. <!-- <contact-button style="opacity:0;position:absolute; left:16rpx; top:0rpx;" type="default-dark"
  262. session-from="weapp" size="44">
  263. </contact-button> -->
  264. <van-icon name="service-o" color="#09afff" size="22px" />
  265. </view>
  266. <text class="jz-color">在线客服</text>
  267. </view>
  268. </view>
  269. <block wx:if="{{checkedSku.type==0}}"><!--买约一体-->
  270. <view class="c" bindtap="addFast" data-type='1' wx:if="{{!soldout||!hasLogin}}">立即预约</view>
  271. </block>
  272. <view class="dis-order-wrapper" wx:elif="{{checkedSku.type==3}}"><!--买约分离-->
  273. <view class="self-order" data-type='0' bindtap="addFast">
  274. <view class="buy-type">先买后约</view>
  275. </view>
  276. <view class="spread-order" data-type='1' bindtap="addFast">
  277. <view class="buy-type jz-color" style="overflow: hidden;">立即预约</view>
  278. </view>
  279. </view>
  280. <view class="dis-order-wrapper" wx:elif="{{checkedSku.type==2}}"><!--中介-->
  281. <view class="self-order" data-type='0' bindtap="addFast">
  282. <view class="buy-type">立即购买</view>
  283. </view>
  284. </view>
  285. <block wx:elif="{{checkedSku.type==6}}"><!--实物商品-->
  286. <view class="c" bindtap="addFast" data-type='1' wx:if="{{!soldout||!hasLogin}}">立即购买</view>
  287. </block>
  288. <block wx:else><!--其他-->
  289. <view class="c" bindtap="addFast" data-type='1' wx:if="{{!soldout||!hasLogin}}">立即预约</view>
  290. </block>
  291. </view>
  292. <!-- bind:click-overlay="onSkuClose" -->
  293. <!-- sku规格列表 -->
  294. <van-popup show="{{ chooseSkuVisible }}" round position="bottom" bind:click-overlay="onSkuClose">
  295. <view class="spu-popup">
  296. <view class="popup-good">
  297. <view class="left">
  298. <image src="{{currentSku.url}}" mode="aspectFill"></image>
  299. <view class="spu-price"><text style="font-size: 26rpx;">{{currentSku.newCus==true?'新客价':'到手价'}}¥</text><text>{{currentSku.price}}</text></view>
  300. <view class="spu-price-old">¥{{currentSku.counterPrice}}</view>
  301. </view>
  302. <image src="https://jzmall.lifejingzhi.com/file/jzmall/weixin/sku-close.png" mode="aspectFill"
  303. class="sku-close" bindtap="onSkuClose"></image>
  304. </view>
  305. <scroll-view scroll-y="true" class="sku-list-block">
  306. <view class="spu-title">
  307. 选择品类
  308. </view>
  309. <view style="padding-bottom:20rpx;">
  310. <view class="sku-item {{activeSku==item.id?'active-sku':''}}" wx:for="{{productList}}" wx:key="index"
  311. data-index="{{index}}" data-id="{{item.id}}" bindtap="selectSku">
  312. <view>
  313. {{item.specifications}}
  314. </view>
  315. </view>
  316. </view>
  317. </scroll-view>
  318. <view class="sku-btn" bindtap="confSku">
  319. 确认
  320. </view>
  321. </view>
  322. </van-popup>