productdetails.wxml 2.4 KB

12345678910111213141516171819202122232425262728293031323334353637383940414243444546474849505152535455565758596061626364656667686970
  1. <view style="background: #f5f5f5; padding: 20rpx 0;">
  2. <view class="goodslist_boxs">
  3. <!-- 商品图片 -->
  4. <view class="empty-space">
  5. <swiper style="width: 100%; height: 100%;" autoplay="true" interval="3000" circular>
  6. <block wx:for="{{item.detail_images}}" wx:key="index">
  7. <swiper-item>
  8. <image style="width: 100%; height: 100%;" src="{{item}}" mode="aspectFill"
  9. bindtap="previewImage" data-index="{{index}}" />
  10. </swiper-item>
  11. </block>
  12. </swiper>
  13. </view>
  14. <!-- 商品价格和浏览量 -->
  15. <view class="price-and-views">
  16. <view>
  17. <text class="price">¥{{item.price}}</text>
  18. <text class="original-price">¥{{item.old_price}}</text>
  19. </view>
  20. <view style="display: flex; align-content: center;">
  21. <image style="width: 30rpx; height: 30rpx;" src="{{showimg}}" />
  22. <text style="margin-left: 16rpx;" class="views">{{item.browse}}人浏览</text>
  23. </view>
  24. </view>
  25. <!-- 商品标题 -->
  26. <view class="goods-title">{{item.name}}</view>
  27. <!-- 选择规格 -->
  28. <view class="specifications">
  29. <text style="font-size: 38rpx;">选择规格</text>
  30. <view class="specifications_boxs">
  31. <button wx:for="{{item.specs}}" wx:key="index" class="spec-btn {{gaoliao === index ? 'active' : ''}}" bindtap="setspecs" data-item="{{index}}">{{item}}</button>
  32. </view>
  33. </view>
  34. <!-- 购买数量 -->
  35. <view class="quantity">
  36. <text style="font-size: 38rpx;">购买数量</text>
  37. <van-stepper
  38. value="{{steppernum}}"
  39. bind:change="onChange"
  40. />
  41. </view>
  42. <!-- 产品详情 -->
  43. <view class="product-details">
  44. <text style="font-size: 38rpx;">产品详情</text>
  45. <view class="details-list">
  46. <text wx:for="{{item.details}}" wx:key="index">• {{item}}</text>
  47. </view>
  48. </view>
  49. <!-- 按钮区域 -->
  50. <view class="buttons">
  51. <view style="width: 10%; text-align: center;">
  52. <view bindtap="gotogwc">
  53. <image class="search-icon" src="{{gouwucimg}}" />
  54. <view style="font-size: 24rpx;">购物车</view>
  55. </view>
  56. </view>
  57. <view style="display: flex; justify-content: space-between; width: 74%;">
  58. <button class="cart-btn" bindtap="addToCart">加入购物车</button>
  59. <button class="buy-btn">立即购买</button>
  60. </view>
  61. </view>
  62. </view>
  63. </view>