Преглед на файлове

refactor(miniprogram): 重构小程序页面

- 移除 takePhoto 页面的冗余代码
- 添加 index2 页面作为新的主页面
- 更新 app.wxss 样式
- 添加新的电话图标图片
wzg преди 10 месеца
родител
ревизия
0a9ead2f90

+ 2 - 2
miniprogram/app.wxss

@@ -214,10 +214,10 @@ view {
   padding-bottom: 15rpx;
 }
 
-.card {
+/* .card {
   padding: 20rpx 28rpx 20rpx 28rpx;
   box-shadow: 0px 0px 1px 1px #f5f5f5;
   background: #fff;
   margin: 28rpx;
   border-radius: 20rpx;
-}
+} */

BIN
miniprogram/images/tel-d.png


BIN
miniprogram/images/tel-f.png


+ 732 - 0
miniprogram/pages/takePhoto/index2.html

@@ -0,0 +1,732 @@
+<!DOCTYPE html>
+<html lang="zh-CN">
+  <head>
+    <meta charset="UTF-8" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <title>内河干散货运输船东服务小程序</title>
+    <style>
+      /* 全局样式 */
+      * {
+        margin: 0;
+        padding: 0;
+        box-sizing: border-box;
+        font-family: "PingFang SC", "Helvetica Neue", "Microsoft YaHei",
+          sans-serif;
+      }
+
+      body {
+        background-color: #f5f7fa;
+        color: #333;
+        font-size: 14px;
+        line-height: 1.5;
+      }
+
+      .container {
+        max-width: 414px; /* iPhone 8 Plus 宽度 */
+        margin: 0 auto;
+        background-color: #fff;
+        min-height: 100vh;
+        position: relative;
+        padding-bottom: 60px; /* 为底部导航留出空间 */
+      }
+
+      .header {
+        background-color: #1e88e5;
+        color: white;
+        padding: 15px;
+        text-align: center;
+        font-size: 18px;
+        font-weight: bold;
+        position: sticky;
+        top: 0;
+        z-index: 100;
+      }
+
+      .content {
+        padding: 15px;
+      }
+
+      /* 底部导航栏 */
+      .nav-bar {
+        position: fixed;
+        bottom: 0;
+        width: 100%;
+        max-width: 414px;
+        display: flex;
+        background-color: #fff;
+        border-top: 1px solid #e0e0e0;
+        height: 60px;
+        z-index: 100;
+      }
+
+      .nav-item {
+        flex: 1;
+        display: flex;
+        flex-direction: column;
+        align-items: center;
+        justify-content: center;
+        padding: 5px 0;
+        color: #666;
+        text-decoration: none;
+        font-size: 12px;
+        transition: color 0.3s;
+      }
+
+      .nav-item.active {
+        color: #1e88e5;
+      }
+
+      .nav-icon {
+        font-size: 24px;
+        margin-bottom: 2px;
+      }
+
+      /* 按钮样式 */
+      .btn {
+        display: block;
+        width: 100%;
+        padding: 15px;
+        border-radius: 8px;
+        text-align: center;
+        color: white;
+        font-weight: bold;
+        margin-bottom: 15px;
+        text-decoration: none;
+        transition: opacity 0.3s;
+      }
+
+      .btn:active {
+        opacity: 0.8;
+      }
+
+      .btn-green {
+        background-color: #4caf50;
+      }
+
+      .btn-blue {
+        background-color: #1e88e5;
+      }
+
+      .btn-red {
+        background-color: #f44336;
+      }
+
+      .btn-phone {
+        background-color: #ff9800;
+        display: inline-flex;
+        align-items: center;
+        justify-content: center;
+        width: auto;
+        padding: 8px 15px;
+      }
+
+      .btn-phone:before {
+        content: "☎️";
+        margin-right: 5px;
+      }
+
+      /* 卡片样式 */
+      .card {
+        background-color: #fff;
+        border-radius: 8px;
+        box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
+        margin-bottom: 15px;
+        overflow: hidden;
+      }
+
+      .card-header {
+        padding: 12px 15px;
+        border-bottom: 1px solid #eee;
+        font-weight: bold;
+        font-size: 16px;
+        color: #333;
+        background-color: #f9f9f9;
+      }
+
+      .card-content {
+        padding: 15px;
+      }
+
+      /* 列表样式 */
+      .list-item {
+        padding: 12px 15px;
+        border-bottom: 1px solid #eee;
+      }
+
+      .list-item:last-child {
+        border-bottom: none;
+      }
+
+      /* 标签样式 */
+      .tag {
+        display: inline-block;
+        padding: 4px 8px;
+        border-radius: 4px;
+        font-size: 12px;
+        color: white;
+        margin-right: 5px;
+        background-color: #1e88e5;
+      }
+
+      .tag-warning {
+        background-color: #ff9800;
+      }
+
+      .tag-danger {
+        background-color: #f44336;
+      }
+
+      /* 搜索框 */
+      .search-box {
+        display: flex;
+        margin-bottom: 15px;
+      }
+
+      .search-input {
+        flex: 1;
+        padding: 10px 15px;
+        border: 1px solid #ddd;
+        border-radius: 8px 0 0 8px;
+        outline: none;
+      }
+
+      .search-btn {
+        background-color: #1e88e5;
+        color: white;
+        border: none;
+        padding: 0 15px;
+        border-radius: 0 8px 8px 0;
+        cursor: pointer;
+      }
+
+      /* 地图模块 */
+      .map-container {
+        height: 200px;
+        background-color: #e0e0e0;
+        margin-bottom: 15px;
+        border-radius: 8px;
+        display: flex;
+        align-items: center;
+        justify-content: center;
+        color: #666;
+        position: relative;
+      }
+
+      .map-marker {
+        position: absolute;
+        width: 20px;
+        height: 20px;
+        background-color: #1e88e5;
+        border-radius: 50%;
+        transform: translate(-50%, -50%);
+      }
+
+      .map-marker.ship {
+        background-color: #4caf50;
+      }
+
+      .map-marker.cargo {
+        background-color: #f44336;
+      }
+
+      /* 图片容器 */
+      .img-container {
+        width: 100%;
+        height: 150px;
+        background-color: #e0e0e0;
+        margin-bottom: 10px;
+        border-radius: 8px;
+        display: flex;
+        align-items: center;
+        justify-content: center;
+        color: #666;
+      }
+
+      /* 分享按钮 */
+      .share-btn {
+        display: flex;
+        align-items: center;
+        justify-content: center;
+        padding: 10px;
+        background-color: #1e88e5;
+        color: white;
+        border-radius: 8px;
+        margin-top: 15px;
+        text-decoration: none;
+      }
+
+      .share-btn:before {
+        content: "分享";
+        margin-right: 5px;
+      }
+
+      /* 表单样式 */
+      .form-group {
+        margin-bottom: 15px;
+      }
+
+      .form-label {
+        display: block;
+        margin-bottom: 5px;
+        font-weight: bold;
+      }
+
+      .form-input {
+        width: 100%;
+        padding: 10px;
+        border: 1px solid #ddd;
+        border-radius: 8px;
+        outline: none;
+      }
+
+      textarea.form-input {
+        min-height: 100px;
+        resize: vertical;
+      }
+
+      .form-submit {
+        background-color: #1e88e5;
+        color: white;
+        border: none;
+        padding: 12px 20px;
+        border-radius: 8px;
+        cursor: pointer;
+        width: 100%;
+        font-weight: bold;
+      }
+
+      /* 页面切换 */
+      .page {
+        margin-bottom: 30px;
+      }
+
+      .section-title {
+        background-color: #1e88e5;
+        color: white;
+        padding: 10px 15px;
+        border-radius: 8px 8px 0 0;
+        font-weight: bold;
+        font-size: 16px;
+        margin-top: 20px;
+        margin-bottom: 0;
+      }
+
+      /* 证书有效期样式 */
+      .validity {
+        display: flex;
+        margin-top: 5px;
+      }
+
+      .validity-item {
+        flex: 1;
+        text-align: center;
+        padding: 5px;
+        border: 1px solid #eee;
+        border-radius: 4px;
+        margin-right: 5px;
+      }
+
+      .validity-item:last-child {
+        margin-right: 0;
+      }
+
+      .validity-label {
+        font-size: 12px;
+        color: #666;
+      }
+
+      .validity-value {
+        font-weight: bold;
+        font-size: 16px;
+      }
+
+      /* 公告样式 */
+      .notice-meta {
+        display: flex;
+        justify-content: space-between;
+        color: #666;
+        font-size: 12px;
+        margin-top: 5px;
+      }
+
+      /* 数据展示 */
+      .data-display {
+        display: flex;
+        margin-top: 10px;
+      }
+
+      .data-item {
+        flex: 1;
+        text-align: center;
+        padding: 10px;
+        border: 1px solid #eee;
+        border-radius: 4px;
+        margin-right: 10px;
+      }
+
+      .data-item:last-child {
+        margin-right: 0;
+      }
+
+      .data-value {
+        font-size: 18px;
+        font-weight: bold;
+        color: #1e88e5;
+      }
+
+      .data-label {
+        font-size: 12px;
+        color: #666;
+        margin-top: 5px;
+      }
+    </style>
+  </head>
+  <body>
+    <div class="container">
+      <!-- 顶部标题 -->
+      <div class="header">内河干散货运输船东服务</div>
+
+      <!-- 内容区域 -->
+      <div class="content">
+        <!-- 货盘页面 -->
+        <div id="cargo" class="page active">
+          <!-- 签到、拍货物、拍单据按钮 -->
+          <a href="#" class="btn btn-green">签到</a>
+          <a href="#" class="btn btn-blue">拍货物</a>
+          <a href="#" class="btn btn-red">拍单据</a>
+
+          <!-- 智能服务 -->
+          <div class="card">
+            <div class="card-header">智能服务</div>
+            <div class="card-content">
+              <div class="list-item">
+                <span class="tag tag-warning">提醒</span>
+                您的船舶年检即将到期,到期日期:2023年12月31日
+              </div>
+              <div class="list-item">
+                <span class="tag tag-danger">提醒</span>
+                您有3本证书即将到期
+                <div style="margin-top: 10px">
+                  <div style="padding: 5px 0; border-bottom: 1px dashed #eee">
+                    <div>船舶检验证书</div>
+                    <div style="color: #f44336">到期时间:2023年12月15日</div>
+                  </div>
+                  <div style="padding: 5px 0; border-bottom: 1px dashed #eee">
+                    <div>船舶营运证</div>
+                    <div style="color: #f44336">到期时间:2023年12月20日</div>
+                  </div>
+                  <div style="padding: 5px 0">
+                    <div>船员适任证书</div>
+                    <div style="color: #f44336">到期时间:2023年12月25日</div>
+                  </div>
+                </div>
+              </div>
+              <div class="list-item">
+                <span class="tag">提醒</span>
+                您有2个船员资质可升级
+                <div style="margin-top: 10px">
+                  <div style="padding: 5px 0; border-bottom: 1px dashed #eee">
+                    <div>三副</div>
+                    <div style="color: #1e88e5">可升级为:二副</div>
+                  </div>
+                  <div style="padding: 5px 0">
+                    <div>机工</div>
+                    <div style="color: #1e88e5">可升级为:三管轮</div>
+                  </div>
+                </div>
+              </div>
+              <div class="list-item" style="text-align: center">
+                船舶年检证书办理与资质请联系朱经理
+                <a href="tel:13800138000" class="btn btn-phone">拨打电话</a>
+              </div>
+            </div>
+          </div>
+
+          <!-- 搜查附近货盘 -->
+          <div class="card">
+            <div class="card-header">搜查附近货盘</div>
+            <div class="card-content">
+              <div class="search-box">
+                <input
+                  type="text"
+                  class="search-input"
+                  placeholder="输入关键词搜索"
+                />
+                <button class="search-btn">搜索</button>
+              </div>
+
+              <div class="map-container">
+                <div>地图区域 - 显示船舶与货盘</div>
+                <div class="map-marker ship" style="top: 40%; left: 45%"></div>
+                <div class="map-marker cargo" style="top: 30%; left: 60%"></div>
+                <div class="map-marker cargo" style="top: 50%; left: 30%"></div>
+                <div class="map-marker cargo" style="top: 60%; left: 55%"></div>
+              </div>
+
+              <!-- 货盘列表 -->
+              <div class="list-item">
+                <div>
+                  <strong>煤炭</strong>
+                  | 南京港 → 芜湖港 | 3000吨
+                </div>
+                <div
+                  style="
+                    display: flex;
+                    justify-content: space-between;
+                    margin-top: 5px;
+                  "
+                >
+                  <div style="color: #666">距离: 约50公里</div>
+                  <a href="tel:13900139001" class="btn btn-phone">拨打电话</a>
+                </div>
+              </div>
+              <div class="list-item">
+                <div>
+                  <strong>砂石</strong>
+                  | 马鞍山港 → 安庆港 | 5000吨
+                </div>
+                <div
+                  style="
+                    display: flex;
+                    justify-content: space-between;
+                    margin-top: 5px;
+                  "
+                >
+                  <div style="color: #666">距离: 约80公里</div>
+                  <a href="tel:13900139002" class="btn btn-phone">拨打电话</a>
+                </div>
+              </div>
+              <div class="list-item">
+                <div>
+                  <strong>水泥</strong>
+                  | 芜湖港 → 九江港 | 2000吨
+                </div>
+                <div
+                  style="
+                    display: flex;
+                    justify-content: space-between;
+                    margin-top: 5px;
+                  "
+                >
+                  <div style="color: #666">距离: 约120公里</div>
+                  <a href="tel:13900139003" class="btn btn-phone">拨打电话</a>
+                </div>
+              </div>
+            </div>
+          </div>
+        </div>
+      </div>
+      <div id="certificate" class="page">
+        <!-- 证书页面内容 -->
+        <div class="card">
+          <div class="card-header">证书管理</div>
+          <div class="card-content">
+            <div class="list-item">
+              <div><strong>船舶检验证书</strong></div>
+              <div style="color: #f44336">到期时间:2023年12月15日</div>
+              <div class="validity">
+                <div class="validity-item">
+                  <div class="validity-label">签发日期</div>
+                  <div class="validity-value">2022-12-15</div>
+                </div>
+                <div class="validity-item">
+                  <div class="validity-label">有效期</div>
+                  <div class="validity-value">12个月</div>
+                </div>
+              </div>
+            </div>
+            <div class="list-item">
+              <div><strong>船舶营运证</strong></div>
+              <div style="color: #f44336">到期时间:2023年12月20日</div>
+              <div class="validity">
+                <div class="validity-item">
+                  <div class="validity-label">签发日期</div>
+                  <div class="validity-value">2022-12-20</div>
+                </div>
+                <div class="validity-item">
+                  <div class="validity-label">有效期</div>
+                  <div class="validity-value">12个月</div>
+                </div>
+              </div>
+            </div>
+          </div>
+        </div>
+      </div>
+      <div id="maritime" class="page">
+        <!-- 海事页面内容 -->
+        <div class="card">
+          <div class="card-header">海事信息</div>
+          <div class="card-content">
+            <div class="list-item">
+              <div><strong>最新海事通告</strong></div>
+              <div style="margin-top: 10px; line-height: 1.6;">
+                关于长江中游航道维护工程的通知,预计2023年12月10日至2024年1月15日期间,在芜湖至安庆段进行航道疏浚工程,请过往船舶注意避让。
+              </div>
+              <div class="notice-meta">
+                <span>发布时间: 2023-11-20</span>
+                <span>来源: 长江海事局</span>
+              </div>
+            </div>
+          </div>
+        </div>
+      </div>
+      <div id="inspection" class="page">
+        <!-- 年检页面内容 -->
+        <div class="card">
+          <div class="card-header">年检信息</div>
+          <div class="card-content">
+            <div class="list-item">
+              <div><strong>年检提醒</strong></div>
+              <div style="margin-top: 10px;">
+                您的船舶年检即将到期,到期日期:2023年12月31日
+              </div>
+              <div style="margin-top: 10px;">
+                <a href="#" class="btn btn-blue">预约年检</a>
+              </div>
+            </div>
+            <div class="list-item">
+              <div><strong>年检机构</strong></div>
+              <div style="margin-top: 10px;">
+                <div>长江船舶检验局芜湖分局</div>
+                <div>地址:芜湖市弋江区滨江大道26号</div>
+                <div>电话:0553-12345678</div>
+              </div>
+            </div>
+          </div>
+        </div>
+      </div>
+      <div id="shipyard" class="page">
+        <!-- 船厂页面内容 -->
+        <div class="card">
+          <div class="card-header">推荐船厂</div>
+          <div class="card-content">
+            <div class="list-item">
+              <div><strong>芜湖江东船厂</strong></div>
+              <div style="margin-top: 5px;">专业提供内河船舶维修、保养服务</div>
+              <div style="margin-top: 5px; color: #666;">距离您当前位置:约15公里</div>
+              <div style="margin-top: 10px;">
+                <a href="tel:13900139005" class="btn btn-phone">拨打电话</a>
+              </div>
+            </div>
+            <div class="list-item">
+              <div><strong>安庆市港口船厂</strong></div>
+              <div style="margin-top: 5px;">提供船舶维修、改造及年检前检修服务</div>
+              <div style="margin-top: 5px; color: #666;">距离您当前位置:约60公里</div>
+              <div style="margin-top: 10px;">
+                <a href="tel:13900139006" class="btn btn-phone">拨打电话</a>
+              </div>
+            </div>
+          </div>
+        </div>
+      </div>
+      <div id="school" class="page">
+        <!-- 学校介绍 -->
+        <div class="card">
+          <div class="card-header">学校介绍</div>
+          <div class="card-content">
+            <div style="font-weight: bold; font-size: 16px; margin-bottom: 5px;">
+              长江航运技术学校
+            </div>
+            <div class="img-container">学校照片</div>
+            <div style="line-height: 1.6; margin: 15px 0;">
+              长江航运技术学校创建于1990年,是一所专注于培养内河航运专业人才的职业学校。学校拥有一支经验丰富的教师队伍,配备了先进的航运模拟设备和实训基地。多年以来,已为长江流域输送了上万名专业航运人才,毕业生就业率达到95%以上。学校开设有船舶驾驶、轮机管理、船舶电气等多个专业,并提供各类船员资质培训和证书考取服务,是内河船员培训的重要基地。
+            </div>
+            
+            <div style="margin-top: 15px; margin-bottom: 15px;">
+              <div style="font-weight: bold; margin-bottom: 10px;">学校运营数据</div>
+              <div class="data-display">
+                <div class="data-item">
+                  <div class="data-value">2000</div>
+                  <div class="data-label">场地规模(㎡)</div>
+                </div>
+                <div class="data-item">
+                  <div class="data-value">500</div>
+                  <div class="data-label">年结业人数</div>
+                </div>
+              </div>
+            </div>
+          </div>
+          
+          <!-- 培训公告 -->
+          <div class="card">
+            <div class="card-header">培训公告</div>
+            <div class="card-content">
+              <div style="font-weight: bold; font-size: 16px; margin-bottom: 10px;">
+                海员培训课程将在2025年3月10-15日期间在新蔡学员举办
+              </div>
+              <div style="color: #666; font-size: 12px; margin-bottom: 10px;">
+                作者:汇很多 | 发布时间:2023-11-25
+              </div>
+              <div class="img-container">培训现场照片</div>
+              <div style="line-height: 1.6; margin: 15px 0;">
+                为提升内河船员专业技能,我校将于2025年3月10日至15日在新蔡校区举办为期6天的海员专业培训课程。本次培训内容包括船舶驾驶技能提升、船舶安全管理、应急处置能力训练等多个方面,由资深航运专家授课。培训结束后将颁发专业培训证书,可作为船员升级资质的重要依据。名额有限,请有意向的船员提前报名预留位置。培训期间提供食宿,费用优惠。此次培训旨在提高内河船员整体素质,增强航行安全意识,欢迎广大船员积极参与。
+              </div>
+              <a href="#" class="share-btn">分享培训信息</a>
+            </div>
+          </div>
+        </div>
+      </div>
+      </div>
+      
+      <!-- 底部导航栏 -->
+      <div class="nav-bar">
+        <a href="#" class="nav-item active" onclick="showPage('cargo')">
+          <div class="nav-icon">📦</div>
+          <div>货盘</div>
+        </a>
+        <a href="#" class="nav-item" onclick="showPage('certificate')">
+          <div class="nav-icon">📄</div>
+          <div>证书</div>
+        </a>
+        <a href="#" class="nav-item" onclick="showPage('maritime')">
+          <div class="nav-icon">🚢</div>
+          <div>海事</div>
+        </a>
+        <a href="#" class="nav-item" onclick="showPage('inspection')">
+          <div class="nav-icon">🔍</div>
+          <div>年检</div>
+        </a>
+        <a href="#" class="nav-item" onclick="showPage('shipyard')">
+          <div class="nav-icon">⚓</div>
+          <div>船厂</div>
+        </a>
+        <a href="#" class="nav-item" onclick="showPage('school')">
+          <div class="nav-icon">🎓</div>
+          <div>学校</div>
+        </a>
+      </div>
+    </div>
+    
+    <script>
+      // 页面切换功能
+      function showPage(pageId) {
+        // 隐藏所有页面
+        document.querySelectorAll('.page').forEach(page => {
+          page.classList.remove('active');
+        });
+        
+        // 显示选中的页面
+        const selectedPage = document.getElementById(pageId);
+        if (selectedPage) {
+          selectedPage.classList.add('active');
+        }
+        
+        // 更新导航栏选中状态
+        document.querySelectorAll('.nav-item').forEach(item => {
+          item.classList.remove('active');
+        });
+        
+        // 设置当前导航项为激活状态
+        if (event && event.currentTarget) {
+          event.currentTarget.classList.add('active');
+        } else {
+          // 如果没有事件对象,通过页面ID查找对应的导航项
+          const navItem = document.querySelector(`.nav-item[onclick="showPage('${pageId}')"]`);
+          if (navItem) {
+            navItem.classList.add('active');
+          }
+        }
+      }
+    </script>
+  </body>
+</html>

+ 43 - 427
miniprogram/pages/takePhoto/takePhoto.js

@@ -1,437 +1,53 @@
-import { uploadFile } from "../../utils/upload";
-import { subMsg } from "../../utils/wxUtils";
-import { postApi, getApi } from "../../apis/api";
+// pages/takePhoto/takePhoto.js
 Page({
-  data: {
-    sign: "https://frontend-1255802371.cos.ap-shanghai.myqcloud.com/sign.png",
-    avater_exp:
-      "https://frontend-1255802371.cos.ap-shanghai.myqcloud.com/miniapp-static/avatar-icon.jpg?sign=f5c66c94d189436f82353eb48cb01f08&t=1634538864",
-    cameraIcon:
-      "https://frontend-1255802371.cos.ap-shanghai.myqcloud.com/miniapp-static/camera-icon.png?sign=11a65871a2800cd04ecaa8991687fccd&t=1634607415",
-    newCameraIcon:
-      "https://frontend-1255802371.cos.ap-shanghai.myqcloud.com/miniapp-static/camera.png?sign=ad0fe8bead6a46cb20f45f792d4bed67&t=1645502416",
-    userName: "",
-    phone: "",
-    shipName: "",
-    shipMmsi: "",
-    authModal: false,
-    modalText: "位置",
-    shipId: "",
-    locked: false,
-    certs: [],
-    contacts: [],
-    oilPriceList: [],
-  },
-  async getCerts() {
-    let { data } = await postApi("/ship/cert/list", {
-      userId: wx.getStorageSync("userId"),
-    });
-    if (data.status === 0) {
-      data.result.forEach((cert) => {
-        cert.endValidTime = cert.endValidTime.split(" ")[0];
-      });
-
-      this.setData({
-        certs: data.result,
-      });
-    } else {
-      this.setData({
-        certs: [],
-      });
-      wx.showToast({
-        title: data.msg,
-        icon: "none",
-      });
-    }
-  },
-  async getContacts() {
-    let { data } = await getApi("/ship/cert/operation/contacts");
-    if (data.status === 0) {
-      this.setData({
-        contacts: data.result,
-      });
-    } else {
-      this.setData({
-        contacts: [],
-      });
-      wx.showToast({
-        title: data.msg,
-        icon: "none",
-      });
-    }
-  },
-  makePhoneCall(e) {
-    wx.makePhoneCall({
-      phoneNumber: e.currentTarget.dataset.phone,
-    });
-  },
-  copy(e) {
-    wx.setClipboardData({
-      data: e.currentTarget.dataset.phone,
-      success(res) {
-        wx.showToast({
-          title: "复制成功",
-        });
-      },
-    });
-  },
-  async getOilPriceList() {
-    let { data } = await postApi("/fuel/list", {});
-    if (data.status === 0) {
-      this.setData({
-        oilPriceList: data.result.map((item, index) => {
-          return {
-            id: index,
-            latitude: item.fuelShipLatitude,
-            longitude: item.fuelShipLongitude,
-            iconPath:
-              "https://frontend-1255802371.cos.ap-shanghai.myqcloud.com/miniapp-static%2Fgas-station.png",
-            width: 40,
-            height: 40,
-            ...item,
-            callout: {
-              content: item.vendorName,
-              display: "ALWAYS",
-              bgColor: "none",
-            },
-          };
-        }),
-      });
-    } else {
-      this.setData({
-        oilPriceList: [],
-      });
-      wx.showToast({
-        title: data.msg,
-        icon: "none",
-      });
-    }
-  },
-  openSetting() {
-    this.setData({
-      authModal: false,
-    });
-    wx.openSetting({
-      complete: (e) => {
-        console.log(e);
-        if (e.authSetting["scope.writePhotosAlbum"]) {
-          if (wx.getStorageSync("cacheImage")) {
-            wx.saveImageToPhotosAlbum({
-              filePath: wx.getStorageSync("cacheImage"),
-              success: (e) => {
-                wx.showToast({
-                  title: "保存成功!",
-                });
-                wx.removeStorageSync("cacheImage");
-              },
-              complete: (e) => {
-                console.log(e);
-              },
-            });
-          }
-        }
-      },
-    });
-  },
-  takeBill() {
-    if (this.data.locked) return;
-    wx.redirectTo({
-      url: "/pages/takeBill/takeBill",
-    });
-  },
-  async registerShip() {
-    if (!this.checkout()) return;
-    let res = await postApi("/user/wx/register", {
-      userId: wx.getStorageSync("userId"),
-      shipName: this.data.shipName,
-      shipMmsi: this.data.shipMmsi,
-    });
-
-    if (res.data.status == 0) {
-      let { shipInfo, userInfo } = res.data.result;
-
-      let data = {
-        ...shipInfo,
-        ...userInfo,
-      };
-      Object.keys(data).forEach(function (key) {
-        wx.setStorageSync(key, data[key]);
-      });
-      wx.showToast({
-        title: res.data.msg,
-      });
-      this.setData({
-        ...data,
-      });
-    } else {
-      wx.showToast({
-        title: res.data.msg,
+  /**
+   * 页面的初始数据
+   */
+  data: {},
+
+  /**
+   * 生命周期函数--监听页面加载
+   */
+  onLoad(options) {},
+
+  /**
+   * 生命周期函数--监听页面初次渲染完成
+   */
+  onReady() {},
+
+  /**
+   * 生命周期函数--监听页面显示
+   */
+  onShow() {
+    if (typeof this.getTabBar === "function" && this.getTabBar()) {
+      this.getTabBar().setData({
+        selected: 0,
       });
     }
   },
 
-  checkout() {
-    if (!this.data.shipName) {
-      wx.showToast({
-        title: "请输入船名!",
-        icon: "error",
-      });
-      return;
-    }
+  /**
+   * 生命周期函数--监听页面隐藏
+   */
+  onHide() {},
 
-    if (!this.data.shipMmsi) {
-      wx.showToast({
-        title: "请输入MMSI!",
-        icon: "error",
-      });
-      return;
-    }
+  /**
+   * 生命周期函数--监听页面卸载
+   */
+  onUnload() {},
 
-    return true;
-  },
-  async takePhoto(e) {
-    if (this.data.locked) {
-      wx.showLoading({
-        title: "高精度定位中...",
-      });
-      return;
-    }
-    this.data.locked = true;
-    let { mediatype } = e.currentTarget.dataset;
-    wx.getLocation({
-      type: "gcj02",
-      isHighAccuracy: true,
-      success: (e) => {
-        let { latitude, longitude } = e;
-        console.log("获取定位成功!", e);
-        this.data.latitude = latitude;
-        this.data.longitude = longitude;
-        wx.setStorageSync("latitude", latitude);
-        wx.setStorageSync("longitude", longitude);
-        wx.chooseMedia({
-          mediaType: ["image"],
-          sourceType: ["camera"],
-          success: (e) => {
-            console.log("获取媒体成功!", e);
-            let src = e.tempFiles[0].tempFilePath;
-            if (e.type == "video") {
-              wx.showLoading({
-                title: "正在压缩...",
-              });
-              wx.compressVideo({
-                src,
-                quality: "high",
-                bitrate: "",
-                fps: "",
-                resolution: "",
-                success: async (e) => {
-                  if (wx.getStorageSync("userName")) {
-                    wx.showLoading({
-                      title: "正在上传...",
-                    });
-                    let res = await uploadFile(e.tempFilePath, {
-                      type: 4,
-                      userId: wx.getStorageSync("userId"),
-                      location: `${this.data.longitude},${this.data.latitude}`,
-                    });
-                    if (res.status == 0) {
-                      console.log(res);
-                      wx.showToast({
-                        title: res.msg,
-                      });
-                      wx.redirectTo({
-                        url: "/pages/takePhoto/success/success",
-                      });
-                    } else {
-                      wx.showToast({
-                        title: res.msg,
-                      });
-                    }
-                  } else {
-                    // 新用户视频
-                    wx.hideLoading({
-                      success: (res) => {},
-                    });
-                    console.log("新用户视频", e);
-                    wx.setStorageSync("type", 2);
-                    wx.setStorageSync("file", e.tempFilePath);
-                    wx.redirectTo({
-                      url: `/pages/newCachePage/newCachePage`,
-                    });
-                  }
-                },
-                fail: (e) => {
-                  console.log(e);
-                },
-              });
-            } else {
-              wx.compressImage({
-                src,
-                quality: 80, // 压缩质量
-                success: async (e) => {
-                  console.log("图片压缩成功!", e);
-                  wx.hideLoading({
-                    success: (res) => {},
-                  });
-                  if (wx.getStorageSync("userName")) {
-                    wx.showLoading({
-                      title: "正在上传...",
-                    });
-                    let postData = {
-                      type: mediatype,
-                      userId: wx.getStorageSync("userId"),
-                    };
+  /**
+   * 页面相关事件处理函数--监听用户下拉动作
+   */
+  onPullDownRefresh() {},
 
-                    if (mediatype == 3) {
-                      postData.location = `${this.data.longitude},${this.data.latitude}`;
-                    } else {
-                      postData.location = "";
-                    }
-                    let res = await uploadFile(e.tempFilePath, postData);
-                    console.log("上传结束", res);
-                    if (res.status == 0) {
-                      wx.showToast({
-                        title: res.msg,
-                      });
-                      wx.setStorageSync("shareImageUrl", res.result.viewUrl);
-                      console.log(wx.getStorageSync("shareImageUrl"));
-                      wx.downloadFile({
-                        url: res.result.viewUrl,
-                        success: (e) => {
-                          console.log("下载调用!", e);
-                          wx.setStorageSync("cacheImage", e.tempFilePath);
-                          if (mediatype == 3) {
-                            wx.saveImageToPhotosAlbum({
-                              filePath: e.tempFilePath,
-                              success: (e) => {
-                                if (e.errMsg == "saveImageToPhotosAlbum:ok") {
-                                  wx.showToast({
-                                    title: "保存成功!",
-                                  });
-                                  wx.removeStorageSync("cacheImage");
-                                }
-                              },
-                              fail: (e) => {
-                                console.log("失败4", e);
-                                this.setData({
-                                  authModal: true,
-                                  modalText: "文件存储",
-                                });
-                              },
-                            });
-                          }
+  /**
+   * 页面上拉触底事件的处理函数
+   */
+  onReachBottom() {},
 
-                          wx.redirectTo({
-                            url: "/pages/takePhoto/success/success",
-                          });
-                        },
-                        fail: (e) => {
-                          console.log("失败3", e);
-                        },
-                      });
-                    } else {
-                      wx.showToast({
-                        title: res.msg,
-                      });
-                    }
-                  } else {
-                    // 新用户图片
-                    console.log("新用户图片", e);
-                    wx.setStorageSync("type", 1);
-                    wx.setStorageSync("file", e.tempFilePath);
-                    wx.redirectTo({
-                      url: `/pages/newCachePage/newCachePage`,
-                    });
-                  }
-                },
-                fail: (e) => {
-                  console.log("失败2", e);
-                },
-              });
-            }
-          },
-          fail: (e) => {
-            console.log("失败1", e);
-          },
-        });
-      },
-      fail: (e) => {
-        this.setData({
-          authModal: true,
-          modalText: "位置信息",
-        });
-      },
-      complete: (e) => {
-        wx.hideLoading({
-          success: (res) => {},
-        });
-        this.data.locked = false;
-      },
-    });
-  },
-  async msg() {
-    let res = await subMsg();
-  },
-  async checkCheckStatus() {
-    let { data } = await postApi("/user/wx/checkin/status", {
-      userId: wx.getStorageSync("userId"),
-    });
-    this.setData(data.result);
-  },
-  async check() {
-    if (this.data.checkinStatus == 1) return;
-    if (this.data.locked) {
-      wx.showLoading({
-        title: "高精度定位中...",
-      });
-      return;
-    }
-    this.data.locked = true;
-    wx.getLocation({
-      type: "gcj02",
-      isHighAccuracy: true,
-      success: async (e) => {
-        let { latitude, longitude } = e;
-        let { data } = await postApi("/user/wx/checkin", {
-          userId: wx.getStorageSync("userId"),
-          latitude,
-          longitude,
-        });
-        this.setData(data.result);
-        if (data.status == 0) {
-          wx.showToast({
-            title: data.msg,
-            icon: "success",
-            duration: 2000,
-            mask: true,
-          });
-        }
-      },
-      complete: (e) => {
-        wx.hideLoading({});
-        this.data.locked = false;
-      },
-    });
-  },
-  onShow() {
-    if (typeof this.getTabBar === "function" && this.getTabBar()) {
-      this.getTabBar().setData({
-        selected: 0,
-      });
-    }
-    let userName = wx.getStorageSync("userName");
-    let userId = wx.getStorageSync("userId");
-    let phone = wx.getStorageSync("phone");
-    let shipId = wx.getStorageSync("shipId");
-    if (userId && shipId) this.checkCheckStatus();
-    this.getCerts();
-    this.getContacts();
-    this.getOilPriceList();
-    this.setData({
-      userName,
-      phone,
-      userId,
-      shipId,
-    });
-  },
+  /**
+   * 用户点击右上角分享
+   */
+  onShareAppMessage() {},
 });

+ 246 - 91
miniprogram/pages/takePhoto/takePhoto.wxml

@@ -1,92 +1,247 @@
-<view class="top-container df aic jcc fdc" wx:if="{{shipId}}">
-  <view class="sign" bind:tap="check">{{checkinStatus==0?'签到':'已签到'}}</view>
-  <view class="check-time mt30" wx:if="{{checkinStatus==1}}">签到时间: {{checkinDatetime}}</view>
-</view>
-<view class="top-container exp" wx:else="">
-  <image class="avatar-icon" src="{{avater_exp}}"></image>
-  <view class="text" style="text-align: center;">
-    {{userName?"":"体验用户"}}
-    <text wx:if="{{userName}}" class="user-name">{{userName}}</text>
-    <text wx:if="{{phone}}" class="phone">{{phone}}</text>
-  </view>
-</view>
-<view wx:if="{{userId&&shipId}}">
-  <view class="new-camera camera-cargo">
-    <image class="icon" bindtap="takePhoto" data-mediatype="{{3}}" src="{{newCameraIcon}}"></image>
-    <view bindtap="takePhoto" data-mediatype="{{3}}">拍货物</view>
-  </view>
-  <view class="new-camera camera-bill">
-    <image class="icon" data-mediatype="{{0}}" bindtap="takeBill" src="{{newCameraIcon}}"></image>
-    <view data-mediatype="{{0}}" bindtap="takeBill">拍单据</view>
-  </view>
-</view>
-<view wx:else>
-  <image wx:if="{{!userId&&!shipId||!userId}}" class="camera-icon" bindtap="takePhoto" data-mediatype="{{3}}" src="{{cameraIcon}}"></image>
-  <view wx:else style="margin-top: 20%;">
-    <view class="line mb30">
-      <view class="ship-name">船舶名称 :</view>
-      <input class="ship-name-ipt" model:value="{{shipName}}" type="text" placeholder="请输入船舶名称" />
+<!-- pages/takePhoto/takePhoto.wxml -->
+<view class="container">
+    <!-- 顶部标题 -->
+    <view class="header">内河干散货运输船东服务</view>
+    <!-- 内容区域 -->
+    <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 class="line">
-      <view class="ship-mmsi">MMSI :</view>
-      <input class="ship-mmsi-ipt" model:value="{{shipMmsi}}" type="number" placeholder="请输入MMSI" />
-    </view>
-    <view bindtap="registerShip" class="submit">绑定船舶</view>
-  </view>
-</view>
-<view class="auth-modal" wx:if="{{authModal}}">
-  <view class="modal">
-    <view class="service">为了更好的提供服务</view>
-    <view class="auth-btn" bindtap="openSetting">请授权{{modalText}}</view>
-  </view>
-</view>
-<view class="card">
-  <view class="card-title">我的证书</view>
-  <view class="">
-    <view class="df aic fs28 th mb20">
-      <view class="index-item tac">序号</view>
-      <view class="fg1 tac">证书名称</view>
-      <view class="end-time tac">到期时间</view>
-    </view>
-    <view class="df aic jcsb fs28 tr mb10" style="{{certs.length===(index+1)?'border:none;margin-bottom:0!important;':''}}" wx:for="{{certs}}" wx:key="index">
-      <view class="index-item tac">{{index+1}}</view>
-      <view class="fg1 tac">{{item.certTypeName}}</view>
-      <view class="end-time tac">{{item.endValidTime}}</view>
-    </view>
-  </view>
-</view>
-<view class="card">
-  <view class="card-title">办证联系人</view>
-  <view class="">
-    <view class="df aic jcsb fs28 th">
-      <view class="index-item tac">序号</view>
-      <view class="w50p tac">办事处</view>
-      <view class="w30p tac">姓名</view>
-      <view class="w20p tac">电话</view>
-    </view>
-    <view class="df aic jcsb fs28 mt10 tr" style="{{contacts.length===(index+1)?'border:none;margin-bottom:0!important;':''}}" wx:for="{{contacts}}" wx:key="index">
-      <view class="index-item tac">{{index+1}}</view>
-      <view class="w50p tac">{{item.officeName}}</view>
-      <view class="w30p tac">{{item.contactPerson}}</view>
-      <view class="w20p tac df aic jcc" bind:tap="makePhoneCall" data-phone="{{item.contactPhone}}">
-        <image class="tel ml10" data-phone="{{item.contactPhone}}" src="../../images/tel.png" mode="aspectFit" />
-      </view>
-    </view>
-  </view>
-</view>
-<view class="card ">
-  <view class="card-title">油价走势</view>
-  <view class="">
-    <view class="df aic fs28 th">
-      <view class="index-item tac">序号</view>
-      <view class="w60p tac">加油服务商</view>
-      <view class="w40p tac">油价(元/吨)</view>
-    </view>
-    <view class="df aic jcsb fs28 mt10 tr" style="{{oilPriceList.length===(index+1)?'border:none;margin-bottom:0!important;':''}}" wx:for="{{oilPriceList}}" wx:key="index">
-      <view class="index-item tac">{{index+1}}</view>
-      <view class="w60p tac">{{item.vendorName}}</view>
-      <view class="w40p tac">{{item.price}}</view>
-    </view>
-  </view>
-</view>
-<view class="h200"></view>
+</view>

+ 355 - 131
miniprogram/pages/takePhoto/takePhoto.wxss

@@ -1,173 +1,397 @@
 /* pages/takePhoto/takePhoto.wxss */
-.top-container {
+
+/* 全局样式 */
+page {
+  background-color: #f5f7fa;
+  color: #333;
+  font-size: 14px;
+  line-height: 1.5;
+}
+
+.container {
+  background-color: #fff;
+  min-height: 100vh;
   position: relative;
+  padding-bottom: 60px;
+}
+
+.header {
+  background-color: #1e88e5;
+  color: white;
+  padding: 15px;
+  text-align: center;
+  font-size: 18px;
+  font-weight: bold;
+  position: sticky;
+  top: 0;
+  z-index: 100;
+}
+
+.content {
+  padding: 15px;
+}
+
+/* 按钮样式 */
+.btn-group {
+  display: flex;
+  flex-direction: column;
+  gap: 15px;
+  margin-bottom: 15px;
+}
+
+.btn {
+  display: block;
   width: 100%;
-  height: 20vh;
-  background-size: contain;
-  background: green;
+  padding: 15px;
+  border-radius: 8px;
+  text-align: center;
+  color: white;
+  font-weight: bold;
+  margin-bottom: 0;
+  line-height: 1.5;
+  border: none;
+}
+
+.btn-green {
+  background-color: #4caf50;
+}
+
+.btn-blue {
+  background-color: #1e88e5;
+}
+
+.btn-red {
+  background-color: #f44336;
+}
+
+.btn-phone {
+  background-color: #2196f3;
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  width: 220rpx;
+  padding: 10rpx 0px;
+  font-size: 12px;
 }
 
-.exp {
-  background: url(https://frontend-1255802371.cos.ap-shanghai.myqcloud.com/miniapp-static/sea-bgd.jpeg?sign=f138978877f53ccdc48937c58811659b&t=1634539269);
+.tel {
+  margin-right: 12rpx;
 }
 
-.sign {
-  color: green;
+/* 卡片样式 */
+.card {
   background-color: #fff;
-  width: 180rpx;
-  height: 100rpx;
-  line-height: 100rpx;
-  font-size: 36rpx;
+  border-radius: 8px;
+  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
+  margin-bottom: 15px;
+  overflow: hidden;
+}
+
+.card-header {
+  padding: 12px 15px;
+  border-bottom: 1px solid #eee;
+  font-weight: bold;
+  font-size: 16px;
+  color: #333;
+  background-color: #f9f9f9;
+}
+
+.card-content {
+  padding: 15px;
+}
+
+/* 搜索框 */
+.search-box {
+  display: flex;
+  margin-bottom: 15px;
+}
+
+.search-input {
+  flex: 1;
+  padding: 10px 15px;
+  border: 1px solid #ddd;
+  border-radius: 8px 0 0 8px;
+}
+
+.search-btn {
+  background-color: #1e88e5;
+  color: white;
+  border: none;
+  padding: 0 15px;
+  border-radius: 0 8px 8px 0;
+  line-height: 88rpx;
+  font-size: 14px;
+}
+
+/* 列表样式 */
+.list-item {
+  padding: 12px 15px;
+  border-bottom: 1px solid #eee;
+}
+
+.list-item:last-child {
+  border-bottom: none;
+}
+
+/* 标签样式 */
+.tag {
+  display: inline-block;
+  padding: 4px 8px;
+  border-radius: 4px;
+  font-size: 12px;
+  color: white;
+  margin-right: 5px;
+  background-color: #1e88e5;
+}
+
+.tag-warning {
+  background-color: #ff9800;
+}
+
+.tag-danger {
+  background-color: #f44336;
+}
+
+/* 证书项目样式 */
+.cert-item {
+  padding: 5px 8rpx;
+  border-bottom: 1px dashed #eee;
+  display: flex;
+  justify-content: space-between;
+}
+
+.cert-item:last-child {
+  border-bottom: none;
+}
+
+.expire-date {
+  color: #f44336;
+}
+
+.upgrade-info {
+  color: #1e88e5;
+}
+
+.contact-info {
   text-align: center;
-  border-radius: 50rpx;
-  margin: 0 auto;
 }
 
-.check-time {
-  color: #fff;
+/* 热门推荐服务样式 */
+.section-title {
+  background-color: #1e88e5;
+  color: white;
+  padding: 10px 15px;
+  border-radius: 8px 8px 0 0;
+  font-weight: bold;
+  font-size: 16px;
+  margin-top: 15px;
+  margin-bottom: 0;
+}
+
+.hot-services {
+  margin-top: 10px;
+}
+
+.service-item {
+  padding: 20rpx;
+  border-bottom: 1px solid #eee;
+  display: flex;
+  /* flex-direction: column; */
+  align-items: center;
+  justify-content: space-between;
+}
+
+.service-name {
+  font-weight: bold;
+  margin-right: 16rpx;
+}
+
+.service-type {
+  color: #666;
+  /* margin: 5px 0; */
+}
+
+/* 水位信息样式 */
+.water-level-info {
+  margin-top: 10px;
+}
+
+.water-level-item {
+  display: flex;
+  align-items: center;
+  justify-content: space-around;
   text-align: center;
-  margin-top: 20rpx;
+  padding: 12rpx;
+  border: 1px solid #eee;
+  border-radius: 4px;
+  margin-bottom: 12rpx;
 }
 
-.sign-icon {
-  display: block;
-  width: 210rpx;
-  height: 180rpx;
-  margin: 0 auto;
+.water-level-item:last-child {
+  margin-right: 0;
 }
 
-.avatar-icon {
-  display: block;
-  width: 110rpx;
-  height: 110rpx;
-  border-radius: 50%;
-  margin: 0 auto;
+.water-level-station {
+  font-weight: bold;
+  color: #777;
 }
 
-.user-name {
-  margin-right: 40rpx;
+.water-level-value {
+  font-size: 16px;
+  margin: 5px 0;
+  color: #555;
 }
 
-.phone {
-  font-size: 28rpx;
-  font-weight: 400;
+.water-level-trend {
+  font-size: 14px;
 }
 
-.text {
-  font-size: 30rpx;
-  font-family: PingFangSC-Medium, PingFang SC;
-  font-weight: 500;
-  color: #ffffff;
-  margin-top: 30rpx;
+.rising {
+  color: #f44336;
 }
 
-.camera-icon {
-  display: block;
-  width: 234rpx;
-  height: 234rpx;
-  position: absolute;
-  top: 50%;
-  left: calc(50% - 117rpx);
+.falling {
+  color: #4caf50;
+}
+
+.stable {
+  color: #1e88e5;
+}
+
+/* 政策解读样式 */
+.policy-list {
+  margin-top: 10px;
+}
+
+.policy-item {
+  padding: 10px 0;
+  border-bottom: 1px solid #eee;
+}
+
+.policy-item:last-child {
+  border-bottom: none;
+}
+
+.policy-ship-type {
+  font-weight: bold;
+}
+
+.policy-energy-type {
+  color: #1e88e5;
+  margin: 5px 0;
+}
+
+.policy-subsidy {
+  color: #f44336;
+  font-weight: bold;
+}
+
+/* 地图容器 */
+.map-container {
+  height: 200px;
+  background-color: #e0e0e0;
+  margin-bottom: 15px;
+  border-radius: 8px;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  color: #666;
+  position: relative;
 }
 
-.auth-modal {
+.map-marker {
   position: absolute;
-  top: 0;
-  right: 0;
-  bottom: 0;
-  left: 0;
-  background-color: rgba(0, 0, 0, 0.7);
+  width: 20px;
+  height: 20px;
+  background-color: #1e88e5;
+  border-radius: 50%;
+  transform: translate(-50%, -50%);
+}
+
+.map-marker.ship {
+  background-color: #4caf50;
+  top: 40%;
+  left: 45%;
+}
+
+.map-marker.cargo {
+  background-color: #f44336;
+}
+
+/* 货盘列表样式 */
+.cargo-list {
+  margin-top: 10px;
+}
+
+.cargo-item {
+  padding: 10px;
+  border-bottom: 1px solid #eee;
 }
 
-.modal {
-  width: 557rpx;
-  height: 274rpx;
-  background: #ffffff;
-  border-radius: 16rpx;
-  margin: 548rpx auto;
-  padding-top: 55rpx;
+.cargo-item:last-child {
+  border-bottom: none;
 }
 
-.service {
+.cargo-info {
+  margin-bottom: 20rpx;
+  display: flex;
+  justify-content: space-around;
+}
+
+.cargo-type {
+  font-weight: bold;
+}
+
+.cargo-meta {
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+}
+
+.cargo-distance {
+  color: #666;
+  font-size: 24rpx;
+  margin-left: 20rpx;
+}
+
+/* 政策表格样式 */
+.policy-table {
   width: 100%;
-  text-align: center;
-  font-size: 36rpx;
-  font-family: PingFangSC-Medium, PingFang SC;
-  font-weight: 500;
-  color: #333333;
-  -webkit-text-stroke: 1rpx #979797;
-}
-
-.auth-btn {
-  width: 350rpx;
-  height: 69rpx;
-  background: #0094fe;
-  border-radius: 8rpx;
-  font-size: 36rpx;
-  font-family: PingFangSC-Regular, PingFang SC;
-  font-weight: 400;
-  color: #ffffff;
-  line-height: 69rpx;
-  margin: 0 auto;
-  margin-top: 55rpx;
-  text-align: center;
+  border: 1px solid #eee;
+  border-radius: 4px;
+  overflow: hidden;
 }
 
-.icon {
-  width: 120rpx;
-  height: 120rpx;
+.policy-header {
+  display: flex;
+  background-color: #f5f7fa;
+  font-weight: bold;
+  border-bottom: 1px solid #eee;
 }
 
-.camera-cargo {
-  height: 22vh;
-  background: #006ebd;
+.policy-row {
+  display: flex;
+  border-bottom: 1px solid #eee;
 }
 
-.camera-bill {
-  height: 22vh;
-  background: #fa283d;
+.policy-row:last-child {
+  border-bottom: none;
 }
 
-.new-camera {
-  padding-top: 40rpx;
-  text-align: center;
-  color: #fff;
-  font-size: 42rpx;
-}
-
-.ship-name,
-.ship-mmsi {
-  width: 153rpx;
-  height: 36rpx;
-  font-size: 30rpx;
-  font-family: PingFangSC-Regular, PingFang SC;
-  font-weight: 400;
-  color: #333333;
-  line-height: 36rpx;
-  text-align: right;
-  margin-right: 6rpx;
-}
-
-.ship-name-ipt,
-.ship-mmsi-ipt {
-  width: 420rpx;
-  height: 67rpx;
-  border: 1px solid #979797;
-  font-size: 30rpx;
-  padding-left: 20rpx;
-}
-
-.submit {
-  margin: 130rpx auto;
-  width: 80%;
-  height: 80rpx;
-  background: #0094fe;
-  border-radius: 4rpx;
-  font-size: 34rpx;
-  font-family: PingFangSC-Regular, PingFang SC;
-  font-weight: 400;
-  color: #ffffff;
+.policy-cell {
+  flex: 1;
+  padding: 10px;
   text-align: center;
-  line-height: 80rpx;
-  border-radius: 40rpx;
+  border-right: 1px solid #eee;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  color: #333;
+}
+.policy-header .policy-cell {
+  color: #777;
+}
+
+.policy-cell:last-child {
+  border-right: none;
 }

+ 437 - 0
miniprogram/pages/takePhoto/takePhotoCache/takePhoto.js

@@ -0,0 +1,437 @@
+import { uploadFile } from "../../utils/upload";
+import { subMsg } from "../../utils/wxUtils";
+import { postApi, getApi } from "../../apis/api";
+Page({
+  data: {
+    sign: "https://frontend-1255802371.cos.ap-shanghai.myqcloud.com/sign.png",
+    avater_exp:
+      "https://frontend-1255802371.cos.ap-shanghai.myqcloud.com/miniapp-static/avatar-icon.jpg?sign=f5c66c94d189436f82353eb48cb01f08&t=1634538864",
+    cameraIcon:
+      "https://frontend-1255802371.cos.ap-shanghai.myqcloud.com/miniapp-static/camera-icon.png?sign=11a65871a2800cd04ecaa8991687fccd&t=1634607415",
+    newCameraIcon:
+      "https://frontend-1255802371.cos.ap-shanghai.myqcloud.com/miniapp-static/camera.png?sign=ad0fe8bead6a46cb20f45f792d4bed67&t=1645502416",
+    userName: "",
+    phone: "",
+    shipName: "",
+    shipMmsi: "",
+    authModal: false,
+    modalText: "位置",
+    shipId: "",
+    locked: false,
+    certs: [],
+    contacts: [],
+    oilPriceList: [],
+  },
+  async getCerts() {
+    let { data } = await postApi("/ship/cert/list", {
+      userId: wx.getStorageSync("userId"),
+    });
+    if (data.status === 0) {
+      data.result.forEach((cert) => {
+        cert.endValidTime = cert.endValidTime.split(" ")[0];
+      });
+
+      this.setData({
+        certs: data.result,
+      });
+    } else {
+      this.setData({
+        certs: [],
+      });
+      wx.showToast({
+        title: data.msg,
+        icon: "none",
+      });
+    }
+  },
+  async getContacts() {
+    let { data } = await getApi("/ship/cert/operation/contacts");
+    if (data.status === 0) {
+      this.setData({
+        contacts: data.result,
+      });
+    } else {
+      this.setData({
+        contacts: [],
+      });
+      wx.showToast({
+        title: data.msg,
+        icon: "none",
+      });
+    }
+  },
+  makePhoneCall(e) {
+    wx.makePhoneCall({
+      phoneNumber: e.currentTarget.dataset.phone,
+    });
+  },
+  copy(e) {
+    wx.setClipboardData({
+      data: e.currentTarget.dataset.phone,
+      success(res) {
+        wx.showToast({
+          title: "复制成功",
+        });
+      },
+    });
+  },
+  async getOilPriceList() {
+    let { data } = await postApi("/fuel/list", {});
+    if (data.status === 0) {
+      this.setData({
+        oilPriceList: data.result.map((item, index) => {
+          return {
+            id: index,
+            latitude: item.fuelShipLatitude,
+            longitude: item.fuelShipLongitude,
+            iconPath:
+              "https://frontend-1255802371.cos.ap-shanghai.myqcloud.com/miniapp-static%2Fgas-station.png",
+            width: 40,
+            height: 40,
+            ...item,
+            callout: {
+              content: item.vendorName,
+              display: "ALWAYS",
+              bgColor: "none",
+            },
+          };
+        }),
+      });
+    } else {
+      this.setData({
+        oilPriceList: [],
+      });
+      wx.showToast({
+        title: data.msg,
+        icon: "none",
+      });
+    }
+  },
+  openSetting() {
+    this.setData({
+      authModal: false,
+    });
+    wx.openSetting({
+      complete: (e) => {
+        console.log(e);
+        if (e.authSetting["scope.writePhotosAlbum"]) {
+          if (wx.getStorageSync("cacheImage")) {
+            wx.saveImageToPhotosAlbum({
+              filePath: wx.getStorageSync("cacheImage"),
+              success: (e) => {
+                wx.showToast({
+                  title: "保存成功!",
+                });
+                wx.removeStorageSync("cacheImage");
+              },
+              complete: (e) => {
+                console.log(e);
+              },
+            });
+          }
+        }
+      },
+    });
+  },
+  takeBill() {
+    if (this.data.locked) return;
+    wx.redirectTo({
+      url: "/pages/takeBill/takeBill",
+    });
+  },
+  async registerShip() {
+    if (!this.checkout()) return;
+    let res = await postApi("/user/wx/register", {
+      userId: wx.getStorageSync("userId"),
+      shipName: this.data.shipName,
+      shipMmsi: this.data.shipMmsi,
+    });
+
+    if (res.data.status == 0) {
+      let { shipInfo, userInfo } = res.data.result;
+
+      let data = {
+        ...shipInfo,
+        ...userInfo,
+      };
+      Object.keys(data).forEach(function (key) {
+        wx.setStorageSync(key, data[key]);
+      });
+      wx.showToast({
+        title: res.data.msg,
+      });
+      this.setData({
+        ...data,
+      });
+    } else {
+      wx.showToast({
+        title: res.data.msg,
+      });
+    }
+  },
+
+  checkout() {
+    if (!this.data.shipName) {
+      wx.showToast({
+        title: "请输入船名!",
+        icon: "error",
+      });
+      return;
+    }
+
+    if (!this.data.shipMmsi) {
+      wx.showToast({
+        title: "请输入MMSI!",
+        icon: "error",
+      });
+      return;
+    }
+
+    return true;
+  },
+  async takePhoto(e) {
+    if (this.data.locked) {
+      wx.showLoading({
+        title: "高精度定位中...",
+      });
+      return;
+    }
+    this.data.locked = true;
+    let { mediatype } = e.currentTarget.dataset;
+    wx.getLocation({
+      type: "gcj02",
+      isHighAccuracy: true,
+      success: (e) => {
+        let { latitude, longitude } = e;
+        console.log("获取定位成功!", e);
+        this.data.latitude = latitude;
+        this.data.longitude = longitude;
+        wx.setStorageSync("latitude", latitude);
+        wx.setStorageSync("longitude", longitude);
+        wx.chooseMedia({
+          mediaType: ["image"],
+          sourceType: ["camera"],
+          success: (e) => {
+            console.log("获取媒体成功!", e);
+            let src = e.tempFiles[0].tempFilePath;
+            if (e.type == "video") {
+              wx.showLoading({
+                title: "正在压缩...",
+              });
+              wx.compressVideo({
+                src,
+                quality: "high",
+                bitrate: "",
+                fps: "",
+                resolution: "",
+                success: async (e) => {
+                  if (wx.getStorageSync("userName")) {
+                    wx.showLoading({
+                      title: "正在上传...",
+                    });
+                    let res = await uploadFile(e.tempFilePath, {
+                      type: 4,
+                      userId: wx.getStorageSync("userId"),
+                      location: `${this.data.longitude},${this.data.latitude}`,
+                    });
+                    if (res.status == 0) {
+                      console.log(res);
+                      wx.showToast({
+                        title: res.msg,
+                      });
+                      wx.redirectTo({
+                        url: "/pages/takePhoto/success/success",
+                      });
+                    } else {
+                      wx.showToast({
+                        title: res.msg,
+                      });
+                    }
+                  } else {
+                    // 新用户视频
+                    wx.hideLoading({
+                      success: (res) => {},
+                    });
+                    console.log("新用户视频", e);
+                    wx.setStorageSync("type", 2);
+                    wx.setStorageSync("file", e.tempFilePath);
+                    wx.redirectTo({
+                      url: `/pages/newCachePage/newCachePage`,
+                    });
+                  }
+                },
+                fail: (e) => {
+                  console.log(e);
+                },
+              });
+            } else {
+              wx.compressImage({
+                src,
+                quality: 80, // 压缩质量
+                success: async (e) => {
+                  console.log("图片压缩成功!", e);
+                  wx.hideLoading({
+                    success: (res) => {},
+                  });
+                  if (wx.getStorageSync("userName")) {
+                    wx.showLoading({
+                      title: "正在上传...",
+                    });
+                    let postData = {
+                      type: mediatype,
+                      userId: wx.getStorageSync("userId"),
+                    };
+
+                    if (mediatype == 3) {
+                      postData.location = `${this.data.longitude},${this.data.latitude}`;
+                    } else {
+                      postData.location = "";
+                    }
+                    let res = await uploadFile(e.tempFilePath, postData);
+                    console.log("上传结束", res);
+                    if (res.status == 0) {
+                      wx.showToast({
+                        title: res.msg,
+                      });
+                      wx.setStorageSync("shareImageUrl", res.result.viewUrl);
+                      console.log(wx.getStorageSync("shareImageUrl"));
+                      wx.downloadFile({
+                        url: res.result.viewUrl,
+                        success: (e) => {
+                          console.log("下载调用!", e);
+                          wx.setStorageSync("cacheImage", e.tempFilePath);
+                          if (mediatype == 3) {
+                            wx.saveImageToPhotosAlbum({
+                              filePath: e.tempFilePath,
+                              success: (e) => {
+                                if (e.errMsg == "saveImageToPhotosAlbum:ok") {
+                                  wx.showToast({
+                                    title: "保存成功!",
+                                  });
+                                  wx.removeStorageSync("cacheImage");
+                                }
+                              },
+                              fail: (e) => {
+                                console.log("失败4", e);
+                                this.setData({
+                                  authModal: true,
+                                  modalText: "文件存储",
+                                });
+                              },
+                            });
+                          }
+
+                          wx.redirectTo({
+                            url: "/pages/takePhoto/success/success",
+                          });
+                        },
+                        fail: (e) => {
+                          console.log("失败3", e);
+                        },
+                      });
+                    } else {
+                      wx.showToast({
+                        title: res.msg,
+                      });
+                    }
+                  } else {
+                    // 新用户图片
+                    console.log("新用户图片", e);
+                    wx.setStorageSync("type", 1);
+                    wx.setStorageSync("file", e.tempFilePath);
+                    wx.redirectTo({
+                      url: `/pages/newCachePage/newCachePage`,
+                    });
+                  }
+                },
+                fail: (e) => {
+                  console.log("失败2", e);
+                },
+              });
+            }
+          },
+          fail: (e) => {
+            console.log("失败1", e);
+          },
+        });
+      },
+      fail: (e) => {
+        this.setData({
+          authModal: true,
+          modalText: "位置信息",
+        });
+      },
+      complete: (e) => {
+        wx.hideLoading({
+          success: (res) => {},
+        });
+        this.data.locked = false;
+      },
+    });
+  },
+  async msg() {
+    let res = await subMsg();
+  },
+  async checkCheckStatus() {
+    let { data } = await postApi("/user/wx/checkin/status", {
+      userId: wx.getStorageSync("userId"),
+    });
+    this.setData(data.result);
+  },
+  async check() {
+    if (this.data.checkinStatus == 1) return;
+    if (this.data.locked) {
+      wx.showLoading({
+        title: "高精度定位中...",
+      });
+      return;
+    }
+    this.data.locked = true;
+    wx.getLocation({
+      type: "gcj02",
+      isHighAccuracy: true,
+      success: async (e) => {
+        let { latitude, longitude } = e;
+        let { data } = await postApi("/user/wx/checkin", {
+          userId: wx.getStorageSync("userId"),
+          latitude,
+          longitude,
+        });
+        this.setData(data.result);
+        if (data.status == 0) {
+          wx.showToast({
+            title: data.msg,
+            icon: "success",
+            duration: 2000,
+            mask: true,
+          });
+        }
+      },
+      complete: (e) => {
+        wx.hideLoading({});
+        this.data.locked = false;
+      },
+    });
+  },
+  onShow() {
+    if (typeof this.getTabBar === "function" && this.getTabBar()) {
+      this.getTabBar().setData({
+        selected: 0,
+      });
+    }
+    let userName = wx.getStorageSync("userName");
+    let userId = wx.getStorageSync("userId");
+    let phone = wx.getStorageSync("phone");
+    let shipId = wx.getStorageSync("shipId");
+    if (userId && shipId) this.checkCheckStatus();
+    this.getCerts();
+    this.getContacts();
+    this.getOilPriceList();
+    this.setData({
+      userName,
+      phone,
+      userId,
+      shipId,
+    });
+  },
+});

+ 3 - 0
miniprogram/pages/takePhoto/takePhotoCache/takePhoto.json

@@ -0,0 +1,3 @@
+{
+  "usingComponents": {}
+}

+ 92 - 0
miniprogram/pages/takePhoto/takePhotoCache/takePhoto.wxml

@@ -0,0 +1,92 @@
+<view class="top-container df aic jcc fdc" wx:if="{{shipId}}">
+  <view class="sign" bind:tap="check">{{checkinStatus==0?'签到':'已签到'}}</view>
+  <view class="check-time mt30" wx:if="{{checkinStatus==1}}">签到时间: {{checkinDatetime}}</view>
+</view>
+<view class="top-container exp" wx:else="">
+  <image class="avatar-icon" src="{{avater_exp}}"></image>
+  <view class="text" style="text-align: center;">
+    {{userName?"":"体验用户"}}
+    <text wx:if="{{userName}}" class="user-name">{{userName}}</text>
+    <text wx:if="{{phone}}" class="phone">{{phone}}</text>
+  </view>
+</view>
+<view wx:if="{{userId&&shipId}}">
+  <view class="new-camera camera-cargo">
+    <image class="icon" bindtap="takePhoto" data-mediatype="{{3}}" src="{{newCameraIcon}}"></image>
+    <view bindtap="takePhoto" data-mediatype="{{3}}">拍货物</view>
+  </view>
+  <view class="new-camera camera-bill">
+    <image class="icon" data-mediatype="{{0}}" bindtap="takeBill" src="{{newCameraIcon}}"></image>
+    <view data-mediatype="{{0}}" bindtap="takeBill">拍单据</view>
+  </view>
+</view>
+<view wx:else>
+  <image wx:if="{{!userId&&!shipId||!userId}}" class="camera-icon" bindtap="takePhoto" data-mediatype="{{3}}" src="{{cameraIcon}}"></image>
+  <view wx:else style="margin-top: 20%;">
+    <view class="line mb30">
+      <view class="ship-name">船舶名称 :</view>
+      <input class="ship-name-ipt" model:value="{{shipName}}" type="text" placeholder="请输入船舶名称" />
+    </view>
+    <view class="line">
+      <view class="ship-mmsi">MMSI :</view>
+      <input class="ship-mmsi-ipt" model:value="{{shipMmsi}}" type="number" placeholder="请输入MMSI" />
+    </view>
+    <view bindtap="registerShip" class="submit">绑定船舶</view>
+  </view>
+</view>
+<view class="auth-modal" wx:if="{{authModal}}">
+  <view class="modal">
+    <view class="service">为了更好的提供服务</view>
+    <view class="auth-btn" bindtap="openSetting">请授权{{modalText}}</view>
+  </view>
+</view>
+<view class="card">
+  <view class="card-title">我的证书</view>
+  <view class="">
+    <view class="df aic fs28 th mb20">
+      <view class="index-item tac">序号</view>
+      <view class="fg1 tac">证书名称</view>
+      <view class="end-time tac">到期时间</view>
+    </view>
+    <view class="df aic jcsb fs28 tr mb10" style="{{certs.length===(index+1)?'border:none;margin-bottom:0!important;':''}}" wx:for="{{certs}}" wx:key="index">
+      <view class="index-item tac">{{index+1}}</view>
+      <view class="fg1 tac">{{item.certTypeName}}</view>
+      <view class="end-time tac">{{item.endValidTime}}</view>
+    </view>
+  </view>
+</view>
+<view class="card">
+  <view class="card-title">办证联系人</view>
+  <view class="">
+    <view class="df aic jcsb fs28 th">
+      <view class="index-item tac">序号</view>
+      <view class="w50p tac">办事处</view>
+      <view class="w30p tac">姓名</view>
+      <view class="w20p tac">电话</view>
+    </view>
+    <view class="df aic jcsb fs28 mt10 tr" style="{{contacts.length===(index+1)?'border:none;margin-bottom:0!important;':''}}" wx:for="{{contacts}}" wx:key="index">
+      <view class="index-item tac">{{index+1}}</view>
+      <view class="w50p tac">{{item.officeName}}</view>
+      <view class="w30p tac">{{item.contactPerson}}</view>
+      <view class="w20p tac df aic jcc" bind:tap="makePhoneCall" data-phone="{{item.contactPhone}}">
+        <image class="tel ml10" data-phone="{{item.contactPhone}}" src="../../images/tel.png" mode="aspectFit" />
+      </view>
+    </view>
+  </view>
+</view>
+<view class="card ">
+  <view class="card-title">油价走势</view>
+  <view class="">
+    <view class="df aic fs28 th">
+      <view class="index-item tac">序号</view>
+      <view class="w60p tac">加油服务商</view>
+      <view class="w40p tac">油价(元/吨)</view>
+    </view>
+    <view class="df aic jcsb fs28 mt10 tr" style="{{oilPriceList.length===(index+1)?'border:none;margin-bottom:0!important;':''}}" wx:for="{{oilPriceList}}" wx:key="index">
+      <view class="index-item tac">{{index+1}}</view>
+      <view class="w60p tac">{{item.vendorName}}</view>
+      <view class="w40p tac">{{item.price}}</view>
+    </view>
+  </view>
+</view>
+<view class="h200"></view>

+ 173 - 0
miniprogram/pages/takePhoto/takePhotoCache/takePhoto.wxss

@@ -0,0 +1,173 @@
+/* pages/takePhoto/takePhoto.wxss */
+.top-container {
+  position: relative;
+  width: 100%;
+  height: 20vh;
+  background-size: contain;
+  background: green;
+}
+
+.exp {
+  background: url(https://frontend-1255802371.cos.ap-shanghai.myqcloud.com/miniapp-static/sea-bgd.jpeg?sign=f138978877f53ccdc48937c58811659b&t=1634539269);
+}
+
+.sign {
+  color: green;
+  background-color: #fff;
+  width: 180rpx;
+  height: 100rpx;
+  line-height: 100rpx;
+  font-size: 36rpx;
+  text-align: center;
+  border-radius: 50rpx;
+  margin: 0 auto;
+}
+
+.check-time {
+  color: #fff;
+  text-align: center;
+  margin-top: 20rpx;
+}
+
+.sign-icon {
+  display: block;
+  width: 210rpx;
+  height: 180rpx;
+  margin: 0 auto;
+}
+
+.avatar-icon {
+  display: block;
+  width: 110rpx;
+  height: 110rpx;
+  border-radius: 50%;
+  margin: 0 auto;
+}
+
+.user-name {
+  margin-right: 40rpx;
+}
+
+.phone {
+  font-size: 28rpx;
+  font-weight: 400;
+}
+
+.text {
+  font-size: 30rpx;
+  font-family: PingFangSC-Medium, PingFang SC;
+  font-weight: 500;
+  color: #ffffff;
+  margin-top: 30rpx;
+}
+
+.camera-icon {
+  display: block;
+  width: 234rpx;
+  height: 234rpx;
+  position: absolute;
+  top: 50%;
+  left: calc(50% - 117rpx);
+}
+
+.auth-modal {
+  position: absolute;
+  top: 0;
+  right: 0;
+  bottom: 0;
+  left: 0;
+  background-color: rgba(0, 0, 0, 0.7);
+}
+
+.modal {
+  width: 557rpx;
+  height: 274rpx;
+  background: #ffffff;
+  border-radius: 16rpx;
+  margin: 548rpx auto;
+  padding-top: 55rpx;
+}
+
+.service {
+  width: 100%;
+  text-align: center;
+  font-size: 36rpx;
+  font-family: PingFangSC-Medium, PingFang SC;
+  font-weight: 500;
+  color: #333333;
+  -webkit-text-stroke: 1rpx #979797;
+}
+
+.auth-btn {
+  width: 350rpx;
+  height: 69rpx;
+  background: #0094fe;
+  border-radius: 8rpx;
+  font-size: 36rpx;
+  font-family: PingFangSC-Regular, PingFang SC;
+  font-weight: 400;
+  color: #ffffff;
+  line-height: 69rpx;
+  margin: 0 auto;
+  margin-top: 55rpx;
+  text-align: center;
+}
+
+.icon {
+  width: 120rpx;
+  height: 120rpx;
+}
+
+.camera-cargo {
+  height: 22vh;
+  background: #006ebd;
+}
+
+.camera-bill {
+  height: 22vh;
+  background: #fa283d;
+}
+
+.new-camera {
+  padding-top: 40rpx;
+  text-align: center;
+  color: #fff;
+  font-size: 42rpx;
+}
+
+.ship-name,
+.ship-mmsi {
+  width: 153rpx;
+  height: 36rpx;
+  font-size: 30rpx;
+  font-family: PingFangSC-Regular, PingFang SC;
+  font-weight: 400;
+  color: #333333;
+  line-height: 36rpx;
+  text-align: right;
+  margin-right: 6rpx;
+}
+
+.ship-name-ipt,
+.ship-mmsi-ipt {
+  width: 420rpx;
+  height: 67rpx;
+  border: 1px solid #979797;
+  font-size: 30rpx;
+  padding-left: 20rpx;
+}
+
+.submit {
+  margin: 130rpx auto;
+  width: 80%;
+  height: 80rpx;
+  background: #0094fe;
+  border-radius: 4rpx;
+  font-size: 34rpx;
+  font-family: PingFangSC-Regular, PingFang SC;
+  font-weight: 400;
+  color: #ffffff;
+  text-align: center;
+  line-height: 80rpx;
+  border-radius: 40rpx;
+}

+ 5 - 1
miniprogram/style/margin.wxss

@@ -38,6 +38,10 @@
   margin: 50rpx auto !important;
 }
 
+.mt0 {
+  margin-top: 0 !important;
+}
+
 .mt10 {
   margin-top: 10rpx !important;
 }
@@ -132,4 +136,4 @@
 
 .m0a {
   margin: 0 auto;
-}
+}

+ 102 - 0
txt.txt

@@ -0,0 +1,102 @@
+菜单#1:货盘
+	1. 签到按钮(绿色大色块)
+	2. 拍货物按钮(蓝色大色块)
+	3. 拍单据按钮(红色大色块)
+	4. 码头服务查询:
+		1. 搜索栏
+		2. 热门推荐(4个):
+			1. 人名
+			2. 服务类型
+			3. 电话按钮
+		3. 水位信息(抄长江航道局)
+	5. 新能源船舶政策解读:
+		1. 拆船政策:
+			1. 船型
+			2. 补贴额度
+		2. 造船政策:
+			1. 船型
+			2. 新能源类型
+			3. 补贴额度
+	6. 智能服务:
+		1. 您的船舶年检即将到期,到期日期
+		2. 您有X本证书即将到期
+			1. 证书列表:
+				1. 证书名称
+				2. 到期时间
+		3. 您有X个船员资质可升级
+			1. 资质列表:
+				1. 资质名称
+				2. 升级名称
+		4. 船舶年检证书办理与资质请联系朱经理,电话按钮(点击发起电话拨打)
+	7. 搜查附近货盘:
+		1. 搜索按钮
+		2. 地图模块展示船舶位置与附近货盘位置
+		3. 货盘列表:
+			1. 货种名称,装货港,卸货港,吨位,电话按钮
+2. 菜单#2:证书
+	1. 船舶基础信息:
+		1. 船舶名称
+		2. MMSI
+	2. 船舶证书:
+		1. 证书名称
+		2. 证书照片
+		3. 证书有效期(年,月,日)
+	3. 船员证书:
+		1. 船员姓名
+		2. 船员体检报告:
+			1. 体检报告照片
+		3. 船员服务簿:
+			1. 服务簿照片
+		4. 证书名称
+			1. 证书照片
+			2. 证书有效期(年,月,日)
+	4. 备注:设计微信一键分享页面,页面内容包含所有上述证件,底部加入:船东证书服务由汇很多船东科技服务平台提供
+3. 菜单#3:海事
+	1. 海事公告列表
+		1. 公告抬头
+		2. 发布日期
+		3. 发布单位(如:江苏海事局)
+	2. 船东法务服务
+		1. 法律援助机构介绍:
+			1. 机构名称
+			2. 机构照片
+			3. 机构简介(200字)
+		2. 申请法律援助:
+			1. 法律援助需求输入框
+			2. 提交申请按钮
+4. 菜单#4:年检
+	1. 海事集中年检通知:
+		1. 通知格式:
+			1. 标题:江苏海事局即将在3月10-15日期间在江阴码头开放统一年检
+			2. 作者:汇很多,发布时间
+			3. 江阴码头照片
+			4. 公告具体内内容(300字)
+			5. 详情请联系朱经理,电话按钮
+			6. 备注:设计微信一键分享页面
+5. 菜单#5:船厂
+	1. 船厂介绍:
+		1. 船厂介绍格式:
+			1. 船厂名称
+			2. 船厂地址
+			3. 船厂照片
+			4. 船厂简介
+			5. 船厂运营数据:
+				1. 船坞数量X个
+				2. 年产能
+			6. 拆船,造船,补贴申请请联系朱经理,电话按钮
+			7. 备注:设计微信一键分享页面
+6. 菜单#6:学校
+	1. 学校介绍:
+		1. 学校名称
+		2. 学校照片
+		3. 学校简介(300字)
+		4. 学校运营数据:
+			1. 学校场地规模:2000平方米
+			2. 每年学员结业人数
+	2. 培训公告
+		1. 公告格式:
+			1. 标题:海员培训课程将在2025年3月10-15日期间在新蔡学员举办
+			2. 作者:汇很多,发布时间
+			3. 现场照片
+			4. 公告具体介绍(300字)
+			5. 备注:设计微信一键分享页面