|
|
|
<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> |
...
|
...
|
|
