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">
            <view class="policy-cell">500</view>
            <view class="policy-cell">30万元/艘</view>
          </view>
          <view class="policy-row">
            <view class="policy-cell">1000</view>
            <view class="policy-cell">50万元/艘</view>
          </view>
          <view class="policy-row">
            <view class="policy-cell">2000</view>
            <view class="policy-cell">80万元/艘</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">
            <view class="policy-cell">500</view>
            <view class="policy-cell">电力推进</view>
            <view class="policy-cell">50万元/艘</view>
          </view>
          <view class="policy-row">
            <view class="policy-cell">1000</view>
            <view class="policy-cell">LNG动力</view>
            <view class="policy-cell">80万元/艘</view>
          </view>
          <view class="policy-row">
            <view class="policy-cell">2000</view>
            <view class="policy-cell">混合动力</view>
            <view class="policy-cell">100万元/艘</view>
          </view>
        </view>
      </view>
    </view>
    <!-- 智能服务 -->
    <view class="card">
      <view class="card-header">智能服务</view>
      <view class="card-content">
        <view class="list-item">
          <view class="tag tag-warning">提醒</view>
          您的船舶年检即将到期，到期日期：2023年12月31日
        </view>
        <view class="list-item">
          <view class="tag tag-danger">提醒</view>
          您有3本证书即将到期
          <view style="margin-top: 10px">
            <view class="cert-item">
              <view>船舶检验证书</view>
              <view class="expire-date">到期时间：2023年12月15日</view>
            </view>
            <view class="cert-item">
              <view>船舶营运证</view>
              <view class="expire-date">到期时间：2023年12月20日</view>
            </view>
            <view class="cert-item">
              <view>船员适任证书</view>
              <view class="expire-date">到期时间：2023年12月25日</view>
            </view>
          </view>
        </view>
        <view class="list-item">
          <view class="tag">提醒</view>
          您有2个船员资质可升级
          <view style="margin-top: 10px">
            <view class="cert-item">
              <view>三副</view>
              <view class="upgrade-info">可升级为：二副</view>
            </view>
            <view class="cert-item">
              <view>机工</view>
              <view class="upgrade-info">可升级为：三管轮</view>
            </view>
          </view>
        </view>
        <view class="list-item contact-info">
          <view class="mb20">船舶年检证书办理与资质请联系朱经理</view>
          <view class="btn btn-phone" data-phone="13800138000">拨打电话</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>