代码优化~

王强
1 parent 4a534d93
Showing 11 changed files with 97 additions and 201 deletions
src/components/goodsItem_1/goodsItem_1.vue
src/components/goodsItem_2/goodsItem_2.vue
src/components/horizList_1/horizList_1.less → src/components/horizList/horizList.less
src/components/horizList_1/horizList_1.vue → src/components/horizList/horizList.vue
src/components/horizList_2/horizList_2.less
src/components/horizList_2/horizList_2.vue
src/components/style_7/style_7.vue
src/components/videoArea/videoArea.less
src/components/videoArea/videoArea.vue
src/pages/com/com.vue
src/pages/mall/mall.vue
@@ -5,7 +5,7 @@
 		</div>
 		<div class="title">{{item.title}}</div>
 		<div class="price-box">
-			<div class="price">￥{{item.price}}</div>
+			<div class="price">¥{{item.price}}</div>
 			<div class="add-cart" v-if="pid == '1' || pid == '3'" @click.stop.prevent @click="addCart(item)">
 				<img src="static/img/icon_add.png" class="add-img" />
 			</div>
@@ -6,7 +6,7 @@
 		<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="symbol">¥</div>
 				<div class="price">{{item.price}}</div>
 			</div>
 			<div class="ads" v-if="pid == '2'">
 @charset "UTF-8";
-.horiz-list-1-box {
+.horiz-list-box {
 	background-color: transparent;
 	width: 100%;
 	height: auto;
@@ -29,16 +29,52 @@
 				}
 			}
 		}
-		&.pid-2, &.pid-4 {
+		&.com-1 {
+			&.pid-2, &.pid-4 {
+				.h-box {
+					height: 320px;
+					.scroll-box {
+						> .box {
+							display: block;
+							.item-box {
+								padding-right: 40px;
+								&:first-child {
+									padding-left: 40px;
+								}
+							}
+						}
+					}
+				}
+			}
+		}
+		&.com-2 {
 			.h-box {
-				height: 320px;
+				height: 354px;
 				.scroll-box {
+					padding-bottom: 26px;
 					> .box {
 						display: block;
 						.item-box {
-							padding-right: 40px;
+							padding-right: 30px;
 							&:first-child {
-								padding-left: 40px;
+								padding-left: 30px;
+							}
+						}
+					}
+				}
+			}
+			&.pid-2 {
+				.h-box {
+					height: 360px;
+					.scroll-box {
+						padding-bottom: 30px;
+						> .box {
+							display: block;
+							.item-box {
+								padding-right: 30px;
+								&:first-child {
+									padding-left: 30px;
+								}
 							}
 						}
 					}
 <template>
-    <div class="horiz-list-1-box" v-if="lists && lists.length">
-		<div class="box" :class="'pid-' + pid">
+    <div class="horiz-list-box" v-if="lists && lists.length">
+		<div class="box" :class="'com-' + com + ' 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">
+							<!-- 
+								com=1：goodsItem_1组件，pid：1、3，固定不滚动，2、4，滚动
+								com=2：goodsItem_2组件，pid: 1，带标题，2、不带标题，显示附加信息
+							 -->
+
 							<!-- 商品展示样式 1 -->
-							<goods-item-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
+								:item="item"
+								:pid="pid">
+							</goods-item-2>
 						</div>
 					</div>
 				</div>
@@ -22,6 +33,7 @@
 <script>
 	// 引入组件
 	import goodsItem1 from "@/components/goodsItem_1/goodsItem_1";
+	import goodsItem2 from "@/components/goodsItem_2/goodsItem_2";
     export default {
         data: function () {
@@ -30,9 +42,10 @@
 				scrollItemBox: 100
             }
         },
-		props: ["lists", "pid"],
+		props: ["lists", "com", "pid"],
 		components: {
-			goodsItem1
+			goodsItem1,
+			goodsItem2
         },
 		methods: {
@@ -87,7 +100,7 @@
 			 lists(newVal, oldVal) {
 				// 判断是否有数据
-				if (typeof newVal === "object" && newVal.length > 0 && (this.pid == "2" || this.pid == "4")) {
+				if (typeof newVal === "object" && newVal.length > 0) {
 					// 下一周期处理
 					this.$nextTick(function() {
@@ -101,7 +114,7 @@
 		mounted() {
 			// 判断如果lists有值，设置横向滚动数据
-			if (this.lists && this.lists.length && (this.pid == "2" || this.pid == "4")) {
+			if (this.lists && this.lists.length) {
 				// 下一周期处理
 				this.$nextTick(function() {
@@ -116,5 +129,5 @@
 <!-- Add "scoped" attribute to limit CSS to this component only -->
 <style rel="stylesheet/less" lang="less">
-    @import './horizList_1';
+    @import './horizList';
 </style>
 \ No newline at end of file
-@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
@@ -21,10 +21,11 @@
 			</div>
 			<!-- 横向滚动列表 -->
-			<horiz-list-1 v-if="styles.market && styles.market.goods && styles.market.goods.length" @jump=jump @addCart=addCart
+			<horiz-list v-if="styles.market && styles.market.goods && styles.market.goods.length" @jump=jump @addCart=addCart
 				:lists="styles.market.goods"
+				com="1"
 				:pid="styles.market.pid">
-			</horiz-list-1>
+			</horiz-list>
 		</div>
     </div>
 </template>
@@ -33,7 +34,7 @@
 	// 引入组件
 	import titleBox from "@/components/titleBox/titleBox";
-	import horizList1 from "@/components/horizList_1/horizList_1";
+	import horizList from "@/components/horizList/horizList";
     export default {
         data: function () {
@@ -44,7 +45,7 @@
 		props: ["styles"],
 		components: {
 			titleBox,
-			horizList1
+			horizList
         },
 		methods: {
@@ -8,22 +8,25 @@
         display: block;
     }
     .title{
-        margin: 20px 0 0 20px;
-        height:42px;
-        font-size:30px;
-        font-weight:500;
+        margin: 20px auto 0 auto;
         color:rgba(102,102,102,1);
-        line-height:42px;
+        font-size:30px;
+        width: 710px;
+		white-space: nowrap;
+		text-overflow: ellipsis;
+		overflow: hidden;
     }
     .desc{
-        margin: 4px 20px 0 20px;
-        height:40px;
+        margin: 3px auto 0 auto;
+        color:rgba(156,156,156,1);
         font-size:28px;
         font-weight:400;
-        color:rgba(156,156,156,1);
-        line-height:40px;
+        width: 710px;
         padding-bottom: 20px;
         border-bottom: solid 1px #F2F2F2;
+        white-space: nowrap;
+		text-overflow: ellipsis;
+		overflow: hidden;
     }
     .pic_box{
         display: flex;
@@ -46,6 +49,7 @@
                 color:rgba(172,172,172,1);
                 line-height:70px;
                 margin-left: 14px;
+                text-decoration: line-through;
             }
         }
         .btn{
@@ -6,15 +6,15 @@
         <div class="item_box" @click="toDetail(videoAreaInfo.img[0])">
             <img v-lazy="videoAreaInfo.img[0].simg + SIGN.BIG" class="main-img" mode="widthFix" />
             <div class="title">
-                美猴王系列绘本（套装共32册）
+                {{videoAreaInfo.img[0].goods_data.title}}
             </div>
-            <div class="desc">
-                规格：32册／套
+            <div class="desc" v-if="videoAreaInfo.img[0].goods_data.attr">
+                {{videoAreaInfo.img[0].goods_data.attr}}
             </div>
             <div class="pic_box">
                 <div class="pice">
-                    <div class="now">¥ 361.9</div>
-                    <div class="original">¥ 399.9</div>
+                    <div class="now">¥ {{videoAreaInfo.img[0].goods_data.price}}</div>
+                    <div class="original">¥ {{videoAreaInfo.img[0].goods_data.prices}}</div>
                 </div>
                 <!--<div class="btn">-->
                     <!--立即购买-->
 <template>
     <div class="com">
-        <!-- 商品样式 2 滑动 -->
-        <horiz-list-2 @jump="jump"
+        <!-- 商品样式 滑动 -->
+        <horiz-list @jump="jump"
             :lists="lists"
-            pid="1">
+            com="2"
+            pid="2">
             <!-- 标题 -->
             <text-title-box slot="title-box"
@@ -12,7 +13,7 @@
                     title: '最近购买'
                 }">
             </text-title-box>
-        </horiz-list-2>
+        </horiz-list>
@@ -23,7 +24,7 @@
     // 引入组件
     import { Toast, Indicator } from "mint-ui";
-    import horizList2 from "@/components/horizList_2/horizList_2";
+    import horizList from "@/components/horizList/horizList";
     import textTitleBox from "@/components/textTitleBox/textTitleBox";
     export default {
@@ -71,7 +72,7 @@
             }
         },
         components: {
-            horizList2,
+            horizList,
             textTitleBox,
@@ -69,9 +69,6 @@
         },
         created() {
-            // 设置标题
-            this.$set(this, "title", "优选库商城");
-
             // 获取优选库精选活动
             this.activityAd();
         },
@@ -111,6 +108,9 @@
                     /* 获取优选库精选活动数据 开始 */
+                    // 设置标题
+                    this.$set(this, "title", datas.title);
+
                     // 设置banner数据
                     if (datas.banner && datas.banner.length) {
                         this.$set(this, "banner", datas.banner);