Authored by 郭成尧

'店铺头部调整结束'

@@ -72,6 +72,7 @@ @@ -72,6 +72,7 @@
72 des: shareSubTitle, 72 des: shareSubTitle,
73 url: '/product/shop-share?domain=' + this.domain, 73 url: '/product/shop-share?domain=' + this.domain,
74 img: result.brandBg, 74 img: result.brandBg,
  75 + isBlkShop: result.isBlkShop,
75 shopId: result.shopId, // 不是分享的参数,收藏店铺使用 76 shopId: result.shopId, // 不是分享的参数,收藏店铺使用
76 isFav: result.isFav // 不是分享的参数,收藏店铺使用 77 isFav: result.isFav // 不是分享的参数,收藏店铺使用
77 }; 78 };
1 <template> 1 <template>
2 - <div v-if="shopInfo.isBlkShop" class="brand-top-box" v-bind:style="{ 'background-image': `url(${shopInfo.brandBg})` }"> 2 + <div v-if="shopInfo.isBlkShop" class="brand-top-box" v-lazy:background-image="shopInfo.brandBg | resize 750 478">
3 <div class="brand-bottom"> 3 <div class="brand-bottom">
4 <img v-if="shopInfo.brandLogo" v-lazy="shopInfo.brandLogo | resize 80 80" alt="{{ shopInfo.brandName }}"> 4 <img v-if="shopInfo.brandLogo" v-lazy="shopInfo.brandLogo | resize 80 80" alt="{{ shopInfo.brandName }}">
5 <div v-else class="brand-title">{{ shopInfo.brandName }}</div> 5 <div v-else class="brand-title">{{ shopInfo.brandName }}</div>
1 <template> 1 <template>
2 - <div class="top-box clearfix" v-bind:class='{"top-box-left" : this.$parent.$refs.filter.on}'> 2 + <div class="top-box clearfix" v-bind:class='{"top-box-left" : this.$parent.$refs.filter.isVisible,"top-change" : topChange }' v-infinite-scroll="changeTopStatus()">
3 <span class="icon back" @click="goBack()">&#xe606;</span> 3 <span class="icon back" @click="goBack()">&#xe606;</span>
4 <div class="right"> 4 <div class="right">
5 - <span v-if="shareData.isFav" class="icon" @click="collectShop()">&#xe60d;</span>  
6 - <span v-else class="icon" @click="collectShop()">&#xe60c;</span>  
7 - <span class="icon" @click="goShare()">&#xe60e;</span> 5 + <span v-if="shareData.isBlkShop" v-show="shareData.isFav" class="icon" @click="collectShop()">&#xe60d;</span>
  6 + <span v-if="shareData.isBlkShop" v-show="!shareData.isFav" class="icon" @click="collectShop()">&#xe60c;</span>
  7 + <span v-if="shareData.isBlkShop" class="icon" @click="goShare()">&#xe60e;</span>
8 <span class="icon" @click="showFilter()">&#xe60b;</span> 8 <span class="icon" @click="showFilter()">&#xe60b;</span>
9 </div> 9 </div>
10 </div> 10 </div>
@@ -13,8 +13,8 @@ @@ -13,8 +13,8 @@
13 <style> 13 <style>
14 .top-box { 14 .top-box {
15 width: 100%; 15 width: 100%;
16 - height: 60px;  
17 - padding: 0 20px; 16 + height: 80px;
  17 + padding: 10px 20px;
18 position: fixed; 18 position: fixed;
19 top: 60px; 19 top: 60px;
20 left: 0; 20 left: 0;
@@ -45,6 +45,14 @@ @@ -45,6 +45,14 @@
45 .top-box-left { 45 .top-box-left {
46 left: -655px; 46 left: -655px;
47 } 47 }
  48 +
  49 + .top-change {
  50 + background-color: #fff;
  51 + color: #000;
  52 + height: 140px;
  53 + top: 0;
  54 + padding: 70px 20px 10px;
  55 + }
48 </style> 56 </style>
49 57
50 <script> 58 <script>
@@ -53,6 +61,11 @@ @@ -53,6 +61,11 @@
53 const tip = require('common/tip'); 61 const tip = require('common/tip');
54 62
55 module.exports = { 63 module.exports = {
  64 + data() {
  65 + return {
  66 + topChange: false
  67 + };
  68 + },
56 props: { 69 props: {
57 shareData: { 70 shareData: {
58 type: Object 71 type: Object
@@ -91,6 +104,15 @@ @@ -91,6 +104,15 @@
91 }, 104 },
92 showFilter() { 105 showFilter() {
93 this.$parent.$refs.filter.isVisible = !this.$parent.$refs.filter.isVisible; 106 this.$parent.$refs.filter.isVisible = !this.$parent.$refs.filter.isVisible;
  107 + },
  108 + changeTopStatus() {
  109 + let topHeight = document.body.scrollTop;
  110 +
  111 + if (topHeight > 100) {
  112 + this.topChange = true;
  113 + } else {
  114 + this.topChange = false;
  115 + }
94 } 116 }
95 } 117 }
96 }; 118 };