fe / yohoblk-wap · Commits

Go to a project

Authored by 沈志敏
Commit 2e21ffff4fad2b18bd8eeb9268175a79312163a4 1 parent aa13e6ea

个人中心-主页

Inline Side-by-side
Showing 8 changed files with 269 additions and 13 deletions
/**
* 主页
* @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));
}
};
... ...
... ... @@ -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 的设置
... ...
... ... @@ -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;
\ 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
... ...
... ... @@ -6,6 +6,7 @@
module.exports = app => {
app.use('/', require('./apps/channel'));
app.use('/home', require('./apps/home'));
// 组件示例
if (app.locals.devEnv) {
... ...
console.log("test");
\ No newline at end of file
... ...
.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 "home/index";
@import "example/index";
\ No newline at end of file
... ...