wx-parent/subpackages/productdetails/productdetails.wxml

<view style="background: #f5f5f5; padding: 20rpx 0;">
  <view class="goodslist_boxs">
    <!-- 商品图片 -->
    <view class="empty-space">
      <swiper style="width: 100%; height: 100%;" autoplay="true" interval="3000" circular>
        <block wx:for="{{item.specList[gaoliao].detail_images}}" wx:key="index">
          <swiper-item>
            <image style="width: 100%; height: 100%;" src="{{item}}" mode="aspectFill"
            bindtap="previewImage" data-index="{{index}}" />
          </swiper-item>
        </block>
      </swiper>
    </view>
    
    <!-- 商品价格和浏览量 -->
    <view class="price-and-views">
      <view>
        <text class="price">¥{{item.specList[gaoliao].price ? item.specList[gaoliao].price : '暂无'}}</text>
        <text class="original-price">¥{{item.specList[gaoliao].old_price ? item.specList[gaoliao].old_price : '暂无'}}</text>
      </view>
      <view style="display: flex; align-content: center;">
        <image style="width: 30rpx; height: 30rpx;" src="{{showimg}}" />
        <text style="margin-left: 16rpx;" class="views">{{item.browse}}人浏览</text>
      </view>
    </view>
    
    <!-- 商品标题 -->
    <view class="goods-title">{{item.name}}</view>
    
    <!-- 选择规格 -->
    <view class="specifications">
      <text style="font-size: 38rpx;">选择规格</text>
      <view wx:if="{{item.specList.length > 0}}" class="specifications_boxs">
        <view wx:for="{{item.specList}}" wx:key="index" class="spec-btn {{gaoliao === index ? 'active' : ''}}"
        bindtap="selectSpec"
        data-specindex="{{index}}">
          {{item.spec}}
        </view>
      </view>
      <view wx:else class="specifications_boxs">
        <text style="width: 100%; text-align: center; padding: 30rpx 0; color: #ccc;">暂无规格</text>
      </view>
    </view>
    
    <!-- 购买数量 -->
    <view class="quantity">
      <text style="font-size: 38rpx;">购买数量</text>

      <van-stepper
        value="{{steppernum}}"
        bind:change="onChange"
      />
    </view>
    
    <!-- 产品详情 -->
    <view class="product-details">
      <text style="font-size: 38rpx;">产品详情</text>
      <view class="details-list">
        <!-- <text wx:for="{{item.details}}" wx:key="index">• {{item}}</text> -->
        <text>{{item.specList[gaoliao].details}}</text>
      </view>
    </view>
    
    <!-- 按钮区域 -->
    <view class="buttons">
    <view style="width: 10%; text-align: center;">
      <view bindtap="gotogwc">
        <image class="search-icon" src="{{gouwucimg}}" />
        <view style="font-size: 24rpx;">购物车</view>
      </view>
    </view>
      <view style="display: flex; justify-content: space-between; width: 74%;">
        <button class="cart-btn" bindtap="addToCart">加入购物车</button>
        <button class="buy-btn" bindtap="buyNow">立即购买</button>
      </view>
    </view>
  </view>
</view>