danyang-match/miniapp/components/user-card/index.wxml

<view class="ui-user-card" bindtap="onTap">
  <view wx:if="{{selectable}}" class="ui-user-card__select" catchtap="onToggleSelect">
    <checkbox class="ui-user-card__checkbox" checked="{{selected}}" color="#FF5C82" />
  </view>
  <ui-avatar
    src="{{user.avatarUrl || '/assets/brand/default-avatar.png'}}"
    size="lg"
    verified="{{user.verified}}"
    reviewed="{{user.reviewed}}"
    default-text="{{user.displayName}}"
    bind:tap="onTap"
  />
  <view class="ui-user-card__body">
    <view class="ui-user-card__name-row">
      <text class="ui-user-card__name">{{user.displayName}}</text>
      <text class="ui-user-card__age">{{user.age}}岁</text>
      <text wx:if="{{user.online}}" class="ui-user-card__online">在线</text>
    </view>
    <view class="ui-user-card__meta">
      <text wx:if="{{user.heightCm}}">{{user.heightCm}}cm · </text>
      <text>{{user.regionName}}</text>
      <text wx:if="{{educationLabel}}"> · {{educationLabel}}</text>
    </view>
    <view wx:if="{{occupationLabel}}" class="ui-user-card__meta">
      {{occupationLabel}}
    </view>
    <view wx:if="{{user.recommendationReasons && user.recommendationReasons.length}}" class="ui-user-card__tags">
      <text wx:for="{{user.recommendationReasons}}" wx:key="*this" class="ui-user-card__tag">{{item}}</text>
    </view>
    <view wx:if="{{maritalLabel || user.hasChildren !== undefined}}" class="ui-user-card__meta">
      <text wx:if="{{maritalLabel}}">{{maritalLabel}}</text>
      <text wx:if="{{user.hasChildren}}"> · 有孩</text>
    </view>
  </view>
  <view class="ui-user-card__actions">
    <slot name="actions"></slot>
  </view>
</view>