scancode-miro/pages/cjx/hexiao/ywy/retail.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>

    <scroll-view scroll-y="true" class="list-container with-padding-bottom">
      <view v-if="storeList.length === 0" class="empty-list">
        <text>没有找到相关门店</text>
      </view>
      <view v-for="store in storeList" :key="store.id" class="store-card">
        <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>
          <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="editStore(store.id)">
              <uni-icons type="compose" size="18" color="#3c82f8"></uni-icons>
              <text>编辑</text>
            </view>
            <view class="action-btn" @click="patrolStore(store.id)">
              <uni-icons type="home-filled" size="18" color="#3c82f8"></uni-icons>
              <text>巡店</text>
            </view>
            <view class="action-btn delete-btn" @click="deleteStore(store.id)">
              <uni-icons type="trash-filled" size="18" color="#e54d42"></uni-icons>
              <text>删除</text>
            </view>
          </view>
        </view>
      </view>
    </scroll-view>

    <view class="fixed-footer">
      <button class="add-store-btn" @click="addNewStore">新增门店</button>
    </view>

    <CustomTabbar :current="1"/>
  </view>
</template>

<script>
// 您自定义tabBar的路径，请确保正确
import CustomTabbar from '@/components/cjx/tabbar_hexiao_ywy.vue';
import {getStoreList,removeRetail} from "../../../../api/hexiao";
export default {
  components: {
    CustomTabbar
  },
  data() {
    return {
      searchQuery: '',
      storeList: [
        // { id: 6, name: '湖北武汉光谷店6', owner: '张三丰', contact: '18812345678', address: '湖北省武汉市洪山区光谷步行街1号' },
      ],
      filteredList: [],
      pagination: {
        page: 1,
        limit: 10,
      },
    };
  },
  onShow(){
    this.fetchStoreList(true);
  },
  onLoad(opt) {

   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;
      });
    },
    handleSearch() {
        this.pagination.page = 1;
        this.fetchStoreList(true);
    },
    viewDetails(id) {
      uni.navigateTo({ url: '/pages/cjx/hexiao/ywy/add_retail?edit=0&id='+id });
      console.log('查看详情 ID:', id);
      },
    editStore(id) {    uni.navigateTo({ url: '/pages/cjx/hexiao/ywy/add_retail?edit=1&id='+id });},
    patrolStore(id) {
      uni.navigateTo({ url: '/pages/cjx/hexiao/ywy/add_patrol?edit=1&id='+id });
    },
    deleteStore(id) {
      let self = this;
      uni.showModal({
        title: '确认删除',
        content: '您确定要删除这家门店吗？此操作不可恢复。',
        confirmColor: '#e54d42',
        success: (res) => {
          if (res.confirm) {
            removeRetail(id).then(() => {
              self.resetSearch();
              uni.showToast({ title: '删除成功', icon: 'success' });
            });
          }
        }
      });
    },
    resetSearch(){
      this.fetchStoreList(true);
    },
    addNewStore() {
      uni.navigateTo({ url: `/pages/cjx/hexiao/ywy/add_retail?edit=1` });
     }
  }
}
</script>

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

.search-wrapper {
  padding: 20rpx;
  background-color: #ffffff;
  position: sticky; top: 0; z-index: 100;
}
.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; padding: 0 20rpx; box-sizing: border-box;
}
/* --- 关键改动 2 --- */
.list-container.with-padding-bottom {
  /* 按钮高度(90+40=130) + tabBar高度(100) + 一点富余 = 250rpx */
  padding-bottom: 250rpx;
}

.empty-list { text-align: center; color: #999; padding-top: 100rpx; }
.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; }
.delete-btn { color: #e54d42; }

.fixed-footer {
  position: fixed;
  /* --- 关键改动 1 --- */
  /* bottom值 = 自定义tabBar的高度(100rpx) + iPhone等机型的底部安全区 */
  bottom: calc(100rpx + constant(safe-area-inset-bottom));
  bottom: calc(100rpx + env(safe-area-inset-bottom));

  left: 0;
  width: 100%;
  background-color: #f5f6fa;
  padding: 20rpx 30rpx;
  box-sizing: border-box;
  z-index: 90; // z-index比tabBar低，但比页面内容高
}

.add-store-btn {
  background-color: #3c82f8;
  color: white;
  border-radius: 50rpx;
  font-size: 32rpx;
  height: 90rpx;
  line-height: 90rpx;
  &::after {
    border: none;
  }
}
</style>