fe / yohoblk-wap · Commits

Go to a project

Authored by 陈轩
Commit 5616cb200c9389d189c21a426cb3953ec9e2c216 2 parents 4f056341 c39eac84

Merge remote-tracking branch 'origin/develop' into develop

Inline Side-by-side
Showing 26 changed files with 488 additions and 74 deletions
... ... @@ -4,19 +4,23 @@
* @date: 2016/05/09
*/
'use strict';
const _ = require('lodash');
const helpers = global.yoho.helpers;
const channelModel = require('../models/channel');
/**
* 频道选择页
*/
const component = {
index: (req, res, next) => {
const channel = {
index(req, res) {
res.render('index', {
module: 'example',
module: 'channel',
page: 'home'
});
},
resources(req, res, next) {
channelModel.getResourcesData(req.yoho.channel).then(result => {
return res.json(result);
}).catch(next);
}
};
module.exports = component;
module.exports = channel;
... ...
'use strict';
const api = global.yoho.ServiceAPI;
const contentCode = require('../../../config/content-code');
const resourcesProcess = require('../../../utils/resources-process');
let channel = {
getResourcesData(c) {
return api.get('operations/api/v5/resource/get', {
content_code: contentCode.channel[c]
}, {
cache: true,
code: 200
}).then(result => {
return resourcesProcess(result.data);
});
}
};
module.exports = channel;
... ...
... ... @@ -8,10 +8,11 @@
const expressRouter = require('express').Router;
const cRoot = './controllers';
const channel = require(cRoot);
const channel = require(cRoot + '/channel');
const router = expressRouter();
router.get('/', channel.index); // 首页
router.get('/resources', channel.resources); // 资源位接口
module.exports = router;
... ...
<h1>Index</h1>
<div id="app">
<tab></tab>
<resources></resources>
</div>
... ...
/**
* 主页
* @author: Bi Kai<kai.bi@yoho.cn>
* @date: 2016/05/09
* @author: shenzm<zhimin.shen@yoho.cn>
* @date: 2016/07/18
*/
'use strict';
const _ = require('lodash');
const helpers = global.yoho.helpers;
/**
* 频道选择页
* 个人中心主页
*/
const component = {
index: (req, res, next) => {
res.render('index', {
module: 'example',
page: 'home'
});
var testData = {
isLogin: false,
head_ico: "",
profile_name: "XXX",
signinUrl: "/home",
wait_pay_num: 1,
wait_cargo_num: 2,
send_cargo_num: 3
}
res.render('index', _.merge({
module: 'home',
page: 'index'
}, testData));
}
};
module.exports = component;
module.exports = component;
\ No newline at end of file
... ...
... ... @@ -4,14 +4,14 @@
* @date: 2016/07/18
*/
var express = require('express'),
path = require('path'),
hbs = require('express-handlebars');
const express = require('express');
const path = require('path');
const hbs = require('express-handlebars');
var app = express();
const app = express();
// set view engin
var doraemon = path.join(__dirname, '../../doraemon/views'); // parent view root
const doraemon = path.join(__dirname, '../../doraemon/views'); // parent view root
app.on('mount', function(parent) {
delete parent.locals.settings; // 不继承父 App 的设置
... ... @@ -30,4 +30,4 @@ app.engine('.hbs', hbs({
// router
app.use(require('./router'));
module.exports = app;
module.exports = app;
\ No newline at end of file
... ...
... ... @@ -8,7 +8,9 @@
const router = require('express').Router();
const cRoot = './controllers';
const home = require(cRoot);
// Your controller here
router.get('/', home.index); // 个人中心主页
module.exports = router;
module.exports = router;
\ No newline at end of file
... ...
<h1>test</h1>
\ No newline at end of file
<div class="my-page yoho-page">
<div class="my-header">
{{#isLogin}}
<a class="user-info" href="/home/mydetails">
<span class="user-avatar" data-avatar="{{head_ico}}"></span>
<br><span class="username">{{profile_name}}</span>
</a>
{{/isLogin}}
{{^isLogin}}
<div class="user-info">
<a class="login-btn" href="{{signinUrl}}">
登录/注册
</a>
</div>
{{/isLogin}}
</div>
<div class="my-order">
<a class="order-title" href="/home/orders">
我的订单
<span>
查看全部订单 <span class="icon icon-right"></span>
</span>
</a>
<div class="order-type clearfix">
<a class="type-item" href="/home/orders?type=2">
<span>&#xe634;</span>
<br>待付款
{{#if wait_pay_num}}
<span class="num">{{wait_pay_num}}</span>
{{/if}}
</a>
<a class="type-item" href="/home/orders?type=3">
<span>&#xe63b;</span>
<br>待发货
{{#if wait_cargo_num}}
<span class="num">{{wait_cargo_num}}</span>
{{/if}}
</a>
<a class="type-item" href="/home/orders?type=4">
<span>&#xe633;</span>
<br>待收货
{{#if send_cargo_num}}
<span class="num">{{send_cargo_num}}</span>
{{/if}}
</a>
<a class="type-item" href="/home/orders?type=5">
<span>&#xe633;</span>
<br>退换货
{{#if send_cargo_num}}
<span class="num">{{send_cargo_num}}</span>
{{/if}}
</a>
</div>
</div>
<div class="group-list">
<a class="list-item" href="/home/address">
地址管理
<span class="num">3 <span class="icon icon-right"></span></span>
</a>
</div>
<div class="group-list">
<a class="list-item" href="/home/favorite">
收藏的商品
<span class="num">120 <span class="icon icon-right"></span></span>
</a>
<a class="list-item" href="/home/favorite?tab=brand">
收藏的品牌
<span class="num">100 <span class="icon icon-right"></span></span>
</a>
</div>
<div class="group-list">
<a class="list-item" href="/home/mycurrency">
YOHO 币
<span class="num">100 <span class="icon icon-right"></span></span>
</a>
</div>
<div class="group-list">
<a class="list-item" href="/home/help">
帮助中心
<span class="num"><span class="icon icon-right"></span></span>
</a>
<a class="list-item" href="/home/onlineService">
在线客服
<span class="num"><span class="icon icon-right"></span></span>
</a>
</div>
</div>
\ No newline at end of file
... ...
... ... @@ -11,6 +11,7 @@ const cRoot = './controllers';
const productList = require(`${cRoot}/list`);
const router = Router();
// 商品列表
router.use('/list', (req, res, next) => {
req.module = 'product';
... ...
... ... @@ -16,7 +16,7 @@ module.exports = {
siteUrl: '//m.yohobuy.com',
domains: {
api: 'http://devapi.yoho.cn:58078/',
service: 'http://devservice.yoho.cn:58077/'
service: 'http://123.206.1.104:28077/'
},
subDomains: {
host: '.m.yohobuy.com',
... ...
... ... @@ -6,52 +6,10 @@
'use strict';
const saleContentCode = {
boys: {
sale: '153180b9a88c0b565848850c523bb637',
breakCode: 'd763e3f8d208cbed8f100253ea4f8946',
vip: '6b9810a442efe1e6252b134154d36769'
},
girls: {
sale: '0b2d133419a0f7c381306fd3522365e1',
breakCode: '77258d0b526c7b6e243c1419877ead4a',
vip: 'e83f3582df32b6753eed49fda236a755'
},
kids: {
sale: 'de23648d28ee1e8a3f087a9dbac506f8',
breakCode: '3f0898f1089b7bef5f3e071725c7a608',
vip: '664935745012db6e2a96a7d57f75512f'
},
lifestyle: {
sale: '01269e498ff5b07756e0733ec0e88c75',
breakCode: '0020a5762771aa16902a666c9491394e',
vip: '647f1154d30b323ff46c787fc78aef65'
}
const channel = {
men: '9ee58aadd9559d07207fe4a98843eaac'
};
const guangContentCode = {
special: '89cc20483ee2cbc8a716dcfe2b6c7603'
};
const channelContentCode = {
boys: '8512bf0755cc549ac323f852c9fd945d',
girls: '189b6686065dbd6755dd6906cf03c002',
kids: 'b8c1bff53d4ea60f978926d538620636',
lifestyle: '61cd852c6afcf60660196154f66a3a62',
index: '7ba9118028f9b22090b57341487567eb'
};
const bottomBannerContentCode = {
boys: 'a2ec977c027d0cd9cdccb356ddf16b08',
girls: '8c8bd1b89a22e5895f05882e0825b493'
};
const outletContentCode = 'c19ffa03f053f4cac3690b22c8da26b7';
module.exports = {
sale: saleContentCode,
outlet: outletContentCode,
channel: channelContentCode,
bottom: bottomBannerContentCode,
guang: guangContentCode
channel
};
... ...
... ... @@ -7,6 +7,7 @@
module.exports = app => {
app.use('/', require('./apps/channel'));
app.use('/product', require('./apps/product'));
app.use('/home', require('./apps/home'));
// 组件示例
if (app.locals.devEnv) {
... ...
... ... @@ -12,7 +12,7 @@ module.exports = () => {
pageChannel: {},
yohoTitle: 'Yoho!BLK'
};
const channel = req.query.channel || req.cookies._Channel || 'boys';
const channel = req.query.channel || req.cookies._Channel || 'men';
// 用于头部颜色控制
yoho.pageChannel[channel] = true;
... ...
... ... @@ -77,6 +77,7 @@
"stylelint": "^6.9.0",
"stylelint-config-yoho": "1.2.5",
"vue-loader": "^8.5.3",
"vue-swipe": "^0.2.6",
"webpack": "^1.13.1",
"webpack-dev-server": "^1.14.1",
"webpack-stream": "^3.1.0",
... ...
const Vue = require('yoho-vue');
const tab = require('channel/tab.vue');
const resources = require('channel/resources.vue');
new Vue({
el: '#app',
components: {
tab: tab,
resources: resources
}
});
... ...
console.log("test");
\ No newline at end of file
... ...
... ... @@ -5,6 +5,6 @@ const List = require('component/list.vue');
new Vue({
el: '#product-list',
components: {
List,Sort
List, Sort
}
})
\ No newline at end of file
});
... ...
@import "home";
... ...
.my-page {
color: #444;
background: #f0f0f0;
a {
color: #444;
}
.user-info {
display: block;
position: relative;
padding: 0 30px;
color: #fff;
font-size: 34px;
line-height: 138px;
height: 449px;
background-size: cover;
background: #444;
/*background: resolve("home/header-bg.jpg"); */
text-align: center;
.user-avatar {
display: inline-block;
position: relative;
top: 88px;
width: 200px;
height: 200px;
border-radius: 50%;
border: 6px solid #a7a8a9;
background: #a7a8a9;
background-size: 100%;
}
.username {
display: inline-block;
padding: 0 16px;
text-overflow: ellipsis;
overflow: hidden;
white-space: nowrap;
max-width: 260px;
}
}
.login-btn {
display: inline-block;
top: 40px;
left: 194px;
width: 244px;
height: 82px;
line-height: 82px;
color: #fff;
border: 4px solid #fff;
margin: 120px auto;
}
.my-order {
margin-bottom: 30px;
border-top: 1px solid #e0e0e0;
border-bottom: 1px solid #e0e0e0;
background: #fff;
.order-title {
display: block;
padding: 0 30px;
font-size: 16PX;
line-height: 88px;
span {
color: #e0e0e0;
float: right;
}
&.highlight {
background: #eee;
}
}
.order-type {
padding: 20px 30px;
text-align: center;
border-top: 1px solid #e0e0e0;
.type-item {
position: relative;
float: left;
color: #444;
font-size: 14PX;
line-height: 1.5;
width: 170px;
&.highlight {
background: #eee;
}
.num {
position: absolute;
top: -24px;
right: 36px;
width: 72px;
height: 72px;
font-size: 40px;
line-height: 72px;
color: #fff;
background: #f03d35;
text-align: center;
border-radius: 50%;
transform: scale(0.5);
}
}
}
}
.group-list {
margin-bottom: 30px;
border-top: 1px solid #e0e0e0;
border-bottom: 1px solid #e0e0e0;
background: #fff;
.list-item {
display: block;
position: relative;
padding: 0 30px;
font-size: 16PX;
line-height: 90px;
&.highlight {
background: #eee;
}
&:after {
content: '';
position: absolute;
right: 0;
bottom: 0;
width: 100%;
height: 0;
border-top: 1px solid #f0f0f0;
}
&:last-child:after {
content: none;
}
}
.icon {
margin-right: 5px;
font-size: 30px;
vertical-align: top;
}
.num {
color: #e0e0e0;
float: right;
}
}
}
... ...
@charset "utf-8";
@import "common/index";
@import "example/index";
@import "channel/index";
@import "home/index";
... ...
<template>
<div class="resources">
<template v-for="floor in resources">
<div class="focus" v-if="floor.focus">
<focus :list="floor.data"></focus>
</div>
<div class="title-image" v-if="floor.titleImage">
<title-image></title-image>
</div>
</template>
</div>
</template>
<script>
const $ = require('yoho-jquery');
const tip = require('common/tip');
const focus = require('component/resources/focus.vue');
const titleImage = require('component/resources/title-image.vue');
module.exports = {
data() {
return {
resources: []
};
},
components: {
focus: focus,
titleImage: titleImage
},
init() {
$.ajax({
url: '/resources'
}).then(result => {
this.resources = result;
}).fail(() => {
tip('网络错误');
});
}
};
</script>
<style>
</style>
... ...
<template>
<div class="channel-tab">
<a v-for="(index, item) in channel" v-bind:class="{focus: index === current}" v-on:click.prevent="changeChannel(index)" href="{{item.url}}">
<span class="name">{{item.name | uppercase}}</span>
</a>
</div>
</template>
<script>
module.exports = {
data() {
return {
current: 0,
channel: [{
name: 'MEN男士',
url: '/men'
}, {
name: 'WOMEN女士',
url: '/women'
}, {
name: 'LIFESTYLE生活',
url: '/lifestyle'
}]
};
},
methods: {
changeChannel(index) {
this.current = index;
}
}
};
</script>
<style>
@import "../../scss/common/color";
.channel-tab {
width: 100%;
height: 90px;
font-size: 24px;
text-align: center;
background: $white;
a {
display: inline-block;
line-height: 90px;
width: 33%;
color: #999;
&.focus {
color: $black;
}
}
.name {
padding: 9px 0;
&.focus {
border-bottom: 4px solid $black;
}
}
.focus {
.name {
border-bottom: 4px solid $black;
}
}
}
</style>
... ...
<template>
<swipe class="my-swipe">
<swipe-item v-for="item in list" class="aaaa">
<a href="{{item.url}}" title="{{item.title}}">
<img src="{{item.src}}">
</a>
</swipe-item>
</swipe>
</template>
<script>
require('vue-swipe/dist/vue-swipe.css');
const swipe = require('vue-swipe');
module.exports = {
props: ['list'],
components: {
swipe: swipe.Swipe,
swipeItem: swipe.SwipeItem
}
};
</script>
<style>
</style>
... ...
<template>
<div class="focus">
title-image
</div>
</template>
<script>
module.exports = {
data() {
return {
message: 'resources'
};
}
};
</script>
<style>
</style>
... ...
... ... @@ -58,7 +58,7 @@ module.exports = {
}]
},
resolve: {
modulesDirectories: ['node_modules', './vue', './hbs']
modulesDirectories: ['node_modules', './vue', './hbs', './js']
},
plugins: [
new webpack.optimize.OccurenceOrderPlugin(),
... ...