Explorar o código

feat(securityCheck): 获取海事年检通知列表并优化页面展示

- 添加获取海事年检通知列表的接口调用
- 优化通知内容的展示逻辑,支持多个通知的循环展示
- 改进拨打电话功能,增加对电话号码不存在的情况的处理
- 调整分享通知的功能,允许分享特定的通知内容
wzg hai 8 meses
pai
achega
876351c2cf

+ 68 - 21
miniprogram/pages/securityCheck/securityCheck.js

@@ -1,17 +1,40 @@
+const { postApi } = require("../../apis/api");
+
 Page({
   /**
    * 页面的初始数据
    */
   data: {
-    notice: {
-      title: "江苏海事局即将在3月10-15日期间在江阴码头开放统一年检",
-      author: "汇很多",
-      date: "2024-02-01",
-      photoUrl: "../../images/new-version/pic.png",
-      content:
-        "江苏海事局进一步提高船舶年检效率,方便船东集中办理船舶检验业务,定于2024年3月10日至15日期间在江阴码头开展船舶统一年检活动。本次年检主要针对内河干散货运输船舶,重点检查船舶适航状态、消防救生设备、防污染设备等安全设施。参检船舶需提前准备船舶证书、船员证书等相关文件,并确保各项安全设备处于良好状态。检验期间将开通绿色通道,提供现场咨询服务,帮助船东解决实际困难。请各位船东根据自身情况合理安排时间,按期参加年检。我们将竭诚为广大船东提供优质、高效的检验服务。",
-      contactInfo: "详情请联系朱经理:13912345678",
-    },
+    currentNotice: {}, // 当前显示的通知详情
+    noticeList: [
+      {
+        id: 2,
+        noticeTitle: "测试通知通知",
+        noticeImgFileKey:
+          "new/annual_inspection_notice/0ebe0d67-1ead-4d0c-ac97-f4d644b5a56f1745505310167.png",
+        noticeImgUrl:
+          "https://hhd-shipping-1255802371.cos.ap-shanghai.myqcloud.com/new/annual_inspection_notice/0ebe0d67-1ead-4d0c-ac97-f4d644b5a56f1745505310167.png?sign=q-sign-algorithm%3Dsha1%26q-ak%3DAKID4xb091cy4tRikV0EBrGOGsCF1WkhMlum%26q-sign-time%3D1745505322%3B93158697600%26q-key-time%3D1745505322%3B93158697600%26q-header-list%3Dhost%26q-url-param-list%3D%26q-signature%3D2e87d32969f92f6a2894bafee945e4433ae5240b",
+        noticeContent: "13333333333333333",
+        contactName: "测试人",
+        contactPhone: "13111111112",
+        postedBy: "汇很多",
+        createTime: "2025/04/24 22:35:22",
+      },
+      {
+        id: 1,
+        noticeTitle: "江苏海事局即将在3月10-15日期间在江阴码头开放统一年检",
+        noticeImgFileKey:
+          "new/annual_inspection_notice/0c75b46a-f4ba-4652-be47-569a63e962ad1745504543747.png",
+        noticeImgUrl:
+          "https://hhd-shipping-1255802371.cos.ap-shanghai.myqcloud.com/new/annual_inspection_notice/0c75b46a-f4ba-4652-be47-569a63e962ad1745504543747.png?sign=q-sign-algorithm%3Dsha1%26q-ak%3DAKID4xb091cy4tRikV0EBrGOGsCF1WkhMlum%26q-sign-time%3D1745504545%3B93158697600%26q-key-time%3D1745504545%3B93158697600%26q-header-list%3Dhost%26q-url-param-list%3D%26q-signature%3Df2bf012506b634d2437fb5bc726af541c66d5869",
+        noticeContent:
+          "江苏海事局进一步提高船舶年检效率,方便船东集中办理船舶检验业务,定于2024年3月10日至15日期间在江阴码头开展船舶统一年检活动。本次年检主要针对内河干散货运输船舶,重点检查船舶适航状态、消防救生设备、防污染设备等安全设施。参检船舶需提前准备船舶证书、船员证书等相关文件,并确保各项安全设备处于良好状态。检验期间将开通绿色通道,提供现场咨询服务,帮助船东解决实际困难。请各位船东根据自身情况合理安排时间,按期参加年检。我们将竭诚为广大船东提供优质、高效的检验服务。",
+        contactName: "朱经理",
+        contactPhone: "13912345678",
+        postedBy: "汇很多1",
+        createTime: "2024/02/01 00:00:00",
+      },
+    ],
   },
 
   /**
@@ -22,6 +45,7 @@ Page({
     wx.setNavigationBarTitle({
       title: "海事年检通知",
     });
+    this.getAnnualInspectionNoticeList();
   },
 
   /**
@@ -63,23 +87,46 @@ Page({
   /**
    * 用户点击右上角分享
    */
-  onShareAppMessage: function () {
+  onShareAppMessage: function (res) {
+    if (res.from === "button" && res.target && res.target.dataset.title) {
+      return {
+        title: res.target.dataset.title || "海事年检通知",
+        path: "/pages/securityCheck/securityCheck",
+      };
+    }
     return {
-      title: this.data.notice.title,
+      title: "海事年检通知",
       path: "/pages/securityCheck/securityCheck",
     };
   },
 
-  makePhoneCall: function () {
-    const phoneNumber = this.data.notice.contactInfo.match(/\d{11}/)[0];
-    wx.makePhoneCall({
-      phoneNumber: phoneNumber,
-      fail(err) {
-        wx.showToast({
-          title: "拨打电话失败",
-          icon: "none",
-        });
-      },
+  makePhoneCall: function (e) {
+    const phoneNumber = e.currentTarget.dataset.phone;
+    if (phoneNumber) {
+      wx.makePhoneCall({
+        phoneNumber: phoneNumber,
+      });
+    } else {
+      wx.showToast({
+        title: "电话号码不存在",
+        icon: "none",
+      });
+    }
+  },
+  //POST /annual/inspection/notice 海事年检通知
+  async getAnnualInspectionNoticeList() {
+    let { data } = await postApi("/annual/inspection/notice", {
+      currentPage: 1,
+      size: 1000,
     });
+    if (data.status === 0) {
+      this.setData({
+        noticeList: data.result,
+      });
+    } else {
+      this.setData({
+        noticeList: [],
+      });
+    }
   },
 });

+ 11 - 9
miniprogram/pages/securityCheck/securityCheck.wxml

@@ -3,19 +3,21 @@
   <!-- <view class="header">海事年检通知</view> -->
   <!-- 内容区域 -->
   <view class="content">
-    <view class="card">
-      <view class="notice-title">{{notice.title}}</view>
+    <view class="card" wx:for="{{noticeList}}" wx:key="id">
+      <view class="notice-title">{{item.noticeTitle}}</view>
       <view class="notice-info">
-        <text class="notice-author">{{notice.author}}</text>
-        <text class="notice-date">{{notice.date}}</text>
+        <text class="notice-author">{{item.postedBy}}</text>
+        <text class="notice-date">{{item.createTime}}</text>
       </view>
-      <image class="dock-photo" mode="aspectFill" src="{{notice.photoUrl}}"></image>
-      <view class="notice-content">{{notice.content}}</view>
+      <image class="dock-photo" mode="aspectFill" src="{{item.noticeImgUrl}}"></image>
+      <view class="notice-content">{{item.noticeContent}}</view>
       <view class="contact-section">
-        <text class="contact-info">{{notice.contactInfo}}</text>
-        <button class="contact-btn" bindtap="makePhoneCall">拨打电话</button>
+        <text class="contact-info">详情请联系{{item.contactName}}:{{item.contactPhone}}</text>
+        <button class="contact-btn" bindtap="makePhoneCall" data-phone="{{item.contactPhone}}">
+          拨打电话
+        </button>
       </view>
-      <button class="share-btn" open-type="share">分享通知</button>
+      <button class="share-btn" open-type="share" data-title="{{item.noticeTitle}}">分享通知</button>
     </view>
   </view>
 </view>