VAVABUY/pagesBuyer/shop/detail.vue

<template>
  <Theme>
    <view class="wrap">
      <Navbar fixed leftIconColor="var(--black)">
        <template #center>
          <view class="nav_title">
            {{ shopInfo.name || "店铺详情" }}
          </view>
        </template>
        <template #right>
          <view class="nav_right" @click="toggleFavorite">
            <i
              class="icon-font"
              :class="isFavorite ? 'icon-heart-fill' : 'icon-heart'"
            ></i>
          </view>
        </template>
      </Navbar>

      <!-- 店铺头部信息 -->
      <view class="shop-header">
        <view class="shop-avatar">
          <image :src="shopInfo.avatar" class="avatar-img" />
          <view class="shop-status" :class="shopInfo.status">
            {{ shopInfo.status === "online" ? "营业中" : "休息中" }}
          </view>
        </view>

        <view class="shop-info">
          <view class="shop-name">{{ shopInfo.name }}</view>
          <view class="shop-desc">{{ shopInfo.description }}</view>
          <view class="shop-stats">
            <view class="stat-item">
              <text class="stat-label">评分:</text>
              <text class="stat-value">{{ shopInfo.rating }}</text>
              <text class="stat-unit">分</text>
            </view>
            <view class="stat-item">
              <text class="stat-label">销量:</text>
              <text class="stat-value">{{ shopInfo.sales }}</text>
              <text class="stat-unit">件</text>
            </view>
            <view class="stat-item">
              <text class="stat-label">距离:</text>
              <text class="stat-value">{{ shopInfo.distance }}</text>
            </view>
          </view>
        </view>
      </view>

      <!-- 店铺标签 -->
      <view class="shop-tags">
        <text class="tag" v-for="tag in shopInfo.tags" :key="tag">
          {{ tag }}
        </text>
      </view>

      <!-- 店铺功能按钮 -->
      <view class="shop-actions">
        <view class="action-btn" @click="contactShop">
          <i class="icon-font icon-chat"></i>
          <text>联系店铺</text>
        </view>
        <view class="action-btn" @click="viewLocation">
          <i class="icon-font icon-location"></i>
          <text>查看位置</text>
        </view>
        <view class="action-btn" @click="shareShop">
          <i class="icon-font icon-share"></i>
          <text>分享店铺</text>
        </view>
      </view>

      <!-- 商品分类 -->
      <view class="category-section">
        <view class="section-title">商品分类</view>
        <view class="category-list">
          <view
            class="category-item"
            v-for="category in categories"
            :key="category.id"
            @click="selectCategory(category)"
            :class="{ active: selectedCategory === category.id }"
          >
            <image :src="category.icon" class="category-icon" />
            <text class="category-name">{{ category.name }}</text>
          </view>
        </view>
      </view>

      <!-- 商品列表 -->
      <view class="products-section">
        <view class="section-title">热销商品</view>
        <view class="products-grid">
          <view
            class="product-item"
            v-for="product in products"
            :key="product.id"
            @click="toProductDetail(product)"
          >
            <image :src="product.image" class="product-image" />
            <view class="product-info">
              <text class="product-name">{{ product.name }}</text>
              <view class="product-price">
                <text class="current-price"
                  >{{ symbol.symbol }}{{ product.price }}</text
                >
                <text class="original-price" v-if="product.originalPrice"
                  >{{ symbol.symbol }}{{ product.originalPrice }}</text
                >
              </view>
              <view class="product-sales">已售{{ product.sales }}件</view>
            </view>
          </view>
        </view>
      </view>
    </view>
  </Theme>
</template>

<script setup>
import { ref, computed, onMounted } from "vue";
import Navbar from "@/components/navbar";
import { useSystemStore } from "@/store";
import { t } from "@/locale";
import { onLoad } from "@dcloudio/uni-app";

const useSystem = useSystemStore();
const symbol = computed(() => useSystem.getSymbol);

// 店铺信息
const shopInfo = ref({
  id: 1,
  name: "时尚潮流店",
  description: "专注时尚潮流服饰，品质保证，为您提供最优质的商品和服务",
  avatar: "/static/shop/shop1.png",
  rating: 4.8,
  sales: 1234,
  distance: "1.2km",
  status: "online",
  tags: ["时尚", "潮流", "品质", "正品"],
});

// 是否收藏
const isFavorite = ref(false);

// 选中的分类
const selectedCategory = ref(1);

// 商品分类
const categories = ref([
  { id: 1, name: "全部", icon: "/static/shop/category_all.png" },
  { id: 2, name: "上衣", icon: "/static/shop/category_top.png" },
  { id: 3, name: "裤子", icon: "/static/shop/category_pants.png" },
  { id: 4, name: "鞋子", icon: "/static/shop/category_shoes.png" },
  { id: 5, name: "配饰", icon: "/static/shop/category_accessories.png" },
]);

// 商品列表
const products = ref([
  {
    id: 1,
    name: "时尚T恤",
    image: "/static/shop/product1.png",
    price: "99.00",
    originalPrice: "129.00",
    sales: 234,
  },
  {
    id: 2,
    name: "休闲牛仔裤",
    image: "/static/shop/product2.png",
    price: "199.00",
    originalPrice: "259.00",
    sales: 156,
  },
  {
    id: 3,
    name: "运动鞋",
    image: "/static/shop/product3.png",
    price: "299.00",
    originalPrice: "399.00",
    sales: 89,
  },
  {
    id: 4,
    name: "时尚帽子",
    image: "/static/shop/product4.png",
    price: "59.00",
    originalPrice: "79.00",
    sales: 67,
  },
]);

// 切换收藏状态
const toggleFavorite = () => {
  isFavorite.value = !isFavorite.value;
  uni.showToast({
    title: isFavorite.value ? "已收藏" : "已取消收藏",
    icon: "none",
  });
};

// 联系店铺
const contactShop = () => {
  uni.showToast({
    title: "联系店铺功能开发中",
    icon: "none",
  });
};

// 查看位置
const viewLocation = () => {
  uni.showToast({
    title: "查看位置功能开发中",
    icon: "none",
  });
};

// 分享店铺
const shareShop = () => {
  uni.showToast({
    title: "分享店铺功能开发中",
    icon: "none",
  });
};

// 选择分类
const selectCategory = (category) => {
  selectedCategory.value = category.id;
  // 这里可以根据分类筛选商品
  console.log("选择分类:", category.name);
};

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

onLoad((options) => {
  // 从页面参数获取店铺信息
  if (options.id) {
    shopInfo.value.id = options.id;
  }
  if (options.name) {
    shopInfo.value.name = decodeURIComponent(options.name);
  }
});

onMounted(() => {
  // 页面加载完成后的逻辑
});
</script>

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

.wrap {
  min-height: 100vh;
  background: var(--bg);
  padding-bottom: 30rpx;

  .nav_title {
    color: var(--black);
    font-size: 36rpx;
    font-weight: bold;
  }

  .nav_right {
    color: var(--primary);
    font-size: 40rpx;
  }

  .shop-header {
    display: flex;
    align-items: center;
    background: var(--light);
    padding: 30rpx;
    margin-bottom: 20rpx;

    .shop-avatar {
      position: relative;
      margin-right: 24rpx;

      .avatar-img {
        width: 120rpx;
        height: 120rpx;
        border-radius: 20rpx;
      }

      .shop-status {
        position: absolute;
        bottom: -8rpx;
        left: 50%;
        transform: translateX(-50%);
        font-size: 20rpx;
        padding: 4rpx 12rpx;
        border-radius: 20rpx;
        color: var(--light);

        &.online {
          background: var(--success);
        }

        &.offline {
          background: var(--text-01);
        }
      }
    }

    .shop-info {
      flex: 1;

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

      .shop-desc {
        font-size: 24rpx;
        color: var(--text-01);
        margin-bottom: 16rpx;
        line-height: 1.4;
      }

      .shop-stats {
        display: flex;
        gap: 24rpx;

        .stat-item {
          display: flex;
          align-items: center;

          .stat-label {
            font-size: 22rpx;
            color: var(--text-01);
            margin-right: 4rpx;
          }

          .stat-value {
            font-size: 24rpx;
            color: var(--black);
            font-weight: bold;
            margin-right: 4rpx;
          }

          .stat-unit {
            font-size: 20rpx;
            color: var(--text-01);
          }
        }
      }
    }
  }

  .shop-tags {
    padding: 0 30rpx 20rpx;
    display: flex;
    gap: 12rpx;
    flex-wrap: wrap;

    .tag {
      font-size: 22rpx;
      color: var(--primary);
      background: rgba(255, 107, 107, 0.1);
      padding: 8rpx 16rpx;
      border-radius: 20rpx;
    }
  }

  .shop-actions {
    display: flex;
    padding: 0 30rpx 30rpx;
    gap: 20rpx;

    .action-btn {
      flex: 1;
      display: flex;
      flex-direction: column;
      align-items: center;
      background: var(--light);
      padding: 24rpx 16rpx;
      border-radius: 16rpx;

      .icon-font {
        font-size: 40rpx;
        color: var(--primary);
        margin-bottom: 8rpx;
      }

      text {
        font-size: 24rpx;
        color: var(--black);
      }
    }
  }

  .category-section,
  .products-section {
    padding: 0 30rpx 30rpx;

    .section-title {
      font-size: 32rpx;
      font-weight: bold;
      color: var(--black);
      margin-bottom: 20rpx;
    }
  }

  .category-list {
    display: flex;
    gap: 20rpx;
    overflow-x: auto;
    padding-bottom: 10rpx;

    .category-item {
      display: flex;
      flex-direction: column;
      align-items: center;
      min-width: 120rpx;
      padding: 20rpx 16rpx;
      background: var(--light);
      border-radius: 16rpx;
      border: 2rpx solid transparent;

      &.active {
        border-color: var(--primary);
        background: rgba(255, 107, 107, 0.05);
      }

      .category-icon {
        width: 48rpx;
        height: 48rpx;
        margin-bottom: 8rpx;
      }

      .category-name {
        font-size: 22rpx;
        color: var(--black);
        text-align: center;
      }
    }
  }

  .products-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 20rpx;

    .product-item {
      background: var(--light);
      border-radius: 16rpx;
      overflow: hidden;

      .product-image {
        width: 100%;
        height: 200rpx;
        object-fit: cover;
      }

      .product-info {
        padding: 16rpx;

        .product-name {
          font-size: 24rpx;
          color: var(--black);
          margin-bottom: 8rpx;
          display: -webkit-box;
          -webkit-line-clamp: 2;
          line-clamp: 2;
          -webkit-box-orient: vertical;
          overflow: hidden;
        }

        .product-price {
          display: flex;
          align-items: center;
          margin-bottom: 8rpx;

          .current-price {
            font-size: 28rpx;
            font-weight: bold;
            color: var(--red);
            margin-right: 8rpx;
          }

          .original-price {
            font-size: 20rpx;
            color: var(--text-01);
            text-decoration: line-through;
          }
        }

        .product-sales {
          font-size: 20rpx;
          color: var(--text-01);
        }
      }
    }
  }
}
</style>