details.wxml 7.4 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161
  1. <view class="wrap" wx:if="{{!showCoverVideo}}">
  2. <i-navigation-bar back="{{showBackBtn}}" background="#ffffff" title="详情" style="z-index:1000;">
  3. <view slot="left">
  4. <view bindtap='_backhome' class="nav-btn i-flex i-flex-alc">
  5. <image class="img" src="/lionfish_comshop/images/zhuye-b.png"></image>
  6. </view>
  7. </view>
  8. </i-navigation-bar>
  9. <view class="media-box" wx:if="{{info.images}}">
  10. <!-- 图片 -->
  11. <view class='video-wrap' wx:if="{{info.video!=''&&info.video!=null}}">
  12. <view wx:if="{{fmShow==true}}">
  13. <view class='btn_view centerboth' wx:if="{{info.video==''}}"></view>
  14. <view class='btn_view centerboth' wx:else bindtap='btnPlay'>
  15. <image src='../../images/play.png'></image>
  16. </view>
  17. <image class="topImg" src="{{info.images}}" mode="widthFix" bindload="imageLoad" lazy-load="true"></image>
  18. </view>
  19. <video class='swiper-video' hidden="{{fmShow}}" id="myVideo" src="{{info.video}}" bindended="videEnd" style="min-height:{{imageSize.imageHeight}}px" object-fit="contain"></video>
  20. </view>
  21. <image wx:else="{{info.images}}" class="topImg" src="{{info.images}}" mode="widthFix"></image>
  22. </view>
  23. <view hidden="{{fmShow}}" class='end-play' bindtap='endPlay'>
  24. <text class='btn'>退出播放</text>
  25. </view>
  26. <!-- 只有视频 -->
  27. <view>
  28. <video wx:if="{{info.video&&!info.images}}" id="myVideo" src="{{info.video}}" autoplay controls style="width:100%;"></video>
  29. </view>
  30. <!-- 信息 -->
  31. <view class="bg-f mb10 p15">
  32. <view class="title weight">{{info.recipe_name}}</view>
  33. <view class="desc" wx:if="{{info.make_time||info.diff_name}}">
  34. <text wx:if="{{info.make_time}}">制作时间:{{info.make_time}} |</text>
  35. <text wx:if="{{info.diff_name}}"> 难度:{{info.diff_name}}</text>
  36. </view>
  37. <view class="userinfo">
  38. <view class="i-flex i-aic">
  39. <image wx:if="{{info.avatar}}" class="avatar" src="{{info.avatar}}"></image>
  40. <text wx:if="{{info.username}}" class="weight" style="font-size:26rpx;">{{info.username}}</text>
  41. </view>
  42. <view class="p" wx:if="{{info.sub_name}}">{{info.sub_name}}</view>
  43. </view>
  44. </view>
  45. <!-- 食材 -->
  46. <view class="list bg-f mb10 pb15" wx:if="{{info.recipe_ingredients.length}}">
  47. <view class="com-tit weight p15" style="padding-bottom:0;">清单</view>
  48. <view wx:for="{{info.recipe_ingredients}}" wx:key="index">
  49. <view class="list-tit p15" wx:if="{{item.ingredients_title}}">
  50. <text class="weight">·</text> {{item.ingredients_title}}</view>
  51. <view class="list-box" wx:if="{{item.goods}}">
  52. <block wx:for="{{item.goods}}" wx:key="idx" wx:for-item="good" wx:for-index="idx">
  53. <i-goods-item spuItem="{{good}}" bind:openSku="openSku" needAuth="{{needAuth}}" bind:authModal="authModal" bind:changeCartNum="changeCartNum" bind:vipModal="vipModal"></i-goods-item>
  54. </block>
  55. </view>
  56. </view>
  57. </view>
  58. <!-- 步骤 -->
  59. <view class="details bg-f p15" wx:if="{{info.content}}">
  60. <view class="com-tit weight">详情</view>
  61. <view class="wxParse">
  62. <parser html="{{info.content}}" />
  63. </view>
  64. </view>
  65. <view class="pb100"></view>
  66. <!-- 底部 -->
  67. <view class="foot i-flex i-flex-alc bg-f">
  68. <view class="i-flex-item foot-item" bindtap="goLink" data-link="switchTo:/lionfish_comshop/pages/order/shopCart">
  69. <view style="position: relative; display:inline-block;">
  70. <text class="cart-num" wx:if="{{cartNum>0}}">{{cartNum}}</text>
  71. <text class="iconfont icon-gouwuche"></text>
  72. </view>
  73. <view>购物车</view>
  74. </view>
  75. <view class="i-flex-item foot-item" bindtap="agree">
  76. <text class="iconfont icon-xinaixin {{info.has_fav==1?'active':''}}" style="color:#d1d2d2;"></text>
  77. <view>喜欢 {{info.fav_count}}</view>
  78. </view>
  79. <view class="i-flex-item foot-item">
  80. <button class="btn" open-type="share">
  81. <text class="iconfont icon-fenxiang"></text>
  82. <view class="name">分享</view>
  83. </button>
  84. </view>
  85. </view>
  86. </view>
  87. <!-- 视频展示 -->
  88. <view class="livepage" wx:else>
  89. <view class="livepage1">
  90. <video autoplay loop autoPauseIfOpenNative="true" controls="{{false}}" direction="0" id="myVideo1" objectFit="contain" showFullscreenBtn="{{false}}" src="{{info.video}}" bindended="coverVideoEnd"></video>
  91. </view>
  92. <view class="livepage2">
  93. <i-navigation-bar back="{{showBackBtn}}" color="#ffffff" style="position:absolute;z-index:10000;top:0;">
  94. <view slot="left">
  95. <view bindtap='_backhome' class="nav-btn i-flex i-flex-alc">
  96. <image class="img" src="/lionfish_comshop/images/zhuye-b.png"></image>
  97. </view>
  98. </view>
  99. </i-navigation-bar>
  100. <view class="operation i-flex-col" hidden="{{showStore}}">
  101. <button class="item i-flex i-flex-alc operation--mode-filter-black" open-type="share">
  102. <text class="iconfont icon-fenxiang3"></text>
  103. </button>
  104. <view class="item i-flex i-flex-alc operation--mode-filter-black" bindtap="agree">
  105. <text class="iconfont icon-xinaixin {{info.has_fav==1?'active':''}}"></text>
  106. </view>
  107. <view class="item i-flex i-flex-alc" bindtap="clickStore">
  108. <text class="iconfont icon-gouwudai"></text>
  109. </view>
  110. </view>
  111. <!-- 商品 -->
  112. <view class="store">
  113. <view class="store-list {{showStore?'fadeIn':''}}">
  114. <view class="store__mask" bindtap="clickStore" hidden="{{!showStore}}"></view>
  115. <view class="mode-filter-black">
  116. <view class="store-list__inner" style="max-height: 287px">
  117. <view class="store-list__header">
  118. <view class="store-list__title">清单</view>
  119. </view>
  120. <view class="store-list__body">
  121. <scroll-view class="store-list__body__inner" style="max-height:230px;" scroll-y wx:if="{{info.recipe_ingredients.length}}">
  122. <block wx:for="{{info.recipe_ingredients}}" wx:key="id" wx:for-item="list" wx:for-index="idx">
  123. <view class="list-tit text-white mb5" wx:if="{{list.ingredients_title}}">
  124. <text class="weight">·</text> {{list.ingredients_title}}
  125. </view>
  126. <view class="store-list__item" wx:for="{{list.goods}}" wx:key="actId">
  127. <navigator url="/lionfish_comshop/pages/goods/goodsDetail?id={{item.actId}}" class="store-list__item__inner" hover-class="none">
  128. <view class="store-list__item__header">
  129. <image class="store-list__item__avatar" mode="aspectFill" src="{{item.skuImage}}"></image>
  130. <view class="store-list__item__index">{{index+1}}</view>
  131. </view>
  132. <view class="store-list__item__body i-flex-item">
  133. <view class="store-list__item__title">{{item.spuName}}</view>
  134. <view class="store-list__item__price__container">
  135. <text class="store-list__item__price">¥{{item.actPrice[0]}}.{{item.actPrice[1]}} </text>
  136. <text class="store-list__item__price store-list__item__price-before">¥{{item.marketPrice[0]}}.{{item.marketPrice[1]}}</text>
  137. </view>
  138. </view>
  139. </navigator>
  140. </view>
  141. </block>
  142. </scroll-view>
  143. <view class="store-list__empty" wx:else>暂无清单</view>
  144. </view>
  145. </view>
  146. </view>
  147. </view>
  148. </view>
  149. </view>
  150. </view>
  151. <canvas canvasId="myCanvas" class="canvas-img" style="width: {{canvasWidth}}px;height: {{canvasHeight}}px;"></canvas>
  152. <i-new-auth needAuth="{{needAuth&&showAuthModal}}" bind:authSuccess="authSuccess" bind:cancel="authModal" needPosition="{{true}}"></i-new-auth>
  153. <sku visible="{{visible}}" skuList="{{skuList}}" cur_sku_arr="{{cur_sku_arr}}" bind:cancel="closeSku" sku_val="{{sku_val}}" sku="{{sku}}" goodsid="{{addCar_goodsid}}" bind:changeCartNum="changeCartNum" bind:vipModal="vipModal"></sku>
  154. <i-vip-modal visible="{{showVipModal}}" imgUrl="{{pop_vipmember_buyimage}}" />