yueche_app/pages/hexiaolist/hexiaolist.vue

<template>
  <!-- 页面容器 -->
  <view class="page-container">
    <!-- 搜索区域：点击跳转时间选择页 -->
	<view class="search-bar" @click="jumpToDateSelect">
	  <view class="search-input-wrap">
		<text class="search-input">
		  {{ searchTime || '开始时间 ~ 结束时间' }}
		</text>
	  </view>
	  <!-- 取消按钮：仅在已选择时间时显示 -->
		<text 
		  class="cancel-btn" 
		  v-if="searchTime"
		  @click.stop="cancelSearch"
		>
		  取消
		</text>
	</view>

    <!-- 核销记录列表 -->
    <view class="record-list">
      <view 
        class="record-item" 
        v-for="(item, index) in recordList" 
        :key="index"
      >
        <!-- 已乘车标签 -->
        <view class="status-tag">
			<text v-if="item.payState==0">待支付</text>
			<text v-if="item.payState==2">退款中</text> 
			<text v-if="item.payState==3">已取消</text>
			<text v-if="item.payState==1">
				<text v-if="item.byState==1">预约成功</text>
				<text v-if="item.byState==2">已乘车</text>
				<text v-if="item.byState==3">未乘车</text>
			</text>
		</view>
        <!-- 记录内容 -->
        <view class="record-content">
          <text class="record-text">发车日期：{{ item.ciDate }}</text>
          <text class="record-text">发车时间：{{ item.ciTime }}</text>
		  <text class="record-text">车次：{{ item.carNumber }}</text>
          <text class="record-text">预约人：{{ item.username }}</text>
          <text class="record-text" @click.stop="bindphone(item.mobile)">手机号码：{{ item.mobile }}</text>
          <text class="record-text">核销专员号码：{{ item.vertifyManMobile }}</text>
          <text class="record-text">核销时间：{{ item.vertifyTime }}</text>
        </view>
      </view>
    </view>
    <!-- 无数据提示 -->
	<view v-if="recordList.length === 0" class="empty-tip">
	  暂无核销记录
	</view>
  </view>
</template>

<script setup>
import { ref } from 'vue'
import { onLoad, onReachBottom, onShow, onUnload } from '@dcloudio/uni-app'
import { myRequest } from '@/utils/api.ts'


// 搜索时间显示文本
const searchTime = ref('')
// 接收时间选择页的参数（用于页面栈传递）
const selectedDate = ref(null)
// 用户信息
const userInfo = ref()
const startT=ref('')
const endT=ref('')
// 每页多少条
const pageSize = ref(10)
// 当前页
const currentPage = ref(1)
// 总条数
const total = ref(0)
// 核销记录数据
const recordList = ref([]) // 初始化空数组，避免本地测试数据干扰
// 跳转至时间选择页
const jumpToDateSelect = () => {
  uni.navigateTo({
    url: '/pages/select/select' 
  })
}
// 取消搜索（清空时间筛选）
const cancelSearch = () => { 
  // 清空时间相关参数
  searchTime.value = ''
  startT.value = ''
  endT.value = ''
  selectedDate.value = null
  // 重置页码并重新加载全部数据
  currentPage.value = 1
  getCommonData()
  // 提示用户
  uni.showToast({ title: '已清空时间筛选', icon: 'none' })
}
// 拨打电话
const bindphone = (e) => {
  uni.makePhoneCall({
    phoneNumber: e,
    fail: (err) => {
      uni.showToast({ title: '拨打电话失败', icon: 'none' })
    }
  })
}
onLoad(() => {
	userInfo.value = uni.getStorageSync('carUserInfo')
	console.log(userInfo.value)
	getCommonData()
})
// 页面显示时（从时间选择页返回后触发）
onShow(() => {
  // 方式1：从storage获取参数
  const dateRange = uni.getStorageSync('selectedDateRange')
  // 方式2：从页面栈参数获取（优先级更高）
  if (selectedDate.value) {
    startT.value = selectedDate.value.startTime
    endT.value = selectedDate.value.endTime
    searchTime.value = selectedDate.value.showText
  } else if (dateRange) {
    startT.value = dateRange.startTime
    endT.value = dateRange.endTime
    searchTime.value = dateRange.showText
    // 清空storage，避免重复读取
    uni.removeStorageSync('selectedDateRange')
  }
  
  // 有选中时间则重新查询数据
  if (startT.value && endT.value) {
    currentPage.value = 1 // 重置页码
    getCommonData()
  }
})
// 页面卸载时清空参数（避免缓存）
onUnload(() => {
  uni.removeStorageSync('selectedDateRange')
})
// 页面触底触发的回调
onReachBottom(() => {
	if (recordList.value.length < total.value) {
		currentPage.value++
		getCommonData()
	} else {
		uni.showToast({
			title: '没有更多数据了',
			icon: 'none'
		})
	}
})
// 获取常用旅客列表数据
const getCommonData = async () => {
	// 核心：根据时间参数是否存在动态组装请求数据
	  let data = {}
	  if (startT.value && endT.value) {
		data = {
		  page: currentPage.value,
		  rows: pageSize.value,
		  startTime: startT.value,
		  endTime: endT.value
		}
	  } else {
		data = {
		  page: currentPage.value,
		  rows: pageSize.value
		}
	  }
	try {
	    const res = await myRequest({
	      url: '/carBook/brecblist.action',
	      data
	    })
	    // 分页加载：第一页清空原有数据，后续页追加
	    if (currentPage.value === 1) {
	      recordList.value = res.rows
	    } else {
	      recordList.value = [...recordList.value, ...res.rows]
	    }
	    total.value = res.total
	  } catch (err) {
	    uni.showToast({ title: '数据加载失败', icon: 'none' })
	  }
}

// 打开时间选择弹窗
const openTimePopup = async () => {
  await nextTick(); // 等待组件渲染完成
  if (timePopupRef.value) {
    timePopupRef.value.open();
  }
};

// 关闭时间选择弹窗
const closeTimePopup = () => {
  timePopupRef.value.close()
}

// 确认选择时间（触发接口查询）
const confirmTime = () => {
  if (selectedTime.value.length < 2) {
    uni.showToast({ title: '请选择完整时间范围', icon: 'none' })
    return
  }
  // 格式化时间并更新参数
  startT.value = formatDate(selectedTime.value[0])
  endT.value = formatDate(selectedTime.value[1])
  searchTime.value = `${startT.value} ~ ${endT.value}`
  // 重置页码，重新查询
  currentPage.value = 1
  getCommonData()
  // 关闭弹窗
  closeTimePopup()
}

// 日期格式化工具函数
const formatDate = (date) => {
  const d = new Date(date)
  const year = d.getFullYear()
  const month = (d.getMonth() + 1).toString().padStart(2, '0')
  const day = d.getDate().toString().padStart(2, '0')
  return `${year}-${month}-${day}`
}
</script>

<style scoped>
/* 页面容器 */
.page-container {
  min-height: 100vh;
  background-color: #f5f5f5;
}

/* 搜索区域 */
.search-bar {
  display: flex;
  align-items: center;
  padding: 15rpx;
  background-color: #fff;
  margin-bottom: 10rpx;
}
.search-input-wrap {
  flex: 1;
  display: flex;
  align-items: center;
  background-color: #f5f5f5;
  border-radius: 20rpx;
  padding: 0 15rpx;
  height: 35px;
  /* 点击区域cursor */
  cursor: pointer;
}
.search-icon {
  color: #999;
  margin-right: 10rpx;
}
.search-input {
  flex: 1;
  height: 100%;
  font-size: 14px;
  background-color: transparent;
  line-height: 35px;
}
/* 占位符样式 */
.placeholder {
  color: #999;
}
.cancel-btn {
  color: #007aff;
  font-size: 16px;
  margin-left: 15rpx;
}

/* 记录列表 */
.record-list {
  padding: 0 15rpx;
}
.record-item {
  background-color: #fff;
  border-radius: 10rpx;
  padding: 20rpx;
  margin-bottom: 15rpx;
  position: relative;
  border: 1px solid #eee;
}
/* 第一条记录高亮边框 */
.active-item {
  border: 2px solid #ffd700;
}
/* 已乘车标签 */
.status-tag {
  position: absolute;
  top: 20rpx;
  right: 20rpx;
  background-color: #4cd964;
  color: #fff;
  font-size: 12px;
  padding: 2rpx 8rpx;
  border-radius: 4rpx;
}
/* 记录内容 */
.record-content {
  margin-top: 5rpx;
}
.record-text {
  display: block;
  font-size: 14px;
  color: #333;
  line-height: 45rpx;
}
</style>