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="reserve-time">{{ formatDate(item.date) }} 看房</text>
            <text :class="['record-status', item.status]">
              {{ statusText(item.status) }}
            </text>
          </view>

          <!-- 分割线 -->
          <view class="card-divider"></view>

          <!-- 内容区：左图右信息 -->
          <view class="card-body">
            <image class="cover-img" :src="staticHost + (item.coverImg || '/public/static/index/assets.jpg')" mode="aspectFill"></image>
            <view class="card-info">
              <text class="asset-name">{{ item.assetName }}</text>
              <view class="info-row">
                <u-icon name="map" size="26" color="#999"></u-icon>
                <text class="info-text">{{ item.assetAddress }}</text>
              </view>
              <view class="info-row">
                <u-icon name="account" size="26" color="#999"></u-icon>
                <text class="info-text">{{ item.managerName || '未知' }}（{{ item.managerPhone || '未知' }}）</text>
              </view>
            </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: 'more', // ✅ 修复为官方正确值
      isRefreshing: false,
      navbarStyle: {
        isTransparent: false,
        bgColor: '#fff',
        textColor: '#2D2B2C',
        opacity: 1
      }
    }
  },
  onLoad(options){
	// fetchReserve 移到 onShow 中，等 token 校验通过后再加载
  },
  async onShow() {
  	try {
  		// await this.$checkToken(this.$getToken())
  		this.fetchReserve()
  	} catch (e) {
  		return
  	}
  },
  // ✅ 删除 scroll-view 冲突的 onReachBottom
  computed: {
    staticHost() {
      return this.$config.staticUrl
    }
  },
  methods: {
    statusText(status) {
      switch (status) {
        case 'pending':
          return '待确认';
        case 'done':
          return '已完成';
        default:
          return '未知';
      }
    },
    formatDate(dateStr) {
	  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 !== 'more') return;
		this.loadStatus = 'loading';

		// TODO: 接口联调时取消注释，删除 mock 数据
		// let url = '/reservate/queryPage'
		// this.$u.post(url, {
		// 	pageNo: this.pageNo,
		// 	pageSize: this.pageSize
		// },{
		// 	WT: this.$getToken()
		// }).then(res => {
		// 	const rows = res.data.result || [];
		// 	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 = 'more';
		// 	}
		// }).catch(err => {
		// 	console.log("获取预约记录失败：", err)
		// 	this.loadStatus = 'more';
		// })

		// Mock 静态数据
		const mockData = [
			{
				id: '1',
				assetName: '东山大道435-2-1-104号',
				status: 'pending',
				date: '2026-06-28 14:00:00',
				assetAddress: '宜昌市西陵区东山大道435号',
				managerName: '张管家',
				managerPhone: '13800138001',
				lat: 30.7086,
				lng: 111.2842,
				coverImg: '/public/static/index/assets.jpg'
			},
			{
				id: '2',
				assetName: '夷陵大道418号',
				status: 'done',
				date: '2026-06-20 10:30:00',
				assetAddress: '宜昌市西陵区夷陵大道418号',
				managerName: '李管家',
				managerPhone: '13800138002',
				lat: 30.7120,
				lng: 111.2900,
				coverImg: '/public/static/index/assets.jpg'
			}
		];

		if (this.pageNo === 1) this.flowList = [];
		this.flowList = this.flowList.concat(mockData);
		this.loadStatus = 'nomore';
	},
    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;
      this.pageNo = 1;
      this.flowList = [];
      this.loadStatus = 'more';
      this.fetchReserve();
      setTimeout(() => {
        this.isRefreshing = false;
      }, 800);
    }
  }
};
</script>

<style lang="scss" scoped>
.reserve-records {
  min-height: 100vh;
  padding-top: 175rpx;
  box-sizing: border-box;
}

/* ✅ 核心修复：正确的滚动区域高度 */
.scroll-content {
  height: calc(100vh - 175rpx);
  box-sizing: border-box;
}

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

.record-card {
  background: #fff;
  border-radius: 12rpx;
  padding: 25rpx;
  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;
  padding-bottom: 20rpx;
}

.reserve-time {
  font-size: 30rpx;
  font-weight: 500;
  color: #333;
}

.record-status {
  font-size: 28rpx;
  padding: 6rpx 16rpx;
  border-radius: 4rpx;
  &.done {
    background: #fff;
    color: #0088FE;
  }
  &.pending {
    background: #fff;
    color: #FF8D1A;
  }
}

.card-divider {
  height: 1rpx;
  background-color: #f0f0f0;
}

.card-body {
  display: flex;
  padding: 24rpx 0;
}

.cover-img {
  width: 160rpx;
  height: 160rpx;
  border-radius: 8rpx;
  flex-shrink: 0;
  background-color: #f5f5f5;
}

.card-info {
  flex: 1;
  margin-left: 20rpx;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
}

.asset-name {
  font-size: 30rpx;
  font-weight: 600;
  color: #2D2B2C;
  margin-bottom: 12rpx;
}

.info-row {
  display: flex;
  align-items: center;
  margin-bottom: 8rpx;
}

.info-text {
  font-size: 24rpx;
  color: #999;
  margin-left: 8rpx;
}

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

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

.call-btn {
  width: 220rpx;
  height: 72rpx;
  background: #0088FE;
  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>