refund-confirm-popup.wxml 4.1 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116
  1. <t-popup
  2. placement="bottom"
  3. visible="{{visible}}"
  4. show-overlay="{{true}}"
  5. close-on-overlay-click="{{true}}"
  6. bind:visible-change="onPopupVisibleChange"
  7. >
  8. <view class="refund-confirm-popup">
  9. <view class="refund-confirm-popup__header">
  10. <view class="title">确认退款信息</view>
  11. <text class="refund-confirm-popup__close" catchtap="onClose">×</text>
  12. <view class="refund-confirm-popup__header-spacer" />
  13. </view>
  14. <view class="refund-confirm-popup__content">
  15. <view class="goods-card">
  16. <view class="goods-card__icon" />
  17. <view class="goods-card__main">
  18. <view class="goods-card__name">{{goodsName}}</view>
  19. <view class="goods-card__meta">{{goodsMeta1}}</view>
  20. </view>
  21. <view class="goods-card__right">
  22. <view class="goods-card__price">¥{{goodsPrice || '0.00'}}</view>
  23. <view class="goods-card__count">{{goodsMeta2}}</view>
  24. </view>
  25. </view>
  26. <view class="form-row">
  27. <text class="label">商品状态</text>
  28. <view class="value select" bindtap="onOpenStatusPicker">
  29. {{refundStatus === 'received' ? '已收到货' : '未收到货'}}
  30. <t-icon name="chevron-right" class="arrow-icon" size="30rpx" color="#b0b0b0" />
  31. </view>
  32. </view>
  33. <view class="form-row" catchtap="onEditReason">
  34. <text class="label">退款原因</text>
  35. <view class="value link">
  36. {{refundReason || '请选择'}}
  37. <t-icon name="chevron-right" class="arrow-icon" size="30rpx" color="#b0b0b0" />
  38. </view>
  39. </view>
  40. <view class="divider"></view>
  41. <view class="form-row" catchtap="onEditAmount">
  42. <text class="label amount-title">退款金额</text>
  43. <view class="value link">
  44. <t-icon name="edit" class="edit-icon" size="28rpx" color="#b0b0b0" />
  45. 修改
  46. </view>
  47. </view>
  48. <view class="form-row">
  49. <text class="label">退回微信</text>
  50. <view class="value amount">¥{{refundAmount}}</view>
  51. </view>
  52. <view class="form-row" catchtap="onEditProof">
  53. <text class="label">上传描述和凭证<text style="color:red">*</text></text>
  54. <view class="value link red">
  55. {{proofImages.length ? '已上传' + proofImages.length + '张' : '上传有助处理退款'}}
  56. <t-icon name="chevron-right" class="arrow-icon" size="30rpx" color="#b0b0b0" />
  57. </view>
  58. </view>
  59. </view>
  60. <view class="refund-confirm-popup__footer">
  61. <view class="refund-amount-line"><text>退回微信¥</text><text class="wechat-price">{{refundAmount}}</text></view>
  62. <view class="submit-btn" bindtap="onSubmit">提交申请</view>
  63. </view>
  64. </view>
  65. </t-popup>
  66. <t-picker
  67. visible="{{statusPickerVisible}}"
  68. value="{{statusPickerValue}}"
  69. title=""
  70. use-popup="{{true}}"
  71. header="{{true}}"
  72. cancel-btn="取消"
  73. confirm-btn="确定"
  74. bind:change="onStatusPickerChange"
  75. bind:close="onStatusPickerClose"
  76. z-index="12000"
  77. style="--td-picker-z-index: 12000; --td-popup-z-index: 12000;"
  78. >
  79. <t-picker-item options="{{statusPickerOptions}}" />
  80. </t-picker>
  81. <t-popup
  82. placement="center"
  83. visible="{{amountEditorVisible}}"
  84. show-overlay="{{true}}"
  85. close-on-overlay-click="{{true}}"
  86. bind:visible-change="onAmountPopupVisibleChange"
  87. z-index="12000"
  88. style="--td-popup-z-index: 12000;"
  89. >
  90. <view class="amount-popup">
  91. <view class="amount-popup__header">
  92. <view class="title">请输入退款总金额</view>
  93. </view>
  94. <view class="amount-popup__body">
  95. <view class="hint">最高可退¥{{maxAmount}}元</view>
  96. <input class="amount-input" type="digit" value="{{amountInput}}" bindinput="onAmountInput" />
  97. <view class="actions">
  98. <view class="action-item">
  99. <t-button class="action-btn" block size="medium" variant="outline" theme="primary" catchtap="onAmountClose">取消</t-button>
  100. </view>
  101. <view class="action-item">
  102. <t-button class="action-btn confirm-btn" block size="medium" theme="primary" catchtap="onAmountConfirm">确定</t-button>
  103. </view>
  104. </view>
  105. </view>
  106. </view>
  107. </t-popup>