message-select.wxml 4.0 KB

1234567891011121314151617181920212223242526272829303132333435363738394041424344454647484950515253545556575859606162636465666768697071727374757677787980
  1. <wxs module="_">
  2. module.exports.getClassName = function (option) {
  3. if (!option) return '';
  4. if (option.disabled) return 'card--disabled';
  5. if (option.checked) return 'card--active';
  6. }
  7. module.exports.maxHeight = function (options, height, maxHeight) {
  8. var rows = Math.ceil(options.filter(function (option) { return !option.hide }).length / 3);
  9. return Math.min(rows * (height + 8), maxHeight || 350);
  10. }
  11. module.exports.subName = function (option) {
  12. if (!option.options) return '';
  13. var options = option.options
  14. .filter(function (option) { return option.checked; })
  15. .map(function (option) { return option.name; })
  16. if (options.length) return ':' + options.join(' ');
  17. return ''
  18. }
  19. </wxs>
  20. <!--module/chats/components/message-select/message-select.wxml-->
  21. <view class="chat-card left">
  22. <view class="chat-card__avatar ">
  23. <image src="../../assets/robot.png" mode="aspectFill" />
  24. </view>
  25. <view class="chat-card__content">
  26. <t-cell t-class="cell-border-gradient" title="{{payload.title}}"></t-cell>
  27. <scroll-view class="options-wrapper" type="custom" scroll-y style="height: {{_.maxHeight(options, itemHeight)}}px;" mark:type="options" bind:tap="handleTop">
  28. <grid-builder list="{{options}}" cross-axis-count="3" cross-axis-gap="8" main-axis-gap="8" padding="{{[4,4,4,4]}}">
  29. <view slot:item slot:index class="card {{_.getClassName(item)}}" style="height: {{itemHeight}}px;" mark:item="{{item}}" mark:index="{{index}}">
  30. <t-icon wx:if="{{item.checked}}" name="check" t-class="card__icon" ariaHidden="{{true}}" />
  31. <text overflow="ellipsis" max-lines="2">{{item.name}}{{_.subName(item)}}</text>
  32. </view>
  33. </grid-builder>
  34. </scroll-view>
  35. <view wx:if="{{payload.multiple}}" class="chat-card__handle {{active ? '' : 'disabled'}}">
  36. <view class="item" bind:tap="onSubmit">
  37. <image src="../../assets/button-1.bg.png" mode="aspectFit" />
  38. <view>提交</view>
  39. </view>
  40. </view>
  41. </view>
  42. </view>
  43. <view class="chat-card right" wx:if="{{result}}">
  44. <view class="chat-card__avatar ">
  45. <user-avatar></user-avatar>
  46. </view>
  47. <view class="chat-card__content">
  48. <t-cell title="{{result}}" bordered="{{false}}"></t-cell>
  49. </view>
  50. <t-loading wx:if="{{active}}" t-class="loading" theme="spinner" size="40rpx" class="wrapper" />
  51. </view>
  52. <t-popup wx:if="{{subOptions.length}}" t-class="form-picker__inner" visible="{{true}}" bind:visible-change="onCancel" placement="bottom" close-on-overlay-click="{{false}}">
  53. <view class="form-picker__header">
  54. <view class="btn btn--cancel" aria-role="button" bind:tap="onCancel">取消</view>
  55. <view class="title">{{subTitle}}</view>
  56. <view wx:if="{{subMultiple}}" class="btn btn--confirm" aria-role="button" bind:tap="onConfirm">确定</view>
  57. </view>
  58. <view class="form-picker__content">
  59. <scroll-view class="options-wrapper" type="custom" scroll-y style="height: {{_.maxHeight(subOptions, itemHeight)}}px;" mark:type="sub" bind:tap="handleSub">
  60. <grid-builder list="{{subOptions}}" cross-axis-count="3" cross-axis-gap="8" main-axis-gap="8" padding="{{[4,4,4,4]}}">
  61. <view slot:item slot:index class="card {{_.getClassName(item)}}" style="height: {{itemHeight}}px;" mark:item="{{item}}" mark:index="{{index}}">
  62. <t-icon wx:if="{{item.checked}}" name="check" t-class="card__icon" ariaHidden="{{true}}" />
  63. <text overflow="ellipsis" max-lines="2">{{item.name}}{{_.subName(item)}}</text>
  64. </view>
  65. </grid-builder>
  66. </scroll-view>
  67. <!-- <scroll-view type="list" scroll-y style="{{_.maxHeight(subOptions)}}">
  68. <view class="options-wrapper" mark:type="sub" bind:tap="handle">
  69. <view wx:for="{{subOptions}}" wx:key="id" class="card {{_.getClassName(item)}}" style="height: {{itemHeight}}px;" mark:item="{{item}}" mark:index="{{index}}">
  70. <t-icon wx:if="{{item.checked}}" name="check" t-class="card__icon" ariaHidden="{{true}}" />
  71. <text overflow="ellipsis" max-lines="3">{{item.name}}</text>
  72. </view>
  73. </view>
  74. </scroll-view> -->
  75. </view>
  76. </t-popup>