scancode-miro/pages/hexiao/jxs/store_expand_list.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"
                @clear="handleSearch"
            ></u--input>
          </u-col>
          <u-col span="3">
            <view class="query-btn" @click="clearSearch">
              <view class="query-btn-text">清空</view>
            </view>
          </u-col>
        </u-row>
      </view>
    </view>

    <scroll-view class="list-container" scroll-y="true">
      <view v-if="recordList.length === 0 && !isLoading" class="empty-list">
        <text>暂无数据</text>
      </view>
      <view class="data-display-container" v-else>
        <view class="header-row">
          <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">{{ getRowDate(item) }}</view>
            <view class="data-cell">{{ getRowCount(item) }}</view>
          </view>
        </view>
      </view>
    </scroll-view>

    <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 {queryStoreExpandCount} from "@/api/hexiao";

export default {
  data() {
    return {
      startTime: '',
      endTime: '',
      timeShow: false,
      startTimeXd:"",
      mode: 'range',
      isLoading: false,
      recordList: [],
      ywyId: 0
    };
  },
  onLoad(opt) {
    if (opt.ywyId) {
      this.ywyId = Number(opt.ywyId);
    }
    this.fetchRecords();
  },
  methods: {
    confirm(e) {
      this.startTime = e[0];
      this.endTime = e[e.length-1];
      this.startTimeXd = e[0]+' ~ '+e[e.length-1];
      this.timeShow = false;
      this.handleSearch();
    },
    clearSearch(){
      this.startTime = "";
      this.endTime = "";
      this.startTimeXd = "";
      this.handleSearch();
    },
    handleSearch() {
      this.fetchRecords();
    },
    fetchRecords() {
      if (this.isLoading) {
        return;
      }
      this.isLoading = true;
      queryStoreExpandCount({
        ywyId: this.ywyId,
        startTime: this.startTime,
        endTime: this.endTime
      }).then(res=>{
        this.recordList = res.data || [];
        this.isLoading = false;
      }).catch(() => {
        this.isLoading = false;
      });
    },
    getRowDate(item) {
      return item.date || '';
    },
    getRowCount(item) {
      return item.count !== undefined ? item.count : 0;
    }
  }
}
</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;
}

.list-container {
  flex: 1;
  height: 100%;
}

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

.query-btn {
  background-color: #409eff;
  color: #fff;
  padding: 20rpx;
  border-radius: 10rpx;
  height: 34rpx;
  display: flex;
  justify-content: center;
  align-items: center;
}

.query-btn-text {
  font-weight: 400;
  font-size: 30rpx;
  color: #F5F5F5;
}

.data-display-container {
  padding: 30rpx;
  font-size: 28rpx;
  color: #333;
  min-height: 100vh;
  box-sizing: border-box;
}

.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-row {
  display: flex;
  flex-direction: row;
  align-items: center;
  padding: 20rpx 0;
  border-bottom: 1rpx solid #f0f0f0;
}

.data-row:last-child {
  border-bottom: none;
}

.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;
}
</style>