wxhuanart/miniprogram/pages/goods/detail/index.wxml

<n-spin spinning="{{loading}}">
  <view class="goods-head" wx:if="{{swipepics && swipepics.length > 0}}">
    <n-swipescreen width="{{swipewidth}}" height="{{swipeHeight}}" class="{{movecls}}" dots="{{true}}">
      <n-swipescreen-item wx:for="{{swipepics}}" wx:key="index">
        <t-image id="nx{{index}}" src="{{item}}" t-class="timgcasourel" wx:key="index" data-idx="{{index}}" bindtap="onPreview" />
      </n-swipescreen-item>
    </n-swipescreen>
  </view>
  <view class="goods-info">
    <view class="price-bar px-4 pt-1">
      <view class="price-info">
        <view>
          <n-price wr-class="goods-price" symbol-class="class-goods-symbol" price="{{minSalePrice}}" />
          <text wx:if="{{minSalePrice < maxSalePrice}}" class="goods-price-up px-1">起</text>
        </view>
        <n-price wr-class="goods-del" price="{{minLinePrice}}" type="delthrough" />
      </view>
      <view class="text-sm gray-4">
        已售{{soldNum}}
      </view>
    </view>
    <view class="split-bar px-4 pt-2" style="border-bottom-width: 1px;">
      <view class="d-flex align-items-center">
        <view class="flex-1 pr-1 text-md gray-1">
          {{details.title}}
        </view>
        <t-button variant="text" t-class="btn-gray-plain p-0 mr-3" bind:tap="gotodownload" wx:if="{{!downloading}}">
          <view class="d-flex align-items-center flex-column" style="line-height: 1;">
            <t-icon name="download" size="{{16}}" />
            <view class="text-xs pt-1">下载</view>
          </view>
        </t-button>
        <t-button variant="text" t-class="btn-gray-plain p-0 mr-3" wx:else>
          <view class="d-flex align-items-center flex-column" style="line-height: 1;">
            <t-icon name="loading" t-class="spinning" size="{{16}}" />
            <view class="text-xs pt-1">稍等</view>
          </view>
        </t-button>
        <t-button variant="text" t-class="btn-gray-plain p-0" open-type="share">
          <view class="d-flex align-items-center flex-column" style="line-height: 1;">
            <t-icon name="share" size="{{16}}" />
            <view class="text-xs pt-1">分享</view>
          </view>
        </t-button>
      </view>
    </view>
    <view class="split-bar px-4 py-3 text-sm d-flex align-items-center gray-4" bindtap="toAddCart">
      <view>已选：</view>
      <view class="flex-1 gray-1">
        {{selectedAttrStr && selectedAttrStr.length > 0 ? selectedAttrStr : "未选择"}}
      </view>
      <t-icon name="chevron-right" size="{{14}}" />
    </view>
    <view class="px-4 pt-4">
      <view wx:if="{{details.description.length > 0}}" wx:for="{{details.description}}" wx:key="index">
        <t-image t-class="desc-content__img" src="{{item.url}}" mode="widthFix" />
      </view>
      <t-collapse default-value="{{['details']}}">
        <t-collapse-panel t-class-header="px-0 gray-1" t-class-content="px-0" value="delivery" header="配送信息">
          <view class="gray-1">
            {{details.delivery||""}}
          </view>
        </t-collapse-panel>
        <t-collapse-panel t-class-header="px-0 gray-1" t-class-content="px-0" value="feedback" header="支付与退换货">
          <view class="gray-1">
            {{details.aftermarket||""}}
          </view>
        </t-collapse-panel>
      </t-collapse>
    </view>
    <view class="pt-4 text-md gray-2" wx:if="{{favList && favList.length > 0}}" style="background-color: #f5f5f5;">
      <view class="px-4 pb-4">猜你喜欢</view>
      <view class="d-flex align-items-center">
        <t-icon name="chevron-left" />
        <view class="flex-1 overflow-hidden">
          <scroll-view scroll-x style="white-space: nowrap;" bindscrolltolower="handleReachBottom">
            <view class="d-flex pb-2" style="column-gap: 30rpx;">
              <view wx:for="{{favList}}" wx:for-item="item" wx:key="index">
                <n-good-card id="fav-gd-{{index}}" data="{{item}}" currency="{{item.currency || '¥'}}" thresholds="{{thresholds}}" class="goods-card-inside" data-index="{{index}}" bind:thumb="onClickGoodsThumb" bind:click="gotoGoodsDetail" bind:add-cart="onAddCart" />
              </view>
              <view style="padding-top: 150rpx;" wx:if="{{loadMoreStatus !== 2}}">
                <t-loading />
              </view>
            </view>
          </scroll-view>
        </view>
        <t-icon name="chevron-right" />
      </view>
    </view>
    <!-- <view class="px-4 pt-4 text-md gray-2" wx:if="{{commentsDto && commentsDto.items}}">
      <view class="d-flex align-items-center pb-2" bindtap="gotoComments">
        <view class="flex-1">商品评价（{{commentsDto.totalItems}}）</view>
        <view class="text-sm gray-4">{{commentsDto.rate}}%好评</view>
        <t-icon name="chevron-right" size="{{20}}" style="color: #bbb" />
      </view>

      <n-comments-card wx:for="{{ commentsDto.items }}" wx:for-item="commentItem" wx:key="goodsSpu" userAvatar="{{commentItem.userAvatar}}" userName="{{commentItem.userName}}" content="{{commentItem.content}}" score="{{commentItem.score}}" commentTime="{{commentItem.commentTime}}" />
    </view> -->
  </view>
  <view class="goods-bottom-operation">
    <n-buy-bar noDraw="{{nodraws}}" wr-sold-out="text-sm" jumpArray="{{jumpArray}}" soldout="{{soldout}}" isStock="{{isStock}}" shopCartNum="{{cartNum}}" buttonType="{{buttonType}}" bind:toAddCart="toAddCart" bind:toNav="toNav" bind:toJum3D="gotoDraw" class="goods-details-card" addingCart="{{addingCart}}" />
  </view>
  <view style="height: {{soldout ? 100 : 50}}rpx" />
</n-spin>

<n-pop-right open="{{true}}" bind:disagree="handleAuthDisagree" bind:ok="handleAuthOK" />

<n-goods-specs-popup id="goodsSpecsPopup" show="{{isSpuSelectPopupShow}}" title="{{details.title || ''}}" src="{{specImg ? specImg : primaryImage}}" specList="{{details.specList || []}}" skuList="{{skuArray}}" limitBuyInfo="{{details.limitInfo[0].text || ''}}" limitMaxCount="{{limitMaxCount}}" limitMinCount="{{limitMinCount}}" limitBuyInfo="{{limitBuyInfo}}" bind:closeSpecsPopup="handlePopupHide" bind:change="chooseSpecItem" bind:changeNum="changeNum" bind:addCart="addCart" bind:specsConfirm="specsConfirm" isStock="{{isStock}}" outOperateStatus="{{outOperateStatus}}">
  <view slot="goods-price">
    <view class="popup-sku__price">
      <n-price price="{{isAllSelectedSku ? selectSkuSellPrice : minSalePrice }}" wr-class="goods-price" symbol-class="popup-sku__price-symbol" class="mr-2" />
      <n-price price="{{isAllSelectedSku ? selectSkuLinePrice : minLinePrice}}" wr-class="goods-del" type="delthrough" />
    </view>
  </view>
</n-goods-specs-popup>

<t-popup visible="{{drawshow}}" placement="bottom" bind:visible-change="handleDrawPopupHide">
  <view class="d-flex chooseblock" style="gap: 20rpx">
    <view class="chooseitem {{!details.draws2D || details.draws2D.length === 0 && 'disable'}}" data-type="flat" bind:tap="gotoFly">
      <t-icon prefix="hn" name="flat" t-class="chooseicon" />
      <view>平面配画</view>
    </view>
    <view class="choosedivide" />
    <view class="chooseitem {{!details.draws || details.draws.length === 0 && 'disable'}}" data-type="space" bind:tap="gotoFly">
      <t-icon prefix="hn" name="space" t-class="chooseicon" />
      <view>空间配画</view>
    </view>
  </view>
</t-popup>

<t-toast id="t-toast" />

<wxs module="col">
  var stringify = function (val) {
    return JSON.stringify(val)
  }

  module.exports = {
    stringify: stringify
  }
</wxs>