product

+/**
+ *  商品列表页
+ *  @author  chen xuan <xuan.chen@yoho.cn>
+ */
+const listModel = require('../models/list');
+
+exports.index = (req, res) =>{
+    res.render('list');
+};
+
+/*
+ * 获取 商品列表
+ */
+exports.getProducts = (req, res, next)=>{
+    listModel.search()
+        .then(data=>{
+            res.json(data);
+        })
+        .catch(next);
+};

+/**
+ * sub app product
+ * @author: chen xuan<xuan.chen@yoho.cn>
+ * @date: 2016/07/19
+ */
+
+var express = require('express'),
+    path = require('path'),
+    hbs = require('express-handlebars');
+
+var app = express();
+
+// set view engin
+var doraemon = path.join(__dirname, '../../doraemon/views'); // parent view root
+
+app.on('mount', function(parent) {
+    delete parent.locals.settings; // 不继承父 App 的设置
+    Object.assign(app.locals, parent.locals);
+});
+
+app.set('views', path.join(__dirname, 'views/action'));
+app.engine('.hbs', hbs({
+    extname: '.hbs',
+    defaultLayout: 'layout',
+    layoutsDir: doraemon,
+    partialsDir: [path.join(__dirname, 'views/partial'), `${doraemon}/partial`],
+    helpers: global.yoho.helpers
+}));
+
+// router
+app.use(require('./router'));
+
+module.exports = app;

+/**
+ *  product list Model
+ */
+'use strict';
+const api = global.yoho.API;
+const camelCase = global.yoho.camelCase;
+const path = require('path');
+const processProductList = require(path.join(global.utils, '/product-process')).processProductList;
+
+
+let list = {
+
+    /**
+     * 商品搜索
+     * @param  {[type]} params [description]
+     * @return {[type]}        [description]
+     */
+    search(params) {
+        return api.post('', {
+            method: 'app.search.sales',
+            limit: 4,
+            saleType: 2,
+            yh_channel: 3
+        }, {
+            cache: true,
+            code: 200
+        })
+        .then(result => {
+            result = camelCase(result);
+            result.data.productList = processProductList(result.data.productList);
+            return result;
+        });
+    }
+};
+
+
+module.exports = list;

+/**
+ * router of sub app product
+ * @author: chen xuan<xuan.chen@yoho.cn>
+ * @date: 2016/07/19
+ */
+
+'use strict';
+
+const Router = require('express').Router;
+const cRoot = './controllers';
+const productList = require(`${cRoot}/list`);
+
+const router = Router();
+// 商品列表
+router.use('/list', (req, res, next) => {
+    req.module = 'product';
+    req.page = 'list';
+    next();
+});
+router.get('/list', productList.index);
+router.post('/list', productList.getProducts);
+
+module.exports = router;

+<div id="product-list">
+    <Sort></Sort>
+    <List url="/product/list" :query='{a:1}'></List>
+</div>
\ No newline at end of file

@@ -6,6 +6,7 @@
 
 module.exports = app => {
     app.use('/', require('./apps/channel'));
+    app.use('/product', require('./apps/product'));
 
     // 组件示例
     if (app.locals.devEnv) {

@@ -57,6 +57,7 @@
     "handlebars": "^4.0.5",
     "handlebars-loader": "^1.3.0",
     "husky": "^0.11.4",
+    "node-sass": "^3.8.0",
     "nodemon": "1.9.2",
     "postcss-assets": "^4.0.1",
     "postcss-cachebuster": "^0.1.3",
@@ -70,6 +71,7 @@
     "postcss-sprites": "^3.1.2",
     "postcss-use": "^2.2.0",
     "precss": "^1.4.0",
+    "sass-loader": "^4.0.0",
     "shelljs": "^0.7.0",
     "style-loader": "^0.13.1",
     "stylelint": "^6.9.0",

+let Vue = require('yoho-vue');
+
+
+/**
+ * 替换参数
+ *
+ * @example
+ *   value = /{width}/{height}/{model}
+ *
+ *   {value | resize 100 200 2}  ==> /100/200/2
+ */
+Vue.filter('resize', (value, width, height, model)=>{
+    return value.replace(/({width}|{height}|{mode})/g, function($0) {
+        const dict = {
+            '{width}': width,
+            '{height}': height,
+            '{model}': model || 2
+        };
+
+        return dict[$0];
+    });
+});

+const Vue = require('yoho-vue');
+const Sort = require('component/sort.vue');
+const List = require('component/list.vue');
+
+new Vue({
+    el: '#product-list',
+    components: {
+        List,Sort
+    }
+})
\ No newline at end of file

+<template>
+    <div class="goods-box">
+        <ul class="cardlist card-large">
+            <li class="card" v-for="item in items">
+                <div class="card-pic">
+                    <a href="">
+                        <img :src="item.img" alt="{{item.name}}">
+                    </a>
+                </div>
+                <div class="card-bd">
+                    <h2 class="card-label">
+                        <a href="">{{item.label}}</a>
+                    </h2>
+                    <span class="good-price" :class="{'old-price': item.market_price}" v-if="item.market_price">¥ {{item.market_price}}</span>
+                    <span class="good-price" :class="{'sale-price': item.market_price}">¥ {{item.sale_price}}</span>
+                </div>
+            </li>
+        </ul>
+    </div>
+</template>
+<script>
+let $ = require('yoho-jquery');
+
+module.exports = {
+    props: {
+        //请求 地址
+        url: {
+            type: String,
+            required: true
+        },
+        //请求参数
+        query: Object
+    },
+    data: function() {
+        return {
+            items: []
+        }
+    },
+    methods: {
+        fetch: function() {
+            $.ajax({
+                url: this.url,
+                type: 'POST',
+            })
+            .then(data=>{
+                console.log(data)
+            })
+        }
+    },
+    ready: function() {
+        this.fetch()
+    },
+
+}
+</script>
+<style>
+@import '../../scss/common/color';
+.cardlist {
+    list-style: none;
+    margin: 0;
+    padding: 0;
+}
+
+.card-large {
+    .card {
+        float: left;
+        width: 372px;
+        margin-right: 6px;
+        &:nth-child(2n) {
+            margin-right: 0;
+        }
+        ;
+    }
+    .card-pic {
+        width: 100%;
+        height: 499px;
+        a,
+        img {
+            display: block;
+            width: 100%;
+            height: 100%;
+        }
+    }
+    .card-bd {
+        min-height: 180px;
+        margin-left: 30px;
+        margin-right: 30px;
+        padding-top: 25px;
+        text-align: center;
+        font-size: 24px;
+    }
+    .card-label {
+        margin: 0 0 10px 0;
+        font-size: inherit;
+        font-weight: normal;
+    }
+}
+
+.good-price {
+    color: #b0b0b0;
+    margin-right: 10px;
+    &:last-of-type {
+        margin-right: 0;
+    }
+    &.old-price {
+        text-decoration: line-through;
+    }
+    &.sale-price {
+        color: $red;
+    }
+}
+</style>

+<template>
+    <ul class="sort-navs clearfix">
+        <li class="sort-item active"><span>默认</span></li>
+        <li class="sort-item">
+            <span class="sort-name">最新</span>
+        </li>
+        <li class="sort-item">
+            <span class="sort-name">价格</span>
+        </li>
+        <li class="sort-item">
+            <span class="sort-name">折扣</span>
+        </li>
+    </ul>
+</template>
+<script>
+module.exports = {
+
+}
+</script>
+<style>
+@import '../../scss/common/color';
+
+.sort-navs {
+    list-style: none;
+    margin: 0;
+    padding: 25px 0;
+    color: $grey;
+}
+
+.sort-item {
+    position: relative;
+    display: block;
+    width: 25%;
+    float: left;
+    text-align: center;
+
+    &:after {
+        content: '|';
+        position: absolute;
+        right: 0;
+        color: $grey;
+        font-size: 28px;
+    }
+    &:last-of-type:after {
+        display: none;
+    }
+
+    .sort-name {
+        font-size: 28px;
+    }
+
+    &.active {
+        color: $black;
+    }
+}
+</style>