productdetails.wxml 2.4 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869
  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. <image bindtap="onShareTap" class="fenxiangljimg" src="{{fenxiangljimg}}" mode=""/>
  14. </view>
  15. <!-- 商品价格和浏览量 -->
  16. <view class="price-and-views">
  17. <view>
  18. <text class="price">¥{{item.price}}</text>
  19. <text class="original-price">¥{{item.old_price}}</text>
  20. </view>
  21. <view style="display: flex; align-content: center;">
  22. <image style="width: 30rpx; height: 30rpx;" src="{{showimg}}" />
  23. <text style="margin-left: 16rpx;" class="views">{{item.browse}}人浏览</text>
  24. </view>
  25. </view>
  26. <!-- 商品标题 -->
  27. <view class="goods-title">{{item.name}}</view>
  28. <!-- 选择规格 -->
  29. <view class="specifications">
  30. <text style="font-size: 38rpx;">选择规格</text>
  31. <view class="specifications_boxs">
  32. <button wx:for="{{item.specs}}" wx:key="index" class="spec-btn {{gaoliao === index ? 'active' : ''}}">{{item}}</button>
  33. </view>
  34. </view>
  35. <!-- 购买数量 -->
  36. <view class="quantity">
  37. <text style="font-size: 38rpx;">购买数量</text>
  38. <van-stepper
  39. value="1"
  40. bind:change="onChange"
  41. />
  42. </view>
  43. <!-- 产品详情 -->
  44. <view class="product-details">
  45. <text style="font-size: 38rpx;">产品详情</text>
  46. <view class="details-list">
  47. <text wx:for="{{item.details}}" wx:key="index">• {{item}}</text>
  48. </view>
  49. </view>
  50. <!-- 按钮区域 -->
  51. <!-- <view class="buttons">
  52. <view style="width: 10%; text-align: center;">
  53. <image class="search-icon" src="../../image/imgs/gwc.png" />
  54. <view style="font-size: 24rpx;">购物车</view>
  55. </view>
  56. <view style="display: flex; justify-content: space-between; width: 74%;">
  57. <button class="cart-btn">加入购物车</button>
  58. <button class="buy-btn">立即购买</button>
  59. </view>
  60. </view> -->
  61. </view>
  62. </view>