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="输入关键词搜索" />
          <view class="search-btn">搜索</view>
        </view>
        <!-- 热门推荐 -->
        <view class="section-title">热门推荐</view>
        <view class="hot-services">
          <view class="service-item df">
            <view class="df aic">
              <view class="service-name">张师傅</view>
              <view class="service-type">机械维修</view>
            </view>
            <view class="btn btn-phone" data-phone="13800138001">
              <image class="tel" src="../../images/tel-f.png"></image>
              拨打电话
            </view>
          </view>
          <view class="service-item">
            <view class="df aic">
              <view class="service-name">李经理</view>
              <view class="service-type">船舶补给</view>
            </view>
            <view class="btn btn-phone" data-phone="13800138002">
              <image class="tel" src="../../images/tel-f.png"></image>
              拨打电话
            </view>
          </view>
          <view class="service-item">
            <view class="df aic">
              <view class="service-name">王工</view>
              <view class="service-type">电气维修</view>
            </view>
            <view class="btn btn-phone" data-phone="13800138003">
              <image class="tel" src="../../images/tel-f.png"></image>
              拨打电话
            </view>
          </view>
          <view class="service-item">
            <view class="df aic">
              <view class="service-name">赵队长</view>
              <view class="service-type">应急救援</view>
            </view>
            <view class="btn btn-phone" data-phone="13800138004">
              <image class="tel" src="../../images/tel-f.png"></image>
              拨打电话
            </view>
          </view>
        </view>
        <!-- 水位信息 -->
        <view class="section-title">水位信息</view>
        <view class="water-level-info">
          <view class="water-level-item">
            <view class="water-level-station">九江站</view>
            <view class="water-level-value">15.2米</view>
            <view class="water-level-trend rising">↑ 0.3米</view>
          </view>
          <view class="water-level-item">
            <view class="water-level-station">武汉站</view>
            <view class="water-level-value">18.5米</view>
            <view class="water-level-trend falling">↓ 0.2米</view>
          </view>
          <view class="water-level-item">
            <view class="water-level-station">南京站</view>
            <view class="water-level-value">10.1米</view>
            <view class="water-level-trend stable">→ 0.0米</view>
          </view>
        </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>