ShipOwner_WxApp/miniprogram/pages/cert/cert.wxml

<view class="container">
  <!-- 顶部标题 -->

  <!-- 内容区域 -->
  <view class="content">
    <!-- 船舶基础信息 -->
    <view class="card">
      <view class="card-header">船舶基础信息</view>
      <view class="card-content">
        <view class="info-item">
          <view class="info-label">船舶名称</view>
          <view class="info-value">{{shipName}}</view>
        </view>
        <view class="info-item">
          <view class="info-label">MMSI</view>
          <view class="info-value">{{mmsi}}</view>
        </view>
      </view>
    </view>
    <!-- 船舶证书 -->
    <view class="card">
      <view class="card-header">船舶证书</view>
      <view class="card-content">
        <view class="cert-list">
          <view class="cert-item" wx:for="{{shipCerts}}" wx:key="index">
            <view class="cert-title">{{item.name}}</view>
            <image class="cert-photo" mode="aspectFit" src="{{item.photoUrl}}" bindtap="previewImage" data-url="{{item.photoUrl}}"></image>
            <view class="cert-expire">
              <text class="expire-label">有效期至：</text>
              <text class="expire-date">{{item.expireDate}}</text>
            </view>
          </view>
        </view>
      </view>
    </view>
    <!-- 船员证书 -->
    <view class="card">
      <view class="card-header">船员证书</view>
      <view class="card-content">
        <view class="crew-list">
          <view class="crew-item" wx:for="{{crewCerts}}" wx:key="index">
            <view class="crew-name">{{item.name}}</view>
            <!-- 体检报告 -->
            <view class="cert-section">
              <view class="section-title">体检报告</view>
              <image class="cert-photo" mode="aspectFit" src="{{item.medicalReport}}" bindtap="previewImage" data-url="{{item.medicalReport}}"></image>
            </view>
            <!-- 服务簿 -->
            <view class="cert-section">
              <view class="section-title">服务簿</view>
              <image class="cert-photo" mode="aspectFit" src="{{item.serviceBook}}" bindtap="previewImage" data-url="{{item.serviceBook}}"></image>
            </view>
            <!-- 证书列表 -->
            <view class="cert-section">
              <view class="section-title">证书列表</view>
              <view class="cert-list">
                <view class="cert-item" wx:for="{{item.certificates}}" wx:for-item="cert" wx:key="index">
                  <view class="cert-title">{{cert.name}}</view>
                  <image class="cert-photo" mode="aspectFit" src="{{cert.photoUrl}}" bindtap="previewImage" data-url="{{cert.photoUrl}}"></image>
                  <view class="cert-expire">
                    <text class="expire-label">有效期至：</text>
                    <text class="expire-date">{{cert.expireDate}}</text>
                  </view>
                </view>
              </view>
            </view>
          </view>
        </view>
      </view>
    </view>
    <!-- 分享按钮 -->
    <view class="share-section">
      <button class="share-btn" open-type="share">一键分享证书信息</button>
      <view class="share-footer">船东证书服务由汇很多船东科技服务平台提供</view>
    </view>
  </view>
</view>
<view class="h200"></view>