kmall-pt/wx-mall/pages/goods/goods.wxml

<scroll-view class="container" style="height: {{winHeight}}rpx" scroll-y="true">
  <view wx:if="{{showNavList}}" class="modal-wrap"></view>
  <view class="fast-nav">
    <contact-button wx:if="{{!showNavList}}" class="contact" size="25" type="primary" session-from="weapp">
      <text>找客服</text>
    </contact-button>
    <view wx:if="{{!showNavList}}" class="nav" bindtap="toggleNav">
      <text>快捷</text>
      <text>导航</text>
    </view>
    <view class="nav-list" wx:if="{{showNavList}}">
      <view class="nav-item">
        <text class="nav-text">首页</text>
        <view class="nav-cell" bindtap="switchNav" data-name="index">
          <image src="../../static/images/nav-1.png"></image>
        </view>
      </view>
      <view class="nav-item">
        <text class="nav-text">足迹</text>
        <navigator class="nav-cell" url="../ucenter/footprint/footprint">
          <image src="../../static/images/nav-2.png"></image>
        </navigator>
      </view>
      <view class="nav-item">
        <text class="nav-text">搜索</text>
        <navigator class="nav-cell" url="../search/search">
          <image src="../../static/images/nav-3.png"></image>
        </navigator>
      </view>
      <view class="nav-item">
        <text class="nav-text">购物车</text>
        <view class="nav-cell" bindtap="openCartPage" data-name="cart">
          <image src="../../static/images/nav-4.png"></image>
        </view>
      </view>
    </view>
    <view wx:if="{{showNavList}}" class="close" bindtap="toggleNav">X</view>
  </view>
  <view>
    <!-- 滚动的卡片布局 -->
    <view class='goodsimgs' bindtap="hideSwitchAttrPop">
      <view class='content-wrapper'>
        <view class='scroll-wrapper'>
          <scroll-view class='scroll-view'>
            <view class="items-wrapper" style="transform:translate3d({{leftWidth}}px, 0, 0)">
              <!-- 循环商品图开始 -->
              <view wx:for="{{gallery}}" wx:key="index" data-index="{{index}}" class="item" bindtouchstart='touchStart' bindtouchend='touchEnd'>
                <view class='rank-num' style="background-color: #c8c8c8">{{index+1}}/{{gallery.length}}</view>
                <view class='img-wrapper'>
                  <!-- 视频播放开始 -->
                  <view class="video2" data-id="{{item.id}}" bindtap="videoPlay" wx:if="{{item.file_type == 1}}">
                    <view hidden="{{videoHiddenName}}">
                      <video id="myVideo" style="width: 750rpx;height: calc(9 * 750rpx / 16);" src="{{item.img_url}}" objectFit="cover" show-center-play-btn enable-progress-gesture controls></video>
                    </view>

                    <view style="width: 750rpx;height: calc(9 * 750rpx / 16);" hidden="{{imgHiddenName}}">
                      <image lazy-load="true" class="model-img" style="width: 750rpx;height: calc(9 * 750rpx / 16);background-size:650rpx 321rpx;" mode="aspectFill" src="{{gallery[1].img_url}}?x-oss-process=image/resize,h_500" background-size="cover"></image>
                      <view class="model-btn">
                        <view class="play-icon"></view>
                      </view>
                    </view>
                  </view>
                  <!-- 视频播放结束 -->
                  <view wx:else>
                    <image lazy-load="true" src="{{item.img_url}}?x-oss-process=image/resize,h_500" class="imageClass" mode='aspectFill' />
                  </view>
                </view>

              </view>
              <!-- 循环商品图结束 -->
            </view>
          </scroll-view>
        </view>
      </view>
    </view>
    <!-- <swiper indicator-dots indicator-color="{{indicator}}" current="{{current}}" indicator-active-color="{{activeIndicator}}" class="goodsimgs" duration="300">  
        <block wx:for="{{gallery}}" wx:key="item.id">  
          <swiper-item>  
            <block wx:if="{{item.file_type == 1}}">  
              <block wx:if="{{isPlay}}" class='video-wrapper'>  
                <video src="{{item.img_url}}" class='video' id='myVideo' binderror="videoErrorCallback" initial-time='2' show-center-play-btn enable-progress-gesture controls></video>  
              </block>  
              <block wx:else class='video-host-wrapper' catchtap='play'>  
                <image src="{{gallery[1].img_url}}" mode='aspectFill' />
              </block>  
            </block>
            <block wx:else>
              <image src="{{item.img_url}}" mode='aspectFill' catchtap='preview' data-url="{{item.img_url}}" />
            </block>
          </swiper-item>  
        </block>  
      </swiper> -->
    <!-- <swiper class="goodsimgs" indicator-dots="true" autoplay="{{autoplay}}" bindtap="hideSwitchAttrPop"> 
      <swiper-item wx:for="{{gallery}}" wx:key="{{item.id}}">
        <video wx:if="{{item.file_type==1}}" id="myVideo" style='height:400rpx;width:100%;margin-top:140rpx;'  src="{{item.img_url}}" binderror="videoErrorCallback" objectFit="cover" initial-time='2' show-center-play-btn enable-progress-gesture controls></video>
        <image class="imageClass" wx:if="{{item.file_type==0}}" src="{{item.img_url}}"></image>
      </swiper-item>
    </swiper> -->

    <!-- <view class="service-policy">
      <view class="item">30分钟速达</view>
      <view class="item">每日优选生鲜</view>
      <view class="item">满88元免运费</view>
    </view> -->
    <view class="goods-info" bindtouchstart='touchStart2' bindtouchend='touchEnd2'>
      <view class="c" bindtap="hideSwitchAttrPop">
        <view class="goods-do">
          <text class="price">{{goods.retail_price?"￥"+goods.retail_price:"￥0"}}</text>
          <text class="org-price line-through">{{goods.market_price?"￥"+goods.market_price:""}}</text>
        </view>
        <text class="name">{{goods.name?goods.name:""}}</text>
        <!-- <text class="desc">{{goods.goods_brief?goods.goods_brief:""}}</text> -->
        <!-- <view class="brand" wx:if="{{brand.name}}">
          <navigator url="../brandDetail/brandDetail?id={{brand.id}}">
            <text>{{brand.name}}</text>
          </navigator>
        </view> -->
        <!-- <view class="brand">
          <text>发货地：深圳前海保税仓</text>
        </view> -->
        <view style='margin-top:20px;'>
          <text class="desc">快递：{{defaultFreight==0?"免邮":defaultFreight+"元"}}</text>
          <text class="desc2">销量：{{goods.sell_volume==null?0:goods.sell_volume}}</text>
        </view>
      </view>
    </view>
    <view class="section-nav section-attr" wx:if="{{detailTicketDiscountList.length>0}}" bindtap="switchTicketPop" bindtouchstart='touchStart2' bindtouchend='touchEnd2'>
      <view class="t">
        <view style='float:left'>领券</view>
        <view class='ticket-border' wx:for="{{detailTicketDiscountList}}" wx:key="{{item.tickDiscId}}">
          <view class='ticket-text'>{{item.name}}</view>
        </view>
        <!-- <view class='ticket-border'><view class='ticket-text'>100减20</view></view>
      <view class='ticket-border'><view class='ticket-text'>100减20</view></view> -->
      </view>
      <image class="i" src="../../static/images/address_right.png" background-size="cover"></image>
    </view>

    <view class="section-nav section-attr" wx:if="{{detailStoreCampMinusList.length>0}}" bindtap="switchCampMinusPop" bindtouchstart='touchStart2' bindtouchend='touchEnd2'>
      <view class="t">
        <view style='float:left'>促销</view>
        <view class='ticket-border' wx:for="{{detailStoreCampMinusList}}" wx:key="{{item.campMinusId}}">
          <view class='ticket-text'>{{item.campName}}</view>
        </view>
      </view>
      <image class="i" src="../../static/images/address_right.png" background-size="cover"></image>
    </view>

    <view class="section-nav section-attr" bindtap="switchAttrPop" wx:if="{{stockNum >0}}" bindtouchstart='touchStart2' bindtouchend='touchEnd2'>
      <view class="t">{{checkedSpecText=="请选择规格数量"?"请选择规格数量":"已选：【"+checkedSpecText+"】"}}</view>
      <image class="i" src="../../static/images/address_right.png" background-size="cover"></image>
    </view>

    <!-- <view class="crash-goods" wx:if="{{crashList.length > 0}}" bindtap="hideSwitchAttrPop">
      <view class="h">
        <view class="line"></view>
        <text class="title">搭配减价</text>
      </view>
      <view class="b">
        <view class="item" wx:for="{{crashList}}" wx:key="{{item.id}}">
          <navigator url="/pages/goods/goods?id={{item.goods_crash_id}}&&storeId={{item.storeId}}">
            <image class="img" src="{{item.list_pic_url}}" background-size="cover"></image>
            <text class="name">{{item.name}}</text>
          </navigator>

          <view class="goods-do">
            <text class="price">￥{{item.market_price}}</text>
            <text class="org-price line-through">￥{{item.retail_price}}</text>
            <view class="add" data-goods-id="{{item.goods_crash_id}}" data-product-id="{{item.product_crash_id}}" bindtap="addCrashNumber">+</view>
          </view>
        </view>
      </view>
    </view> -->

    <!--<view class="section-nav section-act">
      <view class="t">
        <view class="label">1个促销:</view>
        <view class="tag">万圣趴</view>
        <view class="text">全场满499，额外送糖果</view>
      </view>
      <image class="i" src="../../static/images/address_right.png" background-size="cover"></image>
    </view>-->
    <view class="comments" bindtap="hideSwitchAttrPop" bindtouchstart='touchStart2' bindtouchend='touchEnd2'>
      <view class="h">
        <navigator url='../comment/comment?valueId={{goods.id}}&typeId=0'>
          <text class="t">评价({{comment.count > 999 ? '999+' : comment.count}})</text>
          <text class="i">查看全部</text>
        </navigator>
      </view>
      <view class="b">
        <view class="item" wx:if="{{comment.count == 0}}">
          <view class="info">
            暂无评论
          </view>
        </view>
        <view class="item" wx:if="{{comment.count > 0}}">
          <view class="info">
            <view class="user">
              <image src="{{comment.data.avatar}}"></image>
              <text>{{comment.data.nickname}}</text>
            </view>
            <view class="time">{{comment.data.add_time}}</view>
          </view>
          <view class="content">
            {{comment.data.content}}
          </view>
          <view class="imgs" wx:if="{{comment.data.pic_list.length > 0}}">
            <image class="img" data-url="{{item.pic_url}}" wx:for="{{comment.data.pic_list}}" wx:key="{{item.id}}" bindtap="previewPic" src="{{item.pic_url}}"></image>
          </view>
          <!-- <view class="spec">白色 2件</view> -->
        </view>
      </view>
    </view>
    <!-- <view class="comments" bindtap="hideSwitchAttrPop">
      <view class="h">
          <text class="t">{{goods.storeName}}</text>
          <text class="i">全部商品</text>
      </view>
    </view> -->
    <view class="goods-attr" wx:if="{{attribute.length>0}}" bindtap="hideSwitchAttrPop">
      <view class="t">商品参数</view>
      <view class="l">
        <view class="item" wx:for="{{attribute}}" wx:key="{{item.name}}">
          <text class="left">{{item.name}}</text>
          <text class="right">{{item.value}}</text>
        </view>
      </view>
    </view>
    <view class="detail" bindtap="hideSwitchAttrPop">
      <view class="t">商品详情</view>
      <view style="margin-left: 20rpx;" x:if="{{detailContent != ''}}">
        <rich-text nodes="{{detailContent}}"></rich-text>
      </view>
      <!-- <import src="../../lib/wxParse/wxParse.wxml"/>
      <template is="wxParse" data="{{wxParseData:goodsDetail.nodes}}" /></view> -->
    </view>


    <view class="common-problem" bindtap="hideSwitchAttrPop">
      <view class="h">
        <view class="line"></view>
        <text class="title">常见问题</text>
      </view>
      <view class="b">
        <view class="item" wx:for="{{issueList}}" wx:key="{{item.id}}">
          <view class="question-box">
            <text class="spot"></text>
            <text class="question">{{item.question}}</text>
          </view>
          <view class="answer">
            {{item.answer}}
          </view>
        </view>
      </view>
    </view>

    <view class="related-goods" wx:if="{{relatedGoods.length > 0}}">
      <view class="h">
        <view class="line"></view>
        <text class="title">大家都在看</text>
      </view>
      <view class="b">
        <view class="item" wx:for="{{relatedGoods}}" wx:key="{{item.id}}">
          <navigator url="/pages/goods/goods?id={{item.id}}&&storeId={{item.storeId}}">
            <image class="img" src="{{item.list_pic_url}}"></image>
            <text class="name">{{item.name}}</text>
            <view class="price">￥{{item.retail_price}}
              <image class="cart" data-goods-id="{{item.id}}" data-product-id="{{item.product_id}}" catchtap='addNumber2' src="/static/images/cart.png" background-size="cover"></image>
            </view>
          </navigator>
        </view>
      </view>
    </view>
  </view>

  <view wx:if="{{openAttr}}" class="attr-pop">
    <view class="attr-title">加入购物车</view>
    <view class="attr-close" bindtap="switchAttrPop">X</view>
    <view class="img-info">
      <view>
        <image class="img" src="{{goods.list_pic_url}}"></image>
      </view>
      <view class="info">
        <view class="c">
          <view class="p">价格：￥{{goods.retail_price}}</view>
          <view class="a" wx:if="{{productList.length>0}}">已选择：{{checkedSpecText}}</view>
          <view class="a">库存{{stockNum}}件</view>
        </view>
      </view>
    </view>
    <view class="spec-con">
      <view class="spec-item" wx:for="{{specificationList}}" wx:key="{{item.specification_id}}">
        <view class="name">{{item.name}}</view>
        <view class="values">
          <view class="value {{vitem.checked ? 'selected' : ''}}" bindtap="clickSkuValue" wx:for="{{item.valueList}}" wx:for-item="vitem" wx:key="{{vitem.id}}" data-value-id="{{vitem.id}}" data-name-id="{{vitem.specification_id}}">{{vitem.value}}</view>
        </view>
      </view>
      <view class="number-item">
        <view class="name">数量</view>
        <view class="selnum">
          <view class="cut" bindtap="cutNumber">-</view>
          <input value="{{number}}" class="number" disabled="true" type="number" />
          <view class="{{number+cartNumber>= stockNum? 'addEnabel':'add'}}" bindtap="{{number+cartNumber>= stockNum ? '':'addNumber'}}">+</view>
        </view>
      </view>
    </view>
  </view>
  
  <view wx:if="{{openAttrByOrder}}" class="attr-pop">
    <view class="attr-title">立即购买</view>
    <view class="attr-close" bindtap="switchAttrPopByOrder">X</view>
    <view class="img-info">
      <view>
        <image class="img" src="{{goods.list_pic_url}}"></image>
      </view>
      <view class="info">
        <view class="c">
          <view class="p">价格：￥{{goods.retail_price}}</view>
          <view class="a" wx:if="{{productList.length>0}}">已选择：{{checkedSpecText}}</view>
          <view class="a">库存{{stockNum}}件</view>
        </view>
      </view>
    </view>
    <view class="spec-con">
      <view class="spec-item" wx:for="{{specificationList}}" wx:key="{{item.specification_id}}">
        <view class="name">{{item.name}}</view>
        <view class="values">
          <view class="value {{vitem.checked ? 'selected' : ''}}" bindtap="clickSkuValue" wx:for="{{item.valueList}}" wx:for-item="vitem" wx:key="{{vitem.id}}" data-value-id="{{vitem.id}}" data-name-id="{{vitem.specification_id}}">{{vitem.value}}</view>
        </view>
      </view>
      <view class="number-item">
        <view class="name">数量</view>
        <view class="selnum">
          <view class="cut" bindtap="cutNumber">-</view>
          <input value="{{number}}" class="number" disabled="true" type="number" />
          <view class="{{number>= stockNum? 'addEnabel':'add'}}" bindtap="{{number>= stockNum ? '':'addNumber'}}">+</view>
        </view>
      </view>
    </view>
  </view>
  
</scroll-view>

<!-- 领券弹框start -->
<view wx:if="{{openTicketAttr}}" class="attr-pop2">
  <view class="attr-title">领取优惠券</view>
  <view class="attr-close" bindtap="switchTicketPop">X</view>
  <view class="ticket-img-info">
    <!-- 查看门店优惠券列表 -->
    <view style="margin: 16px 0px;" wx:for="{{ticketDiscountList}}" wx:key="{{item.tickDiscId}}" data-coupon-id="{{item.tickDiscId}}">
      <view class="coupon-box {{item.isReceive==0?'coupon-box1':'coupon-box2'}} coupon-box-g">
        <view class="coupon-bg {{item.isReceive==0?'coupon-bg1':'coupon-bg2'}}">
          <view>
            <text class="coupon-currency">￥</text>{{item.tickDiscType==00?item.voucherMoney:''}}{{item.tickDiscType==01?item.discRatio:''}}{{item.tickDiscType==02?item.exchCond:''}}</view>
          <view class="coupon-type">{{item.tickDiscType==00?'满'+item.voucherCond+'可用':''}}{{item.tickDiscType==01?'满'+item.discCond+'可用':''}}{{item.tickDiscType==02?'满'+item.exchCond+'可用':''}}</view>
        </view>
        <view class="coupon-info">
          <view class="coupon-title">{{ item.name }}</view>
          <view class="coupon-desc">
            <view style="font-size: 26rpx;">{{ item.inValidTime }}</view>
          </view>
          <view class="coupon-desc-shop">
            <view style='font-size:24rpx;'>{{item.applyType==00?'全部商品可用':''}}{{item.applyType==01?'部分商品可用':''}}{{item.applyType==02?'部分商品可用':''}}{{item.goodsBizType==00?'-仅限保税仓商品':''}}{{item.goodsBizType==02?'-仅限补货商品':''}}{{item.goodsBizType==10?'-仅限现场速递商品':''}}{{item.goodsBizType==11?'-仅限普通商品':''}}</view>
          </view>
        </view>
        <view class="{{item.isReceive==0?'coupon-info-use':'coupon-info-use2'}}" bindtap="{{item.isReceive==0?'getUserCoupon':''}}" data-coupon-Id="{{item.tickDiscId}}" data-store-Topic-Id="{{item.storeTopicId}}">
          <view class="coupon-desc-use">
            {{item.isReceive==0?'领取':'已领完'}}
          </view>
        </view>
      </view>
    </view>
    <!-- 查看门店优惠券列表end -->
  </view>
</view>
<!-- 领券弹框end -->

<!-- 促销弹框start -->
<view wx:if="{{openCampMinusAttr}}" class="attr-pop2">
  <view class="attr-title">优惠详情</view>
  <view class="attr-close" bindtap="hideSwitchCampMinusPop">X</view>
  <view class="ticket-img-info">
    <!-- 查看门店满减满折列表 -->
    <view style="margin: 16px 0px;" wx:if="{{minusList0000}}">
      <view class='camp-title'>满元满减,且满足最高层级减一次</view>
      <view style="margin: 10px 0px;" wx:for="{{storeCampMinusList}}" wx:if="{{item.campMinusType=='00'&&item.minusMode=='00'}}" wx:key="{{item.campMinusId}}" data-camp-id="{{item.campMinusId}}" data-camp-Name="{{item.campName}}" bindtap="selectCampMinus">
        <view style='width:100%;height:50rpx;line-height:50rpx;'>
          <view class='camp-name'>{{item.campName}}</view>
          <view class='camp-url'>进入专题 ></view>
        </view>
      </view>
    </view>
    <view style="margin: 16px 0px;" wx:if="{{minusList0100}}">
      <view class='camp-title'>满件满减,且满足最高层级减一次</view>
      <view style="margin: 10px 0px;" wx:for="{{storeCampMinusList}}" wx:if="{{item.campMinusType=='01'&&item.minusMode=='00'}}" wx:key="{{item.campMinusId}}" data-camp-id="{{item.campMinusId}}" data-camp-Name="{{item.campName}}" bindtap="selectCampMinus">
        <view style='width:100%;height:50rpx;line-height:50rpx;'>
          <view class='camp-name'>{{item.campName}}</view>
          <view class='camp-url'>进入专题 ></view>
        </view>
      </view>
    </view>
    <view style="margin: 16px 0px;" wx:if="{{minusList0010}}">
      <view class='camp-title'>满元满减,且满足每满一次减一次</view>
      <view style="margin: 10px 0px;" wx:for="{{storeCampMinusList}}" wx:if="{{item.campMinusType=='00'&&item.minusMode=='10'}}" wx:key="{{item.campMinusId}}" data-camp-id="{{item.campMinusId}}" data-camp-Name="{{item.campName}}" bindtap="selectCampMinus">
        <view style='width:100%;height:50rpx;line-height:50rpx;'>
          <view class='camp-name'>{{item.campName}}</view>
          <view class='camp-url'>进入专题 ></view>
        </view>
      </view>
    </view>
    <view style="margin: 16px 0px;" wx:if="{{minusList0110}}">
      <view class='camp-title'>满件满减,且满足每满一次减一次</view>
      <view style="margin: 10px 0px;" wx:for="{{storeCampMinusList}}" wx:if="{{item.campMinusType=='01'&&item.minusMode=='10'}}" wx:key="{{item.campMinusId}}" data-camp-id="{{item.campMinusId}}" data-camp-Name="{{item.campName}}" bindtap="selectCampMinus">
        <view style='width:100%;height:50rpx;line-height:50rpx;'>
          <view class='camp-name'>{{item.campName}}</view>
          <view class='camp-url'>进入专题 ></view>
        </view>
      </view>
    </view>
    <view style="margin: 16px 0px;" wx:if="{{minusList10}}">
      <view class='camp-title'>满元满折</view>
      <view style="margin: 10px 0px;" wx:for="{{storeCampMinusList}}" wx:if="{{item.campMinusType=='10'}}" wx:key="{{item.campMinusId}}" data-camp-id="{{item.campMinusId}}" data-camp-Name="{{item.campName}}" bindtap="selectCampMinus">
        <view style='width:100%;height:50rpx;line-height:50rpx;'>
          <view class='camp-name'>{{item.campName}}</view>
          <view class='camp-url'>进入专题 ></view>
        </view>
      </view>
    </view>
    <view style="margin: 16px 0px;" wx:if="{{minusList11}}">
      <view class='camp-title'>满件满折</view>
      <view style="margin: 10px 0px;" wx:for="{{storeCampMinusList}}" wx:if="{{item.campMinusType=='11'}}" wx:key="{{item.campMinusId}}" data-camp-id="{{item.campMinusId}}" data-camp-Name="{{item.campName}}" bindtap="selectCampMinus">
        <view style='width:100%;height:50rpx;line-height:50rpx;'>
          <view class='camp-name'>{{item.campName}}</view>
          <view class='camp-url'>进入专题 ></view>
        </view>
      </view>
    </view>
    <!-- 查看门店满减满折列表end -->
  </view>
</view>
<!-- 促销弹框end -->
<view wx:if="{{goods.is_on_sale == 0}}">
  <view class='shelves-view'>
    <view class="shelves">
      <text class='shelves-text'>已下架</text>
    </view>
  </view>
</view>
<view wx:if="{{goods.is_on_sale != 0 && stockNum ==0}}">
  <view class='shelves-view'>
    <view class="shelves2">
      <text class='shelves-text'>暂时无货</text>
    </view>
  </view>
</view>

<view class="bottom-btn">
  <view class="l l-home" bindtap="switchNav">
    <image class="icon" src="/static/images/nav-1.png"></image>
  </view>
  <view class="l l-collect {{ openAttr ? 'back' : ''}}" bindtap="closeAttrOrCollect">
    <image class="icon" src="{{ collectBackImage }}"></image>
  </view>
  <view class="l l-cart">
    <view class="box">
      <text class="cart-count">{{cartGoodsCount}}</text>
      <image bindtap="openCartPage" class="icon" src="/static/images/ic_menu_shoping_nor.png"></image>
    </view>
  </view>
  <!-- <view class="c">立即购买</view> -->
  <view class='{{stockNum==null || stockNum ==0 || goods.is_on_sale == 0?"r-disable":"r"}}' bindtap='{{stockNum==null || stockNum ==0 || goods.is_on_sale == 0?"":"addToCart"}}'>加入购物车</view>
  <view class='{{stockNum==null || stockNum ==0 || goods.is_on_sale == 0?"r-disable2":"r2"}}' bindtap='{{stockNum==null || stockNum ==0 || goods.is_on_sale == 0?"":"checkoutOrder"}}'>立即购买</view>
</view>