seahorsesShop_miniapp/pages/prod/prod.wxml

<!-- 商品详情 -->
<view class="container ">
  <!-- 轮播图 -->
  <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 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="countdown-box clearfix" wx-if="{{groupActivityId}}">
      <!-- 拼团 -->
      <text class="second-kill">拼团</text>
      <view class="countdown-content">
        <text class="countdown-tips" wx-if="{{groupActivity.activityStatus === 1}}">距开始仅剩</text>
        <text class="countdown-tips" wx-if="{{groupActivity.activityStatus !== 1}}">距结束仅剩</text>
        <text class="countdown-time">{{endOfGroupTime.day}} 天 {{endOfGroupTime.hou}} 时 {{endOfGroupTime.min}} 分 {{endOfGroupTime.sec}} 秒
        </text>
      </view>
    </view>
    <!-- 普通商品价格 -->
    <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>
      <!-- <text class="sales"></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="sales-p">{{brief}}</view>

      <!-- 拼团商品价格 -->
      <view class="goods-price" wx-if="{{groupActivityId}}">
        <view class="current-price">
          <text class="current-price">
            <text class="price">￥<text class="price-num">{{wxs.parsePrice(detaultGroupSku.actPrice)[0]}}</text> .{{wxs.parsePrice(detaultGroupSku.actPrice)[1]}}</text>
            <!-- <text class="sub">￥{{detaultGroupSku.actPrice}}</text> -->
          </text>
          <text class="condition">{{groupActivity.groupNumber}}人拼团价</text>
        </view>
        <view class="original">
          原价
          <text class="original-price">￥{{wxs.toPrice(detaultGroupSku.price)}}</text>
        </view>
      </view>
      <!-- 积分商品价格 -->
      <!-- <view class="integral-prod-price" wx-if="">100积分</view> -->
    </view>
    <!-- 商品信息end -->

    <!-- 满减折 -->
    <view class="discount border-radius-box" wx:if="{{prodDiscountList.length}}" bindtap="clickDiscount">
      <view class="coupon-tit">促销</view>
      <view class="coupon-con discount-con">
        <block wx:for="{{prodDiscountList}}" wx:key="discountId" wx:if="{{index<1}}">
          <view class="discount-item">
            <view class="discount-tag">{{wxs.parseDiscount(item.discountRule)}}</view>
            <text class="discount-content">
              <text wx:if="{{item.discountType}}">每</text> {{item.discountName}}，最高减免{{item.maxReduceAmount}}元
            </text>
          </view>
        </block>
      </view>
      <!-- <view class="num">共{{prodDiscountList.length}}张</view> -->
      <view class="more">...</view>
    </view>
    <!-- 满减折end -->

    <!-- 领券 -->
    <view class="coupon border-radius-box" bindtap='showPopup' wx:if="{{couponList.length && !groupActivityId}}">
      <view class="coupon-tit">领券</view>
      <view class="coupon-con">
        <text class="item" wx:for="{{couponList}}" wx:if="{{index<2}}" wx:key="couponId">满{{item.cashCondition}}<block wx:if="{{item.couponType == 1}}">减{{item.reduceAmount}}</block>
          <block wx:if="{{item.couponType == 2}}">打{{item.couponDiscount}}折</block>
        </text>
      </view>
      <view class="num">共{{couponList.length}}张</view>
      <view class="more">...</view>
    </view>
    <!-- 领券end -->
    <!-- 拼团信息 -->
    <view class="spell-infor" wx-if="{{joinGroupList.length}}">
      <view class="spell-infor-title">以下小伙伴正在发起拼团，你可以直接参加</view>
      <view class="spell-infor-content" wx:for="{{joinGroupList}}" wx:key='groupTeamId'>
        <!-- 头像 -->
        <view class="head-img">
          <image src="{{item.sharePic}}"></image>
        </view>
        <!-- 信息 -->
        <view class="spell-msg">
          <view class="username">{{item.shareNickName}}</view>
          <view class="spell-text">
            还差
            <text class="red-font">{{item.groupNumber - item.joinNum}}</text> 人成团，剩余 {{item.endOfGroupTime.hou}}时{{item.endOfGroupTime.min}}分{{item.endOfGroupTime.sec}}秒
          </view>
        </view>
        <!-- 凑团按钮 -->
        <view class="join-group" bindtap="toSpellGroupDetail" data-groupteamid="{{item.groupTeamId}}">
          去凑团
        </view>
      </view>
      <!-- 详情 -->
      <view class="rules clearfix">
        <text class="rules-text01">支付开团邀请{{groupActivity.groupNumber}}人参团，人数不足自动退款</text>
      </view>
    </view>
    <!-- 拼团信息end -->
    <!-- 已选规格 -->
    <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.number}}）
          <!-- <text class="cmt-good">好评{{prodCommData.positiveRating}}%</text> -->
        </view>
        <text class="cmt-good">好评{{prodCommData.positiveRating}}%     <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.number}})</text>
          <text>好评({{prodCommData.praiseNumber}})</text>
          <text>中评({{prodCommData.secondaryNumber}})</text>
          <text>差评({{prodCommData.negativeNumber}})</text>
          <text>有图({{prodCommData.picNumber}})</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="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" wx-if="{{shopId==1}}">自营店铺</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>

  <!-- 底部按钮 -->
  <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" 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 class="foot-box" wx-if="{{groupActivityId}}">
    <view class="footer">
      <view class="foot-btn" bindtap='toHomePage'>
        <image src="../../images/tabbar/homepage.png"></image>
        首页
      </view>
      <view catchtap='freeTell' class='foot-btn'>
        <image src='../../images/icon/shop-customer-service.png'></image>
        客服
      </view>
      <view class="foot-btn" bindtap='toCartPage'>
        <image src="../../images/tabbar/basket.png"></image>
        购物车
        <view class='badge badge-1' wx:if="{{totalCartNum>0}}">{{totalCartNum}}</view>
      </view>
      <view class="buy-btn alone-buy cart-radius" bindtap='showSku' data-alonebuy="1">
        <text>单独购买</text>
      </view>
      <view class="buy-btn group-buy cart-radius" bindtap='showGroupSku'>
        <text>开团</text>
      </view>
    </view>
  </view>
  <!-- end 底部按钮 -->
</view>


<!-- 满减折弹窗 -->
<view class="popup-hide" wx:if="{{showDiscountPopup}}">
  <view class="popup-box border-radius-t-r">
    <view class="popup-tit border-radius-t-r">
      <text>促销</text>
      <text class="close" bindtap='clickDiscount'></text>
    </view>
    <view class='popup-cnt popup-discount'>
      <view class="coupon-con discount-con">
        <block wx:for="{{prodDiscountList}}" wx:key="discountId">
          <view class="discount-item">
            <view class="discount-tag">{{wxs.parseDiscount(item.discountRule)}}</view>
            <text class="discount-content">
              <text wx:if="{{item.discountType}}">每</text> {{item.discountName}}，最高减免{{item.maxReduceAmount}}元
            </text>
          </view>
        </block>
      </view>
    </view>
  </view>
</view>
<!-- 满减折弹窗 end -->

<!-- 优惠券弹窗 -->
<view class="popup-hide" wx:if="{{popupShow}}">
  <view class="popup-box border-radius-t-r">
    <view class="popup-tit border-radius-t-r">
      <text>优惠券</text>
      <text class="close" bindtap='closePopup'></text>
    </view>
    <view class='popup-cnt'>
      <block wx:for="{{couponList}}" wx:key='couponId'>
        <coupon showTimeType="{{1}}" canUse="{{true}}" item="{{item}}"></coupon>
      </block>
    </view>
  </view>
</view>
<!-- 优惠券 end -->
<!-- 规格弹窗 -->
<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.positiveRating}}%</text>
    </view>
    <text class="close" bindtap='closePopup'></text>
  </view>
  <view class="cmt-cont">
    <view class="cmt-tag">
      <text bindtap='getProdCommPage' data-evaluate="-1" class="{{evaluate==-1?'selected':''}}">全部({{prodCommData.number}})</text>
      <text bindtap='getProdCommPage' data-evaluate="0" class="{{evaluate==0?'selected':''}}">好评({{prodCommData.praiseNumber}})</text>
      <text bindtap='getProdCommPage' data-evaluate="1" class="{{evaluate==1?'selected':''}}">中评({{prodCommData.secondaryNumber}})</text>
      <text bindtap='getProdCommPage' data-evaluate="2" class="{{evaluate==2?'selected':''}}">差评({{prodCommData.negativeNumber}})</text>
      <text bindtap='getProdCommPage' data-evaluate="3" class="{{evaluate==3?'selected':''}}">有图({{prodCommData.picNumber}})</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>
<!-- 二维码弹窗 end -->
<wxs module="wxs" src="../../wxs/number.wxs" />
<!-- <login-popup bind:onGotUserInfo="onGotUserInfo" isAuthInfo="{{isAuthInfo}}"></login-popup> -->