feat(securityCheck): 添加海事年检通知页面

- 创建 securityCheck 页面的 JS、WXML 和 WXSS 文件
- 实现海事年检通知的展示、分享和拨打电话功能
- 优化页面样式，包括标题、内容、图片和按钮等元素

miniprogram/pages/securityCheck/securityCheck.js

@@ -2,12 +2,27 @@ Page({
   /**
    * 页面的初始数据
    */
-  data: {},
+  data: {
+    notice: {
+      title: "江苏海事局即将在3月10-15日期间在江阴码头开放统一年检",
+      author: "汇很多",
+      date: "2024-02-01",
+      photoUrl: "https://example.com/jiangyin_dock.jpg",
+      content:
+        "江苏海事局为进一步提高船舶年检效率，方便船东集中办理船舶检验业务，定于2024年3月10日至15日期间在江阴码头开展船舶统一年检活动。本次年检主要针对内河干散货运输船舶，重点检查船舶适航状态、消防救生设备、防污染设备等安全设施。参检船舶需提前准备船舶证书、船员证书等相关文件，并确保各项安全设备处于良好状态。检验期间将开通绿色通道，提供现场咨询服务，帮助船东解决实际困难。请各位船东根据自身情况合理安排时间，按期参加年检。我们将竭诚为广大船东提供优质、高效的检验服务。",
+      contactInfo: "详情请联系朱经理：13912345678",
+    },
+  },
 
   /**
    * 生命周期函数--监听页面加载
    */
-  onLoad: function (options) {},
+  onLoad: function (options) {
+    // 设置导航栏标题
+    wx.setNavigationBarTitle({
+      title: "海事年检通知",
+    });
+  },
 
   /**
    * 生命周期函数--监听页面初次渲染完成
@@ -42,5 +57,23 @@ Page({
   /**
    * 用户点击右上角分享
    */
-  onShareAppMessage: function () {},
+  onShareAppMessage: function () {
+    return {
+      title: this.data.notice.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",
+        });
+      },
+    });
+  },
 });

miniprogram/pages/securityCheck/securityCheck.wxml

@@ -0,0 +1,21 @@
+<view class="container">
+    <!-- 顶部标题 -->
+    <view class="header">海事年检通知</view>
+    <!-- 内容区域 -->
+    <view class="content">
+        <view class="card">
+            <view class="notice-title">{{notice.title}}</view>
+            <view class="notice-info">
+                <text class="notice-author">{{notice.author}}</text>
+                <text class="notice-date">{{notice.date}}</text>
+            </view>
+            <image class="dock-photo" mode="aspectFill" src="{{notice.photoUrl}}"></image>
+            <view class="notice-content">{{notice.content}}</view>
+            <view class="contact-section">
+                <text class="contact-info">{{notice.contactInfo}}</text>
+                <button class="contact-btn" bindtap="makePhoneCall">拨打电话</button>
+            </view>
+            <button class="share-btn" open-type="share">分享通知</button>
+        </view>
+    </view>
+</view>

miniprogram/pages/securityCheck/securityCheck.wxss

@@ -0,0 +1,84 @@
+.container {
+  padding: 20rpx;
+  background-color: #f5f5f5;
+}
+
+.header {
+  font-size: 36rpx;
+  font-weight: bold;
+  color: #333;
+  padding: 20rpx 0;
+  text-align: center;
+}
+
+.content {
+  margin-top: 20rpx;
+}
+
+.card {
+  background-color: #fff;
+  border-radius: 16rpx;
+  margin-bottom: 20rpx;
+  box-shadow: 0 2rpx 10rpx rgba(0, 0, 0, 0.1);
+  overflow: hidden;
+  padding: 20rpx;
+}
+
+.notice-title {
+  font-size: 32rpx;
+  font-weight: bold;
+  color: #333;
+  margin-bottom: 20rpx;
+}
+
+.notice-info {
+  display: flex;
+  justify-content: space-between;
+  font-size: 24rpx;
+  color: #999;
+  margin-bottom: 20rpx;
+}
+
+.dock-photo {
+  width: 100%;
+  height: 400rpx;
+  border-radius: 8rpx;
+  margin-bottom: 20rpx;
+}
+
+.notice-content {
+  font-size: 28rpx;
+  color: #666;
+  line-height: 1.6;
+  margin-bottom: 30rpx;
+  text-align: justify;
+}
+
+.contact-section {
+  margin-bottom: 20rpx;
+}
+
+.contact-info {
+  font-size: 28rpx;
+  color: #333;
+  margin-bottom: 20rpx;
+  display: block;
+}
+
+.contact-btn {
+  background-color: #1aad19;
+  color: #fff;
+  font-size: 28rpx;
+  margin-bottom: 20rpx;
+}
+
+.share-btn {
+  background-color: #576b95;
+  color: #fff;
+  font-size: 28rpx;
+}
+
+.contact-btn::after,
+.share-btn::after {
+  border: none;
+}