From 4ed7c974477afd9cf06ececd37742ac3379ed4c6 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?=E5=A4=A7=E8=84=8F=E7=8B=BC?= <786316265@qq.com> Date: Thu, 21 Aug 2025 10:56:15 +0800 Subject: [PATCH] =?UTF-8?q?=E5=A2=9E=E5=8A=A0=E7=A7=92=E6=9D=80=E5=92=8C?= =?UTF-8?q?=E7=83=AD=E9=94=80?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- src/views/Shop.vue | 195 +++++++++++++++++++++++++++++++++++++++++++++ 1 file changed, 195 insertions(+) diff --git a/src/views/Shop.vue b/src/views/Shop.vue index c837012..9554365 100644 --- a/src/views/Shop.vue +++ b/src/views/Shop.vue @@ -49,6 +49,59 @@ + +
+ +
+
热销推荐
+
+
+ +
+ {{ product.discount }}折 +
+
+
+

{{ product.name }}

+
+
+ + {{ product.points }} +
+
+ {{ product.originalPoints }} +
+
+
+
+
+ + +
+
秒杀推荐
+
+
+ +
+ {{ product.discount }}折 +
+
+
+

{{ product.name }}

+
+
+ + {{ product.points }} +
+
+ {{ product.originalPoints }} +
+
+
+
+
+
+
@@ -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() }) @@ -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; +} + \ No newline at end of file