feat(takePhoto): 添加码头服务和水位信息功能

- 新增码头服务列表和水位信息展示功能
- 实现搜索码头服务和拨打电话功能
- 优化页面样式，增加加载和无数据提示
- 修改水位信息展示方式，增加趋势图标

miniprogram/apis/api.js

@@ -1,17 +1,21 @@
-const {
-  api
-} = require("./apiConfig")
+const { api } = require("./apiConfig");
 
-function getApi(url, data) {
-  return api(url, data, "get")
+function getApi(url, data = {}) {
+  return api(url, data, "get");
 }
 
+/**
+ * 向指定URL发送POST请求
+ *
+ * @param url 请求的URL
+ * @param data 请求体数据
+ * @returns 返回请求的结果
+ */
 function postApi(url, data) {
-  return api(url, data, "post")
-
+  return api(url, data, "post");
 }
 
 module.exports = {
   getApi,
-  postApi
-}
+  postApi,
+};

miniprogram/app.js

@@ -28,10 +28,9 @@ App({
       traceUser: true,
     });
     this.globalData = {};
-  },
-  onShow() {
     this.checkEnvVersion();
   },
+  onShow() {},
   checkEnvVersion() {
     let v = wx.getAccountInfoSync();
     let appVersion = wx.getStorageSync("appVersion");

miniprogram/pages/maritime/maritime.wxss

@@ -143,7 +143,6 @@
   background-color: #1989fa;
   color: #fff;
   text-align: center;
-  padding: 20rpx 0;
   border-radius: 8rpx;
   font-size: 28rpx;
   margin-bottom: 20rpx;

miniprogram/pages/takePhoto/takePhoto.js

@@ -1,14 +1,23 @@
 // pages/takePhoto/takePhoto.js
+import { postApi, getApi } from "../../apis/api";
 Page({
   /**
    * 页面的初始数据
    */
-  data: {},
+  data: {
+    terminalServices: [], // 码头服务列表
+    searchWords: "", // 搜索关键词
+    loading: false, // 加载状态
+    waterLevels: [], // 水位数据
+  },
 
   /**
    * 生命周期函数--监听页面加载
    */
-  onLoad(options) {},
+  onLoad(options) {
+    this.getTerminalServices();
+    this.getWaterLevel();
+  },
 
   /**
    * 生命周期函数--监听页面初次渲染完成
@@ -50,4 +59,105 @@ Page({
    * 用户点击右上角分享
    */
   onShareAppMessage() {},
+
+  /**
+   * 获取码头服务数据
+   */
+  getTerminalServices(searchWords = "") {
+    this.setData({
+      loading: true,
+    });
+    postApi("/pallet/terminal/services", {
+      searchWords: searchWords,
+    })
+      .then((res) => {
+        if (res.data && res.data.status === 0) {
+          this.setData({
+            terminalServices: res.data.result || [],
+            loading: false,
+          });
+        } else {
+          this.setData({
+            loading: false,
+          });
+          wx.showToast({
+            title: res.data.msg || "获取数据失败",
+            icon: "none",
+          });
+        }
+      })
+      .catch((res) => {
+        console.log(res);
+        this.setData({
+          loading: false,
+        });
+        wx.showToast({
+          title: "网络请求失败",
+          icon: "none",
+        });
+      });
+  },
+
+  /**
+   * 搜索码头服务
+   */
+  searchTerminalServices() {
+    this.getTerminalServices(this.data.searchWords);
+  },
+
+  /**
+   * 输入框内容变化事件
+   */
+  onSearchInput(e) {
+    this.setData({
+      searchWords: e.detail.value,
+    });
+  },
+
+  /**
+   * 拨打电话
+   */
+  makePhoneCall(e) {
+    const phone = e.currentTarget.dataset.phone;
+    if (phone) {
+      wx.makePhoneCall({
+        phoneNumber: phone,
+      });
+    } else {
+      wx.showToast({
+        title: "电话号码不存在",
+        icon: "none",
+      });
+    }
+  },
+  async getWaterLevel() {
+    let { data } = await getApi("/pallet/water/level");
+    if (data.status === 0) {
+      // 判断data.result是数组内对象waterLevelFluctuation字段的第一个字符如果是负号，新增change字段的值为down，如果是正号，新增change字段的值为up，如果是0，新增change字段的值为zero
+      data.result.forEach((item) => {
+        if (item.waterLevelFluctuation[0] === "-") {
+          item.change = "falling";
+          item.changeIcon = "↓";
+        }
+        if (item.waterLevelFluctuation[0] === "+") {
+          item.change = "rising";
+          item.changeIcon = "↑";
+        }
+        if (item.waterLevelFluctuation[0] === "0") {
+          item.change = "stable";
+        }
+      });
+      this.setData({
+        waterLevels: data.result,
+      });
+    } else {
+      this.setData({
+        waterLevels: [],
+      });
+      wx.showToast({
+        title: data.msg,
+        icon: "none",
+      });
+    }
+  },
 });

miniprogram/pages/takePhoto/takePhoto.wxml

@@ -15,76 +15,41 @@
       <view class="card-content">
         <!-- 搜索栏 -->
         <view class="search-box">
-          <input type="text" class="search-input" placeholder="输入关键词搜索" />
-          <view class="search-btn">搜索</view>
+          <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="service-item df">
-            <view class="df aic">
-              <view class="dock-name">九江港</view>
-              <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="dock-name">武汉港</view>
-              <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="dock-name">南京港</view>
-              <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="dock-name">芜湖港</view>
-              <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 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>
-          </view>
+          </block>
+          <block wx:else>
+            <view class="no-data">暂无码头服务数据</view>
+          </block>
         </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>
+        <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>
-        </view>
+        </scroll-view>
       </view>
     </view>
     <!-- 新能源船舶政策解读 -->

miniprogram/pages/takePhoto/takePhoto.wxss

@@ -201,8 +201,22 @@ page {
   justify-content: space-between;
 }
 
-.dock-name {
+.no-data {
+  text-align: center;
+  padding: 30rpx;
+  color: #999;
   font-size: 28rpx;
+}
+
+.loading {
+  text-align: center;
+  padding: 30rpx;
+  color: #666;
+  font-size: 28rpx;
+}
+
+.dock-name {
+  font-size: 20rpx;
   color: #666;
   margin-right: 20rpx;
   padding: 4rpx 12rpx;
@@ -211,7 +225,7 @@ page {
 }
 
 .service-name {
-  font-size: 32rpx;
+  font-size: 24rpx;
   font-weight: bold;
   color: #333;
   margin-right: 20rpx;
@@ -225,12 +239,13 @@ page {
 /* 水位信息样式 */
 .water-level-info {
   margin-top: 10px;
+  height: 400rpx;
 }
 
 .water-level-item {
   display: flex;
   align-items: center;
-  justify-content: space-around;
+  /* justify-content: space-around; */
   text-align: center;
   padding: 12rpx;
   border: 1px solid #eee;
@@ -245,16 +260,20 @@ page {
 .water-level-station {
   font-weight: bold;
   color: #777;
+  width: 40%;
 }
 
 .water-level-value {
   font-size: 16px;
   margin: 5px 0;
   color: #555;
+  width: 30%;
 }
 
 .water-level-trend {
   font-size: 14px;
+  width: 30%;
+  text-align: center;
 }
 
 .rising {

project.private.config.json

@@ -48,7 +48,7 @@
     }
   },
   "setting": {
-    "urlCheck": true,
+    "urlCheck": false,
     "preloadBackgroundData": false,
     "coverView": true,
     "autoAudits": false,