Ver código fonte

更多商品

lilei 4 anos atrás
pai
commit
0b8869d35b
3 arquivos alterados com 119 adições e 2 exclusões
  1. 92 0
      pages/goods/goods.vue
  2. 19 0
      pages/goods/goodsDetail.vue
  3. 8 2
      pages/index/index.vue

+ 92 - 0
pages/goods/goods.vue

@@ -0,0 +1,92 @@
+<template>
+	<view class="content">
+		<view class="info">该类商品需购满300乐豆才能下单哦!</view>
+		<view class="goods-list" v-if="goodsList.length">
+			<uni-coods v-for="item in goodsList" :key="item.id" :data="item"></uni-coods>
+		</view>
+		<!-- 购物车 -->
+		<uni-cart-fix :count="15"></uni-cart-fix>
+	</view>
+</template>
+
+<script>
+	export default {
+		data() {
+			return {
+				clsId: '',
+				goodsList:[
+					{
+						id: 21312312321,
+						name: '啊撒旦解放拉萨酱豆腐爱丽丝反对萨拉地方就',
+						src: 'https://cdn.uviewui.com/uview/example/fade.jpg',
+						price: 50,
+						status: 0
+					},
+					{
+						id: 6465465465,
+						name: '啊撒旦解放拉萨酱豆腐爱丽丝反对萨拉地方就',
+						src: 'https://cdn.uviewui.com/uview/example/fade.jpg',
+						price: 50,
+						status: 1
+					},
+					{
+						id: 234324,
+						name: '啊撒旦解放拉萨酱豆腐爱丽丝反对萨拉地方就',
+						src: 'https://cdn.uviewui.com/uview/example/fade.jpg',
+						price: 50,
+						status: 0
+					},
+					{
+						id: 4453455,
+						name: '啊撒旦解放拉萨酱豆腐爱丽丝反对萨拉地方就',
+						src: 'https://cdn.uviewui.com/uview/example/fade.jpg',
+						price: 50,
+						status: 0
+					},
+					{
+						id: 22222,
+						name: '啊撒旦解放拉萨酱豆腐爱丽丝反对萨拉地方就',
+						src: 'https://cdn.uviewui.com/uview/example/fade.jpg',
+						price: 50,
+						status: 0
+					},
+					{
+						id: 345,
+						name: '啊撒旦解放拉萨酱豆腐爱丽丝反对萨拉地方就',
+						src: 'https://cdn.uviewui.com/uview/example/fade.jpg',
+						price: 50,
+						status: 0
+					},
+					{
+						id: 456456,
+						name: '啊撒旦解放拉萨酱豆腐爱丽丝反对萨拉地方就',
+						src: 'https://cdn.uviewui.com/uview/example/fade.jpg',
+						price: 50,
+						status: 0
+					}
+				]
+			};
+		},
+		onLoad(opts) {
+			this.clsId = opts.id
+		}
+	}
+</script>
+
+<style lang="scss">
+   .content {
+		.goods{
+			padding: 20upx 0;
+		}
+		.goods-list{
+			padding: 20upx 0;
+			display: flex;
+			flex-wrap: wrap;
+			justify-content: space-between;
+		}
+		.info{
+			text-align: center;
+			color: #DD524D;
+		}
+	}
+</style>

+ 19 - 0
pages/goods/goodsDetail.vue

@@ -0,0 +1,19 @@
+<template>
+	<view>
+		
+	</view>
+</template>
+
+<script>
+	export default {
+		data() {
+			return {
+				
+			};
+		}
+	}
+</script>
+
+<style lang="scss">
+
+</style>

+ 8 - 2
pages/index/index.vue

@@ -3,11 +3,11 @@
 		<u-swiper height="200" :list="imageTopList"></u-swiper>
 		<!-- 商品 -->
 		<view class="goods">
-			<u-section title="人气零食" v-if="goodsList.length" :show-line="false" sub-title="更多"></u-section>
+			<u-section title="人气零食" v-if="goodsList.length" :show-line="false" sub-title="更多" @click="toGoods(1)"></u-section>
 			<view class="goods-list" v-if="goodsList.length">
 				<uni-coods v-for="item in goodsList" :key="item.id" :data="item"></uni-coods>
 			</view>
-			<u-section title="居家生活" v-if="goodsList.length" :show-line="false" sub-title="更多"></u-section>
+			<u-section title="居家生活" v-if="goodsList.length" :show-line="false" sub-title="更多" @click="toGoods(2)"></u-section>
 			<view class="goods-list" v-if="goodsList.length">
 				<uni-coods v-for="item in goodsList" :key="item.id" :data="item"></uni-coods>
 			</view>
@@ -78,6 +78,12 @@
 		onLoad() {
 		},
 		methods: { 
+			// 更多商品
+			toGoods(clsId){
+				uni.navigateTo({
+					url:"/pages/goods/goods?id="+clsId
+				})
+			}
 		}
 	}
 </script>