增加秒杀和热销

src/views/Shop.vue

@@ -49,6 +49,59 @@
       </el-scrollbar>
     </div>
 
+    <!-- 推荐 -->
+    <div class="recommend">
+      <!-- 热销推荐 -->
+      <div class="recommend-grid">
+        <div class="recommend-title">热销推荐</div>
+        <div v-for="(product, index) in hotProducts" :key="index" class="recommend-product" @click="goToProduct(product.id)">
+          <div class="recommend-image">
+            <img :src="product.image" :alt="product.name" />
+            <div v-if="product.discount" class="recommend-discount">
+              {{ product.discount }}折
+            </div>
+          </div>
+          <div class="recommend-content">
+            <h4 class="recommend-name">{{ product.name }}</h4>
+            <div class="recommend-price-container">
+              <div class="recommend-price">
+                <el-icon><Coin /></el-icon>
+                {{ product.points }}
+              </div>
+              <div v-if="product.originalPoints" class="recommend-original-price">
+                {{ product.originalPoints }}
+              </div>
+            </div>
+          </div>
+        </div>
+      </div>
+      
+      <!-- 秒杀推荐 -->
+      <div class="recommend-grid">
+        <div class="recommend-title">秒杀推荐</div>
+        <div v-for="(product, index) in cheapProducts" :key="index" class="recommend-product" @click="goToProduct(product.id)">
+          <div class="recommend-image">
+            <img :src="product.image" :alt="product.name" />
+            <div v-if="product.discount" class="recommend-discount">
+              {{ product.discount }}折
+            </div>
+          </div>
+          <div class="recommend-content">
+            <h4 class="recommend-name">{{ product.name }}</h4>
+            <div class="recommend-price-container">
+              <div class="recommend-price">
+                <el-icon><Coin /></el-icon>
+                {{ product.points }}
+              </div>
+              <div v-if="product.originalPoints" class="recommend-original-price">
+                {{ product.originalPoints }}
+              </div>
+            </div>
+          </div>
+        </div>
+      </div>
+    </div>
+
     <!-- 商品列表 -->
     <div class="products-section">
       <div class="section-header">
@@ -220,6 +273,18 @@ const categories = ref([
   { id: '其他', name: '其他', icon: '📦' }
 ])
 
+//热销商品数据
+const hotProducts = ref([
+  { id: '6', name: '1', discount: '100', points: '9999', originalPoints:'999999' },
+  { id: '10', name: '2', discount: '100', points: '9999', originalPoints:'999999' }
+])
+
+//秒杀推荐数据
+const cheapProducts = ref([
+  { id: '8', name: '1', discount: '100', points: '9999', originalPoints:'999999' },
+  { id: '9', name: '2', discount: '100', points: '9999', originalPoints:'999999' }
+])
+
 // 计算属性
 const filteredProducts = computed(() => {
   let result = products.value
@@ -414,6 +479,26 @@ const truncateText = (text, maxLength) => {
   return text.substring(0, maxLength) + '...'
 }
 
+//获取热销推荐商品
+const getHotProducts = async () => {
+  try {
+    const {data} =await api.get('')
+    hotProducts.value=data.data.products
+  } catch (error) {
+    console.log(error)
+  }
+}
+
+//获取秒杀推荐商品
+const getCheapProducts = async () => {
+  try {
+    const {data} =await api.get('')
+    cheapProducts.value=data.data.products
+  } catch (error) {
+    console.log(error)
+  }
+}
+
 // 生命周期
 onMounted(() => {
   // 检查URL参数中是否有分类
@@ -424,6 +509,8 @@ onMounted(() => {
   
   getProducts()
   getUserPoints()
+  getHotProducts()
+  getCheapProducts()
 })
 </script>
 
@@ -774,4 +861,112 @@ onMounted(() => {
     max-width: 163px;
   }
 }
+
+/* 推荐 */
+.recommend {
+  display: flex;
+  justify-content: space-between;
+  padding: 16px;
+  margin: 16px;
+  background: rgba(255, 255, 255, 0.9);
+  border-radius: 12px;
+  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
+  backdrop-filter: blur(5px);
+  -webkit-backdrop-filter: blur(5px);
+}
+
+.recommend-grid {
+  flex: 1;
+  margin: 0 8px;
+}
+
+.recommend-product {
+  display: flex;
+  align-items: center;
+  width: 144px;
+  height: 54px;
+  background: rgba(255, 255, 255, 0.95);
+  border-radius: 8px;
+  padding: 6px;
+  margin-bottom: 8px;
+  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.08);
+  transition: all 0.3s ease;
+}
+
+.recommend-product:hover {
+  transform: translateY(-2px);
+  box-shadow: 0 4px 10px rgba(0, 0, 0, 0.12);
+}
+
+.recommend-image {
+  position: relative;
+  width: 42px;
+  height: 42px;
+  flex-shrink: 0;
+  margin-right: 8px;
+  border-radius: 6px;
+  overflow: hidden;
+}
+
+.recommend-image img {
+  width: 100%;
+  height: 100%;
+  object-fit: cover;
+}
+
+.recommend-discount {
+  position: absolute;
+  top: 2px;
+  right: 2px;
+  background: #ff4757;
+  color: white;
+  padding: 1px 4px;
+  border-radius: 3px;
+  font-size: 10px;
+  line-height: 1;
+}
+
+.recommend-content {
+  flex: 1;
+  display: flex;
+  flex-direction: column;
+  justify-content: center;
+  overflow: hidden;
+}
+
+.recommend-name {
+  margin: 0;
+  font-size: 12px;
+  font-weight: 500;
+  color: #333;
+  line-height: 1.3;
+  white-space: nowrap;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  margin-bottom: 3px;
+}
+
+.recommend-price-container {
+  display: flex;
+  flex-direction: column;
+  gap: 1px;
+}
+
+.recommend-price {
+  display: flex;
+  align-items: center;
+  gap: 2px;
+  color: #ff6b35;
+  font-weight: 600;
+  font-size: 12px;
+  line-height: 1;
+}
+
+.recommend-original-price {
+  color: #999;
+  font-size: 10px;
+  text-decoration: line-through;
+  line-height: 1;
+}
+
 </style>