w-front-end / select_good · Commits

Commit 77790617c4d9b77d76694f20322287f4833d371b

Authored by 王强
1 parent 8da13bdd

购好物，运营需求修改中~

Inline Side-by-side
Showing 28 changed files with 1538 additions and 544 deletions
src/components/backSearchBox/backSearchBox.less 0 → 100644
  View file @7779061
  1 +@charset "UTF-8";
  2 +
  3 +.back-search-box {
  4 + background-color: transparent;
  5 + width: 100%;
  6 + height: 93px;
  7 + .box {
  8 + position: relative;
  9 + display: flex;
  10 + justify-content: space-between;
  11 + align-items: center;
  12 + width: auto;
  13 + height: 100%;
  14 + padding: 0 30px;
  15 + .buttons-box {
  16 + display: flex;
  17 + justify-content: space-between;
  18 + align-items: center;
  19 + // width: 100%;
  20 + height: 100%;
  21 + .back {
  22 + display: block;
  23 + width: 38px;
  24 + height: 38px;
  25 + }
  26 + }
  27 + .search-container {
  28 + background-color: #F6F6F6;
  29 + border-radius: 28.5px;
  30 + width: 642px;
  31 + height: 58px;
  32 + .search-box {
  33 + display: flex;
  34 + justify-content: flex-start;
  35 + align-items: center;
  36 + margin: 0 auto;
  37 + width: 602px;
  38 + height: 100%;
  39 + .icon-box {
  40 + width: 32px;
  41 + height: 32px;
  42 + .icon-search {
  43 + display: block;
  44 + width: 32px;
  45 + height: 32px;
  46 + }
  47 + }
  48 + .line {
  49 + background-color: #999999;
  50 + margin: 0 20px;
  51 + width: 1px;
  52 + height: 22px;
  53 + }
  54 + .text {
  55 + color: #B4B4B4;
  56 + font-size: 26px;
  57 + font-weight: 400;
  58 + }
  59 + }
  60 + }
  61 + }
  62 +}
... ...
src/components/backSearchBox/backSearchBox.vue 0 → 100644
  View file @7779061
  1 +<template>
  2 + <div class="back-search-box" v-if="backs">
  3 + <div class="box">
  4 + <div class="buttons-box" v-if="backs && backs.funcs && backs.funcs.back && backs.funcs.back.icon">
  5 + <img :src="backs.funcs.back.icon" class="back" @click="back" />
  6 + </div>
  7 + <div class="search-container" @click="toSearch">
  8 + <div class="search-box">
  9 + <div class="icon-box">
  10 + <img src="static/img/icon_search.png" class="icon-search" />
  11 + </div>
  12 + <div class="line"></div>
  13 + <div class="text" v-if="backs.funcs.search && backs.funcs.search.text">{{backs.funcs.search.text}}</div>
  14 + </div>
  15 + </div>
  16 + </div>
  17 + </div>
  18 +</template>
  19 +
  20 +<script>
  21 + export default {
  22 + name: 'backSearchBox',
  23 + data: function () {
  24 + return {
  25 +
  26 + }
  27 + },
  28 + props: ["backs"],
  29 + methods: {
  30 +
  31 + /**
  32 + * 返回
  33 + */
  34 + back() {
  35 + this.$emit('back');
  36 + },
  37 +
  38 + /**
  39 + * 搜索框跳转
  40 + */
  41 + toSearch() {
  42 + this.$emit('toSearch');
  43 + }
  44 + }
  45 + }
  46 +</script>
  47 +
  48 +<!-- Add "scoped" attribute to limit CSS to this component only -->
  49 +<style rel="stylesheet/less" lang="less">
  50 + @import './backSearchBox';
  51 +</style>
0 52 \ No newline at end of file
... ...
src/components/countDownCom/countDownCom.less
  View file @7779061
... ... @@ -20,6 +20,9 @@
20 20 color: #333333;
21 21 font-size: 20px;
22 22 border-radius: 4px;
  23 + &.big-block {
  24 + width: 60px;
  25 + }
23 26 &.transparent {
24 27 background-color: transparent;
25 28 }
... ... @@ -38,6 +41,9 @@
38 41 height: 36px;
39 42 color: #FFFFFF;
40 43 font-size: 25px;
  44 + &.big-block {
  45 + width: 60px;
  46 + }
41 47 &.transparent {
42 48 background-color: transparent;
43 49 color: #333333;
... ... @@ -58,6 +64,9 @@
58 64 color: #FFFFFF;
59 65 font-size: 20px;
60 66 font-weight: 400;
  67 + &.big-block {
  68 + width: 60px;
  69 + }
61 70 }
62 71 .colon {
63 72 color: rgba(189, 164, 127, 1);
... ... @@ -75,6 +84,9 @@
75 84 color: #FCF7F1;
76 85 font-size: 20px;
77 86 font-weight: 400;
  87 + &.big-block {
  88 + width: 60px;
  89 + }
78 90 }
79 91 .colon {
80 92 color: #3C3C3C;
... ... @@ -92,6 +104,9 @@
92 104 color: #FFFFFF;
93 105 font-size: 20px;
94 106 font-weight: 400;
  107 + &.big-block {
  108 + width: 60px;
  109 + }
95 110 }
96 111 .colon {
97 112 color: #633531;
... ...
src/components/countDownCom/countDownCom.vue
  View file @7779061
... ... @@ -2,12 +2,13 @@
2 2 <div class="count-down-com" v-if="time">
3 3 <van-count-down class="count-down" :class="'style-' + sty" :time="time" @finish="finish">
4 4 <template v-slot="timeData">
5   - <div class="container" v-if="timeData.days > 0">
  5 + <div class="container" v-if="timeData.days > 0 && type != 'h'">
6 6 <span class="block transparent">{{ timeData.days }}</span>
7 7 <span class="colon">天</span>
8 8 </div>
9 9 <div class="container">
10   - <span class="block">{{ timeData.hours }}</span>
  10 + <span class="block" :class="{'big-block': ((timeData.days * 24) + timeData.hours) >= 100}" v-if="type == 'h'">{{ (timeData.days * 24) + timeData.hours }}</span>
  11 + <span class="block" v-else>{{ timeData.hours }}</span>
11 12 <span class="colon" v-if="sty == '2' || sty == '5'">时</span>
12 13 <span class="colon" v-else>:</span>
13 14 <span class="block">{{ timeData.minutes }}</span>
... ... @@ -36,7 +37,7 @@
36 37  
37 38 }
38 39 },
39   - props: ["time", "sty"],
  40 + props: ["time", "sty", 'type'],
40 41 methods: {
41 42  
42 43 /**
... ...
src/components/darenListBox/darenListBox.vue
  View file @7779061
... ... @@ -8,7 +8,7 @@
8 8  
9 9 <!-- 循环输出达人动态列表 -->
10 10 <div class="item-box" :class="{borderBottom:lists.length>1}" v-for="(item, index) in lists" :key="index">
11   - <daren-list-com @userJump="userJump" @jump="jump" @goodsJump="goodsJump" @goodsPrimary="goodsPrimary"
  11 + <daren-list-com @userJump="userJump" @jump="jump" @goodsJump="goodsJump" @goodsPrimary="goodsPrimary" @fansShop="fansShop" @toDarenShop="toDarenShop"
12 12 :item="item">
13 13 </daren-list-com>
14 14 </div>
... ... @@ -64,7 +64,21 @@
64 64 */
65 65 goodsPrimary(item) {
66 66 this.$emit("goodsPrimary", item);
67   - }
  67 + },
  68 +
  69 + /**
  70 + * 关注达人
  71 + */
  72 + fansShop(item) {
  73 + this.$emit('fansShop', item);
  74 + },
  75 +
  76 + /**
  77 + * 跳转达人店铺页面
  78 + */
  79 + toDarenShop(item) {
  80 + this.$emit('toDarenShop', item);
  81 + }
68 82 }
69 83 }
70 84 </script>
... ...
src/components/darenListCom/darenListCom.less
  View file @7779061
... ... @@ -12,9 +12,33 @@
12 12  
13 13 }
14 14 .top-right {
15   - color: #666666;
16   - font-size: 26px;
17   - font-weight: 400;
  15 + display: flex;
  16 + justify-content: flex-end;
  17 + align-items: center;
  18 + .day, .date {
  19 + color: #666666;
  20 + font-size: 26px;
  21 + font-weight: 400;
  22 + & + .daren-shop-btn, & + .fans-btn {
  23 + margin-left: 30px;
  24 + }
  25 + }
  26 + .daren-shop-btn {
  27 + padding: 6px 34px;
  28 + color: #FC1541;
  29 + font-size: 26px;
  30 + font-weight: 400;
  31 + border: 1px solid #FC1541;
  32 + border-radius: 26px;
  33 + }
  34 + .fans-btn {
  35 + padding: 6px 34px;
  36 + color: #FC1541;
  37 + font-size: 26px;
  38 + font-weight: 400;
  39 + border: 1px solid #FC1541;
  40 + border-radius: 26px;
  41 + }
18 42 }
19 43 }
20 44 .intro-box {
... ...
src/components/darenListCom/darenListCom.vue
  View file @7779061
... ... @@ -16,6 +16,12 @@
16 16 {{getDatetime(item.addtime, item.time).day}}
17 17 </div>
18 18 <div class="date">{{getDatetime(item.addtime, item.time).date}}</div>
  19 + <div class="daren-shop-btn" v-if="item.shop_user.is_fans == '1'" @click.stop.prevent="toDarenShop(item)">
  20 + 进店
  21 + </div>
  22 + <div class="fans-btn" v-else @click.stop.prevent="fansShop(item)">
  23 + 关注
  24 + </div>
19 25 </div>
20 26 </div>
21 27  
... ... @@ -30,7 +36,7 @@
30 36 <!-- 达人图片展示（单独组建处理，宫格形式） -->
31 37 <palace-grid
32 38 :grids="{
33   - list:imgArr
  39 + list:imgArr
34 40 }">
35 41 </palace-grid>
36 42 </div>
... ... @@ -53,6 +59,7 @@
53 59  
54 60 <!-- 商品标签组建 -->
55 61 <div class="goods">
  62 +
56 63 <!-- goodsItem_4 -->
57 64 <goods-item-4 @jump="goodsJump" @primary="goodsPrimary"
58 65 :item="item.goods">
... ... @@ -251,6 +258,21 @@
251 258 goodsPrimary(item) {
252 259 this.$emit("goodsPrimary", item);
253 260 },
  261 +
  262 + /**
  263 + * 关注达人
  264 + */
  265 + fansShop(item) {
  266 + this.$emit('fansShop', item);
  267 + },
  268 +
  269 + /**
  270 + * 跳转达人店铺页面
  271 + */
  272 + toDarenShop(item) {
  273 + this.$set(item, "type", "2");
  274 + this.$emit('toDarenShop', item);
  275 + }
254 276 }
255 277 }
256 278 </script>
... ...
src/components/dresserList/dresserList.less
  View file @7779061
... ... @@ -29,10 +29,9 @@
29 29 }
30 30 .desc{
31 31 max-height:63px;
32   - font-size:24px;
33   - font-weight:400;
34   - color:rgba(102,102,102,1);
35   - line-height:33px;
  32 + color: #333333;
  33 + font-size: 28px;
  34 + font-weight: bold;
36 35 margin-top: 10px;
37 36 display: -webkit-box;
38 37 -webkit-line-clamp: 2;
... ...
src/components/dresserList/dresserList.vue
  View file @7779061
1 1 <template>
2 2 <div v-if="dresserList && dresserList.length">
3 3 <div class="item_box" v-for="(item,index) in dresserList" :key="index" @click="toDetail(item)">
4   - <img class="head_portrait" v-lazy="item.user_img || item.logo" />
  4 + <img v-lazy="item.user_img || item.logo" class="head_portrait" />
5 5 <div class="user_info">
6   - <div class="name">
  6 + <!-- <div class="name">
7 7 {{item.title}}
8   - </div>
  8 + </div> -->
9 9 <div class="desc">
10   - {{item.user_title || item.titles}}
  10 + {{item.user_title || item.titles || item.title}}
11 11 </div>
12 12 </div>
13 13 <div v-if="item.is_fans">
... ...
src/components/goodsItem_10/goodsItem_10.less 0 → 100644
  View file @7779061
  1 +@charset "UTF-8";
  2 +
  3 +.goods-item-10-box {
  4 + background-color: #ffffff;
  5 + padding: 20px 0;
  6 + width: 173px;
  7 + height: auto;
  8 + border-radius: 8px;
  9 + .top-box {
  10 + position: relative;
  11 + .img-box {
  12 + display: flex;
  13 + justify-content: center;
  14 + align-items: center;
  15 + background-color: #F9F9F9;
  16 + margin: 0 auto;
  17 + width: 143px;
  18 + height: 143px;
  19 + border-radius: 8px;
  20 + overflow: hidden;
  21 + .simg {
  22 + display: block;
  23 + width: 143px;
  24 + height: 143px;
  25 + }
  26 + }
  27 + }
  28 + .content-box {
  29 + margin: 0 auto;
  30 + width: 143px;
  31 + .price-box {
  32 + display: flex;
  33 + justify-content: center;
  34 + align-items: baseline;
  35 + margin-top: 20px;
  36 + .symbol {
  37 + color: #FC1541;
  38 + font-size: 24px;
  39 + }
  40 + .price {
  41 + color: #FC1541;
  42 + font-size: 24px;
  43 + white-space: nowrap;
  44 + text-overflow: ellipsis;
  45 + overflow: hidden;
  46 + & + .prices {
  47 + margin-left: 8px;
  48 + }
  49 + }
  50 + .prices {
  51 + color: #BEBEBE;
  52 + font-size: 18px;
  53 + text-decoration: line-through;
  54 + white-space: nowrap;
  55 + text-overflow: ellipsis;
  56 + overflow: hidden;
  57 + }
  58 + }
  59 + }
  60 +
  61 + &.pid-2 { // 排名样式
  62 + .content-box {
  63 + .price-box {
  64 + justify-content: center;
  65 + .price {
  66 + & + .price-text {
  67 + margin-left: 2px;
  68 + }
  69 + }
  70 + .price-text {
  71 + color: #333333;
  72 + font-size: 20px;
  73 + font-weight: 400;
  74 + }
  75 + }
  76 + }
  77 + }
  78 +}
... ...
src/components/goodsItem_10/goodsItem_10.vue 0 → 100644
  View file @7779061
  1 +<template>
  2 + <div class="goods-item-10-box" :class="'pid-' + pid" v-if="item" @click="jump(item)">
  3 + <div class="top-box">
  4 + <div class="img-box">
  5 + <img v-lazy="item.simg + SIGN.SMALL" class="simg" />
  6 + </div>
  7 + <slot name="flag"></slot>
  8 + </div>
  9 + <div class="content-box">
  10 +
  11 + <div class="price-box" v-if="pid == '1'">
  12 + <div class="symbol">¥</div>
  13 + <div class="price">{{item.price}}</div>
  14 + <!-- <div class="prices" v-if="(pid == '1') && item.prices && parseFloat(item.prices) > 0 && parseFloat(item.prices) > parseFloat(item.price)">¥{{item.prices}}</div> -->
  15 + </div>
  16 +
  17 + <div class="price-box" v-if="pid == '2'">
  18 + <div class="price">{{item.price}}</div>
  19 + <div class="price-text">积分</div>
  20 + </div>
  21 + </div>
  22 + </div>
  23 +</template>
  24 +
  25 +<script>
  26 + export default {
  27 + name: 'goodsItem10',
  28 + data: function () {
  29 + return {
  30 +
  31 + }
  32 + },
  33 + props: ["item", "pid"],
  34 + methods: {
  35 +
  36 + /**
  37 + * 点击跳转
  38 + * @param {object} item [数据对象]
  39 + */
  40 + jump (item) {
  41 + this.$emit("jump", item);
  42 + }
  43 + }
  44 + }
  45 +</script>
  46 +
  47 +<!-- Add "scoped" attribute to limit CSS to this component only -->
  48 +<style rel="stylesheet/less" lang="less" scoped>
  49 + @import './goodsItem_10';
  50 +</style>
... ...
src/components/horizList/horizList.vue
  View file @7779061
... ... @@ -22,6 +22,11 @@
22 22 事件：
23 23 @jump：整个点击跳转事件
24 24 @primary：右下角红色主按钮点击事件，已阻止事件冒泡
  25 +
  26 + com=10：goodsItem_10组件，pid: 1，价格，原价；2、积分信息
  27 + 事件：
  28 + @jump：整个点击跳转事件
  29 +
25 30 com=tab：titleSubTitleCom组件，无pid参数
26 31 事件：
27 32 @changeTab：切换tab事件
... ... @@ -48,6 +53,12 @@
48 53 :item="item">
49 54 </goods-item-3>
50 55  
  56 + <!-- 商品展示样式 10 -->
  57 + <goods-item-10 v-if="com == '10'" @jump="jump"
  58 + :item="item"
  59 + :pid="pid">
  60 + </goods-item-10>
  61 +
51 62 <!--菜单-->
52 63 <swiper-item v-if="com == '4'" @jump="jump"
53 64 :item="item">
... ... @@ -83,6 +94,7 @@
83 94 import goodsItem1 from "@/components/goodsItem_1/goodsItem_1";
84 95 import goodsItem2 from "@/components/goodsItem_2/goodsItem_2";
85 96 import goodsItem3 from "@/components/goodsItem_3/goodsItem_3";
  97 + import goodsItem10 from '@/components/goodsItem_10/goodsItem_10.vue';
86 98 import swiperItem from "@/components/swiperItem/swiperItem";
87 99 import shopDarenHot from "@/components/shopDarenHot/shopDarenHot";
88 100 import titleSubTitleCom from "@/components/titleSubTitleCom/titleSubTitleCom";
... ... @@ -101,6 +113,7 @@
101 113 goodsItem1,
102 114 goodsItem2,
103 115 goodsItem3,
  116 + goodsItem10,
104 117 swiperItem,
105 118 shopDarenHot,
106 119 titleSubTitleCom,
... ...
src/components/swiper/swiper.vue
  View file @7779061
1 1 <template>
2 2 <div class="swiper-box" :class="{'points-mall-swiper':isPointsMall}" v-if="swipers && swipers.length">
3   - <swipe class="swipe" :autoplay="5000" :touchable="swipers.length===1 ? false : true" :show-indicators="options && options.showIndicators !== undefined ? options.showIndicators : showIndicators" @change="onChange">
  3 + <swipe class="swipe" :autoplay="5000" :touchable="swipers.length === 1 ? false : true" :show-indicators="options && options.showIndicators !== undefined ? options.showIndicators : showIndicators" @change="onChange">
4 4 <swipe-item class="swipe-item" v-for="(item, index) in swipers" :key="index">
5 5 <div class="item" @click="$parent.$parent.gotoDetail(item)">
6 6 <div class="img-box">
... ... @@ -8,16 +8,17 @@
8 8 <img v-else v-lazy="item.simg + SIGN.BIG" class="img" mode="widthFix" />
9 9 </div>
10 10 </div>
  11 +
11 12 <!-- 展示播放按钮 -->
12 13 <div @click="playNow(item.to)" v-if="item.type == 22" class="play-button-box">
13 14 <img src="static/img/play_dark.png" class="play-button-img" />
14 15 </div>
15 16 </swipe-item>
16   - <template v-if="isPointsMall" #indicator>
  17 + <template v-if="isPointsMall" #indicator>
17 18 <div class="custom-indicator">
18   - {{ current + 1 }}/{{swipers.length}}
  19 + {{ current + 1 }}/{{swipers.length}}
19 20 </div>
20   - </template>
  21 + </template>
21 22 </swipe>
22 23 </div>
23 24 </template>
... ... @@ -54,7 +55,7 @@ export default {
54 55 * @param {String} videoUrl [数据对象]
55 56 */
56 57 playNow(videoUrl) {
57   - debugger
  58 +
58 59 // 判断App内
59 60 if (this.isCNLive.value) {
60 61  
... ...
src/components/textTitleBox/textTitleBox.less
  View file @7779061
... ... @@ -59,4 +59,30 @@
59 59 }
60 60 }
61 61 }
  62 + &.style-3 {
  63 + .box {
  64 + .title-box {
  65 + display: contents;
  66 + color: #666666;
  67 + font-size: 30px;
  68 + font-weight: 500;
  69 + }
  70 + .more-box {
  71 + background-color: #F7B500;
  72 + padding: 3px 20px;
  73 + border-radius: 26px;
  74 + .more-text {
  75 +
  76 + color: #FFFFFF;
  77 + font-size: 26px;
  78 + font-weight: 500;
  79 + line-height: 37px;
  80 + }
  81 + .icon-img {
  82 + width: 8px;
  83 + height: 12px;
  84 + }
  85 + }
  86 + }
  87 + }
62 88 }
63 89 \ No newline at end of file
... ...
src/pages/fansShopMessageList/fansShopMessageList.vue
  View file @7779061
... ... @@ -9,16 +9,14 @@
9 9 <!-- 下拉刷新 -->
10 10 <!-- <van-pull-refresh v-model="isLoading" pulling-text="下拉刷新..." loosing-text="释放刷新" loading-text="加载中..." success-text="刷新成功" @refresh="onRefresh"> -->
11 11  
12   - <!-- 已关注达人列表 -->
  12 + <!-- 关注达人列表 -->
13 13 <div class="item_box">
14   - <div
15   - v-infinite-scroll="loadMore"
16   - infinite-scroll-disabled="loading"
17   - :infinite-scroll-distance="list.length">
18   - <!-- 达人列表组件 -->
19   - <dresserList @toDetail="toDetail"
20   - :dresserList="list">
21   - </dresserList>
  14 + <div v-infinite-scroll="loadMore" infinite-scroll-disabled="loading" :infinite-scroll-distance="list.length">
  15 +
  16 + <!-- 达人列表组件 -->
  17 + <dresserList @toDetail="toDetail"
  18 + :dresserList="list">
  19 + </dresserList>
22 20 </div>
23 21 </div>
24 22 <!-- </van-pull-refresh> -->
... ... @@ -36,15 +34,8 @@
36 34 data() {
37 35 return {
38 36 title: "",
  37 + backs: null, // nav导航条数据
39 38 isLoading: false, // 下拉刷新控制
40   - backs: { // nav导航条数据
41   - title: "已关注达人",
42   - funcs: {
43   - back: {
44   - icon: "static/img/icon_back.png"
45   - }
46   - }
47   - },
48 39 list: [], // 达人列表
49 40 loading: false // 上拉加载控制
50 41 }
... ... @@ -56,10 +47,23 @@
56 47 created() {
57 48  
58 49 // 设置标题
59   - this.$set(this, "title", "已关注达人");
  50 + this.$set(this, "title", "关注达人列表");
  51 +
  52 + // nav导航条数据
  53 + this.$set(this, 'backs', {
  54 + title: this.title,
  55 + funcs: {
  56 + back: {
  57 + icon: "static/img/icon_back.png"
  58 + }
  59 + }
  60 + });
60 61  
61 62 // 获取关注人列表
62   - this.fansShopMessageList();
  63 + // this.fansShopMessageList();
  64 +
  65 + // 获取关注人列表2
  66 + this.fansShopList();
63 67 },
64 68 methods: {
65 69  
... ... @@ -87,8 +91,8 @@
87 91 // 请求接口
88 92 this.http("/Api/" + this.getApiVersion().dynamic + "/fansShopMessageList", {
89 93 uid: this.getStore("uid")
90   - },this.fansShopMessageListCallback, {
91   - method: "post"
  94 + }, this.fansShopMessageListCallback, {
  95 + method: "POST"
92 96 });
93 97 }
94 98 },
... ... @@ -112,10 +116,62 @@
112 116 // 解构数据
113 117 let {data: datas} = res;
114 118  
115   - /*获取裂变数据*/
  119 + /* 获取列表数据 开始 */
  120 +
  121 + // 设置标题
  122 + this.$set(this, "list", datas.list);
  123 +
  124 + /* 获取列表数据 结束 */
  125 +
  126 + }
  127 + },
  128 +
  129 + /**
  130 + * 已关注达人列表2
  131 + */
  132 + fansShopList () {
  133 +
  134 + // 校验登录
  135 + if (this.$parent.checkLogin()) {
  136 +
  137 + // 加载中提示
  138 + Indicator.open('加载中...');
  139 +
  140 + // 请求接口
  141 + this.http("/Api/" + this.getApiVersion().dynamic + "/fansShopList", {
  142 + uid: this.getStore("uid")
  143 + }, this.fansShopListCallback, {
  144 + method: "POST"
  145 + });
  146 + }
  147 + },
  148 +
  149 + /**
  150 + * 已关注达人列表2回调
  151 + * @param {object} res [服务器返回数据]
  152 + * @param {object} ext [扩展参数]
  153 + */
  154 + fansShopListCallback(res, ext) {
  155 +
  156 + // 加载完成
  157 + Indicator.close();
  158 +
  159 + // 下拉刷新结束
  160 + this.$set(this, "isLoading", false);
  161 +
  162 + // 返回处理
  163 + if (res.code == 200) {
  164 +
  165 + // 解构数据
  166 + let {data: datas} = res;
  167 +
  168 + /* 获取列表数据 开始 */
116 169  
117 170 // 设置标题
118 171 this.$set(this, "list", datas.list);
  172 +
  173 + /* 获取列表数据 结束 */
  174 +
119 175 }
120 176 },
121 177  
... ... @@ -138,8 +194,10 @@
138 194 * @param {object} item [数据对象]
139 195 */
140 196 toDetail(item) {
  197 +
141 198 // 判断并调用通用跳转
142 199 if (typeof this.$parent.gotoDetail === "function") {
  200 +
143 201 // 设置跳转达人个人主页用户数据
144 202 Object.assign(item, {
145 203 type: "5",
... ...
src/pages/mall/mall.vue
  View file @7779061
1 1 <template>
2 2 <div class="mall-box">
  3 +
3 4 <!-- 下拉刷新 -->
4 5 <!-- <van-pull-refresh v-model="isLoading" pulling-text="下拉刷新..." loosing-text="释放刷新" loading-text="加载中..." success-text="刷新成功" @refresh="onRefresh"> -->
5 6 <!-- nav -->
  7 +
6 8 <!-- H5唤起App组件 -->
7   - <call-app-box
8   - class="call-app-box"
9   - :style="'padding-top: ' + $parent.top.value + 'px'"
10   - ref="callApp"
11   - v-if="!isCNLive.value"
12   - :callApps="$parent.callApps"
13   - >
  9 + <call-app-box class="call-app-box" :style="'padding-top: ' + $parent.top.value + 'px'" ref="callApp" v-if="!isCNLive.value"
  10 + :callApps="$parent.callApps">
14 11 </call-app-box>
15   - <back-box
16   - v-if="$parent.isBack && isCNLive.value"
17   - class="back-box"
18   - :style="'padding-top: ' + $parent.top.value + 'px'"
19   - @back="back"
20   - :backs="backs"
21   - >
  12 +
  13 + <back-box class="back-box" :style="'padding-top: ' + $parent.top.value + 'px'" v-if="$parent.isBack && isCNLive.value" @back="back"
  14 + :backs="backs">
22 15 </back-box>
  16 +
23 17 <!--轮播-->
24   - <swiper
25   - :style="
26   - 'margin-top:' +
27   - ($parent.isBack && isCNLive.value ? 62 : 10) +
28   - 'px'
29   - "
30   - v-if="banner"
  18 + <swiper :style="'margin-top:' + ($parent.isBack && isCNLive.value ? 62 : 10) + 'px'" v-if="banner"
31 19 :swipers="banner"
32 20 :options="{
33 21 showIndicators: true
34   - }"
35   - >
  22 + }">
36 23 </swiper>
37 24  
38 25 <!--导航-->
39   - <horiz-list
40   - class="components-box"
41   - v-if="navs && navs.length"
42   - @jump="jump"
  26 + <horiz-list class="components-box" v-if="navs && navs.length" @jump="jump"
43 27 :lists="navs"
44   - com="4"
45   - >
  28 + com="4">
46 29 </horiz-list>
47 30  
48 31 <!-- 遍历ads，输出列表数据 -->
49 32 <div class="ads-box">
50 33 <div class="ads" v-for="(item, index) in ads" :key="index">
  34 +
51 35 <!--优惠专区-->
52   - <discountZone
53   - v-if="item.style == '1'"
54   - @more="toDetail"
55   - @toDetail="toDetail"
56   - :discountZoneInfo="item"
57   - >
  36 + <discountZone v-if="item.style == '1'" @more="toDetail" @toDetail="toDetail"
  37 + :discountZoneInfo="item">
58 38 </discountZone>
59 39  
60 40 <!--天天特惠-->
61   - <preferential
62   - v-if="item.style == '2'"
63   - @more="toDetail"
64   - @toDetail="toDetail"
65   - :preferentialInfo="item"
66   - >
  41 + <preferential v-if="item.style == '2'" @more="toDetail" @toDetail="toDetail"
  42 + :preferentialInfo="item">
67 43 </preferential>
68 44  
69 45 <!--视听专区-->
70   - <videoArea
71   - v-if="item.style == '13'"
72   - @more="toDetail"
73   - @toDetail="toDetail"
74   - :videoAreaInfo="item"
75   - >
  46 + <videoArea v-if="item.style == '13'" @more="toDetail" @toDetail="toDetail"
  47 + :videoAreaInfo="item">
76 48 </videoArea>
77 49  
78 50 <!-- style_7组件 -->
79   - <style-7
80   - v-if="item.style == '7'"
81   - @more="toDetail"
82   - @bannerJump="toDetail"
83   - @jump="jump"
84   - @addCart="addCart"
85   - :styles="item"
86   - >
  51 + <style-7 v-if="item.style == '7'" @more="toDetail" @bannerJump="toDetail" @jump="jump" @addCart="addCart"
  52 + :styles="item">
87 53 </style-7>
88 54 </div>
89   - <tabBox
90   - v-if="tabbar"
  55 +
  56 + <tabBox v-if="tabbar"
91 57 :tabbar="tabbar"
92   - :tabbarBackgroud="tabbarBackgroud"
93   - ></tabBox>
  58 + :tabbarBackgroud="tabbarBackgroud">
  59 + </tabBox>
94 60 </div>
95 61 <!-- </van-pull-refresh> -->
96 62 </div>
97 63 </template>
98 64  
99 65 <script>
100   -// 引入组件
101   -import { Toast, Indicator } from "mint-ui";
102   -import callAppBox from "@/components/callAppBox/callAppBox";
103   -import swiper from "@/components/swiper/swiper";
104   -import swiperItem from "@/components/swiperItem/swiperItem";
105   -import discountZone from "@/components/discountZone/discountZone";
106   -import preferential from "@/components/preferential/preferential";
107   -import videoArea from "@/components/videoArea/videoArea";
108   -import style7 from "@/components/style_7/style_7";
109   -import horizList from "@/components/horizList/horizList";
110   -import tabBox from "@/components/tabBox/tabBox";
111   -import backBox from "@/components/backBox/backBox";
112   -export default {
113   - name: "mall",
114   - data() {
115   - return {
116   - title: "", // 标题
117   - isLoading: false, // 下拉刷新控制
118   - banner: null, // banner
119   - navs: null, // 导航
120   - ads: null, // 列表
121   - tabbar: null, // tabbar嵌套组件
122   - tabbarBackgroud: null, // 整体tabbar背景
123   - backs: null // 后退按钮组
124   - };
125   - },
126   - components: {
127   - swiper,
128   - swiperItem,
129   - discountZone,
130   - preferential,
131   - videoArea,
132   - style7,
133   - horizList,
134   - tabBox,
135   - backBox,
136   - callAppBox
137   - },
138   - created() {
139   - // 获取优选库精选活动
140   - this.activityAd();
141   - // // 判断是否在App内
142   - // 设置后退按钮组
143   - this.$set(this, "backs", {
144   - title: ""
145   - });
146 66  
147   - // 判断是否在App内
148   - if (this.$parent.isCNLive.value) {
149   - // 添加后退按钮组“后退”和“分享”按钮
150   - Object.assign(this.backs, {
151   - funcs: {
152   - back: {
153   - icon: "static/img/icon_back.png"
154   - },
155   - funcArray: [
156   - {
157   - icon: "static/img/icon_share.png",
158   - func: this.toShare
159   - }
160   - ]
161   - }
162   - });
163   - }
164   - },
165   - mounted() {
166   - // 唤起详情页
167   - if (typeof this.$parent.getOpenApp === "function") {
168   - this.$parent.getOpenApp({
169   - type: 38,
170   - id: this.$route.query.id || 0,
171   - url: "",
172   - ext: this.$parent.isBack ? JSON.stringify({"isBack":'true'}) : ""
173   - });
174   - }
  67 + // 引入组件
  68 + import { Toast, Indicator } from "mint-ui";
  69 + import callAppBox from "@/components/callAppBox/callAppBox";
  70 + import swiper from "@/components/swiper/swiper";
  71 + import swiperItem from "@/components/swiperItem/swiperItem";
  72 + import discountZone from "@/components/discountZone/discountZone";
  73 + import preferential from "@/components/preferential/preferential";
  74 + import videoArea from "@/components/videoArea/videoArea";
  75 + import style7 from "@/components/style_7/style_7";
  76 + import horizList from "@/components/horizList/horizList";
  77 + import tabBox from "@/components/tabBox/tabBox";
  78 + import backBox from "@/components/backBox/backBox";
175 79  
176   - // 分享详情页
177   - if (typeof this.$parent.getShareData === "function") {
178   - this.$parent.getShareData({
179   - type: 38,
180   - id: this.$route.query.id || 0,
181   - url: "",
182   - ext: this.$parent.isBack ? JSON.stringify({"isBack":'true'}) : ""
  80 + export default {
  81 + name: "mall",
  82 + data() {
  83 + return {
  84 + title: "", // 标题
  85 + isLoading: false, // 下拉刷新控制
  86 + banner: null, // banner
  87 + navs: null, // 导航
  88 + ads: null, // 列表
  89 + tabbar: null, // tabbar嵌套组件
  90 + tabbarBackgroud: null, // 整体tabbar背景
  91 + backs: null // 后退按钮组
  92 + };
  93 + },
  94 + components: {
  95 + swiper,
  96 + swiperItem,
  97 + discountZone,
  98 + preferential,
  99 + videoArea,
  100 + style7,
  101 + horizList,
  102 + tabBox,
  103 + backBox,
  104 + callAppBox
  105 + },
  106 + created() {
  107 +
  108 + // 获取优选库精选活动
  109 + this.activityAd();
  110 +
  111 + // 设置后退按钮组
  112 + this.$set(this, "backs", {
  113 + title: ""
183 114 });
184   - }
185   - // let schemeParams = this.$parent.schemeParams;
186   - // // 判断如果是分享链接没有isBack=true在后面加上isBack=true；为了在app内打开可以展示
187   - // if (!schemeParams.isBack) {
188   - // // 设置参数
189   - // this.$parent.schemeParams = this.$parent.schemeParams + "&isBack=true";
190   - // }
191   - },
192   - methods: {
193   - // 下拉刷新
194   - // onRefresh() {
195 115  
196   - // // 下拉刷新中
197   - // this.$set(this, "isLoading", true);
  116 + // 判断是否在App内
  117 + if (this.$parent.isCNLive.value) {
198 118  
199   - // // 获取优选库精选活动
200   - // this.activityAd();
201   - // },
202   - /**
203   - * 后退
204   - */
205   - back() {
206   - // App内
207   - if (this.isCNLive.value) {
208   - // 调用App，返回按键
209   - if (
210   - window.webkit &&
211   - window.webkit.messageHandlers &&
212   - window.webkit.messageHandlers.pop
213   - ) {
214   - // App内，iOS销毁WebView
215   - window.webkit.messageHandlers.pop.postMessage({ body: {} });
216   - } else if (window.obj && window.obj.finish) {
217   - // App内，Android销毁WebView
218   - window.obj.finish();
219   - }
220   - } else {
221   - // 后退
222   - window.history.go(-1);
  119 + // 添加后退按钮组“后退”和“分享”按钮
  120 + Object.assign(this.backs, {
  121 + funcs: {
  122 + back: {
  123 + icon: "static/img/icon_back.png"
  124 + },
  125 + funcArray: [
  126 + {
  127 + icon: "static/img/icon_share.png",
  128 + func: this.toShare
  129 + }
  130 + ]
  131 + }
  132 + });
223 133 }
224 134 },
225   - /**
226   - * 分享
227   - */
228   - toShare() {
229   - // 判断分享
230   - if (typeof this.$parent.toShare === "function") {
231   - this.$parent.toShare(38, this.$route.query.id || 0);
  135 + mounted() {
  136 +
  137 + // 唤起详情页
  138 + if (typeof this.$parent.getOpenApp === "function") {
  139 + this.$parent.getOpenApp({
  140 + type: 38,
  141 + id: this.$route.query.id || 0,
  142 + url: "",
  143 + ext: this.$parent.isBack ? JSON.stringify({"isBack":'true'}) : ""
  144 + });
232 145 }
  146 +
  147 + // 分享详情页
  148 + if (typeof this.$parent.getShareData === "function") {
  149 + this.$parent.getShareData({
  150 + type: 38,
  151 + id: this.$route.query.id || 0,
  152 + url: "",
  153 + ext: this.$parent.isBack ? JSON.stringify({"isBack":'true'}) : ""
  154 + });
  155 + }
  156 + // let schemeParams = this.$parent.schemeParams;
  157 + // // 判断如果是分享链接没有isBack=true在后面加上isBack=true；为了在app内打开可以展示
  158 + // if (!schemeParams.isBack) {
  159 + // // 设置参数
  160 + // this.$parent.schemeParams = this.$parent.schemeParams + "&isBack=true";
  161 + // }
233 162 },
234   - /**
235   - * 获取优选库精选活动
236   - */
237   - activityAd() {
238   - // 加载中提示
239   - Indicator.open("加载中...");
  163 + methods: {
  164 + // 下拉刷新
  165 + // onRefresh() {
  166 +
  167 + // // 下拉刷新中
  168 + // this.$set(this, "isLoading", true);
240 169  
241   - // 获取证书请求接口
242   - this.http(
243   - "/Api/" + this.getApiVersion().index + "/activityAd",
244   - {
245   - id: this.$route.query.id
246   - },
247   - this.activityAdCallback,
248   - {
249   - method: "post"
  170 + // // 获取优选库精选活动
  171 + // this.activityAd();
  172 + // },
  173 + /**
  174 + * 后退
  175 + */
  176 + back() {
  177 + // App内
  178 + if (this.isCNLive.value) {
  179 + // 调用App，返回按键
  180 + if (
  181 + window.webkit &&
  182 + window.webkit.messageHandlers &&
  183 + window.webkit.messageHandlers.pop
  184 + ) {
  185 + // App内，iOS销毁WebView
  186 + window.webkit.messageHandlers.pop.postMessage({ body: {} });
  187 + } else if (window.obj && window.obj.finish) {
  188 + // App内，Android销毁WebView
  189 + window.obj.finish();
  190 + }
  191 + } else {
  192 + // 后退
  193 + window.history.go(-1);
250 194 }
251   - );
252   - },
  195 + },
  196 + /**
  197 + * 分享
  198 + */
  199 + toShare() {
  200 + // 判断分享
  201 + if (typeof this.$parent.toShare === "function") {
  202 + this.$parent.toShare(38, this.$route.query.id || 0);
  203 + }
  204 + },
  205 + /**
  206 + * 获取优选库精选活动
  207 + */
  208 + activityAd() {
  209 + // 加载中提示
  210 + Indicator.open("加载中...");
  211 +
  212 + // 获取证书请求接口
  213 + this.http(
  214 + "/Api/" + this.getApiVersion().index + "/activityAd",
  215 + {
  216 + id: this.$route.query.id
  217 + },
  218 + this.activityAdCallback,
  219 + {
  220 + method: "post"
  221 + }
  222 + );
  223 + },
253 224  
254   - /**
255   - * 获取优选库精选活动回调
256   - * @param {object} res [服务器返回数据]
257   - * @param {object} ext [扩展参数]
258   - */
259   - activityAdCallback(res, ext) {
260   - // 加载完成
261   - Indicator.close();
  225 + /**
  226 + * 获取优选库精选活动回调
  227 + * @param {object} res [服务器返回数据]
  228 + * @param {object} ext [扩展参数]
  229 + */
  230 + activityAdCallback(res, ext) {
  231 + // 加载完成
  232 + Indicator.close();
262 233  
263   - // 下拉刷新结束
264   - this.$set(this, "isLoading", false);
  234 + // 下拉刷新结束
  235 + this.$set(this, "isLoading", false);
265 236  
266   - // 返回处理
267   - if (res.code == 200) {
268   - // 解构数据
269   - let { data: datas } = res;
  237 + // 返回处理
  238 + if (res.code == 200) {
  239 + // 解构数据
  240 + let { data: datas } = res;
270 241  
271   - /* 获取优选库精选活动数据 开始 */
  242 + /* 获取优选库精选活动数据 开始 */
272 243  
273   - // 设置标题
274   - this.$set(this, "title", datas.title);
  244 + // 设置标题
  245 + this.$set(this, "title", datas.title);
275 246  
276   - // 设置banner数据
277   - if (datas.banner && datas.banner.length) {
278   - this.$set(this, "banner", datas.banner);
279   - }
  247 + // 设置banner数据
  248 + if (datas.banner && datas.banner.length) {
  249 + this.$set(this, "banner", datas.banner);
  250 + }
280 251  
281   - // 设置navs数据
282   - if (datas.navs && datas.navs.length) {
283   - this.$set(this, "navs", datas.navs);
284   - }
  252 + // 设置navs数据
  253 + if (datas.navs && datas.navs.length) {
  254 + this.$set(this, "navs", datas.navs);
  255 + }
285 256  
286   - // 设置ads数据
287   - if (datas.ads && datas.ads.length) {
288   - this.$set(this, "ads", datas.ads);
  257 + // 设置ads数据
  258 + if (datas.ads && datas.ads.length) {
  259 + this.$set(this, "ads", datas.ads);
  260 + }
  261 + // 设置tabbar数据
  262 + if (datas.tabbar && datas.tabbar.length) {
  263 + this.$set(this, "tabbar", datas.tabbar);
  264 + }
  265 + // 设置tabbarBackgroud数据
  266 + if (datas.color && datas.color.length) {
  267 + this.$set(this, "tabbarBackgroud", datas.color);
  268 + }
  269 + /* 获取优选库精选活动数据 结束 */
  270 + } else if (res.code == 400) {
  271 + // 获取优选库精选活动失败
  272 + Toast(res.message);
  273 + } else {
  274 + // 获取优选库精选活动失败
  275 + Toast("获取优选库精选活动失败");
289 276 }
290   - // 设置tabbar数据
291   - if (datas.tabbar && datas.tabbar.length) {
292   - this.$set(this, "tabbar", datas.tabbar);
  277 + },
  278 +
  279 + /**
  280 + * 调用通用跳转
  281 + * @param {object} item [通用跳转对象]
  282 + */
  283 + toDetail(item) {
  284 + // 判断是否有通用跳转函数
  285 + if (typeof this.$parent.gotoDetail === "function") {
  286 + // 调用通用跳转
  287 + this.$parent.gotoDetail(item);
293 288 }
294   - // 设置tabbarBackgroud数据
295   - if (datas.color && datas.color.length) {
296   - this.$set(this, "tabbarBackgroud", datas.color);
  289 + },
  290 +
  291 + /**
  292 + * style7跳转
  293 + * @param {object} item [数据对象]
  294 + */
  295 + jump(item) {
  296 + // 判断并调用通用跳转
  297 + if (typeof this.$parent.gotoDetail === "function") {
  298 + // 构造跳转详情页参数
  299 + let options = {
  300 + type: "2",
  301 + to: item.id,
  302 + shop_type: item.shop_type
  303 + };
  304 +
  305 + this.$parent.gotoDetail(options);
297 306 }
298   - /* 获取优选库精选活动数据 结束 */
299   - } else if (res.code == 400) {
300   - // 获取优选库精选活动失败
301   - Toast(res.message);
302   - } else {
303   - // 获取优选库精选活动失败
304   - Toast("获取优选库精选活动失败");
305   - }
306   - },
  307 + },
307 308  
308   - /**
309   - * 调用通用跳转
310   - * @param {object} item [通用跳转对象]
311   - */
312   - toDetail(item) {
313   - // 判断是否有通用跳转函数
314   - if (typeof this.$parent.gotoDetail === "function") {
315   - // 调用通用跳转
316   - this.$parent.gotoDetail(item);
  309 + /**
  310 + * 加入购物车
  311 + * @param {object} item [数据对象]
  312 + */
  313 + addCart(item) {
  314 + // 通用跳转
  315 + this.jump(item);
317 316 }
318 317 },
319   -
320   - /**
321   - * style7跳转
322   - * @param {object} item [数据对象]
323   - */
324   - jump(item) {
325   - // 判断并调用通用跳转
326   - if (typeof this.$parent.gotoDetail === "function") {
327   - // 构造跳转详情页参数
328   - let options = {
329   - type: "2",
330   - to: item.id,
331   - shop_type: item.shop_type
  318 + head: {
  319 + title() {
  320 + return {
  321 + inner: this.title
332 322 };
333   -
334   - this.$parent.gotoDetail(options);
335 323 }
336 324 },
337   -
338   - /**
339   - * 加入购物车
340   - * @param {object} item [数据对象]
341   - */
342   - addCart(item) {
343   - // 通用跳转
344   - this.jump(item);
345   - }
346   - },
347   - head: {
348   - title() {
349   - return {
350   - inner: this.title
351   - };
352   - }
353   - },
354   - watch: {
355   - // 设置页面标题
356   - title(newVal) {
357   - if (
358   - this.$store.state.browser.toLowerCase() == "qq" &&
359   - this.$store.state.deviceType.toLowerCase() == "iphone"
360   - ) {
361   - this.$iFrame.insertIFrame(newVal);
362   - } else {
363   - this.$emit("updateHead");
  325 + watch: {
  326 + // 设置页面标题
  327 + title(newVal) {
  328 + if (
  329 + this.$store.state.browser.toLowerCase() == "qq" &&
  330 + this.$store.state.deviceType.toLowerCase() == "iphone"
  331 + ) {
  332 + this.$iFrame.insertIFrame(newVal);
  333 + } else {
  334 + this.$emit("updateHead");
  335 + }
364 336 }
365 337 }
366 338 }
367   -};
368 339 </script>
369 340  
370 341 <!-- Add "scoped" attribute to limit CSS to this component only -->
371 342 <style rel="stylesheet/less" lang="less" scoped>
372   -@import "mall";
  343 + @import "mall";
373 344 </style>
... ...
src/pages/mall2/mall2.less
  View file @7779061
... ... @@ -3,25 +3,69 @@
3 3 .mall-box {
4 4 background-color: #F6F6F6;
5 5 min-height: 100vh;
6   - .call-app-box {
  6 + .navs-box {
7 7 position: fixed;
8 8 top: 0;
9 9 z-index: 100;
10   - }
11   - .back-box {
12   - position: fixed;
13   - top: 0;
14   - z-index: 100;
15   - background: linear-gradient(180deg, rgba(0, 0, 0, 0.39) 0%, rgba(0, 0, 0, 0) 100%);
  10 + width: 100%;
  11 + height: auto;
  12 + .call-app-box {
  13 + position: fixed;
  14 + top: 0;
  15 + z-index: 100;
  16 + }
  17 + .back-box {
  18 + // background: linear-gradient(180deg, rgba(0, 0, 0, 0.39) 0%, rgba(0, 0, 0, 0) 100%);
  19 + background: #ffffff;
  20 + width: 100%;
  21 + }
  22 + .tabs-box {
  23 + display: flex;
  24 + justify-content: center;
  25 + align-items: center;
  26 + background-color: #ffffff;
  27 + width: 100%;
  28 + height: 78px;
  29 + border-top: 1px solid #E6E6E6;
  30 + .tab {
  31 + flex: 1;
  32 + & + .tab {
  33 + border-left: 1px solid #E6E6E6;
  34 + }
  35 + .title {
  36 + text-align: center;
  37 + color: #999999;
  38 + font-size: 32px;
  39 + font-weight: 500;
  40 + }
  41 + .line {
  42 + background-color: transparent;
  43 + margin: 10px auto 0 auto;
  44 + width: 30px;
  45 + height: 4px;
  46 + border-radius: 4px;
  47 +
  48 + }
  49 + &.active {
  50 + .title {
  51 + color: #4A4A4A;
  52 + font-weight: bold;
  53 + }
  54 + .line {
  55 + background-color: #FC1541;
  56 + }
  57 + }
  58 + }
  59 + }
16 60 }
17 61 .pl {
18 62 background-color: transparent;
19 63 width: 100%;
20 64 &.is-open-app {
21   - height: 122px;
  65 + height: 200px;
22 66 }
23 67 &.is-cnlive {
24   - height: 93px;
  68 + height: 171px;
25 69 }
26 70 }
27 71 .main-box {
... ...
src/pages/mall2/mall2.vue
  View file @7779061
1 1 <template>
2 2 <div class="mall-box">
3 3  
4   - <!-- H5唤起App组件 -->
5   - <call-app-box class="call-app-box" ref="callApp" v-if="!isCNLive.value && $parent.isOpenApp.value"
6   - :callApps="$parent.callApps">
7   - </call-app-box>
8   -
9   - <!-- 后退导航 -->
10   - <back-box class="back-box" :style="'padding-top: ' + $parent.top.value + 'px'" v-if="isCNLive.value && $route.query.showBack == true" @back="back"
11   - :backs="backs">
12   - </back-box>
  4 + <!-- Nav导航 -->
  5 + <div class="navs-box" :class="{'hide': $route.query.hideBack == true}" :style="'padding-top: ' + $parent.top.value + 'px'" v-if="showNavs">
  6 +
  7 + <!-- H5唤起App组件 -->
  8 + <call-app-box class="call-app-box" ref="callApp" v-if="!isCNLive.value && $parent.isOpenApp.value"
  9 + :callApps="$parent.callApps">
  10 + </call-app-box>
  11 +
  12 + <!-- 后退导航 -->
  13 + <back-box class="back-box" ref="backBox" v-if="!isWeChat.value" @back="back"
  14 + :backs="backs">
  15 + </back-box>
  16 +
  17 + <!-- 国内品牌和境外品牌切换tabs -->
  18 + <div class="tabs-box">
  19 + <div class="tab" :class="{'active': isActiveTab == 1}" @click="changeTabs(1)">
  20 + <div class="title">国内</div>
  21 + <div class="line"></div>
  22 + </div>
  23 + <div class="tab" :class="{'active': isActiveTab == 2}" @click="changeTabs(2)">
  24 + <div class="title">境外</div>
  25 + <div class="line"></div>
  26 + </div>
  27 + </div>
  28 + </div>
13 29  
14 30 <!-- pl -->
15   - <div class="pl" :class="{'is-cnlive': isCNLive.value && $route.query.showBack == true, 'is-open-app': $parent.isOpenApp.value}"></div>
  31 + <div class="pl" :class="{'hide': $route.query.hideBack == true, 'is-cnlive': !isWeChat.value, 'is-open-app': $parent.isOpenApp.value}" :style="'padding-top: ' + $parent.top.value + 'px'" v-if="!isWeChat.value && showNavs"></div>
16 32  
17 33 <!-- 主区域 -->
18 34 <div class="main-box">
... ... @@ -94,12 +110,14 @@
94 110 return {
95 111 title: "", // 标题
96 112 backs: null, // 后退按钮组
  113 + isActiveTab: 0, // 当前活动tab
97 114 CALL_STATUS: {
98 115 INIT: "init", // 初始化页面
99 116 REFRESH: "refresh", // 刷新页面
100 117 LOAD_MORE: "loadMore" // 加载更多
101 118 },
102 119 navs: null, // 导航
  120 + showNavs: false, // 是否显示其它频道跳转，默认不显示
103 121 shopListsPage: {}, // 店铺商品列表分页相关参数
104 122 shopLists: null // 店铺商品列表
105 123 };
... ... @@ -116,15 +134,36 @@
116 134 // 设置标题
117 135 this.$set(this, 'title', '旗舰店');
118 136  
  137 + // 设置活动标签
  138 + this.$set(this, 'isActiveTab', this.$route.query.type || 1);
  139 +
119 140 // 旗舰店swiper
120 141 this.flagship();
121 142  
122 143 // 旗舰店店铺商品
123 144 this.flagshipList();
124 145  
125   - // 判断是否在App内
  146 + // 判断在App内
126 147 if (this.isCNLive.value) {
127 148  
  149 + // 判断App版本，判断是否显示积分商城模块
  150 + if (typeof this.$parent.compareVersion === 'function') {
  151 +
  152 + // 获取平台版本
  153 + let version = this.$route.query.version;
  154 +
  155 + // 根据平台，判断是否符合版本，显示搜索和其它导航菜单
  156 + if ((this.isiPhone.value && this.$parent.compareVersion(version, '1.9.6')) || (this.isAndroid.value && this.$parent.compareVersion(version, '1.8.3.1'))) {
  157 +
  158 + // 设置显示导航模块
  159 + this.$set(this, 'showNavs', true);
  160 + }
  161 + }
  162 + }
  163 +
  164 + // 判断是否在App内
  165 + if (!this.isWeChat.value) {
  166 +
128 167 // 添加后退按钮组“后退”和“分享”按钮
129 168 this.$set(this, 'backs', {
130 169 title: this.title,
... ... @@ -175,6 +214,36 @@
175 214 },
176 215  
177 216 /**
  217 + * 切换tab
  218 + * @param {Number} activeTab [被选择的tab]
  219 + */
  220 + changeTabs(activeTab) {
  221 +
  222 + // 判断是否有切换操作
  223 + if (activeTab != this.isActiveTab) {
  224 +
  225 + // 设置type
  226 + Object.assign(this.$route.query, {
  227 + type: activeTab
  228 + });
  229 +
  230 + // 设置活动tab项目
  231 + this.$set(this, 'isActiveTab', activeTab);
  232 +
  233 + /* 重新加载页面数据 开始 */
  234 +
  235 + // 旗舰店swiper
  236 + this.flagship();
  237 +
  238 + // 旗舰店店铺商品
  239 + this.flagshipList();
  240 +
  241 + /* 重新加载页面数据 结束 */
  242 +
  243 + }
  244 + },
  245 +
  246 + /**
178 247 * 旗舰店swiper
179 248 */
180 249 flagship() {
... ...
src/pages/newDaren/newDaren.less
  View file @7779061
... ... @@ -2,4 +2,26 @@
2 2  
3 3 .daren-list {
4 4 margin: 30px 0;
  5 + .call-app-box {
  6 + position: fixed;
  7 + top: 0;
  8 + z-index: 100;
  9 + }
  10 + .back-box {
  11 + position: fixed;
  12 + top: 0;
  13 + z-index: 100;
  14 + // background: linear-gradient(180deg, rgba(0, 0, 0, 0.39) 0%, rgba(0, 0, 0, 0) 100%);
  15 + background: #fff;
  16 + }
  17 + .pl {
  18 + background-color: transparent;
  19 + width: 100%;
  20 + &.is-open-app {
  21 + height: 122px;
  22 + }
  23 + &.is-cnlive {
  24 + height: 93px;
  25 + }
  26 + }
5 27 }
6 28 \ No newline at end of file
... ...
src/pages/newDaren/newDaren.vue
  View file @7779061
1 1 <template>
2 2 <div class="daren-list">
3 3  
  4 + <!-- H5唤起App组件 -->
  5 + <call-app-box class="call-app-box" ref="callApp" v-if="!isCNLive.value && $parent.isOpenApp.value"
  6 + :callApps="$parent.callApps">
  7 + </call-app-box>
  8 +
  9 + <!-- 后退导航 -->
  10 + <back-box class="back-box" :class="{'hide': $route.query.hideBack == true}" :style="'padding-top: ' + $parent.top.value + 'px'" ref="backBox" v-if="!isWeChat.value" @back="back"
  11 + :backs="backs">
  12 + </back-box>
  13 +
  14 + <!-- pl -->
  15 + <div class="pl" :class="{'hide': $route.query.hideBack == true, 'is-cnlive': isCNLive.value, 'is-open-app': $parent.isOpenApp.value}" :style="'padding-top: ' + $parent.top.value + 'px'" v-if="!isWeChat.value"></div>
  16 +
4 17 <!--轮播-->
5 18 <!-- <swiper v-if="banner"
6 19 :swipers="banner"
... ... @@ -13,26 +26,46 @@
13 26 <!--达人信息-->
14 27 <!-- <shop-daten-top v-if="shopDatenTop" @userJump="userJump" :shopDatenTop="shopDatenTop"></shop-daten-top> -->
15 28  
16   - <!-- 已关注达人列表（4条） -->
17   - <!-- 已关注达人 -->
18   - <div v-if="dresserList&&dresserList.length">
19   -
20   - <!-- 标题 -->
21   - <text-title-box @more="h5More"
22   - :titles="{
23   - title: '已关注达人动态',
24   - more: true
25   - }">
26   - </text-title-box>
27   -
28   - <!-- 已关注达人列表（4条） -->
29   - <div>
30   - <!-- 达人列表组件 -->
31   - <dresserList @toDetail="toDetail"
32   - :dresserList="dresserList">
33   - </dresserList>
34   - </div>
  29 + <!-- 已关注达人动态列表（4条） -->
  30 + <!-- <div v-if="dresserList&&dresserList.length"> -->
  31 +
  32 + <!-- 标题 -->
  33 + <!-- <text-title-box @more="h5More"
  34 + :titles="{
  35 + title: '已关注达人动态',
  36 + more: true
  37 + }">
  38 + </text-title-box> -->
  39 +
  40 + <!-- 已关注达人动态列表（4条） -->
  41 + <!-- <div> -->
  42 + <!-- 达人列表组件 -->
  43 + <!-- <dresserList @toDetail="toDetail"
  44 + :dresserList="dresserList">
  45 + </dresserList>
35 46 </div>
  47 + </div> -->
  48 +
  49 + <!-- 已关注达人列表（4条） -->
  50 + <div v-if="dresserList&&dresserList.length">
  51 +
  52 + <!-- 标题 -->
  53 + <text-title-box @more="h5More"
  54 + :titles="{
  55 + title: '关注达人列表',
  56 + more: true
  57 + }">
  58 + </text-title-box>
  59 +
  60 + <!-- 已关注达人列表（4条） -->
  61 + <div>
  62 + <!-- 达人列表组件 -->
  63 + <dresserList @toDetail="toDetail"
  64 + :dresserList="dresserList">
  65 + </dresserList>
  66 + </div>
  67 + </div>
  68 +
36 69 <!--推荐达人-->
37 70  
38 71 <!-- 最新动态标题 -->
... ... @@ -40,8 +73,7 @@
40 73 :titles="{
41 74 title: '推荐达人',
42 75 more: true
43   - }"
44   - >
  76 + }">
45 77 </text-title-box>
46 78  
47 79 <!--导航-->
... ... @@ -65,13 +97,8 @@
65 97 </daren-list-box>
66 98  
67 99 <div class="item_box">
68   - <div
69   - infinite-scroll-immediate-check="true"
70   - v-infinite-scroll="getNewDynamicList"
71   - infinite-scroll-disabled="loading"
72   - :infinite-scroll-distance="50">
73   -
74   - <daren-list-box class="daren-list" @userJump="userJump" @jump="jump" @goodsJump="goodsJump" @goodsPrimary="goodsPrimary"
  100 + <div infinite-scroll-immediate-check="true" v-infinite-scroll="getNewDynamicList" infinite-scroll-disabled="loading" :infinite-scroll-distance="50">
  101 + <daren-list-box class="daren-list" @userJump="userJump" @jump="jump" @goodsJump="goodsJump" @goodsPrimary="goodsPrimary" @fansShop="fansShop" @toDarenShop="userJump"
75 102 :lists="shopFnsDynamic">
76 103  
77 104 <!--最新达人动态-->
... ... @@ -79,8 +106,7 @@
79 106 :titles="{
80 107 title: '最新达人动态',
81 108 more: false
82   - }"
83   - >
  109 + }">
84 110 </text-title-box>
85 111 </daren-list-box>
86 112 </div>
... ... @@ -92,6 +118,8 @@
92 118  
93 119 // 引入组件
94 120 import { Toast, Indicator } from "mint-ui";
  121 +import callAppBox from "@/components/callAppBox/callAppBox";
  122 +import backBox from "@/components/backBox/backBox";
95 123 import swiper from "@/components/swiper/swiper";
96 124 import darenListBox from "@/components/darenListBox/darenListBox";
97 125 import textTitleBox from "@/components/textTitleBox/textTitleBox";
... ... @@ -103,30 +131,48 @@ export default {
103 131 name: "darenList",
104 132 data () {
105 133 return {
106   - title: "", // 标题
107   - isLoading: false, // 下拉刷新中
108   - shopDatenTop: null, // 置顶达人信息
109   - banner: [], // 轮播
110   - dresserList: null, // 已关注达人
111   - shopDarenHot: null, // 达人推荐列表
112   - fansDaren: null, // 已关注达人动态
113   - shopFnsDynamic: null, // 达人动态
114   - loading: false, // 加载
115   - pages: 0 // 分页
  134 + title: "", // 标题
  135 + backs: null, // 后退按钮组
  136 + isLoading: false, // 下拉刷新中
  137 + shopDatenTop: null, // 置顶达人信息
  138 + banner: [], // 轮播
  139 + // dresserList: null, // 已关注达人动态列表
  140 + dresserList: null, // 已关注达人列表
  141 + shopDarenHot: null, // 达人推荐列表
  142 + fansDaren: null, // 已关注达人动态
  143 + shopFnsDynamic: null, // 达人动态
  144 + loading: false, // 加载
  145 + pages: 0 // 分页
116 146 }
117 147 },
118 148 components: {
119   - darenListBox,
120   - textTitleBox,
121   - swiper,
122   - shopDatenTop,
123   - horizList,
124   - dresserList
  149 + callAppBox,
  150 + backBox,
  151 + darenListBox,
  152 + textTitleBox,
  153 + swiper,
  154 + shopDatenTop,
  155 + horizList,
  156 + dresserList
125 157 },
126 158 created () {
127   -
128   - // 设置标题
129   - this.$set(this, "title", "达人");
  159 +
  160 + // 设置标题
  161 + this.$set(this, "title", "达人");
  162 +
  163 + // 判断是否在App内
  164 + if (this.isCNLive.value) {
  165 +
  166 + // 添加后退按钮组“后退”和“分享”按钮
  167 + this.$set(this, 'backs', {
  168 + title: this.title,
  169 + funcs: {
  170 + back: {
  171 + icon: "static/img/icon_back.png"
  172 + }
  173 + }
  174 + });
  175 + }
130 176  
131 177 // 获取优选库精选活动
132 178 this.newDarenIndex();
... ... @@ -151,20 +197,21 @@ export default {
151 197 * 达人最新动态
152 198 */
153 199 getNewDynamicList () {
154   - this.loading = true;
155   - this.pages++
156   - // 加载中提示
157   - Indicator.open("加载中...");
158   -
159   - // 获取证书请求接口
160   - this.http("/Api/" + this.getApiVersion().dynamic + "/getNewDynamicList", {
161   - uid: this.$route.query.uid,
162   - page: this.pages,
163   - type: 1
164   - }, this.getNewDynamicListCallback, {
165   - method: "post"
166   - }
167   - );
  200 +
  201 + this.loading = true;
  202 + this.pages++
  203 +
  204 + // 加载中提示
  205 + Indicator.open("加载中...");
  206 +
  207 + // 获取证书请求接口
  208 + this.http("/Api/" + this.getApiVersion().dynamic + "/getNewDynamicList", {
  209 + uid: this.$route.query.uid,
  210 + page: this.pages,
  211 + type: 1
  212 + }, this.getNewDynamicListCallback, {
  213 + method: "post"
  214 + });
168 215 },
169 216  
170 217 /**
... ... @@ -173,46 +220,53 @@ export default {
173 220 * @param {object} ext [扩展参数]
174 221 */
175 222 getNewDynamicListCallback (res, ext) {
176   -
177   - // 加载完成
178   - Indicator.close();
179   -
180   - // 返回处理
181   - if (res.code == 200) {
182   - // 解构数据
183   - let { data: datas } = res;
184   - // 设置shopFnsDynamic达人动态数据
185   -
186   - if (datas.list && datas.list.length) {
187   - // 隐藏加载圈
188   - this.loading = false;
189   - if (this.pages > 1) {
190   - this.$set(this, "shopFnsDynamic", [...this.shopFnsDynamic, ...datas.list]);
191   - } else {
192   - this.$set(this, "shopFnsDynamic", datas.list);
193   - }
194   - // 将视频地址加入到图片数组中
195   - if (this.shopFnsDynamic && this.shopFnsDynamic.length > 0) {
196   - for (let item of this.shopFnsDynamic) {
197   - // 将视频图片加入图片数组，方便循环输出
198   - if (item.video_img) {
199   - this.$set(item, "img", [...[item.video_img], ...item.img]);
200   - }
  223 +
  224 + // 加载完成
  225 + Indicator.close();
  226 +
  227 + // 返回处理
  228 + if (res.code == 200) {
  229 +
  230 + // 解构数据
  231 + let { data: datas } = res;
  232 +
  233 + // 设置shopFnsDynamic达人动态数据
  234 +
  235 + if (datas.list && datas.list.length) {
  236 +
  237 + // 隐藏加载圈
  238 + this.loading = false;
  239 + if (this.pages > 1) {
  240 + this.$set(this, "shopFnsDynamic", [...this.shopFnsDynamic, ...datas.list]);
  241 + } else {
  242 + this.$set(this, "shopFnsDynamic", datas.list);
  243 + }
  244 +
  245 + // 将视频地址加入到图片数组中
  246 + if (this.shopFnsDynamic && this.shopFnsDynamic.length > 0) {
  247 + for (let item of this.shopFnsDynamic) {
  248 +
  249 + // 将视频图片加入图片数组，方便循环输出
  250 + if (item.video_img) {
  251 + this.$set(item, "img", [...[item.video_img], ...item.img]);
  252 + }
  253 + }
  254 + }
201 255 }
202   - }
203   - }
204   - /* 获取达人动态数据 结束 */
205 256  
206   - } else if (res.code == 400) {
  257 + /* 获取达人动态数据 结束 */
207 258  
208   - // 获取达人动态失败
209   - Toast(res.message);
210   - } else {
211   -
212   - // 获取优选库精选活动失败
213   - Toast("获取达人动态失败");
214   - }
  259 + } else if (res.code == 400) {
  260 +
  261 + // 获取达人动态失败
  262 + Toast(res.message);
  263 + } else {
  264 +
  265 + // 获取优选库精选活动失败
  266 + Toast("获取达人动态失败");
  267 + }
215 268 },
  269 +
216 270 // 下拉刷新
217 271 // onRefresh() {
218 272  
... ... @@ -266,8 +320,9 @@ export default {
266 320  
267 321 // 获取“达人列表数据”
268 322 if (datas.list && datas.list.length) {
269   - // 设置“达人列表数据”数据
270   - this.$set(this, "dresserList", datas.list.filter((item, index, arr) => { return index < 4 }));
  323 +
  324 + // 设置“达人列表数据”数据
  325 + this.$set(this, "dresserList", datas.list.filter((item, index, arr) => { return index < 4 }));
271 326 }
272 327  
273 328 // 设置banner数据
... ... @@ -283,6 +338,7 @@ export default {
283 338 if (datas.shop_daren_hot && datas.shop_daren_hot.length) {
284 339 this.$set(this, "shopDarenHot", datas.shop_daren_hot);
285 340 }
  341 +
286 342 // 设置fansDaren已关注达人动态数据
287 343  
288 344 if (datas.shop_fans_dynamic && datas.shop_fans_dynamic.length) {
... ... @@ -312,18 +368,20 @@ export default {
312 368 * 关注/取消关注达人
313 369 */
314 370 fansShop (item) {
315   - Indicator.open("加载中...");
316   - // 判断必要参数
317   - if (item.id && this.$route.query.uid) {
  371 +
  372 + Indicator.open("加载中...");
  373 +
  374 + // 判断必要参数
  375 + if (item.id && this.$route.query.uid) {
  376 +
318 377 // 请求接口
319 378 this.http("/Api/" + this.getApiVersion().dynamic + "/fansShop", {
320   - id: item.id || 0,
321   - uid: this.$route.query.uid || 0
  379 + id: (item.shop_user ? item.shop_user.id : item.id) || 0,
  380 + uid: this.$route.query.uid || 0
322 381 }, this.fansShopCallback, {
323 382 method: "post",
324 383 item
325   - }
326   - );
  384 + });
327 385 }
328 386 },
329 387  
... ... @@ -333,30 +391,50 @@ export default {
333 391 * @param {object} ext [扩展参数]
334 392 */
335 393 fansShopCallback (res, ext) {
  394 +
  395 + // 加载完成
  396 + Indicator.close();
  397 +
  398 + if (res.code) {
  399 +
  400 + // 设置已关注
  401 + if (ext.item.is_fans) {
  402 + if (ext.item.is_fans == "0") {
  403 +
  404 + // 关注达人
  405 + this.$set(ext.item, "is_fans", "1");
  406 + Toast("关注成功");
  407 + } else if (ext.item.is_fans == "1") {
  408 +
  409 + // 取消关注达人
  410 + this.$set(ext.item, "is_fans", "0");
  411 + Toast("取消关注成功");
  412 + }
  413 + } else if (ext.item.shop_user) {
  414 +
  415 + if (ext.item.shop_user.is_fans == '0') {
  416 +
  417 + // 关注达人
  418 + this.$set(ext.item.shop_user, "is_fans", "1");
  419 + Toast("关注成功");
  420 + } else {
  421 +
  422 + // 取消关注达人
  423 + this.$set(ext.item.shop_user, "is_fans", "0");
  424 + Toast("取消关注成功");
  425 + }
  426 + }
  427 + } else if (res.statusCode === 200 && res.data.code == 400) {
336 428  
337   - // 加载完成
338   - Indicator.close();
339   - if (res.code) {
340   - // 设置已关注
341   - if (ext.item.is_fans == "0") {
342   - // 关注达人
343   - this.$set(ext.item, "is_fans", "1");
344   - Toast("关注成功");
  429 + // 关注失败
  430 + Toast(res.data.message);
345 431 } else {
346   - // 取消关注达人
347   - this.$set(ext.item, "is_fans", "0");
348   - Toast("取消关注成功");
349   - }
350   - } else if (res.statusCode === 200 && res.data.code == 400) {
351 432  
352   - // 关注失败
353   - Toast(res.data.message);
354   - } else {
355   -
356   - // 关注失败
357   - Toast("关注失败");
358   - }
  433 + // 关注失败
  434 + Toast("关注失败");
  435 + }
359 436 },
  437 +
360 438 /**
361 439 * 调用通用跳转
362 440 * @param {object} item [通用跳转对象]
... ... @@ -382,6 +460,15 @@ export default {
382 460 // 判断是否有通用跳转函数
383 461 if (typeof this.$parent.gotoDetail === "function") {
384 462  
  463 + // 设置跳转达人个人主页用户数据
  464 + Object.assign(item, {
  465 + type: "5",
  466 + to: (this.mode == "prod") ?
  467 + "https://managemall.cnlive.com/html/preferred-library/1/#/pages/darenProfile/darenProfile?from=redirect" + "&id=" + (item.user_id) + (this.getStore("uid") ? "&uid=" + this.getStore("uid") : "") :
  468 + "https://wjjshop.cnlive.com/html/preferred-library/1/#/pages/darenProfile/darenProfile?from=redirect"+ "&id=" + (item.user_id) + (this.getStore("uid") ? "&uid=" + this.getStore("uid") : ""),
  469 + shop_type: ""
  470 + });
  471 +
385 472 // 调用通用跳转
386 473 this.$parent.gotoDetail(item);
387 474 }
... ... @@ -513,6 +600,23 @@ export default {
513 600 // 调用通用跳转
514 601 this.$parent.gotoDetail(item);
515 602 }
  603 + },
  604 +
  605 + /**
  606 + * 后退
  607 + */
  608 + back() {
  609 +
  610 + // 判断是否有处理函数
  611 + if (typeof this.$parent.back === 'function') {
  612 +
  613 + // 后退
  614 + this.$parent.back();
  615 + } else {
  616 +
  617 + // 后退
  618 + window.history.go(-1);
  619 + }
516 620 }
517 621 },
518 622 head: {
... ...
src/pages/optimization2/optimization2.less
  View file @7779061
... ... @@ -14,6 +14,13 @@
14 14 z-index: 100;
15 15 background: linear-gradient(180deg, rgba(0, 0, 0, 0.39) 0%, rgba(0, 0, 0, 0) 100%);
16 16 }
  17 + .back-search-box {
  18 + position: fixed;
  19 + top: 0;
  20 + z-index: 100;
  21 + // background: linear-gradient(180deg, rgba(0, 0, 0, 0.39) 0%, rgba(0, 0, 0, 0) 100%);
  22 + background-color: #ffffff;
  23 + }
17 24 .pl {
18 25 background-color: transparent;
19 26 width: 100%;
... ... @@ -29,13 +36,29 @@
29 36 .section {
30 37 background-color: #ffffff;
31 38 margin: 0 auto 40px auto;
32   - width: 690px;
  39 + width: 710px;
33 40 height: auto;
34 41 border-radius: 24px;
35 42 overflow: hidden;
  43 + &.banner-box {
  44 +
  45 + }
  46 + &.page-list {
  47 + background-color: transparent;
  48 + margin-bottom: 0;
  49 + /deep/ .icon-swiper-box {
  50 + .icons-com {
  51 + .title {
  52 + color: #444;
  53 + font-size: 24px;
  54 + font-weight: 400;
  55 + }
  56 + }
  57 + }
  58 + }
36 59 &.shop-list {
37 60 /deep/ .text-bg-title-com {
38   - height: 76px;
  61 + height: 70px;
39 62 }
40 63 .header-img-box {
41 64 width: 100%;
... ... @@ -79,6 +102,15 @@
79 102 &.hot-box {
80 103  
81 104 }
  105 + &.sub-banner-box {
  106 + // width: 100%;
  107 + height: auto;
  108 + .sub-banner-img {
  109 + display: block;
  110 + width: 100%;
  111 + height: auto;
  112 + }
  113 + }
82 114 &.goods-list {
83 115 background-color: transparent;
84 116 margin: 0 auto;
... ... @@ -89,5 +121,57 @@
89 121 }
90 122 }
91 123 }
  124 + .section-col-2 {
  125 + display: flex;
  126 + justify-content: space-between;
  127 + align-items: center;
  128 + margin: 0 auto 40px auto;
  129 + width: 710px;
  130 + height: auto;
  131 + .section-2 {
  132 + background-color: #ffffff;
  133 + width: 346px;
  134 + height: auto;
  135 + border-radius: 24px;
  136 + overflow: hidden;
  137 + &.shop-list {
  138 + /deep/ .text-bg-title-com {
  139 + height: 70px;
  140 + }
  141 + .header-img-box {
  142 + width: 100%;
  143 + height: 100%;
  144 + .header-img {
  145 + display: block;
  146 + width: 100%;
  147 + height: 100%;
  148 + }
  149 + }
  150 + .list-box {
  151 + display: flex;
  152 + justify-content: space-between;
  153 + align-items: center;
  154 + .discount-flag {
  155 + position: absolute;
  156 + top: 4px;
  157 + left: 22px;
  158 + z-index: 1;
  159 + background: linear-gradient(90deg, #F9EE7A 0%, #FAD844 100%);
  160 + padding: 1px 8px;
  161 + color: #945A08;
  162 + font-size: 20px;
  163 + font-weight: 400;
  164 + border-radius: 6px;
  165 + }
  166 + }
  167 + .points-box {
  168 + /deep/ .box {
  169 + padding: 28px 0;
  170 + border-top: 1px solid #DCDCDC;
  171 + }
  172 + }
  173 + }
  174 + }
  175 + }
92 176 }
93 177 }
94 178 \ No newline at end of file
... ...
src/pages/optimization2/optimization2.vue
  View file @7779061
... ... @@ -7,18 +7,101 @@
7 7 </call-app-box>
8 8  
9 9 <!-- 后退导航 -->
10   - <back-box class="back-box" :style="'padding-top: ' + $parent.top.value + 'px'" ref="backBox" v-if="isCNLive.value && $route.query.showBack == true" @back="back"
  10 + <back-search-box class="back-search-box" :style="'padding-top: ' + $parent.top.value + 'px'" ref="backBox" v-if="!isWeChat.value && showSearch" @back="back" @toSearch="toSearch"
11 11 :backs="backs">
12   - </back-box>
  12 + </back-search-box>
  13 +
  14 + <!-- 后退导航 -->
  15 + <!-- <back-box class="back-box" :style="'padding-top: ' + $parent.top.value + 'px'" ref="backBox" v-if="isCNLive.value && $route.query.showBack == true" @back="back"
  16 + :backs="backs">
  17 + </back-box> -->
13 18  
14 19 <!-- pl -->
15   - <div class="pl" :class="{'is-cnlive': isCNLive.value && $route.query.showBack == true, 'is-open-app': $parent.isOpenApp.value}"></div>
  20 + <div class="pl" :class="{'is-cnlive': !isWeChat.value, 'is-open-app': $parent.isOpenApp.value}" v-if="showSearch"></div>
16 21  
17 22 <!-- 主区域 -->
18 23 <div class="main-box">
19 24  
  25 + <!-- 主Banner -->
  26 + <div class="section banner-box" v-if="swipers && swipers.length">
  27 + <swiper-box
  28 + :swipers="swipers"
  29 + :options="{
  30 + showIndicators: true
  31 + }">
  32 + </swiper-box>
  33 + </div>
  34 +
  35 + <!-- 其它频道 -->
  36 + <div class="section page-list" v-if="swiperNavs && showNavs">
  37 +
  38 + <!-- 轮播展示其它频道 -->
  39 + <icon-swiper-box @jump="toPage"
  40 + :icons="swiperNavs">
  41 + </icon-swiper-box>
  42 + </div>
  43 +
20 44 <!-- 折扣专区 -->
21   - <div class="section shop-list" v-if="discountLists && discountLists.length">
  45 +
  46 + <!-- 折扣专区/积分商城 -->
  47 + <div class="section-col-2" v-if="showIntegral && pointsLists && pointsLists.length">
  48 +
  49 + <!-- 折扣专区 -->
  50 + <div class="section-2 shop-list" v-if="discountLists && discountLists.length">
  51 +
  52 + <!-- 标题 -->
  53 + <text-bg-title-com @more="toDiscountList"
  54 + :titles="{
  55 + bg: 'static/img/text_bg_title_bg_3.png'
  56 + }">
  57 +
  58 + <!-- 倒计时组件 -->
  59 + <count-down-com slot="extend" v-if="discountTime && discountTime > 0 && discountType == '1'"
  60 + :time="parseInt(discountTime) * 1000"
  61 + sty="4"
  62 + type='h'>
  63 + </count-down-com>
  64 + </text-bg-title-com>
  65 +
  66 + <!-- 商品列表 -->
  67 + <div class="list-box">
  68 +
  69 + <!-- 商品展示样式 10 -->
  70 + <goods-item-10 class="item" v-for="(item, index) in discountLists" :key="index" @jump="toDiscountList(item)"
  71 + :item="item"
  72 + pid="1">
  73 +
  74 + <!-- 折扣角标 -->
  75 + <div class="discount-flag" slot="flag" v-if="parseFloat(item.price) < parseFloat(item.prices)">
  76 + {{item.tag || getDiscount(item.price, item.prices)}}
  77 + </div>
  78 + </goods-item-10>
  79 + </div>
  80 + </div>
  81 +
  82 + <!-- 积分商城 -->
  83 + <div class="section-2 shop-list" ref="integralMallBox" v-if="showIntegral && pointsLists && pointsLists.length">
  84 +
  85 + <!-- 标题 -->
  86 + <text-bg-title-com
  87 + :titles="{
  88 + bg: 'static/img/text_bg_title_bg_4.png'
  89 + }">
  90 + </text-bg-title-com>
  91 +
  92 + <!-- 商品列表 -->
  93 + <div class="list-box">
  94 +
  95 + <!-- 商品展示样式 10 -->
  96 + <goods-item-10 class="item" v-for="(item, index) in pointsLists" :key="index" @jump="pointsMore"
  97 + :item="item"
  98 + pid="2">
  99 + </goods-item-10>
  100 + </div>
  101 + </div>
  102 + </div>
  103 +
  104 + <div class="section shop-list" v-else-if="discountLists && discountLists.length">
22 105  
23 106 <!-- 标题 -->
24 107 <text-bg-title-com @more="toDiscountList"
... ... @@ -60,84 +143,108 @@
60 143 </div> -->
61 144  
62 145 <!-- 积分商城 -->
63   - <div class="section shop-list" ref="integralMallBox" v-if="showIntegral && pointsLists && pointsLists.length">
  146 + <!-- <div class="section shop-list" ref="integralMallBox" v-if="showIntegral && pointsLists && pointsLists.length"> -->
64 147  
65 148 <!-- 标题 -->
66   - <text-bg-title-com
  149 + <!-- <text-bg-title-com
67 150 :titles="{
68   - bg: 'static/img/text_bg_title_bg_2.png'
  151 + bg: 'static/img/text_bg_title_bg_4.png'
69 152 }">
70   - </text-bg-title-com>
  153 + </text-bg-title-com> -->
71 154  
72 155 <!-- 商品列表 -->
73   - <div class="list-box">
  156 + <!-- <div class="list-box"> -->
74 157  
75 158 <!-- 商品展示样式 2 -->
76   - <goods-item-2 class="item" v-for="(item, index) in pointsLists" :key="index" @jump="pointsMore"
  159 + <!-- <goods-item-2 class="item" v-for="(item, index) in pointsLists" :key="index" @jump="pointsMore"
77 160 :item="item"
78 161 pid="5">
79 162 </goods-item-2>
80   - </div>
  163 + </div> -->
81 164  
82 165 <!-- 积分展示 -->
83   - <more-com class="points-box" @more="pointsMore"
  166 + <!-- <more-com class="points-box" @more="pointsMore"
84 167 :mores="points">
85 168 </more-com>
86   - </div>
  169 + </div> -->
87 170  
88 171 <!-- 品质优选 -->
89   - <div class="shop-list-box" ref="optimizationBox" v-if="quality && quality.length">
  172 + <!-- <div class="shop-list-box" ref="optimizationBox" v-if="quality && quality.length">
90 173  
91   - <div class="section shop-list" v-for="(items, index) in quality" :key="index" @click="toOptimizationList(items)">
  174 + <div class="section shop-list" v-for="(items, index) in quality" :key="index" @click="toOptimizationList(items)"> -->
92 175  
93 176 <!-- 头图 -->
94   - <div class="header-img-box">
  177 + <!-- <div class="header-img-box">
95 178 <img :src="items.header_img + SIGN.BIG" class="header-img" />
96   - </div>
  179 + </div> -->
97 180  
98 181 <!-- 商品列表 -->
99   - <div class="list-box">
  182 + <!-- <div class="list-box"> -->
100 183  
101 184 <!-- 商品展示样式 2 -->
102   - <goods-item-2 class="item" v-for="(item, i) in items.list" :key="i"
  185 + <!-- <goods-item-2 class="item" v-for="(item, i) in items.list" :key="i"
103 186 :item="item"
104 187 pid="1">
105 188 </goods-item-2>
106 189 </div>
107 190 </div>
108   - </div>
  191 + </div> -->
109 192  
110 193 <!-- 热销排行 -->
111   - <div class="section hot-box" ref="hotBox" @click="toHotSaleList">
  194 + <!-- <div class="section hot-box" ref="hotBox" @click="toHotSaleList"> -->
112 195  
113 196 <!-- 3D轮播 -->
114   - <swiper-3d-com @onMainSlideClick="toHotSaleList"
  197 + <!-- <swiper-3d-com @onMainSlideClick="toHotSaleList"
115 198 :items="sales"
116 199 :options="salesOptions">
117 200 </swiper-3d-com>
  201 + </div> -->
  202 +
  203 + <!-- 热销排行 -->
  204 + <div class="section hot-box" ref="hotBox" v-if="sales && sales.length" @click="toHotSaleList">
  205 +
  206 + <!-- 商品样式 2 滑动 -->
  207 + <horiz-list class="components-box"
  208 + :lists="sales"
  209 + com="10"
  210 + pid="1">
  211 +
  212 + <!-- 标题 -->
  213 + <text-bg-title-com slot="title-box"
  214 + :titles="{
  215 + bg: 'static/img/text_bg_title_bg_5.png',
  216 + more: true
  217 + }">
  218 + </text-bg-title-com>
  219 + </horiz-list>
118 220 </div>
119 221  
120 222 <!-- 猜你喜欢 -->
121   - <div class="section goods-list" ref="guessLikeBox">
  223 + <!-- <div class="section goods-list" ref="guessLikeBox"> -->
122 224  
123 225 <!-- 标题 -->
124   - <text-title-box @more='changeGoods'
  226 + <!-- <text-title-box @more='changeGoods'
125 227 :titles="{
126 228 title: '猜你喜欢',
127 229 more: true,
128 230 moreText: '换一组',
129 231 icon: 'static/img/icon_refresh.png'
130 232 }">
131   - </text-title-box>
  233 + </text-title-box> -->
132 234  
133 235 <!-- 商品样式 7 列表 -->
134   - <column-list-box class="column-list-box" v-if="likeLists && likeLists.list && likeLists.list.length && likeLists.list[likeNum] && likeLists.list[likeNum].length" @jump="toDetail" @primary="primary"
  236 + <!-- <column-list-box class="column-list-box" v-if="likeLists && likeLists.list && likeLists.list.length && likeLists.list[likeNum] && likeLists.list[likeNum].length" @jump="toDetail" @primary="primary"
135 237 :lists="likeLists.list[likeNum]"
136 238 com="7">
137 239 </column-list-box>
  240 + </div> -->
  241 +
  242 + <!-- 副Banner -->
  243 + <div class="section sub-banner-box" v-if="subBanner">
  244 + <img :src="subBanner.simg" class="sub-banner-img" @click="toBanner(subBanner)" />
138 245 </div>
139 246  
140   - <!-- 推荐（瀑布流） -->
  247 + <!-- 好物推荐（瀑布流） -->
141 248 <div class="section goods-list">
142 249  
143 250 <!-- 上拉加载 -->
... ... @@ -146,7 +253,7 @@
146 253 <!-- 标题 -->
147 254 <text-title-box
148 255 :titles="{
149   - title: '推荐'
  256 + title: '好物推荐'
150 257 }">
151 258 </text-title-box>
152 259  
... ... @@ -174,11 +281,16 @@
174 281 import { List } from "vant";
175 282 import callAppBox from "@/components/callAppBox/callAppBox";
176 283 import backBox from "@/components/backBox/backBox";
  284 + import backSearchBox from "@/components/backSearchBox/backSearchBox";
  285 + import swiperBox from "@/components/swiper/swiper";
  286 + import iconSwiperBox from "@/components/iconSwiperBox/iconSwiperBox";
177 287 import textBgTitleCom from "@/components/textBgTitleCom/textBgTitleCom";
178 288 import countDownCom from "@/components/countDownCom/countDownCom";
179 289 import goodsItem2 from "@/components/goodsItem_2/goodsItem_2";
  290 + import goodsItem10 from "@/components/goodsItem_10/goodsItem_10";
180 291 import iconsCom from "@/components/iconsCom/iconsCom";
181 292 import swiper3dCom from "@/components/swiper3dCom/swiper3dCom";
  293 + import horizList from "@/components/horizList/horizList";
182 294 import moreCom from "@/components/moreCom/moreCom";
183 295 import textTitleBox from "@/components/textTitleBox/textTitleBox";
184 296 import columnListBox from "@/components/columnListBox/columnListBox";
... ... @@ -192,6 +304,8 @@
192 304 return {
193 305 title: "", // 标题
194 306 backs: null, // 后退按钮组
  307 + swipers: null, // 主Banner
  308 + swiperNavs: null, // 其它频道列表
195 309 navs: null, // 导航
196 310 discountType: null, // 折扣专区状态，0：未开始；1：进行中；2：已结束
197 311 discountTimeout: 0, // 倒计时超时时间计数
... ... @@ -200,11 +314,14 @@
200 314 quality: null, // 品质优选
201 315 salesOptions: null, // 热销排行选项
202 316 sales: null, // 热销排行数据
  317 + showSearch: false, // 是否显示搜索，默认不显示
  318 + showNavs: false, // 是否显示其它频道跳转，默认不显示
203 319 showIntegral: false, // 是否显示积分商城模块，默认不显示
204 320 points: null, // 用户积分
205 321 pointsLists: null, // 积分商城数据
206 322 likeLists: null, // 猜你喜欢列表
207 323 likeNum: 0, // 猜你喜欢二维数组当前显示的下标
  324 + subBanner: null, // 副Banner
208 325 shopGoodsLists: { // 推荐商品瀑布流
209 326 loading: false,
210 327 loadingNow: false,
... ... @@ -245,11 +362,16 @@
245 362 components: {
246 363 callAppBox,
247 364 backBox,
  365 + backSearchBox,
  366 + swiperBox,
  367 + iconSwiperBox,
248 368 textBgTitleCom,
249 369 countDownCom,
250 370 goodsItem2,
  371 + goodsItem10,
251 372 iconsCom,
252 373 swiper3dCom,
  374 + horizList,
253 375 moreCom,
254 376 textTitleBox,
255 377 columnListBox,
... ... @@ -261,7 +383,7 @@
261 383 this.$set(this, "title", "优选");
262 384  
263 385 // 判断是否在App内
264   - if (this.isCNLive.value) {
  386 + // if (this.isCNLive.value) {
265 387  
266 388 // 添加后退按钮组“后退”和“分享”按钮
267 389 this.$set(this, 'backs', {
... ... @@ -270,6 +392,9 @@
270 392 back: {
271 393 icon: "static/img/icon_back.png"
272 394 },
  395 + search: {
  396 + text: '请输入你要搜索的商品'
  397 + },
273 398 funcArray: [
274 399 {
275 400 icon: "static/img/icon_share.png",
... ... @@ -278,7 +403,7 @@
278 403 ]
279 404 }
280 405 });
281   - }
  406 + // }
282 407  
283 408 // 优选页面接口
284 409 this.index();
... ... @@ -322,6 +447,65 @@
322 447 moreText: '查看更多',
323 448 icon: 'static/img/icon_more_arrow_right.png'
324 449 });
  450 +
  451 +
  452 +
  453 +
  454 +
  455 +
  456 +
  457 + // 临时，主banner数据
  458 + this.$set(this, 'swipers', [
  459 + {
  460 + simg: 'http://wjjtest.ys2.cnliveimg.com/802/shop/img/2021/02/02/image1612245250790582774.jpg?imageMogr2/thumbnail/200/format/jpg'
  461 + },
  462 + {
  463 + simg: 'http://wjjseller.cnlive.com/uploads/780f7a0d12e152d5e35b3fff29bab5d2.jpg?imageMogr2/thumbnail/200/format/jpg'
  464 + },
  465 + {
  466 + simg: 'https://wjjtest.ys2.cnliveimg.com/802/shop/img/2019/12/13/5df26e0504e2f.jpg?imageMogr2/thumbnail/200/format/jpg'
  467 + }
  468 + ]);
  469 +
  470 +
  471 +
  472 +
  473 + // 临时，其它频道列表数据
  474 + this.$set(this, 'swiperNavs', [
  475 + [
  476 + {
  477 + logo: 'http://wjjtest.ys2.cnliveimg.com/802/shop/img/2020/05/14/image1589436270199176498.jpg',
  478 + title: '网家家自营'
  479 + },
  480 + {
  481 + simg: 'http://wjjtest.ys2.cnliveimg.com/802/shop/img/2019/01/04/5c2f1d6094223.jpg',
  482 + title: '环球优物'
  483 + },
  484 + {
  485 + logo: 'https://wjjtest.ys2.cnliveimg.com/802/shop/img/2019/04/20/5cbab33c82a82.png',
  486 + title: '李宁旗舰店'
  487 + },
  488 + {
  489 + simg: 'https://wjjtest.ys2.cnliveimg.com/802/shop/img/2019/04/28/5cc53a6e07e67.jpg',
  490 + title: '扶贫精品'
  491 + }
  492 + ]
  493 + ]);
  494 +
  495 +
  496 +
  497 +
  498 +
  499 +
  500 + // 临时，副Banner
  501 + this.$set(this, 'subBanner', {
  502 + simg: 'https://img13.360buyimg.com/cms/jfs/t1/134990/3/16382/148271/5fb61708E49ceefbd/9356c854f878dbc0.jpg?imageMogr2/thumbnail/400/format/jpg'
  503 + });
  504 +
  505 +
  506 +
  507 +
  508 +
325 509 },
326 510 methods: {
327 511  
... ... @@ -425,33 +609,54 @@
425 609 this.$set(this, 'sales', datas.sale);
426 610 }
427 611  
  612 + // 判断在App内
  613 + if (this.isCNLive.value) {
  614 +
  615 + // 判断App版本，判断是否显示积分商城模块
  616 + if (typeof this.$parent.compareVersion === 'function') {
  617 +
  618 + // 获取平台版本
  619 + let version = this.$route.query.version;
  620 +
  621 + // 根据平台，判断是否符合版本，显示搜索和其它导航菜单
  622 + if ((this.isiPhone.value && this.$parent.compareVersion(version, '1.9.6')) || (this.isAndroid.value && this.$parent.compareVersion(version, '1.8.3.1'))) {
  623 +
  624 + // 设置显示搜索和其它导航菜单模块
  625 + this.$set(this, 'showSearch', true);
  626 + this.$set(this, 'showNavs', true);
  627 + }
  628 +
  629 + // 根据平台，判断是否符合版本，显示积分商城
  630 + if ((this.isiPhone.value && this.$parent.compareVersion(version, '1.9.1')) || (this.isAndroid.value && this.$parent.compareVersion(version, '1.7.3.3'))) {
  631 +
  632 + // 设置显示积分商城模块
  633 + this.$set(this, 'showIntegral', true);
  634 + }
  635 + }
  636 + }
  637 +
428 638 // 设置用户积分
429 639 this.$set(this.points, 'value', datas.grade);
430 640  
431 641 // 判断是否有积分商城
432 642 if (datas.integral_goods && datas.integral_goods.length) {
433 643  
  644 + // 如果需要展示积分商城，并且折扣专区商品数量大于2，重新设置折扣专区模块商品数量
  645 + if (this.showIntegral && this.discountLists.length > 2) {
434 646  
435   - // 判断在App内
436   - if (this.isCNLive.value) {
  647 + // 设置折扣专区模块产品数量为2个
  648 + this.$set(this, 'discountLists', [this.discountLists[0], this.discountLists[1]]);
  649 + }
437 650  
438   - // 判断App版本，判断是否显示积分商城模块
439   - if (typeof this.$parent.compareVersion === 'function') {
  651 + // 积分商城数据
  652 + this.$set(this, 'pointsLists', datas.integral_goods);
440 653  
441   - // 获取平台版本
442   - let version = this.$route.query.version;
  654 + // 判断积分商城模块数据大于2，只显示2个
  655 + if (this.pointsLists.length > 2) {
443 656  
444   - // 根据平台，判断是否符合版本
445   - if ((this.isiPhone.value && this.$parent.compareVersion(version, '1.9.1')) || (this.isAndroid.value && this.$parent.compareVersion(version, '1.7.3.3'))) {
446   -
447   - // 设置显示积分商城模块
448   - this.$set(this, 'showIntegral', true);
449   - }
450   - }
  657 + // 设置积分商城模块产品数量为2个
  658 + this.$set(this, 'pointsLists', [datas.integral_goods[0], datas.integral_goods[1]]);
451 659 }
452   -
453   - // 热销排行数据
454   - this.$set(this, 'pointsLists', datas.integral_goods);
455 660 } else {
456 661  
457 662 // 判断是否有积分商城
... ... @@ -465,6 +670,9 @@
465 670 break;
466 671 }
467 672 }
  673 +
  674 + // 设置隐藏积分商城模块
  675 + this.$set(this, 'showIntegral', false);
468 676 }
469 677  
470 678 // 判断是否有猜你喜欢
... ... @@ -563,6 +771,32 @@
563 771 },
564 772  
565 773 /**
  774 + * 跳转到其它模块
  775 + * @param {Object} item [通用跳转对象]
  776 + */
  777 + toPage(item) {
  778 +
  779 +
  780 + console.log('toPage', item);
  781 +
  782 +
  783 +
  784 + },
  785 +
  786 + /**
  787 + * Banner跳转
  788 + * @param {Object} item [跳转对象]
  789 + */
  790 + toBanner(item) {
  791 +
  792 +
  793 + console.log('toBanner', item);
  794 +
  795 +
  796 +
  797 + },
  798 +
  799 + /**
566 800 * 跳转折扣专区列表
567 801 * @param {Object} item [通用跳转对象]
568 802 */
... ... @@ -742,6 +976,26 @@
742 976 },
743 977  
744 978 /**
  979 + * 跳转搜索页面
  980 + */
  981 + toSearch() {
  982 +
  983 + // 跳转搜索页面（跳转封装）
  984 + if (typeof this.$parent.gotoDetail === 'function') {
  985 +
  986 + // 设置跳转参数
  987 + let params = {
  988 + type: '5',
  989 + to: window.location.origin + window.location.pathname + '#/search',
  990 + shop_type: ''
  991 + };
  992 +
  993 + // 页面跳转
  994 + this.$parent.gotoDetail(params);
  995 + }
  996 + },
  997 +
  998 + /**
745 999 * 分享
746 1000 */
747 1001 toShare() {
... ...
src/pages/search/search.less
  View file @7779061
... ... @@ -22,6 +22,15 @@
22 22 height: 14px;
23 23 }
24 24 }
  25 + .no-more {
  26 + padding: 30px 0;
  27 + color: #9B9B9B;
  28 + font-size: 26px;
  29 + font-weight: 400;
  30 + line-height: 37px;
  31 + text-align: center;
  32 + border-top: 1px solid #F2F2F2;
  33 + }
25 34 }
26 35 }
27 36 }
... ...
src/pages/search/search.vue
  View file @7779061
... ... @@ -53,6 +53,11 @@
53 53 :titles="titles.food">
54 54 </text-title-box>
55 55 </list-com>
  56 +
  57 + <!-- 显示没有更多了 -->
  58 + <div class="no-more" v-if="paging.finished">
  59 + 没有更多了～
  60 + </div>
56 61 </div>
57 62 </div>
58 63  
... ... @@ -88,11 +93,13 @@
88 93 paging: { // 分页参数，点击更多时需要用到
89 94 loading: true,
90 95 page: 0,
91   - distance: 50
  96 + distance: 50,
  97 + finished: false // 记载完成，显示没有更多了
92 98 },
93 99 searchs: { // 搜索组件配置参数
94 100 backgroundColor: "#FAFBFD",
95   - borderColor: "#FC1541"
  101 + borderColor: "#FC1541",
  102 + pl: '请输入您要搜索的商品/店铺'
96 103 },
97 104 coordinate: { // 经纬度定位参数
98 105 longitude: 0,
... ... @@ -103,17 +110,20 @@
103 110 goods: {
104 111 title: "",
105 112 more: false,
106   - style: '2'
  113 + style: '3',
  114 + icon: 'static/img/icon_more_arrow_right_type_3.png'
107 115 },
108 116 daren: {
109 117 title: "",
110 118 more: false,
111   - style: '2'
  119 + style: '3',
  120 + icon: 'static/img/icon_more_arrow_right_type_3.png'
112 121 },
113 122 food: {
114 123 title: "",
115 124 more: false,
116   - style: '2'
  125 + style: '3',
  126 + icon: 'static/img/icon_more_arrow_right_type_3.png'
117 127 }
118 128 },
119 129 goodsLists: { // 商品数据
... ... @@ -154,8 +164,12 @@
154 164 */
155 165 loadMore() {
156 166  
157   - // 调用更多函数，处理loadMore逻辑
158   - this.more();
  167 + // 判断是否完成，如果完成就不再加载
  168 + if (!this.paging.finished) {
  169 +
  170 + // 调用更多函数，处理loadMore逻辑
  171 + this.more();
  172 + }
159 173 },
160 174  
161 175 /**
... ... @@ -497,6 +511,9 @@
497 511  
498 512 // 没有需要加载的内容，停止上拉加载
499 513 this.$set(this.paging, "loading", true);
  514 +
  515 + // 加载完成，显示没有更多了
  516 + this.$set(this.paging, 'finished', true);
500 517 }
501 518 break;
502 519 case this.displayPage.status.DAREN: // 达人搜素
... ... @@ -520,6 +537,9 @@
520 537  
521 538 // 没有需要加载的内容，停止上拉加载
522 539 this.$set(this.paging, "loading", true);
  540 +
  541 + // 加载完成，显示没有更多了
  542 + this.$set(this.paging, 'finished', true);
523 543 }
524 544 break;
525 545 case this.displayPage.status.FOOD: // 美食搜素
... ... @@ -544,6 +564,9 @@
544 564  
545 565 // 没有需要加载的内容，停止上拉加载
546 566 this.$set(this.paging, "loading", true);
  567 +
  568 + // 加载完成，显示没有更多了
  569 + this.$set(this.paging, 'finished', true);
547 570 }
548 571 break;
549 572 }
... ...
static/img/icon_more_arrow_right_type_3.png 0 → 100644
View file @7779061

146 Bytes
static/img/text_bg_title_bg_3.png 0 → 100644
View file @7779061

9.01 KB
static/img/text_bg_title_bg_4.png 0 → 100644
View file @7779061

12.5 KB
static/img/text_bg_title_bg_5.png 0 → 100644
View file @7779061

15.4 KB