ShipOwner_WxApp/miniprogram/pages/takePhoto/takePhoto.wxml

<!-- pages/takePhoto/takePhoto.wxml -->
<view class="container">
  <!-- 顶部标题 -->
  <!-- 内容区域 -->
  <view class="content">
    <!-- 签到、拍货物、拍单据按钮 -->
    <view class="btn-group">
      <view class="btn btn-green" bindtap="onSignIn">签到</view>
      <view class="btn btn-blue" bindtap="onTakeCargoPhoto">拍货物</view>
      <view class="btn btn-red" bindtap="onTakeDocPhoto">拍单据</view>
    </view>
    <!-- 码头服务查询 -->
    <view class="card">
      <view class="card-header">码头服务查询</view>
      <view class="card-content">
        <!-- 搜索栏 -->
        <view class="search-box">
          <input type="text" class="search-input" placeholder="输入关键词搜索" bindinput="onSearchInput" value="{{searchWords}}" />
          <view class="search-btn" bindtap="searchTerminalServices">搜索</view>
        </view>
        <!-- 热门推荐 -->
        <view class="section-title">热门推荐</view>
        <view class="hot-services">
          <view class="loading" wx:if="{{loading}}">加载中...</view>
          <block wx:elif="{{terminalServices.length > 0}}">
            <view class="service-item" wx:for="{{terminalServices}}" wx:key="id">
              <view class="df aic">
                <view class="dock-name">{{item.dockName || '未知码头'}}</view>
                <view class="service-name">{{item.serviceStaffName}}</view>
                <view class="service-type">{{item.serviceType}}</view>
              </view>
              <view class="btn btn-phone" data-phone="{{item.serviceStaffPhone}}" bindtap="makePhoneCall">
                <image class="tel" src="../../images/tel-f.png"></image>
                拨打电话
              </view>
            </view>
          </block>
          <block wx:else>
            <view class="no-data">暂无码头服务数据</view>
          </block>
        </view>
        <!-- 水位信息 -->
        <view class="section-title">水位信息</view>
        <scroll-view class="water-level-info" scroll-y="true">
          <view class="water-level-item" wx:for="{{waterLevels}}">
            <view class="water-level-station">{{item.site}}</view>
            <view class="water-level-value">{{item.waterLevel}}米</view>
            <view class="water-level-trend {{ item.change}}">
              {{item.changeIcon}} {{item.waterLevelFluctuation}} 米
            </view>
          </view>
        </scroll-view>
      </view>
    </view>
    <!-- 新能源船舶政策解读 -->
    <view class="card">
      <view class="card-header">新能源船舶政策解读</view>
      <view class="card-content">
        <!-- 拆船政策 -->
        <view class="section-title mt0">拆船政策</view>
        <view class="policy-table">
          <view class="policy-header">
            <view class="policy-cell">吨位</view>
            <view class="policy-cell">补贴额度</view>
          </view>
          <view class="policy-row" wx:for="{{demolitionPolicy}}">
            <view class="policy-cell">{{item.shipTons}}</view>
            <view class="policy-cell">{{item.subsidyAmount}} 万元/艘</view>
          </view>
        </view>
        <!-- 造船政策 -->
        <view class="section-title">造船政策</view>
        <view class="policy-table">
          <view class="policy-header">
            <view class="policy-cell">吨位</view>
            <view class="policy-cell">新能源类型</view>
            <view class="policy-cell">补贴额度</view>
          </view>
          <view class="policy-row" wx:for="{{shipbuildingPolicy}}">
            <view class="policy-cell">{{item.shipTons}}</view>
            <view class="policy-cell">{{item.newEnergyType}}</view>
            <view class="policy-cell">{{item.subsidyAmount}} 万元/艘</view>
          </view>
        </view>
      </view>
    </view>
    <!-- 智能服务 -->
    <view class="card">
      <view class="card-header">智能服务</view>
      <view class="card-content">
        <!-- 船舶年检 -->
        <view class="list-item" wx:if="{{shipAnnualInspection && shipAnnualInspection.length > 0}}">
          <view class="tag tag-warning">提醒</view>
          您的船舶年检信息
          <view style="margin-top: 10px">
            <view class="cert-item c7">
              <view>年检证书</view>
              <view>到期时间</view>
            </view>
          </view>
          <view>
            <view class="cert-item" wx:for="{{shipAnnualInspection}}" wx:key="index">
              <view>{{item.shipCertName}}</view>
              <view class="expire-date {{item.expireType === 1 ? 'text-danger' : ''}}">
                {{item.validityPeriodEndTime}}
              </view>
            </view>
          </view>
        </view>
        <!-- 船舶证书 -->
        <view class="list-item" wx:if="{{shipCertificate && shipCertificate.length > 0}}">
          <view class="tag tag-danger">提醒</view>
          您有{{shipCertificate.length}}个证书即将到期
          <view style="margin-top: 10px">
            <view class="cert-item c7">
              <view>证书名称</view>
              <view>到期时间</view>
            </view>
          </view>
          <view>
            <view class="cert-item" wx:for="{{shipCertificate}}" wx:key="index">
              <view>{{item.shipCertName}}</view>
              <view class="expire-date {{item.shipCertValid.expireType === 1 ? 'text-danger' : ''}}">
                {{item.shipCertValid.validityPeriodEndTime}}
              </view>
            </view>
          </view>
        </view>
        <!-- 证书办理联系人 -->
        <view class="list-item contact-info" wx:if="{{certOperationContact && certOperationContact.length > 0}}">
          <view class="mb20">证书办理联系人</view>
          <view wx:for="{{certOperationContact}}" wx:key="id" class="contact-item">
            <view>{{item.officeName}} - {{item.contactPerson}}</view>
            <view class="btn btn-phone" data-phone="{{item.contactPhone}}" bindtap="makePhoneCall">
              拨打电话
            </view>
          </view>
        </view>
      </view>
    </view>
    <!-- 搜查附近货盘 -->
    <view class="card">
      <view class="card-header">搜查附近货盘</view>
      <view class="card-content">
        <view class="search-box">
          <input type="text" class="search-input" placeholder="输入关键词搜索" />
          <view class="search-btn">搜索</view>
        </view>
        <view class="map-container">
          <view>地图区域 - 显示船舶与货盘</view>
          <!-- 这里可以使用微信小程序的map组件替换 -->
          <view class="map-marker ship"></view>
          <view class="map-marker cargo" style="top: 30%; left: 60%"></view>
          <view class="map-marker cargo" style="top: 50%; left: 30%"></view>
          <view class="map-marker cargo" style="top: 60%; left: 55%"></view>
        </view>
        <!-- 货盘列表 -->
        <view class="cargo-list">
          <view class="cargo-item">
            <view class="cargo-info">
              <text class="cargo-type">煤炭</text>
              <view>| 南京港 → 芜湖港 |</view>
              <view>3000吨</view>
            </view>
            <view class="cargo-meta">
              <view class="cargo-distance">距离: 约50公里</view>
              <view class="btn btn-phone" data-phone="13900139001">
                <image class="tel" src="../../images/tel-f.png"></image>
                拨打电话
              </view>
            </view>
          </view>
          <view class="cargo-item">
            <view class="cargo-info">
              <text class="cargo-type">砂石</text>
              <view>| 马鞍山港 → 安庆港 |</view>
              <view>5000吨</view>
            </view>
            <view class="cargo-meta">
              <view class="cargo-distance">距离: 约80公里</view>
              <view class="btn btn-phone" data-phone="13900139002">
                <image class="tel" src="../../images/tel-f.png"></image>
                拨打电话
              </view>
            </view>
          </view>
          <view class="cargo-item">
            <view class="cargo-info">
              <text class="cargo-type">水泥</text>
              <view>| 芜湖港 → 九江港 |</view>
              <view>2000吨</view>
            </view>
            <view class="cargo-meta">
              <view class="cargo-distance">距离: 约120公里</view>
              <view class="btn btn-phone" data-phone="13900139003">
                <image class="tel" src="../../images/tel-f.png"></image>
                拨打电话
              </view>
            </view>
          </view>
        </view>
      </view>
    </view>
  </view>
</view>