fe / yohoblk-wap · Commits

Go to a project

Authored by ccbikai
Commit 6d3be9d9394fd51bf4315f0e85f56e5c9ee60a41 2 parents 1bb4c129 4fa99f71

Merge branch 'develop' of git.yoho.cn:fe/yohoblk-wap into develop

Inline Side-by-side
Showing 14 changed files with 301 additions and 262 deletions
@@ -35,10 +35,10 @@ exports.subFilter = (req, res) => { @@ -35,10 +35,10 @@ exports.subFilter = (req, res) => {
35 exports.fetchFilters = (req, res, next) => { 35 exports.fetchFilters = (req, res, next) => {
36 const params = { 36 const params = {
37 uid: 14741796, // mock data 37 uid: 14741796, // mock data
38 - page: req.body.page || 1,  
39 - order: req.body.order || 1,  
40 - yh_channel: req.body.yh_channel || 'all',  
41 - channel: req.body.channel || 'all', 38 + page: req.query.page || 1,
  39 + order: req.query.order || 1,
  40 + yh_channel: req.query.yh_channel || 'all',
  41 + channel: req.query.channel || 'all',
42 }; 42 };
43 43
44 const data = _.merge({ 44 const data = _.merge({
@@ -65,14 +65,14 @@ exports.fetchFilters = (req, res, next) => { @@ -65,14 +65,14 @@ exports.fetchFilters = (req, res, next) => {
65 .catch(next); 65 .catch(next);
66 }; 66 };
67 67
68 -/* 查询 产品列表 */ 68 +/* 查询 产品列表 method:GET */
69 exports.fetchProducts = (req, res, next) => { 69 exports.fetchProducts = (req, res, next) => {
70 const params = { 70 const params = {
71 uid: 14741796, // mock data 71 uid: 14741796, // mock data
72 - page: req.body.page || 1,  
73 - order: req.body.order || 1,  
74 - yh_channel: req.body.yh_channel || 'all',  
75 - channel: req.body.channel || 'all', 72 + page: req.query.page || 1,
  73 + order: req.query.order || 1,
  74 + yh_channel: req.query.yh_channel || 'all',
  75 + channel: req.query.channel || 'all',
76 }; 76 };
77 77
78 const data = _.merge({ 78 const data = _.merge({
@@ -3,7 +3,7 @@ const $ = require('yoho-jquery'); @@ -3,7 +3,7 @@ const $ = require('yoho-jquery');
3 const search = require('product/list/index.vue'); 3 const search = require('product/list/index.vue');
4 4
5 $(function() { 5 $(function() {
6 - const buildSort = function() { 6 + const buildOrder = function() {
7 return [ 7 return [
8 { 8 {
9 txt: '默认', 9 txt: '默认',
@@ -26,5 +26,5 @@ $(function() { @@ -26,5 +26,5 @@ $(function() {
26 26
27 let app = new Vue(search); 27 let app = new Vue(search);
28 28
29 - app.sortConfig = buildSort(); 29 + app.orderConfig = buildOrder();
30 }); 30 });
@@ -3,7 +3,7 @@ const $ = require('yoho-jquery'); @@ -3,7 +3,7 @@ const $ = require('yoho-jquery');
3 const search = require('product/search/index.vue'); 3 const search = require('product/search/index.vue');
4 4
5 $(function() { 5 $(function() {
6 - const buildSort = function() { 6 + const buildOrder = function() {
7 return [ 7 return [
8 { 8 {
9 txt: '默认', 9 txt: '默认',
@@ -26,5 +26,5 @@ $(function() { @@ -26,5 +26,5 @@ $(function() {
26 26
27 let app = new Vue(search); 27 let app = new Vue(search);
28 28
29 - app.$set('sortConfig', buildSort()); 29 + app.$set('orderConfig', buildOrder());
30 }); 30 });
  1 +<template>
  2 + <div class="header">
  3 + <div class="header-left">
  4 + <slot name="left">
  5 + <i class="icon icon-left" @click="goBack"></i>
  6 + </slot>
  7 + </div>
  8 + <div class="header-right">
  9 + <slot name="right"></slot>
  10 + </div>
  11 + <div class="header-main">
  12 + <span class="header-title">{{title}}</span>
  13 + </div>
  14 + </div>
  15 + <div class="header-gap"></div>
  16 +</template>
  17 +<script>
  18 + const yoho = require('yoho');
  19 + const $ = require('yoho-jquery');
  20 + const tip = require('common/tip');
  21 +
  22 + module.exports = {
  23 + props: ['title'],
  24 + methods: {
  25 + goBack() {
  26 + yoho.goBack({}, function() {}, function() {});
  27 + }
  28 + }
  29 + }
  30 +</script>
  31 +<style>
  32 + .header {
  33 + position: fixed;
  34 + top: 0;
  35 + right: 0;
  36 + left: 0;
  37 + z-index: 210;
  38 + padding-left: 30px;
  39 + padding-right: 30px;
  40 + width: 100%;
  41 + height: 60px;
  42 + line-height: 60px;
  43 + font-size: 48px;
  44 + background-color: #fff;
  45 + .icon, .header-title {
  46 + vertical-align: middle;
  47 + }
  48 + }
  49 + .header-main {
  50 + display: block;
  51 + text-align: center;
  52 + margin-left: auto;
  53 + margin-right: auto;
  54 + }
  55 + .header-left {
  56 + float: left;
  57 + }
  58 + .header-right {
  59 + float: right;
  60 + .icon {
  61 + margin-left: 30px;
  62 + }
  63 + }
  64 + .header-gap {
  65 + height: 60px;
  66 + }
  67 +</style>
1 -<template>  
2 - <div class="drawer" :class="{'drawer-open': on }" v-show="on">  
3 - <div class="drawer-main" v-el:main>  
4 - <slot></slot>  
5 - </div>  
6 - <div class="drawer-mask" @click="close"></div>  
7 - </div>  
8 -</template>  
9 -<script>  
10 - module.exports = {  
11 - props: {  
12 - on: Boolean  
13 - },  
14 - methods: {  
15 - close() {  
16 - this.on = false;  
17 - }  
18 - },  
19 - watch: {  
20 - on(newVal) {  
21 - if(newVal) {  
22 - document.body.style.overflow = 'hidden';  
23 - } else {  
24 - document.body.style.overflow = '';  
25 - }  
26 - }  
27 - }  
28 - };  
29 -  
30 -</script>  
31 -<style>  
32 - .drawer {  
33 - position: fixed;  
34 - top: 0;  
35 - right: 0;  
36 - bottom: 0;  
37 - left: 0;  
38 - }  
39 -  
40 - .drawer-mask {  
41 - position: absolute;  
42 - z-index: 199;  
43 - top: 0;  
44 - right: 0;  
45 - bottom: 0;  
46 - left: 0;  
47 - background-color: rgba(0, 0, 0, 0.6);  
48 - }  
49 -  
50 - .drawer-main {  
51 - position: absolute;  
52 - z-index: 200;  
53 - top: 0;  
54 - right: 0%;  
55 - bottom: 0;  
56 - min-width: 80%;  
57 - max-width: 100%;  
58 - background-color: #fff;  
59 - transition: all 0.3s 0.2s;  
60 - }  
61 -  
62 -</style>  
1 <template> 1 <template>
2 - <div class="filter"> 2 + <div class="filter" :class="{ 'filter-open': isVisible}">
3 <div class="filter-actions"> 3 <div class="filter-actions">
4 <a href="javascript:;" class="filter-action" @click="clearVals">清空</a> 4 <a href="javascript:;" class="filter-action" @click="clearVals">清空</a>
5 <button class="button button-small filter-action" @click="okAction">确定</button> 5 <button class="button button-small filter-action" @click="okAction">确定</button>
@@ -16,134 +16,169 @@ @@ -16,134 +16,169 @@
16 </div> 16 </div>
17 </template> 17 </template>
18 <script> 18 <script>
19 -const $ = require('yoho-jquery');  
20 -const bus = require('common/vue-bus');  
21 -  
22 -module.exports = {  
23 - props: {  
24 - config: Object  
25 - },  
26 - data: function() {  
27 - return {  
28 - // 选择的值  
29 - params: {},  
30 -  
31 - // 确定的值  
32 - selected: {}  
33 - };  
34 - },  
35 - watch: {},  
36 - methods: {  
37 - clearVals: function() {  
38 - // remove all value  
39 - this.$set('params', {}); 19 + const $ = require('yoho-jquery');
  20 + const bus = require('common/vue-bus');
  21 + const Overlay = require('common/overlay');
  22 +
  23 + module.exports = {
  24 + props: {
  25 + config: Object,
  26 + isVisible: Boolean
40 }, 27 },
  28 + data: function() {
  29 + return {
  30 + // 选择的值
  31 + params: {},
41 32
42 - /**  
43 - * 当二级筛选, 返回数据时, 调用该方法  
44 - * @param {[type]} cate [description]  
45 - * @param {[type]} val [description]  
46 - */  
47 - setCateParams: function(cate, val) {  
48 - this.$set(`params.${cate}`, val); 33 + // 确定的值
  34 + selected: {}
  35 + };
49 }, 36 },
50 - okAction: function() {  
51 - bus.$emit('filter.change', {  
52 - val: this.params,  
53 - ref: this._uid  
54 - }); 37 + watch: {
  38 + isVisible(newVal) {
  39 + if (newVal) {
  40 + this.overlay.show();
  41 + } else {
  42 + this.overlay.hide();
  43 + }
  44 + }
55 }, 45 },
56 - entrySub: function(key) {  
57 - bus.$emit('filter.sub.show', {  
58 - val: key,  
59 - ref: this._uid  
60 - });  
61 - }  
62 - },  
63 - filters: {  
64 - unifyTxt: function(val, category) {  
65 - let txt = '';  
66 - let arr = [];  
67 - let foo = $.noop;  
68 -  
69 -  
70 - if ($.isArray(val)) { // [{categoryName,..},{}..]  
71 - foo = (index, obj) => {  
72 - arr.push(obj[category + 'Name']);  
73 - }; 46 + methods: {
  47 + clearVals: function() {
  48 + // remove all value
  49 + this.$set('params', {});
  50 + },
  51 +
  52 + /**
  53 + * 当二级筛选, 返回数据时, 调用该方法
  54 + * @param {[type]} cate [description]
  55 + * @param {[type]} val [description]
  56 + */
  57 + setCateParams: function(cate, val) {
  58 + this.$set(`params.${cate}`, val);
  59 + },
  60 + okAction: function() {
  61 + bus.$emit('filter.change', {
  62 + val: this.params,
  63 + ref: this._uid
  64 + });
  65 + },
  66 + entrySub: function(key) {
  67 + bus.$emit('filter.sub.show', {
  68 + val: key,
  69 + ref: this._uid
  70 + });
74 } 71 }
75 -  
76 - $.each(val, foo);  
77 - txt = arr.join(',');  
78 - return txt;  
79 }, 72 },
80 - txt: function(val) {  
81 - const dict = {  
82 - color: 'Color颜色',  
83 - gender: 'Gender性别',  
84 - size: 'Size尺寸',  
85 - brand: 'Brand品牌',  
86 - priceRange: 'Price价格',  
87 - groupSort: 'Category品类',  
88 - discount: 'Sale折扣'  
89 - }; 73 + filters: {
  74 + unifyTxt: function(val, category) {
  75 + let txt = '';
  76 + let arr = [];
  77 + let foo = $.noop;
  78 +
  79 +
  80 + if ($.isArray(val)) { // [{categoryName,..},{}..]
  81 + foo = (index, obj) => {
  82 + arr.push(obj[category + 'Name']);
  83 + };
  84 + }
  85 +
  86 + $.each(val, foo);
  87 + txt = arr.join(',');
  88 + return txt;
  89 + },
  90 + txt: function(val) {
  91 + const dict = {
  92 + color: 'Color颜色',
  93 + gender: 'Gender性别',
  94 + size: 'Size尺寸',
  95 + brand: 'Brand品牌',
  96 + priceRange: 'Price价格',
  97 + groupSort: 'Category品类',
  98 + discount: 'Sale折扣'
  99 + };
90 100
91 - return dict[val] || ''; 101 + return dict[val] || '';
  102 + }
  103 + },
  104 + created () {
  105 + const self = this;
  106 +
  107 + this.overlay = new Overlay({
  108 + disableScrolling: true,
  109 + onClose: function() {
  110 + self.isVisible = false;
  111 + }
  112 + });
92 } 113 }
93 - }  
94 -}; 114 + };
  115 +
95 </script> 116 </script>
96 <style> 117 <style>
97 -@import "../../../scss/common/color";  
98 -  
99 -.filter {  
100 - padding: 0 30px;  
101 -}  
102 -  
103 -.filter-actions {  
104 - font-size: 34px;  
105 - text-align: right;  
106 - padding: 45px 0;  
107 -}  
108 -  
109 -.filter-action {  
110 - font-size: inherit;  
111 - margin-left: 40px;  
112 -}  
113 -  
114 -.filter-actions,  
115 -.filter-cate {  
116 - border-bottom: 1px solid $grey;  
117 -}  
118 -  
119 -.filter-cates {  
120 - list-style: none;  
121 - margin: 0;  
122 - padding: 0;  
123 -}  
124 -  
125 -.filter-cate .icon-right {  
126 - margin-left: 24px;  
127 -}  
128 -  
129 -.filter-cate,  
130 -.icon-right {  
131 - height: 118px;  
132 - line-height: 118px;  
133 -}  
134 -  
135 -.filter-cate-label {  
136 - font-size: 36px;  
137 - font-weight: bold;  
138 -}  
139 -  
140 -.filter-cate-val {  
141 - float: right;  
142 - font-size: 28px;  
143 -} 118 + @import "../../../scss/common/color";
  119 +
  120 + .filter {
  121 + position: fixed;
  122 + z-index: 1001;
  123 + top: 0;
  124 + right: 0;
  125 + bottom: 0;
  126 + left: 20%;
  127 + background-color: #fff;
  128 + transform: translate3d(100%, 0, 0);
  129 + transition: all 0.3s 0.2s;
  130 + padding: 0 30px;
  131 +
  132 + &.filter-open {
  133 + transform: translate3d(0, 0, 0);
  134 + }
  135 + }
  136 +
  137 + .filter-actions {
  138 + font-size: 34px;
  139 + text-align: right;
  140 + padding: 45px 0;
  141 + }
  142 +
  143 + .filter-action {
  144 + font-size: inherit;
  145 + margin-left: 40px;
  146 + }
  147 +
  148 + .filter-actions,
  149 + .filter-cate {
  150 + border-bottom: 1px solid $grey;
  151 + }
  152 +
  153 + .filter-cates {
  154 + list-style: none;
  155 + margin: 0;
  156 + padding: 0;
  157 + }
  158 +
  159 + .filter-cate .icon-right {
  160 + margin-left: 24px;
  161 + }
  162 +
  163 + .filter-cate,
  164 + .icon-right {
  165 + height: 118px;
  166 + line-height: 118px;
  167 + }
  168 +
  169 + .filter-cate-label {
  170 + font-size: 36px;
  171 + font-weight: bold;
  172 + }
  173 +
  174 + .filter-cate-val {
  175 + float: right;
  176 + font-size: 28px;
  177 + }
  178 +
  179 + .filter-cate-val,
  180 + .filter-cate .icon {
  181 + color: $grey;
  182 + }
144 183
145 -.filter-cate-val,  
146 -.filter-cate .icon {  
147 - color: $grey;  
148 -}  
149 </style> 184 </style>
1 <template> 1 <template>
2 - <ul class="sort-navs clearfix"> 2 + <ul class="order-navs clearfix">
3 <template v-for="item in config"> 3 <template v-for="item in config">
4 <simple v-if="(item.type || 'simple') === 'simple'" :txt="item.txt" :val="item.val"> 4 <simple v-if="(item.type || 'simple') === 'simple'" :txt="item.txt" :val="item.val">
5 </simple> 5 </simple>
@@ -11,13 +11,13 @@ @@ -11,13 +11,13 @@
11 <script> 11 <script>
12 const $ = require('yoho-jquery'); 12 const $ = require('yoho-jquery');
13 const bus = require('common/vue-bus'); 13 const bus = require('common/vue-bus');
14 -const simple = require('./sort/simple.vue');  
15 -const updown = require('./sort/updown.vue'); 14 +const simple = require('./order/simple.vue');
  15 +const updown = require('./order/updown.vue');
16 16
17 module.exports = { 17 module.exports = {
18 props: { 18 props: {
19 /** 19 /**
20 - * sort 配置 20 + * order 配置
21 * @type {Array} [{type, txt, val}] 21 * @type {Array} [{type, txt, val}]
22 * type: 类型 simple, updown 22 * type: 类型 simple, updown
23 * txt: 文字, 23 * txt: 文字,
@@ -35,7 +35,7 @@ module.exports = { @@ -35,7 +35,7 @@ module.exports = {
35 methods: {}, 35 methods: {},
36 watch: { 36 watch: {
37 val: function(newVal, oldVal) { 37 val: function(newVal, oldVal) {
38 - bus.$emit('sort.change', { 38 + bus.$emit('order.change', {
39 val: newVal, 39 val: newVal,
40 ref: this._uid 40 ref: this._uid
41 }); 41 });
@@ -46,14 +46,14 @@ module.exports = { @@ -46,14 +46,14 @@ module.exports = {
46 <style> 46 <style>
47 @import "../../../scss/common/color"; 47 @import "../../../scss/common/color";
48 48
49 -.sort-navs { 49 +.order-navs {
50 list-style: none; 50 list-style: none;
51 margin: 0; 51 margin: 0;
52 padding: 25px 0; 52 padding: 25px 0;
53 color: $grey; 53 color: $grey;
54 } 54 }
55 55
56 -.sort-item { 56 +.order-item {
57 position: relative; 57 position: relative;
58 display: block; 58 display: block;
59 width: 25%; 59 width: 25%;
@@ -69,10 +69,10 @@ module.exports = { @@ -69,10 +69,10 @@ module.exports = {
69 &:last-of-type:after { 69 &:last-of-type:after {
70 display: none; 70 display: none;
71 } 71 }
72 - .sort-name { 72 + .order-name {
73 font-size: 28px; 73 font-size: 28px;
74 } 74 }
75 - .sort-icon { 75 + .order-icon {
76 position: relative; 76 position: relative;
77 margin-left: 10px; 77 margin-left: 10px;
78 .icon-sort-asc, 78 .icon-sort-asc,
1 <template> 1 <template>
2 - <li class="sort-item" :class="active" @click="click">  
3 - <span class="sort-name">{{txt}}</span> 2 + <li class="order-item" :class="active" @click="click">
  3 + <span class="order-name">{{txt}}</span>
4 </li> 4 </li>
5 </template> 5 </template>
6 <script> 6 <script>
1 <template> 1 <template>
2 - <li class="sort-item" :class="active" @click="clickHandler">  
3 - <span class="sort-name">{{txt}}</span>  
4 - <span class="sort-icon"> 2 + <li class="order-item" :class="active" @click="clickHandler">
  3 + <span class="order-name">{{txt}}</span>
  4 + <span class="order-icon">
5 <i class="icon icon-sort-asc" :class="{active: $parent.val === vals[0]}"></i> 5 <i class="icon icon-sort-asc" :class="{active: $parent.val === vals[0]}"></i>
6 <i class="icon icon-sort-desc" :class="{active: $parent.val === vals[1]}"></i> 6 <i class="icon icon-sort-desc" :class="{active: $parent.val === vals[1]}"></i>
7 </span> 7 </span>
8 </li> 8 </li>
9 </template> 9 </template>
10 <style> 10 <style>
11 -.sort-item .icon { 11 +.order-item .icon {
12 color: #b0b0b0; 12 color: #b0b0b0;
13 &.active { 13 &.active {
14 color: #000; 14 color: #000;
1 <template> 1 <template>
2 <div> 2 <div>
3 - <Sort :config="sortConfig" :val="sort">  
4 - </Sort> 3 + <cheader :title="sortName">
  4 + <i class="icon icon-filter" slot="right" @click="openFilter"></i>
  5 + </cheader>
  6 + <order :config="orderConfig" :val="order"></order>
5 <List :data="productList"></List> 7 <List :data="productList"></List>
6 - <Drawer v-ref:drawer>  
7 - <Filter :config="filterConfig"></Filter>  
8 - </Drawer> 8 + <Filter :config="filterConfig" v-ref:filter></Filter>
9 </div> 9 </div>
10 </template> 10 </template>
11 <script> 11 <script>
12 const Vue = require('yoho-vue'); 12 const Vue = require('yoho-vue');
13 const lazyload = require('yoho-vue-lazyload'); 13 const lazyload = require('yoho-vue-lazyload');
14 const infinitScroll = require('yoho-vue-infinite-scroll'); 14 const infinitScroll = require('yoho-vue-infinite-scroll');
  15 + const qs = require('yoho-qs');
15 const bus = require('common/vue-bus'); 16 const bus = require('common/vue-bus');
16 const tip = require('common/tip'); 17 const tip = require('common/tip');
17 - const sort = require('component/product/sort.vue'); 18 + const cheader = require('component/header.vue');
  19 + const order = require('component/product/order.vue');
18 const list = require('component/product/list.vue'); 20 const list = require('component/product/list.vue');
19 - const drawer = require('component/product/drawer.vue');  
20 const filter = require('component/product/filter.vue'); 21 const filter = require('component/product/filter.vue');
21 22
22 Vue.use(lazyload); 23 Vue.use(lazyload);
23 Vue.use(infinitScroll); 24 Vue.use(infinitScroll);
24 -  
25 require('common/vue-filter'); 25 require('common/vue-filter');
26 26
27 module.exports = { 27 module.exports = {
28 el: '#product-list', 28 el: '#product-list',
29 data: function() { 29 data: function() {
30 return { 30 return {
31 - sortConfig: [], 31 + sortName: decodeURIComponent(qs.sort_name),
  32 + orderConfig: [],
32 filterConfig: null, 33 filterConfig: null,
33 34
34 // query 35 // query
35 url: '/product/list.json', 36 url: '/product/list.json',
36 - sort: '', 37 + order: '',
37 filter: {}, 38 filter: {},
38 page: 0, // 未搜索 page=0; 全部加载完 page = totalPage; 无数据: page !=0 && productList.length=0 39 page: 0, // 未搜索 page=0; 全部加载完 page = totalPage; 无数据: page !=0 && productList.length=0
39 totalPage: null, 40 totalPage: null,
@@ -46,15 +47,16 @@ @@ -46,15 +47,16 @@
46 }; 47 };
47 }, 48 },
48 components: { 49 components: {
  50 + cheader,
49 list, 51 list,
50 - sort,  
51 - filter,  
52 - drawer 52 + order,
  53 + filter
53 }, 54 },
54 methods: { 55 methods: {
55 search: function() { 56 search: function() {
56 const self = this; 57 const self = this;
57 const nextPage = this.page + 1; 58 const nextPage = this.page + 1;
  59 + console.log(nextPage)
58 60
59 if (this.inSearching) { 61 if (this.inSearching) {
60 return; 62 return;
@@ -66,9 +68,8 @@ @@ -66,9 +68,8 @@
66 } 68 }
67 69
68 this.inSearching = true; 70 this.inSearching = true;
69 - console.log(nextPage);  
70 $.get(this.url, { 71 $.get(this.url, {
71 - sort: this.sort, 72 + order: this.order,
72 filter: this.filter, 73 filter: this.filter,
73 page: nextPage 74 page: nextPage
74 }) 75 })
@@ -91,6 +92,10 @@ @@ -91,6 +92,10 @@
91 }); 92 });
92 }, 93 },
93 94
  95 + openFilter() {
  96 + this.$refs.filter.isVisible = true;
  97 + },
  98 +
94 openFilterSub: function(classify) { 99 openFilterSub: function(classify) {
95 console.log('TODO: open filter sub', classify); 100 console.log('TODO: open filter sub', classify);
96 }, 101 },
@@ -105,8 +110,8 @@ @@ -105,8 +110,8 @@
105 } 110 }
106 }, 111 },
107 watch: { 112 watch: {
108 - /* sort 和 filter 改变 都会触发 重新搜索 */  
109 - sort: function() { 113 + /* order 和 filter 改变 都会触发 重新搜索 */
  114 + order: function() {
110 this.research(); 115 this.research();
111 }, 116 },
112 filter: function() { 117 filter: function() {
@@ -122,11 +127,11 @@ @@ -122,11 +127,11 @@
122 self.search(); 127 self.search();
123 }); 128 });
124 129
125 - bus.$on('sort.change', function({ 130 + bus.$on('order.change', function({
126 val 131 val
127 }) { 132 }) {
128 console.log(val); 133 console.log(val);
129 - self.sort = val; 134 + self.order = val;
130 }); 135 });
131 136
132 /** 137 /**
@@ -134,12 +139,10 @@ @@ -134,12 +139,10 @@
134 * 1. 重新搜索 139 * 1. 重新搜索
135 * 2. 关闭 drawer 组件 140 * 2. 关闭 drawer 组件
136 */ 141 */
137 - bus.$on('filter.change', function({  
138 - val  
139 - }) { 142 + bus.$on('filter.change', function({val}) {
140 console.log(val); 143 console.log(val);
141 self.filter = val; 144 self.filter = val;
142 - self.$refs.drawer.on = false; 145 + self.$refs.filter.isVisible = false;
143 }); 146 });
144 147
145 /** 148 /**
1 <template> 1 <template>
2 <div> 2 <div>
3 <template v-if="productList.length"> 3 <template v-if="productList.length">
4 - <Sort :config="sortConfig" :val="sort"> 4 + <order :config="orderConfig" :val="order">
5 </Sort> 5 </Sort>
6 <List :data="productList"></List> 6 <List :data="productList"></List>
7 </template> 7 </template>
@@ -21,7 +21,7 @@ @@ -21,7 +21,7 @@
21 const bus = require('common/vue-bus'); 21 const bus = require('common/vue-bus');
22 const tip = require('common/tip'); 22 const tip = require('common/tip');
23 23
24 - const sort = require('component/product/sort.vue'); 24 + const sort = require('component/product/order.vue');
25 const list = require('component/product/list.vue'); 25 const list = require('component/product/list.vue');
26 26
27 Vue.use(lazyload); 27 Vue.use(lazyload);
@@ -33,12 +33,12 @@ @@ -33,12 +33,12 @@
33 el: '#product-new', 33 el: '#product-new',
34 data: function() { 34 data: function() {
35 return { 35 return {
36 - sortConfig: global.sortConfig, 36 + orderConfig: global.orderConfig,
37 filterConfig: global.filterConfig, 37 filterConfig: global.filterConfig,
38 38
39 // query 39 // query
40 url: '/product/search.json', 40 url: '/product/search.json',
41 - sort: null, 41 + order: null,
42 query: qs.query, 42 query: qs.query,
43 page: 0, // 未搜索 page=0; 全部加载完 page = totalPage; 无数据: page !=0 && productList.length=0 43 page: 0, // 未搜索 page=0; 全部加载完 page = totalPage; 无数据: page !=0 && productList.length=0
44 totalPage: null, 44 totalPage: null,
@@ -58,7 +58,7 @@ @@ -58,7 +58,7 @@
58 }, 58 },
59 components: { 59 components: {
60 list, 60 list,
61 - sort 61 + order
62 }, 62 },
63 methods: { 63 methods: {
64 search: function() { 64 search: function() {
@@ -77,7 +77,7 @@ @@ -77,7 +77,7 @@
77 this.inSearching = true; 77 this.inSearching = true;
78 console.log(nextPage); 78 console.log(nextPage);
79 $.get(this.url, { 79 $.get(this.url, {
80 - order: this.sort, // 排序 信息 80 + order: this.order, // 排序 信息
81 query: this.query, 81 query: this.query,
82 page: nextPage 82 page: nextPage
83 }) 83 })
@@ -106,8 +106,8 @@ @@ -106,8 +106,8 @@
106 } 106 }
107 }, 107 },
108 watch: { 108 watch: {
109 - /* sort 改变 都会触发 重新搜索 */  
110 - sort: function() { 109 + /* order 改变 都会触发 重新搜索 */
  110 + order: function() {
111 this.research(); 111 this.research();
112 } 112 }
113 }, 113 },
@@ -120,10 +120,10 @@ @@ -120,10 +120,10 @@
120 self.search(); 120 self.search();
121 }); 121 });
122 122
123 - bus.$on('sort.change', function({ 123 + bus.$on('order.change', function({
124 val 124 val
125 }) { 125 }) {
126 - self.sort = val; 126 + self.order = val;
127 }); 127 });
128 128
129 this.search(); 129 this.search();
1 <template> 1 <template>
2 <div> 2 <div>
3 <template v-if="productList.length"> 3 <template v-if="productList.length">
4 - <Sort :config="sortConfig" :val="sort">  
5 - </Sort> 4 + <Order :config="orderConfig" :val="order">
  5 + </Order>
6 <List :data="productList"></List> 6 <List :data="productList"></List>
7 </template> 7 </template>
8 <div class="empty-tip" v-if="empty"> 8 <div class="empty-tip" v-if="empty">
@@ -21,7 +21,7 @@ @@ -21,7 +21,7 @@
21 const bus = require('common/vue-bus'); 21 const bus = require('common/vue-bus');
22 const tip = require('common/tip'); 22 const tip = require('common/tip');
23 23
24 - const sort = require('component/product/sort.vue'); 24 + const order = require('component/product/order.vue');
25 const list = require('component/product/list.vue'); 25 const list = require('component/product/list.vue');
26 26
27 Vue.use(lazyload); 27 Vue.use(lazyload);
@@ -33,12 +33,12 @@ @@ -33,12 +33,12 @@
33 el: '#product-search', 33 el: '#product-search',
34 data: function() { 34 data: function() {
35 return { 35 return {
36 - sortConfig: global.sortConfig, 36 + orderConfig: global.orderConfig,
37 filterConfig: global.filterConfig, 37 filterConfig: global.filterConfig,
38 38
39 // query 39 // query
40 url: '/product/search.json', 40 url: '/product/search.json',
41 - sort: '', 41 + order: '',
42 query: qs.query, 42 query: qs.query,
43 page: 0, // 未搜索 page=0; 全部加载完 page = totalPage; 无数据: page !=0 && productList.length=0 43 page: 0, // 未搜索 page=0; 全部加载完 page = totalPage; 无数据: page !=0 && productList.length=0
44 totalPage: null, 44 totalPage: null,
@@ -58,7 +58,7 @@ @@ -58,7 +58,7 @@
58 }, 58 },
59 components: { 59 components: {
60 list, 60 list,
61 - sort 61 + order
62 }, 62 },
63 methods: { 63 methods: {
64 search: function() { 64 search: function() {
@@ -77,7 +77,7 @@ @@ -77,7 +77,7 @@
77 this.inSearching = true; 77 this.inSearching = true;
78 console.log(nextPage); 78 console.log(nextPage);
79 $.get(this.url, { 79 $.get(this.url, {
80 - order: this.sort, // 排序 信息 80 + order: this.order, // 排序 信息
81 query: this.query, 81 query: this.query,
82 page: nextPage 82 page: nextPage
83 }) 83 })
@@ -106,8 +106,8 @@ @@ -106,8 +106,8 @@
106 } 106 }
107 }, 107 },
108 watch: { 108 watch: {
109 - /* sort 改变 都会触发 重新搜索 */  
110 - sort: function() { 109 + /* order 改变 都会触发 重新搜索 */
  110 + order: function() {
111 this.research(); 111 this.research();
112 } 112 }
113 }, 113 },
@@ -120,10 +120,10 @@ @@ -120,10 +120,10 @@
120 self.search(); 120 self.search();
121 }); 121 });
122 122
123 - bus.$on('sort.change', function({ 123 + bus.$on('order.change', function({
124 val 124 val
125 }) { 125 }) {
126 - self.sort = val; 126 + self.order = val;
127 }); 127 });
128 128
129 this.search(); 129 this.search();
1 <template> 1 <template>
2 <shop-top v-bind:shop-info="shopInfo"></shop-top> 2 <shop-top v-bind:shop-info="shopInfo"></shop-top>
3 <goods-list v-bind:data="productList"></goods-list> 3 <goods-list v-bind:data="productList"></goods-list>
4 - <drawer v-ref:drawer>  
5 - <filter :config="filterConfig"></filter>  
6 - </drawer> 4 + <filter :config="filterConfig" v-ref:filter></filter>
7 <top-bar v-bind:share-data="shareData"></top-bar> 5 <top-bar v-bind:share-data="shareData"></top-bar>
8 </template> 6 </template>
9 7
@@ -16,7 +14,6 @@ @@ -16,7 +14,6 @@
16 const topBar = require('product/shop/top-bar.vue'); // 顶部栏，包括返回、收藏店铺、分享，打开筛选页面 14 const topBar = require('product/shop/top-bar.vue'); // 顶部栏，包括返回、收藏店铺、分享，打开筛选页面
17 const shopTop = require('product/shop/shop-top.vue'); // 店铺头部信息 15 const shopTop = require('product/shop/shop-top.vue'); // 店铺头部信息
18 const goodsList = require('component/product/list.vue'); 16 const goodsList = require('component/product/list.vue');
19 - const drawer = require('component/product/drawer.vue');  
20 const filter = require('component/product/filter.vue'); 17 const filter = require('component/product/filter.vue');
21 18
22 const shareSubTitle = '我在BLK发现了一个不错的品牌，赶快来看看吧！'; 19 const shareSubTitle = '我在BLK发现了一个不错的品牌，赶快来看看吧！';
@@ -129,7 +126,6 @@ @@ -129,7 +126,6 @@
129 topBar, 126 topBar,
130 shopTop, 127 shopTop,
131 goodsList, 128 goodsList,
132 - drawer,  
133 filter 129 filter
134 }, 130 },
135 created() { 131 created() {
@@ -148,12 +144,12 @@ @@ -148,12 +144,12 @@
148 /** 144 /**
149 * 筛选组件 筛选值变更，触发 filter.change事件 145 * 筛选组件 筛选值变更，触发 filter.change事件
150 * 1. 重新搜索 146 * 1. 重新搜索
151 - * 2. 关闭 drawer 组件 147 + * 2. 关闭 filter 组件
152 */ 148 */
153 bus.$on('filter.change', ({val}) => { 149 bus.$on('filter.change', ({val}) => {
154 Object.assign(this.filter, val); 150 Object.assign(this.filter, val);
155 this.search(); 151 this.search();
156 - this.$refs.drawer.on = false; 152 + this.$refs.filter.on = false;
157 }); 153 });
158 154
159 /** 155 /**
1 <template> 1 <template>
2 - <div class="top-box clearfix" v-bind:class='{"top-box-left" : this.$parent.$refs.drawer.on}'> 2 + <div class="top-box clearfix" v-bind:class='{"top-box-left" : this.$parent.$refs.filter.on}'>
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> 5 <span v-if="shareData.isFav" class="icon" @click="collectShop()">&#xe60d;</span>