RentWeAppFront/pages-biz/reserve/reserveRecords.vue

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

    <!-- 顶部导航栏 -->
     <customNavbar title="我的预约" :is-transparent="navbarStyle.isTransparent" :bg-color="navbarStyle.bgColor"
			:text-color="navbarStyle.textColor" :opacity="navbarStyle.opacity" 
			:show-home="true" />
    <!-- 内容部分 -->
    <scroll-view
      scroll-y
      class="scroll-content"
      @scrolltolower="loadMore"
      @refresherrefresh="refresh"
      :refresher-enabled="true"
      :refresher-triggered="isRefreshing"
    >
      <view v-if="flowList.length > 0" class="record-list">
        <view
          v-for="item in flowList"
          :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 {
	  pageNo: 1,
	  pageSize:10,
	  flowList: [],
      loadStatus: 'loadmore',
      isRefreshing: false
    }
  },
  onLoad(options){
	this.fetchReserve()
  },
  onShow() {
  	this.$checkToken(this.$getToken())
  },
  methods: {
    statusText(status) {
      switch (status) {
        case 'pending':
          return '待确认';
        case 'done':
          return '已完成';
        default:
          return '未知';
      }
    },
    formatDate(dateStr) {
      // 格式化日期，例如：2025-11-10 周五 09:00
	  if(!dateStr){return '-'}
      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}`;
    },
	fetchReserve(){
		if (this.loadStatus !== 'loadmore') return;
		   this.loadStatus = 'loading';
		let url = '/reservate/queryPage'
		this.$u.post(url, {
			pageNo: this.pageNo,
			pageSize: this.pageSize
		},{
			WT: this.$getToken()
		}).then(res => {
			const rows = res.data.result || [];
			console.log(rows)
			if (this.pageNo === 1) this.flowList = [];
			this.flowList = this.flowList.concat(rows);
			if (rows.length < this.pageSize) {
			  this.loadStatus = 'nomore';
			} else {
			  this.pageNo++;
			  this.loadStatus = 'loadmore';
			}
		}).catch(err => {
			console.log("获取预约记录失败：", err)
			this.loadStatus = 'loadmore';
		})
	},
    viewLocation(item) {
      uni.openLocation({
        latitude: item.lat,
        longitude: item.lng,
        name: item.assetName,
        address: item.assetAddress
      });
    },
    callManager(phone) {
      if (!phone) {
		  uni.showToast({
		  	title: '暂无管家联系方式',
		  	icon: 'none'
		  });
		  return;
	  }
      uni.makePhoneCall({ phoneNumber: phone });
    },
    loadMore() {
      this.fetchReserve()
    },
    refresh() {
      this.isRefreshing = true;
      setTimeout(() => {
        this.isRefreshing = false;
      }, 1000);
    }
  }
};
</script>

<style lang="scss" scoped>
.reserve-records {
  min-height: 100vh;
  padding-top: 175rpx; /* 给导航栏留空间 */
  background: linear-gradient(0deg, #F3F1ED 43%, #F5E9DB 100%);
}

.scroll-content {
  height: calc(100vh - -120rpx - 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>