addCartModel.wxml 2.1 KB

1234567891011121314151617181920212223242526272829303132333435363738394041424344454647484950515253545556
  1. <!--components/addCartModel/addCartModel.wxml-->
  2. <view class="modal-container {{visible ? 'modal-show' : ''}}">
  3. <view class="modal-mask" bindtap="handleClose"></view>
  4. <view class="modal-content">
  5. <!-- 头部关闭按钮 -->
  6. <view class="modal-header">
  7. <text class="title">选择规格</text>
  8. <text class="close-btn" bindtap="handleClose">×</text>
  9. </view>
  10. <!-- 商品信息 -->
  11. <view class="product-info">
  12. <image class="product-image" src="{{product.prodPicList[0].picUrl}}" mode="aspectFill"></image>
  13. <view class="product-detail">
  14. <view class="prodName">{{product.prodName}}</view>
  15. <view class="product-attr">
  16. <text class="price">¥{{product.price || 100}}</text>
  17. <text class="stock">剩余:{{product.stock || 100}}</text>
  18. </view>
  19. </view>
  20. </view>
  21. <!-- 数量选择 -->
  22. <view class="quantity-section">
  23. <view class="quantity-title">购买数量</view>
  24. <view class="quantity-control">
  25. <text class="btn-minus" bindtap="decreaseQuantity" disabled="{{quantity <= 1}}">-</text>
  26. <input class="quantity-input" type="number" value="{{quantity}}" disabled />
  27. <text class="btn-plus" bindtap="increaseQuantity" disabled="{{quantity >= product.stock}}">+</text>
  28. </view>
  29. </view>
  30. <!-- 规格选择 -->
  31. <view class="spec-section" wx:for="{{product.prodAttrList}}" wx:key="name">
  32. <view class="spec-title">{{item.prodName}}</view>
  33. <view class="spec-options">
  34. <view
  35. class="spec-option {{isSpecSelected(index, optionIndex) ? 'selected' : ''}}"
  36. wx:for="{{item.options}}"
  37. wx:key="value"
  38. bindtap="selectSpec"
  39. data-spec-index="{{index}}"
  40. data-option-index="{{optionIndex}}"
  41. >
  42. {{item}}
  43. </view>
  44. </view>
  45. </view>
  46. <!-- 底部按钮 -->
  47. <view class="footer">
  48. <button class="add-btn" bindtap="handleAddToCart">加入购物车</button>
  49. </view>
  50. </view>
  51. </view>