开发“优选”页面组件~ 商品组件2，横向滑动2完成。

王强
1 parent 2badf2fb
Showing 12 changed files with 504 additions and 4 deletions
src/components/goodsItem_1/goodsItem_1.vue
src/components/goodsItem_2/goodsItem_2.less
src/components/goodsItem_2/goodsItem_2.vue
src/components/horizList_1/horizList_1.vue
src/components/horizList_2/horizList_2.less
src/components/horizList_2/horizList_2.vue
src/components/textTitleBox/textTitleBox.less
src/components/textTitleBox/textTitleBox.vue
src/components/titleBox/titleBox.vue
src/pages/com/com.less
src/pages/com/com.vue
src/router/index.js
 <template>
-	<div class="goods-item-1-box" :class="'pid-' + pid" v-if="item">
+	<div class="goods-item-1-box" :class="'pid-' + pid" v-if="item" @click="jump(item)">
 		<div class="img-box">
 			<img v-lazy="item.simg + SIGN.SMALL" class="simg" />
 		</div>
+@charset "UTF-8";
+
+.goods-item-2-box {
+	background-color: #ffffff;
+	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;
+		}
+	}
+	.content-box {
+		margin: 0 auto;
+		width: 200px;
+		.title {
+			margin-top: 10px;
+			color: #333333;
+			font-size: 24px;
+			white-space: nowrap;
+			text-overflow: ellipsis;
+			overflow: hidden;
+		}
+		.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;
+			}
+		}
+	}
+	
+	&.pid-2 {	// 排名样式
+		.content-box {
+			.price-box {
+				justify-content: center;
+			}
+			.ads {
+				margin-top: 15px;
+				text-align: center;
+				color: #999999;
+				font-size: 24px;
+				white-space: nowrap;
+				text-overflow: ellipsis;
+				overflow: hidden;
+			}
+		}
+	}
+}
 \ 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="content-box">
+			<div class="title" v-if="pid == undefined || pid == '1'">{{item.title}}</div>
+			<div class="price-box">
+				<div class="symbol">￥</div>
+				<div class="price">{{item.price}}</div>
+			</div>
+			<div class="ads" v-if="pid == '2'">
+				爆卖1000件
+			</div>
+		</div>
+	</div>
+</template>
+
+<script>
+    export default {
+        data: function () {
+            return {
+                
+            }
+        },
+        props: ["item", "pid"],
+		methods: {
+			
+			/**
+			 * 点击跳转
+			 * @param {object} item [数据对象]
+			 */
+			jump(item) {
+				this.$emit("jump", item);
+			}
+		}
+    }
+</script>
+
+<!-- Add "scoped" attribute to limit CSS to this component only -->
+<style rel="stylesheet/less" lang="less">
+    @import './goodsItem_2';
+</style>
 \ No newline at end of file
@@ -4,7 +4,7 @@
 			<div class="h-box">
 				<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" @click="jump(item)">
+						<div class="item-box" v-for="(item, index) in lists" :key="index">
 							<!-- 商品展示样式 1 -->
 							<goods-item-1 @jump=jump @addCart=addCart
+@charset "UTF-8";
+
+.horiz-list-2-box {
+	background-color: transparent;
+	width: 100%;
+	height: auto;
+	.title-box + .box {
+		margin-top: 30px;
+	}
+	> .box {
+		margin-top: 30px;
+		width: 750px;
+		.h-box {
+			width: 100%;
+			height: 354px;
+			overflow: hidden;
+			.scroll-box {
+				width: 100%;
+				height: auto;
+				overflow-x: auto;
+				overflow-y: hidden;
+				-webkit-overflow-scrolling: touch;
+				padding-bottom: 26px;
+				> .box {
+					display: block;
+					.item-box {
+						display: inline-flex;
+						padding-right: 30px;
+						&:first-child {
+							padding-left: 30px;
+						}
+					}
+				}
+			}
+		}
+		&.pid-2 {
+			.h-box {
+				height: 360px;
+				.scroll-box {
+					padding-bottom: 26px;
+				}
+			}
+		}
+	}
+}
 \ No newline at end of file
+<template>
+    <div class="horiz-list-2-box" v-if="lists && lists.length">
+		<slot name="title-box"></slot>
+		<div class="box" :class="'pid-' + pid">
+			<div class="h-box">
+				<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">
+							
+							<!-- 商品展示样式 2 -->
+							<goods-item-2 @jump=jump
+								:item="item"
+								:pid="pid">
+							</goods-item-2>
+						</div>
+					</div>
+				</div>
+			</div>
+		</div>
+    </div>
+</template>
+
+<script>
+	// 引入组件
+	import goodsItem2 from "@/components/goodsItem_2/goodsItem_2";
+
+    export default {
+        data: function () {
+            return {
+                basicWidth: 100,
+				scrollItemBox: 100
+            }
+        },
+		props: ["lists", "pid"],
+		components: {
+			goodsItem2
+        },
+		methods: {
+			
+			/**
+			 * 点击跳转
+			 */
+			jump(item) {
+				this.$emit("jump", item);
+			},
+
+			/**
+			 * 设置横向滚动
+			 * @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;
+				}
+
+				// 根据屏幕比例计算实际设置vw值
+				// scrollItemBox = (scrollItemBox + ((30 * multiple * (childrens.length - 1)))) / clientWidth * this.basicWidth;
+				scrollItemBox = ((scrollItemBox + (0 * multiple)) / clientWidth * this.basicWidth);
+
+				// 判断scrollItemBox值，更新this.scrollItemBox宽度
+				if (scrollItemBox > this.basicWidth) {
+					this.$set(this, "scrollItemBox", scrollItemBox);
+				} else {
+					this.$set(this, "scrollItemBox", this.basicWidth);
+				}
+			}
+		},
+		watch: {
+
+			/**
+			 * 监听横向滚动数据加载
+			 */
+			 lists(newVal, oldVal) {
+
+				// 判断是否有数据
+				if (typeof newVal === "object" && newVal.length > 0) {
+
+					// 下一周期处理
+					this.$nextTick(function() {
+
+						// 设置横向滚动
+						this.setScrollBox(this.$refs.scrollBox);
+					});
+				}
+			 }
+		},
+		mounted() {
+
+			// 判断如果lists有值，设置横向滚动数据
+			if (this.lists && this.lists.length) {
+
+				// 下一周期处理
+				this.$nextTick(function() {
+
+					// 设置横向滚动
+					this.setScrollBox(this.$refs.scrollBox);
+				});
+			}
+		}
+    }
+</script>
+
+<!-- Add "scoped" attribute to limit CSS to this component only -->
+<style rel="stylesheet/less" lang="less">
+    @import './horizList_2';
+</style>
 \ No newline at end of file
+@charset "UTF-8";
+
+.title-box {
+	background-color: transparent;
+	width: 100%;
+	height: auto;
+	.box {
+		display: flex;
+		justify-content: space-between;
+		align-items: center;
+		margin: 0 auto;
+		width: 690px;
+		height: auto;
+		.title-box {
+			display: contents;
+			color: #4A4A4A;
+			font-size: 36px;
+			font-weight: 600;
+		}
+		.more-box {
+			display: contents;
+			color: #999999;
+			font-size: 26px;
+			font-weight: 400;
+		}
+	}
+}
 \ No newline at end of file
+<template>
+    <div class="title-box" v-if="titles">
+		<div class="box">
+			<div class="title-box">
+				<div class="title">{{titles.title}}</div>
+			</div>
+			<div class="more-box" @click="more(titles)">
+				<div class="more-text">更多</div>
+			</div>
+		</div>
+    </div>
+</template>
+
+<script>
+    export default {
+        data: function () {
+            return {
+
+            }
+        },
+        props: ["titles"],
+		methods: {
+
+			/**
+			 * 更多
+			 * @param {object} item [数据对象]
+			 */
+			more(item) {
+				this.$emit("more", item);
+			}
+		}
+    }
+</script>
+
+<!-- Add "scoped" attribute to limit CSS to this component only -->
+<style rel="stylesheet/less" lang="less">
+    @import './textTitleBox';
+</style>
 <template>
-    <!-- <div class="title-box" v-if="titles"> -->
-    <div class="title-box">
+    <div class="title-box" v-if="titles">
 		<div class="box">
 			<div class="title-img-box">
 				<img :src="titles.simg" class="title-img" mode="widthFix" />
+@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
+<template>
+    <div class="com">
+
+        <!-- 商品样式 2 滑动 -->
+        <horiz-list-2 @jump="jump"
+            :lists="lists"
+            pid="1">
+
+            <!-- 标题 -->
+            <text-title-box slot="title-box"
+                :titles="{
+                    title: '最近购买'
+                }">
+            </text-title-box>
+        </horiz-list-2>
+        
+
+        
+    </div>
+</template>
+
+<script>
+
+    // 引入组件
+    import { Toast, Indicator } from "mint-ui";
+    import horizList2 from "@/components/horizList_2/horizList_2";
+    import textTitleBox from "@/components/textTitleBox/textTitleBox";
+
+    export default {
+        data () {
+            return {
+                title: "",
+                lists: [
+                    {
+                        simg: "static/img/pic_1.jpg",
+                        title: "传统汉堡焗套餐传统汉堡焗套餐传统汉堡焗套餐传统汉堡焗套餐",
+                        price: "230.90"
+                    },
+                    {
+                        simg: "static/img/pic_2.jpg",
+                        title: "传统汉堡焗套餐传统汉堡焗套餐传统汉堡焗套餐传统汉堡焗套餐",
+                        price: "230.90"
+                    },
+                    {
+                        simg: "static/img/pic_3.jpg",
+                        title: "传统汉堡焗套餐传统汉堡焗套餐传统汉堡焗套餐传统汉堡焗套餐",
+                        price: "230.90"
+                    },
+                    {
+                        simg: "static/img/pic_1.jpg",
+                        title: "传统汉堡焗套餐传统汉堡焗套餐传统汉堡焗套餐传统汉堡焗套餐",
+                        price: "230.90"
+                    },
+                    {
+                        simg: "static/img/pic_2.jpg",
+                        title: "传统汉堡焗套餐传统汉堡焗套餐传统汉堡焗套餐传统汉堡焗套餐",
+                        price: "230.90"
+                    },
+                    {
+                        simg: "static/img/pic_3.jpg",
+                        title: "传统汉堡焗套餐传统汉堡焗套餐传统汉堡焗套餐传统汉堡焗套餐",
+                        price: "230.90"
+                    }
+                ]
+
+
+
+
+
+
+            }
+        },
+        components: {
+            horizList2,
+            textTitleBox,
+
+
+        },
+        created() {
+
+            // 设置标题
+            this.$set(this, "title", "ccdd");
+
+            
+
+
+
+
+        },
+        methods: {
+
+            /**
+             * 跳转
+             * @param {object} item [数据对象]
+             */
+            jump(item) {
+
+                // 判断并调用通用跳转
+                if (typeof this.$parent.gotoDetail === "function") {
+
+                    // 构造跳转详情页参数
+                    let options = {
+                        type: "2",
+                        to: item.id,
+                        shop_type: item.shop_type
+                    }
+
+
+                    console.log(options);
+                    
+
+
+
+                    this.$parent.gotoDetail(options);
+                }
+            },
+
+            
+
+        },
+        head: {
+            title () {
+                return {
+                    inner: this.title
+                }
+            }
+        },
+        watch: {
+
+            // 设置页面标题
+            title(newVal) {
+                if (this.$store.state.browser.toLowerCase() == "qq" && this.$store.state.deviceType.toLowerCase() == "iphone") {
+                    this.$iFrame.insertIFrame(newVal);
+                } else {
+                    this.$emit("updateHead");
+                }
+            }
+        },
+        mounted() {
+            
+        }
+    }
+</script>
+
+<!-- Add "scoped" attribute to limit CSS to this component only -->
+<style rel="stylesheet/less" lang='less' scoped>
+    @import "com";
+</style>
@@ -26,6 +26,17 @@ const router = new Router({
                     meta: {
                         requireAuth: false
                     }
+                },
+                {
+                    // 优选库商城活动页
+                    path: "/com",
+                    name: "com",
+                    component: resolve => {
+                        require(["@/pages/com/com"], resolve);
+                    },
+                    meta: {
+                        requireAuth: false
+                    }
                 }
             ]
         },