lilei 4 سال پیش
والد
کامیت
8eafef7527

+ 61 - 0
components/uni-coods/uni-coods.vue

@@ -0,0 +1,61 @@
+<template>
+	<view class="goods-item">
+		<u-lazy-load img-mode="scaleToFill" :height="imgHeight" :image="data.src" :loading-img="loadingImg" :error-img="errorImg"></u-lazy-load>
+		<view class="name">{{data.name}}</view>
+		<view class="price">
+			<view><text>{{data.price}}</text>乐豆</view>
+			<view><u-image width="48rpx" height="48rpx" src="/static/add-cart.png"></u-image></view>
+		</view>
+	</view>
+</template>
+
+<script>
+	export default {
+		props: {
+			imgHeight: {
+				type: Number,
+				default: 250
+			},
+			data:{
+				type: Object,
+				default: function(){
+					return {}
+				}
+			}
+		},
+		data() {
+			return {
+				loadingImg: '/static/loading.gif',
+				errorImg: '/static/imgError.png'
+			}
+		}
+	}
+</script>
+
+<style lang="scss">
+.goods-item{
+	background: #FFFFFF;
+	box-shadow: 1px 1px 3px #eee;
+	width: 48%;
+	margin-bottom: 35upx;
+	.name{
+		padding: 10upx 20upx 0;
+	}
+	.price{
+		display: flex;
+		align-items: center;
+		justify-content: space-between;
+		padding: 15upx 20upx;
+		text{
+			color: red;
+			font-size: 36upx;
+			margin-right: 6upx;
+		}
+		>view{
+			&:first-child{
+				font-size: 22upx;
+			}
+		}
+	}
+}
+</style>

+ 4 - 8
pages.json

@@ -39,7 +39,7 @@
 				"navigationBarTitleText": "注意事项及服务协议"
 			}
 		}
-	],
+    ],
 	"globalStyle": {
 		"navigationBarTextStyle": "white",
 		"navigationBarTitleText": "uni-app",
@@ -62,13 +62,9 @@
 			"iconPath": "static/tabbar/home.png",
 			"selectedIconPath": "static/tabbar/home-active.png",
 			"text": "首页"
-		}, {
-			"pagePath": "pages/work/work",
-			"iconPath": "static/tabbar/work.png",
-			"selectedIconPath": "static/tabbar/work-active.png",
-			"text": "工作台"
-		}, {
-			"pagePath": "pages/userCenter/userCenter",
+		}, 
+		{
+			"pagePath": "pages/userCenter/index",
 			"iconPath": "static/tabbar/user.png",
 			"selectedIconPath": "static/tabbar/user-active.png",
 			"text": "我的"

+ 42 - 3
pages/index/index.vue

@@ -3,6 +3,13 @@
 		<u-swiper height="200" :list="imageTopList"></u-swiper>
 		<view class="goods">
 			<u-section title="人气零食" :show-line="false" sub-title="更多"></u-section>
+			<view class="goods-list">
+				<uni-coods v-for="item in goodsList" :key="item.id" :data="item"></uni-coods>
+			</view>
+			<u-section title="居家生活" :show-line="false" sub-title="更多"></u-section>
+			<view class="goods-list">
+				<uni-coods v-for="item in goodsList" :key="item.id" :data="item"></uni-coods>
+			</view>
 		</view>
 	</view>
 </template>
@@ -26,8 +33,34 @@
 		data() {
 			return {
 				imageTopList:[
-					{photo:''},
-					{photo:''}
+					{photo:'https://cdn.uviewui.com/uview/example/fade.jpg'},
+					{photo:'https://cdn.uviewui.com/uview/example/fade.jpg'}
+				],
+				goodsList:[
+					{
+						id: 21312312321,
+						name: '啊撒旦解放拉萨酱豆腐爱丽丝反对萨拉地方就',
+						src: 'https://cdn.uviewui.com/uview/example/fade1.jpg',
+						price: 50
+					},
+					{
+						id: 6465465465,
+						name: '啊撒旦解放拉萨酱豆腐爱丽丝反对萨拉地方就',
+						src: 'https://cdn.uviewui.com/uview/example/fade.jpg',
+						price: 50
+					},
+					{
+						id: 234324,
+						name: '啊撒旦解放拉萨酱豆腐爱丽丝反对萨拉地方就',
+						src: 'https://cdn.uviewui.com/uview/example/fade.jpg',
+						price: 50
+					},
+					{
+						id: 4453455,
+						name: '啊撒旦解放拉萨酱豆腐爱丽丝反对萨拉地方就',
+						src: 'https://cdn.uviewui.com/uview/example/fade.jpg',
+						price: 50
+					}
 				]
 			}
 		},
@@ -45,7 +78,13 @@
 <style lang="scss" scoped>
 	.content {
 		.goods{
-			padding: 30upx 0;
+			padding: 20upx 0;
+		}
+		.goods-list{
+			padding: 20upx 0;
+			display: flex;
+			flex-wrap: wrap;
+			justify-content: space-between;
 		}
 	}
 </style>

BIN
static/add-cart.png


BIN
static/imgError.png


BIN
static/loading.gif


BIN
static/tabbar/home-active.png


BIN
static/tabbar/home.png


BIN
static/tabbar/user-active.png


BIN
static/tabbar/work-active.png


BIN
static/tabbar/work.png