scancode-miro/pages/cjx/hexiao/jxs/hexiao_detail.vue

<template>
  <view class="page-container">
    <view class="info-card">
      <view class="info-row">
        <text class="info-label">核销门店</text>
        <text class="info-value">{{ recordInfo.storeName }}</text>
      </view>
      <view class="info-row">
        <text class="info-label">核销时间</text>
        <text class="info-value">{{ recordInfo.verificationTime }}</text>
      </view>
    </view>

    <view class="summary-card">
      <view
          class="summary-tab"
          v-for="item in summaryData"
          :key="item.key"
      >
        <text class="tab-category">{{ item.category }}</text>
        <text class="tab-count">{{ item.count }}{{ item.unit }}</text>
      </view>
    </view>

    <scroll-view class="details-list" scroll-y="true" @scrolltolower="loadMore">
      <view v-if="detailsList.length === 0 && loadStatus !== 'loading'" class="empty-tip">
        暂无明细记录
      </view>
      <view v-for="(item, index) in detailsList" :key="index" class="detail-item-card">
        <text class="item-name">{{ item.name }}</text>
        <text class="item-code">扫码编号：{{ item.code }}</text>
      </view>
      <uni-load-more :status="loadStatus"></uni-load-more>
    </scroll-view>
  </view>
</template>

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

export default {
  data() {
    return {
      id:"",
      // 总览信息
      recordInfo: {
        storeName: '湖南长沙超吉炫旗舰店',
        verificationTime: '2025-08-11 09:30:00',
      },
      // 分类汇总数据
      summaryData: [
        { category: '10元槟榔', count: 20, unit: '袋', key: 'product_10' },
        { category: '20元槟榔', count: 20, unit: '袋', key: 'product_20' },
        { category: '30元槟榔', count: 20, unit: '袋', key: 'product_30' },
        { category: '能量饮料', count: 20, unit: '罐', key: 'product_drink' },
      ],
      // 所有明细的列表
      detailsList: [],
      // 分页加载相关
      pagination: { page: 1, limit: 15 },
      loadStatus: 'more', // 'more', 'loading', 'noMore'
      isLoading: false,
    };
  },
  onLoad(opt) {
    // 页面加载时，获取第一页数据
    // options.id 可以用来从上个页面传递记录ID
    this.id = opt.id
    this.getDetail(true);
  },
  onPullDownRefresh() {
    this.fetchDetails(true);
  },
  methods: {
    getDetail(){
      queryAddRecordDetail(this.id).then(res=>{
        debugger;
      })
    },
    // 模拟从API获取明细数据
    async fetchDetails(isRefresh = false) {
      if (this.isLoading || (this.loadStatus === 'noMore' && !isRefresh)) {
        return;
      }
      if (isRefresh) {
        this.pagination.page = 1;
        this.detailsList = [];
        this.loadStatus = 'more';
      }
      this.isLoading = true;
      this.loadStatus = 'loading';

      console.log(`请求第 ${this.pagination.page} 页明细...`);
      await new Promise(resolve => setTimeout(resolve, 1000));

      const mockData = Array.from({ length: this.pagination.limit }, (_, i) => {
        const id = (this.pagination.page - 1) * this.pagination.limit + i + 1;
        return {
          name: `超吉炫10元精制槟榔 - ${id}`,
          code: `BH2025010020${String(id).padStart(3, '0')}`
        };
      });
      const noMoreData = this.pagination.page >= 5; // 模拟加载4页后没有更多

      uni.stopPullDownRefresh();
      if (mockData.length > 0 && !noMoreData) {
        this.detailsList = [...this.detailsList, ...mockData];
        this.pagination.page++;
        this.loadStatus = 'more';
      } else {
        this.loadStatus = 'noMore';
      }
      this.isLoading = false;
    },
    // 滚动到底部加载更多
    loadMore() {
      this.fetchDetails();
    }
  }
}
</script>

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

.info-card {
  background-color: #ffffff;
  border-radius: 16rpx;
  margin: 20rpx;
  padding: 20rpx 30rpx;
  box-shadow: 0 4rpx 20rpx rgba(0, 0, 0, 0.05);
}

.info-row {
  display: flex;
  justify-content: space-between;
  align-items: center;
  font-size: 28rpx;
  padding: 15rpx 0;
  .info-label { color: #666; }
  .info-value { color: #333; }
}

.summary-card {
  display: flex;
  justify-content: space-around;
  background: linear-gradient(to right, #6ca1ff, #3c82f8);
  border-radius: 16rpx;
  margin: 0 20rpx 20rpx;
  padding: 20rpx 10rpx;
  color: #ffffff;
}

.summary-tab {
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: 10rpx;

  .tab-category {
    font-size: 26rpx;
    opacity: 0.9;
  }
  .tab-count {
    font-size: 28rpx;
    font-weight: bold;
    margin-top: 10rpx;
  }
}

.details-list {
  flex: 1;
  height: 100%;
  padding: 0 20rpx;
}

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

.detail-item-card {
  background-color: #ffffff;
  border-radius: 16rpx;
  padding: 30rpx;
  margin-bottom: 20rpx;
  box-shadow: 0 4rpx 20rpx rgba(0, 0, 0, 0.05);

  .item-name {
    display: block;
    font-size: 30rpx;
    font-weight: bold;
    color: #333;
  }

  .item-code {
    display: block;
    font-size: 26rpx;
    color: #999;
    margin-top: 15rpx;
  }
}
</style>