<view class="navigation {{isFixedTop > 0 ? 'active' : ''}}" style="padding-top:{{barHeight}}px;">
    <image bindtap="returnGo" class="navigation-arrow" src="{{isFixedTop > 0 ? '/static/icons/returnBlack.png' : '/static/icons/returnWrite.png'}}"></image>
    <image bindtap="returnHome" class="navigation-arrow" src="{{isFixedTop > 0 ? '/static/icons/homeBlack.png' : '/static/icons/homeWrite.png'}}"></image>
</view>

<!-- 产品图 -->
<view class="banner">
    <swiper class="swiperCont" indicator-dots indicator-color="rgba(255,255,255,.5)" indicator-active-color="#fff" autoplay="true" circular>
        <swiper-item data-index="{{index}}" data-imgs="{{mallData.pictures}}" bindtap="opneBanner" wx:for="{{mallData.pictures}}" wx:key="index">
            <image class="swiperImg" src="{{item}}" mode="aspectFill"></image>
        </swiper-item>
    </swiper>
</view>

<!-- 商品信息 -->
<view class="goodsCont">
    <view class="goodsWhite goodsInfo">
        <view class="goodsInfo-top">
            <view class="goodsInfo-price">
                <view class="goodsInfo-cost"><text>VIP￥</text>{{mallData.price.vip}}</view>
                <view class="goodsInfo-vip"><text>市场指导价</text>{{mallData.price.price}}</view>
            </view>
        </view>
        <view class="goodsInfo-name">
            {{mallData.name}}
        </view>
        <view class="goodsInfo-share" bindtap="shareTap">
            <image class="goodsInfo-share-image" src="/static/icons/goodsShare.png"></image>分享
        </view>
    </view>

    <view class="vipOpen">
        <image class="vipOpen-back" src="https://cdn.shuiganying.com/images/2023/04/01/3b939c9082c917ff01fe4f5ea2ab9dfe.jpg"></image>
        <view class="vipOpen-cont">
            <image class="vipOpen-cont-icon" src="https://cdn.shuiganying.com/images/2023/04/04/799f5052f307ba25da99917ee084aaa4.png"></image>
            <view class="vipOpen-cont-name">
                <view class="vipOpen-cont-vip">{{mallData.is_vip ? '已成为' : '开通'}}<text>VIP</text></view>
                <view class="vipOpen-cont-tips">{{mallData.is_vip ? 'AI测肤精准分析您皮肤问题' : '完成皮肤评测成为vip/年'}}</view>
            </view>
        </view>
        <navigator hover-class="none" url="/pages/index/index" open-type="switchTab" class="vipOpen-btn">{{mallData.is_vip ? '再次评测' : '立即评测'}}<image class="vipOpen-btn-arrow" src="/static/icons/vipArrow.png"></image>
        </navigator>
    </view>

    <view class="goodsWhite goodsItem">
        <view class="goodsItem-label">
            <view class="goodsItem-label-name">
                参数
            </view>
            <view class="goodsItem-label-see">
                <view class="goodsItem-label-block">
                    <view class="goodsItem-label-title">{{mallData.param.weight}}ml</view>
                    <view class="goodsItem-label-tips">净含量</view>
                </view>
                <view class="goodsItem-label-block">
                    <view class="goodsItem-label-title">{{mallData.param.product_type}}</view>
                    <view class="goodsItem-label-tips">产品类型</view>
                </view>
                <!-- <view class="goodsItem-label-block">
                    <view class="goodsItem-label-title">{{mallData.param.area}}</view>
                    <view class="goodsItem-label-tips">产地</view>
                </view> -->
            </view>
        </view>
        <view class="goodsItem-label">
            <view class="goodsItem-label-name">
                快递
            </view>
            <view class="goodsItem-label-text">
                免邮
            </view>
        </view>
    </view>

    <!-- 详情 -->
    <view class="goodsWhite goodsBrief">
        <rich-text nodes="{{mallContent}}"></rich-text>
    </view>
</view>

<!-- 底部 -->
<view class="footer">
    <view class="number"><text>￥</text>
        <view class="number-price">{{mallData.is_vip ? mallData.price.vip : mallData.price.price}}</view>
        <view class="number-vip">{{mallData.is_vip ? 'VIP会员价' : '市场指导价'}}</view>
    </view>
    <view bindtap="buyTap" class="btn">确认购买</view>
</view>

<!-- 产品图 -->
<view class="goodsShare {{shareSee ? 'active' : ''}}" catchtouchmove='true'>
    <view class="goodsShare-back">
        <image class="goodsShare-photo" src="{{mallData.cover}}" mode="widthFix"></image>
        <view class="goodsShare-cont">
            <view class="goodsShare-name">{{mallData.name}}</view>
            <view class="goodsShare-see">
                <view class="goodsShare-price">
                    <text>￥</text>{{mallData.price.price}}
                </view>
                <view class="goodsShare-tips">
                    识别二维码进行查看
                </view>
                <image class="goodsShare-code" src="{{inviteCode}}"></image>
            </view>
        </view>
    </view>
</view>

<!-- 分享弹出 -->
<view class="shareBack {{shareSee ? 'active' : ''}}" catchtouchmove='true'></view>
<view class="sharePop {{shareSee ? 'active' : ''}}" catchtouchmove='true'>
    <view class="shareCont">
        <button class="shareCont-label codeShare-button" open-type="share" hover-class="none">
            <image src="https://cdn.shuiganying.com/images/2023/03/28/f8b773edc2fe6db8e45f96773b9a8dc4.png"></image>
            微信好友
        </button>
        <view class="shareCont-label" bindtap="onCanvas">
            <image src="https://cdn.shuiganying.com/images/2023/03/28/cfe0efbb53eaf7911ea5211923859c65.png"></image>
            保存二维码
        </view>
    </view>
    <view class="shareCancel" bindtap="shareTap">取消</view>
</view>

<!-- 海报canvas -->
<canvas type="2d" style="width: 375px; height: 540px;" id="coverCanvas" class="canvas-img" />

<!-- 是否有上级-邀请码 -->
<view class="namePop {{isParent ? 'active' : ''}}"></view>
<view class="nameCont {{isParent ? 'active' : ''}}">
    <view class="nameCont-white">
        <view class="nameCont-top">
            <view class="nameCont-title">您的邀请人?</view>
            <view class="nameCont-input">
                <input type="text" name="name" value="{{nameValue}}" placeholder="请输入邀请码或邀请人手机号" bindinput="bindinput" />
                <image wx:if="{{nameValue.length > 1}}" class="nameCont-colse" bindtap="colseTap" src="/static/icons/reportColse_grey.png"></image>
            </view>
        </view>
        <view class="nameCont-btn">
            <view class="nameCont-btn-go" bindtap="nameCancel">暂不绑定</view>
            <view class="nameCont-btn-go" bindtap="nameTrue">立即绑定</view>
        </view>
    </view>
</view>