goods-detail.wxml 8.7 KB
Newer Older
D
devil_gong 已提交
1 2 3 4 5 6 7 8 9 10
<view wx:if="{{goods != null}}" class="page">
  <!-- 轮播图片 -->
  <swiper
    indicator-dots="{{indicator_dots}}"
    indicator-color="{{indicator_color}}"
    indicator-active-color="{{indicator_active_color}}"
    autoplay="{{autoplay}}"
    circular="{{circular}}"
    class="goods-photo bg-white"
    wx:if="{{goods_photo.length > 0}}">
G
wechat  
gongfuxiang 已提交
11
    <block wx:for="{{goods_photo}}" wx:key="key">
D
devil_gong 已提交
12
      <swiper-item>
G
gongfuxiang 已提交
13
        <image class="swiper-item wh-auto" bindtap="goods_photo_view_event" data-index="{{index}}" src="{{item.images}}" mode="aspectFit" bindtap="goods_photo_view_event" />
D
devil_gong 已提交
14 15 16 17
      </swiper-item>
    </block>
  </swiper>

D
wx  
devil_gong 已提交
18
  <!-- 视频 -->
G
gongfuxiang 已提交
19 20 21 22 23 24 25 26 27
  <block wx:if="{{goods.video.length > 0}}">
    <view wx:if="{{goods_video_is_autoplay}}" class="goods-video">
      <video src="{{goods.video}}" autoplay="{{goods_video_is_autoplay}}" show-center-play-btn="{{true}}" controls="{{false}}" show-play-btn="{{false}}" enable-progress-gesture="{{false}}" show-fullscreen-btn="{{false}}"></video>
    </view>
    <view class="goods-video-submit">
      <image wx:if="{{!goods_video_is_autoplay}}" class="goods-video-play" bindtap="goods_video_play_event" src="/images/goods-detail-video-play.png" mode="aspectFit"></image>
      <image wx:if="{{goods_video_is_autoplay}}" class="goods-video-close"  bindtap="goods_video_close_event" src="/images/goods-detail-video-close.png" mode="aspectFit"></image>
    </view>
  </block>
D
wx  
devil_gong 已提交
28

D
devil_gong 已提交
29 30 31 32
  <!-- 基础信息 -->
  <view class="goods-base bg-white">
    <view class="oh">
      <view class="goods-title fl multi-text" style="color:{{goods.title_color}}">{{goods.title}}</view>
G
gongfuxiang 已提交
33 34 35
      <view class="goods-share fr tc" bindtap="popup_share_event">
        <image src="/images/goods-detail-share-icon.png" mode="scaleToFill" class="dis-block" />
        <text class="dis-block cr-888">分享</text>        
D
devil_gong 已提交
36 37
      </view>
    </view>
G
gongfuxiang 已提交
38
    <view class="goods-price single-text">
39
      <text wx:if="{{(show_field_price_text || null) != null}}" class="price-icon">{{show_field_price_text}}</text>
D
devil_gong 已提交
40 41
      <text class="sales-price">¥{{goods.price}}</text>
      <text wx:if="{{(goods.original_price || null) != null}}" class="original-price">¥{{goods.original_price}}</text>
G
gongfuxiang 已提交
42
      <view class="cr-ccc sales">
D
devil_gong 已提交
43 44 45 46 47 48 49 50 51 52 53 54 55
        <text>销量 {{goods.sales_count}}</text>
      </view>
    </view>
  </view>

  <!-- 属性导航 -->
  <!-- <view wx:if="{{false}}" class="spacing">
    <view class="goods-attr-show-title bg-white arrow-right cr-666" bindtap="good_attribute_nav_event">
      属性
    </view>
  </view> -->

  <!-- 商品详情 -->
G
gongfuxiang 已提交
56
  <view class="goods-detail spacing">
D
devil_gong 已提交
57 58 59 60
    <view class="spacing-nav-title">
      <text class="line"></text>
      <text class="text-wrapper">详情</text>
    </view>
G
gongfuxiang 已提交
61
    <!-- web详情 -->
G
gongfuxiang 已提交
62
    <view wx:if="{{common_app_is_use_mobile_detail == 0}}" class="bg-white">
G
gongfuxiang 已提交
63 64
      <rich-text nodes="{{goods.content_web || ''}}"></rich-text>
    </view>
G
gongfuxiang 已提交
65
    <!-- 手机独立详情 -->
G
gongfuxiang 已提交
66
    <block wx:if="{{common_app_is_use_mobile_detail == 1 && goods_content_app.length > 0}}">
G
gongfuxiang 已提交
67 68 69 70 71 72 73
      <view wx:for="{{goods_content_app}}" wx:key="key" class="goods-detail-app bg-white">
          <image wx:if="{{(item.images || null) != null}}" bindtap="goods_detail_images_view_event" data-value="{{item.images}}" class="wh-auto dis-block" src="{{item.images}}" mode="widthFix" />
          <view wx:if="{{(item.content || null) != null}}" class="content-items">
            <view wx:for="{{item.content}}" wx:for-item="items">{{items}}</view>
          </view>
      </view>
    </block>
D
devil_gong 已提交
74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95
  </view>

  <!-- 底线 -->
  <import src="/pages/common/bottom_line.wxml" />
  <template is="bottom_line" data="{{status: data_bottom_line_status}}"></template>

  <!-- 底部操作 -->
  <view class="goods-buy-nav wh-auto bg-white">
    <view class="shop fl tc" bindtap="shop_event">
      <image src="/images/goods-detail-home-icon.png" mode="scaleToFill" />
      <text class="dis-block cr-888">首页</text>
    </view>
    <view class="collect fl tc" bindtap="goods_favor_event">
      <image src="{{goods_favor_icon}}" mode="scaleToFill" />
      <text class="dis-block cr-888">{{goods_favor_text}}</text>
    </view>
    <view class="fr">
      <button class="bg-warning fl" type="default" bindtap="cart_submit_event" hover-class="none" disabled="{{nav_submit_is_disabled}}">加入购物车</button>
      <button class="bg-main fl" type="default" bindtap="buy_submit_event" hover-class="none" disabled="{{nav_submit_is_disabled}}">{{nav_submit_text}}</button>
    </view>
  </view>

G
gongfuxiang 已提交
96
  <!-- 购买弹层 -->
G
gongfuxiang 已提交
97
  <component-popup prop-show="{{popup_status}}" prop-position="bottom" bindonclose="popup_close_event">
D
devil_gong 已提交
98 99
    <view class="goods-popup bg-white">
      <view class="close fr oh">
G
wechat  
gongfuxiang 已提交
100
        <view class="fr" catchtap="popup_close_event">
D
devil_gong 已提交
101 102 103 104 105 106 107 108 109 110 111 112 113 114 115 116 117 118 119 120 121 122
          <icon type="clear" size="20" />
        </view>
      </view>
      <!-- 规格基础信息 -->
      <view class="goods-popup-base oh br-b">
        <image src="{{goods_spec_base_images}}" mode="scaleToFill" class="br" />
        <view class="goods-popup-base-content">
          <view class="goods-price">
            <view class="sales-price">¥{{goods_spec_base_price}}</view>
            <view wx:if="{{(goods_spec_base_original_price || null) != null}}" class="original-price">¥{{goods_spec_base_original_price}}</view>
          </view>
          <view class="inventory">
            <text class="cr-888">库存</text>
            <text class="cr-666">{{goods_spec_base_inventory}}</text>
            <text class="cr-888">{{goods.inventory_unit}}</text>
          </view>
        </view>
      </view>

      <view class="goods-popup-content">
        <!-- 商品属性 -->
        <view wx:if="{{goods_specifications_choose.length > 0}}" class="goods-attr-choose">
G
gongfuxiang 已提交
123
          <view wx:for="{{goods_specifications_choose}}" wx:key="key" wx:for-index="key" class="item br-b">
D
devil_gong 已提交
124
            <view class="title">{{item.name}}</view>
G
gongfuxiang 已提交
125
            <view wx:if="{{item.value.length > 0}}" class="spec">
G
gongfuxiang 已提交
126
              <block wx:for="{{item.value}}" wx:key="key" wx:for-index="keys" wx:for-item="items">
G
wechat  
gongfuxiang 已提交
127
                <button catchtap="goods_specifications_event" data-key="{{key}}" data-keys="{{keys}}" type="default" size="mini" hover-class="none" class="{{items.is_active}} {{items.is_dont}} {{items.is_disabled}}">
D
devil_gong 已提交
128 129 130 131 132 133 134 135 136 137 138 139 140
                  <image wx:if="{{(items.images || null) != null}}" src="{{items.images}}" mode="scaleToFill" />
                  {{items.name}}
                </button>
              </block>
            </view>
          </view>
        </view>

        <!-- 购买数量 -->
        <view class="goods-buy-number oh">
          <view class="title fl">购买数量</view>
          <view class="number-content tc oh">
            <view bindtap="goods_buy_number_event" class="number-submit tc cr-888 fl" data-type="0">-</view>
141
            <input bindblur="goods_buy_number_blur" class="tc cr-888 fl" type="number" value="{{temp_buy_number}}" />
D
devil_gong 已提交
142 143 144 145
            <view bindtap="goods_buy_number_event" class="number-submit tc cr-888 fl" data-type="1">+</view>
          </view>
        </view>
      </view>
G
wechat  
gongfuxiang 已提交
146
      <button class="goods-popup-submit bg-main" type="default" catchtap="goods_buy_confirm_event" hover-class="none">确定</button>
D
devil_gong 已提交
147
    </view>
G
wechat  
gongfuxiang 已提交
148
  </component-popup>
G
gongfuxiang 已提交
149 150 151 152 153 154 155 156 157 158 159 160 161 162 163 164 165 166 167 168 169 170 171 172 173 174 175

  <!-- 分享弹层 -->
  <component-popup prop-show="{{popup_share_status}}" prop-position="bottom" bindonclose="popup_share_close_event">
    <view class="share-popup bg-white">
      <view class="close fr oh">
        <view class="fr" catchtap="popup_share_close_event">
          <icon type="clear" size="20" />
        </view>
      </view>
      <view class="share-popup-content">
        <view class="share-items oh">
          <image class="fl" src="/images/share-recomend-icon.png" mode="scaleToFill" />
          <view class="cr-888 single-text fl">好物推荐、和大家一起分享你发现的宝贝</view>
        </view>
        <view class="share-items oh">
          <button class="dis-block" type="default" size="mini" open-type="share" hover-class="none">
            <image src="/images/share-weixin-icon.png" mode="scaleToFill" />
            <text class="cr-888 single-text">一键分享给好友、群聊</text>
          </button>
        </view>
        <view class="share-items oh">
          <image src="/images/share-friend-icon.png" mode="scaleToFill" />
          <text class="cr-888 single-text">生成海报,分享到朋友圈、好友及群聊</text>
        </view>
      </view>
    </view>
  </component-popup>
D
devil_gong 已提交
176 177 178 179 180
</view>

<view wx:if="{{goods == null}}">
    <import src="/pages/common/nodata.wxml" />
    <template is="nodata" data="{{status: data_list_loding_status, msg: data_list_loding_msg}}"></template>
G
gongfuxiang 已提交
181 182 183 184 185 186
</view>

<!-- 在线客服 -->
<view wx:if="{{common_app_is_online_service == 1}}">
  <import src="/pages/common/online_service.wxml" />
  <template is="online_service"></template>
D
devil_gong 已提交
187
</view>