scancode-miro/components/cjx/select-store-drawer.vue

<template>
  <view v-if="show" class="drawer-wrapper" @touchmove.stop.prevent>
    <view class="drawer-overlay" @click="close"></view>
    <view class="drawer-content">
      <view class="drawer-header">
        <text class="title">选择门店</text>
        <uni-icons class="close-icon" type="closeempty" size="22" color="#999" @click="close"></uni-icons>
      </view>

      <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>

      <scroll-view class="store-list-scroll" scroll-y="true" @scrolltolower="handleScrollToLower">
        <view v-if="storeList.length === 0 && loadStatus !== 'loading'" class="empty-tip">
          暂无门店数据
        </view>
        <view
            v-for="store in storeList"
            :key="store.id"
            class="store-card"
            :class="{ 'selected': store.id === selectedId }"
            @click="handleStoreSelect(store)"
        >
          <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-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>
        <uni-load-more :status="loadStatus"></uni-load-more>
      </scroll-view>
    </view>
  </view>
</template>

<script>
import { getStoreList } from '@/api/hexiao.js';
export default {
  name: "select-store-drawer",
  props: {
    // 控制抽屉显示
    show: {
      type: Boolean,
      default: false
    },
    // 当前选中的门店ID，用于高亮显示
    selectedId: {
      type: [Number, String],
      default: null
    }
  },
  data() {
    return {
      searchQuery: '',
      storeList: [],
      pagination: {
        page: 1,
        limit: 10,
      },
      // 加载状态: 'loading'-加载中, 'more'-有更多, 'noMore'-没有更多了
      loadStatus: 'more',
      isLoading: false,
    };
  },
  watch: {
    // 监听 show 属性的变化
    show(newVal) {
      if (newVal && this.storeList.length === 0) {
        // 当抽屉第一次打开时，加载初始数据
        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;
      this.loadStatus = 'loading';

      // --- [模拟API请求] ---
      // 在这里替换成您真实的 uni.request API 调用
      console.log(`正在请求第 ${this.pagination.page} 页数据, 搜索词: "${this.searchQuery}"`);

      getStoreList(this.pagination.page,this.pagination.limit,this.searchQuery).then(res=>{
        let data = res.data;
        let mockData = data.records;
        if (mockData.length > 0) {
          this.storeList = [...this.storeList, ...mockData];
          this.pagination.page++;
          this.loadStatus = mockData.length < this.pagination.limit ? 'noMore' : 'more';
        } else {
          this.loadStatus = 'noMore';
        }
        this.isLoading = false;
      });
    },

    // 滚动到底部加载更多
    handleScrollToLower() {
      this.fetchStoreList();
    },

    // 点击搜索按钮
    handleSearch() {
      this.fetchStoreList(true);
    },

    // 选择了一个门店
    handleStoreSelect(store) {
      // 通过 $emit 将选中的门店数据传递给父组件
      this.$emit('select', store);
      this.close();
    },

    // 关闭抽屉
    close() {
      // 通知父组件关闭
      this.$emit('close');
    }
  }
}
</script>

<style lang="scss" scoped>
.drawer-wrapper {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  z-index: 999;
}

.drawer-overlay {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: rgba(0, 0, 0, 0.4);
}

.drawer-content {
  position: absolute;
  bottom: 0;
  left: 0;
  width: 100%;
  height: 85vh; // 抽屉高度
  background-color: #f5f6fa;
  border-top-left-radius: 20rpx;
  border-top-right-radius: 20rpx;
  display: flex;
  flex-direction: column;
}

.drawer-header {
  position: relative;
  text-align: center;
  padding: 30rpx 0;
  .title {
    font-size: 32rpx;
    font-weight: bold;
  }
  .close-icon {
    position: absolute;
    right: 30rpx;
    top: 50%;
    transform: translateY(-50%);
  }
}

.search-bar {
  display: flex;
  align-items: center;
  background-color: #ffffff;
  border-radius: 50rpx;
  padding: 0 25rpx;
  height: 70rpx;
  margin: 0 30rpx 20rpx;

  .search-input {
    flex: 1;
    font-size: 28rpx;
    margin-left: 15rpx;
  }
  .placeholder {
    color: #b0b0b0;
  }
}

.store-list-scroll {
  flex: 1;
  height: 100%;
  padding: 0 30rpx;
}

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

.store-card {
  background-color: #ffffff;
  border-radius: 16rpx;
  margin-bottom: 20rpx;
  padding: 30rpx;
  border: 2rpx solid transparent; // 占位边框
  transition: border-color 0.2s;

  &.selected {
    border-color: #3c82f8; // 选中时的蓝色边框
  }

  .card-header {
    display: flex;
    align-items: center;
    .store-name {
      font-size: 30rpx;
      font-weight: bold;
      color: #333;
      margin-left: 15rpx;
    }
  }

  .info-row {
    margin-top: 15rpx;
    font-size: 26rpx;
    .info-label { color: #999; }
    .info-value { color: #333; }
  }
}
</style>