VAVABUY/pagesBuyer/store/detail.vue

<template>
  <Theme>
    <view class="wrap">
      <!-- 黑色导航栏 -->
      <Navbar fixed leftIconColor="var(--light)" :bgColor="'var(--black)'">
        <template #center>
          <view class="nav_search">
            <Search
              v-model="searchValue"
              border="none"
              @input="onSearchInput"
              @click="onSearchClick"
              :placeholder="t('请输入商品链接或关键字')"
            >
              <template #prefix>
                <i class="icon-font icon-search"></i>
              </template>
            </Search>
          </view>
        </template>
      </Navbar>

      <!-- 店铺信息区域 -->
      <view class="shop-info-section">
        <view class="shop-header">
          <view class="shop-avatar">
            <image :src="shopInfo.avatar" mode="aspectFill" />
          </view>
          <view class="shop-details">
            <view class="shop-name">{{ shopInfo.name }}</view>
            <view class="shop-stats">
              <text class="followers">{{ shopInfo.followers }}粉丝</text>
              <text class="divider">|</text>
              <text class="rating">{{ shopInfo.rating }}%好评率</text>
            </view>
          </view>
          <view class="follow-btn" @click="toggleFollow">
            <i class="icon-font icon-plus"></i>
            <text>{{ isFollowed ? "已关注" : "关注" }}</text>
          </view>
        </view>
      </view>

      <!-- 商品列表 -->
      <view class="content">
        <List
          ref="listRef"
          :defaultParams="defaultParams"
          @datas="getList"
          :isLoading="false"
        >
          <template #item="{ item }">
            <productItem
              :item="item"
              @click="toProductDetail"
              @favorite="toggleProductFavorite"
            />
          </template>
        </List>
      </view>
    </view>
    <Tabbar page="shop" />
  </Theme>
</template>

<script setup>
import { ref, reactive, onMounted } from "vue";
import Tabbar from "@/components/tabbar";
import Navbar from "@/components/navbar";
import Search from "@/components/input";
import List from "@/components/list";
import productItem from "./components/product_item";
import { t } from "@/locale";
import { onLoad } from "@dcloudio/uni-app";
import { SELLER_SELLER_INFO } from "@/api";

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

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

// 默认参数
const defaultParams = reactive({
  keyWord: "",
  id: "",
});

// 店铺信息
const shopInfo = ref({
  id: 1,
  name: "香皂旗舰店",
  avatar: "/static/shop/shop1.png",
  followers: 100,
  rating: 90,
});

// 是否已关注
const isFollowed = ref(false);

// 商品数据
const products = ref([
  {
    id: 1,
    image: "/static/products/product1.jpg",
    title: "种草这24cm不粘锅....",
    sales: "已售3000+",
    currentPrice: "80.20",
    originalPrice: "1380.00",
    isVideo: true,
    isFavorite: false,
  },
  {
    id: 2,
    image: "/static/products/product2.jpg",
    title: "#时尚锋芒计划",
    sales: "已售30万+",
    currentPrice: "210.99",
    originalPrice: "1380.00",
    isVideo: true,
    isFavorite: false,
  },
  {
    id: 3,
    image: "/static/products/product3.jpg",
    title: "种草这24cm不粘锅...",
    sales: "已售200+",
    currentPrice: "2100.00",
    originalPrice: "2380.00",
    isVideo: false,
    isFavorite: false,
  },
  {
    id: 4,
    image: "/static/products/product4.jpg",
    title: "种草这24cm不粘锅...",
    sales: "已售300+",
    currentPrice: "10.60",
    originalPrice: "13.00",
    isVideo: false,
    isFavorite: false,
  },
  {
    id: 5,
    image: "/static/products/product5.jpg",
    title: "种草这24cm不粘锅...",
    sales: "已售30",
    currentPrice: "2100.00",
    originalPrice: "2380.00",
    isVideo: false,
    isFavorite: false,
  },
  {
    id: 6,
    image: "/static/products/product6.jpg",
    title: "种草这24cm不粘锅...",
    sales: "已售100+",
    currentPrice: "10.60",
    originalPrice: "13.00",
    isVideo: false,
    isFavorite: false,
  },
]);

// 过滤后的商品列表
const filteredProducts = ref([]);

// 搜索输入
const onSearchInput = (value) => {
  searchValue.value = value;
  defaultParams.keyWord = value;
  // 触发列表刷新
  if (listRef.value) {
    listRef.value.handleRefresh();
  }
};

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

// Tab切换
const onTabChange = (index) => {
  currentTab.value = index;
  // 根据Tab切换商品分类
  const category = tabList.value[index].name;
  defaultParams.category = category;
  // 刷新列表
  if (listRef.value) {
    listRef.value.handleRefresh();
  }
};

// 切换关注状态
const toggleFollow = () => {
  isFollowed.value = !isFollowed.value;
  console.log("关注状态:", isFollowed.value);
};

// 获取列表数据
const getList = (data) => {
  // 模拟搜索过滤
  if (searchValue.value.trim()) {
    const keyword = searchValue.value.toLowerCase();
    filteredProducts.value = products.value.filter((product) =>
      product.title.toLowerCase().includes(keyword)
    );
  } else {
    filteredProducts.value = products.value;
  }

  // 设置到List组件
  if (listRef.value) {
    listRef.value.setList(filteredProducts.value);
  }
};

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

// 切换商品收藏状态
const toggleProductFavorite = (product) => {
  product.isFavorite = !product.isFavorite;
  console.log("商品收藏状态:", product.isFavorite);
};

const getDetail = async () => {
  try {
    const res = await SELLER_SELLER_INFO(defaultParams);
    shopInfo.value = res.data;
    isCollect.value = res.data.isCollect ? true : false;
  } catch (error) {
    Toast(error.msg);
  }
};
onLoad((options) => {
  if (options.id) {
    defaultParams.id = options.id;
    getDetail();
  }

  // 初始化数据
  getList();
});
</script>

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

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

  .nav_search {
    flex: 1;
    padding: 0 40rpx 0 80rpx;

    :deep(.u-input) {
      padding: 0 26rpx !important;
      background: var(--light);
      backdrop-filter: blur(20rpx);
      color: var(--text-01);

      .u-input__content__field-wrapper__field {
        color: var(--text-01);
      }

      .u-input__content__field-wrapper__field::placeholder {
        color: rgba(255, 255, 255, 0.7);
      }
    }

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

  .shop-info-section {
    padding: 30rpx;
    background: var(--black);
    border-bottom: 1rpx solid var(--border);

    .shop-header {
      display: flex;
      align-items: center;

      .shop-avatar {
        width: 100rpx;
        height: 100rpx;
        border-radius: 50%;
        overflow: hidden;
        margin-right: 20rpx;
        background: var(--primary);

        image {
          width: 100%;
          height: 100%;
        }
      }

      .shop-details {
        flex: 1;

        .shop-name {
          font-size: 32rpx;
          font-weight: bold;
          color: var(--black);
          margin-bottom: 8rpx;
        }

        .shop-stats {
          display: flex;
          align-items: center;
          font-size: 24rpx;
          color: var(--text-01);

          .divider {
            margin: 0 8rpx;
            color: var(--text-02);
          }
        }
      }

      .follow-btn {
        display: flex;
        align-items: center;
        gap: 8rpx;
        padding: 12rpx 24rpx;
        background: var(--light);
        border: 1rpx solid var(--border);
        border-radius: 40rpx;
        color: var(--black);
        font-size: 24rpx;
        font-weight: bold;

        .icon-plus {
          font-size: 20rpx;
        }
      }
    }
  }

  .content {
    flex: 1;
    padding: 20rpx 30rpx;
    padding-bottom: calc(90rpx + constant(safe-area-inset-bottom));
    padding-bottom: calc(90rpx + env(safe-area-inset-bottom));

    // 网格布局样式
    :deep(.list-container) {
      display: grid;
      grid-template-columns: 1fr 1fr;
      gap: 20rpx;
    }
  }
}
</style>