scancode-miro/pages/cjx/hexiao/ywy/add_goods_record.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 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.recordNo }}</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" v-for="item in record.queryActiveRecordDetailVos">
              <text class="detail-label">{{ item.productName }}</text>
              <text class="detail-value">{{ item.num }}</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>
    <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>
        <u-row customStyle="margin-bottom: 10px">
          <u-col span="3">
            <view class="explain">门店名称</view>
          </u-col>
          <u-col span="9">
            <u--input v-model="searchQuery"
                placeholder="请输入内容"
                border="surround"
            ></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 @close="timeShow = false" :show="timeShow" :mode="mode" @confirm="confirm"></u-calendar>
  </view>
</template>

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

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


      searchQuery: '',

      recordList: [],
      pagination: {
        page: 1,
        limit: 10,
      },
      loadStatus: 'more', // 'more'-加载前, 'loading'-加载中, 'noMore'-没有更多了
      isLoading: false,
    };
  },
  onLoad() {
    // 页面加载时获取第一页数据
    this.fetchRecords(true);
  },
  // 监听下拉刷新
  onPullDownRefresh() {
    this.fetchRecords(true);
  },
  methods: {
    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;

    },
    // 核心：获取记录列表数据
    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,this.searchQuery,this.startTime,this.endTime).then(res=>{
        let mockData = res.data.records;
        if(mockData == null){
          mockData = [];
        }
        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();
    },

    // 搜索
    change(){
      debugger;
    },
    handleSearch() {
      this.show = false;
      // 在实际项目中，搜索应该调用API，这里为简单起见只做前端筛选
      this.fetchRecords(true);
    },
    resetForm(){
        this.searchQuery = "";
        this.startTime = "";
        this.endTime = "";
        this.startTimeXd = "";
    }
  }
}
</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;
}
</style>