refactor(cert): 重构证书页面并优化图片预览功能

- 移除 API 调用中的冗余参数
- 优化船舶和船员证书数据的处理逻辑
- 添加多图片预览支持
- 修复图片 URL 格式化问题
- 优化页面样式，增加"暂无"状态显示

miniprogram/apis/apiConfig.js

@@ -3,7 +3,7 @@ let { envVersion } = v.miniProgram;
 // envVersion = "release";
 let apiUrl = `${
   envVersion == "release"
-    ? "https://interface.huihenduo.cc/hhd-ship/"
+    ? "https://interface.huihenduo.cc/hhd-ship"
     : "https://interface.huihenduo.cc/hhd-ship-new"
 }`;
 
@@ -16,6 +16,7 @@ function api(url, data, method) {
       dataType: "json",
       header: {
         "content-type": "application/json",
+        accessToken: wx.getStorageSync("accessToken"),
       },
       success: resolve,
       fail: reject,

miniprogram/pages/cert/cert.js

@@ -2,69 +2,114 @@
 import { postApi, getApi } from "../../apis/api";
 Page({
   data: {
-    shipName: "长江之星",
-    mmsi: "413123456",
-    shipCerts: [
-      {
-        name: "船舶检验证书",
-        photoUrl: "../../images/new-version/pic.png",
-        expireDate: "2024-12-31",
-      },
-      {
-        name: "船舶营运证",
-        photoUrl: "../../images/new-version/pic.png",
-        expireDate: "2024-06-30",
-      },
-    ],
-    crewCerts: [
-      {
-        name: "张三",
-        medicalReport: "../../images/new-version/pic.png",
-        serviceBook: "../../images/new-version/pic.png",
-        certificates: [
-          {
-            name: "船员适任证书",
-            photoUrl: "../../images/new-version/pic.png",
-            expireDate: "2024-12-31",
-          },
-          {
-            name: "特殊培训合格证",
-            photoUrl: "../../images/new-version/pic.png",
-            expireDate: "2024-09-30",
-          },
-        ],
-      },
-      {
-        name: "李四",
-        medicalReport: "../../images/new-version/pic.png",
-        serviceBook: "../../images/new-version/pic.png",
-        certificates: [
-          {
-            name: "船员适任证书",
-            photoUrl: "../../images/new-version/pic.png",
-            expireDate: "2024-11-30",
-          },
-        ],
-      },
-    ],
+    shipName: "",
+    mmsi: "",
+    shipCerts: [],
+    crewCerts: [],
     certs: [],
     contacts: [],
     introduce: {},
   },
   async getCerts() {
-    let { data } = await postApi("/ship/cert/list", {
-      userId: wx.getStorageSync("userId"),
-    });
+    let { data } = await getApi("/ship/cert/list");
+    console.log(data);
     if (data.status === 0) {
-      data.result.forEach((cert) => {
-        cert.endValidTime = cert.endValidTime.split(" ")[0];
+      // 处理船舶基本信息
+      const shipInfo = data.result;
+
+      // 处理船舶证书信息
+      const formattedShipCerts = shipInfo.shipCerts.map((cert) => {
+        // 获取第一个有效期（如果有多个，默认使用第一个）
+        const expireDate =
+          cert.certValidities && cert.certValidities.length > 0
+            ? cert.certValidities[0].endValidTime
+                .split(" ")[0]
+                .replace(/\//g, "-")
+            : "";
+
+        // 处理所有的certFileViewUrls，确保它们都被正确格式化
+        const formattedViewUrls =
+          cert.certFileViewUrls && cert.certFileViewUrls.length > 0
+            ? cert.certFileViewUrls.map((url) =>
+                url.trim().replace(/` /g, "").replace(/ `/g, "")
+              )
+            : ["暂无"];
+
+        return {
+          name: cert.certTypeName,
+          photoUrls: formattedViewUrls,
+          photoUrl: formattedViewUrls[0], // 保留单张图片的兼容性
+          expireDate: expireDate,
+        };
+      });
+
+      // 处理船员证书信息
+      const formattedCrewCerts = shipInfo.shipCrewCerts.map((crew) => {
+        // 处理船员的证书
+        const crewCertificates = crew.certs.map((cert) => {
+          // 处理所有的viewUrls，确保它们都被正确格式化
+          const formattedViewUrls =
+            cert.viewUrls && cert.viewUrls.length > 0
+              ? cert.viewUrls.map((url) =>
+                  url.trim().replace(/` /g, "").replace(/ `/g, "")
+                )
+              : ["暂无"];
+
+          return {
+            name: cert.docTypeName,
+            photoUrls: formattedViewUrls,
+            photoUrl: formattedViewUrls[0], // 保留单张图片的兼容性
+            expireDate: cert.expiryAt
+              ? cert.expiryAt.split(" ")[0].replace(/\//g, "-")
+              : "",
+          };
+        });
+
+        // 找到医疗报告和服务簿的URL
+        const medicalReportCert = crew.certs.find((cert) => cert.docType === 2);
+        const serviceBookCert = crew.certs.find((cert) => cert.docType === 3);
+
+        // 处理医疗报告的所有URL
+        const medicalReportUrls =
+          medicalReportCert &&
+          medicalReportCert.viewUrls &&
+          medicalReportCert.viewUrls.length > 0
+            ? medicalReportCert.viewUrls.map((url) =>
+                url.trim().replace(/` /g, "").replace(/ `/g, "")
+              )
+            : ["暂无"];
+
+        // 处理服务簿的所有URL
+        const serviceBookUrls =
+          serviceBookCert &&
+          serviceBookCert.viewUrls &&
+          serviceBookCert.viewUrls.length > 0
+            ? serviceBookCert.viewUrls.map((url) =>
+                url.trim().replace(/` /g, "").replace(/ `/g, "")
+              )
+            : ["暂无"];
+
+        return {
+          name: crew.fullName,
+          medicalReportUrls: medicalReportUrls,
+          medicalReport: medicalReportUrls[0], // 保留单张图片的兼容性
+          serviceBookUrls: serviceBookUrls,
+          serviceBook: serviceBookUrls[0], // 保留单张图片的兼容性
+          certificates: crewCertificates,
+        };
       });
 
       this.setData({
+        shipName: shipInfo.shipName,
+        mmsi: shipInfo.mmsi,
+        shipCerts: formattedShipCerts,
+        crewCerts: formattedCrewCerts,
         certs: data.result,
       });
     } else {
       this.setData({
+        shipCerts: [],
+        crewCerts: [],
         certs: [],
       });
       wx.showToast({
@@ -111,10 +156,32 @@ Page({
     });
   },
 
-  preview(e) {
-    wx.previewImage({
-      urls: [e.currentTarget.dataset.url],
-    });
+  previewImage(e) {
+    const url = e.currentTarget.dataset.url;
+    const urls = e.currentTarget.dataset.urls;
+
+    // 如果是暂无，则不预览
+    if (url === "暂无") {
+      return;
+    }
+
+    // 如果提供了多个URL，则使用它们
+    if (
+      urls &&
+      Array.isArray(JSON.parse(urls)) &&
+      JSON.parse(urls).length > 0
+    ) {
+      const urlsArray = JSON.parse(urls);
+      wx.previewImage({
+        current: url, // 当前显示的图片
+        urls: urlsArray,
+      });
+    } else {
+      // 兼容旧版本，只有单张图片
+      wx.previewImage({
+        urls: [url],
+      });
+    }
   },
   copy(e) {
     wx.setClipboardData({
@@ -129,8 +196,8 @@ Page({
 
   onLoad(options) {
     this.getCerts();
-    this.getContacts();
-    this.getIntroduce();
+    // this.getContacts();
+    // this.getIntroduce();
   },
   onShow() {
     if (typeof this.getTabBar === "function" && this.getTabBar()) {

miniprogram/pages/cert/cert.wxml

@@ -1,6 +1,5 @@
 <view class="container">
   <!-- 顶部标题 -->
-
   <!-- 内容区域 -->
   <view class="content">
     <!-- 船舶基础信息 -->
@@ -24,7 +23,12 @@
         <view class="cert-list">
           <view class="cert-item" wx:for="{{shipCerts}}" wx:key="index">
             <view class="cert-title">{{item.name}}</view>
-            <image class="cert-photo pt30 pb30" mode="aspectFit" src="{{item.photoUrl}}" bindtap="previewImage" data-url="{{item.photoUrl}}"></image>
+            <block wx:if="{{item.photoUrl === '暂无'}}">
+              <view class="cert-photo pt30 pb30 no-image">暂无</view>
+            </block>
+            <block wx:else>
+              <image class="cert-photo pt30 pb30" mode="aspectFit" src="{{item.photoUrl}}" bindtap="previewImage" data-url="{{item.photoUrl}}" data-urls="{{JSON.stringify(item.photoUrls)}}"></image>
+            </block>
             <view class="cert-expire">
               <text class="expire-label">有效期至：</text>
               <text class="expire-date">{{item.expireDate}}</text>
@@ -43,12 +47,22 @@
             <!-- 体检报告 -->
             <view class="cert-section">
               <view class="section-title">体检报告</view>
-              <image class="cert-photo pt30 pb30" mode="aspectFit" src="{{item.medicalReport}}" bindtap="previewImage" data-url="{{item.medicalReport}}"></image>
+              <block wx:if="{{item.medicalReport === '暂无'}}">
+                <view class="cert-photo pt30 pb30 no-image">暂无</view>
+              </block>
+              <block wx:else>
+                <image class="cert-photo pt30 pb30" mode="aspectFit" src="{{item.medicalReport}}" bindtap="previewImage" data-url="{{item.medicalReport}}" data-urls="{{JSON.stringify(item.medicalReportUrls)}}"></image>
+              </block>
             </view>
             <!-- 服务簿 -->
             <view class="cert-section">
               <view class="section-title">服务簿</view>
-              <image class="cert-photo pt30 pb30" mode="aspectFit" src="{{item.serviceBook}}" bindtap="previewImage" data-url="{{item.serviceBook}}"></image>
+              <block wx:if="{{item.serviceBook === '暂无'}}">
+                <view class="cert-photo pt30 pb30 no-image">暂无</view>
+              </block>
+              <block wx:else>
+                <image class="cert-photo pt30 pb30" mode="aspectFit" src="{{item.serviceBook}}" bindtap="previewImage" data-url="{{item.serviceBook}}" data-urls="{{JSON.stringify(item.serviceBookUrls)}}"></image>
+              </block>
             </view>
             <!-- 证书列表 -->
             <view class="cert-section">
@@ -56,7 +70,12 @@
               <view class="cert-list">
                 <view class="cert-item" wx:for="{{item.certificates}}" wx:for-item="cert" wx:key="index">
                   <view class="cert-title">{{cert.name}}</view>
-                  <image class="cert-photo pt30 pb30" mode="aspectFit" src="{{cert.photoUrl}}" bindtap="previewImage" data-url="{{cert.photoUrl}}"></image>
+                  <block wx:if="{{cert.photoUrl === '暂无'}}">
+                    <view class="cert-photo pt30 pb30 no-image">暂无</view>
+                  </block>
+                  <block wx:else>
+                    <image class="cert-photo pt30 pb30" mode="aspectFit" src="{{cert.photoUrl}}" bindtap="previewImage" data-url="{{cert.photoUrl}}" data-urls="{{JSON.stringify(cert.photoUrls)}}"></image>
+                  </block>
                   <view class="cert-expire">
                     <text class="expire-label">有效期至：</text>
                     <text class="expire-date">{{cert.expireDate}}</text>

miniprogram/pages/cert/cert.wxss

@@ -86,6 +86,14 @@
   background-color: #eee;
 }
 
+.no-image {
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  color: #999;
+  font-size: 28rpx;
+}
+
 .cert-expire {
   display: flex;
   align-items: center;

miniprogram/pages/index/index.js

@@ -10,18 +10,19 @@ Page({
 
   async login() {
     if (!wx.getStorageSync("openId")) return;
-    let res1 = await postApi("/user/wx/openId/login", {
+    let { data } = await postApi("/login/openid", {
       openId: wx.getStorageSync("openId"),
     });
 
-    if (res1.data.status == 0) {
-      let data = {
-        ...res1.data.result.userInfo,
-        ...res1.data.result.shipInfo,
+    if (data.status == 0) {
+      let obj = {
+        ...data.result.userInfo,
+        ...data.result.shipInfo,
       };
       Object.keys(data).forEach(function (key) {
         wx.setStorageSync(key, data[key]);
       });
+      wx.setStorageSync("accessToken", data.result.tokenInfo.tokenValue);
     }
 
     wx.switchTab({

miniprogram/utils/wxUtils.js

@@ -8,7 +8,7 @@ function wxSetSessionKey() {
         let { data } = await postApi("/wx/getOpenId", {
           code: res.code,
         });
-        let { result: openId } = data;
+        let { openId } = data.result;
         wx.setStorageSync("openId", openId);
         resolve({
           openId,

project.private.config.json

@@ -2,6 +2,13 @@
   "condition": {
     "miniprogram": {
       "list": [
+        {
+          "name": "pages/cert/cert",
+          "pathName": "pages/cert/cert",
+          "query": "",
+          "launchMode": "default",
+          "scene": null
+        },
         {
           "name": "pages/legal/submitLegal/submitLegal",
           "pathName": "pages/legal/submitLegal/submitLegal",