health.applet/miniprogram/module/chats/components/message-select/message-select.wxml

<wxs module="_">
  module.exports.getClassName = function (option) {
    if (!option) return '';
    if (option.disabled) return 'card--disabled';
    if (option.checked) return 'card--active';
  }
  module.exports.maxHeight = function (options, height, maxHeight) {
    var rows = Math.ceil(options.filter(function (option) { return !option.hide }).length / 3);
    return Math.min(rows * (height + 8), maxHeight || 350);
  }
  module.exports.subName = function (option) {
    if (!option.options) return '';
    var options = option.options
      .filter(function (option) { return option.checked; })
      .map(function (option) { return option.name; })
    if (options.length) return ':' + options.join(' ');
    return ''
  }

  module.exports.options = function (options) {
    return options.filter(function (option) { return !option.hide })
  }
</wxs>
<!--module/chats/components/message-select/message-select.wxml-->
<view class="chat-card left">
  <view class="chat-card__avatar ">
    <image src="../../assets/robot.png" mode="aspectFill" />
  </view>
  <view class="chat-card__content">
    <t-cell t-class="cell-border-gradient" title="{{payload.title}}"></t-cell>
    <scroll-view class="options-wrapper" type="custom" scroll-y style="height: {{_.maxHeight(options, itemHeight)}}px;" mark:type="options" bind:tap="handleTop">
      <grid-builder list="{{_.options(options)}}" cross-axis-count="3" cross-axis-gap="8" main-axis-gap="8" padding="{{[4,4,4,4]}}">
        <view slot:item slot:index class="card {{_.getClassName(item)}}" style="height: {{itemHeight}}px;" mark:item="{{item}}">
          <t-icon wx:if="{{item.checked}}" name="check" t-class="card__icon" ariaHidden="{{true}}" />
          <text overflow="ellipsis" max-lines="2">{{item.name}}{{_.subName(item)}}</text>
        </view>
      </grid-builder>
    </scroll-view>
    <view wx:if="{{payload.multiple || !payload.required}}" class="chat-card__handle {{active ? '' : 'disabled'}}">
      <view wx:if="{{!payload.required}}" class="item {{hasSelected ? 'disabled': ''}}" bind:tap="onSkip">
        <view class="not-change">都没有</view>
      </view>
      <view wx:if="{{payload.multiple}}" class="item" bind:tap="onSubmit">
        <view class="sub-btn">提交</view>
      </view>
    </view>
  </view>
</view>

<view class="chat-card right" wx:if="{{result}}">
  <view class="chat-card__avatar ">
    <user-avatar></user-avatar>
  </view>
  <view class="chat-card__content">
    <t-cell title="{{result}}" bordered="{{false}}"></t-cell>
  </view>
  <t-loading wx:if="{{active}}" t-class="loading" theme="spinner" size="40rpx" class="wrapper" />
</view>

<t-popup wx:if="{{subOptions.length}}" t-class="form-picker__inner" visible="{{true}}" bind:visible-change="onCancel" placement="bottom" close-on-overlay-click="{{false}}">
  <view class="form-picker__header">
    <view class="btn btn--cancel" aria-role="button" bind:tap="onCancel">取消</view>
    <view class="title">{{subTitle}}</view>
    <view wx:if="{{subMultiple}}" class="btn btn--confirm" aria-role="button" bind:tap="onConfirm">确定</view>
  </view>
  <view class="form-picker__content">
    <scroll-view class="options-wrapper" type="custom" scroll-y style="height: {{_.maxHeight(subOptions, itemHeight)}}px;" mark:type="sub" bind:tap="handleSub">
      <grid-builder list="{{_.options(subOptions)}}" cross-axis-count="3" cross-axis-gap="8" main-axis-gap="8" padding="{{[4,4,4,4]}}">
        <view slot:item slot:index class="card {{_.getClassName(item)}}" style="height: {{itemHeight}}px;" mark:item="{{item}}">
          <t-icon wx:if="{{item.checked}}" name="check" t-class="card__icon" ariaHidden="{{true}}" />
          <text overflow="ellipsis" max-lines="2">{{item.name}}{{_.subName(item)}}</text>
        </view>
      </grid-builder>
    </scroll-view>
  </view>
</t-popup>