scancode-miro/pages/cjx/hexiao/ywy/add_goods_record.vue

<template>
  <view class="page-container">
    <view class="search-wrapper">
      <view class="search-bar">
        <uni-icons type="search" size="20" color="#999"></uni-icons>
        <input
            class="search-input"
            v-model="searchQuery"
            placeholder="输入门店名称/上货日期搜索"
            placeholder-class="placeholder"
            confirm-type="search"
            @confirm="handleSearch"
        />
      </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 v-for="record in recordList" :key="record.id" class="record-card">
        <view class="card-decorator"></view>
        <view class="card-content">
          <view class="card-header">
            <uni-icons type="calendar-filled" size="20" color="#3c82f8"></uni-icons>
            <text class="record-id">{{ record.id }}</text>
          </view>

          <view class="details-section">
            <view class="detail-row">
              <text class="detail-label">上货商品总数</text>
              <text class="detail-value">{{ record.totalNum }}</text>
            </view>

            <view class="detail-row product-item" v-for="(product, index) in record.products" :key="index">
              <text class="detail-label product-name">{{ product.name }}</text>
              <text class="detail-value">{{ product.quantity }}{{ product.unit }}</text>
            </view>

            <view class="detail-row">
              <text class="detail-label">上货门店</text>
              <text class="detail-value">{{ record.storeName }}</text>
            </view>
            <view class="detail-row">
              <text class="detail-label">上货时间</text>
              <text class="detail-value">{{ record.activeTime }}</text>
            </view>
            <view class="detail-row">
              <text class="detail-label">上货奖励</text>
              <text class="detail-value reward">{{ record.reward==null?"0":record.reward }}积分</text>
            </view>
          </view>
        </view>
      </view>

      <uni-load-more :status="loadStatus"></uni-load-more>
    </scroll-view>
  </view>
</template>

<script>
import {queryActiveRecord} from "../../../../api/hexiao";

export default {
  data() {
    return {
      searchQuery: '',
      recordList: [],
      pagination: {
        page: 1,
        limit: 10,
      },
      loadStatus: 'more', // 'more'-加载前, 'loading'-加载中, 'noMore'-没有更多了
      isLoading: false,
    };
  },
  onLoad() {
    // 页面加载时获取第一页数据
    this.fetchRecords(true);
  },
  // 监听下拉刷新
  onPullDownRefresh() {
    this.fetchRecords(true);
  },
  methods: {
    // 核心：获取记录列表数据
    async fetchRecords(isRefresh = false) {
      if (this.isLoading || (this.loadStatus === 'noMore' && !isRefresh)) {
        return;
      }

      if (isRefresh) {
        this.pagination.page = 1;
        this.recordList = [];
        this.loadStatus = 'more';
      }

      this.isLoading = true;
      this.loadStatus = 'loading';

      // 在这里替换成您真实的 uni.request API 调用
      console.log(`正在请求第 ${this.pagination.page} 页数据...`);

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


      // --- [模拟API请求结束] ---




    },

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

    // 搜索
    handleSearch() {
      // 在实际项目中，搜索应该调用API，这里为简单起见只做前端筛选
      // this.fetchRecords(true);
      uni.showToast({ title: '触发搜索', icon: 'none' });
    }
  }
}
</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;
  }
}
</style>