Merge branch 'develop' into release/1.0
Showing
8 changed files
with
41 additions
and
39 deletions
| @@ -36,7 +36,7 @@ | @@ -36,7 +36,7 @@ | ||
| 36 | right: 0; | 36 | right: 0; |
| 37 | left: 0; | 37 | left: 0; |
| 38 | z-index: 210; | 38 | z-index: 210; |
| 39 | - padding: 20px 30px; | 39 | + padding: 20px 34px; |
| 40 | height: 70px; | 40 | height: 70px; |
| 41 | max-width: 750px; | 41 | max-width: 750px; |
| 42 | margin-left: auto; | 42 | margin-left: auto; |
| @@ -44,6 +44,7 @@ | @@ -44,6 +44,7 @@ | ||
| 44 | line-height: 70px; | 44 | line-height: 70px; |
| 45 | font-size: 48px; | 45 | font-size: 48px; |
| 46 | background-color: #fff; | 46 | background-color: #fff; |
| 47 | + border-bottom: 1px solid #eee; | ||
| 47 | color: #000; | 48 | color: #000; |
| 48 | 49 | ||
| 49 | .icon, | 50 | .icon, |
| @@ -57,6 +58,7 @@ | @@ -57,6 +58,7 @@ | ||
| 57 | text-align: center; | 58 | text-align: center; |
| 58 | margin-left: auto; | 59 | margin-left: auto; |
| 59 | margin-right: auto; | 60 | margin-right: auto; |
| 61 | + font-size: 42px; | ||
| 60 | overflow: hidden; | 62 | overflow: hidden; |
| 61 | white-space: nowrap; | 63 | white-space: nowrap; |
| 62 | text-overflow: ellipsis; | 64 | text-overflow: ellipsis; |
| @@ -68,14 +70,10 @@ | @@ -68,14 +70,10 @@ | ||
| 68 | 70 | ||
| 69 | .blk-header-right { | 71 | .blk-header-right { |
| 70 | float: right; | 72 | float: right; |
| 71 | - | ||
| 72 | - .icon { | ||
| 73 | - margin-left: 30px; | ||
| 74 | - } | ||
| 75 | } | 73 | } |
| 76 | 74 | ||
| 77 | .blk-header-gap { | 75 | .blk-header-gap { |
| 78 | - height: 100px; | 76 | + height: calc(70 + 20 * 2 + 1)px; |
| 79 | background-color: transparent; | 77 | background-color: transparent; |
| 80 | } | 78 | } |
| 81 | 79 | ||
| @@ -85,7 +83,7 @@ | @@ -85,7 +83,7 @@ | ||
| 85 | } | 83 | } |
| 86 | 84 | ||
| 87 | .blk-header-gap { | 85 | .blk-header-gap { |
| 88 | - height: calc(70 + 60 + 10)px; | 86 | + height: calc(70 + 20 * 2 + 40 + 1)px; |
| 89 | } | 87 | } |
| 90 | } | 88 | } |
| 91 | </style> | 89 | </style> |
| @@ -11,8 +11,10 @@ | @@ -11,8 +11,10 @@ | ||
| 11 | <h2 class="card-label"> | 11 | <h2 class="card-label"> |
| 12 | <a href="{{item | goodsUrl}}" class="line-clamp-2">{{item.productName}}</a> | 12 | <a href="{{item | goodsUrl}}" class="line-clamp-2">{{item.productName}}</a> |
| 13 | </h2> | 13 | </h2> |
| 14 | - <span class="good-price" :class="{'old-price': item.marketPrice}" v-if="item.marketPrice">¥ {{item.marketPrice | toFixed}}</span> | ||
| 15 | - <span class="good-price" :class="{'sale-price': item.marketPrice}">¥ {{item.salesPrice | toFixed}}</span> | 14 | + <div class="good-price-box clearfix"> |
| 15 | + <span class="good-price" :class="{'old-price': item.marketPrice}" v-if="item.marketPrice">¥ {{item.marketPrice | toFixed}}</span> | ||
| 16 | + <span class="good-price" :class="{'sale-price': item.marketPrice}">¥ {{item.salesPrice | toFixed}}</span> | ||
| 17 | + </div> | ||
| 16 | </div> | 18 | </div> |
| 17 | </li> | 19 | </li> |
| 18 | </ul> | 20 | </ul> |
| @@ -73,13 +75,16 @@ | @@ -73,13 +75,16 @@ | ||
| 73 | float: left; | 75 | float: left; |
| 74 | width: 372px; | 76 | width: 372px; |
| 75 | margin-right: 6px; | 77 | margin-right: 6px; |
| 78 | + | ||
| 76 | &:nth-child(2n) { | 79 | &:nth-child(2n) { |
| 77 | margin-right: 0; | 80 | margin-right: 0; |
| 78 | } | 81 | } |
| 79 | } | 82 | } |
| 83 | + | ||
| 80 | .card-pic { | 84 | .card-pic { |
| 81 | width: 100%; | 85 | width: 100%; |
| 82 | height: 499px; | 86 | height: 499px; |
| 87 | + | ||
| 83 | a, | 88 | a, |
| 84 | img { | 89 | img { |
| 85 | display: block; | 90 | display: block; |
| @@ -87,6 +92,7 @@ | @@ -87,6 +92,7 @@ | ||
| 87 | height: 100%; | 92 | height: 100%; |
| 88 | } | 93 | } |
| 89 | } | 94 | } |
| 95 | + | ||
| 90 | .card-bd { | 96 | .card-bd { |
| 91 | min-height: 180px; | 97 | min-height: 180px; |
| 92 | margin-left: 30px; | 98 | margin-left: 30px; |
| @@ -95,6 +101,7 @@ | @@ -95,6 +101,7 @@ | ||
| 95 | text-align: center; | 101 | text-align: center; |
| 96 | font-size: 24px; | 102 | font-size: 24px; |
| 97 | } | 103 | } |
| 104 | + | ||
| 98 | .card-label { | 105 | .card-label { |
| 99 | margin: 0 0 10px; | 106 | margin: 0 0 10px; |
| 100 | font-size: 24px; | 107 | font-size: 24px; |
| @@ -103,17 +110,21 @@ | @@ -103,17 +110,21 @@ | ||
| 103 | } | 110 | } |
| 104 | } | 111 | } |
| 105 | 112 | ||
| 113 | + .good-price-box { | ||
| 114 | + white-space: nowrap; | ||
| 115 | + } | ||
| 116 | + | ||
| 106 | .good-price { | 117 | .good-price { |
| 118 | + display: inline-block; | ||
| 119 | + width: 50%; | ||
| 107 | color: #b0b0b0; | 120 | color: #b0b0b0; |
| 108 | - margin-right: 10px; | ||
| 109 | - &:last-of-type { | ||
| 110 | - margin-right: 0; | ||
| 111 | - } | 121 | + |
| 112 | &.old-price { | 122 | &.old-price { |
| 113 | text-decoration: line-through; | 123 | text-decoration: line-through; |
| 114 | } | 124 | } |
| 125 | + | ||
| 115 | &.sale-price { | 126 | &.sale-price { |
| 116 | - color: $red; | 127 | + color: #d0021b; |
| 117 | } | 128 | } |
| 118 | } | 129 | } |
| 119 | 130 | ||
| @@ -122,6 +133,7 @@ | @@ -122,6 +133,7 @@ | ||
| 122 | margin-top: 380px; | 133 | margin-top: 380px; |
| 123 | color: #b0b0b0; | 134 | color: #b0b0b0; |
| 124 | text-align: center; | 135 | text-align: center; |
| 136 | + | ||
| 125 | .icon-search { | 137 | .icon-search { |
| 126 | display: inline-block; | 138 | display: inline-block; |
| 127 | font-size: 200px; | 139 | font-size: 200px; |
| @@ -51,6 +51,7 @@ module.exports = { | @@ -51,6 +51,7 @@ module.exports = { | ||
| 51 | margin: 0; | 51 | margin: 0; |
| 52 | padding: 25px 0; | 52 | padding: 25px 0; |
| 53 | color: $grey; | 53 | color: $grey; |
| 54 | + background-color: #fff; | ||
| 54 | } | 55 | } |
| 55 | 56 | ||
| 56 | .order-item { | 57 | .order-item { |
| @@ -59,6 +60,7 @@ module.exports = { | @@ -59,6 +60,7 @@ module.exports = { | ||
| 59 | width: 25%; | 60 | width: 25%; |
| 60 | float: left; | 61 | float: left; |
| 61 | text-align: center; | 62 | text-align: center; |
| 63 | + | ||
| 62 | &:after { | 64 | &:after { |
| 63 | content: "|"; | 65 | content: "|"; |
| 64 | position: absolute; | 66 | position: absolute; |
| @@ -66,12 +68,15 @@ module.exports = { | @@ -66,12 +68,15 @@ module.exports = { | ||
| 66 | color: $grey; | 68 | color: $grey; |
| 67 | font-size: 28px; | 69 | font-size: 28px; |
| 68 | } | 70 | } |
| 71 | + | ||
| 69 | &:last-of-type:after { | 72 | &:last-of-type:after { |
| 70 | display: none; | 73 | display: none; |
| 71 | } | 74 | } |
| 75 | + | ||
| 72 | .order-name { | 76 | .order-name { |
| 73 | font-size: 28px; | 77 | font-size: 28px; |
| 74 | } | 78 | } |
| 79 | + | ||
| 75 | .order-icon { | 80 | .order-icon { |
| 76 | position: relative; | 81 | position: relative; |
| 77 | margin-left: 10px; | 82 | margin-left: 10px; |
| @@ -82,6 +87,7 @@ module.exports = { | @@ -82,6 +87,7 @@ module.exports = { | ||
| 82 | top: 0; | 87 | top: 0; |
| 83 | } | 88 | } |
| 84 | } | 89 | } |
| 90 | + | ||
| 85 | &.active { | 91 | &.active { |
| 86 | color: $black; | 92 | color: $black; |
| 87 | } | 93 | } |
| @@ -113,8 +113,12 @@ | @@ -113,8 +113,12 @@ | ||
| 113 | } else if (result.data.list.length > 0) { | 113 | } else if (result.data.list.length > 0) { |
| 114 | this.editorialList = result.data.list; | 114 | this.editorialList = result.data.list; |
| 115 | } | 115 | } |
| 116 | - this.page++; | ||
| 117 | - this.scrollDisabled = false; | 116 | + |
| 117 | + // 如果未加载完，继续翻页加载 | ||
| 118 | + if (result.data.list.length > 0) { | ||
| 119 | + this.page++; | ||
| 120 | + this.scrollDisabled = false; | ||
| 121 | + } | ||
| 118 | } else { | 122 | } else { |
| 119 | tip('没有了...'); | 123 | tip('没有了...'); |
| 120 | } | 124 | } |
| @@ -3,7 +3,6 @@ | @@ -3,7 +3,6 @@ | ||
| 3 | <cheader title="新品抢先看"> | 3 | <cheader title="新品抢先看"> |
| 4 | <i class="icon icon-filter" slot="right" @click="openFilter"></i> | 4 | <i class="icon icon-filter" slot="right" @click="openFilter"></i> |
| 5 | </cheader> | 5 | </cheader> |
| 6 | - <order :config="orderConfig" :val="order" v-if="enableOrder"></order> | ||
| 7 | <List :data="productList" :empty="empty"></List> | 6 | <List :data="productList" :empty="empty"></List> |
| 8 | <Filter :config="filterConfig" action="/product/list.json" v-ref:filter></Filter> | 7 | <Filter :config="filterConfig" action="/product/list.json" v-ref:filter></Filter> |
| 9 | </div> | 8 | </div> |
| @@ -17,7 +16,6 @@ | @@ -17,7 +16,6 @@ | ||
| 17 | const bus = require('common/vue-bus'); | 16 | const bus = require('common/vue-bus'); |
| 18 | const tip = require('common/tip'); | 17 | const tip = require('common/tip'); |
| 19 | const cheader = require('component/header.vue'); | 18 | const cheader = require('component/header.vue'); |
| 20 | - const order = require('component/product/order.vue'); | ||
| 21 | const list = require('component/product/list.vue'); | 19 | const list = require('component/product/list.vue'); |
| 22 | const filter = require('component/product/filter.vue'); | 20 | const filter = require('component/product/filter.vue'); |
| 23 | 21 | ||
| @@ -32,12 +30,10 @@ | @@ -32,12 +30,10 @@ | ||
| 32 | data: function() { | 30 | data: function() { |
| 33 | return { | 31 | return { |
| 34 | sortName: locationQuery.sort_name, | 32 | sortName: locationQuery.sort_name, |
| 35 | - orderConfig: [], | ||
| 36 | filterConfig: null, | 33 | filterConfig: null, |
| 37 | 34 | ||
| 38 | // query | 35 | // query |
| 39 | url: '/product/new.json', | 36 | url: '/product/new.json', |
| 40 | - order: '', | ||
| 41 | filter: {}, | 37 | filter: {}, |
| 42 | page: 0, // 未搜索 page=0; 全部加载完 page = totalPage; 无数据: page !=0 && productList.length=0 | 38 | page: 0, // 未搜索 page=0; 全部加载完 page = totalPage; 无数据: page !=0 && productList.length=0 |
| 43 | totalPage: null, | 39 | totalPage: null, |
| @@ -46,8 +42,7 @@ | @@ -46,8 +42,7 @@ | ||
| 46 | productList: [], | 42 | productList: [], |
| 47 | 43 | ||
| 48 | // state | 44 | // state |
| 49 | - inSearching: false, // 请求中 | ||
| 50 | - enableOrder: false | 45 | + inSearching: false // 请求中 |
| 51 | }; | 46 | }; |
| 52 | }, | 47 | }, |
| 53 | computed: { | 48 | computed: { |
| @@ -58,7 +53,6 @@ | @@ -58,7 +53,6 @@ | ||
| 58 | components: { | 53 | components: { |
| 59 | cheader, | 54 | cheader, |
| 60 | list, | 55 | list, |
| 61 | - order, | ||
| 62 | filter | 56 | filter |
| 63 | }, | 57 | }, |
| 64 | methods: { | 58 | methods: { |
| @@ -78,7 +72,6 @@ | @@ -78,7 +72,6 @@ | ||
| 78 | 72 | ||
| 79 | this.inSearching = true; | 73 | this.inSearching = true; |
| 80 | return $.get(this.url, Object.assign({ | 74 | return $.get(this.url, Object.assign({ |
| 81 | - order: this.order, | ||
| 82 | page: nextPage | 75 | page: nextPage |
| 83 | }, this.filter, locationQuery)) | 76 | }, this.filter, locationQuery)) |
| 84 | .done(res => { | 77 | .done(res => { |
| @@ -118,10 +111,6 @@ | @@ -118,10 +111,6 @@ | ||
| 118 | } | 111 | } |
| 119 | }, | 112 | }, |
| 120 | watch: { | 113 | watch: { |
| 121 | - /* order 和 filter 改变 都会触发 重新搜索 */ | ||
| 122 | - order: function() { | ||
| 123 | - this.research(); | ||
| 124 | - }, | ||
| 125 | filter: function() { | 114 | filter: function() { |
| 126 | this.research(); | 115 | this.research(); |
| 127 | } | 116 | } |
| @@ -135,11 +124,6 @@ | @@ -135,11 +124,6 @@ | ||
| 135 | self.search(); | 124 | self.search(); |
| 136 | }); | 125 | }); |
| 137 | 126 | ||
| 138 | - bus.$on('order.change', function({val}) { | ||
| 139 | - console.log(val); | ||
| 140 | - self.order = val; | ||
| 141 | - }); | ||
| 142 | - | ||
| 143 | /** | 127 | /** |
| 144 | * 筛选组件 筛选值变更，触发 filter.change事件 | 128 | * 筛选组件 筛选值变更，触发 filter.change事件 |
| 145 | * 1. 重新搜索 | 129 | * 1. 重新搜索 |
| @@ -158,12 +142,7 @@ | @@ -158,12 +142,7 @@ | ||
| 158 | self.$refs.filter.isVisible = false; | 142 | self.$refs.filter.isVisible = false; |
| 159 | }); | 143 | }); |
| 160 | 144 | ||
| 161 | - this.search() | ||
| 162 | - .then(()=>{ | ||
| 163 | - if (self.productList.length) { | ||
| 164 | - self.enableOrder = true; | ||
| 165 | - } | ||
| 166 | - }); | 145 | + this.search(); |
| 167 | } | 146 | } |
| 168 | }; | 147 | }; |
| 169 | 148 |
-
Please register or login to post a comment