RentWeAppFront/pages/reserve/reserveRecords.vue

<template>
  <view class="reserve-records">

    <!-- 顶部导航栏 -->
     <customNavbar title="我的预约"/>
    <!-- 内容部分 -->
    <scroll-view
      scroll-y
      class="scroll-content"
      @scrolltolower="loadMore"
      @refresherrefresh="refresh"
      :refresher-enabled="true"
      :refresher-triggered="isRefreshing"
    >
      <view v-if="records.length > 0" class="record-list">
        <view
          v-for="item in records"
          :key="item.id"
          class="record-card"
        >
          <!-- 资产名称和状态 -->
          <view class="card-header">
            <text class="asset-name">{{ item.assetName }}</text>
            <text
              :class="['record-status', item.status]"
            >
              {{ statusText(item.status) }}
            </text>
          </view>

          <!-- 内容部分 -->
          <view class="card-content">
            <!-- 预约时间 -->
            <view class="info-item">
              <text class="info-label">预约时间：</text>
              <text class="info-value">{{ formatDate(item.date) }}</text>
            </view>

            <!-- 地址 -->
            <view class="info-item">
              <text class="info-label">地址：</text>
              <text class="info-value">{{ item.assetAddress }}</text>
            </view>

            <!-- 管家 -->
            <view class="info-item">
              <text class="info-label">管家：</text>
              <text class="info-value">{{ item.managerName }}（{{ item.managerPhone }}）</text>
            </view>
          </view>

          <!-- 操作按钮 -->
          <view class="action-buttons">
            <button
              class="location-btn"
              @click="viewLocation(item)"
            >
              查看位置
            </button>
            <button
              class="call-btn"
              @click="callManager(item.managerPhone)"
            >
              拨打电话
            </button>
          </view>
        </view>

        <u-loadmore :status="loadStatus" />
      </view>

      <view v-else class="empty">
        <u-empty mode="list" text="暂无预约记录" />
      </view>
    </scroll-view>
  </view>
</template>

<script>
export default {
  data() {
    return {
      records: [
        {
          id: 1,
          date: '2025-11-10 09:00',
          status: 'pending',
          assetName: '天河公寓A栋301',
          assetAddress: '广州市天河区体育东路88号',
          managerName: '张管家',
          managerPhone: '13800138000',
          lat: 23.129,
          lng: 113.264
        },
        {
          id: 2,
          date: '2025-11-09 14:00',
          status: 'done',
          assetName: '越秀中心B座',
          assetAddress: '广州市越秀区中山五路12号',
          managerName: '李经理',
          managerPhone: '13688886666',
          lat: 23.133,
          lng: 113.278
        }
      ],
      loadStatus: 'loadmore',
      isRefreshing: false
    };
  },
  methods: {
    statusText(status) {
      switch (status) {
        case 'pending':
          return '待确认';
        case 'done':
          return '已完成';
        default:
          return '未知';
      }
    },
    formatDate(dateStr) {
      // 格式化日期，例如：2025-11-10 周五 09:00
      const date = new Date(dateStr);
      const weekdays = ['周日', '周一', '周二', '周三', '周四', '周五', '周六'];
      const year = date.getFullYear();
      const month = String(date.getMonth() + 1).padStart(2, '0');
      const day = String(date.getDate()).padStart(2, '0');
      const weekday = weekdays[date.getDay()];
      const hours = String(date.getHours()).padStart(2, '0');
      const minutes = String(date.getMinutes()).padStart(2, '0');
      
      return `${year}-${month}-${day} ${weekday} ${hours}:${minutes}`;
    },
    viewLocation(item) {
      uni.openLocation({
        latitude: item.lat,
        longitude: item.lng,
        name: item.assetName,
        address: item.assetAddress
      });
    },
    callManager(phone) {
      if (!phone) return;
      uni.makePhoneCall({ phoneNumber: phone });
    },
    loadMore() {
      this.loadStatus = 'loading';
      setTimeout(() => {
        this.loadStatus = 'nomore';
      }, 1000);
    },
    refresh() {
      this.isRefreshing = true;
      setTimeout(() => {
        this.isRefreshing = false;
      }, 1000);
    }
  }
};
</script>

<style lang="scss" scoped>
.reserve-records {
  background: #f5f5f5;
  min-height: 100vh;
  padding-top: 120rpx; /* 给导航栏留空间 */
}

.scroll-content {
  height: calc(100vh - 120rpx);
}

.record-list {
  padding: 30rpx 40rpx;
}

.record-card {
  background: #fff;
  border-radius: 12rpx;
  padding: 32rpx;
  margin-bottom: 30rpx;
  box-shadow: 0 2rpx 12rpx rgba(0, 0, 0, 0.05);
}

.card-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 24rpx;
}

.asset-name {
  font-size: 32rpx;
  font-weight: 500;
  color: #2D2B2C;
}

.record-status {
  font-size: 26rpx;
  padding: 10rpx 15rpx;
  border-radius: 4rpx;
  &.done {
    background: #FCE5E0;
    color: #ED7748;
  }
  &.pending {
    background: #F2F3F7;
    color: #86868C;
  }
}

.card-content {
  margin-bottom: 32rpx;
}

.info-item {
  display: flex;
  align-items: flex-start;
}

.info-item:last-child {
  margin-bottom: 0;
}

.info-label {
  font-size: 24rpx;
  color: #666;
  width: 120rpx;
  flex-shrink: 0;
  line-height: 44rpx;
}

.info-value {
  font-size: 24rpx;
  color: #333;
  flex: 1;
  line-height: 44rpx;
}

.action-buttons {
  display: flex;
  justify-content: flex-end;
  gap: 20rpx;
  margin-top: 32rpx;
  padding-top: 32rpx;
  border-top: 1rpx solid #f0f0f0;
}

.location-btn {
  width: 220rpx;
  height: 72rpx;
  background: #fff;
  color: #2D2B2C;
  font-size: 28rpx;
  border-radius: 8rpx;
  display: flex;
  align-items: center;
  justify-content: center;
  box-sizing: border-box;
  border: 1px solid #222222;
}

.call-btn {
  width: 220rpx;
  height: 72rpx;
  background: #ff3b30;
  color: #fff;
  font-size: 28rpx;
  border-radius: 8rpx;
  display: flex;
  align-items: center;
  justify-content: center;
  box-sizing: border-box;
  border: none;
}

.empty {
  margin-top: 200rpx;
}
</style>