VAVABUY/pagesBuyer/store/index.vue

<template>
  <Theme>
    <view class="wrap">
      <view class="cont_bg" id="tob">
        <Navbar fixed leftShow bgColor="transparent">
          <template #center>
            <view class="nav_title">
              <trans _t="店铺街" />
            </view>
          </template>
        </Navbar>
        <view class="bg_top">
          <view class="search">
            <Search
              v-model="defaultParams.keywords"
              border="none"
              @input="onSearchInput"
              @click="searchClick"
              :placeholder="t('请搜索关键字')"
            >
              <template #prefix>
                <i class="icon-font icon-search"></i>
              </template>
              <template #suffix>
                <i class="icon-font icon-camera"></i>
              </template>
            </Search>
          </view>
        </view>
      </view>

      <!-- 店铺列表 - 使用封装的List组件 -->
      <view class="content">
        <List
          ref="listRef"
          url="/seller/seller/lists"
          :defaultParams="defaultParams"
          @datas="getList"
        >
          <template #item="{ item }">
            <shopItem
              :item="item"
              @click="toShopDetail"
              @productClick="toProductDetail"
            />
          </template>
        </List>
      </view>
    </view>
    <Tabbar page="shop" />
  </Theme>
</template>

<script setup>
import { ref, reactive, watch, onMounted } from "vue";
import Tabbar from "@/components/tabbar";
import Navbar from "@/components/navbar";
import Search from "@/components/input";
import List from "@/components/list";
import shopItem from "./components/shop_item";
import { t } from "@/locale";
import { onShow } from "@dcloudio/uni-app";

// 搜索值
const searchValue = ref("");

// List组件引用
const listRef = ref(null);

// 默认参数
const defaultParams = reactive({
  keywords: "",
  longitude: "",
  latitude: "",
});

// 过滤后的店铺列表
const filteredShops = ref([]);

// 获取地理位置
const getLocation = () => {
  uni.getLocation({
    type: "gcj02",
    success: (res) => {
      defaultParams.longitude = res.longitude.toString();
      defaultParams.latitude = res.latitude.toString();
      console.log("获取位置成功:", res);
    },
    fail: (err) => {
      console.log("获取位置失败:", err);
      // 设置默认位置（北京）
      defaultParams.longitude = "116.397128";
      defaultParams.latitude = "39.916527";
    },
  });
  listRef.value && listRef.value.handleRefresh();
};

// 搜索输入
const onSearchInput = (value) => {
  searchValue.value = value;
  defaultParams.keywords = value;
  listRef.value && listRef.value.handleRefresh();
};

// 搜索点击
const searchClick = () => {
  console.log("搜索:", searchValue.value);
};

// 相机点击
const onCameraClick = () => {
  console.log("相机搜索");
  // 这里可以添加相机搜索功能
};

// 获取列表数据
const getList = (data) => {
  console.log("商品列表数据:", data);
};

// 跳转到店铺详情
const toShopDetail = (shop) => {
  uni.navigateTo({
    url: `/pagesBuyer/store/detail?id=${shop.id}`,
  });
};

// 跳转到商品详情
const toProductDetail = (product) => {
  uni.navigateTo({
    url: `/pagesBuyer/product/detail?id=${product.id}`,
  });
};

onShow(() => {
  getLocation();
});

onMounted(() => {
  getLocation();
});
</script>

<style lang="less" scoped>
@import url("@/style.less");

.wrap {
  min-height: 100vh;
  background: var(--inputBg);
  display: flex;
  flex-direction: column;

  .cont_bg {
    z-index: 88;
    background-color: var(--black);
    .nav_title {
      color: var(--bg);
    }
    .bg_top {
      padding: 0 30rpx;

      .search {
        padding: 26rpx 0 60rpx 0;

        :deep(.u-input) {
          padding: 0 20px 0 16px !important;

          .u-input__content__field-wrapper__field {
            height: 47px;
          }
        }

        .icon-search {
          color: var(--text);
          font-size: 40rpx;
        }

        .icon-camera {
          color: var(--text-01);
          font-size: 70rpx;
        }
      }

      .debug-info {
        padding: 10rpx 0;
        text-align: center;

        text {
          font-size: 24rpx;
          color: var(--primary);
          background: rgba(255, 107, 107, 0.1);
          padding: 8rpx 16rpx;
          border-radius: 20rpx;
        }
      }
    }
  }
  .content {
    width: 100%;
    flex: 1;
    padding: 20rpx 0;
    padding-bottom: calc(90rpx + constant(safe-area-inset-bottom));
    padding-bottom: calc(90rpx + env(safe-area-inset-bottom));
  }
}
</style>