Browse Source

商品详情

lilei 4 years ago
parent
commit
e4cd704ce8
4 changed files with 163 additions and 38 deletions
  1. 1 28
      App.vue
  2. 1 1
      components/uni-cart-fix/uni-cart-fix.vue
  3. 9 4
      components/uni-coods/uni-coods.vue
  4. 152 5
      pages/goods/goodsDetail.vue

+ 1 - 28
App.vue

@@ -41,36 +41,9 @@
 	page {
 		min-height: 100%;
 		display: flex;
-		background: #fff;
+		background-color: #F8F8F8;
 	}
-	
-	/* #ifdef MP-BAIDU */
-	page {
-		width: 100%;
-		height: 100%;
-		display: block;
-	}
-	/* #endif */
-	
-	/* #ifdef MP-ALIPAY */
-	page {
-		min-height: 100vh;
-	}
-	
-	/* #endif */
-	
-	/* 原生组件模式下需要注意组件外部样式 */
-	m-input {
-		width: 100%;
-		min-height: 100%;
-		display: flex;
-	}
-	
 	.content {
-		display: flex;
-		flex: 1;
-		flex-direction: column;
-		background-color: #fff;
 		padding: 20upx;
 	}
 </style>

+ 1 - 1
components/uni-cart-fix/uni-cart-fix.vue

@@ -29,7 +29,7 @@
 		padding: 20upx;
 		border-radius: 100%;
 		bottom: 15%;
-		right: 5%;
+		right: 2%;
 		box-shadow: 0upx 3upx 8upx #999;
 	}
 </style>

+ 9 - 4
components/uni-coods/uni-coods.vue

@@ -1,13 +1,13 @@
 <template>
-	<view class="goods-item">
+	<view class="goods-item" @click="toDetail">
 		<view class="goods-imgs">
 			<view v-if="data.status == 1" class="goods-staus">已售罄</view>
 			<u-lazy-load img-mode="scaleToFill" :height="imgHeight" :image="data.src" :loading-img="loadingImg" :error-img="errorImg"></u-lazy-load>
 		</view>
-		<view class="name">{{data.name}}</view>
+		<view class="name ellipsis-two">{{data.name}}</view>
 		<view class="price">
 			<view><text>{{data.price}}</text>乐豆</view>
-			<view @click="addCart"><u-image width="48rpx" height="48rpx" src="/static/add-cart.png"></u-image></view>
+			<view @click.stop="addCart"><u-image width="48rpx" height="48rpx" src="/static/add-cart.png"></u-image></view>
 		</view>
 	</view>
 </template>
@@ -35,9 +35,14 @@
 		methods: {
 			// 加入购物车
 			addCart() {
-				console.log('add')
 				// 请求接口
 				this.$store.state.vuex_cartNums = Number(this.$store.state.vuex_cartNums) + 1
+			},
+			// 商品详情
+			toDetail(){
+				uni.navigateTo({
+					url:"/pages/goods/goodsDetail?id="+this.data.id
+				})
 			}
 		},
 	}

+ 152 - 5
pages/goods/goodsDetail.vue

@@ -1,6 +1,47 @@
 <template>
-	<view>
-		
+	<view class="goods-detail">
+		<view>
+			<!-- 商品信息 -->
+			<view class="goods-head">
+				<view class="goods-imgs">
+					<view class="goods-staus">已售罄</view>
+					<u-swiper height="340" :border-radius="0" mode="number" indicator-pos="bottomRight" :list="imageList"></u-swiper>
+				</view>
+				<view class="goods-name ellipsis-two">的房间间里撒酒疯撒发撒将发生登录撒地方就房间里撒酒疯撒发撒将发生登录撒地方就</view>
+				<view class="goods-price">
+					<view><text>50</text>乐豆</view>
+					<view>
+						<u-number-box v-model="nums"></u-number-box>
+					</view>
+				</view>
+			</view>
+			<!-- 商品属性 -->
+			<view class="goods-attr">
+				<view>
+					<view>运费</view>
+					<view>免运费</view>
+				</view>
+				<view>
+					<view>限购</view>
+					<view>每人限购1件</view>
+				</view>
+				<view>
+					<view>售后</view>
+					<view>兑换商品,一经售出,不支持退换货</view>
+				</view>
+			</view>
+			<!-- 商品详情 -->
+			<view class="goods-content">
+				asdfsafsaf
+			</view>
+		</view>
+		<!-- 底部浮动按钮 -->
+		<view class="bottom-btns">
+			<view><u-button type="primary" @click="addCart">加入购物车</u-button></view>
+			<view><u-button type="error">立即下单</u-button></view>
+		</view>
+		<!-- 购物车 -->
+		<uni-cart-fix></uni-cart-fix>
 	</view>
 </template>
 
@@ -8,12 +49,118 @@
 	export default {
 		data() {
 			return {
-				
+				imageList:[
+					{image:'https://cdn.uviewui.com/uview/example/fade.jpg'},
+					{image:'https://cdn.uviewui.com/uview/example/fade.jpg'}
+				],
+				nums:1
 			};
-		}
+		},
+		methods: {
+			// 加入购物车
+			addCart(){
+				// 请求接口
+				this.$store.state.vuex_cartNums = Number(this.$store.state.vuex_cartNums) + this.nums
+			},
+			// 立即下单
+			toOrder(){
+				
+			}
+		},
 	}
 </script>
 
 <style lang="scss">
-
+page{
+	height: 100%;
+}
+.goods-detail{
+	width: 100%;
+	height: 100%;
+	display: flex;
+	flex-direction: column;
+	> view{
+		&:first-child{
+			flex-grow: 1;
+			overflow: auto;
+		}
+	}
+	.goods-head{
+		background: #FFFFFF;
+		box-shadow: 1px 1px 3px #eee;
+		.goods-imgs{
+			position: relative;
+			.goods-staus{
+				width: 150rpx;
+				height: 150rpx;
+				position: absolute;
+				z-index: 10000;
+				border-radius: 100%;
+				background: rgba($color: #000000, $alpha: 0.5);
+				text-align: center;
+				line-height: 150rpx;
+				left: 50%;
+				top: 50%;
+				margin-top: -75rpx;
+				margin-left: -75rpx;
+				color: #eee;
+			}
+		}
+		.goods-name{
+			padding:0 20upx;
+			margin: 10upx 0;
+			line-height: 40upx;
+		}
+		.goods-price{
+			display: flex;
+			align-items: center;
+			justify-content: space-between;
+			padding:0 20upx 20upx;
+			>view{
+				&:first-child{
+					font-size: 22upx;
+					text{
+						color: red;
+						font-size: 36upx;
+						margin-right: 6upx;
+					}
+				}
+			}
+		}
+	}
+	.goods-attr{
+		margin: 20upx 0;
+		background: #FFFFFF;
+		padding: 20upx;
+		box-shadow: 1px 1px 3px #eee;
+		> view{
+			display: flex;
+			align-items: center;
+			>view{
+				padding: 10upx 0;
+				&:first-child{
+					padding-right: 15upx;
+					color: #666;
+				}
+			}
+		}
+	}
+	.goods-content{
+		background: #FFFFFF;
+		padding: 20upx;
+		box-shadow: 1px 1px 3px #eee;
+		min-height: 50vh;
+	}
+	
+	.bottom-btns{
+		background: #FFFFFF;
+		display: flex;
+		align-items: center;
+		justify-content: space-around;
+		padding: 15upx;
+		>view{
+			width: 45%;
+		}
+	}
+}
 </style>