test01/pages/goods-details/index.wxml

<import src="/template/login/index.wxml" />
<view class="container">
  <view class="swiper-container">
    <swiper class="swiper_box" indicator-dots="true" indicator-active-color="#fff" autoplay="{{!goodsDetail.basicInfo.videoId}}" circular>
      <swiper-item wx:if="{{goodsDetail.basicInfo.videoId}}">
        <video src="{{videoMp4Src}}" autoplay="true" loop="true" style='width:100%;height:100%;'></video>
      </swiper-item>
      <swiper-item wx:for="{{goodsDetail.pics}}" wx:key="id">
        <image src="{{item.pic}}" class="slide-image" mode="aspectFill" lazy-load="true" />
      </swiper-item>      
    </swiper>
  </view>
  <view class="goods-info">
    <view class="goods-title">{{goodsDetail.basicInfo.name}}</view>
    <view class="goods-share" wx:if="{{goodsDetail.basicInfo.commissionType == 1}}">分享有赏，好友下单后可得 {{goodsDetail.basicInfo.commission}} 积分奖励</view>
    <view class="goods-share" wx:if="{{goodsDetail.basicInfo.commissionType == 2}}">分享有赏，好友下单后可得 {{goodsDetail.basicInfo.commission}}元 现金奖励</view>
    <view class="goods-profile">
      <view class="p"><text>¥</text> {{selectSizePrice}}</view>
      <view wx:if="{{goodsDetail.basicInfo.originalPrice && goodsDetail.basicInfo.originalPrice > 0}}" class="goods-price" style='color:#aaa;text-decoration:line-through;padding: 15rpx 0rpx 0rpx 15rpx;'><text>¥</text> {{selectSizeOPrice}}</view>
      <view class="r">{{goodsDetail.basicInfo.numberSells}}人已买</view>
    </view>
    <view class="goods-info-fx">
      <view class='item'>
        <image src='/images/share/share1.png'></image>
        <button open-type='share'></button>
      </view>
      <view class='item' bindtap="drawSharePic">
        <image src='/images/share/share2.png'></image>
      </view>
    </view>
  </view>
  <van-cell wx:if="{{ shareQuanziProduct }}" custom-class="vw100" center title="微信圈子 好物圈">
    <share-button type="1" fore-color="#e64340" product="{{ shareQuanziProduct }}" bind:error="on_share_quanzi_error" />
  </van-cell>
  
  <view class="page__bd" wx:if="{{curGoodsKanjia}}" style='width:750rpx;'>
    <view class="weui-cells__title">商品砍价设置</view>
    <view class="weui-cells weui-cells_after-title">
      <view class="weui-cell">
        <view class="weui-cell__bd">限量</view>
        <view class="weui-cell__ft">{{curGoodsKanjia.number}}份</view>
      </view>
      <view class="weui-cell">
        <view class="weui-cell__bd">已售</view>
        <view class="weui-cell__ft">{{curGoodsKanjia.numberBuy}}份</view>
      </view>
      <view class="weui-cell">
        <view class="weui-cell__bd">原价</view>
        <view class="weui-cell__ft">￥{{curGoodsKanjia.originalPrice}}</view>
      </view>
      <view class="weui-cell">
        <view class="weui-cell__bd">底价</view>
        <view class="weui-cell__ft">￥{{curGoodsKanjia.minPrice}}</view>
      </view>
      <view class="weui-cell">
        <view class="weui-cell__bd">截止</view>
        <view class="weui-cell__ft">{{curGoodsKanjia.dateEnd}}</view>
      </view>
    </view>
  </view>
  <view class="page__bd" wx:if="{{pingtuanSet}}" style='width:750rpx;'>
    <view class="weui-cells__title">商品拼团设置</view>
    <view class="weui-cells weui-cells_after-title">
      <view class="weui-cell">
        <view class="weui-cell__bd">已成团</view>
        <view class="weui-cell__ft">{{pingtuanSet.numberSucccess}}</view>
      </view>
      <view class="weui-cell">
        <view class="weui-cell__bd">成团人数</view>
        <view class="weui-cell__ft">{{pingtuanSet.numberPersion}}</view>
      </view>
      <view class="weui-cell">
        <view class="weui-cell__bd">退款条件</view>
        <view class="weui-cell__ft">{{pingtuanSet.timeoutHours}}小时未成团</view>
      </view>
      <view class="weui-cell">
        <view class="weui-cell__bd">截止</view>
        <view class="weui-cell__ft">{{pingtuanSet.dateEnd}}</view>
      </view>
    </view>
  </view>
  <view class="curKanjiaprogress" wx:if="{{curKanjiaprogress}}">
    <view class="name">帮
      <text style='color:red;font-weight:bold;'>{{curKanjiaprogress.joiner.nick}}</text> 砍价吧！</view>
    <view class="weui-badge">当前价格 ￥ {{curKanjiaprogress.kanjiaInfo .curPrice}}
    </view>
    <view class="weui-progress" style='background-color:#fff;'>
      <view class="weui-progress__bar">
        <progress percent="{{100 * (curGoodsKanjia.originalPrice - curKanjiaprogress.kanjiaInfo.curPrice) / (curGoodsKanjia.originalPrice - curGoodsKanjia.minPrice)}}" stroke-width="8" />
      </view>
    </view>
    <view class="weui-flex">
      <view>
        <view class="placeholder">{{curGoodsKanjia.originalPrice}}</view>
      </view>
      <view class="weui-flex__item"></view>
      <view>
        <view class="placeholder">{{curGoodsKanjia.minPrice}}</view>
      </view>
    </view>
    <view class="weui-flex">
      <view>
        <view class="placeholder">原价</view>
      </view>
      <view class="weui-flex__item"></view>
      <view>
        <view class="placeholder">底价</view>
      </view>
    </view>
    <view class="weui-flex">
      <view class="weui-flex__item kjbutton">
        <button class="weui-btn" type="primary" open-type="share">邀请朋友帮忙</button>
      </view>
      <view class="weui-flex__item kjbutton">
        <button class="weui-btn" type="warn" bindtap="helpKanjia" disabled="{{myHelpDetail}}">{{myHelpDetail?"您已砍过":"帮TA砍"}}</button>
      </view>
    </view>
    <view class="weui-cells weui-cells_after-title">
      <view class="weui-cell">
        <view class="weui-cell__bd">帮砍人数</view>
        <view class="weui-cell__ft">{{curKanjiaprogress.kanjiaInfo .helpNumber}}
        </view>
      </view>
      <view class="weui-cell">
        <view class="weui-cell__bd">状态</view>
        <view class="weui-cell__ft">{{curKanjiaprogress.kanjiaInfo .statusStr}}
        </view>
      </view>
      <view class="weui-cell">
        <view class="weui-cell__bd">报名时间</view>
        <view class="weui-cell__ft">￥{{curKanjiaprogress.kanjiaInfo .dateAdd}}
        </view>
      </view>
    </view>
  </view>
  <button wx:if="{{curGoodsKanjia && (!curKanjiaprogress || curKanjiaprogress.kanjiaInfo.uid != curuid)}}" class="weui-btn" type="warn" bindtap="joinKanjia" style='width:700rpx;'>我也要报名参与</button>
  <view class='space'></view>
  <view class="goods-des-info" style="margin-top:35rpx;" wx:if="{{pingtuanList}}">
    <view class="label-title" style="border-bottom:1px solid #eee;">{{pingtuanList.length}}人在拼单，可直接参与</view>
    <view class="goods-text" style="margin-top:15rpx;border-bottom:1px solid #eee;overflow:hidden;" wx:for="{{pingtuanList}}" wx:key="id">
      <view style="width:150rpx;float:left;">
        <image style="width: 150rpx; height: 150rpx;" src="{{item.apiExtUser.avatarUrl}}"></image>
        <view style="width:150rpx;text-align:center;overflow: hidden;white-space: nowrap;text-overflow: ellipsis;">{{item.apiExtUser.nick}}</view>
      </view>
      <view style="width:500rpx;float:left;margin-left:35rpx;">
        <view>已有
          <text style="color:red"> {{item.helpNumber}} </text>人参与</view>
        <view style="color: #B0B0B0;font-size:24rpx;">截止: {{item.dateEnd}}</view>
        <button type="warn" size="mini" data-pingtuanopenid="{{item.id}}" bindtap="toPingtuan"> 去拼单 </button>
      </view>
    </view>
  </view>
  <van-cell wx:if="{{hasMoreSelect && goodsDetailSkuShowType==0}}" custom-class="vw100" is-link bind:click="bindGuiGeTap">
    <view slot="title">
      请选择:
      <block wx:for="{{goodsDetail.properties}}" wx:key="id"> {{item.name}}</block>
      <block wx:for="{{goodsAddition}}" wx:key="id"> {{item.name}}</block>
    </view>
  </van-cell>
  <view class="size-label-box2" wx:if="{{goodsDetailSkuShowType==1}}">
    <view class="label-title">选择商品规格</view>
    <view class="size-label-box">
      <block wx:for="{{goodsDetail.properties}}" wx:for-item="property" wx:for-index="idx" wx:key="id">
        <view class="label">{{property.name}}</view>
        <view class="label-item-box">
          <view class="label-item {{item.active ? 'active' : '' }}" wx:for="{{property.childsCurGoods}}" wx:key="id" bindtap="labelItemTap" data-propertyindex="{{idx}}" data-propertychildindex="{{index}}">
            {{item.name}}
          </view>
        </view>
      </block>
    </view>
    <van-cell title="购买数量">
      <view>
        <van-stepper value="{{ buyNumber }}" min="{{ buyNumMin }}" max="{{ buyNumMax }}" bind:change="stepChange" />
      </view> 
    </van-cell>
  </view>
  <view wx:if="{{shopSubdetail}}" class="shop-container">
    <image mode="aspectFill" src="{{shopSubdetail.info.pic}}"></image>
    <view class="info">
      <view class="title">{{shopSubdetail.info.name}}</view>
      <view class="address">{{shopSubdetail.info.address}}</view>
    </view>
  </view>
  <view class="goods-des-info">
    <view class="label-title">商品介绍</view>
    <view class="goods-text">
      <parser html="{{goodsDetail.content}}" />
    </view>
  </view>
  <van-cell-group wx:if="{{!curGoodsKanjia && reputation}}" custom-class="vw100" title="宝贝评价">
    <block wx:for="{{reputation}}" wx:key="id">
      <van-cell
        custom-class="reputation-cell"
        icon="{{item.user.avatarUrl}}"
        title="{{item.user.nick}}"
        label="{{item.goods.dateReputation}}"
        border="{{ false }}"
      >
        <van-rate value="{{ item.goods.goodReputation }}" color="#e64340" readonly />
      </van-cell>
      <van-cell wx:if="{{ item.goods.goodReputationRemark }}" title-class="reputation-cell-reamrk" title="{{item.goods.goodReputationRemark}}" />
      <view wx:if="{{ item.reputationPics }}" class="reputation-pics">
        <image wx:for="{{item.reputationPics}}" wx:for-item="picItem" src="{{ picItem.pic }}" mode="aspectFill" bindtap="previewImage" data-url="{{ picItem.pic }}"></image>
      </view>
      <van-cell wx:if="{{ item.goods.goodReputationReply }}" title-class="reputation-cell-reamrk" title="掌柜回复:{{item.goods.goodReputationReply}}" />
    </block>
  </van-cell-group>
  <view wx:if="{{curKanjiaprogress && curKanjiaprogress.helps && curKanjiaprogress.helps.length>0}}" class="weui-panel weui-panel_access" style="width:750rpx;">
    <view class="weui-panel__hd">砍价记录</view>
    <view class="weui-panel__bd">
      <view wx:for="{{curKanjiaprogress.helps}}" wx:key="*this" class="weui-media-box weui-media-box_appmsg">
        <view class="weui-media-box__hd weui-media-box__hd_in-appmsg">
          <image class="weui-media-box__thumb" src="{{item.avatarUrl}}" />
        </view>
        <view class="weui-media-box__bd weui-media-box__bd_in-appmsg">
          <view class="weui-media-box__title" style='color:red;'>￥ {{item.cutPrice}}</view>
          <view class="weui-media-box__desc" style='margin-top:10rpx;'>好友
            <text style='color:red;'>{{item.nick}}</text> 于 {{item.dateAdd}} 帮砍</view>
        </view>
      </view>
    </view>
  </view>
  <view class='kjBuyButton' wx:if="{{curGoodsKanjia && curKanjiaprogress}}">
    <view class="item" wx:if="{{curKanjiaprogress.kanjiaInfo.uid != curuid}}">
      <van-button type="primary" block bind:click="helpKanjia" disabled="{{myHelpDetail}}">{{myHelpDetail?"您已砍过":"帮TA砍"}}</van-button>
    </view>
    <view class="item" wx:else>
      <van-button type="danger" block bind:click="tobuy">用当前价购买</van-button>
    </view>
  </view>
  <van-goods-action wx:if="{{!curGoodsKanjia}}">
    <van-goods-action-icon icon="chat-o" text="客服" open-type="contact" send-message-title="{{goodsDetail.basicInfo.name}}" send-message-img="{{goodsDetail.basicInfo.pic}}" send-message-path="/pages/goods-details/index?id={{goodsDetail.basicInfo.id}}" 	show-message-card="{{ true }}" />
    <van-goods-action-icon icon="cart-o" text="购物车" bind:click="goShopCar" info="{{ shopNum ? shopNum : '' }}" />
    <van-goods-action-icon icon="{{faved?'like':'like-o'}}" text="收藏" bind:click="addFav" />
    <van-goods-action-button
      wx:if="{{!goodsDetail.basicInfo.pingtuan}}"
      text="加入购物车"
      type="warning"
      bind:click="{{goodsDetailSkuShowType==0?'toAddShopCar':'addShopCar'}}"
    />
    <van-goods-action-button
      wx:if="{{!goodsDetail.basicInfo.pingtuan}}"
      text="立即购买"
      data-shopType="{{shopType}}"
      bind:click="{{goodsDetailSkuShowType==0?'tobuy':'buyNow'}}"
    />
    <van-goods-action-button
      wx:if="{{goodsDetail.basicInfo.pingtuan}}"
      text="单独购买"
      type="warning"
      bind:click="tobuy"
    />
    <van-goods-action-button
      wx:if="{{goodsDetail.basicInfo.pingtuan}}"
      text="发起拼团"
      bind:click="toPingtuan"
    />
  </van-goods-action>
</view>

<block wx:if="{{posterShow}}">
  <view class="poster-mask"></view>
  <view class="poster">
    <canvas class="canvas" style="{{canvasstyle}}" canvas-id="firstCanvas"></canvas>
  </view>
  <view class="poster-btn">
    <button type="primary" size="mini" bindtap='_saveToMobile'> 保存图片 </button>
    <button type="warn" size="mini" bindtap='closePop'> 关闭 </button>
  </view>
</block>

<template is="apifmLogin" data="{{wxlogin: wxlogin}}" />
<!-- <float-menu />  -->


<poster id="poster" config="{{posterConfig}}" bind:success="onPosterSuccess" bind:fail="onPosterFail"></poster>
<view wx:if="{{showposterImg}}" class="popup-mask"></view>
<view wx:if="{{showposterImg}}" class="posterImg-box">
  <image mode="widthFix" class="posterImg" src="{{posterImg}}"></image>
  <view class="btn-create" bindtap="savePosterPic">保存到相册</view>
</view>

<van-popup
  show="{{ !hideShopPopup }}"
  round
  closeable
  position="bottom"
  custom-style="padding-top:48rpx;max-height: 80%;"
  bind:close="closePopupTap">
  <van-card
    centered
    price="{{ selectSizePrice }}"
    origin-price="{{ selectSizePrice != selectSizePrice ? selectSizeOPrice : '' }}"
    title="{{ goodsDetail.basicInfo.name }}"
    thumb="{{ skuGoodsPic }}"
  />
  <view class="size-label-box">
    <block wx:for="{{goodsDetail.properties}}" wx:for-item="property" wx:for-index="idx" wx:key="id">
      <view class="label">{{property.name}}</view>
      <view class="label-item-box">
        <view class="label-item {{item.active ? 'active' : '' }}" wx:for="{{property.childsCurGoods}}" wx:key="id" bindtap="labelItemTap" data-propertyindex="{{idx}}" data-propertychildindex="{{index}}">
          {{item.name}}
        </view>
      </view>
    </block>
    <block wx:for="{{goodsAddition}}" wx:for-item="property" wx:for-index="idx" wx:key="id">
      <view class="label">{{property.name}}</view>
      <view class="label-item-box">
        <view class="label-item {{item.active ? 'active' : '' }}" wx:for="{{property.items}}" wx:key="id" bindtap="labelItemTap2" data-propertyindex="{{idx}}" data-propertychildindex="{{index}}">
          {{item.name}}
        </view>
      </view>
    </block>
  </view>
  <van-cell title="购买数量">
    <view>
      <van-stepper value="{{ buyNumber }}" min="{{ buyNumMin }}" max="{{ buyNumMax }}" bind:change="stepChange" />
    </view> 
  </van-cell>
  <van-button wx:if="{{shopType =='addShopCar'}}" bindtap="addShopCar" type="danger" block>加入购物车</van-button>
  <van-button wx:if="{{shopType =='tobuy' || shopType =='toPingtuan'}}" data-shopType="{{shopType}}" bindtap="buyNow" type="danger" block>立即购买</van-button>
</van-popup>