fe / yohoblk-wap · Commits

Go to a project

Authored by 沈志敏
Commit 917e0a3e8dc794245656685dd604b9d7d82b6262 1 parent 85272b82

fix bug

Inline Side-by-side
Showing 10 changed files with 411 additions and 363 deletions
... ... @@ -11,7 +11,7 @@ const helpers = global.yoho.helpers;
* 个人中心主页
*/
const component = {
index: (req, res, next) => {
index: (req, res) => {
const uid = req.user.uid;
if (!uid && req.xhr) {
... ... @@ -21,17 +21,22 @@ const component = {
});
}
res.render('index', {
module: 'me',
page: 'index'
});
},
userdata: (req, res, next) => {
const uid = req.user.uid;
homeModel.getUserHomeData(uid).then(data => {
const proData = data[0];
const result = {
module: 'me',
page: 'index',
noLocalCSS: true,
head_ico: proData && proData.head_ico ? helpers.image(proData.head_ico, 174, 174) : '',
nickname: Object.keys(proData).length ? proData.nickname : '登录/注册'
headIco: proData && proData.head_ico ? helpers.image(proData.head_ico, 174, 174) : '',
nickName: Object.keys(proData).length ? proData.nickname : '登录/注册'
};
res.render('index', Object.assign(result, data[1]));
return res.json(global.yoho.camelCase(Object.assign(result, data[1])));
}).catch(next);
},
mydetails: (req, res, next) => {
... ...
... ... @@ -19,6 +19,7 @@ const router = expressRouter();
// Your controller here
router.get('/me/', home.index); // 个人中心主页
router.get('/me/userdata', home.userdata); // 个人中心数据
router.get('/me/order', order.orders); // 订单
router.get('/me/order/detail', order.orderDetail);
... ...
<div class="my-page">
<div id="header" class="blk-header-wrap top-box">
<div class="blk-header">
<div class="blk-header-left">
<span class="icon icon-setting" id="setting"></span>
</div>
</div>
</div>
<div class="my-header">
<a class="user-info auth" id="user-info" href='/me/mydetails'>
<span class="user-avatar" {{#if head_ico}} style="background-image: url('{{head_ico}}');" {{/if}}></span>
</a>
<span class="username">{{nickname}}</span>
</div>
<div class="my-order">
<a class="order-title auth" href="/me/order?type=1">
我的订单
<span class="read-order">
查看全部订单 <span class="icon icon-right"></span>
</span>
</a>
<div class="order-type clearfix">
<a class="type-item auth" href="/me/order?type=2">
<span class="icon icon-wait-pay"></span>
<br>待付款
{{#if wait_pay_num}}
<span class="num">{{wait_pay_num}}</span>
{{/if}}
</a>
<a class="type-item auth" href="/me/order?type=3">
<span class="icon icon-wait-cargo"></span>
<br>待发货
{{#if wait_cargo_num}}
<span class="num">{{wait_cargo_num}}</span>
{{/if}}
</a>
<a class="type-item auth" href="/me/order?type=4">
<span class="icon icon-send-cargo"></span>
<br>待收货
{{#if send_cargo_num}}
<span class="num">{{send_cargo_num}}</span>
{{/if}}
</a>
<a class="type-item auth" href="/me/return">
<span class="icon icon-refund-exchange"></span>
<br>退换货
{{#if refund_exchange_num}}
<span class="num">{{refund_exchange_num}}</span>
{{/if}}
</a>
</div>
</div>
<div class="group-list">
<a class="glist-item auth" id="address">
地址管理
<span class="num">{{address_num}} <span class="icon icon-right"></span></span>
</a>
</div>
<div class="group-list">
<a class="glist-item auth" href="/me/collection">
收藏的商品
<span class="num">{{product_favorite_total}} <span class="icon icon-right"></span></span>
</a>
<a class="glist-item auth" href="/me/collection?tab=brand">
收藏的品牌
<span class="num">{{brand_favorite_total}} <span class="icon icon-right"></span></span>
</a>
</div>
<div class="group-list">
<a class="glist-item auth" href="/me/mycurrency">
YOHO 币
<span class="num">{{yoho_coin_num}} <span class="icon icon-right"></span></span>
</a>
</div>
<div class="group-list">
<a class="glist-item" href="/help">
帮助中心
<span class="num"><span class="icon icon-right"></span></span>
</a>
<a class="glist-item" href="/me/service">
在线客服
<span class="num"><span class="icon icon-right"></span></span>
</a>
</div>
<div id="home" class="my-page">
<home></home>
</div>
... ...
... ... @@ -243,6 +243,8 @@ const intercept = (url) => {
if (qs.tab === 'brand') {
header.defaultSelectedIndex = '1';
} else {
header.defaultSelectedIndex = '0';
}
return yoho.goPageView({
header: header
... ...
var yoho = require('yoho');
var $ = require('jquery');
var interceptClick = require('common/intercept-click');
const Vue = require('vue');
const home = require('me/home.vue');
const yoho = require('yoho');
yoho.ready(() => {
if (!yoho.isLogin) {
$('.auth').addClass('no-intercept');
$('.auth').on('click', function() {
var id = $(this).attr('id');
var href = $(this).attr('href');
yoho.goLogin(null, () => {
if (id === 'address') {
setTimeout(() => {
yoho.goAddress({
type: '2'
});
}, 100);
} else if (href !== '/me/mydetails') {
setTimeout(() => {
interceptClick.intercept(href);
}, 100);
}
});
return false;
});
} else {
// 地址管理
$('#address').on('click', function() {
yoho.goAddress({
type: '2'
});
return false;
});
}
// 系统设置
$('#setting').on('click', function() {
yoho.goSetting();
return false;
});
yoho.showLoading(false);
window.addEventListener('touchmove', function() {
var topHeight = document.body.scrollTop;
if (topHeight > 50) {
$('#header').addClass('top-change');
} else {
$('#header').removeClass('top-change');
}
});
document.addEventListener('visibilitychange', () => {
if (!document.hidden) {
location.reload();
new Vue({
el: '#home',
components: {
home
}
});
});
... ...
... ... @@ -24,14 +24,16 @@ const yoho = {
isApp: /yh_blk/i.test(navigator.userAgent || ''),
/**
* 判断是否是 登录
* JS 与 APP 共享的对象
*/
isLogin: cookie.get('_YOHOUID'),
data: window.yohoInterfaceData,
/**
* JS 与 APP 共享的对象
* 判断是否是 登录
*/
data: window.yohoInterfaceData,
isLogin() {
return cookie.get('_YOHOUID');
},
ready(callback) {
if (this.isApp) {
... ...
.my-page {
color: #444;
background: #f0f0f0;
a {
color: #000;
}
.blk-header {
box-sizing: content-box;
position: fixed;
top: 0;
right: 0;
left: 0;
z-index: 210;
padding: 20px 30px;
height: 70px;
max-width: 750px;
margin-left: auto;
margin-right: auto;
line-height: 70px;
font-size: 48px;
background-color: #fff;
border-bottom: 1px solid #eee;
color: #000;
.icon {
vertical-align: middle;
}
}
.top-box {
.blk-header {
background-color: transparent;
border-bottom: 0;
}
}
.top-change {
.blk-header {
background-color: #fff;
}
}
.blk-header-left {
float: left;
}
.blk-header-gap {
height: calc(70 + 20 * 2 + 1)px;
background-color: transparent;
}
.my-header {
height: 469px;
background: resolve("me/header-bg.png");
background-size: cover;
}
.user-info {
display: block;
position: relative;
top: 145px;
padding: 0 30px;
margin: 0 180px;
color: #000;
font-size: 34px;
text-align: center;
.user-avatar {
display: inline-block;
position: relative;
width: 174px;
height: 174px;
border-radius: 50%;
margin: 0 auto;
border: 3px solid #b0b0b0;
background: resolve("me/user-icon.png");
background-size: 100%;
}
}
.username {
display: block;
text-align: center;
text-overflow: ellipsis;
white-space: nowrap;
font-size: 32px;
position: relative;
top: 140px;
}
.my-order {
margin-bottom: 20px;
border-top: 1px solid #eee;
border-bottom: 1px solid #eee;
background: #fff;
.order-title {
display: block;
padding: 0 30px;
font-size: 34px;
line-height: 88px;
&.highlight {
background: #eee;
}
.read-order {
color: #b0b0b0;
font-size: 30px;
float: right;
}
}
.order-type {
padding: 20px 0;
text-align: center;
border-top: 1px solid #eee;
.icon {
font-size: 45px;
}
.type-item {
position: relative;
float: left;
color: #444;
font-size: 24px;
line-height: 1.5;
width: 75px;
margin-left: 130px;
&.highlight {
background: #eee;
}
&:first-child {
margin-left: 34px;
}
.num {
position: absolute;
top: -35px;
right: -20px;
width: 72px;
height: 72px;
font-size: 34px;
line-height: 72px;
color: #fff;
background: #f03d35;
text-align: center;
border-radius: 50%;
transform: scale(0.5);
}
}
}
}
.group-list {
margin-bottom: 20px;
border-top: 1px solid #eee;
border-bottom: 1px solid #eee;
background: #fff;
.glist-item {
display: block;
position: relative;
padding: 0 30px;
font-size: 34px;
line-height: 88px;
overflow: hidden;
&.highlight {
background: #eee;
}
&:after {
content: "";
position: absolute;
right: 0;
bottom: 0;
width: 100%;
height: 0;
border-top: 1px solid #eee;
}
&:last-child:after {
content: none;
}
}
.icon {
font-size: 34px;
vertical-align: top;
}
.num {
color: #b0b0b0;
float: right;
}
}
}
.app.ios {
.blk-header {
padding-top: 80px;
}
}
@import "home";
@import "help";
@import "helpdetail";
@import "feedback";
... ...
<template>
<div id="header" class="blk-header-wrap top-box">
<div class="blk-header">
<div class="blk-header-left">
<span class="icon icon-setting" id="setting"></span>
</div>
</div>
</div>
<div class="my-header">
<a class="user-info auth" id="user-info" href='/me/mydetails'>
<span class="user-avatar" :style="data.headIco ? 'background-image: url(' + data.headIco + ')' : ''"></span>
</a>
<span class="username">{{ data.nickName }}</span>
</div>
<div class="my-order">
<a class="order-title auth" href="/me/order?type=1">
我的订单
<span class="read-order">
查看全部订单 <span class="icon icon-right"></span>
</span>
</a>
<div class="order-type clearfix">
<a class="type-item auth" href="/me/order?type=2">
<span class="icon icon-wait-pay"></span>
<br>待付款
<span class="num" v-if="data.waitPayNum">{{data.waitPayNum}}</span>
</a>
<a class="type-item auth" href='/me/order?type=3'>
<span class="icon icon-wait-cargo"></span>
<br>待发货
<span class="num" v-if="data.waitCargoNum">{{data.waitCargoNum}}</span>
</a>
<a class="type-item auth" href="/me/order?type=4">
<span class="icon icon-send-cargo"></span>
<br>待收货
<span class="num" v-if="data.sendCargoBum">{{data.sendCargoBum}}</span>
</a>
<a class="type-item auth" href="/me/return">
<span class="icon icon-refund-exchange"></span>
<br>退换货
<span class="num" v-if="data.refundExchangeNum">{{data.refundExchangeNum}}</span>
</a>
</div>
</div>
<div class="group-list">
<a class="glist-item auth" id="address">
地址管理
<span class="num">{{data.addressNum}} <span class="icon icon-right"></span></span>
</a>
</div>
<div class="group-list">
<a class="glist-item auth" href="/me/collection">
收藏的商品
<span class="num">{{data.productFavoriteTotal}} <span class="icon icon-right"></span></span>
</a>
<a class="glist-item auth" href="/me/collection?tab=brand">
收藏的品牌
<span class="num">{{data.brandFavoriteTotal}} <span class="icon icon-right"></span></span>
</a>
</div>
<div class="group-list">
<a class="glist-item auth" href="/me/mycurrency">
YOHO 币
<span class="num">{{data.yohoCoinNum}} <span class="icon icon-right"></span></span>
</a>
</div>
<div class="group-list">
<a class="glist-item" href="/help">
帮助中心
<span class="num"><span class="icon icon-right"></span></span>
</a>
<a class="glist-item" href="/me/service">
在线客服
<span class="num"><span class="icon icon-right"></span></span>
</a>
</div>
</template>
<script>
const yoho = require('yoho');
const $ = require('jquery');
const interceptClick = require('common/intercept-click');
module.exports = {
data() {
return {
data: {}
};
},
methods: {
reload() {
$('#address').off('click', this.addressClick)
$('.auth').removeClass('no-intercept');
$('.auth').off('click', this.authClick);
if (yoho.isLogin()) {
$.ajax({
url: '/me/userdata'
}).then(result => {
this.data = result || {};
});
$('#address').on('click', this.addressClick);
} else {
this.data = {
nickName : '登录/注册'
};
$('.auth').addClass('no-intercept');
$('.auth').on('click', this.authClick);
}
},
addressClick() {
yoho.goAddress({
type: '2'
});
return false;
},
authClick(e) {
const id = $(e.target).attr('id');
const href = $(e.target).attr('href');
yoho.goLogin(null, () => {
this.reload();
setTimeout(() => {
if (id === 'address') {
yoho.goAddress({
type: '2'
});
} else if (href !== '/me/mydetails') {
interceptClick.intercept(href);
}
}, 200);
});
return false;
}
},
ready() {
this.reload();
$('#setting').on('click', function() {
yoho.goSetting();
return false;
});
window.addEventListener('touchmove', function() {
var topHeight = document.body.scrollTop;
if (topHeight > 50) {
$('#header').addClass('top-change');
} else {
$('#header').removeClass('top-change');
}
});
document.addEventListener('visibilitychange', () => {
if (!document.hidden) {
this.reload();
}
});
}
};
</script>
<style>
.my-page {
color: #444;
background: #f0f0f0;
a {
color: #000;
}
.blk-header {
box-sizing: content-box;
position: fixed;
top: 0;
right: 0;
left: 0;
z-index: 210;
padding: 20px 30px;
height: 70px;
max-width: 750px;
margin-left: auto;
margin-right: auto;
line-height: 70px;
font-size: 48px;
background-color: #fff;
border-bottom: 1px solid #eee;
color: #000;
.icon {
vertical-align: middle;
}
}
.top-box {
.blk-header {
background-color: transparent;
border-bottom: 0;
}
}
.top-change {
.blk-header {
background-color: #fff;
}
}
.blk-header-left {
float: left;
}
.blk-header-gap {
height: calc(70 + 20 * 2 + 1)px;
background-color: transparent;
}
.my-header {
height: 469px;
background: resolve("me/header-bg.png");
background-size: cover;
}
.user-info {
display: block;
position: relative;
top: 145px;
padding: 0 30px;
margin: 0 180px;
color: #000;
font-size: 34px;
text-align: center;
.user-avatar {
display: inline-block;
position: relative;
width: 174px;
height: 174px;
border-radius: 50%;
margin: 0 auto;
border: 3px solid #b0b0b0;
background: resolve("me/user-icon.png");
background-size: 100%;
}
}
.username {
display: block;
text-align: center;
text-overflow: ellipsis;
white-space: nowrap;
font-size: 32px;
position: relative;
top: 140px;
}
.my-order {
margin-bottom: 20px;
border-top: 1px solid #eee;
border-bottom: 1px solid #eee;
background: #fff;
.order-title {
display: block;
padding: 0 30px;
font-size: 34px;
line-height: 88px;
&.highlight {
background: #eee;
}
.read-order {
color: #b0b0b0;
font-size: 30px;
float: right;
}
}
.order-type {
padding: 20px 0;
text-align: center;
border-top: 1px solid #eee;
.icon {
font-size: 45px;
}
.type-item {
position: relative;
float: left;
color: #444;
font-size: 24px;
line-height: 1.5;
width: 75px;
margin-left: 130px;
&.highlight {
background: #eee;
}
&:first-child {
margin-left: 34px;
}
.num {
position: absolute;
top: -35px;
right: -20px;
width: 72px;
height: 72px;
font-size: 34px;
line-height: 72px;
color: #fff;
background: #f03d35;
text-align: center;
border-radius: 50%;
transform: scale(0.5);
}
}
}
}
.group-list {
margin-bottom: 20px;
border-top: 1px solid #eee;
border-bottom: 1px solid #eee;
background: #fff;
.glist-item {
display: block;
position: relative;
padding: 0 30px;
font-size: 34px;
line-height: 88px;
overflow: hidden;
&.highlight {
background: #eee;
}
&:after {
content: "";
position: absolute;
right: 0;
bottom: 0;
width: 100%;
height: 0;
border-top: 1px solid #eee;
}
&:last-child:after {
content: none;
}
}
.icon {
font-size: 34px;
vertical-align: top;
}
.num {
color: #b0b0b0;
float: right;
}
}
}
.app.ios {
.blk-header {
padding-top: 80px;
}
}
</style>
... ...
... ... @@ -101,9 +101,11 @@
const header = $.extend({}, interceptClick.defaultTitleMap[2]);
header.title.des = '订单详情';
yohoAPI.updateNavigationBar({
header: header
});
setTimeout(() => {
yohoAPI.updateNavigationBar({
header: header
});
}, 200);
},
reload() {
this.show = false;
... ...