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