-
-
- ![]()
-
-
- {{ product.name }}
+
+
+
+
+ {{ filter.name }}
-
-
- {{ product.points_price }}
-
- 
-
+
+
- {{ product.rongdou_price }}
+
+ 
+
+
+
+ 你有优惠券待领取
+
+
+
+
@@ -50,6 +65,7 @@ const searchKeyword = ref(route.params.name)
const sortBy = ref('')
const products = ref([])
+const filteredProducts = ref([])
const loading = ref(false)
const loadingMore = ref(false)
const page = ref(1)
@@ -58,6 +74,55 @@ const selectedCategory = ref('all')
const couponExist = ref(false)
+const isGridStyle = ref(false)
+
+const filters = ref([{
+ name: '默认',
+ sort: 'null'
+}, {
+ name: '价格高到低',
+ sort: 'price_desc'
+}, {
+ name: '价格低到高',
+ sort: 'price_asc'
+}, {
+ name: '销量',
+ sort: 'sales_desc'
+}])
+
+const switchFilter = (index) => {
+ filters.value.forEach((filter, i) => {
+ filter.active = i === index
+ })
+
+ const selectedFilter = filters.value[index]
+ sortProducts(selectedFilter.sort)
+}
+
+const sortProducts = (sortType) => {
+ switch (sortType) {
+ case 'null':
+ filteredProducts.value = products.value
+ break
+ case 'price_desc':
+ filteredProducts.value = products.value.sort((a, b) => b.points_price - a.points_price)
+ break
+ case 'price_asc':
+ filteredProducts.value = products.value.sort((a, b) => a.points_price - b.points_price)
+ break
+ case 'sales_desc':
+ filteredProducts.value = products.value.sort((a, b) => b.sales - a.sales)
+ break
+ default:
+ filteredProducts.value = products.value
+ break
+ }
+}
+
+const changeStyle = () => {
+ isGridStyle.value = !isGridStyle.value
+}
+
const getProducts = async (isLoadMore = false) => {
try {
if (!isLoadMore) {
@@ -98,6 +163,7 @@ const getProducts = async (isLoadMore = false) => {
hasMore.value = data.data.hasMore
page.value++
+ filteredProducts.value = products.value
} catch (error) {
ElMessage.error('获取商品列表失败')
console.error('获取商品列表失败:', error)
@@ -144,6 +210,7 @@ watch(searchKeyword, (newVal, oldVal) => {
onMounted(() => {
isCouponExist()
getProducts()
+ filters.value[0].active = true
})
@@ -183,6 +250,40 @@ onMounted(() => {
border-radius: 400px;
}
+.product-header {
+ display: flex;
+ align-items: center;
+}
+
+.product-filter {
+ display: flex;
+ align-items: center;
+ gap: 10px;
+}
+
+.filter {
+ font-size: 12px;
+ padding: 5px 10px;
+ border-radius: 20px;
+}
+
+.filter.active {
+ color: #305DEF;
+}
+
+.filter:hover {
+ color: #305DEF;
+}
+
+.style-btn {
+ margin-left: auto;
+}
+
+.img-style {
+ width: 12px;
+ height: 12px;
+}
+
.coupon-announcer {
width: 100%;
text-align: center;
@@ -195,12 +296,12 @@ onMounted(() => {
padding-left: 10px;
}
-.product-list {
+.product-list1 {
display: flex;
flex-wrap: wrap;
}
-.product-item {
+.product-item1 {
width: 200px;
margin: 10px;
display: flex;
@@ -210,13 +311,13 @@ onMounted(() => {
max-height: 110px;
}
-.product-image {
+.product-image1 {
width: 110px;
height: 110px;
flex-shrink: 0;
}
-.price-info {
+.price-info1 {
display: flex;
align-items: flex-start;
gap: 4px;
@@ -225,18 +326,76 @@ onMounted(() => {
flex: 1;
}
-.product-content-name {
+.product-content-name1 {
font-size: 16px;
padding: 0 10px;
}
-.product-content-price {
+.product-content-price1 {
font-size: 12px;
color: #ff6b00;
}
-.img-bean {
+.img-bean1 {
width: 16px;
height: 16px;
}
+
+.product-list2 {
+ display: grid;
+ grid-template-columns: repeat(2, 1fr);
+ column-gap: 26px;
+ row-gap: 14px;
+ justify-content: center;
+}
+
+.product-item2 {
+ width: 100%;
+ height: 240px;
+ border-radius: 5px;
+ background-color: #fff;
+ display: flex;
+ flex-direction: column;
+ justify-self: center;
+}
+
+.product-image2 {
+ width: 100%;
+ height: 153px;
+ border-radius: 5px 5px 0 0;
+ flex-shrink: 0;
+}
+
+.product-content-name2 {
+ font-size: 12px;
+ text-align: left;
+ display: -webkit-box;
+ -webkit-line-clamp: 2;
+ line-clamp: 2;
+ -webkit-box-orient: vertical;
+ overflow: hidden;
+ line-height: 1.4;
+ min-height: 2.8em;
+ padding: 3px 10px;
+}
+
+.price-info2 {
+ display: flex;
+ align-items: center;
+ gap: 4px;
+ margin-top: auto;
+ padding: 0 10px;
+ padding-bottom: 5px;
+}
+
+.product-content-price2 {
+ font-size: 12px;
+ color: #ff6b00;
+}
+
+.img-bean2 {
+ width: 16px;
+ height: 16px;
+}
+
diff --git a/src/views/Shop.vue b/src/views/Shop.vue
index 1707c97..2ffdc57 100644
--- a/src/views/Shop.vue
+++ b/src/views/Shop.vue
@@ -63,15 +63,15 @@ const selectedCategory = ref('all')
const shopBarItems = [
{name: '商品分类',img: '/imgs/shop/1.png',path: '/productCategory'},
- {name: '2',img: '/imgs/shop/2.png',path: ''},
- {name: '3',img: '/imgs/shop/3.png',path: ''},
- {name: '4',img: '/imgs/shop/4.png',path: ''},
- {name: '5',img: '/imgs/shop/5.png',path: ''},
- {name: '6',img: '/imgs/shop/6.png',path: ''},
- {name: '7',img: '/imgs/shop/7.png',path: ''},
- {name: '8',img: '/imgs/shop/8.png',path: ''},
- {name: '9',img: '/imgs/shop/9.png',path: ''},
- {name: '10',img: '/imgs/shop/10.png',path: ''},
+ {name: '观看直播',img: '/imgs/shop/2.png',path: ''},
+ {name: '违规通告',img: '/imgs/shop/3.png',path: ''},
+ {name: '百亿补贴',img: '/imgs/shop/4.png',path: ''},
+ {name: '现时秒杀',img: '/imgs/shop/5.png',path: ''},
+ {name: '会员专区',img: '/imgs/shop/6.png',path: ''},
+ {name: '商品收藏',img: '/imgs/shop/7.png',path: ''},
+ {name: '充值缴费',img: '/imgs/shop/8.png',path: ''},
+ {name: '资质认证',img: '/imgs/shop/9.png',path: ''},
+ {name: '联系客服',img: '/imgs/shop/10.png',path: ''},
]
const getProducts = async (isLoadMore = false) => {
diff --git a/vite.config.js b/vite.config.js
index 4ce0d23..9e2c7bb 100644
--- a/vite.config.js
+++ b/vite.config.js
@@ -11,15 +11,15 @@ export default defineConfig({
}
},
server: {
- host: '0.0.0.0', // 添加这一行
+ host: '0.0.0.0',
port: 5173,
proxy: {
'/api': {
- target: 'http://localhost:3000',
+ target: 'http://192.168.0.26:3000',
changeOrigin: true
},
'/uploads': {
- target: 'http://localhost:3000',
+ target: 'http://192.168.0.26:3000',
changeOrigin: true
}
}
+ ![]()
+
+
+ {{ product.name }}
+
+
+
+ {{ product.points_price }}
+
+
+
+ {{ product.rongdou_price }}
+