Browse Source

feat(shipyard): 重构船厂页面,支持船厂列表展示

- 从单个船厂信息改为船厂列表展示
- 添加船厂信息获取接口调用
- 优化船厂信息展示布局
- 增加拨打电话功能和分享功能
- 调整样式,优化用户体验
wzg 8 months ago
parent
commit
3e2d403bab

+ 56 - 22
miniprogram/pages/shipyard/shipyard.js

@@ -1,25 +1,35 @@
 // pages/shipyard/shipyard.js
+import { postApi } from "../../apis/api";
 Page({
   /**
    * 页面的初始数据
    */
   data: {
-    shipyard: {
-      name: "江阴新时代船厂",
-      address: "江苏省江阴市长江路88号",
-      photoUrl: "../../images/new-version/pic.png",
-      introduction:
-        "江阴新时代船厂成立于1995年,是一家专业从事船舶建造、维修和拆解的现代化船厂。我们拥有先进的船坞设施和专业的技术团队,致力于为客户提供高质量的船舶服务。多年来,我们已成功建造和维修数百艘各类船舶,在业内享有良好声誉。",
-      dockCount: "5",
-      annualCapacity: "50艘",
-      contactPhone: "13912345678",
-    },
+    shipyardList: [
+      {
+        id: 3,
+        shipyardName: "测试船厂",
+        shipyardImgFileKey:
+          "new/shipyard/895a0951-c84e-41c3-990a-948271c926891746495962026.png",
+        shipyardImageUrl:
+          "https://hhd-shipping-1255802371.cos.ap-shanghai.myqcloud.com/new/shipyard/895a0951-c84e-41c3-990a-948271c926891746495962026.png?sign=q-sign-algorithm%3Dsha1%26q-ak%3DAKID4xb091cy4tRikV0EBrGOGsCF1WkhMlum%26q-sign-time%3D1746495978%3B93158697600%26q-key-time%3D1746495978%3B93158697600%26q-header-list%3Dhost%26q-url-param-list%3D%26q-signature%3D3523ba70be8a436daab400f5c865c0cf4a49fe5a",
+        shipyardAddress: "张家港",
+        shipyardIntroduce: "测试测试",
+        shipyardDockNum: 2,
+        shipyardAnnualProdCapacity: 2,
+        contactName: "测试人",
+        contactPhone: "122222222222",
+        createTime: "2025/05/06 09:46:18",
+      },
+    ],
   },
 
   /**
    * 生命周期函数--监听页面加载
    */
-  onLoad(options) {},
+  onLoad(options) {
+    this.getShipyardList();
+  },
 
   /**
    * 生命周期函数--监听页面初次渲染完成
@@ -60,22 +70,46 @@ Page({
   /**
    * 用户点击右上角分享
    */
-  onShareAppMessage() {
+  onShareAppMessage(e) {
+    const title = e.target ? e.target.dataset.title : "船厂服务";
     return {
-      title: this.data.shipyard.name,
+      title: title,
       path: "/pages/shipyard/shipyard",
     };
   },
 
-  makePhoneCall() {
-    wx.makePhoneCall({
-      phoneNumber: this.data.shipyard.contactPhone,
-      fail(err) {
-        wx.showToast({
-          title: "拨打电话失败",
-          icon: "none",
-        });
-      },
+  makePhoneCall(e) {
+    const phoneNumber = e.currentTarget.dataset.phone;
+    if (phoneNumber) {
+      wx.makePhoneCall({
+        phoneNumber: phoneNumber,
+        fail(err) {
+          wx.showToast({
+            title: "拨打电话失败",
+            icon: "none",
+          });
+        },
+      });
+    } else {
+      wx.showToast({
+        title: "电话号码不存在",
+        icon: "none",
+      });
+    }
+  },
+  async getShipyardList() {
+    let { data } = await postApi("/shipyard/info", {
+      currentPage: 1,
+      size: 1000,
     });
+    if (data.status === 0) {
+      this.setData({
+        shipyardList: data.result,
+      });
+    } else {
+      this.setData({
+        shipyardList: [],
+      });
+    }
   },
 });

+ 15 - 16
miniprogram/pages/shipyard/shipyard.wxml

@@ -3,47 +3,46 @@
   <!-- <view class="header">船厂服务</view> -->
   <!-- 内容区域 -->
   <view class="content">
-    <!-- 船厂基本信息 -->
-    <view class="card">
-      <view class="card-header">{{shipyard.name}}</view>
+    <view class="card" wx:for="{{shipyardList}}" wx:key="id">
+      <!-- 船厂基本信息 -->
+      <view class="card-header">{{item.shipyardName}}</view>
       <view class="card-content">
         <view class="shipyard-info">
-          <image class="shipyard-photo" mode="aspectFill" src="{{shipyard.photoUrl}}"></image>
+          <image class="shipyard-photo" mode="aspectFill" src="{{item.shipyardImageUrl}}"></image>
           <view class="info-item">
             <text class="label">地址:</text>
-            <text class="value">{{shipyard.address}}</text>
+            <text class="value">{{item.shipyardAddress}}</text>
           </view>
           <view class="info-item">
-            <text class="intro-text">{{shipyard.introduction}}</text>
+            <text class="intro-text">{{item.shipyardIntroduce}}</text>
           </view>
         </view>
       </view>
-    </view>
-    <!-- 运营数据 -->
-    <view class="card">
+      <!-- 运营数据 -->
       <view class="card-header">运营数据</view>
       <view class="card-content">
         <view class="operation-data">
           <view class="data-item">
-            <text class="data-value">{{shipyard.dockCount}}</text>
+            <text class="data-value">{{item.shipyardDockNum}}</text>
             <text class="data-label">船坞数量</text>
           </view>
           <view class="data-item">
-            <text class="data-value">{{shipyard.annualCapacity}}</text>
+            <text class="data-value">{{item.shipyardAnnualProdCapacity}}</text>
             <text class="data-label">年产能</text>
           </view>
         </view>
       </view>
-    </view>
-    <!-- 联系方式 -->
-    <view class="card">
+      <!-- 联系方式 -->
       <view class="card-header">联系方式</view>
       <view class="card-content">
         <view class="contact-info">
-          <text class="contact-text">拆船、造船、补贴申请请联系朱经理</text>
-          <button class="contact-btn" bindtap="makePhoneCall">拨打电话</button>
+          <text class="contact-text">拆船、造船、补贴申请请联系{{item.contactName}}</text>
+          <button class="contact-btn" bindtap="makePhoneCall" data-phone="{{item.contactPhone}}" data-id="{{item.id}}">
+            拨打电话
+          </button>
         </view>
       </view>
+      <button class="share-btn" open-type="share" data-title="{{item.shipyardName}}">分享船厂</button>
     </view>
   </view>
 </view>

+ 11 - 0
miniprogram/pages/shipyard/shipyard.wxss

@@ -28,6 +28,7 @@
   font-weight: bold;
   color: #333;
   padding: 20rpx;
+  padding-left: 30rpx;
   border-bottom: 2rpx solid #f0f0f0;
 }
 
@@ -97,6 +98,16 @@
   text-align: center;
 }
 
+.share-btn {
+  width: 90%;
+  margin: 20rpx auto;
+  background-color: #f8f8f8;
+  color: #333;
+  border: 1rpx solid #ddd;
+  border-radius: 8rpx;
+  font-size: 28rpx;
+}
+
 .contact-text {
   font-size: 28rpx;
   color: #333;

+ 7 - 0
project.private.config.json

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