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="record-header">
            <view class="time-box">
              <u-icon name="clock" size="32" color="#999" />
              <text class="record-time">{{ item.date }}</text>
            </view>
            <text
              :class="['record-status', item.status]"
            >
              {{ statusText(item.status) }}
            </text>
          </view>

          <!-- 内容部分 -->
          <view class="record-body">
            <!-- 资产名称 -->
            <view class="info-line">
              <text class="info-text">资产名称：{{ item.assetName }}</text>
            </view>

            <!-- 资产地址 + 查看位置按钮 -->
            <view class="info-line">
              <text class="info-text">地址：{{ item.assetAddress }}</text>
              <u-button
                class="map-btn"
                size="mini"
                type="primary"
                @click="viewLocation(item)"
				icon="map"
              >
			  查看位置
			  </u-button>
            </view>

            <!-- 管家信息 + 拨号按钮 -->
            <view class="info-line">
              <text class="info-text">
                管家：{{ item.managerName }}（{{ item.managerPhone }}）
              </text>
              <u-button
                class="call-btn"
                size="mini"
                type="success"
				icon="phone"
                @click="callManager(item.managerPhone)"
              >
			  拨打电话
			  </u-button>
            </view>
          </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 '未知';
      }
    },
    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: #f8f8f8;
  min-height: 100vh;
  padding-top: 175rpx; /* 给导航栏留空间 */
}

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

.record-list {
  padding: 20rpx;
}

.record-card {
  background: #fff;
  border-radius: 16rpx;
  padding: 24rpx;
  margin-bottom: 20rpx;
  box-shadow: 0 4rpx 8rpx rgba(0, 0, 0, 0.05);
}

.record-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 16rpx;

  .time-box {
    display: flex;
    align-items: center;
    gap: 8rpx;
  }

  .record-time {
    font-size: 28rpx;
    color: #666;
  }

  .record-status {
    font-size: 26rpx;
    padding: 4rpx 14rpx;
    border-radius: 24rpx;
    &.done {
      background: #e8f5e9;
      color: #4caf50;
    }
    &.pending {
      background: #fffbe6;
      color: #ff9800;
    }
  }
}

.record-body {
  display: flex;
  flex-direction: column;
  gap: 16rpx;

  .info-line {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10rpx;
    font-size: 28rpx;
    color: #333;

    .info-text {
      flex: 1;
      line-height: 1.6;
    }

    u-icon {
      flex-shrink: 0;
    }

    u-button {
      flex-shrink: 0;
      margin-left: 10rpx;
    }
  }
}

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