“优选”页面下部组件完成

王强
1 parent 997d5677
Showing 13 changed files with 270 additions and 56 deletions
src/components/flagLeftTop/flagLeftTop.less
src/components/flagLeftTop/flagLeftTop.vue
src/components/goodsItem_2/goodsItem_2.less
src/components/goodsItem_2/goodsItem_2.vue
src/components/horizList/horizList.vue
src/components/horizListFlex/horizListFlex.less
src/components/horizListFlex/horizListFlex.vue
src/pages/com/com.less
src/pages/com/com.vue
static/img/icon_n1.png
static/img/icon_n2.png
static/img/icon_n3.png
static/img/pic_4.png
+@charset "UTF-8";
+
+.flag-left-top-box {
+	.box {
+        position: absolute;
+        top: -6px;
+        left: 10px;
+        z-index: 10;
+        .flag-img {
+            display: block;
+            width: 46px;
+            height: auto;
+        }
+    }
+}
+<template>
+    <div class="flag-left-top-box" v-if="flag">
+		<div class="box">
+            <img :src="flag" class="flag-img" mode="widthFix" />
+		</div>
+    </div>
+</template>
+
+<script>
+    export default {
+        data: function () {
+            return {
+
+            }
+        },
+        props: ["flag"]
+    }
+</script>
+
+<!-- Add "scoped" attribute to limit CSS to this component only -->
+<style rel="stylesheet/less" lang="less" scoped>
+    @import './flagLeftTop';
+</style>
@@ -5,22 +5,25 @@
 	padding: 20px 0;
 	width: 240px;
 	height: auto;
-	border-radius: 8px;
-	.img-box {
-		display: flex;
-		justify-content: center;
-		align-items: center;
-		background-color: #F9F9F9;
-		margin: 0 auto;
-		width: 200px;
-		height: 200px;
-		border-radius: 8px;
-		overflow: hidden;
-		.simg {
-			display: block;
-			width: 200px;
-		}
-	}
+    border-radius: 8px;
+    .top-box {
+        position: relative;
+        .img-box {
+            display: flex;
+            justify-content: center;
+            align-items: center;
+            background-color: #F9F9F9;
+            margin: 0 auto;
+            width: 200px;
+            height: 200px;
+            border-radius: 8px;
+            overflow: hidden;
+            .simg {
+                display: block;
+                width: 200px;
+            }
+        }
+    }
 	.content-box {
 		margin: 0 auto;
 		width: 200px;
@@ -50,8 +53,11 @@
 			}
 		}
 	}
-	
-	&.pid-2 {	// 排名样式
+
+    &.pid-2 {	// 排名样式
+        background-color: transparent;
+	    padding: 0;
+        width: 200px;
 		.content-box {
 			.price-box {
 				justify-content: center;
@@ -67,4 +73,4 @@
 			}
 		}
 	}
-}
 \ No newline at end of file
+}
 <template>
 	<div class="goods-item-2-box" :class="'pid-' + pid" v-if="item" @click="jump(item)">
-		<div class="img-box">
-			<img v-lazy="item.simg + SIGN.SMALL" class="simg" />
-		</div>
+        <div class="top-box">
+            <div class="img-box">
+                <img v-lazy="item.simg + SIGN.SMALL" class="simg" />
+            </div>
+            <slot name="flag"></slot>
+        </div>
 		<div class="content-box">
 			<div class="title" v-if="pid == undefined || pid == '1'">{{item.title}}</div>
 			<div class="price-box">
@@ -20,12 +23,12 @@
     export default {
         data: function () {
             return {
-                
+
             }
         },
         props: ["item", "pid"],
 		methods: {
-			
+
 			/**
 			 * 点击跳转
 			 * @param {object} item [数据对象]
@@ -40,4 +43,4 @@
 <!-- Add "scoped" attribute to limit CSS to this component only -->
 <style rel="stylesheet/less" lang="less" scoped>
     @import './goodsItem_2';
-</style>
 \ No newline at end of file
+</style>
@@ -6,10 +6,21 @@
 				<div class="scroll-box" ref="scrollBox">
 					<div class="box" :style="'width: ' + scrollItemBox + 'vw'">
 						<div class="item-box" v-for="(item, index) in lists" :key="index">
-							
-							<!-- 
-								com=1：goodsItem_1组件，pid：1、3，固定不滚动，2、4，滚动
-								com=2：goodsItem_2组件，pid: 1，带标题，2、不带标题，显示附加信息
+
+							<!--
+								com=1：goodsItem_1组件，pid：1、3，固定不滚动；2、4，滚动
+                                    事件：
+                                        @jump：整个点击跳转事件
+                                        @addCart：右下角加入购物车按钮事件，已阻止事件冒泡
+
+								com=2：goodsItem_2组件，pid: 1，带标题，不显示附加信息；2、不带标题，显示附加信息
+                                    事件：
+                                        @jump：整个点击跳转事件
+
+								com=3：goodsItem_3组件，无pid参数
+                                    事件：
+                                        @jump：整个点击跳转事件
+                                        @primary：右下角红色主按钮点击事件，已阻止事件冒泡
 							 -->
  
 							<!-- 商品展示样式 1 -->
@@ -56,7 +67,7 @@
 			goodsItem3
         },
 		methods: {
-			
+
 			/**
 			 * 点击跳转
 			 * @param {object} item [数据对象]
@@ -86,13 +97,13 @@
 			 * @param {object} wrapper [需要设置滚动的对象]
 			 */
 			setScrollBox(wrapper) {
-				
+
 				// box滚动元素宽度，item对象
 				let scrollItemBox = 0;
 				let clientWidth = wrapper.clientWidth;
 				let multiple = clientWidth / 750;
 				let childrens = wrapper.children[0].children;
-				
+
 				// 遍历子元素，获取box宽度
 				for (let i = 0; i < childrens.length; i++) {
 					scrollItemBox += childrens[i].clientWidth;
@@ -148,4 +159,4 @@
 <!-- Add "scoped" attribute to limit CSS to this component only -->
 <style rel="stylesheet/less" lang="less">
     @import './horizList';
-</style>
 \ No newline at end of file
+</style>
+@charset "UTF-8";
+
+.horiz-list-flex-box {
+	.container-box {
+        display: flex;
+        justify-content: space-evenly;
+        align-items: center;
+        background-color: #ffffff;
+        margin: 0 auto;
+        padding: 25px 0 30px 0;
+        width: 690px;
+        height: auto;
+        border-radius: 12px;
+    }
+}
+<template>
+	<div class="horiz-list-flex-box" v-if="lists && lists.length">
+        <slot name="title-box"></slot>
+		<div class="container-box">
+            <div class="item-box" v-for="(item, index) in lists" :key="index">
+
+                <!--
+                    com=1：goodsItem_1组件，pid：1、3，固定不滚动；2、4，滚动
+                        事件：
+                            @jump：整个点击跳转事件
+                            @addCart：右下角加入购物车按钮事件，已阻止事件冒泡
+
+                    com=2：goodsItem_2组件，pid: 1，带标题，不显示附加信息；2、不带标题，显示附加信息
+                        事件：
+                            @jump：整个点击跳转事件
+
+                    com=3：goodsItem_3组件，无pid参数
+                        事件：
+                            @jump：整个点击跳转事件
+                            @primary：右下角红色主按钮点击事件，已阻止事件冒泡
+                    -->
+
+                <!-- 商品展示样式 1 -->
+                <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"
+                    :item="item"
+                    :pid="pid">
+
+                    <!-- 左上角角标icon -->
+                    <flag-left-top slot="flag" v-if="flags && flags[index]"
+                        :flag="flags[index]">
+                    </flag-left-top>
+                </goods-item-2>
+
+                <!-- 商品展示样式 3 -->
+                <goods-item-3 v-if="com == '3'" @jump="jump" @primary="primary"
+                    :item="item">
+                </goods-item-3>
+            </div>
+        </div>
+	</div>
+</template>
+
+<script>
+    // 引入组件
+    import goodsItem1 from "@/components/goodsItem_1/goodsItem_1";
+	import goodsItem2 from "@/components/goodsItem_2/goodsItem_2";
+	import goodsItem3 from "@/components/goodsItem_3/goodsItem_3";
+	import flagLeftTop from "@/components/flagLeftTop/flagLeftTop";
+
+    export default {
+        data: function () {
+            return {
+
+            }
+        },
+        props: ["lists", "com", "pid", "flags"],
+        components: {
+			goodsItem1,
+			goodsItem2,
+            goodsItem3,
+            flagLeftTop
+        }
+    }
+</script>
+
+<!-- Add "scoped" attribute to limit CSS to this component only -->
+<style rel="stylesheet/less" lang="less" scoped>
+    @import './horizListFlex';
+</style>
 @charset "UTF-8";
  
 .com {
-    background: linear-gradient(180deg, rgba(255, 255, 255, 1) 0%, rgba(249, 249, 249, 1) 100%);
-}
 \ No newline at end of file
+    background: linear-gradient(180deg, rgba(255, 255, 255, 1) 0%, rgba(249, 249, 249, 1) 10%, rgba(249, 249, 249, 1) 100%);
+    // background: linear-gradient(180deg, rgba(255, 255, 255, 1) 0%, rgba(0, 0, 0, 1) 10%, rgba(0, 0, 0, 1) 100%);
+    padding-top: 50px;
+    .components-box {
+        margin-bottom: 50px;
+        &:last-child {
+            margin-bottom: 0;
+        }
+    }
+}
 <template>
     <div class="com">
  
+        <!-- 商品样式 2 横排flex -->
+        <horiz-list-flex class="components-box"
+            :lists="lists4"
+            com="2"
+            pid="2"
+            :flags="['static/img/icon_n1.png', 'static/img/icon_n2.png', 'static/img/icon_n3.png']">
+
+            <!-- 标题 -->
+            <text-title-box slot="title-box"
+                :titles="{
+                    title: '热销商品'
+                }">
+            </text-title-box>
+        </horiz-list-flex>
+
+        <!-- 商品样式 3 滑动 -->
+        <horiz-list @jump="jump" @primary="primary"
+            :lists="lists3"
+            com="3">
+
+            <!-- 标题 -->
+            <text-title-box slot="title-box"
+                :titles="{
+                    title: '最新上架'
+                }">
+            </text-title-box>
+        </horiz-list>
+
         <!-- 商品样式 2 滑动 -->
         <horiz-list @jump="jump"
             :lists="lists"
@@ -14,7 +42,7 @@
                 }">
             </text-title-box>
         </horiz-list>
-        
+
         <!-- 商品样式 3 滑动 -->
         <horiz-list @jump="jump" @primary="primary"
             :lists="lists3"
@@ -23,11 +51,16 @@
             <!-- 标题 -->
             <text-title-box slot="title-box"
                 :titles="{
-                    title: '最新上架'
+                    title: '猜你喜欢'
                 }">
             </text-title-box>
         </horiz-list>
-        
+
+
+
+
+
+
     </div>
 </template>
  
@@ -36,6 +69,7 @@
     // 引入组件
     import { Toast, Indicator } from "mint-ui";
     import horizList from "@/components/horizList/horizList";
+    import horizListFlex from "@/components/horizListFlex/horizListFlex";
     import textTitleBox from "@/components/textTitleBox/textTitleBox";
  
     export default {
@@ -44,74 +78,97 @@
                 title: "",
                 lists: [
                     {
-                        simg: "static/img/pic_1.jpg",
+                        simg: "static/img/pic_4.png",
                         title: "传统汉堡焗套餐传统汉堡焗套餐传统汉堡焗套餐传统汉堡焗套餐",
                         price: "230.90"
                     },
                     {
-                        simg: "static/img/pic_2.jpg",
+                        simg: "static/img/pic_4.png",
                         title: "传统汉堡焗套餐传统汉堡焗套餐传统汉堡焗套餐传统汉堡焗套餐",
                         price: "230.90"
                     },
                     {
-                        simg: "static/img/pic_3.jpg",
+                        simg: "static/img/pic_4.png",
                         title: "传统汉堡焗套餐传统汉堡焗套餐传统汉堡焗套餐传统汉堡焗套餐",
                         price: "230.90"
                     },
                     {
-                        simg: "static/img/pic_1.jpg",
+                        simg: "static/img/pic_4.png",
                         title: "传统汉堡焗套餐传统汉堡焗套餐传统汉堡焗套餐传统汉堡焗套餐",
                         price: "230.90"
                     },
                     {
-                        simg: "static/img/pic_2.jpg",
+                        simg: "static/img/pic_4.png",
                         title: "传统汉堡焗套餐传统汉堡焗套餐传统汉堡焗套餐传统汉堡焗套餐",
                         price: "230.90"
                     },
                     {
-                        simg: "static/img/pic_3.jpg",
+                        simg: "static/img/pic_4.png",
                         title: "传统汉堡焗套餐传统汉堡焗套餐传统汉堡焗套餐传统汉堡焗套餐",
                         price: "230.90"
                     }
                 ],
                 lists3: [
                     {
-                        simg: "static/img/pic_1.jpg",
+                        simg: "static/img/pic_4.png",
                         title: "传统汉堡焗套餐传统汉堡焗套餐传统汉堡焗套餐传统汉堡焗套餐",
                         ads: "全面屏包罗万",
                         price: "230.90",
                         primaryText: "立即购买"
                     },
                     {
-                        simg: "static/img/pic_2.jpg",
+                        simg: "static/img/pic_4.png",
                         title: "传统汉堡焗套餐传统汉堡焗套餐传统汉堡焗套餐传统汉堡焗套餐",
                         ads: "全面屏包罗万",
                         price: "230.90",
                         primaryText: "立即购买"
                     },
                     {
-                        simg: "static/img/pic_3.jpg",
+                        simg: "static/img/pic_4.png",
                         title: "传统汉堡焗套餐传统汉堡焗套餐传统汉堡焗套餐传统汉堡焗套餐",
                         ads: "全面屏包罗万",
                         price: "230.90",
                         primaryText: "立即购买"
                     },
                     {
-                        simg: "static/img/pic_1.jpg",
+                        simg: "static/img/pic_4.png",
                         title: "传统汉堡焗套餐传统汉堡焗套餐传统汉堡焗套餐传统汉堡焗套餐",
                         ads: "全面屏包罗万",
                         price: "230.90",
                         primaryText: "立即购买"
                     },
                     {
-                        simg: "static/img/pic_2.jpg",
+                        simg: "static/img/pic_4.png",
                         title: "传统汉堡焗套餐传统汉堡焗套餐传统汉堡焗套餐传统汉堡焗套餐",
                         ads: "全面屏包罗万",
                         price: "230.90",
                         primaryText: "立即购买"
                     },
                     {
-                        simg: "static/img/pic_3.jpg",
+                        simg: "static/img/pic_4.png",
+                        title: "传统汉堡焗套餐传统汉堡焗套餐传统汉堡焗套餐传统汉堡焗套餐",
+                        ads: "全面屏包罗万",
+                        price: "230.90",
+                        primaryText: "立即购买"
+                    }
+                ],
+                lists4: [
+                    {
+                        simg: "static/img/pic_4.png",
+                        title: "传统汉堡焗套餐传统汉堡焗套餐传统汉堡焗套餐传统汉堡焗套餐",
+                        ads: "全面屏包罗万",
+                        price: "230.90",
+                        primaryText: "立即购买"
+                    },
+                    {
+                        simg: "static/img/pic_4.png",
+                        title: "传统汉堡焗套餐传统汉堡焗套餐传统汉堡焗套餐传统汉堡焗套餐",
+                        ads: "全面屏包罗万",
+                        price: "230.90",
+                        primaryText: "立即购买"
+                    },
+                    {
+                        simg: "static/img/pic_4.png",
                         title: "传统汉堡焗套餐传统汉堡焗套餐传统汉堡焗套餐传统汉堡焗套餐",
                         ads: "全面屏包罗万",
                         price: "230.90",
@@ -128,6 +185,7 @@
         },
         components: {
             horizList,
+            horizListFlex,
             textTitleBox,
  
  
@@ -137,7 +195,7 @@
             // 设置标题
             this.$set(this, "title", "ccdd");
  
-            
+
  
  
  
@@ -163,14 +221,14 @@
  
  
                     console.log(options);
-                    
+
  
  
  
                     this.$parent.gotoDetail(options);
                 }
             },
-            
+
             /**
 			 * 主按钮点击事件
 			 * @param {object} item [数据对象]
@@ -179,11 +237,11 @@
  
  
                 console.log("primary", item);
-                
+
  
 			},
  
-            
+
  
         },
         head: {
@@ -205,7 +263,7 @@
             }
         },
         mounted() {
-            
+
         }
     }
 </script>