goodsDetail.wxml 8.29 KB
<import src="./picker/picker.wxml"/>
<wxs src="../../wxs/helper.wxs" module="helper"/>
<import src="../../vendors/zanui/actionsheet/index.wxml"/>

<view class="detail-container">
    <view class='topContainer'>
        <product-banner image-list="{{productImages}}" product-name="{{productName}}"></product-banner>
    </view>
    <view class="price-separator"></view>
    <view class="good-price">
        <text class="real-price">{{salesPrice != '0' ? salesPrice : marketPrice}}</text>
        <text class="price" wx:if="{{salesPrice != '0'}}">{{marketPrice}}</text>
        <view class="good-share">
            <image class="share-icon" src="../../static/images/share-ic-dark@2x.png" bindtap="share"></image>
            <button bindtap="share" class="share-button"></button>
        </view>
    </view>
    <view class="gap"></view>

    <!-- 促销 -->
    <view class="promotion" wx:if="{{proList.length}}">
        <view class="pro-header" bindtap="toggleExpandPro">
            <text>促销</text>
            <view wx:if="{{expandPro}}" class="expand-tip">促销优惠信息以确认订单页为准</view>
            <view wx:else class="pro-types">
                <view wx:for="{{proTypes}}" wx:key="{{index}}" class="type">{{item}}</view>
            </view>
            <text wx:if="{{!expandPro}}" class="expand-arrow iconfont icon-bottom"></text>
            <text wx:else class="expand-arrow iconfont icon-top"></text>
        </view>
        <view wx:if="{{expandPro}}" class="pro-detail">
            <view wx:for="{{proList}}" wx:key="index" class="detail-item">
                <view class="item-type">{{item.promotionType}}</view>
                <view class="item-detail">
                    <view class="detail-title">{{item.promotionTitle}}</view>
                    <view class="detail-time">{{item.time}}</view>
                </view>
            </view>
        </view>
    </view>
    <view class="gap" wx:if="{{proList.length}}"></view>
    
    <!-- 支持的服务 -->
    <view class="support-service"
          style="display: {{productSupportServiceList.length>0?'block':'none'}} ;flex-direction: row; display: flex;">
        <view class="support-service-item" wx:for="{{productSupportServiceList}}" wx:key="support-service">
            <text wx:if="{{item.flag == 1}}" class="iconfont icon-duihao-fill"></text>
            <text wx:else class="iconfont icon-warn-fill unsupport-icon"></text>
            <text class="support-service-title">{{item.title}}</text>
        </view>
    </view>
    <view class="gap"></view>

    <!--店铺-->
    <view class='row-shop-brief' bindtap="toShop">
        <image class='shop-icon' src="{{helper.image(shopInfo.brand_ico, 120, 60)}}"></image>
        <text class='shop-name'>{{shopInfo.brand_name}}</text>
        <text class="shop-nav-arrow iconfont icon-right"></text>
        <text class='shop-nav'>返回首页</text>
    </view>
    
    <view class="gap"></view>
    <view class="goods-info" style="display:{{productDesc.length>0?'block':'none'}}">
        <view class="module-title">
            <view class="text">商品信息 <text class="sub-text">DESCRIPTION</text></view>
        </view>
        <view class="table">
            <view class="tr" wx:for="{{productDesc.length/2}}" wx:key="unique">
                <view class="td">{{productDesc[index*2]}}</view>
                <view class="td">{{productDesc[index*2+1]}}</view>
            </view>
        </view>
        <view wx:if="{{productPhrare}}" class="goods-info-phrare">
            <text class="light-gray-font">{{productPhrare}}</text>
        </view>
    </view>
    <view class="goods-info" style="display:{{productSizeContent.length>0?'block':'none'}}">
        <view class="module-title">
            <text class="text">尺码信息 <text class="sub-text">SIZE INFO</text></text>
        </view>
        <scroll-view class="table">
            <view class="tr">
                <view class="td" wx:for="{{productSizeTitle}}" wx:key="unique">{{item}}</view>
            </view>
            <view class="tr" wx:for="{{productSizeContent}}" wx:key="unique">
                <view class="td" wx:for="{{productSizeContent[index]}}" wx:key="unique">{{item}}</view>
            </view>
        </scroll-view>
    </view>

    <view class="goods-info" style="display:{{productMeasurementImage?'block':'none'}}">
        <view class="module-title">
            <text class="text">测量信息 <text class="sub-text">MEASUREMENT METHOD</text></text>
        </view>
        <image src="{{productMeasurementImage}}" mode="widthFix"></image>
    </view>
    <view class="goods-info" style="display:{{productMaterialList[0].remark?'block':'none'}}">
        <view class="module-title">
            <text class="text">商品材质 <text class="sub-text">MATERIALS</text></text>
        </view>
        <view class="info-description">
            <text class="light-gray-font">{{productMaterialList[0].remark}}</text>
        </view>
        <view class="goods-texture" wx:for="{{productWashTipsBoList}}" wx:key="unique">
            <view class="texture">
                <image class="img" src= "{{item.img}}" mode="widthFix"/>
                <view class="desc">
                    <text class="light-gray-font">{{item.caption}}</text>
                </view>
            </view>
        </view>
    </view>

    <view class="goods-info img" style="display:{{productIntroImageList.length>0?'block':'none'}}">
        <view class="module-title">
            <text class="text">商品详情 <text class="sub-text">DETAILS</text></text>
        </view>
        <view wx:for="{{productIntroImageList}}" wx:key="introImage" style="text-align:center">
            <image class="intro-image" src="{{item}}" mode="widthFix"></image>
        </view>
    </view>
    <block wx:if="{{preferList.length}}">
        <view class="gap"></view>
        <view class='title-container'>
            <view class='title-line'></view>
            <view class='title-desc'> 店铺推荐</view>
        </view>
        <view class="product-list prefer">
            <product-list list="{{preferList}}"></product-list>
        </view>
    </block>
    <copyright></copyright>
</view>

<view class="fixed-bottom-actions">
    <view class="invalid-tip" 
          wx:if="{{showNegative && (storage_sum === 0 || productOnlyProvideByYohoAPP || productOnlyProvideByYohoStore)}}">
        <view class="tip-bg"></view>
        <text class="tip-text" wx:if="{{storage_sum === 0}}">此商品已售罄,请等待后续备货!</text>
        <text class="tip-text" wx:if="{{productOnlyProvideByYohoAPP}}">暂不支持该商品购买,请前往Yoho!Buy有货官方应用选购!</text>
        <text class="tip-text" wx:if="{{productOnlyProvideByYohoStore}}">此商品仅线下店可售,请前往YOHO!STORE选购!</text>
    </view>
    <view class="img-action" bindtap="goCart">
        <view class="badge" hidden='{{countInCart===0}}'>{{countInCart}}</view>
        <image class="image" src="../../static/images/cart-btn.png" mode="widthFix"></image>
    </view>
    <view class="img-action" bindtap="toShop">
        <image class="image" src="../../static/images/store-btn-active.png" mode="widthFix"></image>
    </view>
    <block 
        wx:if="{{showNegative && (storage_sum === 0 || productOnlyProvideByYohoAPP || productOnlyProvideByYohoStore)}}">
        <view class="txt-action disabled">加入购物车</view>
        <view class="txt-action buy disabled">立即购买</view>
    </block>
    <block wx:else>
        <view wx:if="{{login}}" class="txt-action add" bindtap="addToCart">加入购物车</view>
        <view wx:else class="txt-action add" bindtap="addToCart">
            <button class="add-btn" open-type="getUserInfo" bindgetuserinfo="getUserInfoLogin" plain="true">加入购物车</button>
        </view>

        <view wx:if="{{login}}" class="txt-action buy" bindtap="buyImmediate">立即购买</view>
        <view wx:else class="txt-action buy" bindtap="buyImmediate">
            <button class="buy-btn" open-type="getUserInfo" bindgetuserinfo="getUserInfoLogin" plain="true">立即购买</button>
        </view>
    </block>
</view>


<quick-navigation show-menu="{{showMenu}}" show-back-top="{{showBackTop}}" show="{{true}}"
                  bindbacktop="backTop" margin-bottom="{{150}}"></quick-navigation>

<template is="Picker" data="{{pickerData, loadingForPayment}}"/>
<template is="zan-actionsheet" data="{{...actionSheet}}"/>