goodsDetail.wxml 10.4 KB


<scroll-view scroll-y="true" style="height:{{windowHeight}}px" enable-back-to-top="true" scroll-top="{{scrollTop}}" bindscroll="onScroll">
<view class='topContainer'>
  <swiper class="swiper-box" indicator-dots="{{indicatorDots}}" autoplay="{{autoplay}}" interval="{{interval}}" duration="{{duration}}" indicator-color='rgba(255,255,255,0.2)' indicator-active-color="rgba(255,255,255,1)">
      <block tt:for="{{bannerImgUrls}}" tt:key="unique">
         <swiper-item>
           <image class="slide-image" data-src="{{item}}" src="{{item}}" mode="aspectFit" bindtap="imgPreview"/>
         </swiper-item>
      </block>
  </swiper>

  <view class="goodTitle">
    <text class="title">{{title}}</text>
  </view>

  </view>

      <!-- <view class="price-seperator"></view> -->
  <block tt:if="{{sales_phrase}}">
    <view class="advanceTitleView">
      <text class="advanceTitle">{{sales_phrase}}</text>
    </view>
  </block>


  <view class="price-seperator"></view>
  <view class="goodPrice">
    <text class="realPrice" >{{realPrice==='0'?price:realPrice}}</text>
    <text class="price" style="display:{{realPrice==='0'?'none':''}}">{{price}}</text>
    <view class="goodShare">
        <image class="shareIcon" src="./images/share-ic@2x.png" bindtap="share"></image>
        <button bindtap="share" class="shareButton">xxxxx</button>
    </view>

  </view>

<!-- VIP价格 -->
  <view class="price-seperator"></view>
  <view class="vip_price" style="display:{{vipPrice.length>0?'flex':'none'}} ;flex-direction: row; padding:20rpx">
     <view class="vip-price-item" tt:for="{{vipPrice}}" tt:key="price">
       <image src="./images/baijin-vip@2x.png" class="vip-price-image" mode="widthFix" style="display:{{item.caption==='白金'?'block':'none'}}"></image>
      <image src="./images/jin-vip@2x.png" class="vip-price-image" mode="widthFix" style="display:{{item.caption==='金卡'?'block':'none'}}"></image>
      <image src="./images/yin-vip@2x.png" class="vip-price-image" mode="widthFix" style="display:{{item.caption==='银卡'?'block':'none'}}"></image>
        <text class="vip-price-title">{{item.price}}</text>
    </view>
  </view>

  <block tt:if="{{is_advance == 'Y'}}">
    <view class="gap"></view>
    <view class="advanceTimeView">
      <text class="advanceTime">上市期:{{expect_arrival_time}}</text>
    </view>
  </block>
  <block tt:else>
    <view class="gap"></view>
  </block>
<!-- 赠品、加价购 -->
  <view class="promotion" style="display:{{productPromotionList.length>0?'flex':'none'}};flex-direction: row;padding:20rpx" bindtap="showPromotionDetail">

    <view style='justify-content: center;display:flex;height:100%;width:100rpx;'>
          <text class="promotion-title">促销</text>
    </view>

     <view class="promotion-item" tt:if="{{!showProductPromotionDetail}}">
     <view style='padding-right:15rpx;margin-top:5rpx;margin-bottom:5rpx;' tt:for="{{productPromotionListForAbbreviations}}" tt:key="promotionitem">
      <view class="promotion-item-border">
        <text class="promotion-title-item">{{item}}</text>
      </view>
    </view>
    </view>
    <view tt:else style='width:100%'>
        <text class="promotion-tips-title">促销优惠信息以确认订单页为准</text>
     </view>

    <view>
    <image src="./images/arrow-down@2x.png" class="support-service-arrow" mode="widthFix" style="display:{{showProductPromotionDetail?'block':'none'}};"></image>

    <image src="./images/arrow-up@2x.png" class="support-service-arrow" mode="widthFix" style="display:{{showProductPromotionDetail?'none':'block'}};"></image>
  </view>


  </view>
    <view style="height:1rpx;background:rgb(238, 238, 238);padding-top:1rpx;width:100%"></view>
   <view class="promotion" style="display:{{showProductPromotionDetail?'block':'none'}} ;flex-direction: column;">

     <view class="promotion-detail" tt:for="{{productPromotionList}}" tt:key="promotiondetail">
          <view style='display:flex;'  class="promotion-item-border">
                 <text class="promotion-title-item">{{item.promotionType}}</text>
          </view>

          <view style="flex-direction:column; display:flex;flex:8;padding-left:10rpx;">
              <text class="promotion-detail-title">{{item.promotionTitle}}</text>
              <text class="promotion-detail-date">{{item.time}}</text>
              <view class='promotion-item-seperator'></view>
          </view>


            <!-- <view class="promotion-seperator"></view> -->

     </view>

  </view>

  <view class="gap"></view>

<!-- 支持的服务 -->
  <view class="supportService" style="display:{{productSupportServiceList.length>0?'block':'none'}} ;flex-direction: row; display: flex; padding:20rpx">
     <view class="supportService-item" tt:for="{{productSupportServiceList}}" tt:key="supportService">
      <image src="./images/checked@2x.png" class="support-service-image" mode="widthFix" style="display:{{item.flag===1?'block':'none'}}"></image>
      <image src="./images/tip@2x.png" class="support-service-image" mode="widthFix" style="display:{{item.flag!==1?'block':'none'}}"></image>
      <text class="support-service-title" >{{item.title}}</text>
    </view>
  </view>

  <view class="gap"></view>

  <view class="goodsInfo" style="display:{{productDesc.length>0?'block':'none'}}">
    <text class="title">商品信息</text>
    <text class="subtitle">DESCRIPTION</text>
    <view class="seperator"></view>
    <view class="table">
        <view class="tr" tt:for="{{productDesc.length/2}}" tt:key="unique">
            <view class="td">{{productDesc[index*2]}}</view>
            <view class="td">{{productDesc[index*2+1]}}</view>
        </view>
    </view>
    <view tt:if="{{productPhrare}}" class="goodsInfoPhrare">
      <text class="lightGrayFont">{{productPhrare}}</text>
    </view>
  </view>


  <view class="goodsInfo" style="display:{{productSizeContent.length>0?'block':'none'}}">
    <text class="title">尺码信息</text>
    <text class="subtitle">SIZE INFO</text>
    <view class="seperator"></view>
    <scroll-view class="table">
        <view class="tr">
           <view class="td" tt:for="{{productSizeTitle}}" tt:key="unique">{{item}}</view>
        </view>
        <view class="tr" tt:for="{{productSizeContent}}" tt:key="unique">
           <view class="td" tt:for="{{productSizeContent[index]}}" tt:key="unique">{{item}}</view>
        </view>
    </scroll-view>
  </view>

  <view class="goodsInfo" style="display:{{productMeasurementImage?'block':'none'}}">
    <text class="title">测量方式</text>
    <text class="subtitle">MEASUREMENT METHOD</text>
    <view class="seperator"></view>
    <image src="{{productMeasurementImage}}" mode="widthFix"></image>
  </view>

  <!-- <view class="gap"></view> -->
  <!--<view class="goodsInfo" style="display:{{productMeasurementImage?'block':'none'}}">
    <text class="title">模特试穿</text>
    <text class="subtitle">REFERENCE</text>
    <view class="seperator"></view>
    <scroll-view class="brandContainer" scroll-x="true">
      <view class="table">
        <view class="tr">
           <view class="td" tt:for="{{productModelTitleList}}" tt:key="unique">{{item}}</view>
        </view>
        <!--<view class="tr" tt:for="{{productModelList}}" tt:key="unique">
           <view class="td" tt:for="{{productModelList[index]}}" tt:key="unique">{{item}}</view>
        </view>
      </view>
    </scroll-view>
  </view>-->

  <view class="goodsInfo" style="display:{{productMaterialList[0].remark?'block':'none'}}">
    <text class="title">商品材质</text>
    <text class="subtitle">MATERIALS</text>
    <view class="seperator"></view>
    <view class="goodsInfoDescription">
      <text class="lightGrayFont">{{productMaterialList[0].remark}}</text>
    </view>
     <view class="seperator"></view>

    <view class="goodsTexture" tt:for="{{productWashTipsBoList}}" tt:key="unique">
      <view class="texture">
        <image class="img" src= "{{item.img}}" mode="widthFix"/>
        <view class="desc">
          <text class="lightGrayFont">{{item.caption}}</text>
        </view>
      </view>
    </view>
  </view>

<view class="goodsInfo" style="display:{{productIntroImageList.length>0?'block':'none'}}">
   <text class="title">商品详情</text>
    <text class="subtitle">DETAILS</text>
    <view class="seperator"></view>
    <view tt:for="{{productIntroImageList}}" tt:key="introImage" style="text-align:center">
      <image src="{{item}}" mode="widthFix"></image>
    </view>
  </view>

<view class="seperator"></view>

<view class='bottom-tip-view' style="display:{{storage_sum===0?'flex':'none'}}">
  <text class="bottom-tip-view-title" style="display:{{is_supplyed?'flex':'none'}}">此商品已售罄,请等待后续备货!</text>
  <text class="bottom-tip-view-title" style="display:{{is_supplyed?'none':'flex'}}">已售罄</text>
</view>

</scroll-view>
<!-- 底部按钮 -->
<view class="bottom">
    <view class='shoppint-cart-icon' >
      <image src="./images/shop@2x.png" class="shoppint-cart-icon-image" mode="widthFix" bindtap='goShoppingCart'></image>
      <view hidden='{{shoppingcartCount===0?true:false}}' class="badge">{{shoppingcartCount}}</view>
    </view>

    <view class='shoppint-like-icon' >
      <image class="shoppint-cart-icon-image" src='{{isFavorite ? "./images/like_pre@2x.png" : "./images/like@2x.png"}}'   mode="widthFix" bindtap='{{isFavorite ? "cancelFavoriteRequest" : "addFavoriteRequest"}}'></image>
    </view>

     <view class='shoppint-cart-add' style='background:{{storage_sum===0||store_show_status===3||store_show_status===4||isLimitBuy?"#b0b0b0":"#444444"}};' bindtap="addToShoppingCartBtnTapped">
      <text class="bottom-title">加入购物车</text>
    </view>

    <view class='buynow' style='background:{{storage_sum===0||store_show_status===3||store_show_status===4||isLimitBuy?"#b0b0b0":"#d0021b"}};' bindtap="buyAction">
      <text class="bottom-title">立即购买</text>
    </view>
 </view>
 <quickNavigation id="quickNavigation" isShowIndicator="{{isShowIndicator}}" isShowShopCart="{{false}}" marginBottom="{{190}}" bind:backToTop="backToTop"></quickNavigation>
<snapshootShare id="snapshootShare" isShow="{{isShowSnapshoot}}" sourceType="product" shareData="{{snapshootShareData}}" bind:hiddenSheet="hiddenSheet"></snapshootShare>
<picker id="picker"
        pickerData="{{pickerData}}" isloadingForPayment="{{isloadingForPayment}}"
        pickerShow="{{pickerShow}}"
        bind:colorTap="colorTap"
        bind:sizeTap="sizeTap"
        bind:bindMinus="bindMinus"
        bind:bindPlus="bindPlus"
        bind:goPayment="goPayment"
        bind:catchtouchmove="catchtouchmove"
></picker>