fe / yohoblk-wap · Commits

Go to a project

Authored by shuiling.wang@yoho.cn
Commit 8c8035b0f80f51f43a2e64bc993bdc175049b358 1 parent 2c2db058

个人中心修改

Inline Side-by-side
Showing 5 changed files with 167 additions and 31 deletions
1 'use strict'; 1 'use strict';
2 2
3 const fs = require('fs'); 3 const fs = require('fs');
4 -let devHost = '127.0.0.1'; 4 +let devHost = 'm.yohoblk.com'; // todo modify wsl
5 5
6 fs.readFile('.devhost', (err, buf)=> { 6 fs.readFile('.devhost', (err, buf)=> {
7 if (!err) { 7 if (!err) {
@@ -6,11 +6,15 @@ module.exports = () => { @@ -6,11 +6,15 @@ module.exports = () => {
6 const token = req.cookies._YOHOTOKEN; 6 const token = req.cookies._YOHOTOKEN;
7 const key = `-_-!!!${uid}!!!-_-`; 7 const key = `-_-!!!${uid}!!!-_-`;
8 8
  9 + console.log(uid)
  10 +
9 if (md5(key) === token) { 11 if (md5(key) === token) {
10 req.user.uid = uid; 12 req.user.uid = uid;
11 delete req.cookies._YOHOUID; 13 delete req.cookies._YOHOUID;
12 } 14 }
13 15
  16 + req.user.uid = 51477204; // todo modify wsl
  17 +
14 next(); 18 next();
15 }; 19 };
16 }; 20 };
1 const info = { 1 const info = {
2 - host: '127.0.0.1', 2 + host: 'm.yohoblk.com', // todo modify wsl
3 port: 5004, 3 port: 5004,
4 - publicPath: 'http://127.0.0.1:5004/' 4 + publicPath: 'http://m.yohoblk.com:5004/' // todo modify wsl
5 }; 5 };
6 6
7 module.exports = info; 7 module.exports = info;
@@ -40,6 +40,7 @@ const yoho = { @@ -40,6 +40,7 @@ const yoho = {
40 * 判断是否是 登录 40 * 判断是否是 登录
41 */ 41 */
42 isLogin() { 42 isLogin() {
  43 + return true; //todo del wsl
43 return cookie.get('_YOHOUID'); 44 return cookie.get('_YOHOUID');
44 }, 45 },
45 46
1 <template> 1 <template>
2 - <cheader title="我的" class="ghost" fixed v-ref:header> 2 + <!--<cheader title="我的" class="ghost" fixed v-ref:header>
3 <i slot="left" class="icon icon-setting" id="setting"></i> 3 <i slot="left" class="icon icon-setting" id="setting"></i>
4 - </cheader>  
5 - <div class="my-header"> 4 + </cheader>-->
  5 + <div class="my-header" v-if="data.nickName">
6 <a class="user-info auth" id="user-info" href='/me/mydetails'> 6 <a class="user-info auth" id="user-info" href='/me/mydetails'>
7 <img class="user-avatar" :src="headIco" @error="setEmptyimg"> 7 <img class="user-avatar" :src="headIco" @error="setEmptyimg">
8 - </a>  
9 <span class="username">{{ data.nickName }}</span> 8 <span class="username">{{ data.nickName }}</span>
10 - <a class="vip-level level-{{data.vipLevel}}" v-if="data.vipLevel" href='/me/grade'></a> 9 + <div class="account-mg">账号管理<span class="icon icon-right"></span></div>
  10 + </a>
  11 + <!--<a class="vip-level level-{{data.vipLevel}}" v-if="data.vipLevel" href='/me/grade'></a>-->
  12 + </div>
  13 + <div class="my-header unlisted" v-else>
  14 + <span class="auth username">登录/注册</span>
  15 + </div>
  16 + <a class="change-channel">
  17 + <span class="label">切换购物频道</span>
  18 + <span class="channel">MEN<span class="icon icon-right"></span></span>
  19 + </a>
  20 + <div class="group-list">
  21 + <div class="user-count">
  22 + <a class="auth uc-item" href="">
  23 + <p class="num">{{productNum}}</p>
  24 + <p class="label">商品收藏</p>
  25 + </a>
  26 + <a class="auth uc-item" href="">
  27 + <p class="num">{{editorialNum}}</p>
  28 + <p class="label">资讯收藏</p>
  29 + </a>
  30 + <a class="auth uc-item" href="/me/records?type={{recordNum}}">
  31 + <p class="num">{{recordNum}}</p>
  32 + <p class="label">浏览记录</p>
  33 + </a>
  34 + </div>
11 </div> 35 </div>
12 <div class="my-order"> 36 <div class="my-order">
13 - <a class="order-title auth" href="/me/order?type=1"> 37 + <!--<a class="order-title auth" href="/me/order?type=1">
14 我的订单 38 我的订单
15 <span class="read-order"> 39 <span class="read-order">
16 查看全部订单 <span class="icon icon-right"></span> 40 查看全部订单 <span class="icon icon-right"></span>
17 </span> 41 </span>
18 - </a> 42 + </a>-->
19 <div class="order-type clearfix"> 43 <div class="order-type clearfix">
20 <a class="type-item auth" href="/me/order?type=2"> 44 <a class="type-item auth" href="/me/order?type=2">
21 <span class="icon icon-card"></span> 45 <span class="icon icon-card"></span>
@@ -37,14 +61,13 @@ @@ -37,14 +61,13 @@
37 <span class="item-name">退换货</span> 61 <span class="item-name">退换货</span>
38 <span class="num" v-if="data.refund_exchange_num">{{data.refund_exchange_num}}</span> 62 <span class="num" v-if="data.refund_exchange_num">{{data.refund_exchange_num}}</span>
39 </a> 63 </a>
40 - </div>  
41 - </div>  
42 - <div class="group-list">  
43 - <a class="glist-item auth" id="address">  
44 - 地址管理  
45 - <span class="num">{{data.address_num}} <span class="icon icon-right"></span></span> 64 + <a class="type-item auth" href="/me/order?type=1">
  65 + <span class="icon icon-money"></span>
  66 + <span class="item-name">全部订单</span>
  67 + <span class="num" v-if="data.refund_exchange_num">{{data.refund_exchange_num}}</span>
46 </a> 68 </a>
47 </div> 69 </div>
  70 + </div>
48 <div class="group-list"> 71 <div class="group-list">
49 <a class="glist-item auth" href="/me/collection"> 72 <a class="glist-item auth" href="/me/collection">
50 我的收藏 73 我的收藏
@@ -55,22 +78,34 @@ @@ -55,22 +78,34 @@
55 <span class="num">{{recordNum}}<span class="icon icon-right"></span></span> 78 <span class="num">{{recordNum}}<span class="icon icon-right"></span></span>
56 </a> 79 </a>
57 </div> 80 </div>
58 - <div class="group-list"> 81 + <!--<div class="group-list">
59 <a class="glist-item auth" href="/me/mycurrency"> 82 <a class="glist-item auth" href="/me/mycurrency">
60 有货币 83 有货币
61 <span class="num">{{data.yoho_coin_num}} <span class="icon icon-right"></span></span> 84 <span class="num">{{data.yoho_coin_num}} <span class="icon icon-right"></span></span>
62 </a> 85 </a>
63 - </div> 86 + </div>-->
64 <div class="group-list"> 87 <div class="group-list">
  88 + <a class="glist-item auth" id="address">
  89 + 地址管理
  90 + <span class="num">{{data.address_num}} <span class="icon icon-right"></span></span>
  91 + </a>
65 <a class="glist-item" href="/help"> 92 <a class="glist-item" href="/help">
66 帮助中心 93 帮助中心
67 <span class="num"><span class="icon icon-right"></span></span> 94 <span class="num"><span class="icon icon-right"></span></span>
68 </a> 95 </a>
69 <p class="glist-item"> 96 <p class="glist-item">
70 电话客服 97 电话客服
71 - <span class="num tel">400-889-9646</span> 98 + <span class="num tel">400-889-9646<span class="icon icon-right"></span></span>
  99 + </p>
  100 + <p class="glist-item ghost" id="setting">
  101 + 设置
  102 + <span class="num"><span class="icon icon-right"></span></span>
72 </p> 103 </p>
73 </div> 104 </div>
  105 +
  106 + <div class="group-list">
  107 + <img class="home-banner">
  108 + </div>
74 </template> 109 </template>
75 110
76 <script> 111 <script>
@@ -97,7 +132,9 @@ @@ -97,7 +132,9 @@
97 return { 132 return {
98 data: {}, 133 data: {},
99 headIco: '', 134 headIco: '',
100 - recordNum: '' 135 + recordNum: 0,
  136 + productNum: 0,
  137 + editorialNum: 0
101 }; 138 };
102 }, 139 },
103 components: { 140 components: {
@@ -139,7 +176,7 @@ @@ -139,7 +176,7 @@
139 } 176 }
140 } else { 177 } else {
141 this.data = { 178 this.data = {
142 - nickName: '登录/注册' 179 + nickName: false
143 }; 180 };
144 this.setEmptyimg(); 181 this.setEmptyimg();
145 182
@@ -248,21 +285,21 @@ @@ -248,21 +285,21 @@
248 } 285 }
249 286
250 .my-header { 287 .my-header {
251 - height: 469px;  
252 - background: resolve("me/header-bg.png"); 288 + height: 260px;
  289 + /*background: resolve("me/header-bg.png");*/
  290 + background: #fff;
253 background-size: cover; 291 background-size: cover;
  292 + padding: 0 30px;
254 } 293 }
255 294
256 .user-info { 295 .user-info {
257 - display: block; 296 + float: left;
258 position: relative; 297 position: relative;
259 - top: 145px;  
260 - padding: 0 30px;  
261 - margin: 0 180px; 298 + top: 56px;
262 color: #000; 299 color: #000;
263 font-size: 34px; 300 font-size: 34px;
264 height: 190px; 301 height: 190px;
265 - text-align: center; 302 + text-align: left;
266 303
267 .user-avatar { 304 .user-avatar {
268 display: inline-block; 305 display: inline-block;
@@ -275,6 +312,18 @@ @@ -275,6 +312,18 @@
275 /* border: 3px solid #b0b0b0; */ 312 /* border: 3px solid #b0b0b0; */
276 background: resolve("me/user-icon.png"); 313 background: resolve("me/user-icon.png");
277 background-size: 100%; 314 background-size: 100%;
  315 + vertical-align: middle;
  316 + }
  317 + }
  318 +
  319 + .account-mg {
  320 + display: inline-block;
  321 + position: relative;
  322 + top: 10px;
  323 + font-size: 32px;
  324 +
  325 + .icon-right {
  326 + margin-left: 10px;
278 } 327 }
279 } 328 }
280 329
@@ -311,13 +360,33 @@ @@ -311,13 +360,33 @@
311 } 360 }
312 361
313 .username { 362 .username {
  363 + width: 330px;
  364 + display: inline-block;
  365 + text-align: left;
  366 + text-overflow: ellipsis;
  367 + white-space: nowrap;
  368 + font-size: 32px;
  369 + position: relative;
  370 + top: 10px;
  371 + }
  372 +
  373 + .unlisted {
  374 + padding: 0;
  375 +
  376 + .username {
  377 + width: 300px;
  378 + height: 88px;
  379 + line-height: 88px;
314 display: block; 380 display: block;
315 text-align: center; 381 text-align: center;
316 text-overflow: ellipsis; 382 text-overflow: ellipsis;
317 white-space: nowrap; 383 white-space: nowrap;
318 font-size: 32px; 384 font-size: 32px;
  385 + margin: 0 auto;
319 position: relative; 386 position: relative;
320 - top: 140px; 387 + top: 84px;
  388 + border: 1px solid #434343;
  389 + }
321 } 390 }
322 391
323 .my-order { 392 .my-order {
@@ -374,7 +443,7 @@ @@ -374,7 +443,7 @@
374 line-height: 1.5; 443 line-height: 1.5;
375 width: 86px; 444 width: 86px;
376 margin-top: 13px; 445 margin-top: 13px;
377 - margin-left: 115px; 446 + margin-left: 60px;
378 447
379 &.highlight { 448 &.highlight {
380 background: #eee; 449 background: #eee;
@@ -384,6 +453,10 @@ @@ -384,6 +453,10 @@
384 margin-left: 0; 453 margin-left: 0;
385 } 454 }
386 455
  456 + &:last-child {
  457 + width: 98px;
  458 + }
  459 +
387 .num { 460 .num {
388 position: absolute; 461 position: absolute;
389 top: -35px; 462 top: -35px;
@@ -408,6 +481,10 @@ @@ -408,6 +481,10 @@
408 border-bottom: 1px solid #eee; 481 border-bottom: 1px solid #eee;
409 background: #fff; 482 background: #fff;
410 483
  484 + &:last-child {
  485 + border-bottom: none;
  486 + }
  487 +
411 .glist-item { 488 .glist-item {
412 display: block; 489 display: block;
413 position: relative; 490 position: relative;
@@ -447,8 +524,62 @@ @@ -447,8 +524,62 @@
447 } 524 }
448 525
449 .tel { 526 .tel {
450 - padding-right: 10px; 527 + /*padding-right: 10px;*/
  528 + .icon-right {
  529 + margin-left: 10px;
  530 + }
  531 + }
  532 + }
  533 +
  534 + .change-channel {
  535 + height: 88px;
  536 + width: 100%;
  537 + background: #020202;
  538 + line-height: 88px;
  539 + padding: 0 30px;
  540 + box-sizing: border-box;
  541 + font-size: 32px;
  542 + display: block;
  543 +
  544 + .label {
  545 + float: left;
  546 + color: #fff;
  547 + }
  548 +
  549 + .channel {
  550 + float: right;
  551 + color: #fff;
  552 + }
451 } 553 }
  554 +
  555 + .user-count {
  556 + padding: 0 60px;
  557 + background: #fff;
  558 +
  559 + .uc-item {
  560 + display: inline-block;
  561 + margin: 24px 54px;
  562 + text-align: center;
  563 +
  564 + .num {
  565 + margin: 14px 0;
  566 + font-size: 24px;
  567 + width: 100%;
  568 + color: #000;
  569 + }
  570 +
  571 + .label {
  572 + margin: 14px 0;
  573 + font-size: 24px;
  574 + width: 100%;
  575 + }
  576 + }
  577 + }
  578 +
  579 + .home-banner {
  580 + max-width: 100%;
  581 + display: block;
  582 + margin: 30px auto;
452 } 583 }
453 } 584 }
454 585