fix(tools): 修复时间格式化函数处理时区的问题

重构 formatDatetime 函数，增加对时区后缀的处理，确保时间显示为当地时间统一使用 dayjs 进行时间格式化，提高代码可维护性

fix(tools): 修复时间格式化函数处理时区的问题
重构 formatDatetime 函数，增加对时区后缀的处理，确保时间显示为当地时间统一使用 dayjs 进行时间格式化，提高代码可维护性
hookehuyr
Commit 3cd70e182c45d75b9a396e2605e760cb778bd7be 3cd70e18 1 parent 0597f96c
Showing 2 changed files with 74 additions and 49 deletions
src/pages/submit/index.vue
src/utils/tools.js
--- a/src/pages/submit/index.vue
View file @3cd70e1
+++ b/src/pages/submit/index.vue
View file @3cd70e1
 <!--
  * @Date: 2024-01-15 16:25:51
  * @LastEditors: hookehuyr hookehuyr@gmail.com
- * @LastEditTime: 2026-01-12 22:23:03
+ * @LastEditTime: 2026-01-16 15:12:09
  * @FilePath: /xyxBooking-weapp/src/pages/submit/index.vue
  * @Description: 预约人员信息
 -->
 <template>
-    <view class="submit-page">
+  <view class="submit-page">
-      <view @tap="goToBooking" class="visit-time">
+    <view @tap="goToBooking" class="visit-time">
-        <view>参访时间</view>
+      <view>参访时间</view>
-      <view><text style="font-size: 30rpx;">{{ date }} {{ time }}</text>&nbsp;<IconFont name="rect-right" /></view>
+      <view class="flex items-center">
+        <text style="font-size: 30rpx;">{{ date }} {{ time }}</text>
+        <IconFont name="rect-right" class="ml-1" />
       </view>
-      <view @tap="goToVisitor" class="add-visitors">
+    </view>
-      <view><IconFont name="plus" /> 添加参观者</view>
+    <view @tap="goToVisitor" class="add-visitors">
+      <view>
+        <IconFont name="plus" /> 添加参观者
       </view>
-      <view v-if="visitorList.length" class="visitors-list">
+    </view>
-        <view v-for="(item, index) in visitorList" :key="index" @tap="addVisitor(item)" class="visitor-item">
+    <view v-if="visitorList.length" class="visitors-list">
+      <view v-for="(item, index) in visitorList" :key="index" @tap="addVisitor(item)" class="visitor-item">
         <view style="margin-right: 32rpx;">
           <image v-if="!checked_visitors.includes(item.id)" :src="icon_check1" style="width: 38rpx; height: 38rpx;" />
           <image v-else :src="icon_check2" style="width: 38rpx; height: 38rpx;" />
@@ -23,12 +28,14 @@
         <view>
           <view style="color: #A67939;">{{ item.name }}</view>
           <view>证件号：{{ formatId(item.id_number) }}</view>
-          <view v-if="item.is_reserve === RESERVE_STATUS.ENABLE" style="color: #9C9A9A; font-size: 26rpx;">*已预约过{{ date }}参观，请不要重复预约</view>
+          <view v-if="item.is_reserve === RESERVE_STATUS.ENABLE" style="color: #9C9A9A; font-size: 26rpx;">*已预约过{{ date
+            }}参观，请不要重复预约</view>
         </view>
       </view>
     </view>
     <view v-else class="no-visitors-list">
-      <image src="https://cdn.ipadbiz.cn/xys/booking/%E6%9A%82%E6%97%A0@2x.png" style="width: 320rpx; height: 320rpx;" />
+      <image src="https://cdn.ipadbiz.cn/xys/booking/%E6%9A%82%E6%97%A0@2x.png"
+        style="width: 320rpx; height: 320rpx;" />
       <view class="no-visitors-list-title">您还没有添加过参观者</view>
     </view>
     <view style="height: 160rpx;"></view>
@@ -36,7 +43,9 @@
       <view class="control-wrapper">
         <view class="left">
           <view style="margin-left: 32rpx; display: flex;align-items: center;">
-            订单金额&nbsp;&nbsp;<view style="color: #FF1919;display: inline-block;">¥<view style="font-size: 48rpx;display: inline-block;">&nbsp;{{ total }}</view></view>
+            订单金额&nbsp;&nbsp;<view style="color: #FF1919;display: inline-block;">¥<view
+                style="font-size: 48rpx;display: inline-block;">&nbsp;{{ total }}</view>
+            </view>
           </view>
         </view>
         <view @tap="submitBtn" class="right">提交订单</view>
@@ -127,10 +136,10 @@ const submitBtn = async () => {
   if (!pay_id) { // TAG: 提交订单, 如果没有待支付订单ID, 则创建一个新的订单
     Taro.showLoading({ title: '提交中...' });
     const { code, data, msg } = await addReserveAPI({
-        reserve_date: date.value,
+      reserve_date: date.value,
-        begin_time: time.value.split('-')[0],
+      begin_time: time.value.split('-')[0],
-        end_time: time.value.split('-')[1],
+      end_time: time.value.split('-')[1],
-        person_id_list: JSON.stringify(checked_visitors.value)
+      person_id_list: JSON.stringify(checked_visitors.value)
     });
     Taro.hideLoading();
@@ -150,25 +159,25 @@ const submitBtn = async () => {
     Taro.hideLoading();
     if (payParams.code) {
-        let pay_params = payParams.data;
+      let pay_params = payParams.data;
-        Taro.requestPayment({
+      Taro.requestPayment({
-            timeStamp: pay_params.timeStamp,
+        timeStamp: pay_params.timeStamp,
-            nonceStr: pay_params.nonceStr,
+        nonceStr: pay_params.nonceStr,
-            package: pay_params.package,
+        package: pay_params.package,
-            signType: pay_params.signType,
+        signType: pay_params.signType,
-            paySign: pay_params.paySign,
+        paySign: pay_params.paySign,
-            success (res) {
+        success(res) {
-                go('/success', { pay_id });
+          go('/success', { pay_id });
-            },
+        },
-            fail (res) {
+        fail(res) {
-                // 支付取消或失败，保留 pending_pay_id，允许用户再次点击按钮尝试支付同一订单
+          // 支付取消或失败，保留 pending_pay_id，允许用户再次点击按钮尝试支付同一订单
-                // 只有当 wxPayAPI 获取支付参数失败时（如下面的 else 分支），才重置 ID 以便重新创建订单
+          // 只有当 wxPayAPI 获取支付参数失败时（如下面的 else 分支），才重置 ID 以便重新创建订单
-                Taro.showToast({ title: '支付失败，请重试', icon: 'none' });
+          Taro.showToast({ title: '支付失败，请重试', icon: 'none' });
-            }
+        }
-        })
+      })
     } else {
-        pending_pay_id.value = null; // 支付参数获取失败，重置订单ID
+      pending_pay_id.value = null; // 支付参数获取失败，重置订单ID
-        Taro.showToast({ title: payParams.msg || '获取支付信息失败', icon: 'none' });
+      Taro.showToast({ title: payParams.msg || '获取支付信息失败', icon: 'none' });
     }
   } else {
     // 金额等于零, 直接跳转成功页
@@ -183,10 +192,10 @@ useDidShow(async () => {
   price.value = params.price || 0;
   if (date.value && time.value) {
-      const { code, data } = await personListAPI({ reserve_date: date.value, begin_time: time.value.split('-')[0], end_time: time.value.split('-')[1] });
+    const { code, data } = await personListAPI({ reserve_date: date.value, begin_time: time.value.split('-')[0], end_time: time.value.split('-')[1] });
-      if (code) {
+    if (code) {
-        visitorList.value = data || [];
+      visitorList.value = data || [];
-      }
+    }
   }
 });
 </script>
@@ -195,6 +204,7 @@ useDidShow(async () => {
 .submit-page {
   margin: 32rpx;
   position: relative;
+
   .visit-time {
     background-color: #FFF;
     display: flex;
@@ -203,6 +213,7 @@ useDidShow(async () => {
     padding: 24rpx;
     border-radius: 16rpx;
   }
+
   .add-visitors {
     border: 2rpx dashed #A67939;
     color: #A67939;
@@ -212,6 +223,7 @@ useDidShow(async () => {
     margin: 32rpx 0;
     font-size: 37rpx;
   }
+
   .visitors-list {
     .visitor-item {
       background-color: #FFF;
@@ -222,21 +234,25 @@ useDidShow(async () => {
       align-items: center;
     }
   }
+
   .no-visitors-list {
     display: flex;
     justify-content: center;
     align-items: center;
     flex-direction: column;
+
     img {
       margin-top: 32rpx;
       margin-bottom: 32rpx;
       width: 320rpx;
     }
+
     .no-visitors-list-title {
       color: #A67939;
       font-size: 34rpx;
     }
   }
+
   .submit-wrapper {
     position: fixed;
     bottom: 0;
@@ -247,19 +263,21 @@ useDidShow(async () => {
     // padding: 32rpx;
     justify-content: space-between;
     flex-direction: column;
-    box-shadow: 0 -10rpx 8rpx 0 rgba(0,0,0,0.12);
+    box-shadow: 0 -10rpx 8rpx 0 rgba(0, 0, 0, 0.12);
     .control-wrapper {
       display: flex;
       justify-content: space-between;
       align-items: center;
     }
+
     .left {
       display: flex;
       justify-content: center;
       align-items: center;
       flex-wrap: nowrap;
     }
+
     .right {
       background-color: #A67939;
       color: #FFF;
--- a/src/utils/tools.js
View file @3cd70e1
+++ b/src/utils/tools.js
View file @3cd70e1
@@ -87,20 +87,27 @@ const strExist = (array, str) => {
  */
 const formatDatetime = (data) => {
   // 格式化日期
-  if (!data) return '';
+  if (!data || !data.begin_time || !data.end_time) return '';
-  // 截取时间字符串最后6位（去除毫秒/时区等冗余部分）
+  // 预处理函数：移除时区后缀，统一格式为 ISO 8601 (YYYY-MM-DDTHH:mm:ss)
-  const begin_time = data?.begin_time?.slice(0, -6) || '';
+  // 这样做是为了让 dayjs 把它当作本地时间处理，避免时区转换导致的时间偏差（始终显示景点当地时间/字面时间）
-  const end_time = data?.end_time?.slice(0, -6) || '';
+  const normalize = (timeStr) => {
+    if (!timeStr) return '';
+    // 移除 +08, +08:00 等时区后缀
+    let clean = timeStr.split('+')[0];
+    // 移除 Z 后缀
+    clean = clean.split('Z')[0];
+    // 将空格替换为 T，确保兼容性
+    clean = clean.trim().replace(/\s+/, 'T');
+    return clean;
+  };
-  // 拆分时间片段并拼接目标格式：日期 开始时间-结束时间
+  const start = dayjs(normalize(data.begin_time));
-  const [date, beginTime] = begin_time.split('T');
+  const end = dayjs(normalize(data.end_time));
-  const [, endTime] = end_time.split('T');
-  // 兼容时间拆分失败的情况，避免返回 NaN/-undefined 等异常
+  if (!start.isValid() || !end.isValid()) return '';
-  if (!date || !beginTime || !endTime) return '';
-  return `${date} ${beginTime}-${endTime}`;
+  return `${start.format('YYYY-MM-DD')} ${start.format('HH:mm')}-${end.format('HH:mm')}`;
 };
 export { formatDate, wxInfo, parseQueryString, strExist, formatDatetime };