“优选”页面组件，基础组件和滚动组件完成，还差排名组件，引入goodsItem_2组件实现~

王强
1 parent 251803a5
Showing 9 changed files with 272 additions and 9 deletions
src/components/goodsItem_1/goodsItem_1.vue
src/components/goodsItem_2/goodsItem_2.vue
src/components/goodsItem_3/goodsItem_3.less
src/components/goodsItem_3/goodsItem_3.vue
src/components/horizList/horizList.less
src/components/horizList/horizList.vue
src/components/style_7/style_7.less
src/components/style_7/style_7.vue
src/pages/com/com.vue
@@ -43,6 +43,6 @@
 </script>
  
 <!-- Add "scoped" attribute to limit CSS to this component only -->
-<style rel="stylesheet/less" lang="less">
+<style rel="stylesheet/less" lang="less" scoped>
     @import './goodsItem_1';
 </style>
 \ No newline at end of file
@@ -38,6 +38,6 @@
 </script>
  
 <!-- Add "scoped" attribute to limit CSS to this component only -->
-<style rel="stylesheet/less" lang="less">
+<style rel="stylesheet/less" lang="less" scoped>
     @import './goodsItem_2';
 </style>
 \ No newline at end of file
+@charset "UTF-8";
+
+.goods-item-3-box {
+	background-color: #ffffff;
+	padding: 20px 0;
+	width: 560px;
+	height: auto;
+	border-radius: 8px;
+	.main-box {
+		display: flex;
+		justify-content: space-between;
+		margin: 0 auto;
+		width: 520px;
+		height: auto;
+		.img-box {
+			display: flex;
+			justify-content: center;
+			align-items: center;
+			background-color: #F9F9F9;
+			margin: 0 auto;
+			width: 240px;
+			height: 240px;
+			border-radius: 8px;
+			overflow: hidden;
+			.simg {
+				display: block;
+				width: 240px;
+			}
+		}
+		.content-box {
+			display: flex;
+			flex-direction: column;
+			justify-content: space-around;
+			align-items: center;
+			width: 280px;
+			height: auto;
+			.top-box {
+				width: 220px;
+				.title {
+					color: #333333;
+					font-size: 30px;
+					white-space: nowrap;
+					text-overflow: ellipsis;
+					overflow: hidden;
+				}
+				.ads {
+					margin-top: 5px;
+					color: #333333;
+					font-size: 22px;
+					white-space: nowrap;
+					text-overflow: ellipsis;
+					overflow: hidden;
+				}
+			}
+			.bottom-box {
+				width: 220px;
+				.price-box {
+					display: flex;
+					justify-content: flex-start;
+					align-items: center;
+					margin-top: 20px;
+					.symbol {
+						color: #FC1541;
+						font-size: 20px;
+					}
+					.price {
+						color: #FC1541;
+						font-size: 30px;
+						white-space: nowrap;
+						text-overflow: ellipsis;
+						overflow: hidden;
+					}
+				}
+				.buttons-box {
+					margin-top: 20px;
+					.btn {
+						&.btn-primary {
+							display: flex;
+							justify-content: center;
+							align-items: center;
+							background-color: #EC1125;
+							color: #FFFFFF;
+							font-size: 24px;
+							width: 100%;
+							height: 46px;
+							border-radius: 6px;
+							white-space: nowrap;
+							text-overflow: ellipsis;
+							overflow: hidden;
+						}
+					}
+				}
+			}
+		}
+	}	
+}
 \ No newline at end of file
+<template>
+	<div class="goods-item-3-box" v-if="item" @click="jump(item)">
+		<div class="main-box">
+			<div class="img-box">
+				<img v-lazy="item.simg + SIGN.SMALL" class="simg" />
+			</div>
+			<div class="content-box">
+				<div class="top-box">
+					<div class="title">{{item.title}}</div>
+					<div class="ads">
+						{{item.ads}}
+					</div>
+				</div>
+				<div class="bottom-box">
+					<div class="price-box">
+						<div class="symbol">¥</div>
+						<div class="price">{{item.price}}</div>
+					</div>
+					<div class="buttons-box">
+						<div class="btn btn-primary" @click.stop.prevent @click="primary(item)">{{item.primaryText}}</div>
+					</div>
+				</div>
+			</div>
+		</div>
+	</div>
+</template>
+
+<script>
+    export default {
+        data: function () {
+            return {
+                
+            }
+        },
+        props: ["item"],
+		methods: {
+			
+			/**
+			 * 点击跳转
+			 * @param {object} item [数据对象]
+			 */
+			jump(item) {
+				this.$emit("jump", item);
+			},
+
+			/**
+			 * 主按钮点击事件
+			 * @param {object} item [数据对象]
+			 */
+			 primary(item) {
+				this.$emit("primary", item);
+			}
+		}
+    }
+</script>
+
+<!-- Add "scoped" attribute to limit CSS to this component only -->
+<style rel="stylesheet/less" lang="less" scoped>
+    @import './goodsItem_3';
+</style>
 \ No newline at end of file
@@ -4,8 +4,10 @@
 	background-color: transparent;
 	width: 100%;
 	height: auto;
-	> .box {
+	.title-box + .box {
 		margin-top: 30px;
+	}
+	> .box {
 		width: 750px;
 		.h-box {
 			width: 100%;
@@ -81,5 +83,22 @@
 				}
 			}
 		}
+		&.com-3 {
+			.h-box {
+				height: 292px;
+				.scroll-box {
+					padding-bottom: 26px;
+					> .box {
+						display: block;
+						.item-box {
+							padding-right: 30px;
+							&:first-child {
+								padding-left: 30px;
+							}
+						}
+					}
+				}
+			}
+		}
 	}
 }
 \ No newline at end of file
 <template>
     <div class="horiz-list-box" v-if="lists && lists.length">
+		<slot name="title-box"></slot>
 		<div class="box" :class="'com-' + com + ' pid-' + pid">
 			<div class="h-box">
 				<div class="scroll-box" ref="scrollBox">
@@ -12,16 +13,21 @@
 							 -->
  
 							<!-- 商品展示样式 1 -->
-							<goods-item-1 v-if="com == '1'" @jump=jump @addCart=addCart
+							<goods-item-1 v-if="com == '1'" @jump="jump" @addCart="addCart"
 								:item="item"
 								:pid="pid">
 							</goods-item-1>
  
 							<!-- 商品展示样式 2 -->
-							<goods-item-2 v-if="com == '2'" @jump=jump
+							<goods-item-2 v-if="com == '2'" @jump="jump"
 								:item="item"
 								:pid="pid">
 							</goods-item-2>
+
+							<!-- 商品展示样式 3 -->
+							<goods-item-3 v-if="com == '3'" @jump="jump" @primary="primary"
+								:item="item">
+							</goods-item-3>
 						</div>
 					</div>
 				</div>
@@ -34,6 +40,7 @@
 	// 引入组件
 	import goodsItem1 from "@/components/goodsItem_1/goodsItem_1";
 	import goodsItem2 from "@/components/goodsItem_2/goodsItem_2";
+	import goodsItem3 from "@/components/goodsItem_3/goodsItem_3";
  
     export default {
         data: function () {
@@ -45,12 +52,14 @@
 		props: ["lists", "com", "pid"],
 		components: {
 			goodsItem1,
-			goodsItem2
+			goodsItem2,
+			goodsItem3
         },
 		methods: {
  
 			/**
 			 * 点击跳转
+			 * @param {object} item [数据对象]
 			 */
 			jump(item) {
 				this.$emit("jump", item);
@@ -58,12 +67,21 @@
  
 			/**
 			 * 加入购物车
+			 * @param {object} item [数据对象]
 			 */
 			addCart(item) {
 				this.$emit("addCart", item);
 			},
  
 			/**
+			 * 主按钮点击事件
+			 * @param {object} item [数据对象]
+			 */
+			primary(item) {
+				this.$emit("primary", item);
+			},
+
+			/**
 			 * 设置横向滚动
 			 * @param {object} wrapper [需要设置滚动的对象]
 			 */
@@ -17,5 +17,8 @@
 				height: auto;
 			}
 		}
+		.horiz-list-box {
+			margin-top: 30px;
+		}
 	}
 }
 \ No newline at end of file
@@ -85,6 +85,6 @@
 </script>
  
 <!-- Add "scoped" attribute to limit CSS to this component only -->
-<style rel="stylesheet/less" lang="less">
+<style rel="stylesheet/less" lang="less" scoped>
     @import './style_7';
 </style>
 \ No newline at end of file
 <template>
     <div class="com">
  
-        <!-- 商品样式 滑动 -->
+        <!-- 商品样式 2 滑动 -->
         <horiz-list @jump="jump"
             :lists="lists"
             com="2"
-            pid="2">
+            pid="1">
  
             <!-- 标题 -->
             <text-title-box slot="title-box"
@@ -15,7 +15,18 @@
             </text-title-box>
         </horiz-list>
  
+        <!-- 商品样式 3 滑动 -->
+        <horiz-list @jump="jump" @primary="primary"
+            :lists="lists3"
+            com="3">
  
+            <!-- 标题 -->
+            <text-title-box slot="title-box"
+                :titles="{
+                    title: '最新上架'
+                }">
+            </text-title-box>
+        </horiz-list>
  
     </div>
 </template>
@@ -62,6 +73,50 @@
                         title: "传统汉堡焗套餐传统汉堡焗套餐传统汉堡焗套餐传统汉堡焗套餐",
                         price: "230.90"
                     }
+                ],
+                lists3: [
+                    {
+                        simg: "static/img/pic_1.jpg",
+                        title: "传统汉堡焗套餐传统汉堡焗套餐传统汉堡焗套餐传统汉堡焗套餐",
+                        ads: "全面屏包罗万",
+                        price: "230.90",
+                        primaryText: "立即购买"
+                    },
+                    {
+                        simg: "static/img/pic_2.jpg",
+                        title: "传统汉堡焗套餐传统汉堡焗套餐传统汉堡焗套餐传统汉堡焗套餐",
+                        ads: "全面屏包罗万",
+                        price: "230.90",
+                        primaryText: "立即购买"
+                    },
+                    {
+                        simg: "static/img/pic_3.jpg",
+                        title: "传统汉堡焗套餐传统汉堡焗套餐传统汉堡焗套餐传统汉堡焗套餐",
+                        ads: "全面屏包罗万",
+                        price: "230.90",
+                        primaryText: "立即购买"
+                    },
+                    {
+                        simg: "static/img/pic_1.jpg",
+                        title: "传统汉堡焗套餐传统汉堡焗套餐传统汉堡焗套餐传统汉堡焗套餐",
+                        ads: "全面屏包罗万",
+                        price: "230.90",
+                        primaryText: "立即购买"
+                    },
+                    {
+                        simg: "static/img/pic_2.jpg",
+                        title: "传统汉堡焗套餐传统汉堡焗套餐传统汉堡焗套餐传统汉堡焗套餐",
+                        ads: "全面屏包罗万",
+                        price: "230.90",
+                        primaryText: "立即购买"
+                    },
+                    {
+                        simg: "static/img/pic_3.jpg",
+                        title: "传统汉堡焗套餐传统汉堡焗套餐传统汉堡焗套餐传统汉堡焗套餐",
+                        ads: "全面屏包罗万",
+                        price: "230.90",
+                        primaryText: "立即购买"
+                    }
                 ]
  
  
@@ -115,6 +170,18 @@
                     this.$parent.gotoDetail(options);
                 }
             },
+            
+            /**
+			 * 主按钮点击事件
+			 * @param {object} item [数据对象]
+			 */
+			primary(item) {
+
+
+                console.log("primary", item);
+                
+
+			},