优选库 - “优选”页面改版，最新更新分标签多页上拉加载，UI和组件完成，等接口~

王强
1 parent a8b6e5ea
Showing 9 changed files with 337 additions and 47 deletions
package.json
src/components/columnListBox/columnListBox.vue
src/components/darenTabCom/darenTabCom.less
src/components/darenTabCom/darenTabCom.vue
src/components/horizList/horizList.less
src/components/horizList/horizList.vue
src/components/titleSubTitleCom/titleSubTitleCom.less
src/components/titleSubTitleCom/titleSubTitleCom.vue
src/pages/optimization/optimization.vue
@@ -19,7 +19,7 @@
     "mint-ui": "^2.2.13",
     "sha1": "^1.1.1",
     "url-search-params-polyfill": "^7.0.1",
-    "vant": "^2.5.8",
+    "vant": "^2.8.1",
     "vue": "^2.6.11",
     "vue-bus": "^1.2.1",
     "vue-clipboard2": "^0.3.1",
 <template>
 	<div class="column-list-box" v-if="lists && lists.list && lists.list.length">
-		<slot name="title"></slot>
+		<slot name="title-box"></slot>
 		<div class="box">
 			<!-- left-box -->
+@charset "UTF-8";
+
+.daren-tab-com {
+	
+}
 \ No newline at end of file
+<template>
+	<div class="daren-tab-com" v-if="item">
+		<div class="top">
+			<div class="avatar-box">
+				<img v-lazy="item.user_img + SIGN.SMALL" class="avatar-img" mode="widthFix" /> 
+			</div>
+			<div class="content-box">
+				<div class="fans">
+					粉丝：{{item.fans_count || "1234"}}
+				</div>
+				<div class="sign">
+					{{item.sign || "国内男变女装第一人"}}
+				</div>
+			</div>
+		</div>
+		<div class="bottom">
+			<div class="user-title">
+				{{item.user_title}}
+			</div>
+		</div>
+	</div>
+</template>
+
+<script>
+	export default {
+		data() {
+			return {
+				
+			};
+		},
+		props: ["item", "line"],
+		methods: {
+
+			/**
+			 * 切换标签
+			 * @param {object} item [对象]
+			 */
+			changeTab(item) {
+				this.$emit("changeTab", item);
+			}
+		}
+	}
+</script>
+
+<!-- Add "scoped" attribute to limit CSS to this component only -->
+<style rel="stylesheet/less" lang='less' scoped>
+	@import './darenTabCom';
+</style>
@@ -107,5 +107,30 @@
 				}
 			}
 		}
+		&.com-tab {
+			.h-box {
+				height: 102px;
+				.scroll-box {
+					padding-bottom: 45px;
+				}
+			}
+			&.pid-true {
+				.h-box {
+					.scroll-box {
+						> .box {
+							.item-box {
+								&:last-child {
+									.title-sub-title-com {
+										/deep/ .line {
+											display: none;
+										}
+									}
+								}
+							}
+						}
+					}
+				}
+			}
+		}
 	}
 }
@@ -22,6 +22,10 @@
                                     事件：
                                         @jump：整个点击跳转事件
                                         @primary：右下角红色主按钮点击事件，已阻止事件冒泡
+								com=tab：titleSubTitleCom组件，无pid参数
+                                    事件：
+                                        @changeTab：切换tab事件
+								
 							 -->
 							<!-- 商品展示样式 1 -->
@@ -45,11 +49,16 @@
                             <swiper-item v-if="com == '4'" @jump="jump"
                                 :item="item">
                             </swiper-item>
-                            <shop-daren-hot v-if="com == '5'"
-								@userJump="userJump"
-								@fansShop="fansShop"
+
+                            <shop-daren-hot v-if="com == '5'" @userJump="userJump" @fansShop="fansShop"
 								:item="item">
                             </shop-daren-hot>
+
+							<!-- tab -->
+							<title-sub-title-com v-if="com == 'tab'" @changeTab="changeTab"
+								:item="item"
+								:line="pid">
+							</title-sub-title-com>
 						</div>
 					</div>
 				</div>
@@ -66,6 +75,8 @@
 	import goodsItem3 from "@/components/goodsItem_3/goodsItem_3";
 	import swiperItem from "@/components/swiperItem/swiperItem";
     import shopDarenHot from "@/components/shopDarenHot/shopDarenHot";
+	import titleSubTitleCom from "@/components/titleSubTitleCom/titleSubTitleCom";
+	
     export default {
 		name: "horizList",
         data() {
@@ -80,7 +91,8 @@
 			goodsItem2,
 			goodsItem3,
             swiperItem,
-            shopDarenHot
+			shopDarenHot,
+			titleSubTitleCom
         },
 		methods: {
@@ -122,6 +134,14 @@
 			},
 			/**
+			 * changeTab切换事件
+			 * @param {Object} item [tab对象]
+			 */
+			changeTab(item) {
+				this.$emit("changeTab", item);
+			},
+
+			/**
 			 * 设置横向滚动
 			 * @param {object} wrapper [需要设置滚动的对象]
 			 */
+@charset "UTF-8";
+
+.title-sub-title-com {
+	display: flex;
+	justify-content: center;
+	align-items: center;
+	margin: 0 5px;
+	width: 182px;
+	height: auto;
+	.title-box {
+		width: 181px;
+		height: 100%;
+		text-align: center;
+		.title {
+			color: #666666;
+			font-size: 30px;
+			font-weight: 600;
+			width: 100%;
+			height: 100%;
+			white-space: nowrap;
+			text-overflow: ellipsis;
+			overflow: hidden;
+		}
+		.sub-title {
+			color: #B4B4B4;
+			font-size: 22px;
+			font-weight: 400;
+			width: 100%;
+			height: 100%;
+			white-space: nowrap;
+			text-overflow: ellipsis;
+			overflow: hidden;
+		}
+		&.active {
+			.title {
+				color: #FF725C;
+			}
+			.sub-title {
+				color: #FF725C;
+			}
+		}
+	}
+	.line {
+		background-color: #D6D6D6;
+		width: 1px;
+		height: 48px;
+	}
+}
 \ No newline at end of file
+<template>
+	<div class="title-sub-title-com" v-if="item && item.title" @click="changeTab(item)">
+		<div class="title-box" :class="{'active': item.active}">
+			<div class="title">
+				{{item.title}}
+			</div>
+			<div class="sub-title" v-if="item.subTitle">
+				{{item.subTitle}}
+			</div>
+		</div>
+		<div class="line" v-if="line"></div>
+	</div>
+</template>
+
+<script>
+	export default {
+		data() {
+			return {
+				
+			};
+		},
+		props: ["item", "line"],
+		methods: {
+
+			/**
+			 * 切换标签
+			 * @param {object} item [对象]
+			 */
+			changeTab(item) {
+				this.$emit("changeTab", item);
+			}
+		}
+	}
+</script>
+
+<!-- Add "scoped" attribute to limit CSS to this component only -->
+<style rel="stylesheet/less" lang='less' scoped>
+	@import './titleSubTitleCom';
+</style>
@@ -4,8 +4,10 @@
         <!-- 下拉刷新 -->
         <!-- <van-pull-refresh v-model="isLoading" pulling-text="下拉刷新..." loosing-text="释放刷新" loading-text="加载中..." success-text="刷新成功" @refresh="onRefresh"> -->
-            <!-- 标题 -->
+            <!-- 已关注达人 -->
             <div v-if="dresserList&&dresserList.length">
+
+                <!-- 标题 -->
                 <text-title-box @more="h5More"
                     :titles="{
                         title: '已关注达人',
@@ -22,22 +24,40 @@
                 </div>
             </div>
+            <!-- 暂时不修改 开始 -->
+
+            <!-- 已关注达人 -->
+            <!-- <div class="follow-daren-box" v-if="dresserList && dresserList.length"> -->
+
+                <!-- tabs横向滚动 -->
+                <!-- <horiz-list v-if="dresserList && dresserList.length" @jump="followDarenJump"
+                    :lists="dresserList"
+                    com="daren-tab"> -->
+
+                    <!-- 标题 -->
+                    <!-- <text-title-box slot="title-box" @more="more"
+                        :titles="{
+                            title: '已关注达人',
+                            more: false
+                        }">
+                    </text-title-box>
+                </horiz-list>
+            </div> -->
+
             <!-- 最新动态 -->
-            <div class="item_box">
-                <div>
-                    <daren-list-box class="daren-list" @userJump="userJump" @jump="jump" @goodsJump="goodsJump" @goodsPrimary="goodsPrimary"
-                        :lists="{}">
+            <!-- <daren-list-box class="daren-list" @userJump="userJump" @jump="jump" @goodsJump="goodsJump" @goodsPrimary="goodsPrimary"
+                :lists="{}"> -->
-                        <!--最新达人动态-->
-                        <text-title-box slot="title-box"
-                            :titles="{
-                                title: '最新动态',
-                                more: darenListsMore
-                            }">
-                        </text-title-box>
-                    </daren-list-box>
-                </div>
-            </div>
+                <!--最新达人动态-->
+                <!-- <text-title-box slot="title-box"
+                    :titles="{
+                        title: '最新动态',
+                        more: darenListsMore
+                    }">
+                </text-title-box>
+            </daren-list-box> -->
+
+            <!-- 暂时不修改 结束 -->
             <!-- 商品部分 -->
             <div class="goods-list-box">
@@ -91,20 +111,41 @@
                     </text-title-box>
                 </horiz-list>
-                <!-- 商品样式 7 列表 -->
-                <column-list-box class="components-box" v-if="newGoods && newGoods.list && newGoods.list.length" @jump="jump" @primary="primary"
-                    :lists="newGoods"
-                    com="7">
+                <!-- 最新上架组 -->
+                <div class="components-box" v-if="newGoods && newGoods.list && newGoods.list.length">
-                    <!-- 标题 -->
-                    <text-title-box slot="title-box" @more="more"
-                        :titles="{
-                            title: '最新上架',
-                            //more: newGoodsMore
-                            more: false
-                        }">
-                    </text-title-box>
-                </column-list-box>
+                    <!-- tabs横向滚动 -->
+                    <horiz-list v-if="newGoodsTabs && newGoodsTabs.list && newGoodsTabs.list.length" @changeTab="changeTab"
+                        :lists="newGoodsTabs.list"
+                        com="tab"
+                        :pid="true">
+
+                        <!-- 标题 -->
+                        <text-title-box slot="title-box" @more="more"
+                            :titles="{
+                                title: '最新上架',
+                                //more: newGoodsMore
+                                more: false
+                            }">
+                        </text-title-box>
+                    </horiz-list>
+
+
+                    <!-- 上拉加载 -->
+
+
+
+                    <!-- 商品样式 7 列表 -->
+                    <column-list-box class="column-list-box" v-if="newGoods && newGoods.list && newGoods.list.length" @jump="jump" @primary="primary"
+                        :lists="newGoods"
+                        com="7">
+                    </column-list-box>
+
+
+
+
+                    
+                </div>
             </div>
         <!-- </van-pull-refresh> -->
     </div>
@@ -114,28 +155,31 @@
     // 引入组件
     import { Toast, Indicator } from "mint-ui";
+    import { Tab, Tabs } from 'vant';
     import dresserList from "@/components/dresserList/dresserList";
     import darenListBox from "@/components/darenListBox/darenListBox";
     import horizList from "@/components/horizList/horizList";
     import horizListFlex from "@/components/horizListFlex/horizListFlex";
-    import columnListBox from "@/components/columnListBox/columnListBox";
     import textTitleBox from "@/components/textTitleBox/textTitleBox";
+    import columnListBox from "@/components/columnListBox/columnListBox";
     export default {
         name: 'optimization',
         data () {
             return {
                 title: "",
-                isLoading: false,       // 下拉刷新控制
-                dresserList: null,      // 达人列表
-                darenLists: null,       // 达人动态列表
-                darenListsMore: null,   // 达人动态列表更多
-                hotGoods: null,         // 热销商品
-                hotGoodsMore: null,     // 热销商品更多
-                newGoods: null,         // 最新上架
-                newGoodsMore: null,     // 最新上架更多
-                newBuyGoods: null,      // 最新购买
-                recommendGoods: null    // 猜你喜欢
+                isLoading: false,               // 下拉刷新控制
+                dresserList: null,              // 达人列表
+                darenLists: null,               // 达人动态列表
+                darenListsMore: null,           // 达人动态列表更多
+                hotGoods: null,                 // 热销商品
+                hotGoodsMore: null,             // 热销商品更多
+                newGoodsMore: null,             // 最新上架更多
+                newBuyGoods: null,              // 最新购买
+                recommendGoods: null,           // 猜你喜欢
+                newGoodsTabs: null,             // 最新上架tabs对象
+                newGoodsTabsActiveIndex: 0,     // 最新上架tabs活动项目序号
+                newGoods: null                  // 最新上架
             }
         },
         components: {
@@ -143,8 +187,8 @@
             darenListBox,
             horizList,
             horizListFlex,
-            columnListBox,
-            textTitleBox
+            textTitleBox,
+            columnListBox
         },
         created() {
@@ -228,6 +272,52 @@
                         }
                     }
+                    // 设置“最新上架”tab数据
+                    this.$set(this, "newGoodsTabs", {
+                        list: [
+                            {
+                                title: "助力",
+                                subTitle: "副的标题",
+                                active: true
+                            },
+                            {
+                                title: "原产地",
+                                subTitle: "副的标题",
+                                active: false
+                            },
+                            {
+                                title: "扶贫",
+                                subTitle: "副的标题",
+                                active: false
+                            },
+                            {
+                                title: "人气",
+                                subTitle: "副的标题",
+                                active: false
+                            },
+                            {
+                                title: "助力",
+                                subTitle: "副的标题",
+                                active: false
+                            },
+                            {
+                                title: "原产地",
+                                subTitle: "副的标题",
+                                active: false
+                            },
+                            {
+                                title: "扶贫",
+                                subTitle: "副的标题",
+                                active: false
+                            },
+                            {
+                                title: "人气",
+                                subTitle: "副的标题",
+                                active: false
+                            }
+                        ]
+                    });
+
                     // 获取“最新上架”
                     if (datas.newGoods && datas.newGoods.length) {
@@ -420,6 +510,21 @@
                     // 调用通用跳转
                     this.$parent.gotoDetail(item);
                 }
+            },
+
+            /**
+			 * 切换标签
+			 * @param {object} item [对象]
+			 */
+            changeTab(item) {
+
+
+
+                console.log("changeTab", item);
+                
+
+
+
             }
         },
         head: {