confirme-order.wxml 4.2 KB

1234567891011121314151617181920212223242526272829303132333435363738394041424344454647484950515253545556575859606162636465666768697071727374757677787980818283848586878889909192939495969798
  1. <!--module/order/pages/confirme-order/confirme-order.wxml-->
  2. <t-navbar title="确认订单" left-arrow />
  3. <scroll-view class="page-scroll__container bottom" type="list" scroll-y style="{{containerStyle}}">
  4. <view class="info-box {{ showDetail ? ' ' : 'show-bttom' }}">
  5. <!-- 收货人信息卡片 -->
  6. <view class="address-card address-card--disabled" bindtap="changeAddress">
  7. <view class="delivery-address" wx:if="{{showDetail}}">
  8. 请选择配送地址
  9. </view>
  10. <view class="address-content" wx:else>
  11. <!-- 左侧位置图标 -->
  12. <view class="address-icon-wrapper">
  13. <image class="address-icon" src="/assets/icon/icon_location@3x.png" mode="aspectFit" />
  14. </view>
  15. <!-- 中间地址信息 -->
  16. <view class="address-info">
  17. <view class="address-header">
  18. <text class="address-name">{{name}}</text>
  19. <text class="address-phone">{{phone}}</text>
  20. </view>
  21. <view class="address-detail">
  22. {{address}}
  23. </view>
  24. </view>
  25. <!-- 右侧操作图标 -->
  26. <view class="address-actions">
  27. <t-icon name="edit" class="edit-icon" />
  28. <text class="arrow-icon">›</text>
  29. </view>
  30. </view>
  31. </view>
  32. </view>
  33. <!-- 商品列表 -->
  34. <view class="goods-list" wx:for="{{goodsList}}" wx:key="category">
  35. <!-- 分类标题 -->
  36. <view class="category-title">{{item.category}}</view>
  37. <!-- 商品项 -->
  38. <view class="goods-item" wx:for="{{item.goods}}" wx:for-item="goods" wx:for-index="goodsIndex" wx:key="id">
  39. <!-- 复选框 -->
  40. <view class="goods-checkbox">
  41. <t-checkbox checked="{{goods.checked}}" bind:change="onGoodsCheckChange" data-category-index="{{index}}" data-goods-index="{{goodsIndex}}" style="padding:0" />
  42. </view>
  43. <!-- 商品图片 -->
  44. <image class="goods-image" src="{{goods.image}}" mode="aspectFill" />
  45. <!-- 商品信息 -->
  46. <view class="goods-info">
  47. <view class="goods-name-row">
  48. <text class="goods-name">{{goods.name}}</text>
  49. </view>
  50. <view class="goods-desc" wx:if="{{goods.description}}">{{goods.description}}</view>
  51. <view class="goods-price-row">
  52. <text class="goods-price">¥{{goods.price}}</text>
  53. <!-- 数量选择器 -->
  54. <view class="quantity-selector">
  55. <view class="quantity-btn minus {{goods.quantity <= 1 ? 'disabled' : ''}}" bind:tap="onQuantityChange" data-category-index="{{index}}" data-goods-index="{{goodsIndex}}" data-type="minus">-</view>
  56. <input class="quantity-input" type="number" value="{{goods.quantity}}" bind:input="onQuantityInput" bind:blur="onQuantityBlur" data-category-index="{{index}}" data-goods-index="{{goodsIndex}}" />
  57. <view class="quantity-btn plus {{goods.price === 0 && goods.quantity >= 1 ? 'disabled' : ''}}" bind:tap="onQuantityChange" data-category-index="{{index}}" data-goods-index="{{goodsIndex}}" data-type="plus">+</view>
  58. </view>
  59. </view>
  60. </view>
  61. </view>
  62. </view>
  63. <view class="order-info-section">
  64. <!-- 备注 -->
  65. <view class="info-card">
  66. <view class="remark-item">
  67. <text class="info-label">备注</text>
  68. <view class="remark-input-wrapper">
  69. <textarea class="remark-textarea" placeholder="请输入您需要备注的内容" value="{{remark}}" maxlength="200" bindinput="onRemarkInput" auto-height show-confirm-bar="{{false}}" />
  70. <view class="remark-count">
  71. <text class="remark-count-text">{{remarkLength}}/200</text>
  72. </view>
  73. </view>
  74. </view>
  75. </view>
  76. </view>
  77. </scroll-view>
  78. <!-- 立即支付 -->
  79. <view class="footer-bar" style="padding-bottom: {{container.safeBottomOffset}}px;">
  80. <view class="footer-center">
  81. <text class="footer-text" style="margin-right:10px">共{{totalGoodsCount}}件 </text>
  82. <text class="footer-text">合计: </text>
  83. <text class="footer-price">¥{{totalPrice}}</text>
  84. </view>
  85. <view class="footer-right">
  86. <view class="checkout-btn {{isPaymentLoading ? 'checkout-btn--loading' : ''}}" bind:tap="onPayment">
  87. <text wx:if="{{isPaymentLoading}}">支付中...</text>
  88. <text wx:else>立即支付</text>
  89. </view>
  90. </view>
  91. </view>