From afbb5201af3b02dcc15ee4ee30b019c1cc974839 Mon Sep 17 00:00:00 2001
From: chen xuan <xuan.chen@yoho.cn>
Date: Mon, 25 Jul 2016 11:12:45 +0800
Subject: [PATCH] filter sub page
---
apps/product/controllers/search.js | 30 ++++++++++++++++++++++++------
apps/product/router.js | 1 +
apps/product/views/action/filter-sub.hbs | 4 ++++
public/js/product/filter-sub.page.js | 29 +++++++++++++++++++++++++++++
public/vue/product/filter/filter-detail.vue | 61 -------------------------------------------------------------
public/vue/product/filter/filter-sub.vue | 60 ++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++
public/vue/product/filter/normal.vue | 7 +++----
public/vue/product/index.vue | 0
public/vue/product/list.vue | 4 ++--
public/vue/product/search.vue | 11 +++++------
10 files changed, 128 insertions(+), 79 deletions(-)
create mode 100644 apps/product/views/action/filter-sub.hbs
create mode 100644 public/js/product/filter-sub.page.js
delete mode 100644 public/vue/product/filter/filter-detail.vue
create mode 100644 public/vue/product/filter/filter-sub.vue
delete mode 100644 public/vue/product/index.vue
diff --git a/apps/product/controllers/search.js b/apps/product/controllers/search.js
index 853f425..9fa6014 100644
--- a/apps/product/controllers/search.js
+++ b/apps/product/controllers/search.js
@@ -21,9 +21,20 @@ exports.index = (req, res) => {
res.render('search', view);
};
+/* 筛选的二级页面 */
+exports.subFilter = (req, res) => {
+ const view = {
+ module: 'product',
+ page: 'filter-sub'
+ };
+
+ res.render('filter-sub', view);
+};
+
/* 获取 筛选配置 */
exports.fetchFilters = (req, res, next) => {
const params = {
+ uid: 14741796, // mock data
page: req.body.page || 1,
order: req.body.order || 1,
yh_channel: req.body.yh_channel || 'all',
@@ -41,10 +52,15 @@ exports.fetchFilters = (req, res, next) => {
.then(result => {
let filterConfig = {};
- prettyFilter(result.data.filter);
- filterConfig = camelCase(result.data.filter);
+ if (result.code === 200) {
+ prettyFilter(result.data.filter);
+ filterConfig = camelCase(result.data.filter);
+ }
- res.json(filterConfig);
+ res.json({
+ code: result.code,
+ data: filterConfig
+ });
})
.catch(next);
};
@@ -52,6 +68,7 @@ exports.fetchFilters = (req, res, next) => {
/* 查询 产品列表 */
exports.fetchProducts = (req, res, next) => {
const params = {
+ uid: 14741796, // mock data
page: req.body.page || 1,
order: req.body.order || 1,
yh_channel: req.body.yh_channel || 'all',
@@ -67,9 +84,10 @@ exports.fetchProducts = (req, res, next) => {
code: 200
})
.then(result => {
- result.data.productList = processProductList(result.data.productList);
- result = camelCase(result);
-
+ if (result.code === 200) {
+ result.data.productList = processProductList(result.data.productList);
+ result = camelCase(result);
+ }
res.json(result);
})
.catch(next);
diff --git a/apps/product/router.js b/apps/product/router.js
index e705c48..4e5d501 100644
--- a/apps/product/router.js
+++ b/apps/product/router.js
@@ -16,6 +16,7 @@ const search = require(`${cRoot}/search`);
router.get('/search', search.index);
router.post('/search', search.fetchProducts);
+router.get('/filter', search.subFilter);
router.get('/filters.json', search.fetchFilters);
// 商品详情controller
diff --git a/apps/product/views/action/filter-sub.hbs b/apps/product/views/action/filter-sub.hbs
new file mode 100644
index 0000000..c21342f
--- /dev/null
+++ b/apps/product/views/action/filter-sub.hbs
@@ -0,0 +1,4 @@
+{{! 筛选的 二级菜单}}
+<div id="filter-sub">
+ <filter-sub :data="data" :val="val" type="color"><filter-sub>
+</div>
\ No newline at end of file
diff --git a/public/js/product/filter-sub.page.js b/public/js/product/filter-sub.page.js
new file mode 100644
index 0000000..6d7b71e
--- /dev/null
+++ b/public/js/product/filter-sub.page.js
@@ -0,0 +1,29 @@
+const Vue = require('yoho-vue');
+const filterSub = require('product/filter/filter-sub.vue');
+
+// TODO: 该mock数据 应该有 上级页面传过来
+const page = {
+ type: 'brand', // 二级筛选的 类型
+ data: [ // 二级筛选的 数据
+ { id: 1, name: '红色' },
+ { id: 2, name: '红色' },
+ { id: 3, name: '红色' }
+ ],
+ val: 3 // 二级筛选 的值
+};
+
+new Vue({
+ el: '#filter-sub',
+ data: function() {
+ return {
+ type: page.type,
+ data: page.data,
+ val: page.val
+ };
+ },
+ components: {
+ filterSub
+ }
+});
+
+
diff --git a/public/vue/product/filter/filter-detail.vue b/public/vue/product/filter/filter-detail.vue
deleted file mode 100644
index 3f63cd8..0000000
--- a/public/vue/product/filter/filter-detail.vue
+++ /dev/null
@@ -1,61 +0,0 @@
-<template>
- <div>
- <brand-filter v-if="type === 'brand'" :data="data" :val.sync="val"></brand-filter>
- <normal-filter v-else :data="data" :val.sync="val">
- <slot></slot>
- </normal-filter>
- </div>
-</template>
-<script>
-const brandFilter = require('./brand.vue');
-const normalFilter = require('./normal.vue');
-
-module.exports = {
- props: ['type', 'data', 'val'],
- components: {
- brandFilter,
- normalFilter
- },
- watch: {
- val: function(newV, oldV) {
- console.log(`type: ${this.type}, value: ${newV}`);
- }
- }
-};
-</script>
-<style>
-@import "../../../scss/common/_color.css";
-
-.filter-detail {
- $w: 30px;
- list-style: none;
- margin: 0;
- padding: 0;
- font-size: 40px;
- color: $grey;
- .item,
- .index {
- margin-left: $w;
- margin-right: $w;
- border-bottom: 1px solid $division;
- }
- .index {
- font-size: 32px;
- font-weight: bold;
- color: $black;
- height: 60px;
- line-height: 60px;
- }
- .item.active .item-inner {
- color: $black;
- background-color: #f6f6f6;
- }
- .item-inner {
- margin-left: -$w;
- margin-right: -$w;
- padding: 0 $w;
- height: 100px;
- line-height: 100px;
- }
-}
-</style>
diff --git a/public/vue/product/filter/filter-sub.vue b/public/vue/product/filter/filter-sub.vue
new file mode 100644
index 0000000..59965ef
--- /dev/null
+++ b/public/vue/product/filter/filter-sub.vue
@@ -0,0 +1,60 @@
+<template>
+ <div>
+ <brand-filter v-if="type === 'brand'" :data="data" :val.sync="val"></brand-filter>
+ <normal-filter v-else :data="data" :val.sync="val">
+ </normal-filter>
+ </div>
+</template>
+<script>
+const brandFilter = require('./brand.vue');
+const normalFilter = require('./normal.vue');
+
+module.exports = {
+ props: ['type', 'data', 'val'],
+ components: {
+ brandFilter,
+ normalFilter
+ },
+ watch: {
+ val: function(newV, oldV) {
+ console.log(`type: ${this.type}, value: ${newV}`);
+ }
+ }
+};
+</script>
+<style>
+@import "../../../scss/common/_color.css";
+
+.filter-detail {
+ $w: 30px;
+ list-style: none;
+ margin: 0;
+ padding: 0;
+ font-size: 40px;
+ color: $grey;
+ .item,
+ .index {
+ margin-left: $w;
+ margin-right: $w;
+ border-bottom: 1px solid $division;
+ }
+ .index {
+ font-size: 32px;
+ font-weight: bold;
+ color: $black;
+ height: 60px;
+ line-height: 60px;
+ }
+ .item.active .item-inner {
+ color: $black;
+ background-color: #f6f6f6;
+ }
+ .item-inner {
+ margin-left: -$w;
+ margin-right: -$w;
+ padding: 0 $w;
+ height: 100px;
+ line-height: 100px;
+ }
+}
+</style>
diff --git a/public/vue/product/filter/normal.vue b/public/vue/product/filter/normal.vue
index 080abeb..9aa0330 100644
--- a/public/vue/product/filter/normal.vue
+++ b/public/vue/product/filter/normal.vue
@@ -1,6 +1,6 @@
<template>
<div class="filter-detail">
- <div class="item" v-for="item in data" :class="{active: item.id === value}" @click="toggleCheck(item.id)">
+ <div class="item" v-for="item in data" :class="{active: item.id === val}" @click="toggleCheck(item.id)">
<div class="item-inner">
{{item.name}}
</div>
@@ -10,12 +10,11 @@
</template>
<script>
module.exports = {
- props: ['data', 'type', 'value'],
+ props: ['data', 'type', 'val'],
computed: {},
methods: {
toggleCheck: function(val) {
- this.value = val;
- this.$parent.select(val);
+ this.val = val;
}
}
};
diff --git a/public/vue/product/index.vue b/public/vue/product/index.vue
deleted file mode 100644
index e69de29..0000000
--- a/public/vue/product/index.vue
+++ /dev/null
diff --git a/public/vue/product/list.vue b/public/vue/product/list.vue
index 5b51de8..d2c2acd 100644
--- a/public/vue/product/list.vue
+++ b/public/vue/product/list.vue
@@ -3,7 +3,7 @@
<ul class="cardlist card-large clearfix">
<li class="card" v-for="item in data">
<div class="card-pic">
- <a href="">
+ <a href="/product/{{item.id}}">
<img v-lazy="item.goodsList[0].imagesUrl | resize 372 499" alt="{{item.productName}}">
</a>
</div>
@@ -28,7 +28,7 @@ module.exports = {
/* 开启滚动加载 */
disableFetch: Boolean,
- //数据
+ // 数据
data: Array
},
methods: {
diff --git a/public/vue/product/search.vue b/public/vue/product/search.vue
index 64e6088..3efa01f 100644
--- a/public/vue/product/search.vue
+++ b/public/vue/product/search.vue
@@ -1,6 +1,5 @@
<template>
<div>
- <!--<filter-sub :data="brand" :value="3" type="brand"></filter-sub>-->
<Sort :config="sortConfig" :val="sort">
</Sort>
<List :data="productList"></List>
@@ -19,7 +18,6 @@
const list = require('product/list.vue');
const drawer = require('product/drawer.vue');
const filter = require('product/filter.vue');
- const filterSub = require('product/filter/filter-detail.vue');
Vue.use(lazyload);
Vue.use(infinitScroll);
@@ -51,7 +49,6 @@
list,
sort,
filter,
- filterSub,
drawer
},
methods: {
@@ -76,9 +73,11 @@
page: nextPage
})
.done(res => {
- self.page = res.data.page;
- self.totalPage = res.data.pageTotal;
- self.$set('productList', self.productList.concat(res.data.productList));
+ if (res.code === 200) {
+ self.page = res.data.page;
+ self.totalPage = res.data.pageTotal;
+ self.$set('productList', self.productList.concat(res.data.productList));
+ }
})
.fail(error => {
tip('网络出错~');
--
libgit2 0.24.0