<!-- 轮播 -->
<view class="banner">
    <swiper class="swiperCont" indicator-dots='true' indicator-color='rgba(255,255,255,.5)'
        indicator-active-color='#fff' autoplay='true'>
        <swiper-item wx:for="{{storyData.pictures}}" wx:key="pictures">
            <image class="swiperImg" src="{{item}}" mode="aspectFill"></image>
        </swiper-item>
    </swiper>
</view>

<!-- 商品 -->
<view class="goods">
    <view class="goodsShare" bindtap="shareLay">
        <image src="/static/mall_icon/goodsShare_icon.png"></image>分享
    </view>
    <view class="goods-price">
        <view class="goods-price-prime"><text>¥</text>{{changeSku.prices.price}}</view>
        <view class="goods-price-cost">¥{{changeSku.prices.cast}}</view>
    </view>
    <view class="recommend-tips">
        <view class="recommend-mark">
            <text class="recommend-vip">vip</text>
            ￥{{changeSku.prices.vip}}
        </view>
    </view>
    <view class="goods-title">
        <view class="goods-title-name">{{storyData.title}}</view>
        <view class="nowrap-multi goods-title-text">{{storyData.description}}</view>
    </view>

    <!-- 暂时隐藏 -->
    <view class="goodsMember" style="display: none">
        <view class="goodsMember-name">
            <image class="goods-tips-gold" src="/static/mall_icon/mallDetails_member_grey.png"></image>开通会员，尊享会员价
        </view>
        <view class="goodsMember-btn">立即开通<image class="goods-tips-arrow" src="/static/mall_icon/mall_arrow.png">
            </image>
        </view>
    </view>
    <!-- 暂时隐藏 -->
    <view class="goods-tips" style="display: none">
        <image class="goods-tips-gold" src="/static/mall_icon/mallDetails_gold.png"></image>
        分享奖 <text>¥{{changeSku.prices.bonus1}}</text>
    </view>
    <view class="specs" bindtap="specsTap">
        <view class="specsName">
            <view class="specsTitle">规格：</view>
            <view class="specsGive" wx:for="{{changeSku.attr}}" wx:key="attr">
                <!-- <text class="specsGive-name">{{index}} -</text> -->
                {{item}}<text>/</text>
            </view>
        </view>
    </view>
    <view class="specs">
        <view class="specsName">
            <view class="specsTitle">邮费：</view>
            包邮
        </view>
        <view class="specsText">已售：<text>{{storyData.sell_number}}</text></view>
    </view>
</view>

<!-- 优惠券 -->
<view class="coupon">
    <view class="specs" bindtap="couponTap">
        <view class="specsName">
            <view class="specsTitle">优惠：</view>
            <view class="couponTips">
                领取优惠券
            </view>
        </view>
        <image class="specsName-arrow" src="/static/mall_icon/mall_arrow.png"></image>
    </view>
</view>

<!-- 企业名称 -- 暂时隐藏 -->
<view class="coupon" style="display: none">
    <view class="specs">
        <view class="specsName">
            <image class="specsName-company" src="/static/mall_icon/mallDetails_company.png"></image>
            <view class="specsTitle">企业名称A</view>
        </view>
        <view class="specsUser">
            <image class="specsUser-img" src="/static/mall_icon/mallDetails_user.png"></image>
            <view class="specsUser-text">
                <text>用户A</text>
                <view class="specsUser-member">
                    <image src="/static/mall_icon/mallDetails_member.png"></image>会员
                </view>
            </view>
        </view>
    </view>
</view>

<!-- 用户评价 -- 暂时隐藏 -->
<view class="assess" style="display: none">
    <view class="assess-title">
        <view class="assess-title-name">用户评价<text>(100)</text></view>
        <navigator hover-class="none" url="/pages/mall_assess/mall_assess" class="assess-title-more">
            <image src="/static/mall_icon/mall_arrow.png"></image>
        </navigator>
    </view>
    <scroll-view class="assess-list" scroll-x>
        <view class="assess-label">
            <view class="assess-cont">
                <view class="assess-user">
                    <image class="assess-user-head" src="/static/mall_icon/mallDetails_user.png"></image>
                    <view class="nowrap">看看**看看看看</view>
                </view>
                <view class="nowrap-multi assess-user-text">产品好好，真棒产品好好，真棒产品好好，真棒</view>
            </view>
            <image class="assess-img" src="/static/images/goods_text.png"></image>
        </view>
        <view class="assess-label">
            <view class="assess-cont">
                <view class="assess-user">
                    <image class="assess-user-head" src="/static/mall_icon/mallDetails_user.png"></image>
                    <view class="nowrap">看看**看看看看</view>
                </view>
                <view class="nowrap-multi assess-user-text">产品好好，真棒产品好好，真棒产品好好，真棒</view>
            </view>
            <image class="assess-img" src="/static/images/goods_text.png"></image>
        </view>
    </scroll-view>
</view>

<!-- 商品详情 -->
<view class="details">
    <view class="details-title">商品详情</view>
    <rich-text nodes="{{content}}"></rich-text>
    <view class="details-footer {{statusBarHeight > 30 ? 'iphoneX':''}}">已经到底拉，在往上逛一逛吧</view>
</view>

<!-- 底部菜单栏 -->
<view class="footer">
    <view class="footer-img">
        <navigator class="footer-img-tool">
            <image src="/static/mall_icon/mallDetails_service.png"></image>
            客服
        </navigator>
        <navigator hover-class="none" url="/pages/mall/mall_cart/mall_cart" class="footer-img-tool">
            <image src="/static/mall_icon/mallDetails_car.png"></image>
            购物车
            <!-- <text>1</text> -->
        </navigator>
    </view>
    <view class="footer-btn" bindtap="specsTap" wx:if="{{changeSku.prices.stock > 0}}">
        <view class="footer-btn-car">加入购物车</view>
        <view class="footer-btn-buy">立即购买</view>
    </view>
    <view class="footer-btn" wx:else>
        <view class="footer-btn-stock">暂无库存</view>
    </view>
</view>

<!-- 优惠券弹出层 -->
<view class="couponBack {{couponShow ? 'active':''}}" bindtap="couponHide"></view>
<view class="couponEject {{couponShow ? 'active':''}}">
    <image bindtap="couponHide" class="couponClose" src="/static/mall_icon/mall_close.png"></image>
    <view class="couponEject-title">优惠</view>
    <view class="couponEject-list">
        <view class="couponEject-list-title">
            全场优惠券
        </view>
        <view class="couponEject-list-label" wx:for="{{storeCoupons}}" wx:key="storeCoupons">
            <view class="couponEject-list-line"></view>
            <view class="couponEject-list-tips {{item.type_text == '代金券' ? 'couponEject-list-tips-yellow': ''}}">
                {{item.type_text}}</view>
            <image class="couponEject-list-back"
                src="{{item.type_text == '代金券' ? '/static/mall_icon/mallCoupon_back_yellow.png' : '/static/mall_icon/mallCoupon_back.png'}}">
            </image>
            <view class="couponEject-list-cont">
                <view class="couponEject-list-left">
                    <view class="couponEject-list-price">
                        <block wx:if="{{item.type_text == '代金券'}}"><text>￥</text>{{item.price}}</block>
                        <block wx:else>免费</block>
                    </view>
                    <view class="couponEject-list-name">{{item.title}}<text>无门槛免费使用</text></view>
                </view>
                <view wx:if="{{!item.isHave}}"
                    class="couponEject-list-btn {{item.type_text == '代金券' ? 'couponEject-list-yellow' : ''}}"
                    bindtap="drawTap" data-id="{{item.id}}">
                    立即领取
                </view>
                <view wx:else class="couponEject-list-btn {{item.type_text == '代金券' ? 'couponEject-list-yellow' : ''}}">
                    已领取
                </view>
            </view>
        </view>
    </view>
    <view class="couponEject-list">
        <view class="couponEject-list-title">
            商品优惠券
        </view>
        <view class="couponDraw-list-label" wx:for="{{coupons}}" wx:key="coupons">
            <view class="couponDraw-list-tips">{{item.type_text}}</view>
            <view class="couponDraw-list-price">
                <view class="couponDraw-list-part">
                    <block wx:if="{{item.type_text == '代金券'}}"><text>￥</text>{{item.price}}</block>
                    <block wx:else>免费</block>
                </view>
            </view>
            <view class="couponDraw-list-text">
                <view class="couponDraw-list-name">
                    {{item.title}}<text>{{item.type_text == '免费券' ? '免费券' : item.full}}</text></view>
                <view class="couponDraw-list-btn" bindtap="drawTap" data-id="{{item.id}}">立即领取</view>
                <view class="couponDraw-list-time">{{item.start_at}} - {{item.end_at}}</view>
            </view>
        </view>
    </view>
</view>

<!-- 规格选择弹出 -->
<view class="specsBack {{specsShow ? 'active':''}}" bindtap="specsHide"></view>
<view class="specsEject {{specsShow ? 'active':''}}">
    <image bindtap="specsHide" class="couponClose" src="/static/mall_icon/mall_close.png"></image>
    <view class="specsEject-cont">
        <view class="specsEject-goods">
            <image class="specsEject-goods-img" src="/static/images/goods_text.png" mode="aspectFill"></image>
            <view class="specsEject-goods-text">
                <view class="specsEject-goods-price">¥{{changeSku.prices.price}}</view>
                <view class="specsEject-goods-norms">
                    <text class="specsEject-goods-tips">已选：</text>
                    <view class="nowrap jectGive">
                        <!-- {{index}} -  -->
                        <text wx:for="{{changeSku.attr}}" wx:key="attr">"{{item}}"</text>
                    </view>
                </view>
                <view class="specsEject-goods-stock"><text
                        class="specsEject-goods-tips">剩余：</text>{{changeSku.prices.stock}}件</view>
            </view>
        </view>
        <view class="specsEject-label" wx:for="{{skus.attrs}}" wx:for-index="name" wx:for-item="attr" wx:key="attrs">
            <view class="specsEject-label-title">{{name}}：</view>
            <view class="specsEject-label-opt">
                <block wx:for="{{attr}}" wx:key="attr">
                    <text class="{{changeSku.attr[name] == item ? 'active':''}}" data-name="{{name}}"
                        data-attr="{{item}}" bindtap="selectSku">{{item}}</text>
                </block>
            </view>
        </view>
        <view class="specsEject-label">
            <view class="specsEject-label-title">数量：</view>
            <view class="specsEject-number">
                <view class="specsEject-number-btn" bindtap="goodsNumber" data-type="remove">-</view>
                <input class="specsEject-number-input" value="{{goodsNumber}}" type="number"
                    bindblur="goodsNumberInput"></input>
                <view class="specsEject-number-btn" bindtap="goodsNumber" data-type="plus">+</view>
            </view>
        </view>
    </view>
    <view class="specsEject-footer">
        <view class="footer-btn-car" bindtap="addBag">加入购物车</view>
        <view class="footer-btn-buy" bindtap="buy">立即购买</view>
        <!-- <navigator hover-class="none" url="/pages/mall_order_submit/mall_order_submit" class="specsEject-footer-btn">
            立即购买</navigator> -->
    </view>
</view>


<!-- 分享弹出 -->
<view class="share-back {{shareShow ? 'active':''}}" bindtap="shareLayEnd"></view>
<view class="share-layer {{shareShow ? 'active':''}}">
    <view class="share-title">
        <text>分享</text>
        <image class="share-close" src="/static/mall_icon/close_icon.png" mode="aspectFill" bindtap="shareLayEnd">
        </image>
    </view>
    <view class="share-cont">
        <button class="share-list share-list-after" hover-class="none" open-type="share">
            <view class="share-list-img">
                <image src="/static/mall_icon/share_wx.png" mode="aspectFill"></image>
            </view>
            <view class="share-list-text">微信好友</view>
        </button>
        <!-- <button class="share-list" hover-class="none" bindtap="canvasCode">
            <view class="share-list-img">
                <image src="/static/mall_icon/share_pyq.png" mode="aspectFill"></image>
            </view>
            <view class="share-list-text">海报分享</view>
        </button> -->
    </view>
    <view class="share-tips">好物推荐，和大家一起分享你发现的好物</view>
</view>