scancode-miro/pages/hexiao/jxs/store_list.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="handleSearch"
        />
      </view>

      <view class="filter-tabs">
        <view
            class="tab-item"
            :class="{ active: auditFilter === 0 }"
            @click="changeAuditFilter(0)"
        >
          <text>待审核</text>
        </view>
        <view
            class="tab-item"
            :class="{ active: auditFilter === 1 }"
            @click="changeAuditFilter(1)"
        >
          <text>已审核</text>
        </view>
        <view
            class="tab-item"
            :class="{ active: auditFilter === 2 }"
            @click="changeAuditFilter(2)"
        >
          <text>已驳回</text>
        </view>
      </view>
    </view>

    <scroll-view
        scroll-y="true"
        class="list-container"
        @scrolltolower="handleScrollToLower"
        :lower-threshold="100"
    >
      <view v-if="isLoading && pagination.page === 1" class="loading-wrapper">
        <text>加载中...</text>
      </view>

      <view v-if="storeList.length === 0 && !isLoading" class="empty-list">
        <text>没有找到相关门店</text>
      </view>

      <view v-for="store in storeList" :key="store.id" class="store-card">
        <view v-if="store.audit_status" class="audit-tag" :class="store.audit_status">
          <text v-if="store.audit_status === 'pending'">待审核</text>
          <text v-if="store.audit_status === 'approved'">已审核</text>
          <text v-if="store.audit_status === 'rejected'">已驳回</text>
        </view>

        <view class="card-decorator"></view>
        <view class="card-content">
          <view class="card-header">
            <uni-icons type="shop-filled" size="20" color="#3c82f8"></uni-icons>
            <text class="store-name">{{ store.store_name }}</text>
          </view>
          <view class="info-grid">
            <view class="info-row">
              <text class="info-label">店主名称：</text>
              <text class="info-value">{{ store.contact_name }}</text>
            </view>
            <view class="info-row">
              <text class="info-label">联系方式：</text>
              <text class="info-value">{{ store.contact_phone }}</text>
            </view>
            <view class="info-row">
              <text class="info-label">门店地址：</text>
              <text class="info-value">{{ store.address }}</text>
            </view>
            <view class="info-row" v-if="store.review_status === 2">
              <text class="info-label">驳回原因：</text>
              <text class="info-value" style="color: red">{{ store.reject_reason }}</text>
            </view>
          </view>
          <view class="action-buttons">
            <view class="action-btn" @click="viewDetails(store.id)">
              <uni-icons type="eye-filled" size="18" color="#3c82f8"></uni-icons>
              <text>详情</text>
            </view>
            <view class="action-btn" @click="dataSummary(store.id)">
              <uni-icons type="compose" size="18" color="#3c82f8"></uni-icons>
              <text>数据汇总</text>
            </view>
          </view>
        </view>
      </view>
      <view class="list-placeholder"></view>

      <view v-if="isLoading && pagination.page > 1" class="load-more">
        <text>加载更多...</text>
      </view>
      <view v-if="loadStatus === 'noMore' && storeList.length > 0" class="load-more">
        <text>没有更多数据了</text>
      </view>
    </scroll-view>
  </view>
</template>

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

export default {
  data() {
    return {
      searchQuery: '',
      storeList: [],
      pagination: {
        page: 1,
        limit: 10,
      },
      isLoading: false,
      loadStatus: 'more',
      auditFilter: 0,
      scrollTimer: null,
      isScrolling: false,
    };
  },
  onShow(){
    this.fetchStoreList(true);
  },
  onLoad() {
    this.fetchStoreList(true);
  },
  methods: {
    fetchStoreList(isRefresh = false) {
      if (this.isLoading || (this.loadStatus === 'noMore' && !isRefresh)) {
        return;
      }
      if (isRefresh) {
        this.pagination.page = 1;
        this.storeList = [];
        this.loadStatus = 'more';
      }

      this.isLoading = true;
      if (!isRefresh) {
        this.loadStatus = 'loading';
      }

      getStoreList(this.pagination.page, this.pagination.limit, this.searchQuery, 0, this.auditFilter).then(res=>{
        let data = res.data;
        let list = data.records || [];
        if (list.length > 0) {
          this.storeList = [...this.storeList, ...list];
          this.pagination.page++;
          this.loadStatus = list.length < this.pagination.limit ? 'noMore' : 'more';
        } else {
          this.loadStatus = 'noMore';
        }
        this.isLoading = false;
        this.isScrolling = false;
      }).catch(() => {
        this.isLoading = false;
        this.isScrolling = false;
      });
    },
    handleSearch() {
      this.pagination.page = 1;
      this.fetchStoreList(true);
    },
    changeAuditFilter(status) {
      if (this.auditFilter !== status) {
        this.auditFilter = status;
        this.pagination.page = 1;
        this.fetchStoreList(true);
      }
    },
    handleScrollToLower() {
      if (this.isScrolling || this.isLoading || this.loadStatus === 'noMore') {
        return;
      }
      this.isScrolling = true;
      if (this.scrollTimer) {
        clearTimeout(this.scrollTimer);
      }
      this.scrollTimer = setTimeout(() => {
        this.fetchStoreList(false);
        this.scrollTimer = null;
      }, 300);
    },
    viewDetails(id) {
      uni.navigateTo({ url: '/pages/hexiao/ywy/add_retail?edit=0&id='+id });
    },
    dataSummary(id){
      uni.navigateTo({ url: '/pages/hexiao/jxs/sale_detail?id='+id });
    }
  }
}
</script>

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

.search-wrapper {
  padding: 20rpx;
  background-color: #ffffff;
  position: sticky;
  top: 0;
  z-index: 100;
  flex-shrink: 0;
}

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

.filter-tabs {
  display: flex;
  background-color: #f5f6fa;
  border-radius: 10rpx;
  margin-top: 20rpx;
  padding: 8rpx;
  flex-shrink: 0;
}

.tab-item {
  flex: 1;
  text-align: center;
  padding: 16rpx 0;
  font-size: 26rpx;
  color: #666;
  border-radius: 8rpx;
  transition: all 0.3s;
}

.tab-item.active {
  background-color: #ffffff;
  color: #3c82f8;
  font-weight: bold;
  box-shadow: 0 2rpx 8rpx rgba(60, 130, 248, 0.2);
}

.audit-tag {
  position: absolute;
  top: 10rpx;
  right: 10rpx;
  padding: 6rpx 16rpx;
  border-radius: 20rpx;
  font-size: 22rpx;
  font-weight: bold;
  z-index: 1;
}

.audit-tag.pending {
  background-color: #fff8e1;
  color: #ff9800;
  border: 1rpx solid #ff9800;
}

.audit-tag.approved {
  background-color: #e8f5e9;
  color: #4caf50;
  border: 1rpx solid #4caf50;
}

.audit-tag.rejected {
  background-color: #ffebee;
  color: #f44336;
  border: 1rpx solid #f44336;
}

.list-container {
  flex: 1;
  padding: 0 20rpx;
  box-sizing: border-box;
  overflow: hidden;
}

.loading-wrapper {
  text-align: center;
  padding: 40rpx 0;
  color: #999;
  font-size: 28rpx;
}

.load-more {
  text-align: center;
  padding: 30rpx 0;
  color: #999;
  font-size: 26rpx;
  border-top: 1rpx solid #f0f0f0;
  margin-top: 20rpx;
}

.empty-list {
  text-align: center;
  color: #999;
  padding-top: 100rpx;
  font-size: 28rpx;
}

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

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

.store-name {
  font-size: 32rpx;
  font-weight: bold;
  color: #333;
  margin-left: 15rpx;
}

.info-grid {
  margin-top: 20rpx;
  font-size: 26rpx;
  color: #666;
}

.info-row {
  margin-top: 10rpx;
}

.action-buttons {
  display: flex;
  justify-content: space-around;
  border-top: 1rpx solid #f5f5f5;
  margin-top: 30rpx;
  padding-top: 25rpx;
}

.action-btn {
  display: flex;
  align-items: center;
  font-size: 26rpx;
  color: #3c82f8;
}

.action-btn text {
  margin-left: 8rpx;
}

.list-placeholder {
  height: 80rpx;
  width: 100%;
}
</style>