gather/pages/prod/prod.wxml

<!-- 商品详情 -->
<view class="container ">
  <view class="fixed-box" style="opacity: {{opacity}};">
    <view class="fixed-item {{active == 0?'active':''}}" data-active="0" catch:tap="handleFixed">商品</view>
    <view class="fixed-item {{active == 1?'active':''}}" data-active="1" catch:tap="handleFixed">评价</view>
    <view class="fixed-item {{active == 2?'active':''}}" data-active="2" catch:tap="handleFixed">详情</view>
    <view class="fixed-item {{active == 3?'active':''}}" data-active="3" catch:tap="handleFixed">推荐</view>
  </view>
  <!-- 轮播图 -->
  <view class="swiper-con">
    <view class="video-container" wx:if="{{video && isPlaying}}">
      <video enable-progress-gesture="{{false}}" objectFit="fill" id="myVideo" src="{{video}}" controls bindended="playEnd"></video>
    </view>
    <view class="play-btn {{isPlaying?'video-index':''}}" bindtap="videoOper" wx:if="{{video}}">
      <image class="play-icon" wx:if="{{!isPlaying}}" src="../../images/icon/play-red.png"></image>
      <text class="play-text {{isPlaying?'video-stop':'video-play'}}">{{isPlaying?'退出播放': videoDuration}}</text>
    </view>
    <swiper class="swiper" wx:if="{{!isPlaying}}" circular="{{true}}" indicator-dots="{{indicatorDots}}" indicator-color="{{indicatorColor}}" interval="{{interval}}" duration="{{duration}}" indicator-active-color="{{indicatorActiveColor}}">
      <block wx:for="{{imgs}}" wx:key='index'>
        <swiper-item>
          <image src='{{item}}'></image>
        </swiper-item>
      </block>
    </swiper>
  </view>
  <!-- 轮播图end -->

  <view class="content">
    <!-- 普通商品价格 -->
    <view class="prod-price" wx-if="{{!groupActivityId}}">
      <text class="price">￥<text class="price-num">{{wxs.parsePrice(defaultSku.price)[0]}}</text>.{{wxs.parsePrice(defaultSku.price)[1]}}</text>
    </view>
    <!-- 商品信息 -->
    <view class='prod-info'>
      <view class="tit-wrap">
        <view class="prod-tit">{{prodName}}</view>
        <!-- <view class="col" bindtap='addOrCannelCollection'>
          <image wx-if="{{!isCollection}}" src="../../images/icon/prod-col.png"></image>
          <image wx-if="{{isCollection}}" src="../../images/icon/prod-col-red.png"></image>
        </view> -->
      </view>
      <view class="sub-title" wx:if="{{halfTitle}}">{{halfTitle}}</view>
      <view class="sales-p" wx:if="{{brief}}">{{brief}}</view>
    </view>
    <!-- 商品信息end -->

    <view class="intro-box">
      <view class="intro-item">
       <view class="title">{{brandName}}</view>
       <view class="desc">品牌</view>
      </view>
      <view class="intro-item">
       <view class="title">{{skuList[0].weight}}克</view>
       <view class="desc">重量</view>
      </view>
      <view class="intro-item">
       <view class="title">{{skuList[0].weightUnit}}</view>
       <view class="desc">单位</view>
      </view>
      <image class="more" src="/images/icon/more.png" mode="" />
    </view>

    <!-- 已选规格 -->
    <!-- <view class="sku border-radius-box" bindtap='showSku'>
      <view class="sku-tit">已选</view>
      <view class="sku-con">{{selectedProp.length>1?selectedProp+'，':selectedProp}}{{prodNum}}件</view>
      <view class="more">...</view>
    </view> -->
    <!-- 已选规格end -->
    <!-- 评价 -->
    <view class='cmt-wrap border-radius-box'>
      <view class="cmt-tit" bindtap='showComment'>
        <view class="cmt-t">
          评价（{{prodCommData.all}}）
          <!-- <text class="cmt-good">好评{{prodCommData.positiveRating}}%</text> -->
        </view>
        <text class="cmt-good">好评{{prodCommData.goodRate}}    <text class="cmt-more"></text></text>

        <!-- <view class="cmt-count">
          共{{prodCommData.number}}条
          <text class="cmt-more"></text>
        </view> -->
      </view>
      <view class="cmt-cont">
        <view class="cmt-tag" bindtap='showComment'>
          <text>全部({{prodCommData.all}})</text>
          <text>好评({{prodCommData.goodCount}})</text>
          <text>中评({{prodCommData.middleCount}})</text>
          <text>差评({{prodCommData.badCount}})</text>
          <text>有图({{prodCommData.picCount}})</text>
        </view>
        <view class="cmt-items">
          <view class="cmt-item" wx:for="{{littleCommPage}}" wx:key="prodCommId">
            <view class="cmt-user">
              <text class="date">{{item.recTime}}</text>
              <view class="cmt-user-info">
                <image class="user-img" src="{{item.pic?item.pic:'../../images/icon/head04.png'}}"></image>
                <view class="nickname">{{item.isAnonymous==1?'匿名评价':item.nickName}}</view>
                <comm-star value="{{item.score}}"></comm-star>
              </view>
            </view>
            <view class="cmt-cnt">{{item.content}}</view>
            <scroll-view class="cmt-attr" scroll-x="true" wx:if="{{item.pics.length}}">
              <image src="{{commPic}}" wx:for='{{item.pics}}' wx:for-item="commPic" wx:key='index' data-pics="{{item.pics}}" data-index="{{index}}" bindtap='clickImg'></image>
            </scroll-view>
          </view>
        </view>
        <view class="cmt-more-v" wx:if="{{prodCommPage.records.length > 2}}">
          <text bindtap='showComment'>查看全部评价</text>
        </view>
      </view>
    </view>
    <!-- 评价 end -->

    <!-- 相似商品和一起购买 -->
    <view class="swiper-box">
      <view class="tab-box">
        <view class="tab {{tab == 0?'active':''}}" data-tab="0" bind:tap="handleTab">相似商品</view>
        <view class="tab {{tab == 1?'active':''}}" data-tab="1" bind:tap="handleTab">经常一起买</view>
      </view>
      <swiper class="swiper-prod {{list[0].length>3?'h844':''}}"  wx-if="{{list[0].length>0}}" indicator-dots="true" indicator-active-color="#006CE8" >
        <swiper-item class="swiper-item" wx:if="{{item.length}}" wx:for="{{list}}">
            <view class="item" wx:for="{{item}}" wx:for-item="i" wx:for-index="d" wx:key="{{d}}" bindtap='toProdPage' data-prodid="{{i.prodId}}" data-shopid="{{i.shopId}}">
              <image lazy-load class="item-img" src="{{i.pic}}" mode="widthFix"></image>
              <view class="item-title">{{i.prodName}}</view>
              <view class="price-box">
                  <view class="name-price" style="font-size:26rpx;color: #FF4D3A;">￥{{i.channelProdPrice}}</view>
                  <view style="position: relative;"  data-index="{{index}}" data-subindex="{{d}}" data-num="1" data-item="{{i}}" catch:tap="handleAdd">
                    <image style="width:44rpx;height:44rpx;" src="/images/icon/car-btn.png" mode=""/>
                    <view class="num" wx:if="{{i.prodCount}}">{{i.prodCount}}</view>
                  </view>
              </view>
            </view>
        </swiper-item>
      </swiper>
        <view class="none" wx:if="{{list[0].length==0||list.length == 0}}">
          <van-empty image="/images/icon/none.png" description="暂无商品" />
        </view>

    </view>

    <!-- 店铺 -->
    <!-- <view class="shop-box border-radius-box"> -->
      <!-- top -->
      <!-- <view class="shopbox-head">
        <view class="shop-logo">
          <image src="{{shopLogo}}"></image>
        </view>
        <view class="shop-name">{{shopName}}</view>
        <view class="self-operate" >自营店铺</view>
      </view> -->
      <!-- middle -->
      <!-- <view class="shop-situation">
      <view class="situation-item">
        <view class="situation-item-num">612354</view>
        <view class="situation-item-txt">粉丝人数</view>
      </view>
      <view class="situation-item">
        <view class="situation-item-num">309</view>
        <view class="situation-item-txt">全部商品</view>
      </view>
    </view> -->
      <!-- bottom -->
      <!-- <view class="handle-shop">
      <view class="handle-shop-item">
        <view class="handle-shop-icon star-icon"><image src="../../images/icon/star-empty.png"></image></view>
        <text class="handle-txt">收藏店铺</text>
      </view>
      <view class="handle-shop-item">
        <view class="handle-shop-icon shop-icon"><image src="../../images/icon/shop.png"></image></view>
        <text class="handle-txt">进入店铺</text>
      </view>
    </view> -->
    <!-- </view> -->
    <!-- 店铺end -->
    <!-- 商品详情 -->
    <view class="prod-detail">
      <rich-text nodes="{{content}}"></rich-text>
    </view>
    <!-- 商品详情end -->

    <!-- 为你推荐-->
    <view class="text-block" wx:if="{{prodList.length>0}}">
      <image src="/images/icon/tuijian.png" mode="" class="icon"></image>
      <view class="title">为你推荐</view>
      <image src="/images/icon/tuijian.png" mode="" class="icon"></image>
    </view>
    <view class="prod-content" wx:if="{{prodList.length>0}}">
        <view class="left">
          <block wx:for="{{prodList}}" wx:key="index">
            <view wx:if="{{index%2==0}}">
              <view class="item" bindtap='toProdPage' data-prodid="{{item.prodId}}" data-shopid="{{item.shopId}}">
                <view wx:if="{{item.stocks == 0}}" class="sell-out-box">
                  <view class="sell-out-text">商品已售罄</view>
                </view>
                <image lazy-load class="item-img" src="{{item.pic}}" mode="widthFix"></image>
                <view class="item-title-box">
                  <view class="item-title">{{item.prodName}}</view>
                </view>
                <view class="name">
                  <!-- <view class="name-title">{{'已售'+item.salesVolume}}</view> -->
                  <!-- <view class="tag-box">
                    <view class="tag">自营</view>
                    <view class="text">月回头客5999+人</view>
                  </view> -->
                  <view class="heart">
                    <view class="name-price">
                      <view style="font-size:26rpx;color: #FF4D3A;">￥</view>{{wxs.toPrice(item.price)}}
                    </view>

                    <view wx:if="{{item.prodCount}}" class="num-box">
                      <image class="btn" data-num="-1" data-item="{{item}}" catch:tap="handleNum" src="/images/icon/reduce.png" mode=""/>
                        <view class="num">{{item.prodCount||0}}</view>
                      <image class="btn" data-num="1" data-item="{{item}}" data-type="add" catch:tap="handleNum" src="/images/icon/add.png" mode=""/>
                     </view>
                    <image wx:else class="test" style="width:52rpx;height:52rpx;" src="/images/icon/car-btn.png" mode="" data-img="/images/icon/car-btn.png" data-type="add" data-num="1" data-item="{{item}}" data-index="{{index}}" catch:tap="handleNum" />
                  </view>
                  <!-- <view class="rank-box">
                    <image src="/images/icon/top-icon.png" mode="" class="icon"/>
                    <view class="text">粮油调味热卖榜</view>
                    <image src="/images/icon/top1.png" mode="" class="top"/>
                  </view> -->
                </view>
              </view>
            </view>
          </block>
        </view>
        <view class="right">
          <block wx:for="{{prodList}}" wx:key="index">
            <view wx:if="{{index%2==1}}">
              <view class="item" bindtap='toProdPage' data-prodid="{{item.prodId}}"  data-shopid="{{item.shopId}}">
                <view wx:if="{{item.stocks == 0}}" class="sell-out-box">
                  <view class="sell-out-text">商品已售罄</view>
                </view>
                <image class="item-img" lazy-load src="{{item.pic}}" mode="widthFix"></image>
                <view class="item-title-box">
                  <view class="item-title">{{item.prodName}}</view>
                </view>
                <view class="name">
                  <!-- <view class="name-title">{{'已售'+item.salesVolume}}</view> -->
                  <!-- <view class="tag-box">
                    <view class="tag">自营</view>
                    <view class="text">月回头客5999+人</view>
                  </view> -->
                  <view class="heart">
                    <view class="name-price">
                      <view style="font-size:26rpx;color: #FF4D3A;">￥</view>{{wxs.toPrice(item.price)}}
                    </view>
                    <view wx:if="{{item.prodCount}}" class="num-box">
                      <image class="btn" data-num="-1" data-item="{{item}}" catch:tap="handleNum" src="/images/icon/reduce.png" mode=""/>
                        <view class="num">{{item.prodCount||0}}</view>
                      <image class="btn" data-num="1" data-item="{{item}}" data-type="add" catch:tap="handleNum" src="/images/icon/add.png" mode=""/>
                     </view>
                    <image wx:else class="test" style="width:52rpx;height:52rpx;" src="/images/icon/car-btn.png" mode="" data-img="/images/icon/car-btn.png" data-type="add" data-num="1" data-item="{{item}}" data-index="{{index}}" catch:tap="handleNum" />
                  </view>
                  <!-- <view class="rank-box">
                    <image src="/images/icon/top-icon.png" mode="" class="icon"/>
                    <view class="text">粮油调味热卖榜</view>
                    <image src="/images/icon/top1.png" mode="" class="top"/>
                  </view> -->
                </view>
              </view>
            </view>
          </block>
        </view>
      </view>
      <block wx:if="{{prodList.length>0}}">
        <view class="tips" wx:if="{{isAll}}">已经到底咯~</view>
        <view class="loading-box" wx:else>
          <van-loading size="20px" type="spinner" color="#006CE8">加载中...</van-loading>
        </view>
      </block>

      <!-- 为你推荐end -->

  </view>

  <!-- 底部按钮 -->
  <view class="cart-footer {{totalStocks>0?'':'gray'}}" wx-if="{{!groupActivityId}}">
    <view class="btn icon" bindtap='toHomePage'>
      <image src="../../images/tabbar/homepage.png"></image>
      首页
    </view>
    <view class='btn icon contact-btn-box'>
      <image src='../../images/icon/shop-customer-service.png'></image>
      客服
      <button class="contact-btn" open-type="contact" bindcontact="handleContact" session-from="sessionFrom"></button>
    </view>
    <view class="btn icon car-box" bindtap='toCartPage'>
      <image src="../../images/tabbar/basket.png"></image>
      购物车
      <view class='badge badge-1' wx:if="{{totalCartNum>0}}">{{totalCartNum}}</view>
    </view>
    <view class="btn cart cart-radius" bindtap='addToCart'>
      <text>加入购物车</text>
    </view>
    <view class="btn buy cart-radius" bindtap='buyNow'>
      <text>立即购买</text>
    </view>
  </view>
  <!-- 底部按钮 end -->
  <!-- 积分 底部按钮 -->
  <!-- <view class="ex-integral-foot">
    <view class="ex-integral-btn">立即兑换</view>
  </view> -->

</view>





<!-- 规格弹窗 -->
<view class="pup-sku" wx:if="{{skuShow}}">
  <view class="pup-sku-main border-radius-t-r">
    <view class='pup-sku-header border-radius-t-r'>
      <view class='close' bindtap='closePopup'></view>
      <view class="pup-sku-img">
        <image src="{{defaultSku.pic?defaultSku.pic:pic}}"></image>
      </view>
      <view class="pup-sku-prod">
        <!-- <view class="prod-title">{{prodName}}</view> -->
        <view class="pup-sku-price" wx:if="{{skuShowType==0 && findSku}}">
          ￥<text class="pup-sku-price-int">{{wxs.parsePrice(defaultSku.price)[0]}}</text>.{{wxs.parsePrice(defaultSku.price)[1]}}
        </view>
        <view class="pup-sku-price group-sku-pri" wx:if="{{skuShowType==1 && findSku}}">
          <text>￥<text class="pup-sku-price-int">{{wxs.parsePrice(detaultGroupSku.actPrice)[0]}}</text>.{{wxs.parsePrice(detaultGroupSku.actPrice)[1]}}</text>
          <text class="act-price-con">{{groupActivity.groupNumber}}人拼团价</text>
        </view>
        <view class="pup-sku-price" wx-if="{{totalStocks<0}}">无货</view>
        <view class='pup-sku-prop'>
          <text>已选</text><text decode="{{true}}">&nbsp;{{selectedProp.length>1?selectedProp+'，':selectedProp}}{{prodNum}}&nbsp;件</text>
        </view>
      </view>
    </view>
    <view class='pup-sku-body'>
      <view class="pup-sku-area">
        <block wx:for="{{skuGroup}}" wx:for-index="key" wx:for-item="value" wx:key='*this'>
          <view class='sku-kind'>{{key}}</view>
          <view class='sku-choose' wx:if="{{item!=null}}">
            <block wx:for="{{value}}" wx:key='*this'>
              <text class="sku-choose-item {{wxs.array_contain(selectedProp,item)?'active':''}} {{['gray','','dashed'][wxs.props_contain2(allProperties,selectedPropObj,key,item,propKeys)]}}" data-ok="{{wxs.props_contain2(allProperties,selectedPropObj,key,item,propKeys)}}" bindtap='toChooseItem' data-key="{{key}}" data-val="{{item}}">{{item||''}}</text>
            </block>
          </view>
        </block>
      </view>
      <view class="pup-sku-count">
        <view class="num-wrap">
          <view class="minus" bindtap='onCountMinus'>
            <text class="row"></text>
          </view>
          <view class="text-wrap">
            <input type="number" value="{{prodNum}}" disabled />
          </view>
          <view class="plus" bindtap='onCountPlus'>
            <text class="row"></text>
            <text class="col"></text>
          </view>
        </view>
        <view class="count-name">数量</view>
      </view>
    </view>
    <view class='pup-sku-footer {{totalStocks>0?"":"gray"}}'>
      <view class="btn cart" bindtap='addToCart' wx:if="{{skuShowType==0}}">加入购物车</view>
      <view class="btn buy" bindtap='buyNow' wx:if="{{skuShowType==0}}">立即购买</view>
      <view class="btn buy" bindtap='groupConfirmOrder' data-teamid="0" wx:if="{{skuShowType==1}}">
        开团
      </view>
    </view>
  </view>
</view>
<!-- 规格弹窗 end -->
<!-- 评价弹窗 -->
<view class="cmt-popup" wx:if="{{commentShow}}">
  <view class="cmt-tit">
    <view class="cmt-t">
      商品评价
      <text class="cmt-good">好评度{{prodCommData.goodRate}}</text>
    </view>
    <text class="close" bindtap='closePopup'></text>
  </view>
  <view class="cmt-cont">
    <view class="cmt-tag">
      <text bindtap='getProdCommPage' data-commStatus="-1" class="{{commStatus==-1?'selected':''}}">全部({{prodCommData.all}})</text>
      <text bindtap='getProdCommPage' data-commStatus="0" class="{{commStatus==0?'selected':''}}">好评({{prodCommData.goodCount}})</text>
      <text bindtap='getProdCommPage' data-commStatus="1" class="{{commStatus==1?'selected':''}}">中评({{prodCommData.middleCount}})</text>
      <text bindtap='getProdCommPage' data-commStatus="2" class="{{commStatus==2?'selected':''}}">差评({{prodCommData.badCount}})</text>
      <text bindtap='getProdCommPage' data-commStatus="3" class="{{commStatus==3?'selected':''}}">有图({{prodCommData.picCount}})</text>
    </view>
    <view class="cmt-items">
      <view class="cmt-item" wx:for="{{prodCommPage.records}}" wx:key="prodCommId">
        <view class="cmt-user">
          <text class="date">{{item.recTime}}</text>
          <view class="cmt-user-info">
            <image class="user-img" src="{{item.pic?item.pic:'../../images/icon/head04.png'}}"></image>
            <view class="nickname">{{item.isAnonymous==1?'匿名评价':item.nickName}}</view>
            <comm-star value="{{item.score}}"></comm-star>
          </view>
        </view>
        <view class="cmt-cnt">{{item.content}}</view>
        <scroll-view class="cmt-attr" scroll-x="true" wx:if="{{item.pics.length}}">
          <image src="{{commPic}}" wx:for='{{item.pics}}' wx:for-item="commPic" wx:key='index' data-pics="{{item.pics}}" data-index="{{index}}" bindtap='clickImg'></image>
        </scroll-view>
        <view class="cmt-reply" wx:if="{{item.replyContent}}">
          <text class='reply-tit'>店铺回复：</text>
          <view class="reply-content">{{item.replyContent}}</view>
        </view>
      </view>
    </view>
    <!-- 列表空 -->
    <view class="empty" wx:if="{{!prodCommPage.records.length}}">
      <view class="empty-icon">
        <image src="../../images/icon/empty-com.png"></image>
      </view>
      <view class="empty-text">还没有商品评价~</view>
    </view>
    <!-- /列表空 -->
    <view class="load-more" wx:if='{{prodCommPage.pages > prodCommPage.current}}'>
      <text bindtap='getMoreCommPage'>点击加载更多</text>
    </view>
  </view>
</view>
<!-- 评价弹窗 end -->
<!-- 悬浮按钮 -->
<view class="suspension-box {{showBacktop?'scroll-top':''}}" wx:if="{{!popupShow && !skuShow && !commentShow && !skuGroupShow}}">
  <!-- 赚字浮层 -->
  <view class="promo-con" wx:if="{{isDist && isDistProd}}" bindtap='onShowShare' data-type="2">
    <view class="earn">赚</view>
  </view>
  <!-- 分享 -->
  <button class="suspension-btn btn-type" open-type='share' wx:if="{{!(isDist && isDistProd)}}">
    <!-- / -->
    <image src="../../images/icon/share-prod.png"></image>
  </button>
  <!-- 回到顶部 -->
  <view class="suspension-btn" bindtap='backToTop' wx:if="{{showBacktop}}">
    <image src="../../images/icon/back-to-top.png"></image>
  </view>
</view>
<!-- /悬浮按钮 -->
<!-- 分享弹窗 -->
<view class='promo-share' wx:if="{{shareShow}}">
  <view class='promo-main'>
    <view class='promo-icons-close' bindtap='closeEarn'>
      <image src="../../images/icon/close.png"></image>
    </view>
    <view class='promo-tit'>
      <title>立即分享给好友</title>
    </view>
    <view class='promo-desc'>
      <text>朋友通过你分享的页面成功购买后，你可获得对应的佣金，佣金可“个人中心-分销员中心" 里查看</text>
    </view>
    <view class='promo-icons'>
      <button class='promo-img1' open-type='share'>
        <image src="../../images/icon/weixin.png"></image>
        微信
      </button>
      <view class='promo-img1' bindtap='genWeixinCode'>
        <image src="../../images/icon/erweima.png"></image>
        二维码
      </view>
    </view>
    <view class='promo-btn' bindtap='toDistCenterPage'>我的分销员中心</view>
  </view>
</view>
<!-- 分享弹窗 end -->
<!-- 二维码弹窗 -->
<view class='code-popup' wx:if="{{wxCodeShow}}">
  <view class='code-main'>
    <view class="close-v" catchtap='closeCodePopup'>
      <image src="../../images/icon/close.png" class="close-png"></image>
    </view>
    <view class="code-v">
      <image src="{{shareWxCode}}" class="wx-code"></image>
    </view>
    <view class="code-txt" bindtap="downloadImg">保存至相册</view>
  </view>
</view>



<!-- 抛物线动画容器（数据驱动渲染） -->
<view class="animation-wrap" id="animationWrap">
  <view class="{{move?'move-x':''}}" style="position:absolute;width: 50rpx;height: 50rpx;left:{{animateInfo.startX}}px;top:{{animateInfo.startY}}px;--endX: {{animateInfo.endX-animateInfo.startX}}px;--endY: {{animateInfo.endY-animateInfo.startY}}px;" bind:animationend="endAnimate" >
    <image 
      class="{{move?'move-y':''}}"
      src="/images/icon/car-btn.png"
      style="width: 40rpx;height: 40rpx;--endX: {{animateInfo.endX-animateInfo.startX}}px; --endY: {{animateInfo.endY-animateInfo.startY}}px;"
      bind:animationend="endAnimate"
    ></image>
  </view>
</view>
<!-- 二维码弹窗 end -->
<wxs module="wxs" src="../../wxs/number.wxs" />