w-front-end / select_good · Commits

Commit f8748d17ea0dec4a2b6188bf38a588206768b266

Authored by 王强
2 parents 2e93e4ba 6b17fecb

Merge branch 'optimization_version_1.1.0'

Inline Side-by-side
Showing 25 changed files with 950 additions and 88 deletions
package.json
  View file @f8748d1
... ... @@ -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/columnCommodityListBox/columnCommodityListBox.less
  View file @f8748d1
... ... @@ -102,7 +102,6 @@
102 102 .decimal {
103 103 font-size: 24px;
104 104 }
105   -
106 105 }
107 106 .right {
108 107 display: flex;
... ...
src/components/columnCommodityListBox/columnCommodityListBox.vue
  View file @f8748d1
... ... @@ -19,7 +19,7 @@
19 19 </div> -->
20 20 <div class="price-box">
21 21 <div class="left">
22   - <div class="y">￥</div>
  22 + <div class="y">¥&nbsp;</div>
23 23 <div class="integer">{{getInteger(item.price)}}.</div>
24 24 <div class="decimal">{{getDecimal(item.price)}}</div>
25 25 </div>
... ... @@ -48,7 +48,7 @@
48 48 </div> -->
49 49 <div class="price-box">
50 50 <div class="left">
51   - <div class="y">￥</div>
  51 + <div class="y">¥&nbsp;</div>
52 52 <div class="integer">{{getInteger(item.price)}}.</div>
53 53 <div class="decimal">{{getDecimal(item.price)}}</div>
54 54 </div>
... ...
src/components/columnListBox/columnListBox.less 0 → 100644
  View file @f8748d1
  1 +@charset "UTF-8";
  2 +
  3 +.column-list-box {
  4 + .title-box {
  5 + & + .box {
  6 + margin-top: 30px;
  7 + }
  8 + }
  9 + .box {
  10 + // display: flex;
  11 + // flex-direction: row;
  12 + // justify-content: space-between;
  13 + // align-items: flex-start;
  14 + // flex-wrap: wrap;
  15 + column-count: 2;
  16 + column-width: 330px;
  17 + column-gap: 30px;
  18 + margin: 0 auto;
  19 + padding-bottom: 18px;
  20 + width: 690px;
  21 + .left-box {
  22 + .item-box {
  23 + &:last-child {
  24 + margin-bottom: 0;
  25 + }
  26 + }
  27 + }
  28 + .right-box {
  29 + .item-box {
  30 + &:last-child {
  31 + // margin-bottom: 0;
  32 + }
  33 + }
  34 + }
  35 + .item-box {
  36 + background-color: transparent;
  37 + margin-bottom: 30px;
  38 + width: 330px;
  39 + height: auto;
  40 + break-inside: avoid;
  41 + // border-radius: 30px;
  42 + overflow: hidden;
  43 + }
  44 + }
  45 +}
0 46 \ No newline at end of file
... ...
src/components/columnListBox/columnListBox.vue 0 → 100644
  View file @f8748d1
  1 +<template>
  2 + <div class="column-list-box" v-if="lists && lists.list && lists.list.length">
  3 + <slot name="title-box"></slot>
  4 + <div class="box">
  5 +
  6 + <!-- left-box -->
  7 + <div class="left-box">
  8 +
  9 + <!-- 数组内奇数，index是偶数 -->
  10 + <div class="item-box" v-if="!(index % 2)" v-for="(item, index) in lists.list" :key="index">
  11 +
  12 + <!-- 商品组件 -->
  13 + <goods-item-7 v-if="com == '7'" @jump="jump" @primary="primary"
  14 + :item="item">
  15 + </goods-item-7>
  16 + </div>
  17 + </div>
  18 +
  19 + <!-- right-box -->
  20 + <div class="right-box">
  21 +
  22 + <!-- 数组内偶数，index是奇数 -->
  23 + <div class="item-box" v-if="index % 2" v-for="(item, index) in lists.list" :key="index">
  24 +
  25 + <!-- 商品组件 -->
  26 + <goods-item-7 v-if="com == '7'" @jump="jump" @primary="primary"
  27 + :item="item">
  28 + </goods-item-7>
  29 + </div>
  30 + </div>
  31 + </div>
  32 + </div>
  33 +</template>
  34 +
  35 +<script>
  36 +
  37 + // 引入组件
  38 + import goodsItem7 from "@/components/goodsItem_7/goodsItem_7";
  39 +
  40 + export default {
  41 + data() {
  42 + return {
  43 +
  44 + };
  45 + },
  46 + props: ["lists", "com"],
  47 + components: {
  48 + goodsItem7
  49 + },
  50 + methods: {
  51 +
  52 + /**
  53 + * 跳转函数
  54 + * @param {object} item [对象]
  55 + */
  56 + jump(item) {
  57 + this.$emit("jump", item);
  58 + },
  59 +
  60 + /**
  61 + * 组件功能按钮
  62 + * @param {object} item [对象]
  63 + */
  64 + primary(item) {
  65 + this.$emit("primary", item);
  66 + }
  67 + }
  68 + }
  69 +</script>
  70 +
  71 +<!-- Add "scoped" attribute to limit CSS to this component only -->
  72 +<style rel="stylesheet/less" lang='less' scoped>
  73 + @import './columnListBox';
  74 +</style>
... ...
src/components/darenTabCom/darenTabCom.less 0 → 100644
  View file @f8748d1
  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 @f8748d1
  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/goodsItem_1/goodsItem_1.vue
  View file @f8748d1
... ... @@ -5,7 +5,7 @@
5 5 </div>
6 6 <div class="title">{{item.title}}</div>
7 7 <div class="price-box">
8   - <div class="price">¥{{item.price}}</div>
  8 + <div class="price">¥&nbsp;{{item.price}}</div>
9 9 <div class="add-cart" v-if="pid == '1' || pid == '3'" @click.stop.prevent @click="addCart(item)">
10 10 <img src="static/img/icon_add.png" class="add-img" />
11 11 </div>
... ...
src/components/goodsItem_2/goodsItem_2.vue
  View file @f8748d1
... ... @@ -9,7 +9,7 @@
9 9 <div class="content-box">
10 10 <div class="title" v-if="pid == undefined || pid == '1'">{{item.title}}</div>
11 11 <div class="price-box">
12   - <div class="symbol">¥</div>
  12 + <div class="symbol">¥&nbsp;</div>
13 13 <div class="price">{{item.price}}</div>
14 14 </div>
15 15 <div class="ads" v-if="pid == '2'">
... ...
src/components/goodsItem_3/goodsItem_3.less
  View file @f8748d1
... ... @@ -79,11 +79,12 @@
79 79 display: flex;
80 80 justify-content: center;
81 81 align-items: center;
82   - background-color: #EC1125;
83   - color: #FFFFFF;
  82 + background-color: #ffffff;
  83 + color: #EC1125;
84 84 font-size: 24px;
85 85 width: 100%;
86 86 height: 46px;
  87 + border: 1px solid #EC1125;
87 88 border-radius: 6px;
88 89 white-space: nowrap;
89 90 text-overflow: ellipsis;
... ...
src/components/goodsItem_3/goodsItem_3.vue
  View file @f8748d1
... ... @@ -13,7 +13,7 @@
13 13 </div>
14 14 <div class="bottom-box">
15 15 <div class="price-box">
16   - <div class="symbol">¥</div>
  16 + <div class="symbol">¥&nbsp;</div>
17 17 <div class="price">{{item.price}}</div>
18 18 </div>
19 19 <div class="buttons-box">
... ...
src/components/goodsItem_4/goodsItem_4.vue
  View file @f8748d1
... ... @@ -7,7 +7,7 @@
7 7 </div>
8 8 <div class="content-box">
9 9 <div class="title">{{item.title}}</div>
10   - <div class="price">￥&nbsp;{{item.price}}</div>
  10 + <div class="price">¥&nbsp;{{item.price}}</div>
11 11 </div>
12 12 </div>
13 13 <div class="right-box">
... ...
src/components/goodsItem_6/goodsItem_6.vue
  View file @f8748d1
... ... @@ -10,7 +10,7 @@
10 10 </div>
11 11 <div class="bottom-box">
12 12 <div class="price-box">
13   - <div class="symbol">¥</div>
  13 + <div class="symbol">¥&nbsp;</div>
14 14 <div class="integer">{{getInteger(item.price)}}.</div>
15 15 <div class="decimal">{{getDecimal(item.price)}}</div>
16 16 </div>
... ... @@ -64,7 +64,6 @@
64 64 }
65 65 }
66 66 }
67   -
68 67 },
69 68 methods: {
70 69  
... ...
src/components/goodsItem_7/goodsItem_7.less 0 → 100644
  View file @f8748d1
  1 +@charset "UTF-8";
  2 +
  3 +.goods-item-7-box {
  4 + background-color: transparent;
  5 + width: 100%;
  6 + height: auto;
  7 + .item {
  8 + background-color: #ffffff;
  9 + width: 100%;
  10 + height: auto;
  11 + border-radius: 16px;
  12 + overflow: hidden;
  13 + .img-box {
  14 + display: flex;
  15 + justify-content: center;
  16 + align-items: center;
  17 + width: 100%;
  18 + height: 330px;
  19 + // height: 100%;
  20 + overflow: hidden;
  21 + .img {
  22 + display: block;
  23 + width: 100%;
  24 + height: auto;
  25 + }
  26 + }
  27 + .content-box {
  28 + margin: 0 auto;
  29 + width: 290px;
  30 + .title {
  31 + display: -webkit-box;
  32 + margin-top: 20px;
  33 + color: #333333;
  34 + font-size: 28px;
  35 + font-weight: 400;
  36 + width: 100%;
  37 + height: auto;
  38 + min-height: 76px;
  39 + line-height: 40px;
  40 + -webkit-line-clamp: 2;
  41 + -webkit-box-orient: vertical;
  42 + text-overflow: ellipsis;
  43 + overflow: hidden;
  44 + }
  45 + .coupon-box {
  46 + display: inline;
  47 + margin-top: 8px;
  48 + padding: 1px 6px;
  49 + color: #FC1541;
  50 + font-size: 18px;
  51 + border: 1px solid #FC1541;
  52 + border-radius: 4px;
  53 + }
  54 + .price-box {
  55 + display: flex;
  56 + justify-content: space-between;
  57 + align-items: center;
  58 + margin-top: 10px;
  59 + margin-bottom: 20px;
  60 + .left {
  61 + display: flex;
  62 + justify-content: flex-start;
  63 + align-items: baseline;
  64 + color: #FC1541;
  65 + .y {
  66 + font-size: 20px;
  67 + }
  68 + .integer {
  69 + font-size: 30px;
  70 + }
  71 + .decimal {
  72 + font-size: 30px;
  73 + }
  74 + }
  75 + .right {
  76 + display: flex;
  77 + justify-content: flex-end;
  78 + align-items: baseline;
  79 + .icon-add {
  80 + display: block;
  81 + width: 48px;
  82 + height: 48px;
  83 + }
  84 + }
  85 + }
  86 + }
  87 + }
  88 +}
... ...
src/components/goodsItem_7/goodsItem_7.vue 0 → 100644
  View file @f8748d1
  1 +<template>
  2 + <div class="goods-item-7-box" v-if="item" @click="jump(item)">
  3 + <div class="item">
  4 + <div class="img-box">
  5 + <img v-lazy="item.simg + SIGN.MIDDLE" class="img" />
  6 + </div>
  7 + <div class="content-box">
  8 + <div class="title">{{item.title}}</div>
  9 + <!-- <div class="coupon-box">
  10 + 满180减10
  11 + </div> -->
  12 + <div class="price-box">
  13 + <div class="left">
  14 + <div class="y">¥&nbsp;</div>
  15 + <div class="integer">{{getInteger(item.price)}}.</div>
  16 + <div class="decimal">{{getDecimal(item.price)}}</div>
  17 + </div>
  18 + <div class="right">
  19 + <img src="static/img/icon_add.png" class="icon-add" mode="widthFix" @click.stop.prevent="primary(item)" />
  20 + </div>
  21 + </div>
  22 + </div>
  23 + </div>
  24 + </div>
  25 +</template>
  26 +
  27 +<script>
  28 + export default {
  29 + data: function () {
  30 + return {
  31 +
  32 + }
  33 + },
  34 + props: ["item"],
  35 + computed: {
  36 +
  37 + /**
  38 + * 获取输入数字的整数部分
  39 + */
  40 + getInteger() {
  41 + return (number) => {
  42 + return parseInt(number);
  43 + }
  44 + },
  45 +
  46 + /**
  47 + * 获取输入数字的小数部分
  48 + */
  49 + getDecimal() {
  50 + return (number) => {
  51 +
  52 + // 拆分数字
  53 + let numberArr = number.toString().split(".");
  54 +
  55 + // 判断是否有效数部分
  56 + if (numberArr.length === 2) {
  57 + return numberArr[1];
  58 + } else {
  59 + return "00";
  60 + }
  61 + }
  62 + }
  63 + },
  64 + methods: {
  65 +
  66 + /**
  67 + * 点击跳转
  68 + * @param {object} item [数据对象]
  69 + */
  70 + jump(item) {
  71 + this.$emit("jump", item);
  72 + },
  73 +
  74 + /**
  75 + * 主按钮点击事件
  76 + * @param {object} item [数据对象]
  77 + */
  78 + primary(item) {
  79 + this.$emit("primary", item);
  80 + }
  81 + }
  82 + }
  83 +</script>
  84 +
  85 +<!-- Add "scoped" attribute to limit CSS to this component only -->
  86 +<style rel="stylesheet/less" lang="less" scoped>
  87 + @import './goodsItem_7';
  88 +</style>
... ...
src/components/gotoTop/gotoTop.less 0 → 100644
  View file @f8748d1
  1 +@charset "UTF-8";
  2 +
  3 +.goto-top {
  4 + position: fixed;
  5 + right: 32px;
  6 + bottom: 32px;
  7 + z-index: 100;
  8 + width: 80px;
  9 + height: 80px;
  10 + .goto-top-img {
  11 + display: block;
  12 + width: 80px;
  13 + height: 80px;
  14 + }
  15 +}
0 16 \ No newline at end of file
... ...
src/components/gotoTop/gotoTop.vue 0 → 100644
  View file @f8748d1
  1 +<template>
  2 + <div class="goto-top" @click="gotoTop" v-show="isShow || top == '0'">
  3 + <img src="static/img/icon_goto_top.png" class="goto-top-img" />
  4 + </div>
  5 +</template>
  6 +
  7 +<script>
  8 + export default {
  9 + data() {
  10 + return {
  11 + isShow: false
  12 + };
  13 + },
  14 + props: {
  15 + top: {
  16 + type: Number,
  17 + default: 100
  18 + }
  19 +
  20 + },
  21 + methods: {
  22 +
  23 + /**
  24 + * 切换标签
  25 + */
  26 + gotoTop() {
  27 + document.documentElement.scrollTop = document.body.scrollTop = 0;
  28 + },
  29 +
  30 + scrollEventListener() {
  31 + if ((document.documentElement.scrollTop || document.body.scrollTop) >= this.top) {
  32 + this.$set(this, "isShow", true);
  33 + } else {
  34 + this.$set(this, "isShow", false);
  35 + }
  36 + }
  37 + },
  38 + mounted() {
  39 +
  40 + // 监听滚动条位置
  41 + window.addEventListener("scroll", this.scrollEventListener);
  42 + },
  43 + beforeDestroy() {
  44 +
  45 + // 取消监听滚动条
  46 + window.removeEventListener("scroll", this.scrollEventListener);
  47 + }
  48 + }
  49 +</script>
  50 +
  51 +<!-- Add "scoped" attribute to limit CSS to this component only -->
  52 +<style rel="stylesheet/less" lang='less' scoped>
  53 + @import './gotoTop';
  54 +</style>
... ...
src/components/horizList/horizList.less
  View file @f8748d1
... ... @@ -56,7 +56,7 @@
56 56 .h-box {
57 57 height: 354px;
58 58 .scroll-box {
59   - padding-bottom: 26px;
  59 + padding-bottom: 32px;
60 60 > .box {
61 61 display: block;
62 62 white-space: nowrap;
... ... @@ -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 @f8748d1
... ... @@ -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,12 +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"
51   - :item="item">
52 52  
  53 + <shop-daren-hot v-if="com == '5'" @userJump="userJump" @fansShop="fansShop"
  54 + :item="item">
53 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>
54 62 </div>
55 63 </div>
56 64 </div>
... ... @@ -67,6 +75,8 @@
67 75 import goodsItem3 from "@/components/goodsItem_3/goodsItem_3";
68 76 import swiperItem from "@/components/swiperItem/swiperItem";
69 77 import shopDarenHot from "@/components/shopDarenHot/shopDarenHot";
  78 + import titleSubTitleCom from "@/components/titleSubTitleCom/titleSubTitleCom";
  79 +
70 80 export default {
71 81 name: "horizList",
72 82 data() {
... ... @@ -81,7 +91,8 @@
81 91 goodsItem2,
82 92 goodsItem3,
83 93 swiperItem,
84   - shopDarenHot
  94 + shopDarenHot,
  95 + titleSubTitleCom
85 96 },
86 97 methods: {
87 98  
... ... @@ -123,6 +134,14 @@
123 134 },
124 135  
125 136 /**
  137 + * changeTab切换事件
  138 + * @param {Object} item [tab对象]
  139 + */
  140 + changeTab(item) {
  141 + this.$emit("changeTab", item);
  142 + },
  143 +
  144 + /**
126 145 * 设置横向滚动
127 146 * @param {object} wrapper [需要设置滚动的对象]
128 147 */
... ...
src/components/titleSubTitleCom/titleSubTitleCom.less 0 → 100644
  View file @f8748d1
  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: 206px;
  9 + height: auto;
  10 + .title-box {
  11 + width: 205px;
  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 + min-height: 32px;
  31 + white-space: nowrap;
  32 + text-overflow: ellipsis;
  33 + overflow: hidden;
  34 + }
  35 + &.active {
  36 + .title {
  37 + color: #FF725C;
  38 + }
  39 + .sub-title {
  40 + color: #FF725C;
  41 + }
  42 + }
  43 + }
  44 + .line {
  45 + background-color: #D6D6D6;
  46 + width: 1px;
  47 + height: 48px;
  48 + }
  49 +}
0 50 \ No newline at end of file
... ...
src/components/titleSubTitleCom/titleSubTitleCom.vue 0 → 100644
  View file @f8748d1
  1 +<template>
  2 + <div class="title-sub-title-com" ref="tabs" v-if="item && item.id && item.title" @click="changeTab(item)">
  3 + <div class="title-box" :class="{'active': item.id === activeId}">
  4 + <div class="title">
  5 + {{item.title}}
  6 + </div>
  7 + <div class="sub-title">
  8 + &nbsp;{{item.titles}}&nbsp;
  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 + activeId: 0 // 活动项目id
  20 + };
  21 + },
  22 + props: ["item", "line"],
  23 + methods: {
  24 +
  25 + /**
  26 + * 获取当前选中项目id
  27 + * @returns
  28 + */
  29 + getActiveId() {
  30 + return this.activeId;
  31 + },
  32 +
  33 + /**
  34 + * 设置活动项目id
  35 + * @param {Int} activeId [选中项目id]
  36 + */
  37 + setActiveId(activeId) {
  38 + this.activeId = activeId;
  39 + },
  40 +
  41 + /**
  42 + * 切换标签
  43 + * @param {object} item [对象]
  44 + */
  45 + changeTab(item) {
  46 + this.$emit("changeTab", item);
  47 + }
  48 + }
  49 + }
  50 +</script>
  51 +
  52 +<!-- Add "scoped" attribute to limit CSS to this component only -->
  53 +<style rel="stylesheet/less" lang='less' scoped>
  54 + @import './titleSubTitleCom';
  55 +</style>
... ...
src/pages/newDaren/newDaren.vue
  View file @f8748d1
... ... @@ -239,7 +239,7 @@
239 239 }
240 240 }
241 241 }
242   - console.log(this.fansDaren)
  242 +
243 243 /* 获取优选库精选活动数据 结束 */
244 244  
245 245 } else if (res.code == 400) {
... ... @@ -366,10 +366,7 @@
366 366 shop_type: ""
367 367 });
368 368  
369   -
370   - console.log("jump", item);
371   -
372   -
  369 + // 调用通用跳转
373 370 this.$parent.gotoDetail(item);
374 371 }
375 372 },
... ... @@ -380,6 +377,7 @@
380 377 * type等于2属于达人跳转传uid,type=1传id
381 378 */
382 379 userJump(item) {
  380 +
383 381 // 判断并调用通用跳转
384 382 if (typeof this.$parent.gotoDetail === "function") {
385 383  
... ... @@ -392,12 +390,7 @@
392 390 shop_type: ""
393 391 });
394 392  
395   -
396   - console.log("userJump", item);
397   -
398   -
399   -
400   -
  393 + // 调用通用跳转
401 394 this.$parent.gotoDetail(item);
402 395 }
403 396 },
... ... @@ -418,11 +411,7 @@
418 411 shop_type: "1"
419 412 });
420 413  
421   -
422   - console.log("goodsJump", item);
423   -
424   -
425   -
  414 + // 调用通用跳转
426 415 this.$parent.gotoDetail(item);
427 416 }
428 417 },
... ... @@ -443,11 +432,7 @@
443 432 shop_type: "1"
444 433 });
445 434  
446   -
447   - console.log("goodsPrimary", item);
448   -
449   -
450   -
  435 + // 调用通用跳转
451 436 this.$parent.gotoDetail(item);
452 437 }
453 438 }
... ...
src/pages/optimization/optimization.less
  View file @f8748d1
... ... @@ -11,7 +11,7 @@
11 11 }
12 12 .goods-list-box {
13 13 background: linear-gradient(180deg, rgba(255, 255, 255, 1) 0%, rgba(249, 249, 249, 1) 10%, rgba(249, 249, 249, 1) 100%);
14   - padding: 30px 0 50px 0;
  14 + padding: 30px 0 0 0;
15 15 .components-box {
16 16 margin-bottom: 50px;
17 17 &:last-child {
... ...
src/pages/optimization/optimization.vue
  View file @f8748d1
... ... @@ -4,23 +4,61 @@
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   - <text-title-box @more="h5More"
10   - :titles="{
11   - title: '已关注达人',
12   - more: true
13   - }">
14   - </text-title-box>
15   -
16   - <!-- 已关注达人列表（4条） -->
17   - <div>
18   - <!-- 达人列表组件 -->
19   - <dresserList @toDetail="toDetail"
20   - :dresserList="dresserList">
21   - </dresserList>
22   - </div>
  9 +
  10 + <!-- 标题 -->
  11 + <text-title-box @more="h5More"
  12 + :titles="{
  13 + title: '已关注达人',
  14 + more: true
  15 + }">
  16 + </text-title-box>
  17 +
  18 + <!-- 已关注达人列表（4条） -->
  19 + <div>
  20 + <!-- 达人列表组件 -->
  21 + <dresserList @toDetail="toDetail"
  22 + :dresserList="dresserList">
  23 + </dresserList>
  24 + </div>
23 25 </div>
  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 +
  47 + <!-- 最新动态 -->
  48 + <!-- <daren-list-box class="daren-list" @userJump="userJump" @jump="jump" @goodsJump="goodsJump" @goodsPrimary="goodsPrimary"
  49 + :lists="{}"> -->
  50 +
  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 + <!-- 暂时不修改 结束 -->
  61 +
24 62 <!-- 商品部分 -->
25 63 <div class="goods-list-box">
26 64  
... ... @@ -46,20 +84,6 @@
46 84 </text-title-box>
47 85 </horiz-list-flex>
48 86  
49   - <!-- 商品样式 3 滑动 -->
50   - <horiz-list class="components-box" v-if="newGoods && newGoods.length" @jump="jump" @primary="primary"
51   - :lists="newGoods"
52   - com="3">
53   -
54   - <!-- 标题 -->
55   - <text-title-box slot="title-box" @more="more"
56   - :titles="{
57   - title: '最新上架',
58   - more: newGoodsMore
59   - }">
60   - </text-title-box>
61   - </horiz-list>
62   -
63 87 <!-- 商品样式 2 滑动 -->
64 88 <horiz-list class="components-box" v-if="newBuyGoods && newBuyGoods.length" @jump="jump"
65 89 :lists="newBuyGoods"
... ... @@ -86,8 +110,44 @@
86 110 }">
87 111 </text-title-box>
88 112 </horiz-list>
  113 +
  114 + <!-- 最新上架组 -->
  115 + <div class="components-box" v-if="(newGoodsTabs && newGoodsTabs.list && newGoodsTabs.list.length) || (newGoods && newGoods.list && newGoods.list.length)">
  116 +
  117 + <!-- tabs横向滚动 -->
  118 + <horiz-list ref="tabsHoriz" 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 + <!-- 上拉加载 infinite-scroll-immediate-check="true"可避免上拉多次调用接口问题 -->
  135 + <div class="column-list-container" :infinite-scroll-immediate-check="true" v-infinite-scroll="loadMore" :infinite-scroll-disabled="paging.loading" :infinite-scroll-distance="paging.distance">
  136 +
  137 + <!-- 商品样式 7 列表 -->
  138 + <column-list-box class="column-list-box" v-if="newGoods && newGoods.list && newGoods.list.length" @jump="jump" @primary="primary"
  139 + :lists="newGoods"
  140 + com="7">
  141 + </column-list-box>
  142 + </div>
  143 + </div>
89 144 </div>
90 145 <!-- </van-pull-refresh> -->
  146 +
  147 + <!-- 回到顶部按钮 -->
  148 + <goto-top
  149 + :top="parseInt(150)">
  150 + </goto-top>
91 151 </div>
92 152 </template>
93 153  
... ... @@ -95,31 +155,52 @@
95 155  
96 156 // 引入组件
97 157 import { Toast, Indicator } from "mint-ui";
  158 + import { Tab, Tabs } from 'vant';
98 159 import dresserList from "@/components/dresserList/dresserList";
  160 + import darenListBox from "@/components/darenListBox/darenListBox";
99 161 import horizList from "@/components/horizList/horizList";
100 162 import horizListFlex from "@/components/horizListFlex/horizListFlex";
101 163 import textTitleBox from "@/components/textTitleBox/textTitleBox";
  164 + import columnListBox from "@/components/columnListBox/columnListBox";
  165 + import gotoTop from "@/components/gotoTop/gotoTop";
102 166  
103 167 export default {
104 168 name: 'optimization',
105 169 data () {
106 170 return {
107 171 title: "",
108   - isLoading: false, // 下拉刷新控制
109   - dresserList: null, // 达人列表
110   - hotGoods: null, // 热销商品
111   - hotGoodsMore: null, // 热销商品更多
112   - newGoods: null, // 最新上架
113   - newGoodsMore: null, // 最新上架更多
114   - newBuyGoods: null, // 最新购买
115   - recommendGoods: null // 猜你喜欢
  172 + isLoading: false, // 下拉刷新控制
  173 + paging: { // 分页、上拉加载
  174 + activeId: 0,
  175 + loading: true,
  176 + page: 0,
  177 + distance: 50
  178 + },
  179 + CALL_STATUS: {
  180 + INIT: "init", // 初始化页面
  181 + REFRESH: "refresh", // 刷新页面
  182 + LOAD_MORE: "loadMore" // 加载更多
  183 + },
  184 + dresserList: null, // 达人列表
  185 + darenLists: null, // 达人动态列表
  186 + darenListsMore: null, // 达人动态列表更多
  187 + hotGoods: null, // 热销商品
  188 + hotGoodsMore: null, // 热销商品更多
  189 + newGoodsMore: null, // 最新上架更多
  190 + newBuyGoods: null, // 最新购买
  191 + recommendGoods: null, // 猜你喜欢
  192 + newGoodsTabs: null, // 最新上架tabs对象
  193 + newGoods: null // 最新上架
116 194 }
117 195 },
118 196 components: {
119 197 dresserList,
  198 + darenListBox,
120 199 horizList,
121 200 horizListFlex,
122   - textTitleBox
  201 + textTitleBox,
  202 + columnListBox,
  203 + gotoTop
123 204 },
124 205 created() {
125 206  
... ... @@ -131,6 +212,22 @@
131 212 },
132 213 methods: {
133 214  
  215 + /**
  216 + * 上拉加载
  217 + */
  218 + loadMore() {
  219 +
  220 + // 判断是否可执行上拉加载
  221 + if (this.paging.activeId && this.paging.page) {
  222 +
  223 + // 增加页码
  224 + this.$set(this.paging, "page", ++this.paging.page);
  225 +
  226 + // 商品列表(追加)
  227 + this.shopGoodsList(this.paging.activeId, this.paging.page, this.CALL_STATUS.LOAD_MORE);
  228 + }
  229 + },
  230 +
134 231 // 下拉刷新
135 232 // onRefresh() {
136 233  
... ... @@ -183,6 +280,24 @@
183 280  
184 281 /* 获取优选库“优选”数据 开始 */
185 282  
  283 + // 获取最新上架分类列表
  284 + if (datas.hotGroup && datas.hotGroup.length) {
  285 + this.$set(this, "newGoodsTabs", {
  286 + list: datas.hotGroup
  287 + });
  288 +
  289 + // 调用获取商品列表接口，获取第一个分类的列表
  290 + if (datas.hotGroup[0]) {
  291 +
  292 + // 下一周期执行
  293 + this.$nextTick(() => {
  294 +
  295 + // 切换分类
  296 + this.changeTab(datas.hotGroup[0]);
  297 + });
  298 + }
  299 + }
  300 +
186 301 // 获取“达人列表数据”
187 302 if (datas.list && datas.list.length) {
188 303 // 设置“达人列表数据”数据
... ... @@ -203,19 +318,21 @@
203 318 }
204 319 }
205 320  
206   - // 获取“最新上架”
207   - if (datas.newGoods && datas.newGoods.length) {
  321 + // // 获取“最新上架”
  322 + // if (datas.newGoods && datas.newGoods.length) {
208 323  
209   - // 设置“最新上架”数据
210   - this.$set(this, "newGoods", datas.newGoods);
  324 + // // 设置“最新上架”数据
  325 + // this.$set(this, "newGoods", {
  326 + // list: datas.newGoods
  327 + // });
211 328  
212   - // 判断“最新上架”更多
213   - if (datas.newGoodsMore) {
  329 + // // 判断“最新上架”更多
  330 + // if (datas.newGoodsMore) {
214 331  
215   - // 设置“最新上架”更多
216   - this.$set(this, "newGoodsMore", datas.newGoodsMore);
217   - }
218   - }
  332 + // // 设置“最新上架”更多
  333 + // this.$set(this, "newGoodsMore", datas.newGoodsMore);
  334 + // }
  335 + // }
219 336  
220 337 // 获取“最近购买”
221 338 if (datas.newBuyGoods && datas.newBuyGoods.length) {
... ... @@ -245,6 +362,99 @@
245 362 },
246 363  
247 364 /**
  365 + * 商品列表
  366 + * @param {Int} groupId [平台分类id]
  367 + * @param {Int} page [页码]
  368 + * @param {String} CALL_STATUS [何处触发请求]
  369 + */
  370 + shopGoodsList(groupId, page, CALL_STATUS = this.CALL_STATUS.INIT) {
  371 +
  372 + // 校验必填参数
  373 + if (groupId && page) {
  374 +
  375 + // 加载中
  376 + this.$set(this.paging, "loading", true);
  377 +
  378 + // 获取证书请求接口
  379 + this.http("/Api/" + this.getApiVersion().index + "/shopGoodsList", {
  380 + groupid: groupId,
  381 + page: page,
  382 + order: 5,
  383 + ord: "desc"
  384 + }, this.shopGoodsListCallback, {
  385 + method: "POST",
  386 + CALL_STATUS
  387 + }
  388 + );
  389 + }
  390 + },
  391 +
  392 + /**
  393 + * 商品列表回调
  394 + * @param {object} res [服务器返回数据]
  395 + * @param {object} ext [扩展参数]
  396 + */
  397 + shopGoodsListCallback(res, ext) {
  398 +
  399 + // 下拉刷新结束
  400 + this.$set(this, "isLoading", false);
  401 +
  402 + // 返回处理
  403 + if (res.code == 200) {
  404 +
  405 + // 解构数据
  406 + let { data: datas } = res;
  407 +
  408 + /* 获取商品列表数据 开始 */
  409 +
  410 + // 判断是否有数据
  411 + if (datas) { // datas肯定为数组，但是可能为空，会影响数据更新，所以不判断数组长度
  412 +
  413 + // 根据操作，设置列表
  414 + switch (ext.CALL_STATUS) {
  415 + case this.CALL_STATUS.INIT:
  416 +
  417 + // 设置“最新上架”数据
  418 + this.$set(this, "newGoods", {
  419 + list: datas
  420 + });
  421 + break;
  422 + case this.CALL_STATUS.REFRESH:
  423 +
  424 + // 设置“最新上架”数据
  425 + this.$set(this, "newGoods", {
  426 + list: datas
  427 + });
  428 + break;
  429 + case this.CALL_STATUS.LOAD_MORE:
  430 +
  431 + // 设置“最新上架”数据(追加)
  432 + this.$set(this.newGoods, "list", [...this.newGoods.list, ...datas]);
  433 + break;
  434 + }
  435 +
  436 + // 设置还有需要加载的内容
  437 + this.$set(this.paging, "loading", false);
  438 + } else {
  439 +
  440 + // 没有需要加载的内容，停止上拉加载
  441 + this.$set(this.paging, "loading", true);
  442 + }
  443 +
  444 + /* 获取商品列表数据 结束 */
  445 +
  446 + } else if (res.code == 400) {
  447 +
  448 + // 获取最新上架列表失败
  449 + Toast(res.message);
  450 + } else {
  451 +
  452 + // 获取最新上架列表失败
  453 + Toast("获取最新上架列表失败");
  454 + }
  455 + },
  456 +
  457 + /**
248 458 * 跳转到关注人列表数据
249 459 */
250 460 h5More() {
... ... @@ -259,11 +469,78 @@
259 469 shop_type: ""
260 470 }
261 471  
  472 + // 调用通用跳转
262 473 this.$parent.gotoDetail(options);
263 474 }
264 475 },
265 476  
266 477 /**
  478 + * 用户头像/昵称，点击跳转
  479 + * @param {object} item [数据对象]
  480 + * type等于2属于达人跳转传uid,type=1传id
  481 + */
  482 + userJump(item) {
  483 +
  484 + // 判断并调用通用跳转
  485 + if (typeof this.$parent.gotoDetail === "function") {
  486 +
  487 + // 临时，设置跳转达人个人主页用户数据
  488 + Object.assign(item, {
  489 + type: "5",
  490 + to: (this.mode == "prod") ?
  491 + "https://managemall.cnlive.com/html/preferred-library/1/#/pages/darenProfile/darenProfile?from=redirect" + "&id=" + (item.type==2?item.uid:item.id) + "&uid=" + this.getStore("uid") :
  492 + "https://wjjshop.cnlive.com/html/preferred-library/1/#/pages/darenProfile/darenProfile?from=redirect"+ "&id=" + (item.type==2?item.uid:item.id) + "&uid=" + this.getStore("uid"),
  493 + shop_type: ""
  494 + });
  495 +
  496 + // 调用通用跳转
  497 + this.$parent.gotoDetail(item);
  498 + }
  499 + },
  500 +
  501 + /**
  502 + * 点击跳转商品
  503 + * @param {object} item [数据对象]
  504 + */
  505 + goodsJump(item) {
  506 +
  507 + // 判断并调用通用跳转
  508 + if (typeof this.$parent.gotoDetail === "function") {
  509 +
  510 + // 临时，设置跳转商品详情参数
  511 + Object.assign(item, {
  512 + type: "2",
  513 + to: item.id,
  514 + shop_type: "1"
  515 + });
  516 +
  517 + // 调用通用跳转
  518 + this.$parent.gotoDetail(item);
  519 + }
  520 + },
  521 +
  522 + /**
  523 + * 点击跳转商品购买
  524 + * @param {object} item [数据对象]
  525 + */
  526 + goodsPrimary(item) {
  527 +
  528 + // 判断并调用通用跳转
  529 + if (typeof this.$parent.gotoDetail === "function") {
  530 +
  531 + // 临时，设置跳转商品详情参数
  532 + Object.assign(item, {
  533 + type: "2",
  534 + to: item.id,
  535 + shop_type: "1"
  536 + });
  537 +
  538 + // 调用通用跳转
  539 + this.$parent.gotoDetail(item);
  540 + }
  541 + },
  542 +
  543 + /**
267 544 * 跳转
268 545 * @param {object} item [数据对象]
269 546 */
... ... @@ -326,6 +603,42 @@
326 603 // 调用通用跳转
327 604 this.$parent.gotoDetail(item);
328 605 }
  606 + },
  607 +
  608 + /**
  609 + * 切换标签
  610 + * @param {object} item [对象]
  611 + */
  612 + changeTab(item) {
  613 +
  614 + // 判断是否有滚动分类
  615 + if (this.$refs.tabsHoriz) {
  616 +
  617 + // 设置children数组
  618 + let children = this.$refs.tabsHoriz.$children;
  619 +
  620 + // 循环处理
  621 + for (let i = 0; i < children.length; i++) {
  622 +
  623 + // 设置当前活动分类id
  624 + if (children[i].$refs.tabs && typeof children[i].setActiveId === "function") {
  625 + children[i].setActiveId(item.id);
  626 + }
  627 + }
  628 +
  629 + }
  630 +
  631 + // 设置当前活动分类id
  632 + this.$set(this.paging, "activeId", item.id);
  633 +
  634 + // 上拉加载控制参数初始化
  635 + this.$set(this.paging, "loading", true);
  636 +
  637 + // 初始化页码
  638 + this.$set(this.paging, "page", 1);
  639 +
  640 + // 获取数据
  641 + this.shopGoodsList(item.id, this.paging.page, this.CALL_STATUS.INIT);
329 642 }
330 643 },
331 644 head: {
... ...
static/img/icon_goto_top.png 0 → 100644
View file @f8748d1

3.76 KB