w-front-end / select_good · Commits

Commit f5fccceb7b42129738b8fd2f259adbc87e325217

Authored by 王强
1 parent a8b6e5ea

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

Inline Side-by-side
Showing 9 changed files with 337 additions and 47 deletions
package.json
  View file @f5fccce
... ... @@ -19,7 +19,7 @@
19 19 "mint-ui": "^2.2.13",
20 20 "sha1": "^1.1.1",
21 21 "url-search-params-polyfill": "^7.0.1",
22   - "vant": "^2.5.8",
  22 + "vant": "^2.8.1",
23 23 "vue": "^2.6.11",
24 24 "vue-bus": "^1.2.1",
25 25 "vue-clipboard2": "^0.3.1",
... ...
src/components/columnListBox/columnListBox.vue
  View file @f5fccce
1 1 <template>
2 2 <div class="column-list-box" v-if="lists && lists.list && lists.list.length">
3   - <slot name="title"></slot>
  3 + <slot name="title-box"></slot>
4 4 <div class="box">
5 5  
6 6 <!-- left-box -->
... ...
src/components/darenTabCom/darenTabCom.less 0 → 100644
  View file @f5fccce
  1 +@charset "UTF-8";
  2 +
  3 +.daren-tab-com {
  4 +
  5 +}
0 6 \ No newline at end of file
... ...
src/components/darenTabCom/darenTabCom.vue 0 → 100644
  View file @f5fccce
  1 +<template>
  2 + <div class="daren-tab-com" v-if="item">
  3 + <div class="top">
  4 + <div class="avatar-box">
  5 + <img v-lazy="item.user_img + SIGN.SMALL" class="avatar-img" mode="widthFix" />
  6 + </div>
  7 + <div class="content-box">
  8 + <div class="fans">
  9 + 粉丝：{{item.fans_count || "1234"}}
  10 + </div>
  11 + <div class="sign">
  12 + {{item.sign || "国内男变女装第一人"}}
  13 + </div>
  14 + </div>
  15 + </div>
  16 + <div class="bottom">
  17 + <div class="user-title">
  18 + {{item.user_title}}
  19 + </div>
  20 + </div>
  21 + </div>
  22 +</template>
  23 +
  24 +<script>
  25 + export default {
  26 + data() {
  27 + return {
  28 +
  29 + };
  30 + },
  31 + props: ["item", "line"],
  32 + methods: {
  33 +
  34 + /**
  35 + * 切换标签
  36 + * @param {object} item [对象]
  37 + */
  38 + changeTab(item) {
  39 + this.$emit("changeTab", item);
  40 + }
  41 + }
  42 + }
  43 +</script>
  44 +
  45 +<!-- Add "scoped" attribute to limit CSS to this component only -->
  46 +<style rel="stylesheet/less" lang='less' scoped>
  47 + @import './darenTabCom';
  48 +</style>
... ...
src/components/horizList/horizList.less
  View file @f5fccce
... ... @@ -107,5 +107,30 @@
107 107 }
108 108 }
109 109 }
  110 + &.com-tab {
  111 + .h-box {
  112 + height: 102px;
  113 + .scroll-box {
  114 + padding-bottom: 45px;
  115 + }
  116 + }
  117 + &.pid-true {
  118 + .h-box {
  119 + .scroll-box {
  120 + > .box {
  121 + .item-box {
  122 + &:last-child {
  123 + .title-sub-title-com {
  124 + /deep/ .line {
  125 + display: none;
  126 + }
  127 + }
  128 + }
  129 + }
  130 + }
  131 + }
  132 + }
  133 + }
  134 + }
110 135 }
111 136 }
... ...
src/components/horizList/horizList.vue
  View file @f5fccce
... ... @@ -22,6 +22,10 @@
22 22 事件：
23 23 @jump：整个点击跳转事件
24 24 @primary：右下角红色主按钮点击事件，已阻止事件冒泡
  25 + com=tab：titleSubTitleCom组件，无pid参数
  26 + 事件：
  27 + @changeTab：切换tab事件
  28 +
25 29 -->
26 30  
27 31 <!-- 商品展示样式 1 -->
... ... @@ -45,11 +49,16 @@
45 49 <swiper-item v-if="com == '4'" @jump="jump"
46 50 :item="item">
47 51 </swiper-item>
48   - <shop-daren-hot v-if="com == '5'"
49   - @userJump="userJump"
50   - @fansShop="fansShop"
  52 +
  53 + <shop-daren-hot v-if="com == '5'" @userJump="userJump" @fansShop="fansShop"
51 54 :item="item">
52 55 </shop-daren-hot>
  56 +
  57 + <!-- tab -->
  58 + <title-sub-title-com v-if="com == 'tab'" @changeTab="changeTab"
  59 + :item="item"
  60 + :line="pid">
  61 + </title-sub-title-com>
53 62 </div>
54 63 </div>
55 64 </div>
... ... @@ -66,6 +75,8 @@
66 75 import goodsItem3 from "@/components/goodsItem_3/goodsItem_3";
67 76 import swiperItem from "@/components/swiperItem/swiperItem";
68 77 import shopDarenHot from "@/components/shopDarenHot/shopDarenHot";
  78 + import titleSubTitleCom from "@/components/titleSubTitleCom/titleSubTitleCom";
  79 +
69 80 export default {
70 81 name: "horizList",
71 82 data() {
... ... @@ -80,7 +91,8 @@
80 91 goodsItem2,
81 92 goodsItem3,
82 93 swiperItem,
83   - shopDarenHot
  94 + shopDarenHot,
  95 + titleSubTitleCom
84 96 },
85 97 methods: {
86 98  
... ... @@ -122,6 +134,14 @@
122 134 },
123 135  
124 136 /**
  137 + * changeTab切换事件
  138 + * @param {Object} item [tab对象]
  139 + */
  140 + changeTab(item) {
  141 + this.$emit("changeTab", item);
  142 + },
  143 +
  144 + /**
125 145 * 设置横向滚动
126 146 * @param {object} wrapper [需要设置滚动的对象]
127 147 */
... ...
src/components/titleSubTitleCom/titleSubTitleCom.less 0 → 100644
  View file @f5fccce
  1 +@charset "UTF-8";
  2 +
  3 +.title-sub-title-com {
  4 + display: flex;
  5 + justify-content: center;
  6 + align-items: center;
  7 + margin: 0 5px;
  8 + width: 182px;
  9 + height: auto;
  10 + .title-box {
  11 + width: 181px;
  12 + height: 100%;
  13 + text-align: center;
  14 + .title {
  15 + color: #666666;
  16 + font-size: 30px;
  17 + font-weight: 600;
  18 + width: 100%;
  19 + height: 100%;
  20 + white-space: nowrap;
  21 + text-overflow: ellipsis;
  22 + overflow: hidden;
  23 + }
  24 + .sub-title {
  25 + color: #B4B4B4;
  26 + font-size: 22px;
  27 + font-weight: 400;
  28 + width: 100%;
  29 + height: 100%;
  30 + white-space: nowrap;
  31 + text-overflow: ellipsis;
  32 + overflow: hidden;
  33 + }
  34 + &.active {
  35 + .title {
  36 + color: #FF725C;
  37 + }
  38 + .sub-title {
  39 + color: #FF725C;
  40 + }
  41 + }
  42 + }
  43 + .line {
  44 + background-color: #D6D6D6;
  45 + width: 1px;
  46 + height: 48px;
  47 + }
  48 +}
0 49 \ No newline at end of file
... ...
src/components/titleSubTitleCom/titleSubTitleCom.vue 0 → 100644
  View file @f5fccce
  1 +<template>
  2 + <div class="title-sub-title-com" v-if="item && item.title" @click="changeTab(item)">
  3 + <div class="title-box" :class="{'active': item.active}">
  4 + <div class="title">
  5 + {{item.title}}
  6 + </div>
  7 + <div class="sub-title" v-if="item.subTitle">
  8 + {{item.subTitle}}
  9 + </div>
  10 + </div>
  11 + <div class="line" v-if="line"></div>
  12 + </div>
  13 +</template>
  14 +
  15 +<script>
  16 + export default {
  17 + data() {
  18 + return {
  19 +
  20 + };
  21 + },
  22 + props: ["item", "line"],
  23 + methods: {
  24 +
  25 + /**
  26 + * 切换标签
  27 + * @param {object} item [对象]
  28 + */
  29 + changeTab(item) {
  30 + this.$emit("changeTab", item);
  31 + }
  32 + }
  33 + }
  34 +</script>
  35 +
  36 +<!-- Add "scoped" attribute to limit CSS to this component only -->
  37 +<style rel="stylesheet/less" lang='less' scoped>
  38 + @import './titleSubTitleCom';
  39 +</style>
... ...
src/pages/optimization/optimization.vue
  View file @f5fccce
... ... @@ -4,8 +4,10 @@
4 4 <!-- 下拉刷新 -->
5 5 <!-- <van-pull-refresh v-model="isLoading" pulling-text="下拉刷新..." loosing-text="释放刷新" loading-text="加载中..." success-text="刷新成功" @refresh="onRefresh"> -->
6 6  
7   - <!-- 标题 -->
  7 + <!-- 已关注达人 -->
8 8 <div v-if="dresserList&&dresserList.length">
  9 +
  10 + <!-- 标题 -->
9 11 <text-title-box @more="h5More"
10 12 :titles="{
11 13 title: '已关注达人',
... ... @@ -22,22 +24,40 @@
22 24 </div>
23 25 </div>
24 26  
  27 + <!-- 暂时不修改 开始 -->
  28 +
  29 + <!-- 已关注达人 -->
  30 + <!-- <div class="follow-daren-box" v-if="dresserList && dresserList.length"> -->
  31 +
  32 + <!-- tabs横向滚动 -->
  33 + <!-- <horiz-list v-if="dresserList && dresserList.length" @jump="followDarenJump"
  34 + :lists="dresserList"
  35 + com="daren-tab"> -->
  36 +
  37 + <!-- 标题 -->
  38 + <!-- <text-title-box slot="title-box" @more="more"
  39 + :titles="{
  40 + title: '已关注达人',
  41 + more: false
  42 + }">
  43 + </text-title-box>
  44 + </horiz-list>
  45 + </div> -->
  46 +
25 47 <!-- 最新动态 -->
26   - <div class="item_box">
27   - <div>
28   - <daren-list-box class="daren-list" @userJump="userJump" @jump="jump" @goodsJump="goodsJump" @goodsPrimary="goodsPrimary"
29   - :lists="{}">
  48 + <!-- <daren-list-box class="daren-list" @userJump="userJump" @jump="jump" @goodsJump="goodsJump" @goodsPrimary="goodsPrimary"
  49 + :lists="{}"> -->
30 50  
31   - <!--最新达人动态-->
32   - <text-title-box slot="title-box"
33   - :titles="{
34   - title: '最新动态',
35   - more: darenListsMore
36   - }">
37   - </text-title-box>
38   - </daren-list-box>
39   - </div>
40   - </div>
  51 + <!--最新达人动态-->
  52 + <!-- <text-title-box slot="title-box"
  53 + :titles="{
  54 + title: '最新动态',
  55 + more: darenListsMore
  56 + }">
  57 + </text-title-box>
  58 + </daren-list-box> -->
  59 +
  60 + <!-- 暂时不修改 结束 -->
41 61  
42 62 <!-- 商品部分 -->
43 63 <div class="goods-list-box">
... ... @@ -91,20 +111,41 @@
91 111 </text-title-box>
92 112 </horiz-list>
93 113  
94   - <!-- 商品样式 7 列表 -->
95   - <column-list-box class="components-box" v-if="newGoods && newGoods.list && newGoods.list.length" @jump="jump" @primary="primary"
96   - :lists="newGoods"
97   - com="7">
  114 + <!-- 最新上架组 -->
  115 + <div class="components-box" v-if="newGoods && newGoods.list && newGoods.list.length">
98 116  
99   - <!-- 标题 -->
100   - <text-title-box slot="title-box" @more="more"
101   - :titles="{
102   - title: '最新上架',
103   - //more: newGoodsMore
104   - more: false
105   - }">
106   - </text-title-box>
107   - </column-list-box>
  117 + <!-- tabs横向滚动 -->
  118 + <horiz-list v-if="newGoodsTabs && newGoodsTabs.list && newGoodsTabs.list.length" @changeTab="changeTab"
  119 + :lists="newGoodsTabs.list"
  120 + com="tab"
  121 + :pid="true">
  122 +
  123 + <!-- 标题 -->
  124 + <text-title-box slot="title-box" @more="more"
  125 + :titles="{
  126 + title: '最新上架',
  127 + //more: newGoodsMore
  128 + more: false
  129 + }">
  130 + </text-title-box>
  131 + </horiz-list>
  132 +
  133 +
  134 + <!-- 上拉加载 -->
  135 +
  136 +
  137 +
  138 + <!-- 商品样式 7 列表 -->
  139 + <column-list-box class="column-list-box" v-if="newGoods && newGoods.list && newGoods.list.length" @jump="jump" @primary="primary"
  140 + :lists="newGoods"
  141 + com="7">
  142 + </column-list-box>
  143 +
  144 +
  145 +
  146 +
  147 +
  148 + </div>
108 149 </div>
109 150 <!-- </van-pull-refresh> -->
110 151 </div>
... ... @@ -114,28 +155,31 @@
114 155  
115 156 // 引入组件
116 157 import { Toast, Indicator } from "mint-ui";
  158 + import { Tab, Tabs } from 'vant';
117 159 import dresserList from "@/components/dresserList/dresserList";
118 160 import darenListBox from "@/components/darenListBox/darenListBox";
119 161 import horizList from "@/components/horizList/horizList";
120 162 import horizListFlex from "@/components/horizListFlex/horizListFlex";
121   - import columnListBox from "@/components/columnListBox/columnListBox";
122 163 import textTitleBox from "@/components/textTitleBox/textTitleBox";
  164 + import columnListBox from "@/components/columnListBox/columnListBox";
123 165  
124 166 export default {
125 167 name: 'optimization',
126 168 data () {
127 169 return {
128 170 title: "",
129   - isLoading: false, // 下拉刷新控制
130   - dresserList: null, // 达人列表
131   - darenLists: null, // 达人动态列表
132   - darenListsMore: null, // 达人动态列表更多
133   - hotGoods: null, // 热销商品
134   - hotGoodsMore: null, // 热销商品更多
135   - newGoods: null, // 最新上架
136   - newGoodsMore: null, // 最新上架更多
137   - newBuyGoods: null, // 最新购买
138   - recommendGoods: null // 猜你喜欢
  171 + isLoading: false, // 下拉刷新控制
  172 + dresserList: null, // 达人列表
  173 + darenLists: null, // 达人动态列表
  174 + darenListsMore: null, // 达人动态列表更多
  175 + hotGoods: null, // 热销商品
  176 + hotGoodsMore: null, // 热销商品更多
  177 + newGoodsMore: null, // 最新上架更多
  178 + newBuyGoods: null, // 最新购买
  179 + recommendGoods: null, // 猜你喜欢
  180 + newGoodsTabs: null, // 最新上架tabs对象
  181 + newGoodsTabsActiveIndex: 0, // 最新上架tabs活动项目序号
  182 + newGoods: null // 最新上架
139 183 }
140 184 },
141 185 components: {
... ... @@ -143,8 +187,8 @@
143 187 darenListBox,
144 188 horizList,
145 189 horizListFlex,
146   - columnListBox,
147   - textTitleBox
  190 + textTitleBox,
  191 + columnListBox
148 192 },
149 193 created() {
150 194  
... ... @@ -228,6 +272,52 @@
228 272 }
229 273 }
230 274  
  275 + // 设置“最新上架”tab数据
  276 + this.$set(this, "newGoodsTabs", {
  277 + list: [
  278 + {
  279 + title: "助力",
  280 + subTitle: "副的标题",
  281 + active: true
  282 + },
  283 + {
  284 + title: "原产地",
  285 + subTitle: "副的标题",
  286 + active: false
  287 + },
  288 + {
  289 + title: "扶贫",
  290 + subTitle: "副的标题",
  291 + active: false
  292 + },
  293 + {
  294 + title: "人气",
  295 + subTitle: "副的标题",
  296 + active: false
  297 + },
  298 + {
  299 + title: "助力",
  300 + subTitle: "副的标题",
  301 + active: false
  302 + },
  303 + {
  304 + title: "原产地",
  305 + subTitle: "副的标题",
  306 + active: false
  307 + },
  308 + {
  309 + title: "扶贫",
  310 + subTitle: "副的标题",
  311 + active: false
  312 + },
  313 + {
  314 + title: "人气",
  315 + subTitle: "副的标题",
  316 + active: false
  317 + }
  318 + ]
  319 + });
  320 +
231 321 // 获取“最新上架”
232 322 if (datas.newGoods && datas.newGoods.length) {
233 323  
... ... @@ -420,6 +510,21 @@
420 510 // 调用通用跳转
421 511 this.$parent.gotoDetail(item);
422 512 }
  513 + },
  514 +
  515 + /**
  516 + * 切换标签
  517 + * @param {object} item [对象]
  518 + */
  519 + changeTab(item) {
  520 +
  521 +
  522 +
  523 + console.log("changeTab", item);
  524 +
  525 +
  526 +
  527 +
423 528 }
424 529 },
425 530 head: {
... ...