feat: 添加商品列表页面和商品项组件

添加了新的商品列表页面 `productList.vue` 和商品项组件 `productItem.vue`，并将商品项组件应用到首页中，以提升代码复用性和维护性。同时更新了页面导航逻辑，点击菜单项将跳转到商品列表页面。

components/productItem.vue

@@ -0,0 +1,133 @@
+<template>
+	<view class="productItem" @click="$emit('click')">
+	    <view class="picture-shop">
+	        <image :src="item.image" mode=""></image>
+	    </view>
+	    <view class="price-shop">
+	        <view class="top-shop">
+	            <text>{{item.name}}</text>
+	            <view class="tag-shop">
+	                <uv-tags :text="item.categoryName || '建材'" type="warning" plain size="mini"></uv-tags>
+	                <uv-tags text="快速下单" type="warning" plain size="mini"></uv-tags>
+	            </view>
+	        </view>
+	        <view class="bottom-price">
+	            <text style="font-size: 40rpx; ">￥{{item.price}}</text>元/{{item.unit}}
+	        </view>
+	    </view>
+	    <view class="buy-shop">
+	        <uv-button 
+	        type="primary" 
+	        shape="circle" 
+	        text="立即购买"></uv-button>
+	    </view>
+	</view>
+</template>
+
+<script>
+	export default {
+		name:"productItem",
+		props : ['item'],
+		data() {
+			return {
+				
+			};
+		}
+	}
+</script>
+
+<style scoped lang="scss">
+
+.productItem {
+    width: 95%;
+    height: 222rpx;
+    display: flex;
+    margin: 30rpx auto;
+    background-color: #ffffff;
+    border-radius: 20rpx;
+    box-shadow: 0 5rpx 15rpx rgba(0, 0, 0, 0.05);
+    transition: transform 0.3s, box-shadow 0.3s;
+
+    &:active {
+        transform: translateY(2rpx);
+        box-shadow: 0 2rpx 10rpx rgba(0, 0, 0, 0.05);
+    }
+
+    // /deep/
+    .picture-shop {
+        width: 240rpx;
+        height: 100%;
+        display: flex;
+        align-items: center;
+        justify-content: center;
+
+        image {
+            width: 200rpx;
+            height: 150rpx;
+        }
+    }
+
+    .price-shop {
+        width: 250rpx;
+        height: 100%;
+
+        .top-shop {
+            height: 100rpx;
+            width: 100%;
+            font-size: 32rpx;
+            margin-top: 20rpx;
+            text-align: center;
+            font-weight: 600;
+            overflow: hidden;
+            text-overflow: ellipsis;
+            white-space: nowrap;
+
+            .tag-shop {
+                display: flex;
+                justify-content: space-around;
+                margin-top: 10rpx;
+            }
+
+            .bottom-price {
+                display: inline-block;
+                font-size: 28rpx;
+                color: #666;
+                text {
+                    color: #DC2828;
+                    font-weight: 700;
+                }
+            }
+        }
+
+    }
+	
+	.buy-shop {
+	    height: 100%;
+	    width: 250rpx;
+	    display: flex;
+	    justify-content: center;
+	    align-items: center;
+	
+	    :deep(.uv-button) {
+	        transition: transform 0.2s;
+	        &:active {
+	            transform: scale(0.95);
+	        }
+	    }
+	}
+
+    @keyframes pulse {
+        0% {
+            transform: scale(1);
+        }
+
+        50% {
+            transform: scale(1.05);
+        }
+
+        100% {
+            transform: scale(1);
+        }
+    }
+}
+</style>

pages.json

@@ -72,6 +72,9 @@
 			{
 				"path": "product/productDetail"
 			},
+			{
+				"path": "product/productList"
+			},
 			{
 				"path": "auth/wxLogin"
 			},

pages/index/index.vue

@@ -49,28 +49,10 @@
         </view>
 
 
-        <view class="shop-list" v-for="(item, index) in list" @click="toGoodInfo(item, index)" :key="index">
-            <view class="picture-shop">
-                <image :src="item.image" mode=""></image>
-            </view>
-            <view class="price-shop">
-                <view class="top-shop">
-                    <text>{{item.name}}</text>
-                    <view class="tag-shop">
-                        <uv-tags :text="item.categoryName" type="warning" plain size="mini"></uv-tags>
-                        <uv-tags text="快速下单" type="warning" plain size="mini"></uv-tags>
-                    </view>
-                </view>
-                <view class="bottom-price">
-                    <text style="font-size: 40rpx; ">￥{{item.price}}</text>元/{{item.unit}}
-                </view>
-            </view>
-            <view class="buy-shop">
-                <uv-button 
-                type="primary" 
-                shape="circle" 
-                text="立即购买"></uv-button>
-            </view>
+        <view class="productList">
+			<productItem 
+			@click="$utils.navigateTo(`/pages_order/product/productDetail?id=${item.id}`)"
+			:item="item" v-for="(item, index) in list" :key="index"/>
         </view>
 		
         <PrivacyAgreementPoup />
@@ -89,13 +71,15 @@
 import PrivacyAgreementPoup from '@/components/config/PrivacyAgreementPoup.vue'
 import tabber from '@/components/base/tabbar.vue'
 import QuickOrderEntry from '@/components/QuickOrderEntry.vue'
+import productItem from '@/components/productItem.vue'
 import mixinsList from '@/mixins/list.js'
 export default {
 	mixins: [mixinsList],
     components: {
         tabber,
         PrivacyAgreementPoup,
-        QuickOrderEntry
+        QuickOrderEntry,
+		productItem,
     },
     data() {
         return {
@@ -145,12 +129,15 @@ export default {
             })
         },
 		menuClick(item){
-			if(!item.url){
-				return
-			}
-            uni.navigateTo({
-                url: item.url,
-            })
+			uni.navigateTo({
+				url: `/pages_order/product/productList?title=${item.title}&iconId=${item.id}`
+			})
+			// if(!item.url){
+			// 	return
+			// }
+   //          uni.navigateTo({
+   //              url: item.url,
+   //          })
 		},
         // 刷新快捷下单信息
         refreshQuickOrder() {
@@ -348,97 +335,7 @@ export default {
         border-radius: 3rpx;
     }
 }
-
-.shop-list {
-    width: 95%;
-    height: 222rpx;
-    display: flex;
-    margin: 30rpx auto;
-    background-color: #ffffff;
-    border-radius: 20rpx;
-    box-shadow: 0 5rpx 15rpx rgba(0, 0, 0, 0.05);
-    transition: transform 0.3s, box-shadow 0.3s;
-
-    &:active {
-        transform: translateY(2rpx);
-        box-shadow: 0 2rpx 10rpx rgba(0, 0, 0, 0.05);
-    }
-
-    // /deep/
-    .picture-shop {
-        width: 240rpx;
-        height: 100%;
-        display: flex;
-        align-items: center;
-        justify-content: center;
-
-        image {
-            width: 200rpx;
-            height: 150rpx;
-        }
-    }
-
-    .price-shop {
-        width: 250rpx;
-        height: 100%;
-
-        .top-shop {
-            height: 100rpx;
-            width: 100%;
-            font-size: 32rpx;
-            margin-top: 20rpx;
-            text-align: center;
-            font-weight: 600;
-            overflow: hidden;
-            text-overflow: ellipsis;
-            white-space: nowrap;
-
-            .tag-shop {
-                display: flex;
-                justify-content: space-around;
-                margin-top: 10rpx;
-            }
-
-            .bottom-price {
-                display: inline-block;
-                font-size: 28rpx;
-                color: #666;
-                text {
-                    color: #DC2828;
-                    font-weight: 700;
-                }
-            }
-        }
-
-    }
+.productList{
 	
-	.buy-shop {
-	    height: 100%;
-	    width: 250rpx;
-	    display: flex;
-	    justify-content: center;
-	    align-items: center;
-	
-	    :deep(.uv-button) {
-	        transition: transform 0.2s;
-	        &:active {
-	            transform: scale(0.95);
-	        }
-	    }
-	}
-
-    @keyframes pulse {
-        0% {
-            transform: scale(1);
-        }
-
-        50% {
-            transform: scale(1.05);
-        }
-
-        100% {
-            transform: scale(1);
-        }
-    }
 }
 </style>

pages_order/product/productList.vue

@@ -0,0 +1,44 @@
+<template>
+	<view class="page">
+		<navbar :title="title" leftClick @leftClick="$utils.navigateBack" />
+		<view class="productList">
+			<productItem
+			@click="$utils.navigateTo(`/pages_order/product/productDetail?id=${item.id}`)"
+			:item="item" v-for="(item, index) in list" :key="index"/>
+		</view>
+	</view>
+</template>
+
+<script>
+	import productItem from '@/components/productItem.vue'
+	import mixinsList from '@/mixins/list.js'
+	export default {
+	mixins: [mixinsList],
+		components : { 
+			productItem,
+		},
+		data() {
+			return {
+				title : '',
+				iconId : 0,
+				mixinsListApi: 'getProductList',
+			}
+		},
+		onLoad({title, iconId}) {
+			this.title = title
+			this.iconId = iconId
+			this.queryParams.iconId = iconId
+		},
+		methods: {
+			
+		}
+	}
+</script>
+
+<style scoped lang="scss">
+.page{
+	.productList{
+		
+	}
+}
+</style>