scancode-miro/pages/hexiao/jxs/hexiao_record_history.vue

<template>
  <view class="page-container">
    <view class="search-wrapper">
      <view class="query">
        <u-row customStyle="margin-bottom: 10px" gutter="20">
          <u-col span="9">
            <u--input
                @focus="timeShow = true"
                v-model="startTimeXd"
                placeholder="开始日期 ~ 结束日期"
                prefixIcon="calendar"
                prefixIconStyle="font-size: 22px;color: #909399"
                @input="handleSearch"
                @change="change"
            ></u--input>
          </u-col>
          <u-col span="3">
            <view class="query-btn" @click="show = !show">
              <view class="query-btn-icon">
              </view>
              <view class="query-btn-text">筛选</view>
            </view>
          </u-col>
        </u-row>
      </view>
    </view>


    <scroll-view class="list-container" scroll-y="true" @scrolltolower="loadMore">
      <view v-if="recordList.length === 0 && loadStatus !== 'loading'" class="empty-list">
        <text>暂无数据</text>
      </view>
      <view class="data-display-container" v-if="recordList.length>0">
        <view class="header-row">
          <view class="header-item">项目</view>
          <view class="header-item">数量</view>
          <view class="header-item">时间</view>
        </view>

        <view class="data-body">
          <view class="data-row" v-for="(item, index) in recordList" :key="index">
            <view class="data-cell item-column">{{ item.itemName }}</view>
            <view class="data-cell">{{ item.quantity }}</view>
            <view class="data-cell">{{ item.verifyTime }}</view>
          </view>

        </view>
      </view>

    </scroll-view>
    <u-popup :show="show" mode="bottom"  @close="show = false" >
      <view class="popup-content">
        <view class="popup-text">筛选</view>
        <u-row customStyle="margin-bottom: 10px">
          <u-col span="3">
            <view class="explain">选择日期</view>
          </u-col>
          <u-col span="9">
            <u--input
                v-model="startTimeXd"
                placeholder="开始日期 ~ 结束日期"
                prefixIcon="calendar"
                prefixIconStyle="font-size: 22px;color: #909399"
                @focus="timeShow = true"
            ></u--input>
          </u-col>
        </u-row>
        <view class="popup-btn">
          <u-button @click="handleSearch"  class="popup-btn-one">搜索</u-button>
          <u-button @click="resetForm" class="popup-btn-one" type="primary">重置</u-button>
        </view>
      </view>

    </u-popup>
    <u-calendar min-date="2025-07-01" max-date="2030-07-01" @close="timeShow = false" :show="timeShow" :mode="mode" @confirm="confirm"></u-calendar>
  </view>
</template>

<script>
import {queryWriteOffRecordByItem} from "@/api/hexiao";

export default {
  data() {
    return {
      startTime: '',
      endTime: '',
      timeShow: false,
      startTimeXd:"",
      mode: 'range',
      show:false,



      searchQuery: '',
      recordList: [],
      totalInfo:{saleTotal:0,activateTotal:0},
      retailId:0,
      pagination: {
        page: 1,
        limit: 10,
      },
      loadStatus: 'more', // 'more'-加载前, 'loading'-加载中, 'noMore'-没有更多了
      isLoading: false,
    };
  },
  onLoad(opt) {
    // 页面加载时获取第一页数据
    if(opt.id){
      this.retailId = opt.id
    }
    this.fetchRecords(true);

  },
  // 监听下拉刷新
  onPullDownRefresh() {
    // this.fetchRecords(true);
  },
  methods: {
    detail(id){
      uni.navigateTo({ url: `/pages/hexiao/ywy/patrol_detail?id=`+id });

    },
    // 核心：获取记录列表数据
    async fetchRecords(isRefresh = false) {
      if (this.isLoading || (this.loadStatus === 'noMore' && !isRefresh)) {
        return;
      }
      this.isLoading = true;
      this.loadStatus = 'loading';
      if (isRefresh) {
        this.pagination.page = 1;
        this.recordList = [];
        this.loadStatus = 'more';
      }

      let data = {
        pageIndex: this.pagination.page,
        pageSize: this.pagination.limit,
        startTime: this.startTime,
        endTime: this.endTime,
      };
      queryWriteOffRecordByItem(data).then(res=>{
        let data =res.data;
        let records = data.records;
        if(!records){
          records = [];
        }
        if (records.length > 0) {
          this.recordList = [...this.recordList, ...records];
          this.pagination.page++;
          this.loadStatus = 'more';
        } else {
          this.loadStatus = 'noMore';
        }
        this.isLoading = false;
        uni.stopPullDownRefresh(); // 停止下拉刷新动画

      })






    },
    resetForm(){
      this.searchQuery = "";
      this.startTime = "";
      this.endTime = "";
      this.startTimeXd = "";
    },
    confirm(e) {
      this.startTime = e[0];
      this.endTime = e[e.length-1];
      this.startTimeXd = e[0]+' ~ '+e[e.length-1];
      if(!this.show){
        this.handleSearch()
      }
      this.timeShow = false;

    },
    // 上拉加载更多
    loadMore() {
      this.fetchRecords();
    },

    // 搜索
    handleSearch() {
      // 在实际项目中，搜索应该调用API，这里为简单起见只做前端筛选
      this.fetchRecords(true);
    }
  }
}
</script>

<style lang="scss" scoped>
.page-container {
  display: flex;
  flex-direction: column;
  height: 100vh;
  background-color: #f5f6fa;
}

.search-wrapper {
  padding: 20rpx;
  background-color: #ffffff;
  border-bottom: 1rpx solid #f0f0f0;
}

.search-bar {
  display: flex;
  align-items: center;
  background-color: #f5f6fa;
  border-radius: 50rpx;
  padding: 0 25rpx;
  height: 70rpx;
}
.search-input {
  flex: 1;
  font-size: 28rpx;
  margin-left: 15rpx;
}
.placeholder {
  color: #b0b0b0;
}

.list-container {
  flex: 1;
  height: 100%; // 必须给scroll-view一个明确的高度
}

.empty-list {
  text-align: center;
  color: #999;
  padding-top: 150rpx;
}

.record-card {
  background-color: #ffffff;
  border-radius: 16rpx;
  margin: 20rpx;
  position: relative;
  overflow: hidden;
  box-shadow: 0 4rpx 20rpx rgba(0, 0, 0, 0.05);
}

.card-decorator {
  position: absolute;
  left: 0;
  top: 0;
  bottom: 0;
  width: 8rpx;
  background-color: #e3efff;
}

.card-content {
  padding: 30rpx;
  padding-left: 40rpx;
}

.card-header {
  display: flex;
  align-items: center;
  padding-bottom: 20rpx;
  border-bottom: 1rpx solid #f5f5f5;

  .record-id {
    font-size: 30rpx;
    font-weight: bold;
    color: #333;
    margin-left: 15rpx;
  }
}

.details-section {
  padding-top: 10rpx;
}

.detail-row {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 15rpx 0;
  font-size: 28rpx;

  .detail-label {
    color: #666;
  }

  .detail-value {
    color: #333;
  }

  &.product-item .detail-label {
    color: #333; // 商品名称颜色深一些
    font-weight: 400;
  }

  .reward {
    color: #ff9900;
    font-weight: 500;
  }
}








.query-btn {
  background-color: #409eff;
  color: #fff;
  padding: 20rpx;
  border-radius: 10rpx;
  height: 34rpx;
  display: flex;
  justify-content: center;
  align-items: center;
}
.query-btn-icon {
  height: 32rpx;
  width: 32rpx;
  background-image:
      url("https://hyscancode.oss-cn-hangzhou.aliyuncs.com/xiaochengxu/cjx/queryIoc.png");
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
}
.query-btn-text {
  font-weight: 400;
  font-size: 30rpx;
  color: #F5F5F5;
}
.popup-content{
  height: 25vh;
  padding: 10px;
}
.popup-text{
  font-family: PingFang SC;
  font-weight: bold;
  font-size: 36rpx;
  color: #1C1E1D;
  text-align: center;
  margin-bottom: 10px;
}
.popup-btn{
  display: flex;
  justify-content: space-around;
}
.popup-btn-one{
  width: 275rpx;
  height: 70rpx;
  background: linear-gradient(0deg, #6FA4FE, #488CFF);
  box-shadow: 0rpx 9rpx 16rpx 0rpx rgba(153,153,153,0.35);
  border-radius: 35rpx;
}






.data-display-container {
  padding: 30rpx;
  font-size: 28rpx;
  color: #333;
  min-height: 100vh; /* 确保内容撑满整个视口高度 */
  box-sizing: border-box; /* 边框和内边距包含在元素的总宽度和高度内 */
}

.card {
  background-color: #ffffff;
  border-radius: 16rpx;
  box-shadow: 0 4rpx 20rpx rgba(0, 0, 0, 0.08); /* 更柔和的阴影 */
  overflow: hidden; /* 确保圆角显示 */
  display: flex;
  flex-direction: column;
  max-height: calc(100vh - 60rpx); /* 卡片最大高度，留出上下padding */
}

.header-row {
  display: flex;
  flex-direction: row;
  background-color: #4A90E2; /* 品牌蓝色 */
  color: #ffffff;
  font-weight: bold;
  padding: 24rpx 0; /* 上下内边距增加 */
  border-bottom: 1rpx solid rgba(255, 255, 255, 0.2); /* 浅色边框 */
  position: sticky; /* 头部固定 */
  top: 0;
  z-index: 10;
}

.header-item {
  flex: 1;
  text-align: center;
  padding: 0 10rpx; /* 左右内边距 */
  font-size: 28rpx;
}

.data-body-scroll {
  flex: 1; /* 占据剩余空间 */
  overflow-y: auto; /* 允许滚动 */
  -webkit-overflow-scrolling: touch; /* iOS 平滑滚动 */
}

.data-row {
  display: flex;
  flex-direction: row;
  align-items: center; /* 垂直居中对齐 */
  padding: 20rpx 0; /* 上下内边距 */
  border-bottom: 1rpx solid #f0f0f0; /* 更细的分割线 */
  transition: background-color 0.2s ease; /* 鼠标悬停或点击的平滑过渡 */
}

.data-row:last-child {
  border-bottom: none; /* 最后一行没有底部边框 */
}

.data-row.even-row {
  background-color: #f9f9f9; /* 隔行变色 */
}

.data-row:hover {
  background-color: #eef7ff; /* 悬停效果 */
}

.data-cell {
  flex: 1;
  padding: 0 10rpx; /* 左右内边距 */
  text-align: center;
  font-size: 26rpx; /* 数据字体略小 */
  color: #555;
  word-break: break-word; /* 允许长文本在任何地方换行 */
  line-height: 1.4; /* 增加行高 */
}

.item-column {
  text-align: left;
  padding-left: 20rpx; /* 品项左边距 */
  color: #333;
  font-weight: 500;
}

.no-data {
  text-align: center;
  padding: 40rpx;
  color: #999;
  font-size: 30rpx;
}
</style>