productdetails.wxml 2.9 KB

1234567891011121314151617181920212223242526272829303132333435363738394041424344454647484950515253545556575859606162636465666768697071727374757677
  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.specList[gaoliao].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.specList[gaoliao].price ? item.specList[gaoliao].price : '暂无'}}</text>
  19. <text class="original-price">¥{{item.specList[gaoliao].old_price ? item.specList[gaoliao].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 wx:if="{{item.specList.length > 0}}" class="specifications_boxs">
  32. <button wx:for="{{item.specList}}" wx:key="index" class="spec-btn {{gaoliao === index ? 'active' : ''}}"
  33. bindtap="selectSpec"
  34. data-specindex="{{index}}">
  35. {{item.spec}}
  36. </button>
  37. </view>
  38. <view wx:else class="specifications_boxs">
  39. <text style="width: 100%; text-align: center; padding: 30rpx 0; color: #ccc;">暂无规格</text>
  40. </view>
  41. </view>
  42. <!-- 购买数量 -->
  43. <view class="quantity">
  44. <text style="font-size: 38rpx;">购买数量</text>
  45. <van-stepper
  46. value="1"
  47. bind:change="onChange"
  48. />
  49. </view>
  50. <!-- 产品详情 -->
  51. <view class="product-details">
  52. <text style="font-size: 38rpx;">产品详情</text>
  53. <view class="details-list">
  54. <!-- <text wx:for="{{item.details}}" wx:key="index">• {{item}}</text> -->
  55. <text>{{item.specList[gaoliao].details}}</text>
  56. </view>
  57. </view>
  58. <!-- 按钮区域 -->
  59. <!-- <view class="buttons">
  60. <view style="width: 10%; text-align: center;">
  61. <image class="search-icon" src="../../image/imgs/gwc.png" />
  62. <view style="font-size: 24rpx;">购物车</view>
  63. </view>
  64. <view style="display: flex; justify-content: space-between; width: 74%;">
  65. <button class="cart-btn">加入购物车</button>
  66. <button class="buy-btn">立即购买</button>
  67. </view>
  68. </view> -->
  69. </view>
  70. </view>